懶洋洋是一款為多倫多華人提供服務的訂餐平臺用戶群一般為學生、白領等對于視覺上追求簡約、舒適產品流程簡易而順暢（英文是用翻譯軟件翻的，如有錯誤，那就算了吧）

一、圖標的定義

1. 什么是圖標

圖標是具有明確指代含義的計算機圖形。從功能分類角度分為啟動圖標、應用圖標、功能圖標。

2. 什么是功能圖標

功能圖標是具有指代意義且具有功能標識的圖形，它不僅是一種圖形，更是一種標識，它具有高度濃縮并快捷傳達信息、便于記憶的特性。

二、圖標的種類

• 具象圖標：保持事物本來固有形態進行優化設計。如汽車，輪船，飛機，車票……
• 抽象圖標：不是一個具體的事物，更趨于概念化。如個人中心，空間，模式，最近等。

三、圖標的風格

1. 面性圖標

面性圖標是由一根封閉的線造成了面，面性圖標同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標具有穩重、剛毅的男性化特征；曲面具有動態、柔和的女性化特征。

不透明度圖標

不透明度圖標是通過調節圖標的部分面性結構來增加層次感，從配色角度屬于同色系。

△ NO-921

光影圖標

三大面五大調，通過調節面的反光和陰影來增加面性圖標的紋理。在扁平時代的今天保留著微擬物風。

多彩色圖標

多彩色給人很酷炫的感覺，從明度角度還是要提取深淺的顏色來代表圖標的黑白灰。

△ Kyle Anthony Miller

2. 線性圖標

線性圖標是通過粗細一致的線條繪制，高度概括出來的圖標，既能讓人賞心悅目，又給用戶帶來創造和應用的樂趣。

圓角圖標

圓角圖標給人以親和力，也有柔軟，軟弱的一面。在圖標設計越來越精美的今天，圓角圖標的應用行業已經越來越廣泛。比如女性，母嬰，兒童，旅游……

△ Stephen Andrew Murrill

直角圖標

直角圖標給人以銳利，堅強，果斷，不拖泥帶水的一面。讓人眼前一亮的是魅族系統Flyme6 里面的圖標它就是用的直角，給人明快干凈的感覺。真正更好的詮釋它內在含義的非京東金融里的圖標了 ，投資理財的時候需要人們果斷作出判斷。理財有風險，投資需謹慎。直角的感覺讓人當機立斷，不拖泥帶水，快買快出。如果用圓角就感覺柔一點，感覺做事優柔寡斷。所以一下子在金融領域被做成了標桿式的功能圖標。

斷點圖標

斷點圖標是點線面演化的一種產物。在最開始UI興起的時候，設計師們不滿足于單線條的功能圖標，通過點線面增加形式感。最早新浪體育運用到這一風格，算是還是很不錯的一種風格。很遺憾只留在了我的記憶力，網上并沒有找到之前的設計。

△ Catalin Mihut

高光式圖標

高光式圖標是傳統繪畫的產物，我們在傳統繪畫的時候往往最后一筆都是添加高光，起到畫龍點睛的效果。高光式的功能圖標采用里細外粗的規律，和斷點式功能圖標差不多一個年代的產物。在不斷扁平不斷簡潔的今天，也不會感覺那最后一筆也是多余的。

△ Udisk6353

不透明度圖標

不透明度圖標是調節圖標的部分結構的不透明度來增加圖標的層次。色彩上面跟雙色圖標是一樣的，只不過從配色角度屬于同色系的范疇。

△ Laura Reen

雙色圖標

雙色圖標在實際應用中非常廣泛，也是很百搭的那種。一種可以有彩色跟無彩色結合，有彩色的顏色可以是企業色，可以是代表行業或者產品的顏色跟無彩色黑色相結合。一種是主體色跟點綴色組合而成的雙色，但使用時要考慮到當前界面中的配色不宜過多，多了就容易花。

△ stay

線面結合圖標

線面結合圖標也是一種很出彩的風格，線是高度概括的圖標，這時候面更多的是充當裝飾點綴的作用。面的表現方式也有很多種，可以是單色的，漸變色的，也可以像 MBE風格那樣提取主體結構形成的面，也可以提取圖標里面有閉合路徑所形成的面。這種風格應用也非常廣泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

結構圖標

結構圖標算比較有爭議性的圖標，結構圖標是我們學繪畫的時候老師要我們起形，要開始繪畫結構，對基礎的三大面五大調有很好的理解?，F在結構圖標正好相反，比如對于一個具像圖標，我們要分析出它的每一筆每一畫，看清每一個結構，然后用固定的形式來表現出來。固定的形式可以像優酷圖標的相交結構點，可以像上?，斈然▓@一筆一個顏色，等等。

一筆畫圖標

一筆畫圖標是難度系數比較高的一種風格，也是我非常喜歡的一種風格，當才開始流行斷點圖標的時候，錘子設計師歐陽念念就提出了一筆畫圖標的概念，當時也是有爭議的一種圖標。當網易云音樂也出了這種圖標后就更具有說服力。一般也很難駕馭，也基本都能做出來，但是視覺上看上去很舒服還是要有深厚的功底。

logo類圖標

logo 類圖標跟一筆畫算是同等級別難度的，需要圖標足夠精致到可以直接拿來當應用圖標，乃至于 logo。這種在app中屈指可數。最為經典的就當屬網易云音樂的 logo 了，其實它也屬于一筆畫圖標，同時又用做了 logo，它的含金量可想而知。

情感化圖標

情感化圖標是提取人的五官跟圖標相結合具有擬人化的圖標，這種擬人化的場景模仿人在真實場景的應用。QQ 的底部圖標通過五官方向大小移動變化很好的表現出當前場景。QQ 開了先河，相信后續會有很多情感化圖標出現，會有它的一席之地。

3. 如何轉換線性圖標與面性圖標？

線性的閉合路徑的圖形變面性圖標，閉合路徑里面的線條反白，重要的關聯結構線反白，讓面性圖標透氣；線性的不閉合路徑的圖形變面性圖標，應適當的增加線的粗度來達到視覺上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去創造新的圖標風格

繪畫結構＋點線面＋色彩，繪畫結構可以清晰的分析出事物的主體結構，勾勒出主體輪廓，對創造新的圖標風格有很大幫助。繪畫結構選的角度是人很熟知的角度，比如正面，盡量不要選擇帶有透視角度進行設計。點線面是設計的基礎，通過從點線面角度去構思會獲得更多的靈感。色彩方面可以是企業色、行業色、主題色、點綴色等等。（圖design by Ted-Kulakevich and Graphéine ）

四、圖標的特性

1. 統一性

大小的統一

在網頁設計中圖標的主流尺寸有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 規范里給出了圖標的繪制方法。

圓角的規范

2. 簡潔性

簡潔性不單單體驗在圖標的簡潔，還要體現在從創意到實際落地的簡潔。在使用軟件 ai 或者 sketch 的時候繪制基礎圖形不要出現小數點和基數，多用偶數。

3. 層次明確

圖標具有可點擊性和標識性?？牲c擊性就會有點擊前、點擊時、點擊后三種狀態，主流底部標簽欄會在點擊前使用線性圖標，點擊時和點擊后使用面性圖標；也有使用顏色來區分。

4. 延展性

圖標的延展性之前在圖標的風格也講到，好的圖標可以直接當應用圖標或者 logo 來使用。同時好的圖標還可以通過點線面動效變化做下拉加載動畫。

五、如何學會合理的設計功能圖標？

1. 頭腦風暴

頭腦風暴看似一個不知道怎么解釋的詞，簡單的說就是多動腦子，越用越活。頭腦風暴不單單是這里用到，是所有設計師做設計之前必備工作。頭腦風暴完你會覺得你的設計思路會很寬，然后就是要合理的分析每個的可行度，完成的工作量，自己當前設計的水平是否可以有效完成。其實很多設計師能有效的搜索到自己想要的東西也算是頭腦風暴的一種，雖然你不會想出很多點子但還是很明確的知道自己想要什么，一定注意不要直接拿來主義，還是要通過平時的練習掌握更多的風格。為以后頭腦風暴想出的很多點子能很好的實踐出來。比如以旅游為主體進行頭腦風暴，這個就能想到很多很多。

2. 搜集資料

搜集資料的時候要很好的提取關鍵詞，直接從 iconutopia、iconfont、iconfinder、iconmonstr 搜索獲取靈感。具象的事物可以看看該事物好的品牌公司的產品，品牌公司的工業設計相對較好，對后面提取元素也會有很大的幫助。也可以通過提取好的關鍵詞，翻譯成英文，再到國外的網站追波、be搜上一搜看看。搜索到的素材和元素一定要再設計，不能拿來直接用。

3. 提取元素

提取元素又歸結到繪畫結構中去了，繪畫好的看到具象事物，心里默默打開一個燈，三大面五大調，光影關系都有了。不是很理解的還是多練習吧。具象圖標就是提取主要輪廓線，保留可要可不要的元素，到最后的時候做統一刪減；抽象圖標有時候確實沒有一點的思路的時候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合適的還要進行 redesign。有想法后選擇一種圖標風格這樣的繪制效率會很快。

4. 規范化

上面元素提取好后，需要開始選擇一種圖標風格進行繪制。開始繪制的時候不要過于追求圖標的風格，還是要從圖標本身出發快速的繪制好。等全部繪制好了突然想換一種圖標風格也是很快的，水到渠成?？赡軇傞_始很難在規范化的框框里直接就提取元素開始繪制，那就只能先繪制要你想要創意的元素圖標，全部畫好后在統一的規范里面再繪制一遍。規劃化的目的就是讓圖標統一，任何兩個圖標拿出來從視覺大小、風格都是一個統一的整體。

