如何知己知彼，做好視覺競品分析？

喜馬拉雅主播等級體系算是喜馬各業(yè)務線中資歷比較老的一員了，主要服務于主播用戶查看自身等級，以及特權享受，這次整理了近期關于主播等級線現(xiàn)存問題的改版。

一、產品背景

1. 產品層面

這次迭代的目的是：

• 把流量分發(fā)的核心參考點「專輯質量分」作為主播等級主要評判標準之一。
• 讓主播能夠清楚的認知自己在平臺的地位/影響力。
• 給主播升級目標，促進升級。

通過溝通我們知道產品希望通過這次迭代來引起用戶注意，增加主播用戶和產品之間的互動，而提升頁面日活以及次日留存。

2. 設計層面

設計師的基本出發(fā)點是需要設計出不低于競品且更加精致的稿件，能夠更加有效傳達品牌理念和視覺延展性，進而理解產品與競品之間的差異化，增強用戶認知。

3. 用戶層面

此次迭代需要考慮到主播用戶的教育成本和接受程度，能否讓用戶感受到產品的差異性，能否讓用戶在第一時間看到我們希望用戶關注的東西。

二、設計前期分析

通過溝通我們明確了產品需求點，接下來需要針對需求進行分析，我們從競品視覺分析、設計關鍵詞提煉兩點來進行設計決策。

1. 視覺競品分析

針對性的通過對 VIP、等級等屬性的頁面進行視覺收集。

2. 設計關鍵詞提煉

主播等級頁面的服務理念是為主播用戶提供更加清晰的等級提升指引。區(qū)別于喜馬其他等級線，整個流程中除了滿足等級查看的基本需求和特權展示的標準化流程，更多的差異是對目標用戶需求的洞察和挖掘，我們從目標用戶需求定義了主播等級線設計差異化的關鍵詞。

三、設計執(zhí)行

通過與產品溝通需求點，我們了解到視覺層面需要滿足或改進的內容；通過視覺競品分析我們獲取產品未來的設計趨勢以及具有前瞻性的設計概念；接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進行重新分組，分析所有層級信息字段的屬性，然后整理出不可變動信息、可變動信息、可增加的信息、可變的布局樣式，不斷嘗試重組信息結構，找出合適的視覺決策點。

針對設計稿件，開展設計內部視覺評審，針對視覺稿件還邀請了產品以及交互進行意見收集，最終選擇方案一作為主播等級迭代方案。

四、業(yè)務線視覺延展

在主頁面色彩偏好、功能布局定稿之后，為了在關鍵轉化點給用戶帶來統(tǒng)一有趣的視覺體驗，以主頁面視覺為參考以動效、ICON、插畫三個維度進行設計延展，保證與競品的品牌差異性以及設計的統(tǒng)一性。

1. 特權ICON

為了達到設計稿件色彩傾向、品牌差異設計貫穿用戶每一個關鍵轉化點保持特權 ICON 視覺語言統(tǒng)一，并增加趣味性拉開與競品的差異，提升用戶點擊轉化率。

2. 插畫延伸

針對產品等級攻略個性化需求的訴求點，圍繞等級提升的不同要求繪制場景化插畫，并保持視覺層面的輸出配套，通過十字交叉分析有針對性的進行精準推送。

3. 動效延伸

圍繞溫暖、成就感兩個關鍵進行延展，在用戶點擊等級主頁入口的第一時間感受到等級提升的成就感以及統(tǒng)一色彩傾向帶來的重視感，通過特權展示達到所見即所得的直觀感受。

結語

設計并非一念間的靈感迸發(fā)，設計師對整個業(yè)務需要有清晰的理解，明白產品定位并通過前期設計分析奠定設計理念而進行設計產出。

