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