5. 加減法

一套圖標繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當的修修補補，對于視覺上看上去過于繁瑣的圖標要保留大輪廓的同時減少結構達到視覺平衡；對于確實很簡單但有沒辦法添加任何的東西元素來增加的為它做加法的時候是否可以放大，來增加它的視覺豐滿感。

任何人都抵擋不了時間的力量，你可以斥責它的無情，也可以贊美它的給予，在這個成長的歷程中，我們尋找的不是時間給我們帶來了什么，而是這個過程中我經歷了什么。后者，才是我們需要深思并感恩的。

與「用戶體驗」一樣，許多人會評判一個產品用戶體驗的好與差。但是「好」與「差」只是整體上的一種結論，普通人可以說這兩個字。但作為設計師，必須懂得在體驗過程中，知曉哪里好與哪里差，更要知道為什么好為什么差。

就好像評書似的，真正讀過某本書的人，不會單純的說：「這本書太好/爛了」。他一定會有一種感悟，哪怕只是一句話。

既然是為了提升「用戶體驗」，就得與用戶一起進行體驗的走查，才能有根據的進行優化。

一般我們會建立一種用戶體驗路徑，其目的是為了了解用戶的動機、關注點和需求點。所以為了提升用戶體驗，就必須邀請用戶參與體驗路徑的設計過程。

用戶在使用一款產品時，他們中的大多數只是為了完成某個任務，所以在這個過程中，也許用戶只使用了部分功能，也可能使用了所有功能。

因此，不要將體驗路徑的設計限制在特定的產品或功能服務上，要理解完整的用戶體驗路徑，針對性的進行走查，與用戶一起提升產品易用性。

一、讓用戶參與產品設計流程

真實的用戶體驗路徑需要通過不同用戶的參與互動，不管是一對一的討論或焦點小組，都需要大量的數據才能得出真實的結論。

任何沒有基于研究報告的嘗試、假設、數據，都將使它在很大程度上只是理論性的。所以我們一定要通過不同用戶的不同體驗結論，客觀的進行分析路徑中的哪一環可以繼續優化。

與用戶的交流溝通是其中的關鍵，在用戶的幫助下，你很容易找到可提升的體驗點。

因為，用戶情緒的波動和心情的愉悅、滿足、懷疑、失望以及懊悔的表現是無法在報告中準確反映出來的，所以設計師要重視這些用戶反饋，包括這些互動的場景可以使設計師產生共鳴，通過同理心來設計并優化功能。

然而，沒有任何產品或功能服務能夠滿足過程中的所有用戶需求，所以，要深入了解每一個階段出現的需求點，因為它們都會衍生出不同的因素，這使我們能夠理解產品如何更好的服務于用戶的生活。

同樣，沒有任何靈丹妙藥能積極地改變用戶體驗，而是通過與用戶的持續接觸。也許你會說很難進行與用戶直接的對話，所以你通過客服回訪、用戶反饋等方式收集信息也未嘗不可。

可能到這里你還沒有完全明白其中的道理，下面我舉個例子詳細說明。

二、拆解 – 用戶體驗之旅

讓我們來舉一個旅游平臺的例子，這個平臺是供于各種各樣的人和商務旅行者使用的，其中包括了航班、酒店、出租車租賃等在內的度假套餐。

為了讓各位深入了解體驗路徑，以及更好地了解我們的用戶，讓我們對旅行者的體驗路徑也做一個拆解。如下圖：

這個路徑將全面地了解用戶的想法、感受和行為，因為他們會經歷不同的階段，幫助填補我們路徑中的空白點，幫助我們更好的進行產品的設計。

1. 計劃旅行

在計劃旅行時，設計師認為用戶的想法是什么？

• 目的：休息、假期、出差；
• 目的地的候選名單，檢查距離和到達目的地的時間；
• 出行方式選擇：飛機、火車、巴士、游輪、自駕；
• 查看酒店位置與評論好壞；
• 評估旅行成本（如航班、酒店等費用）；
• 可取消功能（如已訂的航班、酒店等）。

2. 用戶角度

通過與用戶的走查、回訪、反饋，可以幫助我們了解用戶內心真實的想法，幫助我們增強以及簡化用戶的體驗方式。

• 在條件允許的情況下，提供盡可能多的價格；
• 經常出差的人會為了飛機上的最佳座位而自愿增加費用；
• 出來旅行的家庭想要知道目的地有哪些有趣的兒童活動；
• 顯示符合用戶自定義預算的旅行套餐；
• 幫助用戶估算旅行成本；
• 給出評價信息，可供用戶評判（朋友、預訂平臺、Facebook等）。

3. 特殊情況

產品是否有處理特殊情況的功能？

• 由于個人原因，推遲了旅行計劃；
• 目的地天氣或其他情況不利。

我們是否可以幫助用戶更好地應對這些情況？通過及時提供有關目的地天氣狀況、備選旅行計劃或建議類似目的地的信息等。

那么通過第一個內容的拆解，我們就可以發現，這個點能做的功能就有很多。而且這些功能還能排列優先級，設計師能主動進行推進，提升設計師自身的價值。功能走查的重要性相信各位也看出來了。下面繼續。

1. 完成預訂

是時候確定目的地、日期、旅行方式和停留地點了。（依然是設計師角度）

• 設計有序、直觀的預訂體驗；
• 安全流暢的付款流程，包括多種支付渠道的選擇；
• 旅行模式的確認細節，包括駕駛方向和幫助熱線電話號碼；
• 酒店確認：房間詳情和熱線電話。

2. 用戶角度

• 直接能從航空公司/酒店確認信息，這樣會比旅行社確認更具價值；
• 目的地指南（視頻、天氣、穿著、提示、要做的事情、文化等）；
• 建議的旅行路線；
• 緊急求助熱線（如果客戶在預訂過程中撥打電話，呼叫應該能及時取得聯系）。

3. 特殊情況

• 預訂未確認，付款已處理。

1. 出行與酒店

設計師考慮的用戶需求。

• 舒暢的旅行體驗（飛行準時等）；
• 入住酒店，快速辦理手續；
• 干凈，方便，光線充足的房間（特別是床，洗手間）；
• 體驗當地的美食和文化；
• WiFi 覆蓋；
• 干凈整潔的出租車等交通工具；
• 與家人和朋友實時分享照片；
• 合理的分配時間。

2. 用戶角度

• 主動跟蹤用戶的行程，確保一切順利（發送提醒，與酒店確認）；
• 目的地指南（事件、當地交通、天氣、衣服、提示、要做的事情等）；
• 當地餐廳/購物券/優惠等。

3. 特殊情況

• 航班延誤或取消；
• 緊急的醫療情況；
• 信用卡透支。

1. 旅程與歸來

旅途中的回憶和收獲。

• 在臉書/ Instagram / Twitter / WhatsApp 上共享更新和照片；
• 與家人和朋友分享經驗；
• 回憶當地的美食；
• 經驗與旅游前的期望不相符，過度炒作；
• 航班和酒店服務；
• 評論旅程的整體情況。

2. 用戶角度

• 提醒攜帶基本藥物；
• 幫助預支旅行預算；
• 關于外匯轉換；
• 當地醫療建議、

3. 特殊情況

• 剩下的錢如何兌換；（如國外游）
• 退款；
• 行李丟失。

通過以上的拆解說明，可見體驗路徑對于功能設計的重要性，各位設計師一定不要主觀認為「你就是用戶」，而是結合用戶需求進行分析，設計出更合理的功能。

小結

設計師要不斷完善用戶的體驗路徑模式，因為它會一直發展，將產品優化的越來越好，而不僅僅是停留在：「這個產品我做完了」的想法上。

所以為什么說用戶體驗是一種過程？因為它始終在不斷變化，所以作為設計師也要持續的自我增值，才能跟上產品迭代、時代發展的步伐。

用戶體驗是一種過程，而不是結果

漸變這一視覺趨勢，在最近幾年里可謂如日中天。很多平平淡淡的設計，將平涂改為漸變，立刻就能增加醒目感。

• 雖說漸變是一個有效的元素，但為什么我們的漸變，還是和大神們的漸變有區別？
• 我們應該怎樣做出漸變的質感？
• 為什么說用色才是漸變的精髓？

今天我們就來和大家聊聊漸變這個話題，深入了解我們似乎以為自己懂了的漸變，我們將和大家一起分析漸變配色中，利用色彩不同特性之間的對比來用色，以及一些簡單的操作小技巧。比如快速生成一個色輪，以及簡單的利用混合工具來配出漸變配色的色彩。

漸變是在色彩上的一個相對緩慢的過渡，我們的視覺會隨著這個漸變的過渡而產生一種流動感，而這種流動感全憑在色彩上發生的種種變化。是的，我們的重點來了，就是這個變化，需要我們今天深入去加以了解。

談到變化，我們自然會想到這個變化的范圍。如果拿出我們的色輪來看，我們就會發現色輪上的變化范圍有大有小，當兩個色彩距離較近時，我們可以說他們是鄰近色，這時難以發現他們的區別，直至我們的肉眼無法分辨。這時候可以說變化范圍較小。

當兩個色彩距離180，在色輪上呈相對，我們可以說這時的色彩變化是最大的，于是也就產生了最強烈的對比。很多撞色的情況，也是在這種對比下發生的。我們通常會把這對顏色稱為互補色。

當然，實際的情況比這要稍微復雜一點，我們一起來看下。

一、色相對比

剛剛大家可以發現，這個色輪上的色彩的一個特點是什么？只有色相的變化。沒錯，我們平時也已經習慣了，只用色相來區分色彩。所以，今天要講的第一個對比，也就是色相的對比。