設計是一個逐漸嶄露頭角的過程，而我理解的設計師則應該是快樂的戰(zhàn)士而不是輕言放棄的賭徒，還是那句話：每個人都有屬于自己的一片森林。一點工作總結希望對大家有多裨益，同時歡迎各位大佬加入喜馬拉雅FM。

UI 在拿到產品原型時該如何思考？如何著手設計界面？最近跟一些設計師朋友交流 UI 設計方案，總結了一下在方案優(yōu)化的思考過程，在這里分享給大家。

一、兩道思維

很多 UI 拿到一個頁面原型的時候，就立馬打開各大設計網站找參考，然后照著參考頁面上的效果，生搬硬套到原型上，這只是達到了單純美化頁面的效果。
那么拿到原型后應該帶著怎樣的思維來進行思考呢？

第一道思維：交互思維

先了解頁面實現(xiàn)什么功能，功能的交互操作流程是怎樣的，也就是說用戶操作這個頁面上的功能時，用戶的行為路徑是怎樣的。

第二道思維：視覺思維

了解完功能、交互后，提取原型中視覺組成元素，細分歸類，每一類應用統(tǒng)一性原則進行設計。

然后交互與視覺一同結合來設計界面。

二、思維應用

結合案例我們來看下兩道思維是如何進行的。

第一道思維：交互思維

了解功能交互流程。

根據實例原型分析出用戶行為路徑：

用戶行為路徑：

注意點：

• 用戶行為路徑的獲取，一定要跟產品經理、交互設計師進行溝通確認清楚。
• 用戶行為路徑某些步驟中，也有先后之分，比如第1步中，用戶輸入了賬戶地址后，才會有賬戶的相關數據顯示。
• 用戶行為路徑可以支撐信息內容進行歸類分組。

第二道思維：視覺思維

提取視覺組成元素。

視覺元素：

注意點：

• 提取視覺組件元素盡量詳細歸類。
• 如有視覺規(guī)范，視覺組件元素風格應用請遵循視覺規(guī)范。
• 如無視覺規(guī)范，同類視覺組件元素應用統(tǒng)一性原則進行設計。

三、檢驗方案

我們帶著兩道思維來檢驗一下這位設計師輸出的方案：

問題1：交互層級

問題所在：

數據顯示在前，輸入在后，交互操作層級有點混亂。

問題截圖：

問題解決：

用戶行為路徑中，第1步有個先后順序，先輸入地址，后顯示數據，在進行信息內容布局設計的時候同樣需要有先后順序，所以交互操作層級一定程度上影響著布局排版。

問題2：步驟關聯(lián)

問題所在：

「批量轉賬」按鈕歸類到了第1步的信息模塊中，交互操作邏輯有點不通暢。

問題截圖：

解決方案：

用戶行為路徑中，用戶核心費用信息后，最有可能的行為就是點擊「批量轉賬」按鈕，所以「批量轉賬」按鈕與轉賬費用信息的操作關聯(lián)性比較大，應該在同一模塊里會更符合交互操作邏輯。

問題3：顏色應用

問題所在：

主色、點綴色、輔助色各自的應用范圍沒有規(guī)則，顏色應用混亂。

問題截圖：

問題解決：

一個頁面或者項目中，各種顏色的應用范圍需要有一定規(guī)范，文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應的使用規(guī)則。

問題4：輸入控件

問題所在：

輸入類組件樣式存在多樣性，同樣是輸入框，有多種樣式，會造成用戶交互操作上的認知有誤。

問題截圖：

問題解決：

一個頁面或者項目中，輸入類組件樣式應用統(tǒng)一性原則，保持視覺風格一致，從而減少用戶操作認知偏差。

問題5：按鈕樣式

問題所在：

按鈕樣式應用到不具備按鈕點擊屬性的對象上，用戶會認為也是可點擊，會造成用戶交互操作上的認知有誤。

問題截圖：

問題解決：

一個頁面或者項目中，不具備按鈕點擊屬性的元素盡量不要套用按鈕樣式，減少用戶操作認知偏差。

