今天聊些設計基礎部分。
設計工作中，我們總會接到不同場景、不同目標用戶的業務需求，需要不同風格的設計方案支持，但無論是什么風格的設計，用戶都會有一個共同訴求——「品質感」。
所謂品質感其實就是產品給人的一種嚴謹、專心對待的態度。同樣一本書的封面，粗糙紙的封面和細心打磨的小羊皮封面就是不同的概念。
例如無印良品和愛馬仕，兩者都會傳達給用戶一種「品質感」，雖設計方向不同，但他們有一個共同的特性——對細節的深度打磨。其實品質感就是來源于產品對細節的深度考究與打磨。
一款有品質感的設計，隨之帶來的是用戶使用中的舒適度、好感度、信賴感。
界面設計也是一樣，也會帶給用戶一種品質感，其同樣是源于設計師對界面的每處細節的深度考究。
界面的品質感主要來源于界面四個維度、界面中的結構、界面中的圖形、界面中的顏色和界面中的動態，今天說如何通過結構提升界面品質感。
界面的結構在用戶體驗中起著重要作用，其相當于界面設計中的「骨」，界面結構中的細節更是會直接影響到整體設計的品質感。那么具體結構中的細節體現在哪里？
信息關系包含界面中的組合、層級、分割等。
組合
「物以類聚」，界面內需明確傳達各元素間的關系。
輔助信息服務于主體信息：輔助信息為主體內容的延續說明或補充操作，作用為服務于主體內容。同一組合內，信息間需有明確的關系與合理的順序，且輔助信息不能搶鏡。例如朋友圈，清晰傳達關系的同時，以內容為主的閱讀方式不會被頭像內容干擾。
關系越緊密的內容距離應越近：形式不變的基礎上，元素之間的距離越近，越易被視為同一組合。距離相同時，橫向排列的內容接近度相對更高。
層級
界面的層級關系主要體現在主次、優先級、層數。
主次分明、避免層級混亂：清晰的層級結構，能讓用戶更快的獲取重要內容，同一組合下其信息一定有主要展示和次要展示。可以通過位置、面積、顏色三個維度建立主次層級的對比度。
同一組合下，有且僅能有一個最重要的內容：當所有的內容都重要，也就等于所有內容都不重要，信息的優先級不取決于主要信息是否夠大，而是主要信息和次要信息的對比度。
同一頁面，信息層級不宜過多：過多的信息層級會讓頁面變得復雜，增加用戶的理解成本。冗余的信息展示會讓界面變的凌亂瑣碎，一定程度上干擾用戶使用體驗。一般情況下界面應控制在3層信息以內。
主次分明、優先級明確、層級適當會讓界面的信息傳達更清晰明確，進而增加用戶的使用中的舒適度。
分割
分割是用于區分不同信息的方法，大概可以分為距離分割、線性分割、面性分割（背景色分割）、顏色分割。
距離分割：增大兩模塊的距離達到內容分割內容作用，元素間的距離越遠，越不易被視為同一組合。其好處是可以省去分割元素，減少視覺層級，讓界面更干凈、明快。
線性分割：線性分割是目前界面中最常用的分割方式，其優勢是線自身「較輕」，不易干擾用戶。值得注意的是線本身不重要，不宜過度強調，應點到為止，所以線的顏色不宜過重。
面性分割/背景色分割：當處理多層級、信息復雜的場景，在單個模塊里已經用了線性分割的情況下。可能需要更強一點的分割方式來表明模塊與模塊間的關系，這時我們可能需要面性分割方式。這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達兩組內容的分割感，但其缺點是會較明顯的增多界面層級。
顏色分割：當信息的表現形式重復性較高，容易被看混的情況下，顏色分割是更為合適的選擇。
能起到分割作用的前提下，分割方式越輕，越不會干擾閱讀、界面越干凈。
以上可以總結為
文字字體是界面結構中重要組成部分，文字也是多數場景下信息傳達最為準確的方法。合理的字體能夠增加用戶的閱讀體驗，提升用戶在產品使用中的舒適度。合理的字體包含字體的可讀性、對比度、間距。
可讀性：可讀性是字體在界面中需考慮的基礎因素，也是首要因素。字體的信息傳達需精準、明確。字形選擇包括其場景適應和字形的適度性。
字形的場景適應：由于不同的字形會帶給用戶不同的感覺。由于場景需要，我們一定情況下會選擇自定義字體。當我們選擇不同的字體時，需要考慮字體在產品內不同模塊下是否易于閱讀。
字形的適度性：字體本身不宜搶鏡。隨意的、搶眼的字體一定場景下上能夠帶來足夠的氛圍感，但是長期使用會出現「視覺疲勞」，其原因是字體本身的設計搶走了用戶正常在該場景下閱讀或使用的內容和信息。
對比度
字號：用于區分不同層級的信息內容，為保證信息的快速傳達，不同層級的字體需有一定的優先級順序。
界面內的主文案/一級文案應精簡明確。假設用戶只會在這個界面停留3、4秒，能夠吸引用戶繼續瀏覽界面的就是一級信息。當一級信息文案字數過多，會增加用戶剛進入頁面時的閱讀成本，進而降低閱讀體驗。
另外，移動端小于24px的字號應慎重使用，雖然小的字號會讓版式更加的精致，但當同一場景下，小于24px的文案字數偏多時，會影響用戶的正常閱讀。但可用于弱化的文字鏈、標簽等字數少的場景。
加粗：字號相同，字體加粗也是區分不同層級信息的一種方法，當兩信息區分度不大、界面層級過多需要減少層級的場景下，可以選擇加粗部分內容建立輕度對比。
字色：我們畫畫的時候，時常會聽到老師說「要注意畫面的黑白灰」。在界面設計中，也是一樣，我們需注意各層級字體間的黑白灰關系。明確的畫面黑白灰關系會讓界面變得更干凈清晰。另外，當不同明度切換時應保持色相/飽和度不變。
間距：在界面設計中，字間距和行間距會直接影響用戶閱讀效率。過于緊密的間距會讓字體間失去「透氣性」，根據我們正常的閱讀順序來講，字間距要小于行間距以便于每一行更易被視為一組，進而給用戶帶來更好的閱讀體驗。我們可根據文案長短，字號大小制定更適合閱讀的間距。
字體的可讀性是字體的基礎，明確的字體對比度能夠讓信息層級更加清晰干凈，而合理的字間距能夠無形的提升用戶的閱讀體驗。
對齊是界面結構中的一部分，合理的對齊方式能夠使界面內的信息變得更規整，內容傳達更明確。讓元素間的關系更具節奏感。
聯系性
同一組合內的不同元素間需有明確的對齊關系，其關系能夠清晰表達不同元素間的親密性。
元素間的居左對齊：當文案的字數偏多一些的場景下，居左對齊更符合用戶的閱讀習慣。
元素間的居中對齊：當內容信息較少、或由于對齊元素形狀等因素，居中對齊可能會帶來意外的收獲與效果。
元素間的居右對齊：界面內一般不會用居右對齊的方式來建立兩元素間的關系，但是界面內會存在和屏幕建立右對齊關系的元素，與屏幕右對齊的元素一般為主體的解釋說明以及輔助操作等。一般情境下，當用戶閱讀完主要內容信息后才會對操作類的功能有需求，如查看購買、關注、查看更多、進入下一頁面等。
統一性
另外，不同組件間也需要合理的建立對齊關系，同時為保持界面的簡潔性，同一界面內建立的對齊模式不要過多。
界面的結構是提升界面品質感的關鍵，而合理的信息關系、字體、對齊方式能夠讓界面的結構更加完整，精致。也希望每個設計師的作品都更加的美而精致。
喜馬拉雅主播等級體系算是喜馬各業務線中資歷比較老的一員了，主要服務于主播用戶查看自身等級，以及特權享受，這次整理了近期關于主播等級線現存問題的改版。
1. 產品層面
這次迭代的目的是：
通過溝通我們知道產品希望通過這次迭代來引起用戶注意，增加主播用戶和產品之間的互動，而提升頁面日活以及次日留存。
2. 設計層面
設計師的基本出發點是需要設計出不低于競品且更加精致的稿件，能夠更加有效傳達品牌理念和視覺延展性，進而理解產品與競品之間的差異化，增強用戶認知。
3. 用戶層面
此次迭代需要考慮到主播用戶的教育成本和接受程度，能否讓用戶感受到產品的差異性，能否讓用戶在第一時間看到我們希望用戶關注的東西。
通過溝通我們明確了產品需求點，接下來需要針對需求進行分析，我們從競品視覺分析、設計關鍵詞提煉兩點來進行設計決策。
1. 視覺競品分析
針對性的通過對 VIP、等級等屬性的頁面進行視覺收集。
2. 設計關鍵詞提煉
主播等級頁面的服務理念是為主播用戶提供更加清晰的等級提升指引。區別于喜馬其他等級線，整個流程中除了滿足等級查看的基本需求和特權展示的標準化流程，更多的差異是對目標用戶需求的洞察和挖掘，我們從目標用戶需求定義了主播等級線設計差異化的關鍵詞。
通過與產品溝通需求點，我們了解到視覺層面需要滿足或改進的內容；通過視覺競品分析我們獲取產品未來的設計趨勢以及具有前瞻性的設計概念；接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進行重新分組，分析所有層級信息字段的屬性，然后整理出不可變動信息、可變動信息、可增加的信息、可變的布局樣式，不斷嘗試重組信息結構，找出合適的視覺決策點。
針對設計稿件，開展設計內部視覺評審，針對視覺稿件還邀請了產品以及交互進行意見收集，最終選擇方案一作為主播等級迭代方案。
在主頁面色彩偏好、功能布局定稿之后，為了在關鍵轉化點給用戶帶來統一有趣的視覺體驗，以主頁面視覺為參考以動效、ICON、插畫三個維度進行設計延展，保證與競品的品牌差異性以及設計的統一性。
1. 特權ICON
為了達到設計稿件色彩傾向、品牌差異設計貫穿用戶每一個關鍵轉化點保持特權 ICON 視覺語言統一，并增加趣味性拉開與競品的差異，提升用戶點擊轉化率。
2. 插畫延伸
針對產品等級攻略個性化需求的訴求點，圍繞等級提升的不同要求繪制場景化插畫，并保持視覺層面的輸出配套，通過十字交叉分析有針對性的進行精準推送。
3. 動效延伸
圍繞溫暖、成就感兩個關鍵進行延展，在用戶點擊等級主頁入口的第一時間感受到等級提升的成就感以及統一色彩傾向帶來的重視感，通過特權展示達到所見即所得的直觀感受。
設計并非一念間的靈感迸發，設計師對整個業務需要有清晰的理解，明白產品定位并通過前期設計分析奠定設計理念而進行設計產出。
設計是一個逐漸嶄露頭角的過程，而我理解的設計師則應該是快樂的戰士而不是輕言放棄的賭徒，還是那句話：每個人都有屬于自己的一片森林。一點工作總結希望對大家有多裨益，同時歡迎各位大佬加入喜馬拉雅FM。
UI 在拿到產品原型時該如何思考？如何著手設計界面？最近跟一些設計師朋友交流 UI 設計方案，總結了一下在方案優化的思考過程，在這里分享給大家。
很多 UI 拿到一個頁面原型的時候，就立馬打開各大設計網站找參考，然后照著參考頁面上的效果，生搬硬套到原型上，這只是達到了單純美化頁面的效果。
那么拿到原型后應該帶著怎樣的思維來進行思考呢？
第一道思維：交互思維
先了解頁面實現什么功能，功能的交互操作流程是怎樣的，也就是說用戶操作這個頁面上的功能時，用戶的行為路徑是怎樣的。
第二道思維：視覺思維
了解完功能、交互后，提取原型中視覺組成元素，細分歸類，每一類應用統一性原則進行設計。
然后交互與視覺一同結合來設計界面。
結合案例我們來看下兩道思維是如何進行的。
了解功能交互流程。
根據實例原型分析出用戶行為路徑：
用戶行為路徑：
注意點：
提取視覺組成元素。
視覺元素：
注意點：
我們帶著兩道思維來檢驗一下這位設計師輸出的方案：
問題所在：
數據顯示在前，輸入在后，交互操作層級有點混亂。
問題截圖：
問題解決：
用戶行為路徑中，第1步有個先后順序，先輸入地址，后顯示數據，在進行信息內容布局設計的時候同樣需要有先后順序，所以交互操作層級一定程度上影響著布局排版。
問題所在：
「批量轉賬」按鈕歸類到了第1步的信息模塊中，交互操作邏輯有點不通暢。
問題截圖：
解決方案：
用戶行為路徑中，用戶核心費用信息后，最有可能的行為就是點擊「批量轉賬」按鈕，所以「批量轉賬」按鈕與轉賬費用信息的操作關聯性比較大，應該在同一模塊里會更符合交互操作邏輯。
問題所在：
主色、點綴色、輔助色各自的應用范圍沒有規則，顏色應用混亂。
問題截圖：
問題解決：
一個頁面或者項目中，各種顏色的應用范圍需要有一定規范，文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應的使用規則。
問題所在：
輸入類組件樣式存在多樣性，同樣是輸入框，有多種樣式，會造成用戶交互操作上的認知有誤。
問題截圖：
問題解決：
一個頁面或者項目中，輸入類組件樣式應用統一性原則，保持視覺風格一致，從而減少用戶操作認知偏差。
問題所在：
按鈕樣式應用到不具備按鈕點擊屬性的對象上，用戶會認為也是可點擊，會造成用戶交互操作上的認知有誤。
問題截圖：
問題解決：
一個頁面或者項目中，不具備按鈕點擊屬性的元素盡量不要套用按鈕樣式，減少用戶操作認知偏差。
舉個例子：人形的稻草套上人的衣服，成功了欺騙了人們，造成了認知偏差。
問題所在：
同類信息內容的展示存在多樣式，傳達過程中加重了用戶的認知負擔。
問題截圖：
問題解決：
一個頁面或者項目中，同類信息內容的展示應用相似性原則保持視覺風格一致，因為相似性的布局可以更加地傳達信息。
舉個例子：電商頁面，金額信息展示；理財頁面，收益信息的展示；都是應用相似性的布局，即統一又地傳達信息。
問題所在：
圖標風格不一致，圖形反白風格，立體風格，線性風格。
問題截圖：
問題解決：
根據產品的特性，建議統一的圖標風格，選擇線性、面性、漸變、立體等風格。
問題所在：
頁面元素的對齊、間隔沒有規律，整體視覺顯得松散，不嚴謹。
問題截圖：
問題解決：
可以利用柵格系統，把頁面信息內容規整起來。
根據發現的問題，我們來看一下優化后的設計方案：
優化1：交互路徑
根據用戶行為路徑，將相關聯的信息歸類到一個模塊，每個步驟劃分到一個模塊，相關聯的步驟合并到一個模塊，模塊內完成各自的操作展示任務，模塊之間信息內容互不干擾，但從結構布局又能夠形成符合交互操作邏輯。
優化2：顏色規范
規范顏色，配色的方法在這里不做深入討論，這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。
優化3：輸入控件
對輸入類控件的樣式進行了統一，讓用戶從視覺上就能夠清楚地分辨出哪些是可以進行輸入操作的，從而減少用戶對交互操作上的認知成本，提高信息輸入效率。
輸入控件進行交互時，要有交互狀態反饋，默認狀態、選中狀態、錯誤狀態。視情況而定，可以增加鼠標移上狀態和不可輸入狀態。
狀態變化時的顏色應用，可以通過變換色相的透明度來保持色彩的一致性。
優化4：按鈕規范
對按鈕進行了分類，分為常規按鈕、圖標按鈕、文字按鈕；對按鈕樣式用顏色進行了統一；按鈕要有交互狀態反饋，不可點擊狀態、可點擊狀態、鼠標移上狀態、鼠標按下。
狀態變化時的顏色應用，可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。
優化5：信息展示
對信息內容應用相似性原則進行了排版的統一處理，每個小類信息的標題與內容采用統一排版格式，然后重復應用，有助于提高信息獲取效率。
優化6：圖標風格
這里的圖標應用于功能性圖標，統一采用線性圓角風格。功能性圖標需要注意圖標的形狀要能夠正確有效地傳達出功能的含義。
優化7：對齊間隔
應用柵格系統對視覺元素之間的對齊、間隔進行調整，使頁面視覺更加嚴謹，頁面信息更容易閱讀。
交互思維
了解頁面中的功能交互流程，梳理用戶操作行為路徑，可以對行為步驟中的信息內容進行歸類分組提供依據，最終有助于頁面信息內容的排版布局。
視覺思維
提取視覺組成元素，對顏色、文字、控件、圖標等每一類應用統一性原則進行規范設計，再通過視覺元素本身相互組合，最終應用回信息內容上，建立規范的視覺感。
設計一個頁面，交互思維和視覺思維是互相配合的，缺一不可，最終都是為了共同去構造符合交互操作邏輯、滿足視覺美感的界面。
大家都知道 UED（User Experience Design）用戶體驗設計團隊，主張「以用戶為中心的設計」，我們團隊的前身就是一個典型的 UED 團隊。那么什么是 UGD 呢？
UGD（User Growth Design）用戶增長設計，主張「以用戶為中心，以增長為導向」。
下面這個是我們團隊現在的 logo，這個圖形很清晰地描述了 UGD 的理念：在 UCD（以用戶為中心的設計）的基礎上增加一個向上的箭頭（增長），變形成了 G（Growth，代表增長）。也就是我們在原先以用戶為中心的基礎上，還要做到幫助業務增長。
「增長」的概念對很多人來說也許還比較陌生。事實上，這個概念早在2010年就有人在美國提出了，到了2015年才引入國內，最近兩年開始火爆。所以說它在國內其實也是一個比較新的概念。感興趣的朋友可以看看《增長黑客》相關書籍。
為什么我們要從傳統的 UED 進化為充滿挑戰和不確定性的 UGD 呢？這要從天時、地利、人和三個方面說起。
1. 天時
先說說天時，大概2016年左右吧，中國互聯網逐漸進入下半場。關于下半場的話題這里不多說了，感興趣的同學可以上網搜搜相關的文章或者看一下我的新書《破繭成蝶2》（7月出版），里面有很詳細的討論。簡單的說，下半場的特點就是：人口紅利、流量紅利、資金紅利都在逐漸萎縮。原先你可以花錢買流量；或者通過好的 idea 拉來大筆投資；再或者通過打造的體驗迎來大量用戶。但這種「好時代」已經一去不復返了，如果沒有實質的增長，創意、體驗、流量都不能保證產品可以順利的活下去。
2017年3月底，美國又發生了一件大事：可口可樂，這家以營銷著稱的公司，宣布將取消設立了24年的首席營銷官（CMO）一職。全球市場營銷、客戶及商務領導、戰略被整合成一個職能，由新創立的職位 CGO（Chief Growth Officer，首席增長管）領導。第一任 CGO 將直接向可口可樂新任 CEO 匯報。
可能很多人不了解，CMO 的工作性質和 UED 其實有很多相似的地方。比如都是成本部門（當然市場部還要額外花錢）；都熱衷包裝創意而非對業績的直接影響；都傾向于用定性的方式檢驗成果；都習慣通過經驗而非試驗來做決策……
很多企業主對此非常無奈，他們明明知道在營銷等方面的花費存在巨大的浪費，卻不知道浪費在哪里。隨著大數據時代的到來（2015年左右），人們越來越重視數據的作用，越來越能夠輕易的獲取、存儲數據，也越來越知道如何從數據中獲取價值。在這種情況下，原先很多崗位的傳統工作方式顯然太過于低效，所以 CMO 逐漸被 CGO 取代也就不足為奇了。
從 CMO 到 CGO，揭示了四個變化趨勢：
誰能肯定 CMO 的今天不會成為 UED 的明天呢？當然，我認為 UGD 只是未來的一個發展趨勢之一，我想未來設計師還會有很多其它的發展方向等待我們深入探索。
2. 地利
雖然我換過幾次工作，但是有一點我從來沒變，就是一直在做和商業相關的產品（電商、To B、互聯網金融），所以我對業務、對數據更敏感一些。和同行交流的過程中我也發現一個明顯的現象：越是接觸商業產品的設計師，越重視數據量化。當然現在不僅是商業產品，所有類型產品的從業人員都需要有這個意識。比如做社交產品，也需要通過活躍度等指標來檢驗成果。
3. 人和
設計團隊的地位其實普遍是比較尷尬的，因為你很難證明對產品、對企業的價值。以前設計師還可以靠特立獨行來贏得一些關注，但現在隨著時代的變化，設計和業務綁定的趨勢越來越明顯。與此同時，大部分設計師卻還沒有做好相應的準備，不知道該如何幫助業務增長。
雖然支持團隊很難成為核心團隊，但我們依然可以通過改變自己，努力離核心部分近一點，更近一點。
看了前面的分析，可能有人會感覺迷茫：設計師到底應該服務于業務還是用戶呢？
傳統思維認為，設計師應該為用戶、為體驗負責。實際上，體驗與業務并不沖突。通過一年多的試驗，我們發現能帶動業務數據提升的設計方案，質量都比原始方案要好。通過無數次的試驗結果總結規律，設計師的進步非?？?，也非常大。
所以我們團隊的價值主張一直都是：以用戶為中心，以增長為導向！
很多設計師認為自己不太可能幫助業務有實質性的提升。其實設計的商業潛力是巨大的，只是還尚未被充分發揮出來。通過出眾的造型和外觀擊敗競爭對手、銷量大幅提升的案例不勝枚舉。所以我堅信設計師在這方面的空間非常大。
當然要成為 UGD 并不是通過輸出美觀的產出物就可以做到。UGD 必須致力于通過設計思維及專業技能，用最小成本為產品/企業創造最大價值。我們團隊在這方面已經摸索了一年多的時間，現在還在繼續探索中。
和 UED 相比，我認為 UGD 最重要的差別在于：
前三項相信大部分設計師已經開始意識到了，而第四項，也是最重要的一項，很容易成為設計師的軟肋。因為設計師太習慣于追求完美、「憋大招」了，他們很少考慮如何用較小的成本創造更大的價值。實際上，設計師縝密的思維、優質的創意如果能和精益思維、增長思維結合起來，將產生驚人的效果！
當然說來容易做來難，我們在長期的實踐過程中經歷了很多失敗和挫折，感謝公司的無限包容，使得我們最終能夠沉淀出一套嚴謹的「增長體系」作為理論支撐，并不斷帶給業務方驚喜。
懶洋洋是一款為多倫多華人提供服務的訂餐平臺用戶群一般為學生、白領等對于視覺上追求簡約、舒適產品流程簡易而順暢（英文是用翻譯軟件翻的，如有錯誤，那就算了吧）
圖標是具有明確指代含義的計算機圖形。從功能分類角度分為啟動圖標、應用圖標、功能圖標。
功能圖標是具有指代意義且具有功能標識的圖形，它不僅是一種圖形，更是一種標識，它具有高度濃縮并快捷傳達信息、便于記憶的特性。
面性圖標是由一根封閉的線造成了面，面性圖標同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標具有穩重、剛毅的男性化特征；曲面具有動態、柔和的女性化特征。
不透明度圖標
不透明度圖標是通過調節圖標的部分面性結構來增加層次感，從配色角度屬于同色系。
△ NO-921
光影圖標
三大面五大調，通過調節面的反光和陰影來增加面性圖標的紋理。在扁平時代的今天保留著微擬物風。
多彩色圖標
多彩色給人很酷炫的感覺，從明度角度還是要提取深淺的顏色來代表圖標的黑白灰。
△ Kyle Anthony Miller
線性圖標是通過粗細一致的線條繪制，高度概括出來的圖標，既能讓人賞心悅目，又給用戶帶來創造和應用的樂趣。
圓角圖標
圓角圖標給人以親和力，也有柔軟，軟弱的一面。在圖標設計越來越精美的今天，圓角圖標的應用行業已經越來越廣泛。比如女性，母嬰，兒童，旅游……
△ Stephen Andrew Murrill
直角圖標
直角圖標給人以銳利，堅強，果斷，不拖泥帶水的一面。讓人眼前一亮的是魅族系統Flyme6 里面的圖標它就是用的直角，給人明快干凈的感覺。真正更好的詮釋它內在含義的非京東金融里的圖標了 ，投資理財的時候需要人們果斷作出判斷。理財有風險，投資需謹慎。直角的感覺讓人當機立斷，不拖泥帶水，快買快出。如果用圓角就感覺柔一點，感覺做事優柔寡斷。所以一下子在金融領域被做成了標桿式的功能圖標。
斷點圖標
斷點圖標是點線面演化的一種產物。在最開始UI興起的時候，設計師們不滿足于單線條的功能圖標，通過點線面增加形式感。最早新浪體育運用到這一風格，算是還是很不錯的一種風格。很遺憾只留在了我的記憶力，網上并沒有找到之前的設計。
△ Catalin Mihut
高光式圖標
高光式圖標是傳統繪畫的產物，我們在傳統繪畫的時候往往最后一筆都是添加高光，起到畫龍點睛的效果。高光式的功能圖標采用里細外粗的規律，和斷點式功能圖標差不多一個年代的產物。在不斷扁平不斷簡潔的今天，也不會感覺那最后一筆也是多余的。
△ Udisk6353
不透明度圖標
不透明度圖標是調節圖標的部分結構的不透明度來增加圖標的層次。色彩上面跟雙色圖標是一樣的，只不過從配色角度屬于同色系的范疇。
△ Laura Reen
雙色圖標
雙色圖標在實際應用中非常廣泛，也是很百搭的那種。一種可以有彩色跟無彩色結合，有彩色的顏色可以是企業色，可以是代表行業或者產品的顏色跟無彩色黑色相結合。一種是主體色跟點綴色組合而成的雙色，但使用時要考慮到當前界面中的配色不宜過多，多了就容易花。
△ stay
線面結合圖標
線面結合圖標也是一種很出彩的風格，線是高度概括的圖標，這時候面更多的是充當裝飾點綴的作用。面的表現方式也有很多種，可以是單色的，漸變色的，也可以像 MBE風格那樣提取主體結構形成的面，也可以提取圖標里面有閉合路徑所形成的面。這種風格應用也非常廣泛。
△ Ted Kulakevich
△ Prakhar Neel Sharma
結構圖標
結構圖標算比較有爭議性的圖標，結構圖標是我們學繪畫的時候老師要我們起形，要開始繪畫結構，對基礎的三大面五大調有很好的理解。現在結構圖標正好相反，比如對于一個具像圖標，我們要分析出它的每一筆每一畫，看清每一個結構，然后用固定的形式來表現出來。固定的形式可以像優酷圖標的相交結構點，可以像上?，斈然▓@一筆一個顏色，等等。
一筆畫圖標
一筆畫圖標是難度系數比較高的一種風格，也是我非常喜歡的一種風格，當才開始流行斷點圖標的時候，錘子設計師歐陽念念就提出了一筆畫圖標的概念，當時也是有爭議的一種圖標。當網易云音樂也出了這種圖標后就更具有說服力。一般也很難駕馭，也基本都能做出來，但是視覺上看上去很舒服還是要有深厚的功底。
logo類圖標
logo 類圖標跟一筆畫算是同等級別難度的，需要圖標足夠精致到可以直接拿來當應用圖標，乃至于 logo。這種在app中屈指可數。最為經典的就當屬網易云音樂的 logo 了，其實它也屬于一筆畫圖標，同時又用做了 logo，它的含金量可想而知。
情感化圖標
情感化圖標是提取人的五官跟圖標相結合具有擬人化的圖標，這種擬人化的場景模仿人在真實場景的應用。QQ 的底部圖標通過五官方向大小移動變化很好的表現出當前場景。QQ 開了先河，相信后續會有很多情感化圖標出現，會有它的一席之地。
線性的閉合路徑的圖形變面性圖標，閉合路徑里面的線條反白，重要的關聯結構線反白，讓面性圖標透氣；線性的不閉合路徑的圖形變面性圖標，應適當的增加線的粗度來達到視覺上的平衡。
△ Jory Raphael
△ Sebo
繪畫結構＋點線面＋色彩，繪畫結構可以清晰的分析出事物的主體結構，勾勒出主體輪廓，對創造新的圖標風格有很大幫助。繪畫結構選的角度是人很熟知的角度，比如正面，盡量不要選擇帶有透視角度進行設計。點線面是設計的基礎，通過從點線面角度去構思會獲得更多的靈感。色彩方面可以是企業色、行業色、主題色、點綴色等等。（圖design by Ted-Kulakevich and Graphéine ）
大小的統一
在網頁設計中圖標的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移動端iOS規范中在2倍圖下最適合人點擊的區域大小為48*48px，iOS功能圖標其他尺寸為48加或減4的倍數；安卓android 功能圖標其他尺寸為48加或減8的倍數。為什么 iOS 是4的倍數，一個數除以2倍圖在乘以3倍圖要是偶數最小的數為4；為什么安卓android 是8的倍數，安卓開發中最小的單位是1dp,1dp=2px，同時也要滿足一個數除以2倍圖在乘以3倍圖要是偶數最小的數為4，所以安卓要是8的倍數。在很多帶有色塊的圖標，不僅要保證色塊44*44pt的大小統一，也要保證里面色塊里面的功能圖標的大小統一。
風格的統一
風格上面已經歸納的很全了，直角圖標和圓角圖標基礎上可以添加一個其他風格，如雙色風格；但是剩余的其他風格最好就不要兩兩相加，不然就會給用戶感覺很容易亂，也不夠簡潔，主次不明。
規范的統一
視覺的規范
為什么我們再同樣的大小區域去繪制正方形、圓形、三角形，雖然符合了大小統一的特性，但是從視覺上還是不能看上去很均衡？這就需要我們規范化的去繪制圖標，安卓android 規范里給出了圖標的繪制方法。
圓角的規范
簡潔性不單單體驗在圖標的簡潔，還要體現在從創意到實際落地的簡潔。在使用軟件 ai 或者 sketch 的時候繪制基礎圖形不要出現小數點和基數，多用偶數。
圖標具有可點擊性和標識性。可點擊性就會有點擊前、點擊時、點擊后三種狀態，主流底部標簽欄會在點擊前使用線性圖標，點擊時和點擊后使用面性圖標；也有使用顏色來區分。
圖標的延展性之前在圖標的風格也講到，好的圖標可以直接當應用圖標或者 logo 來使用。同時好的圖標還可以通過點線面動效變化做下拉加載動畫。
頭腦風暴看似一個不知道怎么解釋的詞，簡單的說就是多動腦子，越用越活。頭腦風暴不單單是這里用到，是所有設計師做設計之前必備工作。頭腦風暴完你會覺得你的設計思路會很寬，然后就是要合理的分析每個的可行度，完成的工作量，自己當前設計的水平是否可以有效完成。其實很多設計師能有效的搜索到自己想要的東西也算是頭腦風暴的一種，雖然你不會想出很多點子但還是很明確的知道自己想要什么，一定注意不要直接拿來主義，還是要通過平時的練習掌握更多的風格。為以后頭腦風暴想出的很多點子能很好的實踐出來。比如以旅游為主體進行頭腦風暴，這個就能想到很多很多。
搜集資料的時候要很好的提取關鍵詞，直接從 iconutopia、iconfont、iconfinder、iconmonstr 搜索獲取靈感。具象的事物可以看看該事物好的品牌公司的產品，品牌公司的工業設計相對較好，對后面提取元素也會有很大的幫助。也可以通過提取好的關鍵詞，翻譯成英文，再到國外的網站追波、be搜上一搜看看。搜索到的素材和元素一定要再設計，不能拿來直接用。
提取元素又歸結到繪畫結構中去了，繪畫好的看到具象事物，心里默默打開一個燈，三大面五大調，光影關系都有了。不是很理解的還是多練習吧。具象圖標就是提取主要輪廓線，保留可要可不要的元素，到最后的時候做統一刪減；抽象圖標有時候確實沒有一點的思路的時候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合適的還要進行 redesign。有想法后選擇一種圖標風格這樣的繪制效率會很快。
上面元素提取好后，需要開始選擇一種圖標風格進行繪制。開始繪制的時候不要過于追求圖標的風格，還是要從圖標本身出發快速的繪制好。等全部繪制好了突然想換一種圖標風格也是很快的，水到渠成?？赡軇傞_始很難在規范化的框框里直接就提取元素開始繪制，那就只能先繪制要你想要創意的元素圖標，全部畫好后在統一的規范里面再繪制一遍。規劃化的目的就是讓圖標統一，任何兩個圖標拿出來從視覺大小、風格都是一個統一的整體。
一套圖標繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當的修修補補，對于視覺上看上去過于繁瑣的圖標要保留大輪廓的同時減少結構達到視覺平衡；對于確實很簡單但有沒辦法添加任何的東西元素來增加的為它做加法的時候是否可以放大，來增加它的視覺豐滿感。
任何人都抵擋不了時間的力量，你可以斥責它的無情，也可以贊美它的給予，在這個成長的歷程中，我們尋找的不是時間給我們帶來了什么，而是這個過程中我經歷了什么。后者，才是我們需要深思并感恩的。
與「用戶體驗」一樣，許多人會評判一個產品用戶體驗的好與差。但是「好」與「差」只是整體上的一種結論，普通人可以說這兩個字。但作為設計師，必須懂得在體驗過程中，知曉哪里好與哪里差，更要知道為什么好為什么差。
就好像評書似的，真正讀過某本書的人，不會單純的說：「這本書太好/爛了」。他一定會有一種感悟，哪怕只是一句話。
既然是為了提升「用戶體驗」，就得與用戶一起進行體驗的走查，才能有根據的進行優化。
一般我們會建立一種用戶體驗路徑，其目的是為了了解用戶的動機、關注點和需求點。所以為了提升用戶體驗，就必須邀請用戶參與體驗路徑的設計過程。
用戶在使用一款產品時，他們中的大多數只是為了完成某個任務，所以在這個過程中，也許用戶只使用了部分功能，也可能使用了所有功能。
因此，不要將體驗路徑的設計限制在特定的產品或功能服務上，要理解完整的用戶體驗路徑，針對性的進行走查，與用戶一起提升產品易用性。
真實的用戶體驗路徑需要通過不同用戶的參與互動，不管是一對一的討論或焦點小組，都需要大量的數據才能得出真實的結論。
任何沒有基于研究報告的嘗試、假設、數據，都將使它在很大程度上只是理論性的。所以我們一定要通過不同用戶的不同體驗結論，客觀的進行分析路徑中的哪一環可以繼續優化。
與用戶的交流溝通是其中的關鍵，在用戶的幫助下，你很容易找到可提升的體驗點。
因為，用戶情緒的波動和心情的愉悅、滿足、懷疑、失望以及懊悔的表現是無法在報告中準確反映出來的，所以設計師要重視這些用戶反饋，包括這些互動的場景可以使設計師產生共鳴，通過同理心來設計并優化功能。
然而，沒有任何產品或功能服務能夠滿足過程中的所有用戶需求，所以，要深入了解每一個階段出現的需求點，因為它們都會衍生出不同的因素，這使我們能夠理解產品如何更好的服務于用戶的生活。
同樣，沒有任何靈丹妙藥能積極地改變用戶體驗，而是通過與用戶的持續接觸。也許你會說很難進行與用戶直接的對話，所以你通過客服回訪、用戶反饋等方式收集信息也未嘗不可。
可能到這里你還沒有完全明白其中的道理，下面我舉個例子詳細說明。
讓我們來舉一個旅游平臺的例子，這個平臺是供于各種各樣的人和商務旅行者使用的，其中包括了航班、酒店、出租車租賃等在內的度假套餐。
為了讓各位深入了解體驗路徑，以及更好地了解我們的用戶，讓我們對旅行者的體驗路徑也做一個拆解。如下圖：
這個路徑將全面地了解用戶的想法、感受和行為，因為他們會經歷不同的階段，幫助填補我們路徑中的空白點，幫助我們更好的進行產品的設計。
1. 計劃旅行
在計劃旅行時，設計師認為用戶的想法是什么？
2. 用戶角度
通過與用戶的走查、回訪、反饋，可以幫助我們了解用戶內心真實的想法，幫助我們增強以及簡化用戶的體驗方式。
3. 特殊情況
產品是否有處理特殊情況的功能？
我們是否可以幫助用戶更好地應對這些情況？通過及時提供有關目的地天氣狀況、備選旅行計劃或建議類似目的地的信息等。
那么通過第一個內容的拆解，我們就可以發現，這個點能做的功能就有很多。而且這些功能還能排列優先級，設計師能主動進行推進，提升設計師自身的價值。功能走查的重要性相信各位也看出來了。下面繼續。
1. 完成預訂
是時候確定目的地、日期、旅行方式和停留地點了。（依然是設計師角度）
2. 用戶角度
3. 特殊情況
1. 出行與酒店
設計師考慮的用戶需求。
2. 用戶角度
3. 特殊情況
1. 旅程與歸來
旅途中的回憶和收獲。
2. 用戶角度
3. 特殊情況
通過以上的拆解說明，可見體驗路徑對于功能設計的重要性，各位設計師一定不要主觀認為「你就是用戶」，而是結合用戶需求進行分析，設計出更合理的功能。
設計師要不斷完善用戶的體驗路徑模式，因為它會一直發展，將產品優化的越來越好，而不僅僅是停留在：「這個產品我做完了」的想法上。
所以為什么說用戶體驗是一種過程？因為它始終在不斷變化，所以作為設計師也要持續的自我增值，才能跟上產品迭代、時代發展的步伐。
漸變這一視覺趨勢，在最近幾年里可謂如日中天。很多平平淡淡的設計，將平涂改為漸變，立刻就能增加醒目感。
今天我們就來和大家聊聊漸變這個話題，深入了解我們似乎以為自己懂了的漸變，我們將和大家一起分析漸變配色中，利用色彩不同特性之間的對比來用色，以及一些簡單的操作小技巧。比如快速生成一個色輪，以及簡單的利用混合工具來配出漸變配色的色彩。
漸變是在色彩上的一個相對緩慢的過渡，我們的視覺會隨著這個漸變的過渡而產生一種流動感，而這種流動感全憑在色彩上發生的種種變化。是的，我們的重點來了，就是這個變化，需要我們今天深入去加以了解。
談到變化，我們自然會想到這個變化的范圍。如果拿出我們的色輪來看，我們就會發現色輪上的變化范圍有大有小，當兩個色彩距離較近時，我們可以說他們是鄰近色，這時難以發現他們的區別，直至我們的肉眼無法分辨。這時候可以說變化范圍較小。
當兩個色彩距離180，在色輪上呈相對，我們可以說這時的色彩變化是最大的，于是也就產生了最強烈的對比。很多撞色的情況，也是在這種對比下發生的。我們通常會把這對顏色稱為互補色。
當然，實際的情況比這要稍微復雜一點，我們一起來看下。
剛剛大家可以發現，這個色輪上的色彩的一個特點是什么？只有色相的變化。沒錯，我們平時也已經習慣了，只用色相來區分色彩。所以，今天要講的第一個對比，也就是色相的對比。
色相的對比，在色輪上就能很直觀的表現。例如紅色和黃色這一段，截取過來以后，就變為了紅 – 黃漸變。利用色環就能很輕松的實現色相的漸變。距離越遠，漸變色的對比也就越大，互補色之間的對比達到了極值，比如紅 – 藍漸變的對比就大過紅 – 黃漸變。
這里首先教給大家一個快速生成色輪的小技巧，這個技巧不需要利用網上的圖片或工具?，F做現用，很方便。
STEP 01
讓我們先用這個自定義形狀工具畫出一個圓環。
STEP 02
然后在圓環里填充色彩，這里我們運用一個漸變疊加。
漸變疊加的疊加方式為角度漸變，漸變色這里選用「色譜」，沒有找到這個漸變的小伙伴記得要追加色譜。
這時做出的色輪，在色彩上飽和度達到最大值。因此也能表現最強烈的色相對比。目前比較流行的漸變色是明度偏高，飽和度居中的漸變，也像這樣的糖果色，因此這時大家可以利用調整圖層「色相/飽和度」來增加明度或降低飽和度。
可能很容易被初學者忽略的是，我們在 PS 里的色彩（HSB）這個參數里看下，一般來說H-色相，S-飽和度，B-明度，這里的情況和我們在色彩學里學到的 HSB 有點小差異。
色相這里沒有問題，但是飽和度和明度，尤其是飽和度上面，大家可以看到一般來說飽和度時，色彩是慢慢失去色度，也就是呈現灰色，但是在軟件里把 S 這個值調到最小呈現出是白色；還有另一個屬性：明度，最大的明度，應該是白色，在軟件里的 B 這個參數調到最高時，并不是白色。
在 PS 里，只有把色彩放到「色相/飽和度」這個工具里，才會看到和我們書里的概念表現一致的特性。
運用色環配出的漸變色和直接利用漸變工具配出的漸變色還有差別的，最重要是體現在顏色的過渡上。如果是用漸變工具選擇了左邊綠色，右邊紫色的漸變色，在中間出現的過渡色就表現出一種發灰的色彩。如果所選用的兩端的顏色是在色環上距離有定的角度，就會出現這種灰色。這是因為兩種顏色彼此混合所造成的。有些情況下，確實是需要這樣過渡的，這就直接用漸變工具來做漸變。
另外一個情況就是不希望色彩發灰，這時需要用到色環，在色環上根據所需要的漸變過渡來選取不同的色彩配置。
可以看出來，盡管沒有飽和度、明度的變化，色彩仍然是彼此之間所表現的特質都很獨特，所以基本上利用色相對比，就能配出非常優秀的漸變作品。
一般來說，漸變本身就足夠吸引人，有漸變參與的情況下，我個人的建議是色彩不要太多，盡量少元素，整體風格傾向極簡，這時最能發揮漸變色這種特質的魅力。
這個案例中的漸變過渡，中間的這個紅色和藍色的漸變就是用漸變工具做出來的，兩邊的漸變都是取用了色環上的漸變過渡，可以看到色彩上兩邊的漸變中的色相更多，更飽滿，飽和度和明度都沒有喪失，而中間的漸變在紅藍之間的過渡出現了飽和度較低的紫灰色。
色溫是什么？色溫更多是色彩對人的主觀的心理因素的影響。雖說是主觀，但是大家的整體傾向還是比較類同。比如藍色清涼，紅色溫暖。
所以，把色環上的色彩根據主觀溫度進行一個劃分，就有了我們經常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進行衡量，但是卻在色彩中發揮不小的作用。
漸變中加入色溫這個屬性，這個游戲就會更好玩。一般來說，為了達到配色平衡，我們的配色中需要冷暖進行平衡，這里的平衡并非是1：1的嚴格配比，而是彼此滲透，雙方根據位置、面積、形狀等等元素的共同參與，共同實現一個版面的平衡。當然，這不是件容易的事，但這是我們配色中的方向之一。
回到我們的色溫對比，要體現在漸變中，就是要有冷色和暖色的參與。一般來說，在比較簡單的過渡性雙色漸變里，一個冷色一個暖色是非常常見的表達方式。還是拿剛剛那個案例來看，左邊兩個配色就是冷暖的過渡，而右邊的配色相對來說偏暖，當然相比之下，洋紅色還是比橙色會更偏冷一些。
冷暖色的對比都是在同一個版面內的一個動態對比，尤其對于綠色和紫色這個范圍內的色彩來說的話更是如此。比如綠色，在和藍色搭配的時候，由于藍色是絕對的冷色，所以綠色就表現出暖色的特質；而綠色如果和橙色搭配，橙色又是絕對的暖色，所以綠色又表現出冷色的特性。紫色也是同樣的情況，和藍色搭配它偏向暖色，而和橙色搭配時它又是偏冷的。
用起來其實也很簡單，如果你的配色中發現整體感覺偏冷，就增加暖色。如果太暖，那就增加冷色調。如果整體的配色看不出哪里不對勁，但總覺得色彩有點奇怪，就先看看色溫是不是實現了平衡。
再增加一個屬性，漸變這個游戲又增加難度了，明度這個屬性表現為顏色的明暗程度，明度引入了另一個性質：光。其實我們平時看到的色彩就是因為有了光，才有了顏色。但是一般來說我們會把光簡單歸屬于「發光」這個行列。事實上，由于光線的折射，我們視網膜接受到光的波長，才產生了色彩。那么光線的強烈與否，就會影響這個顏色的表現。
明度的對比，是所有顏色屬性當中，最容易被覺察到的。我們可以簡單來看，我們的素描就是利用明暗來表現物體，黑白灰能毫不費力表現現實中光的感覺。所以在配色中，有了明暗對比，是一個很好表現色彩感染力的元素。
即使明度相同，我們的色彩明暗程度（從主觀感受來說），也是不一樣的。比如相同明度的黃綠色和紫色，在明暗表現上，黃綠色明顯更亮，更靠前。如果讓這兩個色彩之間發生漸變關系，這樣的表現就很像左上角有光滲入進這塊平面中。如果進一步降低的紫色的明度，這時，明度的對比就更為強烈。這時很適合表現出某種立體感。
當然，我們的色彩并非一定要有立體感才能生動，有些配色大師，會刻意去弱化立體感，所以會盡量避免明暗的對比。但是，作為初學者，一定要知道明暗對比，懂得在適當的情況下拿來使用。
尤其是在同色系或者鄰近色色系的漸變里，明度對比是一個增加立體表現力的方式。有些時候，平涂的方式看起來呆板單調，利用同色系漸變就能很好解決這個問題。兩個色彩之間可以非常近似，即便如此，還是和平涂有差別。有了光的感覺就要隨時注意受光的方向，在整個畫面里保持全局光，所謂全局光，換個簡單的說法就是大家都在同一光源照射下。
我們可以再和大家演示一下，例如這里有兩個圓，這兩個圓都是填充為紫 – 綠漸變，這時的紫和綠是同樣的明度。這里注意，就算是同樣明度，兩個顏色在直觀的感覺上，明暗程度也是有差別的，比如綠色會稍微亮一點。這時打開漸變工具，在后邊的綠色這一端色彩，將它的明度調高，這時大家會發現，右邊這個圓就變為了一個球體。
明度漸變還是增加作品細膩程度的一個方法，我們和大神的差距，也許真有可能就是一處小小的明暗關系的不同。別忘了，明度對比對整體效果所發生的影響是最大的，但也是我們最容易忽略的，有時候一旦有了顏色，我們的焦點都在色調和色度上。但其實所有的配色，比如我們做設計，一開始總是從黑白灰開始做起，先配置好明度，然后再開始根據明度來選擇用色。
有了對明度的把握，我想我們對色彩的把握才能上升到新的層次，否則，我們在一堆色彩里，很容易迷失方向。
這里說的色度，也被叫飽和度，有的書上也叫彩度，拿我們日常用語講就是鮮艷程度。色度對比越強，尤其是色輪上的互補色，在他們色度都達到最大時，會撞出最大的火花，產生最強烈的效果。
有時候這種高彩度的配色用在動感很強的設計中，看上去活力四射。但這種互補色之間也會發生彼此互斥的關系，造成整個版面的凌亂，所以要非常謹慎的對待色度。
色度對比最常見的就是用在空間感的塑造上，大家都知道，色度越高，在視覺上會制造一種「更近」的效果。
舉例來說吧，我們這里可以畫一個梯形，這個梯形用漸變來填色。如果用單色，大家一定感覺不出空間感。如果我們采用漸變，使得同一個顏色，比如紫紅色，在這個梯形上，由上到下做一個漸變，這個漸變中兩端的色彩，在色度上有差距。那這時就能體現出一個慢慢延伸到遠方的感覺。甚至還能有種暴露在空氣中，被空氣弱化的視覺效果。這個也運用在插畫中，也被叫做空氣透視。
色彩濃度的強弱對比，和其他的色彩的屬性相結合，配色就變得更復雜。但是通常來說，配色并沒有標準答案。所以導致很多人在配色的時候，都是依靠一種感覺在操作。其實感覺的確是一個最直接的選色方法之一，但是并不是唯一的方式。大家如果對色彩有更深入的了解以后，就會慢慢理解感覺層面下的更有趣的東西。這個也是經驗積累。
在飽和度這一環，PS 里如果覺得不是很靠譜，就像我之前和大家提過，那么大家可以進入到 AI 里，利用 AI 的混合工具來生成不同的色階。例如我們在這里用一個高飽和度的紅色和一個低飽和度的藍色相搭配。應該說，這兩端的色彩既有飽和度的對比，也有色調和明度的對比，還有色溫的對比，應該說是對比是非常豐富的。所以，這一條矩形，用在背景色上，我個人感覺不是太合適。如果是做成一些特殊的效果，還是不錯，比如設計字體的時候做筆畫造型，或者做裝飾的線條。
最后一個我們要略提一下，就是透明度的對比。盡管透明度不是標準的顏色屬性中的一種，但是在我們軟件操作當中，透明度是相當實用的。漸變的色彩，我們可以改變其中一個色彩的透明度，比如降低到0，那么一端的色彩消失不見，這樣最容易造成一種濃霧的效果。
這個插畫，是在設計我自己的個人網站時做的，其中這些背景中的立方體的某些塊面，就是采用某一端降低透明度的效果。有一種在云端的感覺。
網站鏈接：https://www.grabient.com/
這個網站的工具很好用，我當時在群里推薦的時候，有人問我說這個和 PS 里的漸變工具有什么區別。我在剛剛其實已經和大家講過，PS里的顏色的設置是有一些和我們的色彩理論不太符合的地方，但是這個漸變工具就完全符合我們對色彩屬性的了解。所以在這里可以進行調試，再確定漸變的值，最后放到 PS 里用。
網站鏈接：https://webgradients.com/
這個網站，我相信大家應該不會陌生，好多地方都推薦過，這個漸變色是可以作為背景色來使用的。大家可以看到這上面大部分的漸變的明度都比較高，比較淺。過渡也非常細膩。這一點大家可以拿來當作自己配色的參考。
這兩個工具以外，還有很多其他好用的工具我就不一一演示了，這是我用的比較多，而且覺得還挺實用的兩個網站。
其實色彩和音樂的感覺是最接近的，每個色彩對應每個音調，那經過組合以后就能表現出一定的情感。通常你也很難說，哪一首音樂是最好聽的，因為每個人喜歡的音樂風格都不一樣。但是總有那么一些歌是廣為流傳成為經典的。
所以要學會漸變，首先應該是了解色彩。我們不可能通過一篇文章就能完成學習，肯定是希望以這篇文章作為一個啟發點，大家可以從中找到自己的學習的方向。
圖標是界面設計中最重要的元素之一，也是我們 UI設計師必備的技能，日常工作中我們經常會接到含有圖標設計、優化的需求。但到底什么樣的圖標才算是優秀的？也許很多設計師并沒有太完整的評判體系，只是憑感覺，這樣就會造成輸出效果不穩定、耗時太長等不良的后果。
所以借著這次機會我梳理了一套圖標設計自檢的評判體系，一共五個維度，大綱如下：
評判事物的價值在于它的用途是什么。
圖標的用途是幫助用戶理解信息，所以「識別性」就是圖標最重要、最底層的價值，如果你設計一個圖標，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價值可言。
識別性可以分為兩個方面，一是含義識別，二是視覺識別。
先說含義識別，簡單來說就是你的圖標能不能被理解，當然并不是設計師自己能理解就可以了，而是需要用戶來決定。這里和大家分享一個我判斷圖標是否易識別的方法——內部用戶調研法，說白了就是隨機問一些團隊內部人員，最好多問幾種崗位，這樣得來的結果更加可靠，案例如下。
我在改版「話題」這個圖標的時候，想到了微博的「#」，于是把「#」和氣泡框結合到了一起，如下圖：
這時我找來10個內部人員進行測試，只有3個能看懂圖標的意思（這3個人都是平時經常玩微博的），在這樣的數據之下，不用猶豫，這個方案一定是不可取的。
在進行調研時，最少要保證80%的人能看懂，才證明你的方案是可行的。
再來說視覺識別，顧名思義這一點已經與圖標含義無關，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。
這里引入一個國外的測試結果，是我在一位前輩的文章中看到的，測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標，經過10天的時間，1260名參與者總共完成了超過25000次圖標的認知測試。將得出的數據分成四組進行雙向方差分析，在相同的統計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒，也就是說這種圖標的信息表達能力會少弱，如下圖：
所以在這樣的理論與數據的支撐下，我對部分圖標進行了如下改版：
有底色的圖標全部從線性改成面性，如改不成面性（例如時鐘）需要適當加粗描邊，目的就是提高視覺識別性。
切記，識別性是圖標最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能！
試想如果一個人沒有性格，那這個人就是沒有靈魂的，圖標也一樣，沒有性格即沒有靈魂。
那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發，例如騰訊動漫的用戶都是動漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標盡量圓潤一些：
像上圖2號圖標一樣，增大圓角，使圖標看起來更加圓潤可愛。
基于這樣的用戶人群，我們還將原有一些單色圖標，改成下面這樣的彩色圖標：
目的就是讓圖標可愛活潑的性格更加明顯。
品牌性是我們經常提到的緯度，常用的提取品牌的基因也有很多，顏色、圖形、吉祥物等等，這里舉兩個例子，一個是具象的品牌基因——吉祥物：
我們有自己的品牌吉祥物——黑子，所以在圖標設計時可以將其運用起來，如下圖就是結合黑子形象設計出來的「逗幣」圖標：
再舉個比較抽象的例子，從 logo 當中提取品牌基因。
由于 logo 的字體筆畫比較粗，整體給人一種厚重飽滿的感覺：
因此我們可以在品牌logo 中提取「粗胖飽滿」的品牌基因，在這樣的背景下就不用再糾結圖標使用2px描邊還是3px的描邊了：
我們可以很確定的使用3px描邊，因為它既符合品牌基因又符合用戶性格（肥胖圓潤顯得可愛）。
很多時候我們做出來的圖標不夠精致，其中一個很大的原因就是不夠飽滿。
如何判斷圖標是否飽滿呢？我常用的衡量方法就是在圖標上面加一個矩形，看圖標的正形的面積是否還可以增加。
例如下圖，藍色是正形，紅色是負形：
很明顯藍色的正形面積是可以增加的，例如：
這就是在增加圖標的飽滿度，我也是按照這個思路來改版圖標飽滿度的。
舉個真實的例子，我們原版的續看圖標是上下結構，而上面部分的圖形太窄，導致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：
于是我對圖標的結構進行了調整，盡可能的減少綠色部分，最后達到了下圖這樣的效果：
最后提醒大家，對于圖標的飽滿度，還需要結合整套圖標的視覺效果來進行調試，雖然上面這個方法可以解決大部分圖標的飽滿問題，但還是要具體場景具體分析，切記，我們的目標是讓整套圖標看起來和諧、統一、精致！
細節也包含很多方面，例如：
1. 角度是否一致或者遵循某種規律
我們定制的角度規范是30度的倍數，這樣可以很大程度的提高圖標統一性。
2. 描邊末端的細節處理
下圖就是一個錯誤的例子，一個描邊末端是直角，一個又是圓角：
我們在處理這樣的細節時，一定要保證統一性。
3. 像素對齊問題
大家會覺得只要把一個尺寸的圖標做好像素對齊，導出其他倍數的圖標就是ok的，其實這樣的想法是不對的，因為在導出0.5或1.5倍數關系的時候，像素很容易再次產生不對齊的情況。
舉個例子，我們做圖標是以2倍圖為基礎，然后統一導出3倍圖，那這時候3倍圖就是2倍圖的1.5倍，導出的時候就發生了下面這樣的情況：
雖然2倍圖是像素對齊的，但3倍圖卻沒有對齊，如果設計師沒有仔細檢查切圖，就會發生線上圖標發虛的情況，所以我們在輸出切圖時，一定要仔細核查，發現錯誤及時調整，免得造成不良影響。
除了以上這些，還有視覺大小、圓角、描邊粗細是否統一的細節，當然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標設計的時候一定要多多注意。
本次梳理的五緯自檢法可以用在圖標設計的自我檢查、改版優化等多個方面，或許它并不全面，但一定具有參考價值，希望能給大家帶來啟發和靈感，我們也會更加努力，爭取做出更好的作品和教程與在設計道路上的你們分享交流。
藍藍設計的小編 http://www.syprn.cn