色相的對比，在色輪上就能很直觀的表現。例如紅色和黃色這一段，截取過來以后，就變為了紅 – 黃漸變。利用色環就能很輕松的實現色相的漸變。距離越遠，漸變色的對比也就越大，互補色之間的對比達到了極值，比如紅 – 藍漸變的對比就大過紅 – 黃漸變。

這里首先教給大家一個快速生成色輪的小技巧，這個技巧不需要利用網上的圖片或工具?，F做現用，很方便。

1. 小技巧：快速生成色輪

STEP 01

讓我們先用這個自定義形狀工具畫出一個圓環。

STEP 02

然后在圓環里填充色彩，這里我們運用一個漸變疊加。

漸變疊加的疊加方式為角度漸變，漸變色這里選用「色譜」，沒有找到這個漸變的小伙伴記得要追加色譜。

這時做出的色輪，在色彩上飽和度達到最大值。因此也能表現最強烈的色相對比。目前比較流行的漸變色是明度偏高，飽和度居中的漸變，也像這樣的糖果色，因此這時大家可以利用調整圖層「色相/飽和度」來增加明度或降低飽和度。

2. 高能提醒：別被參數騙了

可能很容易被初學者忽略的是，我們在 PS 里的色彩（HSB）這個參數里看下，一般來說H-色相，S-飽和度，B-明度，這里的情況和我們在色彩學里學到的 HSB 有點小差異。

色相這里沒有問題，但是飽和度和明度，尤其是飽和度上面，大家可以看到一般來說飽和度時，色彩是慢慢失去色度，也就是呈現灰色，但是在軟件里把 S 這個值調到最小呈現出是白色；還有另一個屬性：明度，最大的明度，應該是白色，在軟件里的 B 這個參數調到最高時，并不是白色。

在 PS 里，只有把色彩放到「色相/飽和度」這個工具里，才會看到和我們書里的概念表現一致的特性。

3. 工具不同，漸變也就不同

運用色環配出的漸變色和直接利用漸變工具配出的漸變色還有差別的，最重要是體現在顏色的過渡上。如果是用漸變工具選擇了左邊綠色，右邊紫色的漸變色，在中間出現的過渡色就表現出一種發灰的色彩。如果所選用的兩端的顏色是在色環上距離有定的角度，就會出現這種灰色。這是因為兩種顏色彼此混合所造成的。有些情況下，確實是需要這樣過渡的，這就直接用漸變工具來做漸變。

另外一個情況就是不希望色彩發灰，這時需要用到色環，在色環上根據所需要的漸變過渡來選取不同的色彩配置。

可以看出來，盡管沒有飽和度、明度的變化，色彩仍然是彼此之間所表現的特質都很獨特，所以基本上利用色相對比，就能配出非常優秀的漸變作品。

一般來說，漸變本身就足夠吸引人，有漸變參與的情況下，我個人的建議是色彩不要太多，盡量少元素，整體風格傾向極簡，這時最能發揮漸變色這種特質的魅力。

這個案例中的漸變過渡，中間的這個紅色和藍色的漸變就是用漸變工具做出來的，兩邊的漸變都是取用了色環上的漸變過渡，可以看到色彩上兩邊的漸變中的色相更多，更飽滿，飽和度和明度都沒有喪失，而中間的漸變在紅藍之間的過渡出現了飽和度較低的紫灰色。

二、色溫對比

色溫是什么？色溫更多是色彩對人的主觀的心理因素的影響。雖說是主觀，但是大家的整體傾向還是比較類同。比如藍色清涼，紅色溫暖。

所以，把色環上的色彩根據主觀溫度進行一個劃分，就有了我們經常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進行衡量，但是卻在色彩中發揮不小的作用。

1. 獲得平衡感

漸變中加入色溫這個屬性，這個游戲就會更好玩。一般來說，為了達到配色平衡，我們的配色中需要冷暖進行平衡，這里的平衡并非是1：1的嚴格配比，而是彼此滲透，雙方根據位置、面積、形狀等等元素的共同參與，共同實現一個版面的平衡。當然，這不是件容易的事，但這是我們配色中的方向之一。

回到我們的色溫對比，要體現在漸變中，就是要有冷色和暖色的參與。一般來說，在比較簡單的過渡性雙色漸變里，一個冷色一個暖色是非常常見的表達方式。還是拿剛剛那個案例來看，左邊兩個配色就是冷暖的過渡，而右邊的配色相對來說偏暖，當然相比之下，洋紅色還是比橙色會更偏冷一些。

2. 綠色和紫色：冷暖不定

冷暖色的對比都是在同一個版面內的一個動態對比，尤其對于綠色和紫色這個范圍內的色彩來說的話更是如此。比如綠色，在和藍色搭配的時候，由于藍色是絕對的冷色，所以綠色就表現出暖色的特質；而綠色如果和橙色搭配，橙色又是絕對的暖色，所以綠色又表現出冷色的特性。紫色也是同樣的情況，和藍色搭配它偏向暖色，而和橙色搭配時它又是偏冷的。

用起來其實也很簡單，如果你的配色中發現整體感覺偏冷，就增加暖色。如果太暖，那就增加冷色調。如果整體的配色看不出哪里不對勁，但總覺得色彩有點奇怪，就先看看色溫是不是實現了平衡。

三、明度對比

再增加一個屬性，漸變這個游戲又增加難度了，明度這個屬性表現為顏色的明暗程度，明度引入了另一個性質：光。其實我們平時看到的色彩就是因為有了光，才有了顏色。但是一般來說我們會把光簡單歸屬于「發光」這個行列。事實上，由于光線的折射，我們視網膜接受到光的波長，才產生了色彩。那么光線的強烈與否，就會影響這個顏色的表現。

明度的對比，是所有顏色屬性當中，最容易被覺察到的。我們可以簡單來看，我們的素描就是利用明暗來表現物體，黑白灰能毫不費力表現現實中光的感覺。所以在配色中，有了明暗對比，是一個很好表現色彩感染力的元素。

1. 表現立體感

即使明度相同，我們的色彩明暗程度（從主觀感受來說），也是不一樣的。比如相同明度的黃綠色和紫色，在明暗表現上，黃綠色明顯更亮，更靠前。如果讓這兩個色彩之間發生漸變關系，這樣的表現就很像左上角有光滲入進這塊平面中。如果進一步降低的紫色的明度，這時，明度的對比就更為強烈。這時很適合表現出某種立體感。

當然，我們的色彩并非一定要有立體感才能生動，有些配色大師，會刻意去弱化立體感，所以會盡量避免明暗的對比。但是，作為初學者，一定要知道明暗對比，懂得在適當的情況下拿來使用。

尤其是在同色系或者鄰近色色系的漸變里，明度對比是一個增加立體表現力的方式。有些時候，平涂的方式看起來呆板單調，利用同色系漸變就能很好解決這個問題。兩個色彩之間可以非常近似，即便如此，還是和平涂有差別。有了光的感覺就要隨時注意受光的方向，在整個畫面里保持全局光，所謂全局光，換個簡單的說法就是大家都在同一光源照射下。

我們可以再和大家演示一下，例如這里有兩個圓，這兩個圓都是填充為紫 – 綠漸變，這時的紫和綠是同樣的明度。這里注意，就算是同樣明度，兩個顏色在直觀的感覺上，明暗程度也是有差別的，比如綠色會稍微亮一點。這時打開漸變工具，在后邊的綠色這一端色彩，將它的明度調高，這時大家會發現，右邊這個圓就變為了一個球體。

2. 從黑白灰開始

明度漸變還是增加作品細膩程度的一個方法，我們和大神的差距，也許真有可能就是一處小小的明暗關系的不同。別忘了，明度對比對整體效果所發生的影響是最大的，但也是我們最容易忽略的，有時候一旦有了顏色，我們的焦點都在色調和色度上。但其實所有的配色，比如我們做設計，一開始總是從黑白灰開始做起，先配置好明度，然后再開始根據明度來選擇用色。

有了對明度的把握，我想我們對色彩的把握才能上升到新的層次，否則，我們在一堆色彩里，很容易迷失方向。

四、色度對比

這里說的色度，也被叫飽和度，有的書上也叫彩度，拿我們日常用語講就是鮮艷程度。色度對比越強，尤其是色輪上的互補色，在他們色度都達到最大時，會撞出最大的火花，產生最強烈的效果。

有時候這種高彩度的配色用在動感很強的設計中，看上去活力四射。但這種互補色之間也會發生彼此互斥的關系，造成整個版面的凌亂，所以要非常謹慎的對待色度。

空氣透視 – 空間感的塑造

色度對比最常見的就是用在空間感的塑造上，大家都知道，色度越高，在視覺上會制造一種「更近」的效果。

舉例來說吧，我們這里可以畫一個梯形，這個梯形用漸變來填色。如果用單色，大家一定感覺不出空間感。如果我們采用漸變，使得同一個顏色，比如紫紅色，在這個梯形上，由上到下做一個漸變，這個漸變中兩端的色彩，在色度上有差距。那這時就能體現出一個慢慢延伸到遠方的感覺。甚至還能有種暴露在空氣中，被空氣弱化的視覺效果。這個也運用在插畫中，也被叫做空氣透視。

色彩濃度的強弱對比，和其他的色彩的屬性相結合，配色就變得更復雜。但是通常來說，配色并沒有標準答案。所以導致很多人在配色的時候，都是依靠一種感覺在操作。其實感覺的確是一個最直接的選色方法之一，但是并不是唯一的方式。大家如果對色彩有更深入的了解以后，就會慢慢理解感覺層面下的更有趣的東西。這個也是經驗積累。