舉個例子：人形的稻草套上人的衣服，成功了欺騙了人們，造成了認知偏差。

問題6：信息展示

問題所在：

同類信息內容的展示存在多樣式，傳達過程中加重了用戶的認知負擔。

問題截圖：

問題解決：

一個頁面或者項目中，同類信息內容的展示應用相似性原則保持視覺風格一致，因為相似性的布局可以更加地傳達信息。

舉個例子：電商頁面，金額信息展示；理財頁面，收益信息的展示；都是應用相似性的布局，即統(tǒng)一又地傳達信息。

問題7：圖標風格

問題所在：

圖標風格不一致，圖形反白風格，立體風格，線性風格。

問題截圖：

問題解決：

根據產品的特性，建議統(tǒng)一的圖標風格，選擇線性、面性、漸變、立體等風格。

問題八：對齊間隔

問題所在：

頁面元素的對齊、間隔沒有規(guī)律，整體視覺顯得松散，不嚴謹。

問題截圖：

問題解決：

可以利用柵格系統(tǒng)，把頁面信息內容規(guī)整起來。

四、優(yōu)化方案

根據發(fā)現(xiàn)的問題，我們來看一下優(yōu)化后的設計方案：

優(yōu)化1：交互路徑

根據用戶行為路徑，將相關聯(lián)的信息歸類到一個模塊，每個步驟劃分到一個模塊，相關聯(lián)的步驟合并到一個模塊，模塊內完成各自的操作展示任務，模塊之間信息內容互不干擾，但從結構布局又能夠形成符合交互操作邏輯。

優(yōu)化2：顏色規(guī)范

規(guī)范顏色，配色的方法在這里不做深入討論，這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。

優(yōu)化3：輸入控件

對輸入類控件的樣式進行了統(tǒng)一，讓用戶從視覺上就能夠清楚地分辨出哪些是可以進行輸入操作的，從而減少用戶對交互操作上的認知成本，提高信息輸入效率。

輸入控件進行交互時，要有交互狀態(tài)反饋，默認狀態(tài)、選中狀態(tài)、錯誤狀態(tài)。視情況而定，可以增加鼠標移上狀態(tài)和不可輸入狀態(tài)。

狀態(tài)變化時的顏色應用，可以通過變換色相的透明度來保持色彩的一致性。

優(yōu)化4：按鈕規(guī)范

對按鈕進行了分類，分為常規(guī)按鈕、圖標按鈕、文字按鈕；對按鈕樣式用顏色進行了統(tǒng)一；按鈕要有交互狀態(tài)反饋，不可點擊狀態(tài)、可點擊狀態(tài)、鼠標移上狀態(tài)、鼠標按下。

狀態(tài)變化時的顏色應用，可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

優(yōu)化5：信息展示

對信息內容應用相似性原則進行了排版的統(tǒng)一處理，每個小類信息的標題與內容采用統(tǒng)一排版格式，然后重復應用，有助于提高信息獲取效率。

優(yōu)化6：圖標風格

這里的圖標應用于功能性圖標，統(tǒng)一采用線性圓角風格。功能性圖標需要注意圖標的形狀要能夠正確有效地傳達出功能的含義。

優(yōu)化7：對齊間隔

應用柵格系統(tǒng)對視覺元素之間的對齊、間隔進行調整，使頁面視覺更加嚴謹，頁面信息更容易閱讀。

五、總結

交互思維

了解頁面中的功能交互流程，梳理用戶操作行為路徑，可以對行為步驟中的信息內容進行歸類分組提供依據，最終有助于頁面信息內容的排版布局。

視覺思維

提取視覺組成元素，對顏色、文字、控件、圖標等每一類應用統(tǒng)一性原則進行規(guī)范設計，再通過視覺元素本身相互組合，最終應用回信息內容上，建立規(guī)范的視覺感。

