整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著Android Q 與 iOS13 先后發布深色模式，深色氛圍一躍而上成為系統平臺級能力，這不禁讓我們重新認真思考深色模式對于文娛類產品有什么樣的價值與機會？
2019 年優酷經歷了一次體驗設計升級，在前期的設計探索中，優酷設計團隊嘗試了各種方向，其中包括全深色的界面。而隨著Android Q 與 iOS13 先后發布深色模式，之前隨公眾理解的深色氛圍一躍而上成為系統平臺級能力，這不禁讓我們重新認真思考深色模式對于文娛類產品有什么樣的價值與機會？
體驗設計升級期間嘗試的全深色方案：
深色界面在專注環境下與內容有更高的契合度 ， 更凸顯內容、緩解視覺疲勞
深色的背景降低了內容周圍元素的存在感，同時內容被凸顯出來，尤其是視頻和圖片會變的更加清晰，這樣會讓瀏覽者更加專注于內容，這讓深色界面與內容平臺更加契合。
由于深色消除了白光對人眼的刺激，這樣大大降低了用戶在長時間的視頻和圖片消費中視覺疲勞。
深色界面更易營造品質感與沉浸感
在我們視覺升級的初期方案探索中，全深色方案是第一時間吸引到大家的。大家包括非設計的同學能清楚的講出對深色界面的感受，包括“專業”“高級”“沉浸感”“很特別”。大家為什么會有這樣的感受，我嘗試找到了一些線索，我們對深色界面的認識來自于專業軟件、游戲、科幻電影給我們留下的印象。
深色界面更易建立填充感
白色背景的心理認知映射至日常生活的白紙和筆，白色在日常認知中是代表“空”，所有白色上的細微色彩變化都被理解為“添加”。而深色本身被理解為一種填充背景色，其認知屬性與其他頁面元素跟接近，從而讓頁面的填充感更強，這在一些信息匱乏的頁面會更明顯。
同時需要注意的一些點：
（1）文字的信息占比決定了是否將深色界面作為默認主題
幾乎所有的圖片編輯和視頻剪輯類以及部分視頻娛樂產品像抖音、Netflix等使用了默認的深色界面，但用我們也注意到這些產品的共同點是文字在產品中占極小的比重。原因是光線充足的環境下，白底黑字提供了最佳的可讀性，而黑底白字不僅降低了可讀性，同時有研究表明更容易產生視覺疲勞。所以要謹慎考慮文字在產品中所占的比重，來決定是否將深色作為默認主題。
（2）用戶和平臺都需要一個低成本開關
一個有趣的信息是“絕大多數的娛樂活動都發生在晚上”，優酷的數據也顯示用戶在夜間的分時活躍度和使用時長高于白天。而深色模式無疑能給用戶帶來更好的夜間使用體驗，而文字在優酷中占有相當一部分比重，所以我們同樣要考慮到白天文字的可讀性。考慮到平臺的技術實現成本和用戶的開啟成本，深色界面需要一個低成本的開關。對于深色模式價值的判斷，幫助我們在優酷此次深色模式設計上獲得更清晰的設計策略及方向。
Android Q 與 iOS13 先后發布深色模式后，我們等來了深色界面的“低成本開關”，優酷也迎來新一輪的設計升級。在著手之前我們首先制定了體驗的目標和方向，以便在關鍵點上快速地決策并達成共識。
全局印象一致、降低實現成本、建立靈活可控機制
全局印象一致：一些體現產品獨特性的視覺特征值得花費精力產出第二份設計做適配，讓它們在深色模式下也看上去和諧，而有些低優先級的但成本較高的適配可以降級處理或不做處理。深色模式不需要建立一套新的色彩層級關系，而是延續原有的色彩層級關系，只是使用了深色調的配色。但過程中如果發現原有的層級有可優化的空間，也不必大動干戈，因為深色模式之后，對于色彩的調整變得更加全局、徹底、簡單。
原有的深色定制的主題場景保持不變，不受深色模式的影響。例如高清頻道、會員首頁、導看場景、沉浸播放頁、運營場，這些場景使用特殊的主題體現特定的的產品目的和視覺感受，應該保持固定心智，不需要有模式的切換。少兒場景可以定制特殊的深色模式，原因是深色會給兒童帶來負面的心理影響。
降低實現成本、建立靈活可控機制：深色模式涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本。我們利用視覺產品化能力，將視覺屬性與框架布局分離并與開發邏輯相互對應，通過SDK 的方式統一管理，一處替換全端生效，遍于未來控制并快速定義產品風格。同時，我們遵循了 iOS HIG 中的語義命令方式，這對于設計師和開發都非常友好，并且我們與系統的融合度會更高，避免未來因為兼容性照成的各種問題。
產品印象：盡量保留產品的核心視覺特征
深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會改變壁紙和家具的固有色。我們主要對優酷五大欄目頭部氛圍和底欄圖標進行了深色的第二套設計，讓他們在深色上看起來和諧。
主背景色選擇：保證與內容的兼容度
色彩框架：包容且一致
我們將現有色彩進行歸類，并歸納出每個類型的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個色彩組合的唯一性，而不是單個色彩的唯一性。例如：白色會同時使用在背景和有些按鈕文字上，我們不能在深色模式中規定白色變成深色，因為在按鈕上不適用。我們應該規定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會受到影響。
值得注意的是要先抓住一般類型，再看特殊個例。類如：我們將文字、圖標歸納為信息層并劃分三個層級，而不是歸納為主標題、副標題、按鈕文字、底欄圖標、頂導航圖標。
用一般類型歸納色彩的用途可以涵蓋絕大部分的色彩類型，而特殊類型可以用場景、狀態、組件等維度來劃分，例如：“少兒一級背景色”、“可以隱藏的分割線”“黑色導航欄”。
色彩框架：
主要類型：
對比度的階梯：清晰降噪
我們在背景的對比度上設置均勻的階梯變化，這種均勻的變化有利于建立背景層級的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。
文字的對比度階梯則不同于背景，在深色和淺色模式下文字的對比度階梯是趨同的。原因是我們希望主標題和副標題要有足夠大的反差使主標題足夠醒目，而副標題與置灰文字的反差則不需要那么大，值得注意的是需要適度提升次要層級文字的對比度。
更好的對比度階梯有利于在復雜信息密度界面的視覺降噪。
可讀性：跨場景測試
深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環境中使用深色模式的同時也不能排除白天強光的使用場景，手機屏幕的自動亮度調節會給實際的比度帶來影響。我們觀察到 iOS 深色模式的設計提升了幾乎所有元素的對比度，這值得我們有所考慮。所以盡可能在這兩種極端環境中測試我們的最終設計，保證信息的可讀性。
規范化：建立深色模式色板
基于色彩框架以層級劃分色彩為主，特殊類型作補充，在對應的淺色模式的層級下添加深色模式的色彩。
同時我們需要在產品的真實場景中反復的對比嘗試確保實際效果是滿足要求的。
另外，一些細節上的處理仍然值得我們的關注：
圖標：面型圖標在深色下識別性更優
深色模式下線條型的圖標有時會顯得過于單薄缺少份量感導致關注度降低，為改善這種情況我們可以替換為塊面型的圖標。此外有研究表明多數情況下塊面型的圖標會比線條型的圖標有更好的易用性，他們會被更快速的識別。
分割線和陰影：轉換為填充色來區分
深色模式多數情況下對于層級的區隔來說，使用填充色會比分割線和陰影更有效。
深色模式不是簡單的顏色的明暗變化的處理，它是一套全新的設計風格，涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本，如何快速實現優酷雙端的深色模式適配是當前面臨的主要問題。
優酷去年設計主導與開發共同搭建視覺產品化能力，設計側針對優酷業務屬性把視覺進行不同顆粒度的拆解抽象，把影響視覺風格調性的最基礎屬性（顏色、字號、間距、圓角、尺寸）進行了統一design token命名，設計與開發團隊共同維護一套可擴展的視覺屬性。視覺屬性與框架布局分離并與開發邏輯相互對應，通過SDK 的方式統一管理，一處替換全端生效，遍于控制并快速定義產品風格。
在視覺產品化能力下進行深色模式的適配與落地相對來說比較容易。在兩個風格的轉化中主要需要適配：色彩、圖片。
色彩：使用語義命名交付設計
整個優酷系統顏色體系分：靜態色（在淺色模式下與深色模式下不需要變化的）、動態色（在深色模式下需要變化）。
動態色根據不同的層級進行重新語意化工程命名，底層還是保留靜態色design token 。整個顏色會由一個sdk 進行統一控制，也保證了整體的一致性。
同時，我們遵循了 iOS HIG 中的語義命令方式，這對于設計師和開發都非常友好。語義命名實際上是為深色模式的動態色建立一個令牌，例如：命名一個叫“主背景色”的動態色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設計師把“主背景色”標注在界面中相應的元素上，開發就可以實現這個元素兩種模式的色彩切換，當然我們還要為開發同學準備一份動態色的對照表。
復用與濾鏡
對于深色模式的圖片處理，我們給出以下建議：
（1）設計側盡可能一套圖片適配兩個模式, 例如，使用不透明度設置這類淡彩色可以同時適配淺色和深色模式，這是一種取巧的做法。
（2）開發側可以選擇代碼濾鏡
（3）對于一些無法復用的重要圖片，需根據深色界面增加一套新的切圖資源
工具化：設計的輸出與維系
通常設計完成后與開發之間的協作是通過sketch Measure直接一鍵導出標注即可。
那我們對基礎屬性進行統一design token命名后，后續的標注設計要如何標注？需要對照表格手動標注么？開發怎么看design token？
蓋亞是優酷設計主要在用的一個提效工具，不同于sketch Measure 導出RGB色值，蓋亞導出標注會對屬性的值進行符號化處理，顯示屬性對應的值的同時會顯示對應的design token，從而解決了設計輸出與開發實現的效率問題。
深色模式在用戶體驗中的價值體現還需要我們進一步的觀察和思考，相信實現這一設計僅僅是一個開端，深色模式怎樣跟文娛產品更緊密的配合，怎樣結合內容和用戶做出更多的洞察與創新是我們接下來的目標。
作者：文娛設計中心，公眾號：AlibabaDesign（ID：AlibabaDesign）
來源：https://mp.weixin.qq.com/s/gj98pkA1uO-ckMwWgdkgRw
本文由 @AlibabaDesign 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基于CC0協議
次小編整理了2018年的移動UI設計規范，包含IOS和Android兩個系統。
Part 1 設計前的準備工作
①合適的設計工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推薦個網站：Sketch.cm
無論是學習Sketch，還是搜插件、找素材，都是Sketch使用者的優選項。
Sketch是OS X平臺獨占，需要下載Sketch可以到這個網站去下載。
這里推薦個Mac平臺應用的下載網站，使用Mac的小伙伴可以去這里下：Xclient
我個人是很推薦使用Sketch做UI設計的，軟件本身已經提供了大量的IOS和Android系統設計資源，配合各類插件，幾乎無所不能。
Photoshop
相比于Sketch來說，體型胖了點，在UI設計上略遜一籌。不過因為Sketch是OS X獨占，所以因為平臺限制的原因，用PS設計也沒有問題。
我很久沒用它做UI設計了，也沒啥可推薦的了。
②做好版本管理、文件歸檔的工作
專業水平不僅體現在設計能力之上，優秀的管理能力也是重要的職業素養。
合理規劃好設計版本，進行明確的文件歸檔工作，有助于提高設計師的工作效率。
這里不贅述了，每個人有自己的版本管理方式，不過目標只有一個：清晰高效。
Part 2 關于手機的基礎概念
這里的概念性內容不要強行記憶，理解即可，它是做移動UI設計的理論常識。
①基礎常識：手機分辨率、屏幕尺寸、屏幕密度
手機分辨率：
手機屏幕的像素點數。比如750*1334、720*1280等等，細分還有物理分辨率和邏輯分辨率，這里不擴展講解了，想了解自行百度吧。
手機分辨率牽扯到的就是工作時設計稿的尺寸，只要記住設計尺寸就可以了。
屏幕尺寸：
手機對角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和設計其實關系不大，主要是用來計算屏幕密度的。
屏幕密度(DPI或PPI)：
每英寸的像素點數。簡單理解就是屏幕密度越大，畫面越逼真細膩。
下面是屏幕密度的計算方法，范例是5英寸，分辨率為1920*1080的手機：
屏幕密度牽扯最多的是安卓系統，安卓手機屏幕本身的密度種類非常多，這也是導致了安卓系統需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個我們下面會提到)
Part 3 基礎設計規范——IOS系統
這是蘋果的開發者官網：傳送門
這里有持續更新的最新設計規范和資源模板，雖然是全英文的，但并不影響閱讀。
設計師應該學會從官方獲得設計資料，這比其他途徑獲得的資料更加全面和權威。
下圖是截止到目前，可能還需要支持的機型和對應的設計尺寸：
① 設計稿尺寸
只推薦750*1334的尺寸來做設計稿，這是向上向下都最容易適配的尺寸，包括用這個尺寸去適配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。
使用Sketch設計：
使用375 * 667尺寸即可，開發在Xcode里也是使用這個尺寸。
導出的@2x圖適配IPhone 5/5S/5C/SE 6/6S/7/7S/8
導出的@3x圖適配Iphone 6/6S/7/7S/8 Plus IPhone X
使用Photoshop設計：
畫布就建成750 * 1334尺寸的即可，在這個前提之下，
導出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE 6/6S/7/7S/8
導出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/7S/8 Plus IPhone X
②常用數據
下面的內容蘋果官方提供的模板文檔其實都有對應的數據，可以去官網下載。
字號使用建議(這個不是硬性規定，根據視覺效果酌情使用)
導航文字 34-38px
標題文字 28-34px
正文文字 26-30px
輔助文字 20-24px
Tab bar文字 20px
圖標尺寸建議
APP應用圖標，建議使用1024*1024尺寸去做，逐級縮小去應用到各種場景中。
SKetch已經提供了IOS和Android系統的APP尺寸圖標模板，直接使用就可以了。
③ 界面適配
程序內部的功能界面：這種界面通過寫成自適應的界面可以很好的適配各種機型；如果有特殊的布局要求，也可以讓開發根據特定機型去調整，不需要單獨為各類機型再做設計稿。
覆蓋全屏類的界面：比如閃屏、啟動頁、引導界面、插畫頁面等等，這類覆蓋全屏的界面必須要單獨為IPhone X的比例重新繪制或者調整設計稿。
其他的IPhone機型，遇到這種界面，整體放大縮小、微調之后按照各機型的設計尺寸輸出對應的切圖就可以了。
IPhone X的安全區域：IPhone X的安全區域就是扣除頂部劉海狀態欄和底部虛擬home鍵之后，中間的內容顯示區域。如果你不得不使用IPhoneX的尺寸做設計稿，請一定設置好參考線，不要把內容做進這兩塊區域內部。
④ 界面標注切圖
標注切圖純粹是重復性勞動，但還要花費大量時間。不過現在配合SKetch插件，基本上實現了標注切圖的自動化，所以效率已經提升了非常多了。
這里就不用實例說明了，有需要可以查看之前的文章。
———————— 簡單理解標注切圖的原理 ———————
1. 簡單理解APP構成：
下圖是IOS開發工具Xcode里的一個空白頁面，圖片的文字標注請仔細閱讀。
本質上，開發寫APP界面和設計做設計稿是一樣的，只不過兩者實現方法不同。
APP的構成遠遠要比上圖寫的復雜的多，我們這里使用最簡單的理解方式。
2. 設計稿的標注
根據上圖我們可以理解設計稿和程序之間的關系：
設計稿里的按鈕、文字、圖標、列表、背景色、線條等等所有的設計元素，
在Xcode里都有對應的控件，設計元素必須使用對應控件，才能在APP的界面里顯示出來。
設計稿的標注，實質上是標注的各類控件的屬性以及相對于其他控件的關系：
設計稿中：
程序的對應控件：
實際上各類控件的屬性也要比這個復雜的多，這里是最簡單理解的舉例說明。
如今使用本地化插件Sketch Measure，幾乎不用手工標注，標注導出HTML后，扔給開發，他們想看什么屬性自己點擊查看就是了，所以我們這里了解下標注原理就行。
而一些線上工具的插件，比如藍湖、墨刀、Mockplus等等，功能更加豐富，各位根據自身情況靈活運用吧。
Sketch Measure去Sketch.im下載
3. 設計稿的切圖
———————— 切圖輸出套數 ————————
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導入圖片資源時，識別對應機型所用的圖片。
Xcode里提供了相應的位置，相同命名圖片會根據后綴填入到對應的位置。
———————— 切圖輸出格式 ————————
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對于UI設計來說，常用的圖片格式就以下幾種：
想具體了解WebP和SVG，可以查看之前的文章。
———————— 切圖輸出規范 ————————
前提：同一類型、位置的切圖，請保證切圖尺寸、規格一致，圖片尺寸為偶數大小。
1.有操作功能、可點擊的功能性切圖：最小點擊區域問題
蘋果官方提供的能準確點擊的最小點擊區域：88 * 88，單位px。
小于這個范圍也可以點擊，但是點擊不靈敏，體驗較差。
對于比這個范圍小的可點擊按鈕，周圍需要用透明區域填充后再輸出切圖。
解釋下為什么用透明區域填充來擴大點擊區域范圍：
圖標這東西，對設計師來說沒區別，都是圖片。
但對開發來說，可操作和不可操作的圖標是兩種類型的控件，圖標的樣式不過是傳給該控件的顯示圖片罷了。
可操作的功能圖標在Xcode對應控件是UIButton。
對控件來說，如果不在代碼里明確固定控件的大小、點擊區域等等各類屬性，設計師傳給我多大的圖，這個控件就會被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開發什么都不做，那這個UIButton在手機界面里就被撐到40*40的大小。
我也可以在Xcode里寫幾行代碼，固定圖片的大小就是40*40，擴大UIButton這個控件的大小變成88*88，這樣這個控件的點擊區域也擴大了。
但是一張規范的切圖就能解決的事情，為什么還要在代碼里再手動加幾行呢？
一個可點擊按鈕需要加一行代碼，整個APP就可能多加上百行上千行的代碼。
規范的切圖也是可以提升產品開發效率的。
2.非功能性切圖，比如列表圖標、說明圖標等，按統一規格的最小尺寸切。
這么切還可以減少一些程序因圖片資源大小導致的體積大小問題。
這類切圖，對應的是UIImageView控件，就是一張圖片，無操作，只是占位和顯示。
所以你按照相同規格，最小尺寸切就可以了。
有朋友問：一定要切正方形的嗎？如果圖標都是30*20的，那我統一切30*20的行不行
答案是：可以，這個沒有完全的硬性規定。雖然我是設計師，但也會去寫一些IOS程序。正方形規格切圖就是為了方便開發，當然還是推薦你使用正方形規格來切圖。
但實際開發過程中，只要保證同一位置，切圖規格統一就可以。
切圖輸出狀態：
同一按鈕、元素的不同狀態，要明確命名對應狀態之后，分別輸出對應圖片。
下圖示例按鈕的選中狀態多出現在游戲APP中，這里僅表示說明。
———————— 切圖的命名規則 ————————
不要使用中文、特殊字符，請使用英文、下劃線、數字對切圖命名，數字不要打頭。
命名方式盡量清晰，推薦采用：種類_位置_功能_狀態
示例說明：btn_homepage_seach_normal@2x.png
開發看到就會明白：這是位于首頁，處于正常狀態的搜索按鈕2倍切圖。
Part 4 基礎設計規范——Android系統
這是Android Material Design中文版的地址：傳送門
Android的官方地址資料不容易過去看啊，這里也就不放官網的地址了。
Android這里就不放下載地址了，因為官方的下載鏈接可能不是所有人都上的去。
Android不整理各類機型的尺寸規范了，數據零散，難以整理。所以我們從屏幕密度這里理解設計規范就可以了。
①Android手機屏幕密度
上文我們提過屏幕密度的計算方式，安卓手機因為各種屏幕尺寸和分辨率，導致如果單純按照數值計算，可能屏幕密度種類會多到讓設計師崩潰。
所以為了解決這個問題，安卓手機出廠時，屏幕有自己初始的固定密度，系統會根據這些屏幕密度自行適配，下圖是對應的屏幕密度表：
②Android的開發單位以及設計尺寸
正因為Android手機分辨率多樣，為了保證同一設計在不同屏幕密度的手機上顯示效果一致，Android系統使用了下面兩個單位：
dp：android開發單位，相當于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果；
sp：android開發文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。
當屏幕密度為MDPI（160DPI）時，1dp=1px
當屏幕密度為MDPI（160DPI）時，1sp=1px
按照上面兩個公式的換算，同樣dp大小的圖片在不同屏幕密度的手機上如下圖所示，
基本可以保證圖片顯示效果在各類手機上相同。
設計稿尺寸：
通過上面的分析，在xHDPI這個密度等級下，倍數關系為2，推薦使用720*1280尺寸做設計稿，換算方便，適配容易。
不過目前的現狀是，如果公司的產品有IOS和Android兩個版本，基本上設計師只會做IOS的版本，然后套用給Android，這樣做也是可以的。兩者的切圖，在這個設計尺寸之下是可以通用的。
③設計稿的標注
推薦使用dp和sp進行標注。但是呢，如果你用720*1280做設計，使用像素單位標注，現在也不會影響什么。
因為前面已經提到過IOS的標注了，這里也就不再贅述了。
④設計稿的切圖
理論上，對于Android系統來說，如果你想完美適配各種機型，應該為不同的屏幕密度提供不同尺寸大小的切圖，而Android的開發工具也為不同的屏幕密度提供了對應的資源文件夾。
但實際上，并不需要提供上面密度表那么多套的切圖，程序安裝包的大小基本就是由于圖片占用了太多的位置。
所以需要提供多少套圖片，請和公司的開發溝通，確定你們的產品實際支持哪些屏幕密度。
圖片格式：WebP和SVG
我個人是推薦現在為Android系統使用WebP格式，體積小，顯示效果好；
而SVG這種矢量圖片格式完美解決了Android多套切圖的問題，一套切圖，完美適配各種屏幕密度。
最小可點擊區域：
48dp：這和IOS的最小點擊區域性質是一樣的，都是考慮到手指點擊的靈敏性的問題，設計可點擊控件的時候要考慮到這一點。
更多的注意事項和IOS切圖是相同的，這里不再贅述了。
Part 5 UI設計師的職業道路
如今的移動UI設計行業已經很成熟了，針對移動UI設計的便捷工具層出不窮；移動UI設計的理論體系知識也已經漸漸完善。但這些都是外部因素，社會發展了，我們跟著一起向前適應就好了；
但對于設計師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業規劃！
很多設計師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業目標。
目前我工作5年，就從我自身的體會來分享我自己的方式，當然精英設計怪就別跟我較真了，我代表的是那90%還在向上努力爬的普通設計怪~
工作能力，不僅僅指的是自身的專業技術水平，還包含了各種綜合性能力，請務必對自己有明確的職業規劃和能力發展軌跡。
———————— 工作0~2年 ————————
這個階段對于新人來說，是一個設計能力和工作經驗的快速積累過程，不夸張的說，這兩年內的經驗可以決定你之后的職業發展道路是否順利。
此階段目的：提升設計專業能力、完善理論知識、積累實際項目經驗
這個階段就別想著一專多能了，先把那個“一專”搞好就可以了，當然不是不讓你學習別的知識，而是說重心應該發在提升目前的專業能力上。
提升設計能力：
一方面，通過公司的實際商業項目提升能力，這個沒什么可說的；
另一方面，業余時間務必進行大量的作品練習，無論是臨摹、還是重設計都可以，目的就是一個：量大 從優！
臨摹請用高質量作品，臨摹一堆垃圾還不如不做，臨摹請務必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗軟件功力、設計技法能否完美復制的過程。
重設計請使用成熟知名產品，不要重設計一堆垃圾應用，成熟產品每個界面的布局、樣式、功能、邏輯都是經過深思熟慮后呈現給你的。
重設計的目的是要體會產品背后反映的設計意圖，不是為了重設計而重設計。
所以重設計之前請自己思考原產品這么做的目的再動手。
完善理論知識：
沒有理論體系方法的支持，在設計道路上是走不遠的。
現在關于UI設計的知識網站已經很多了，當然不局限在這類專業性網站上。
人人都是PM、UI中國、25學堂等等很多這類網站都是學習理論知識的好地方。
當然，你也可以關注我嘛~（給自己打個廣告，吼吼~）
———————— 工作2~3年 ————————
3年對于互聯網從業者是一個坎兒，其實這是相對于職業規劃來說的。
通過前兩年的積累，對于UI設計本職工作已經可以勝任了，接下來的要考慮的是個人的職業發展規劃了。
此階段目的：拓展技能、明確職業目標、為進大廠做準備
拓展技能：
這個階段可以考慮“一專多能”的多能了，作為UI設計師，可以學習的東西實在太多了，交互、動效、產品設計、開發等等。
不要求你達到那些專業從業者的地步，你要學到專業程度，還干什么UI設計啊。
目的是為了拓展自己的技能樹，為自己提供更多的競爭力，這個習慣要一直保持伴隨之后的工作……
明確職業目標：
設計師最怕的就是迷茫，如果說前兩年因為剛入行，對行業，對自身都不完全了解，那情有可原。但工作兩年后，對自身的情況再不清醒那就說不過去了。
可以從以下方面考慮：
是始終堅持在一線崗位的設計技術大牛，還是想做設計管理者，亦或者想從UI設計師轉職成交互設計、產品設計等等。
工作兩年已經對自身，對行業有理解了，自己的能力是否適合設計崗位，對設計的熱愛是否能經久不變都可以作為參考調節了。
為進入大廠做準備：
剛工作，可能限制于能力實力問題，委身于小公司。
但是！雖然我們身在小公司，但心要在BATJ TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準備一下，當然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當我放屁吧~
意思是，可以以進入大廠為目標，綜合性的考慮自身的缺陷并盡量彌補。
千萬別以為就在小公司將就著干吧，反正拿的錢也差不多，大公司的滋味你是體會不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。
———————— 工作3~5年 ————————
對互聯網人來說，3年一個坎，5年一個坎，都是職業規劃的節點時間。
3到5年的設計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個項目。
我們上面說，為進入大廠做準備。在這個階段，可以考慮進入一些中大型企業，提升個人的綜合能力、拓展人脈。
部分企業也比較喜歡要這個階段的設計師，有工作能力，職業道路又剛開始，搞不好可以在公司培養起來。
此階段的目的：提升綜合能力、拓展人脈圈子
這時的個人專業水平其實已經不是問題，繼續在工作中磨練積累就可以了；
這里需要的是打開個人在職場上的道路。
說實話，即使是互聯網行業，搞技術除了要保證自身技術過硬之外，會不會發展人脈，能不能提升綜合能力才是最后職業道路能不能走遠走高的決定因素。
提升綜合能力：
與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對項目的把控能力等等，都算綜合能力，這是對內部的能力。
不要以為對設計師來說，我悶著頭接需求，做設計就可以了。
這樣的設計師，也許你可以踏踏實實當個接需求的小設計，但你永遠也只是一個這類的設計，對于有更高更強的職業追求的人來說，沒有幫助。
所以，張開嘴、邁開腿，一步一步嘗試去推動自身進步吧，這個沒什么技術性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對個人職業道路的幫助，遠遠要比專業能力的幫助要大的多，這是對外的能力。
設計師的圈子，說實話不算大。搞技術的，本身就坐辦公室，而做設計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。
對于自身的專業圈子，努力分享自己的設計經驗、工作心得，總結自己的體會，發布到各類設計專業論壇上，積極的幫助別人，這都算一種拓展方式。
時間久了，就會結識非常多的設計界朋友，設計大牛也會逐漸注意到你，這些都是你職業道路上的寶貴資源。
還可以認識幾個不錯的獵頭朋友，有好的職位，他們都會優先想到你的。
這也是我寫的最后一篇關于基礎規范類文章，也算是整理一下工作到現在的基礎常識類內容，以后不再寫這類基礎文章了。
人總要進步的，設計師還是要靠干貨作品來撐腰的，對吧。
以后發的內容都是我做過的實際商業項目，我會把設計經驗和工作方法融入到這些作品實例里來寫，這總比我單純講理論知識要強。
結語：今天就講到這里了，希望本文能夠對大家有所幫助。喜歡本文的小伙伴們可以關注一下小編哦~小編接下來會為大家帶來更優秀的文章。我們不見不散咯！
1.Content Generator
下載地址：https://github.com/timuric/Content-generator-sketch-plugin
——用于生成人名、頭像、郵件、占位文字、地理位置、隨機數字等等
2. Subtle Patterns
下載地址：Subtle Patterns Photoshop plugin（是一款收費插件）
——用于給圖層添加一些微妙的紋理效果
3.Rename It
下載地址：GitHub - rodi01/RenameIt: Sketch plugin to rename layers like a boss
——用于快速重命名圖層，比如可以使用例如「%n」這樣的語法快速命名一個連續列表，也可以自動使用圖層尺寸來給圖層命名，可以很方便地使用「ABC Icon 36px * 36px」來導出Asset文件。
4. Sketch Arrange Artboard
下載地址：GitHub - kenmoore/sketch-arrange-artboards: Layout all artboards in a grid with user-specified number of rows
——幫助整理你混亂的Sketch Artboards
5. Sort Me
下載地址：GitHub - romashamin/sort-me-sketch: Sort artboards and layers by name
——根據圖層/畫布名字排序，配合Rename It使用效果拔群！
6. Icon Fonts
下載地址：GitHub - keremciu/sketch-iconfont: This plugin helps you easily insert and manage icons from icon fonts.
——直接在Sketch里添加FontAwesome的圖標
7. Find and Replace
下載地址：GitHub - mscodemonkey/Sketch-Find-And-Replace: Sketch 3 plugin to do a find and replace on text within layers
——對Typo狂魔設計師簡直是天大福音！媽媽再也不擔心我在50張Mock里打同一個錯別字了！
8. Sketch Constraints
下載地址：GitHub - bouchenoiremarc/Sketch-Constraints: A plugin that integrates constraints in Sketch to lay out layers.
——通過標注父子圖層間的關系，我們可以讓Sketch設計文件也可以Adaptive Layout，快速將同一套設計擴展到多種尺寸。
9. Material Design Color Palette
下載地址：t32k/material-design-color-palette
——這個不用解釋啦，在Sketch里快速生成Material Design顏色板的利器
10. Measure
下載地址：GitHub - utom/sketch-measure: A measure tool for measurements & design specs.
——在Zeplin和Marketch等工具出現前的Spec標注神器，但即使有了Zeplin和Marketch，我還是會有時候用它來手動標一些自動標注器說不清楚的Spec。
11. Marketch
下載地址：GitHub - tudou527/marketch: Marketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.
——Zeplin是一個神器，但是很多公司（尤其是大公司）出于商業機密的考慮不允許設計師使用在線的Spec標注軟件，Marketch就是一個幾乎完美的替代品，它是一個可交互的Spec文檔，選擇某個元素后，各項尺寸都會顯示出來，右邊欄甚至還有寫好的CSS Code。自從用了它，和我廠的工程師溝通腰也不疼了、腿也不酸了！
12. Magic Mirror
下載地址：http://magicmirror.design/
——設計師有時候想把Mock放在手機/Mac設備上來營造某種效果（逼格），通常的解決辦法是在Sketch里導出設計稿然后在Photoshop再處理。而Magic Mirror這款插件幫助你在Sketch里實現這一效果，再也不用切換到Photoshop來做Dribbble圖啦！
13. InVision Craft
下載地址：Craft by InVision LABS
——這款插件絕不是一個內容生成器那么簡單。它可以幫助你擺脫「Lorem Ipsum」，使用真實的產品數據進行設計，這對設計師來說簡直太重要了！具體的操作辦法可以去他們的官網看視頻教程。
資源鏈接：
https://pan.baidu.com/s/1Jk6geJ2uB1Lj7EQtZS18OA 密碼:gwxo
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