在飽和度這一環，PS 里如果覺得不是很靠譜，就像我之前和大家提過，那么大家可以進入到 AI 里，利用 AI 的混合工具來生成不同的色階。例如我們在這里用一個高飽和度的紅色和一個低飽和度的藍色相搭配。應該說，這兩端的色彩既有飽和度的對比，也有色調和明度的對比，還有色溫的對比，應該說是對比是非常豐富的。所以，這一條矩形，用在背景色上，我個人感覺不是太合適。如果是做成一些特殊的效果，還是不錯，比如設計字體的時候做筆畫造型，或者做裝飾的線條。

最后一個我們要略提一下，就是透明度的對比。盡管透明度不是標準的顏色屬性中的一種，但是在我們軟件操作當中，透明度是相當實用的。漸變的色彩，我們可以改變其中一個色彩的透明度，比如降低到0，那么一端的色彩消失不見，這樣最容易造成一種濃霧的效果。

這個插畫，是在設計我自己的個人網站時做的，其中這些背景中的立方體的某些塊面，就是采用某一端降低透明度的效果。有一種在云端的感覺。

五、兩個漸變配色網站推薦

1. Grabient

網站鏈接：https://www.grabient.com/

這個網站的工具很好用，我當時在群里推薦的時候，有人問我說這個和 PS 里的漸變工具有什么區別。我在剛剛其實已經和大家講過，PS里的顏色的設置是有一些和我們的色彩理論不太符合的地方，但是這個漸變工具就完全符合我們對色彩屬性的了解。所以在這里可以進行調試，再確定漸變的值，最后放到 PS 里用。

2. WebGradients

網站鏈接：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倍圖卻沒有對齊，如果設計師沒有仔細檢查切圖，就會發生線上圖標發虛的情況，所以我們在輸出切圖時，一定要仔細核查，發現錯誤及時調整，免得造成不良影響。

除了以上這些，還有視覺大小、圓角、描邊粗細是否統一的細節，當然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標設計的時候一定要多多注意。

總結

本次梳理的五緯自檢法可以用在圖標設計的自我檢查、改版優化等多個方面，或許它并不全面，但一定具有參考價值，希望能給大家帶來啟發和靈感，我們也會更加努力，爭取做出更好的作品和教程與在設計道路上的你們分享交流。