設計一個頁面，交互思維和視覺思維是互相配合的，缺一不可，最終都是為了共同去構造符合交互操作邏輯、滿足視覺美感的界面。

我是如何從零搭建起一款健身O2O產品的？

本文作者講述的是他如何從零搭建起一款健身O2O產品的？一起來文中看看~

我在年初參與到“SHAPE”這款健身產品的研發(fā)中，也算是第一次以產品經理的身份，從0開始負責一個產品的建立。

產品是一款O2O的智能健身連鎖店，目前產品已經上線3個月，線下店鋪也已經擴展到第5家，正是回顧梳理的好時機～

一、項目/競品調研

目前在線健身產品做的比較大的是超級猩猩和樂刻，以下的數據分析也都是針對這兩家產品的。

1. 競品體驗

（由本人親自到店體驗課程得出的一些觀點和結論）

2. 競品用戶反饋

我在微博和appstore還有應用寶都瀏覽了一些信息，反饋量不大，有價值的就更少了。后來開闊了一下思路，在大眾點評上找到了更多的高質量的評論。

關于反饋的整理和分析之前寫過一篇更完整的分析文章，有興趣的童鞋可以去看看

3. 競品分析結論

基于線上產品和線下店鋪體驗兩個方面，去借鑒競品的優(yōu)點和補足其短板。

（1）產品優(yōu)化

1. 將“約課”和“我的”作為主要的兩個tab做，產品結構清晰，操作流程簡短明了。
2. 對用戶位置和約課習慣進行記錄，優(yōu)化課程的推薦算法。
3. 將課程特色明確標出，減少用戶選課困惑。
4. 沉淀用戶運動數據，一方面可以通過用戶習慣和完成度推薦用戶更合適的課程，另一方面可以打造榮譽體系，將數據轉換為成就，甚至價值。
5. 用戶數據變化報告，完成度/運動量/排名，增加用戶專屬感覺。
6. 優(yōu)秀用戶圖片的應用(墻面裝飾/推送)，讓用戶有自豪感，歸屬感。
7. 增加評價體系，讓用戶有話語權，也從另一方面對教練，場館和課程加強管理。

（2）實際體驗優(yōu)化

1. 場館的管理，包括裝修/質感/空氣質量，也包括衛(wèi)生情況和器材的清潔度。
2. 課程和教練的管理，教練需要更專注，更關注學員，能盡量給出適當的指導，能在高階課程中隨機應變給出降階動作。

二、明確產品方向

課程上的創(chuàng)新和智能設備的應用會成為我們與競品之間最大的區(qū)別，以此為基礎，我們會為會員提供更好的運動監(jiān)測，不僅為用戶提供可視化的實時運動狀態(tài)，還會將用戶數據沉淀下來，讓用戶更好地計劃運動頻率和強度。

公眾號主要是用戶約課的載體，這是它的第一功能，因此需要突出課程預約，減短訂單查看路徑。另外，也需要展示和沉淀用戶的數據，以及作為后期產品運營的工具。

另一方面，為使得線上線下產品配合流暢，我對O2O業(yè)務邏輯進行了梳理。

1. 用戶行為基本階段

2. 線下流程梳理

“公眾號了解/預約課程-到店體驗課程-線下心率監(jiān)測系統(tǒng)-公眾號報告和數據沉淀”，由此完成一個用戶體驗閉環(huán)，為用戶提供流暢的健身體驗。

另一方面，也是為用戶積累數據，將后來能將身體數據變化通過可視化的形式更加直觀的展現(xiàn)給用戶，也為將后來的用戶榮譽體系打好基礎。

三、產品原型繪制/修正

（用戶端/線下APP/教練端產品架構圖）

繪制完成產品架構圖后，進入具體的原型繪制和制作。

原型繪制階段把主要的兩個產品端制作成可操作的原型，提供給了技術和業(yè)務團隊去試用，不斷溝通，反復驗證業(yè)務流程和模塊。