交互設計是什么？
交互設計 Interaction Design 也被成為IXD。交互設計建立起了人與計算機便捷溝通的通道，它的目標是創造可用性和用戶體驗俱佳的產品。作為UI設計師，我們在工作之中經常會對接交互設計師和產品經理，他們具有豐富的交互知識和經驗。那是不是我們作為UI設計師，就只需要專心做好視覺層面的工作而不需要了解交互設計了呢？當然不是，在視覺設計層面更多地考慮布局和交互原則才可以讓我們的界面更友好，視覺設計師是交互設計中非常重要的角色。
用戶體驗
在工作中經常聽到UED（用戶體驗設計）和UCD（以用戶為中心的設計），可見互聯網行業非常重視用戶體驗，而用戶體驗絕不僅僅是要樣子好看。有些設計師只關注視覺層面，認為產品戰略等用戶體驗維度和自己的設計無關，那么就會和產品經理等角色處于不同的世界了?！八麄優槭裁匆疫@么改？”、“為什么這里文字要淺一點？”有時不理解對方的思考角度就會造成爭執。用戶體驗（User Experience）是用戶使用產品的心理和感受，用戶體驗體現了產品設計以人為本的設計精神。其實早在互聯網出現之前就有“顧客先點雞就先有雞”、“顧客就是上帝”這種說法，并且西方很多大公司如施樂、聯合利華等大公司早在互聯網行業出現之前就已經開始進行研究用戶體驗了，可見用戶體驗對所有產品是多么的重要。但是讓人摸不著頭腦的是，用戶體驗有時非常地主觀：因為用戶體驗背后影響用戶的因素有人的喜好、情感、印象、心理反應等，有些人明明有摩拜卻要走很遠找OFO，也有人只吃肯德基而不吃麥當勞。這些選擇并不是優勝劣汰，而是有背后的原因的。要想讓我們的產品被人喜歡，我們需要研究用戶。
Image title
用戶研究七種方法
但用戶可能是幾百萬人呢！我們面對這樣抽象的群體然后告訴自己要以他們為中心設計這多么抽象啊。這么多用戶甚至有時用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢？
用戶畫像
根據產品的調性和用戶群體，用戶研究團隊可以設計出一個用戶的模型，這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標簽組成的，通過這個標簽我們可以更好地理解誰在使用我們的產品。用戶畫像建立后，每個功能可以完成自己的用戶故事：用戶在什么場景下需要這個功能。這樣，我們所設計的功能就會更接近用戶實際的需要。比如我們現在要設計一個女裝購物應用，那么我們可以做這個用戶畫像：小美，在北京國貿CBD上班，21歲，收入8000，喜歡淘寶購物和電視購物。使用我們產品的目的是為了尋找正品時尚大牌服裝進行網購。小美因為剛畢業所以一方面喜歡大牌一方面又資金短缺（啟發：我們的產品是不是要解決這兩個痛點？）小美是時尚OL，審美很高，不喜歡俗氣的設計。（啟發：界面設計是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色？）?？矗词剐∶啦⒉徽鎸嵈嬖?，但是她指引了我們的產品設計。接下來，我們還可以給小美增加一個頭像，在做設計時我們想象這個人就是真實存在的用戶，她會對我們的設計有什么看法。當我們完成用戶畫像之后，還可以接著設計用戶故事：小美經常需要在工作場合穿符合工作氣質的衣服，也需要在約會時有晚禮服之類的服裝，可是小美的收入有限，她眼光較高但是對價格過高的服裝無法承擔，她使用我們的APP就是為了尋找正品且價格適中的服裝。那么，小美在哪里用我們的APP呢？這就要為小美繼續設計一個用戶使用場景了：小美在開會時可能會打開看看、在地鐵里也會瀏覽、在清晨打開衣柜時也會瀏覽。基本來說是碎片時間，而且是有著裝需求時。（啟發：我們是不是需要把字號調大以適應地鐵里顛簸的閱讀環境？我們是不是需要設計省流量模式免得剛剛畢業的小美花一筆巨大的流量資費？）
Image title
用戶畫像
用戶訪談
邀約用戶來回答產品的相關問題，并記錄作出后續分析。用戶訪談有三種形式：結構式訪談（根據之前寫好的問題結構）、半結構式訪談（一半根據問題一半討論）、開放式訪談（較為深入地和用戶交流，雙方都有主動權來探討）。用戶訪談設置時要注意：用戶不可以是互聯網從業的專業人員、不可以提出誘導性問題、不要使用專業術語。用戶訪談適合產品開發的全部過程。
問卷調查
可分為紙質調查問卷、網絡問卷調查。依據產品列出需要了解的問題，制成文檔讓用戶回答。問卷調查是一種成本比較低的用戶調查方法。問卷調查適合產品策劃初期對目標人群的投放，另外注意一個問題最好收集10個問卷，也就是如果你有10個問題那么至少要收集100個問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷，很可能敷衍了事的回答會擾亂我們的判斷。
焦點小組
焦點小組一般有6-12人組成，由一名專業人士主持，依照訪談提綱引導小組成員各抒己見，并記錄分析。并且在焦點小組的房間里會有一扇單向玻璃窗，用戶是看不到里面有誰的。而在里面坐著的通常是開發團隊，他們可以清晰地看到用戶是如何吐槽他們的產品的，但是他們沒有權利直接和用戶進行解釋。焦點小組需要特殊的房間和設備，主持人也需要訓練有素，焦點小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產品和對產品的不滿。
可用性測試
通過篩選讓不同用戶群來對產品進行操作，同時觀察人員在旁邊觀察并記錄，可用性測試的要求是用戶不可以是互聯網從業者而應該是真實產品的用戶群體。但是可用性測試一般要有一個可用的軟件版本或者原型供人測試才可以，在軟件開發的前期不適合用這個方法。
眼動測試
使用特殊的設備眼動儀來追蹤用戶使用產品時眼睛聚焦在哪里，盲區是哪里。比如一個網站通過眼動測試可以知道用戶的視覺會自動屏蔽網站的常見廣告位置，這時如果希望提高廣告的點擊，就需要把廣告位放置于用戶聚焦時間較長的位置。眼動測試的設備比較專業，通常在小公司較難開展。
用戶反饋和大數據分析
根據市場提供的反饋和數據得出客觀的判斷和合理的推測。用戶反饋也是用戶研究的一個重點，用戶反饋主要是用戶通過產品的反饋入口主動向開發者提出的意見。
有了這些方法，我們就能更好地了解用戶和接近用戶了。但是要注意，用戶研究也是有陷阱的。比如：填寫問卷和參與調研的用戶可能并不是核心用戶；提交用戶反饋的用戶之外可能有更多沉默的用戶等?？傊脩粞芯渴且粋€必要的手段，但是仍然需要產品團隊來對產品的方向做出決斷。
用戶如何使用產品
使用場景
剛才我們介紹了用戶使用的場景是根據產品的功能和平臺決定的。電腦的使用場景是正襟危坐，手持鼠標。而移動端則是隨時隨地使用，我們的用戶可能在地鐵里、在廁所里、在吃飯時、在上課中怕老師看到把手機藏在桌洞里、在工作中領導巡視后偷偷瞄、在輾轉反側睡不著的時候沒有開燈地瀏覽等。這時我們要為用戶考慮，如果他們在使用我們產品的各種場景中有什么需要，是不是需要省流量、是不是需要調整字號、是不是需要過濾藍光、是不是需要護眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時需要個手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個不考慮用戶使用場景的產品一定是會遭到吐槽的。很久之前我聽同事在吃飯時抱怨過“大爺的，也不搞個提示，早晨在地鐵里用4G看流量以為是在家用WIFI，結果看了一集《甄嬛傳》花了80塊錢”、“哎？你是不是早晨開會時玩游戲了？你的比分都給我們推送了哈哈哈”。
Image title
我的產品中的用戶使用場景表格
操作手勢
網頁設計所處的電腦端目前主要還是依靠鼠標點擊來操作。鼠標點擊的最小單位甚至可以是一像素。而移動端不太一樣，移動端設備中我們使用手指來操作界面。一般來說，手指點觸區域最小尺寸為7×7 mm，拇指最小尺寸為9×9 mm。也就是在我們@2x設計中為88px（或44pt）。這個神奇地88PX在移動端應用很廣泛：很多表單單項的高度是88ox、導航欄高度也是88px等等。那您可能會說，也不對吧，有些界面上的圖標看上去沒有88px啊。是的，但是那只是視覺，我們可以通過增加圖標點擊區域的方式（比如給60像素大小的圖標左右增加22像素的透明區域）來讓圖標更好點擊。千萬在設計時不要把操作區域放得特別近，可以把所有點擊區域用88px標記看是否有重疊的情況，避免點擊一個圖標時誤點另一個圖標。除了點擊區域，移動端還可以利用各種手勢來進行各種操作的設計。主要的手勢有：
Image title
單點觸碰（Tap）：點擊用來選擇一個元素，類似鼠標的左鍵，是最常用的手勢。
拖曳（Drag）：點擊某個元素然后拖拽進行移動，類似現實生活中移動物體的感覺。
快速拖曳（Flick）速度很快的拖曳操作。
滑動（Swipe）：水平或垂直方向的滑動，比如翻閱相冊和電子書翻閱的手勢。
雙擊（Double-Click）：快速點擊一個物體，通常會在放大、縮小操作中使用。
捏（Pinch）：兩根手指頭向內捏，捏的動作會使物體變得更小，通常在縮小操作中使用。網易新聞客戶端中正文頁面即可通過捏的動作來縮小字號。
伸展（Stretch）：兩根手指向外推，現實中這種操作會使物體向外拉伸，元素可能會變得更大，通常會在放大操作中使用。網易新聞客戶端中正文頁面可以通過伸展放大字號。
長按（Touch and hold）：手指點擊并按住會激發另一個操作。比如朋友圈的相機圖標長按可只發文字。但是注意，長按不是一個常態操作，所以一般不太建議用戶進行該操作。但長按操作又是有需要的，所以會把刪除、只發文字狀態等操作隱藏其中。
除了用戶使用場景、點擊區域、手勢，那么還有一個影響我們設計的使用情況，就是用戶怎么拿手機很重要。用戶可以：單手拿手機、雙手拿手機、直向拿手機、橫向拿手機。我們需要考慮這些可能發生的特征進行手勢互動的規劃與設計。比如OFO為了讓單手（說不定是左手還是右手）操作方便，主要按鈕在下方并且做的很大，左右手都可以輕松點擊。而微信的很多按鈕也都是大長條，方便左右手的觸發。橫屏使用場景一般是游戲、視頻等，所以一般的APP并不支持橫屏操作（微信、支付寶、微博均不支持橫屏操作），
Image title
格式塔：我們如何認知？
我們發現有些用戶在使用設計好的界面時找不到一些重要的功能按鈕?！捌婀?，分享功能不就在更多按鈕里面嗎？”、“用戶怎么連這個也找不到啊”你也許會說。我們要來了解一下用戶是如何認知我們設計好的界面的。在初高中考試的時候您一定見過完形填空這種格式吧，“格式塔”源自德語“Gestalt”，意即“整體”、“完形”的意思。格式塔心理學認為，我們在觀察的時候會自動腦補出一些邏輯和含義來，會讓觀察對象變成一個完整的、整體的、常見的形狀。
＂研表究明，漢字的序順并不定一能影閱響讀，比如當你完看這句話后之，才發這現里的字全是都亂的。＂研究格式塔心理學對我們做互聯網產品和設計有什么用呢？掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據固定位置找到提交按鈕、我們也可以讓用戶不經過太多思考在殺毒軟件中點擊殺毒按鈕等。格式塔心理學對于我們做好表現層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個知識點。
接近律 law of proximity
格式塔心理學認為，人們認知事物的時候，會依靠它們的距離來判斷它們之間的關系。兩個元素越近就說明它們之間關系更強。但是接近也是有對比的，在復雜的設計中，我們要一邊考慮它們之間內部的邏輯關系一邊來排版。
Image title
A組和B組因為接近律而產生不同地閱讀順序
Image title
距離更近的信息暗示了他們有內在的邏輯關系
相似律law of similarity
認知事物時，刺激要素（比如大小、色彩、形狀等要素）相似的元素我們傾向于把它們聯合在一起或者認為它們是一個種類。比如，我們能輕易的分辨出撥號頁面中撥號鍵和按鍵群的區別。
Image title
相似的元素暗示了他們屬于一個種類
Image title
類似外形的單元會被我們人腦默認為同一屬類
閉合律law of closure
就算沒有外形的約束，我們也會自動把圖形腦補完全。比如半個形狀或者有缺口的形狀我們不會認為是一條線，而是一個完整的形狀。閉合是指一種完形的認知規律。
Image title
左邊的圖中我們會認為是圓形有缺口而不是一條曲線
右邊的圖形中我們會認為是圓形被三條線截斷了而不是四個圖形
Image title
界面設計中露出一半內容，閉合律讓我們感知右邊還隱藏著更多內容
連續律law of continuity
在知覺過程中人們往往傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線，也就是視覺的慣性。利用連續律我們可以讓用戶操作界面時不經過思考就點擊一個固定的位置。
Image title
深諳連續律的流氓軟件
成員特性律law of membership character
如果我們有很多同樣的按鈕，如何讓某個更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢？那就要用到成員特性律了。成員特性律賦予了集體中某一個元素特殊的一些刺激元素從而突出它。
Image title
獨特的外形暗示了它與別的元素有不同的功能
Image title
撥號頁面中撥號鍵與微博發布微博圖標都與其他按鈕不同
記憶律：我們如何記憶？
接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學家沃爾夫對遺忘問題所作的經典性研究得出了格式塔的三大記憶律。沃爾夫實驗時要求實驗體觀看樣本圖形并記住它們，然后在不同的時間里根據記憶把它們畫出來。結果發現實驗體在不同的間隔時間畫出來的圖像都有不同。有時再現的圖畫比原來的圖畫更簡單更有規則，有時原來圖畫中顯著的細節在再現時被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規律稱之為格式塔三大記憶律：“水平化”、“尖銳化”、“常態化”。
Image title哪個圖形才是正確的？（圖片來源：網絡）
水平化leveling
水平化是指在記憶中我們趨向于減少知覺圖形小的不規則部分使其對稱；或趨向于減少知覺圖形中的具體細節。
尖銳化sharpening
尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中，人們往往強調知覺圖形的某些特征而忽視其它具體細節的過程。在有些心理學家看來，人類記憶的特征之一，就是客體中最明顯的特征在再現過程中往往被夸大了。
常態化normalizing
常態化是指人們在記憶中，往往根據自己已有的記憶痕跡對知覺圖形加以修改，即一般會趨向于按照自己認為它似乎應該是什么樣子來加以修改的。
Image title
情感化設計是什么？
了解格式塔會讓我們把界面做得符合用戶的心理預期，讓用戶能夠明顯地找到他應該找到的操作?？墒怯脩艉孟襁€是不開心，因為用戶覺得界面不好看。您是不是也會陷入這樣的矛盾：可用性重要還是美感更重要？怎么樣能夠讓我們設計的界面又好用還漂亮呢？情感化設計由唐納德·A·諾曼博士提出，指的是設計中情感在所處于的重要地位以及如何讓用戶把情感投射在產品上來解決可用性與美感的矛盾。情感化設計是在抓住用戶注意、誘發情緒反應以提高執行行為的可能性的設計。比如紅色且巨大的購買按鈕能夠無意識地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網絡不好時的焦慮等等。情感化設計有三個水平，它們是遞進關系，分別是：本能水平（重視設計外形）、行為水平設計（重視使用的樂趣和效率）、反思水平設計（重視自我形象、個人滿意、記憶）。
Image title
本能水平
我們都是視覺動物，對外形的觀察和理解是出于我們本能的。本能水平的設計就是刺激用戶的感官體驗，讓別人注意到我們的設計。這個階段的設計會更加關注外形的視覺效果。比如各大電商網站的專題頁面設計，更加注重抓眼球和外觀的刺激。
行為水平
行為水平是功能性產品需要注重的。一個產品是否達到了行為水平，要看它是否能有效地完成任務，是否是一種有樂趣的操作體驗。優秀行為水平設計的四個方面：功能，易懂性，可用性和物理感覺。比如好用的記事本APP等。
反思水平
反思水平的設計與用戶長期感受有關，這種水平的設計建立了品牌感和用戶的情感投射。反思水平設計是產品和用戶之間情感的紐帶，通過互動給用戶自我形象、滿意度、記憶等體驗，讓用戶形成對品牌的認知，培養對品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求五個層次。我認為反思水平的設計就是提供給用戶歸屬感、尊重、自我實現。比如Google每逢節日就會有一些符合節日化的設計、網易嚴選的空狀態也會有品牌感的體現等。
Image title
淘寶空狀態中的情感化設計
情感化設計的表達
Image title
畫面 畫面是情感化設計的重點，讓錯誤頁面或者空狀態都成為一幅可愛的插畫。
應景 讓用戶在我們的產品中體驗到一些和真實世界一樣的氛圍變化。
游戲感 沒有人喜歡做任務。試著讓用戶完成的任務變成游戲吧。比如每次登陸加金幣，有足夠的金幣就可以獲得什么稱號。
沖突 沖突非常能夠勾起人的情緒，營造一個競爭或者對抗的氛圍，讓用戶感覺自己置身在一個比賽或者格斗中一樣。
講故事 給產品和無聊的圖像一些故事內容，畢竟沒有人討厭講故事。
隱喻 用一些大家理解，隨處可見的事物表達一些無趣、生澀的概念。
互動 給用戶和其他用戶多制造互動機會，比如排行榜、推薦等，不要讓用戶感覺孤獨。
交互八原則
當我們了解了產品五要素（產品設計的維度問題）、格式塔心理學（用戶如何認知的問題）、情感化設計（如何讓用戶滿意的問題）后，我還要給您介紹一大堆地交互原則。這些交互原則會幫助我們設計出更好用的界面，當然也可以幫助我們講出這樣設計的原因。不拿出一些理論怎么能夠讓別人信服你的設計，對不對？
費茨定律（Fitts’Law）
費茨定律指的是：光標到達一個目標的時間，與當前光標所在的位置和目標位置的距離（D）和目標大?。⊿）有關。它的數學公式是：時間 T = a + b log2(D/S+1)。這個定律是由保羅.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在很多領域都得到了應用，特別是在互聯網設計中尤為深遠。我們利用費茨定律估算用戶移動光標到鏈接或者按鈕所需的時間，時間越短越。比如有一個按鈕在左下角，我們的操作可以細分為兩個階段：第一個階段大范圍移動到左下方向，然后再做微調到達這個按鈕之上。所以這個時間受按鈕和鏈接所在位置與按鈕和鏈接大小影響，也就是說我們在做設計時要考慮光標默認會放在哪里、我們的鏈接按鈕是不是太小了。
Image title
費茨定律說明距離越短、目標大小越大，那么光標到達目標越快
Image title
費茨定律在網頁設計中的使用
Image title
OFO和蘋果音樂APP都將按鈕放置手指最容易點擊的區域并且按鈕足夠大
希克定律（Hick’s Law）
?？硕墒侵敢粋€人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。它的數學公式是：反應時間 T=a+b log2（n）。在我們的設計中如果給用戶的選擇更多，那么用戶所需要做出決定的時間就越長。比如我們給出用戶菜單-子菜單-選項，那么用戶可能會很糾結；如果我們簡化成菜單-選項，就會減少用戶做選擇的時間。
Image title
用戶反應時間和選擇數量的關系
Image title
我們應該減少用戶的選擇
7±2法則
讓我們先玩個游戲，請記憶下面的文字，一分鐘后移開視線：
掙 多 久 可 貓 風 師 裊 崩 六 酒 望
現在閉上眼睛想一下剛才的文字您能回憶幾個？大概是五個到九個之間。1956年美國科學家米勒對人類短時記憶能力進行了研究，他注意到年輕人的記憶廣度大約為5到9個單位之間，就是7±2法則。這個法則對我們做界面設計的啟迪就是如果希望用戶記住導航區域的內容或者一個路徑的順序，那么數量應該控制在七個左右，比如蘋果和站酷網站的導航個數。另外，移動端底部Tab區域最多也是五個，而頁面中的八大金剛圖標也是八個。
Image title
蘋果、站酷、Dribbble等網站導航數量全部是7±2
泰思勒定律（Tesler’s Law）
這個定律是說產品固有的復雜性存在一個臨界點，超過了這個點過程就不能再簡化了。我們只能將這種復雜性轉移。比如我們如果發現頁面的功能是必須的，但當前的頁面信息過載，那么就需要將次要的功能收起或者轉移。
Image title
Dribbble網站導航將更多功能收起在一個表示更多的圖標內
防錯原則
一個表單是需要填寫完畢后方可提交的。但是用戶有時會漏填或者忘記填寫，這是用戶點擊提交會怎么樣？很可能有些選項會被清空（比如密碼選項基于安全考慮會清空cookies）那么用戶還得重新填寫。這時解決辦法是在用戶沒填寫完之前把按鈕設置一個看起來不能點擊的樣式，用戶想提交時彈窗：您還有內容沒有填寫完哦，然后把用戶定位在沒填寫完的項目，讓那個表單高亮。（是不是真的做到以用戶為中心啦？）再比如推特只允許用戶填寫140個字，但用戶一寫爽了往往會超出140個字那怎么辦？解決辦法是給他在旁邊倒數還能寫幾個字。看，這些都是我們為了防止用戶操作出現錯誤所做的努力，防錯設計就是要減少錯誤操作所帶來的災難。錯誤的提示當然需要設計師的設計了?？墒且苍S您不知道有些錯誤提示含糊，用戶并不知道到底錯的是哪里，下一步該怎么辦。比如僅僅登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、連續三次輸入密碼錯誤、用戶名為空等不同的錯誤，而有些產品僅僅給出“出錯了”，那么用戶當然會不知所措了。正向的例子比如一次我在登錄Google Mail時輸錯了密碼，它提示“密碼輸入錯誤，提示：您在1個月前改過密碼”。
Image title
BOO！APP輸入密碼時卡通會蒙住眼睛，輸錯時也會有提示
奧卡姆的剃刀法則（Occam’s Razor）
奧卡姆的剃須刀法則主要就是說我們做產品時功能上不可以太繁瑣，應該保證簡潔和工具化。比如產品中為用戶提供了收藏功能是否就不需要喜歡了？提供了喜歡是否不需要點贊了？一定保證功能上的克制。
Image title
QQ將更多功能收起到了頭像和加號圖標中
防呆原則
有一個著名的交互書籍叫作《Dont make me think》，翻譯過來就是不要讓我思考。這句話一直在我做設計時響起：不要認為用戶是專家！不要認為用戶是專家！有時我們會覺得，點擊漢堡包圖標當然就是菜單啊！這個按鈕長按不就會調出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是抽屜式導航、什么是長按、雙指滑動。更何況普通用戶并不會研究我們的APP，在他們眼中我們的產品只是眾多工具中的一個，我們何德何能認為自己的產品是值得用戶花時間學習的？一定要把交互和設計做得簡單，并且讓用戶在別的地方“學習”過。每個頁面強調一個重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設計要自然而然。
Image title
運動APP KEEP 的頁面中總有一個按鈕是突出的
防止不耐煩原則
用戶是很容易不耐煩的，你還記得你多少次看著視頻加載條罵人嗎？如果我們需要用戶等待載入信息，一定要給一個有情感化的設計提示，避免用戶產生焦慮。 比如很多游戲（比如決戰平安京、王者榮耀等）加載時都會出現主角跑步的小動畫，美團等APP下拉刷新時也會有幾幀的動畫來安慰用戶。動畫要好于蘋果默認提供給開發的“轉菊花”，因為卡通形象更有親和力。但是好像還不夠，用戶需要掌控感，“哎？它一直加載，是不是死機了？”為了防止用戶沒有掌控感，我們可以為用戶設計加載條或者加載提示。加載狀態條很遺憾很多都是假的甚至是重復的，原因是其實要判斷加載了多少M的素材的代碼更占資源！我們本來想安慰用戶等待加載的時間竟然會變得更長，那當然不行啦。于是很多時候我們會做一個假的加載狀態條來安撫用戶，我想您一定看過反復加載的加載條吧！加載條下的文案其實也是可以變得非常有情感化設計感受的，比如通常是：加載場景資源、加載素材這樣的文案，但是有些APP需要很長加載時間時會給出這樣的文案：導演正在準備、女主角準備化妝了、攝像師打開了燈光。是不是更加好玩啦？
Image title
美團和網易嚴選的加載動畫
總結
交互知識其實關鍵還要在應用和分析。一方面，我們可以在工作中積累經驗，不斷地思考如何和同事配合一起研究提高產品在使用時的體驗；另一方面，我們也要經常積累一些產品使用時發現的交互。建議大家平時可以收集你覺得不錯的情感化設計或者微交互，比如發現餓了么在下雨天送貨時會有電閃雷鳴和雨滴的設計；OFO和滴滴打車在不同節日也會把地圖找車里的圖標換成節日相關的圖標；BOO！APP在輸入密碼時小怪獸會捂住眼睛；WPS在晚上寫作時（沒錯就是現在）會提示你開啟過濾藍光的護眼模式等等。一個好的設計師一定是懂得交互的設計師，也應該是非常細心的設計師，也應該是懂得為用戶著想的設計師。

電商類 App 是日常使用頻次非常高的應用，它們的每一次更新改版不僅是業務的拓展、用戶需求的滿足，同時也是消費趨勢的引領與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動，在分析淘寶改版的基礎上，通過幾個關鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺的產品設計，希望此篇文章能讓大家對電商類 App 的產品設計有更深的認識。

一、淘寶改版

前陣子淘寶進行了改版，這次改版循序漸進，并做了較多的 A/B 測試。

1. 主要改版頁面

上圖是淘寶幾個主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風格統一輕質化。大圓角卡片追隨了 iOS11 的風格（App Store 中尤為突出），卡片使信息更加聚焦，模塊感更強；圓角卡片本身也比原先的卡片式增加了更多細節；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。

上圖為5個 tab 的頁面，這次統一了頭部的顏色，強調了品牌，統一性方面也得到了提升。

以下是從單個頁面的角度進行改版分析。

2. 個人首頁

△ 舊版圖為除夕的截圖，顏色方面先不討論

新舊版本的對比，可以看出88會員、卡券包優先級提高，會員信息更加集中、突出。這也印證了這兩年會員機制的火熱，拉新成本和難度都越來越高的情況下，鞏固老用戶才能帶來更多的價值。

新版的卡片式很突出，去掉了大部分的線條，轉而用塊面來代替線條表達層級關系。