（不方便放原型鏈接，將就看下～）

作為 Sketch 重度使用粉，必須要說 Sketch 越來越牛了，現(xiàn)在可以直接鏈接模塊和頁面，在 preview 的時候完成跳轉，完美助攻前期簡單檢查頁面邏輯。

1. 原型的修正

2. 訂單調整

• 【原稿】：訂單簡單按照課程時間從近到遠依次排列。
• 【問題】：有取消和完成的訂單混排在所有訂單中，影響用戶尋找可操作的訂單。
• 當用戶預約多次課程，需要即時操作的其實是離現(xiàn)在最近的課程。
• 【修正】：取消和完成的訂單，折疊到“歷史訂單”中。排序根據上課時間距離現(xiàn)在時間，從近到遠排列。未完成的訂單，顯示層級最高，根據上課時間距離現(xiàn)在，從近到遠排列。

3. 分享名額流程

• 【原稿】：公眾號支持一個用戶購買多個名額，但由于心率監(jiān)測設備綁定和報告定向推送，需要將名額對應到具體用戶。因此需要購買多名額的用戶將名額分享給他其他來上課的朋友。
• 【問題】：分享名額的入口不明顯，提示不強，用戶容易忽略。文案不清晰，用戶沒有理解必須將名額分享給朋友才可以。
• 【修正】：修改文案，強調必須分享名額給用戶才可以讓朋友體驗完整的上課內容。

購買多名額的用戶，購買完成后，增加分享提示彈框，強提示需要分享名額。名額未發(fā)放完的訂單，用戶進入訂單詳情中時，分享提示彈框還會重復彈出繼續(xù)提示用戶。

4. 其他不一一列舉

1. 原課程列表圖片為課程封面，線下同事反饋圖片并不能說明課程內容，且很多學員非常在乎上課教練，因此將圖片替換為上課教練的頭像。
2. 課程類型原分類為自研課程和合作課程，然而這并不是站在用戶角度的分類。為了便于用戶理解課程類型，將所有課程重新根據功能性修正為“綜合訓練/私教小班/舞蹈/身心”。
3. 原訂用戶到店后通過掃碼進入簽到和綁定心率設備頁面，但實際線下前臺二維碼比較多，進門和購買飲品都是二維碼，二維碼過多影響用戶體驗。另外多名用戶同時到店的時候，不好掃碼。因此在訂單列表中，增加了一個“可簽到”狀態(tài)，（介于未開始和已簽到之間）。該狀態(tài)可點擊，進入綁定頁面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、拆解 – 用戶體驗之旅

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

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

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

1. 計劃旅行

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

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

2. 用戶角度

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

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

3. 特殊情況

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

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

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

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

1. 完成預訂

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

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

2. 用戶角度

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

3. 特殊情況

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

1. 出行與酒店

設計師考慮的用戶需求。

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

2. 用戶角度

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

3. 特殊情況

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

1. 旅程與歸來

旅途中的回憶和收獲。

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

2. 用戶角度

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

3. 特殊情況

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

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

小結

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 通用設計元素 vs 創(chuàng)造性

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

對于鏈接、導航、布局這樣基本的元素，應該始終優(yōu)先考慮其可用性，在此基礎上再發(fā)揮創(chuàng)意。

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

5. 了解你的用戶

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

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

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

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

6. 視覺層次很重要

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

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

7. 控制用戶體驗的質量

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

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

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

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

結語

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

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

 三種常見基本樣式

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

Tab

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

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

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

列表式

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

列表式篩選的樣式其實有很多。可以做成popover類，actionsheet類，activityview類。這些樣式很難去說誰好誰壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。

標簽式

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

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

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

常見的篩選體系 

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

tab+tab:

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

tab+列表式：

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

tab+列表式+標簽：

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

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

篩選體系的容器

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

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

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

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

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

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

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