「我的訂單」部分 icon 樣式發生了變化（7. 7. 2 版），從填充式轉變為線條式，突出了 icon 右上角的數字，但這一點在測試版本中又改回來了（后面討論）。

88會員和物流這兩塊內容滾動呈現，真正是動效解決問題，從時間軸來解決信息量大而空間局限的問題，同時動態效果增加了用戶吸引度。

在測試版中，這個頁面主要看到兩個點的變化，一個是 icon 改為原來的填充式，一個是動效滾動的節奏。

icon 的問題個人猜想是因為體量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測試版里，「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告，此位置的突出性導致其弱化了底下的「我的訂單」，占用了原先「我的訂單」的 C 位，因此測試版考慮到更全的場景（有廣告），從而將 icon 的樣式換回了體量大的填充式。

動效滾動是上面說的88會員和物流，7. 7. 2版本里兩個滾動是同時進行的，而7. 7. 8的測試版中兩個滾動是錯開的。上下同時滾動會讓人有些混亂，會讓人認為這兩塊的信息是相互關聯的。

3. 店鋪首頁

這一塊做的 A/B 測試。店鋪頁面的改動較大，導航做了較大調整。新版將常用操作和重要功能放到了底部固定；二級導航中的內容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級二級導航較舊版層級關系明確了許多。

再來說說這次的 A/B 測試，這次的測試時間比較長（從7. 7. 2到目前的7. 8. 2都在，目測到8. 0應該會給出一個結果）。店鋪頁在導航上的大改動，會在一定程度上對已經形成習慣的老用戶造成沖擊，對頁面重新適應和學習，有點類似于前攝抑制（在認知心理學上指之前學習過的材料對保持和回憶以后學習的材料的干擾作用）。新版設計的目的一是方便用戶初期快速學習，二是中后期快速使用。對于中后期的快速使用就需要一段時間的鋪墊來獲得數據。該次測試應該是區分各種不同的用戶，簡單來說測試新用戶、老用戶分別對于新舊版本的學習，以及他們對新版本熟悉之后的使用。

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現包裹正處的位置以及即將進行的操作，增強用戶感知（降低理解難度），進一步提升對商品信息的把控感。比原先僅僅是文字展示而言生動了許多，樣式接近外賣等待中的訂單頁面。可視化固然可以展示更多的信息，但是在用戶非訓練的情況下信息傳遞的速度未必比文字要更快，不同的人對圖形的理解也會有所偏差。不過介于外賣 App 的頁面已經對很多用戶進行了教育，相信這種理解上不會有太大難度。但是依然要在后續優化中逐漸突出信息的重點。

物流詳情頁除了樣式的巨大變化，還有一個特點就是場景化細分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據不同的場景：發貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達菜鳥驛站/其他快遞點 – 已簽收等，頁面突出的信息均有所區別。已攬件時突出快遞信息，配送時突出配送員信息等。

從場景細分做差異化，讓用戶獲取當前最需要的信息這件事的出發點無疑是很好的，但是從上圖中，僅是快遞信息這一類信息，就出現了三種樣式（如上圖），并且位置也不統一。如果用戶是購買了幾件不同店家的商品，這時快遞員打電話來說我是XX快遞的，快遞給你放在了某某地方，這時我想知道這是啥商品的時候，于是我就打開了物流詳情，來找快遞信息，發現快遞信息居然不在原來的地圖底下了，找了好一會才發現放到了快遞員下方。這個例子也就是說在非常見場景下獲取某個信息時可能需要付出額外的學習成本。

不過在7. 7. 8的測試版本中，又將快遞信息的樣式減為兩種，算是一種妥協。本人認為，場景細分出發點是好的，但在樣式和位置兩點中，最好至少有一點是固定不變的，這樣才不會過多增加用戶的學習成本，也能涵蓋一些小概率場景。

5. 動效

這兩張圖都是店鋪頁面頂部的動效，當用戶向下滑動頁面時，頂部的信息會出現變化，也算是細分場景的一種，通過動效的方式完美過渡，過渡的流暢感會讓用戶對該平臺增加些許好感。

我的淘寶這一頁的動效解決問題在上面有說到，右邊的有好貨頁面，當用戶在滑動頁面時，攻略推薦一欄的圖片有依次展現的效果，吸引眼球，小有驚喜。

總結來看，淘寶改版的設計角度可以總結為：設計追隨目標，品牌、會員突出，追隨設計趨勢，細分場景，可視化展現和流暢動效。另外淘寶對設計、測試的態度上來說，設計解決實際問題，設計需要驗證，測試要嚴謹。

二、淘寶與其他競品

這里只選了京東和蘇寧易購兩個與淘寶進行了幾個關鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業務、頁面跳轉等問題。

1. 首頁

淘寶：整體看起來沒有什么硬傷，沒有用卡片風格。

京東：這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕?！该咳展洹惯@種裝飾性較強的風格也與整體卡片式簡潔風格不符?！笘|家小院」樓層次級標題的顏色跳躍，大有喧賓奪主之感。

蘇寧易購：目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時缺少層次感，部分有漸變部分沒有，非常不統一。「逛實惠」樓層視覺不平衡，而且信息層級很有問題。

2. 搜索結果頁

風格：淘寶這頁用了無框設計，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細到粗，整體效果上淘寶和京東效果比易購的好。

標簽：在標簽的處理上，易購的標簽非常強，在頁面上非常突出，喧賓奪主；京東的標簽弱化，與淘寶類似，但完全不同類的標簽樣式相同（秒殺與自營），會讓人覺得有些混亂。

圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對齊；易購底部沒有適配 iPhone X。

3. 分類頁

風格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統一性而做；易購仍然是線框區分，整體區分效果不佳。

品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運用得非常多，削弱品牌感，且沒有帶來任何優勢。

4. 商品詳情頁

此頁面我僅從節奏感這一個角度來看，上圖已經標出了每個頁面的節奏感給我的感受。淘寶整體的節奏感比較好，輕重緩和；京東和易購在節奏感上做的都有些問題，重節奏之間無輕節奏的調和會缺乏呼吸感。

5. 購物車

風格效果：淘寶沒有用卡片風格；京東用了卡片，導致大量留白，同時沒有帶來任何優勢，蘇寧易購整體稍顯擁擠，沒有亮點。

圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點很好保持了統一性；京東使用了大量的設計細節，字號、粗細、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。

其他細節：京東標簽不同于搜索結果頁的弱化，而是非常強化，導致視覺焦點混亂，個別按鈕非常小，操作不便；易購標簽處理上比京東收斂；易購底部 tab 與其他部分沒有區分，浮框像廣告，效果不佳，數量修改框的描邊太硬，比例不和諧。

6. 個人首頁

整體風格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。

這里主要說一說易購的問題：首屏出現「我的專場」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內容上的 bug。

7. 訂單

淘寶和京東的訂單頁個人認為沒有什么硬傷，淘寶有個適配的問題。蘇寧易購的問題比較多，首先是頂部「常購清單」中沒有商品的 bug，然后是圖片與購物車等地方的風格不符，商品之間分割線有時有有時無，間距有問題等等。

三、總結

綜合上面具體頁面的分析可以看出淘寶在 UI 設計上的優勢：追隨設計趨勢、統一性、排版和諧等。

關于統一性這一點，可能有人說京東做的更好，因為它幾乎所有頁面都用了卡片風，而淘寶沒有。個人認為，設計風格是次于設計目標的，如果這種設計風格不能很好滿足該頁面的設計目標，建議還是以設計目標為重；如果仍然強制使用該風格的話，會得不償失。淘寶的做法是把卡片這種風格歸類為輕質化風格，除了卡片以外，還有去線條、色塊等等設計語言，因此并非強調一定要使用卡片形式。

作為用戶，在很多時候會很容易判斷出一個網站的用戶體驗是否優秀，因為主觀感受是很難被欺騙的。但是作為網站的設計者和開發者，角色轉換之后，所需要面對問題就復雜得多。身為構建者，要讓體驗盡善盡美需要花費大量的時間精力來完善整個體驗的閉環。今天為你所整理的這7個 UX設計的原則，能夠幫你更好地進行網站的 UX設計，并且盡可能地將整體的用戶體驗提升到一定高度。

1. 圍繞用戶體驗來進行整體設計

想要創造難忘的用戶體驗，自然要圍繞著用戶體驗本身來進行設計。甚至在某種意義上來說，數據和內容也應該是服務于體驗的， 它們應該以什么樣的體驗來呈現出來，這是設計者需要反復思考和琢磨的問題。

圖形、布局、文本和交互元素之間的協同工作才能創造體驗，任何一個維度缺一不可，單純的信息展示是不夠的。

想讓你的網頁能在互聯網上大量的信息中脫穎而出，體驗是至關重要的?，F代網頁中大量的視覺和交互內容存在，是為了能通過體驗直擊人心，這樣才能在激烈的競爭中存活。

2. 網站內容應當一目了然

如果你認為網站內容是用來讀的，那就錯了。現代用戶的注意力集中的時間非常短，絕大多數用戶在瀏覽信息的時候，都是快速掃視，而非逐字逐句地仔細閱讀，信息的展現一定要直觀、清晰，確保能夠一瞥就能看明白。借助信息圖表和視覺，更快地傳達信息和數據。

你需要讓你的內容更加吸引用戶，絕大多數用戶會為觸動它們的信息和內容而駐足，當他們想要了解更多的時候，才會點擊，了解更多。

3. 用戶想要簡單而清晰的內容

用戶只需要半秒就能判斷出網站設計和內容，你需要盡量讓網站的交互和指引足夠清晰，顯而易見。不要讓按鈕難以被用戶發現，在首頁上放上一大堆的按鈕和鏈接，不如通過視覺上的引導，讓用戶注意到最關鍵的那個 CTA按鈕。

通過迭代和測試，不斷地優化和提升網站的易用性。有的設計對于絕大多數的用戶都非常有用，凸顯最重要的選項，允許隱藏額外的功能，并且為用戶提供顯示全部的選項。

除了清晰的設計，整體的一致性也很重要。統一的配色、交互和圖形能夠讓用戶對于后續的操作有更清晰的預期，減少用戶在后續操作過程中探索的力度，這是通過統一性設計提升產品易用性的一種方式。

4. 通用設計元素 vs 創造性

當某個設計元素在其他地方很常見的時候，它就已經形成了特定的 UI 模式，盡量不要去修改它，哪怕是很富有創意的方式。當你將這種約定俗成的元素修改成其他樣子的時候，用戶需要花費比平時更長的時間來判斷它究竟是什么。這種認知負荷將會影響整個網站的使用效率和轉化率。比如漢堡圖標，比如網站登錄入口的位置（右上角）。沒有必要在這種地方重新「標準化」。

對于鏈接、導航、布局這樣基本的元素，應該始終優先考慮其可用性，在此基礎上再發揮創意。

雖然非傳統的設計很酷，但是它的可用性問題同樣很大。創造性的設計同樣是需要控制其程度和平衡，如果非要打破常規，盡量控制好程度，并且一次最多打破一條規則，不能更多。

5. 了解你的用戶

在開始創建網站和 APP 之前，你應該對于你的目標客戶群體有足夠清晰的了解，這樣才能更好地為他們來設計界面。

一旦你清楚地了解了你的用戶，就能了解他們的需求和愿望，并且設計出符合他們預期的界面和體驗。這個時候，你的競爭對手能夠為你提供靈感和想法。注意對方的色彩，布局，風格和功能。

盡可能使用你的受眾已經熟悉的 UI 模式和 UI 元素，能夠更快讓他們上手。在此基礎上，適當地進行差異化的設計，這樣效率更高。

當你確定了受眾之后，記得盡量把他們的反饋納入到你的設計當中。

6. 視覺層次很重要

當界面中優先放置最重要的元素，通過視覺層次來凸顯它們，確保用戶能夠更快注意到它們。在設計中，有很多方法能夠凸顯內容，但是最有效的方法始終是讓它們更大更醒目。

視覺層次的構建能夠讓網站內容更加清晰，也更加富有功能性。

7. 控制用戶體驗的質量

Peter Moville 在 usability.gov 這個網站上列舉出了用戶體驗設計的關鍵因素，它的核心價值在于通過不同的維度更好地掌控用戶體驗的質量：

• 有用：內容應該是原創的且滿足需求。
• 可用：網站的內容應該很容易被找到。
• 可取：設計元素應該貼合情感且具備可欣賞性。
• 可發現：內容容易被定位，被找到，并且可導航。
• 無障礙：設計要為有障礙的用戶進行定制。
• 可信：網站內容應該有權威性，且值得被相信。

除了上面的維度之外，還有一些值得參考的 UX設計的質量衡量標準：

• 符合上下文：有明確的路徑，符合上下文邏輯。
• 人性化：值得信賴，平易近人，透明，并不機械。
• 可發現性：用戶在第一次訪問的時候就能夠順暢的完成任務。
• 可學習性：確保交互足夠簡單，并且能夠無縫地相應移動端界面，確保用戶在隨后的訪問過程中達成目標。
• ：確保用戶能夠快速輕松地完成各種任務。
• 令人愉悅：確保產品能夠滿足用戶需求，還能夠和用戶產生情感聯系。
• 表現良好：當用戶與之交互的時候表現良好。

結語

用戶體驗設計的目標不僅僅是讓產品本身更優秀，更重要的是從情感層面上和用戶產生關聯。有界面而沒有體驗，這樣的產品在今天的競爭中是活不下去的。

從用戶的操作流程上來說，如果用戶想使用一個功能，必然首先要發現它。如果連功能入口都找不到，后續的用戶體驗也無從談起。而篩選功能可以幫助用戶對功能信息進行快速的定位，縮短用戶的查找時間，這篇文章我就來跟大家聊一下篩選功能。

 三種常見基本樣式

首先要明確一個概念，篩選功能并不是普通的單一功能項，它和導航一樣是一個體系。既然是體系，必然有最基本的組成部分。篩選功能（體系）常見的樣式有以下三種：tab類，(下拉)列表類，標簽類。這三種樣式是篩選功能最基本的組成元素，不管你產品的篩選功能做的有多么復雜，都可以看成是這三種基本元素的不同組合形式。

Tab

Tab是最常見的篩選樣式，一個tab項代表一個篩選維度，直接平鋪的展示出來，用戶很容易感知到。

根據方向我們可以將tab分為橫向欄tab和側向欄tab。橫向欄tab可展示2-5個選項，如果超過了5個，那么就需要用戶滑動才能看到。所以當篩選維度過多的時候，我們可以考慮使用側向欄tab，京東商品分類這里用的就是典型的側向欄tab，我數了一下總共40個選項，這里如果使用橫向欄tab用戶可能要側向滑動8屏，操作成本過高。

當然當選項過多的時候，我們還有一個法子，就是使用彈框，用戶點擊后可以看到全部的選項。

列表式

列表式也可稱之為list，其特點就是占用空間小。因為它可以將選項隱藏起來，用戶需要點擊才能看到所有的選項，因此在有限的空間里可以展示更多的篩選維度。礙于手機屏幕尺寸的限制，列表式篩選現在應用的越來越普遍。

列表式篩選的樣式其實有很多?？梢宰龀蓀opover類，actionsheet類，activityview類。這些樣式很難去說誰好誰壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。

標簽式

對于標簽式，很難進行準確的定義，我更傾向于將單選按鈕，多選按鈕，switch等統稱為標簽式，標簽式只能針對單一條件進行篩選，這點和tab很類似。標簽式很少單獨出現，多數情況下都是與tab和列表式結伴而行。

在淘寶里用戶可以點擊視圖icon來切換視圖模式，這就是典型的標簽式篩選。

當然以上三種只是最常見的篩選元素，其余的還有輸入框，滑塊，地區/日期選擇器等主要用于信息錄入的組件。 

常見的篩選體系 

了解了最基本的元素，接下來看一些比較復雜的篩選樣式。上面我也提到了任何產品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解，我一一舉例來說明：

tab+tab:

tab之所以受到青睞，是因為其較低的學習成本。每一個tab代表一個類別，而且是直接展示給用戶看的，所以很多產品的篩選功能都會優先考慮使用tab。即使功能結構復雜到無法用一層tab來完成篩選任務，設計師也會考慮使用雙層tab樣式（tab+tab）的樣式。（PS.當然下圖應該算是segment control+tab）

tab+列表式：

當產品不斷的發展，功能結構愈發的復雜，過于扁平的tab已經無法滿足篩選的需求。以看電影這個場景為例，用戶的需求是找到合適的影片和電影院。對于用戶來說，衡量一家電影院會從地址、票價、品牌和特色服務（支持改簽、IMAX廳等）這四個角度入手。這些篩選需求很難通過tab來完成，我們需要列表式的協助。

tab+列表式+標簽：

當產品的功能結構進一步復雜，這也給篩選功能增加了新的難題。以boss直聘來說，這里的篩選項主要分為四個：排序方式（推薦/）、工作地點、公司規模、崗位要求。其中后三個篩選項包含大量的條件，特別工作地點，需要進一步定位到街道或地鐵站。對于這種多維度，深層級的篩選需求我們可以使用tab+列表式+標簽的樣式。

這里我選擇boss直聘的另一個原因在于它的tab數用戶是可以自己增減的，每一個tab代表一條求職意向，最多可以添加3條求職意向。

篩選體系的容器

篩選體系是由眾多篩選項組成的，這些篩選項需要一個“容器”來承載。上面說的boss直聘用的是下拉列表，這種樣式其實還比較簡單的，我們可以看一些功能更加復雜一點的產品，比如各大電商平臺。這里使用的是抽屜式篩選框，說它是抽屜式，因為它跟抽屜一樣，用的時候可以拉出來，不用的時候可以關起來，節省了空間。從某個角度來說，我們可以把抽屜式看成列表式的一個放大版。抽屜式篩選框可以容納更多的篩選條件，像我在上面提到的輸入框，多選按鈕都可以在這里使用。

從底部彈出的動作欄也比較常見，這里使用了滑塊和單選按鈕。

Airbnb的篩選功能以浮層為載體，還使用比較少見的switch和stepper。

當然Airbnb篩選功能最大的亮點在于可以向用戶即時反饋篩選結果的數目，用戶不太可能會進入搜索結果為0的空頁面，避免無效操作。

以上說的篩選體系都比較傳統，大部分都是基于對現有結果進行篩選，其實我們可以對篩選功能進行前置。例如，我們可以在用戶進行搜索之前就對結果進行篩選。

甚至在新用戶第一次使用產品的時候，可以讓用戶填寫一些個人信息以便進行個性化推送。

篩選功能的存在意義在于幫助用戶對功能信息進行快速的定位，對篩選功能進行適度的前置可以簡化用戶的操作流程，同樣可以達到節省用戶時間的目的。