破繭成蝶—讀書筆記

第一篇 成為用戶體驗設計師的信念

第一章 什麼是用戶體驗

你在使用一個產品時的主觀感受

目標：解決問題+帶來歡樂（解決用戶需求，減少用戶理解和操作成本，給用戶留下美好而深刻的印象）

第二章 了解用戶體驗設計師

如何做好用戶體驗設計

用戶體驗設計師必需的日常

第三章 設計師的困惑

菜鳥如何入門

面試什麼最重要

第二篇 修鍊用戶體驗設計師的技能

第四章 設計流程——設計師具體做什麼

用戶體驗設計師在幹嗎？

產品定位

第五章 需求分析——拿回產品的主導權

如何把用戶需求轉化為產品需求

考慮用戶的五個因素

第六章 設計規劃--從需求到設計草圖

確定需求之後，設計師並不是馬上打開軟體開始畫圖。優秀的設計要經歷充足的規划過程。在這一環節中交互設計師起主導作用。

拿到需求之後，我們應該先確定將要提供給客戶的必要信息，然後對其信息進行分門類別，有效的組織起來。並以導航的模式呈現給用戶，並讓用戶快速的找出想要的信息。

同時，根據需求設計相應的任務，排列任務優先順序，並在界面上通過一系列的引導，幫助用戶完成任務。（對於複雜的任務，盡量簡化其操作）

對於一個網站來說，信息和任務並不是孤立存在的，而是互相關聯的。

根據需求設計相關的信息和任務，通過組織信息結構，引導用戶完成任務得到一系列相關聯的界面草圖。

最終目的是通過專業的設計工作，讓產品滿足用戶需求，減少用戶的理解和操作成本。還能吸引用戶，捕獲用戶的芳心。

6.1從需求到界面，隔著一扇門

6.1.1如何搞定信息分類

信息的分類與組織試設計一個網站的基礎。

①邏輯歸類 我們可以使用人們在生活中熟悉的分類邏輯對內容進行組織

卡片分類 卡片分類可以設計出符合用戶心智模型的信息架構（就是邀請用戶把類似的東西放在一起）

②在產品設計初級階段，利用卡片分類可以知道用戶對網站內容的期望，為信息架構的搭建提供依據（可驗證現有的信息結構是否合理為新版本的改進提供有效幫助）

③卡片分類有開放式和封閉式兩種形式

④開放式：開放式的卡片分類會給用戶足夠的自由度來進行信息歸類但結果不可控

⑤封閉式：設計師首先會將導航的架構設計好確定出導航的個數和名稱再將屬於這些內幕的卡片分別發給用戶，在讓用戶在框架下進行分類

6.1.2好的設計導航是成功的一半

信息的組織與分類是導航設計的基礎，而導航設計在互聯網產品設計中又扮演著重要的角色。

導航的自我解釋：

①成功的導航能讓用戶在導航系統中清楚的認識到信息結構和自己所處的位置（即我從哪兒來 我在哪 我到哪兒去）

②見面中的導航設計通過麵包屑與頁面元素相呼應的方式是用戶理解產品的信息結構

深度廣度平衡:

③在導航的信息組織中層級的數目可以稱為導航的深度，每一層級中包含的菜單項數可以稱為導航的廣度（設計時要考慮深度和廣度的平衡）

用戶所需信息與商業推廣信息的平衡：

④對導航的設計一方面要了解網站背後的商業目的合理的組織方式應該既對用戶有意義又能滿足業務目標。

為重要功能和常用功能設置快捷入口。導航應該是結構清晰合乎邏輯的，這是產品設計的必要條件。（快捷入口的設計太多會是產品混亂複雜）

6.1.3主要任務與次要任務

界面中過多的功能或內容會讓用戶迷茫，效果便更差。

通過設計用戶任務，確定主要任務和次要任務，可以幫助我們快速判斷界面上內容關係。

①設計主線：就是把雜亂的功能點根據用戶的期望及目標以正確的次序組織起來的過程。

是否設計支線，主要看次要行為流是否能對用戶完成主行為六產生必要幫助

6.1.4如何突出主要任務

分解用戶任務

排列任務優先順序（要從人數,使用頻率,重要程度三個維度排列優先順序）

組織合併相關任務

6.1.5如何引導用戶完成任務

按照用戶的操作邏輯採用相似性引導，方向性引導，運動元素引導

①相似性引導

（大小，色彩，視覺元素等因素相似，可以牽引用戶的視覺，引導用戶操作）

方向性引導

②（可以利用具有指向性的箭頭進行方向性引導）

運動元素引導

③（運用於同一頁面的引導）

④嚮導控制項是一種常用的交互方式用來引導用戶完成多部操作。

6.2設計有好而應用的界面

6.2.1如何簡化複雜的操作

通過減少干擾項，轉移複雜操作，簡化操作方式，優化操作過程等方法都可以簡化複雜操作

①減少多餘步驟和干擾項

②將複雜操作轉移給系統

③簡化操作方式

④優化操作過程

6.2.2信息量太大頁面怎麼擺

讓頁面層次不言而喻

讓重點信息跳出來

將次要信息藏起來

6.2.3理性的規劃VS感性的界面

交互階段設計師需要使用偏理性邏輯的思維，視覺階段設計師需要偏感性的思維

①以人為本的界面設計

②幫助用戶找到想要的東西

（明確目標的用戶——能儘快找到所需信息

不確定目標用戶——通過瀏覽和尋找明確自己需求

沒有目標的用戶——激發用戶需求）

3.吸引無目標用戶

（利用感性思維營造貼心,友好，有吸引力的界面）

4.符合用戶心理模型

（了解用戶需求並在交互設計的表現形式上更貼近用戶的心理模型）

6.3捕捉用戶的芳心

1. 來自真實世界的靈感

真正影響用戶顯性人格並非理性，而是在各個生理期形成的潛意識因子

①擬物化視覺

②隱喻化的操作

（直接擬物化設計也有一定局限性）

2. 貼心的設計惹人愛

可控的感受

積極的反饋

貼心的提醒

3. 如何調動用戶的情感

互動的樂趣

驚喜的力量

情景的烘托

6.4快速表達我的想法——紙面原型

1.在需求到界面，中間還有一層是信息的組織和任務的設定。這以後才能快速的畫出草圖。

2.紙面原型圖--能夠快速的表達我的想法。

3.設計規劃是一個承前啟後的階段，其目的是將最初的需求一步一步變為現實。

4.紙面原型圖另一個優點:當通過紙面原型圖確定了大致的方案時，也就同時產生了產品的框架，主要流程，基本信息和功能表。可以使交互設計細化的同時，視覺設計也同時進行視覺設計，可節省時間，縮短工期。

5.紙面原型圖只用粗細不等的線條和陰影關係，畫出界面的層次關係即可。可以通過便簽紙和小卡片當做氣泡，彈出層，模態窗口，或做為頁面標註的工具，說明產品功能，來表達交互效果。

6.也可以在網上找出標準的交互原型組件庫，列印出來與手繪配合。

7.紙面原型圖可以看作最終設計方案的雛形，其中，最需要關注的是框架，流程，基本功能，和內容。可以忽略設計細節。

8.紙面原型圖就是將需求，任務，信息，操作等進行總和，將其串聯起來。

9.界面的邏輯關係可以通過繪製的深淺或顏色來區分，但是要適度，避免分散注意力。

第七章 設計標準——好的設計需要表達

7.1 什麼是設計原型

1.原型的由來——設計方案的表達

設計原型是設計方案的表達看，是設計師的重要產出物之一，也是項目團隊參考、評估的重要依據。它是產品功能和內容的示意圖，既包含靜態的頁面樣式（線框圖）。也包含動態的操作效果（交互說明）。

2.為什麼要學習原型製作

再好的設計想法，如果沒有清晰、標準的表達，效果也會大打折扣。想要成為一個專業的交互設計師，一定要學會產出標準的原型稿。為了讓不同的角色都能理解你的設計方案，原型圖務必要表達清楚、規範，一旦表述不清，開發出來的成果可能就會出現偏差，背離設計師的本意，同時還會影響開發的節奏和效率，對項目造成極大的影響。

3.低保真原型與高保真原型

低保真原型：與最終產品不太相似的原型。它可以是紙面原型（草圖），也可以是用軟體繪製的線框圖。（Axure、Visio軟體）

高保真原型：高保真原型在外觀、操作上與最終的產品保持一致。相當於一個高級模型，更適合做展示用，並不等同於真實的產品。

7.2 標準的原型應該包含什麼內容

1.簡要說明與信息結構

①變更日誌：同需求文檔一樣，原型的設計也不可能一次到位，一般都需要經過溝通、評審後略做調整。對於比較大型、周期較長的項目，往往是做一部分評審一部分，評審後定期更新。

②信息結構：產品內容都有什麼，它們是如何組織起來的頁面層級又是如何分布的，等等，這些在信息結構中都有體現。信息結構可以讓項目成員快速瀏覽到產品內容、功能、結構等重要信息，做到一覽全貌。

2.任務流程與頁面流程

任務流程：是指用戶使用產品時，它的每一步操作會遇到什麼結果，系統會如何反饋，等等。

頁面流程：比任務流程圖更清晰、具體。通過頁面流程圖，不僅可以看到具體的頁面，還可以看到用戶如何通過操作，從一個頁面跳轉到另一個頁面的完整過程。

3.線框圖&交互說明

線框圖代表靜態的部分，而交互說明則代表著動態部分

交互說明主要類型

限制

範圍值：主要指數據的取值範圍

極限值：主要指數據的顯示限制

狀態

默認狀態：主要指默認顯示的文字、數據、選項等。

常見狀態：主要指針對某一模塊，經常遇到的一些狀態。

特殊狀態：一般指非正常情況下的樣式、文案、說明等。

操作

常見操作：主要指正常操作時得到的反饋狀態。

特殊操作：主要指一些極端情況下的操作。

誤操作：主要指當用戶操作錯誤時的情況。（我們在設計時要盡量避免用戶犯錯的機會）

手勢操作：主要指用戶使用移動產品時的操作方式。（常見的有點擊、雙擊、長按等等）

反饋

提示：主要指操作後，系統反饋給用戶的文字說明等

跳轉：主要指點擊摸個鏈接後跳轉到哪裡（設計師需要在原型上註明跳轉時是「原頁面刷新」還是「新頁面打開」，如果是做手機應用的話需要註明跳轉時的轉場方式）。

動畫：主要指用戶操作後，系統通過動畫的方式反饋給用戶。（給人感覺較友好、趣味性較強，是常見的一種反饋形式）

寫交互說明時主要記住2條內容：除靜態頁面外，還需考慮各種動態情況：除正常情況外，還需考慮特殊情況和錯誤情況。

7.3 你真的會畫線框圖嗎

1.通過明暗對比表達

2.不使用截圖和與顏色

3.合理的布局（建議在確定界面布局時，提前和視覺設計師溝通，避免不必要的返工）。

4.遵守柵格規範（柵格系統是平面設計的方法與風格，固定格子設計版面布局）

5.標記第一屏高度（首屏高度）

6.表達清楚UI邏輯（提前整理內容，以保證文字、鏈接、操作等內容的樣式符合他們所代表的重要程度）

7.考慮視覺實現後的效果（考慮清晰的邏輯，減少視覺設計師的頻繁返工）

8.了解視覺趨勢

7.4 寫交互說明的訣竅

1.盡量使用真實、符合邏輯的數據內容。

2.不遺漏特殊狀態的描述

3.避免過長的說明

4.避免流水賬式的說明

①流程圖代替文字說明

②用表格羅列各種狀態

③巧妙組織文字說明

④製作動態效果（Axure、ppt）

5.關於重複出現的模塊，儘快用模塊化的思維方式來處理較複雜的問題，對提高工作效率很有幫助。

6.如原型圖有修改，不要口頭溝通，而要更新交互說明並告知大家

7.5 關於設計規範

1.什麼是設計規範，設計規範是對設計的具體細節、技術要求，是設計工作的規則和界限，是一種模塊化應用的方法。

2.沒有規範容易出現什麼問題？

①不同頻道/模塊獨立設計（每部分看起來不統一）

②同類功能組件存在多種樣式（浪費精力，影響用戶操作）

③同類元素多樣性（即使是聽一個設計師，設計同樣的元素，也不可能保證和之前的結果完全一致）

④設計效率低下

⑤設計質量難以把控

3規範解決了什麼問題

①「一致性」形成鮮明的產品特徵，增強用戶粘性

②提高易用性

③滿足團隊協作需求

④其他（比如避免重複勞動、提高工作效率、提高設計質量）

4.設計規範的分類

①產品戰略級方向的規範

②單個項目中的設計規範

5.什麼時候開始設計規範

項目全部完成之後再設計規範（不是絕對的方法）

6.制定設計規範的原則

交互規範一般先於視覺規範。設計規範一般遵循從大到小的原則，即：先制定大的設計方向，再制定項目中單個詳細的說明；先制定團隊合作的規範，再制定個人操作上的規範。

7.規範的執行及注意事項

制定規範的目的不是為了限制設計師的發揮，而是幫助設計師少走彎路。

規範不可能面面俱到，也不可能涵蓋到所有的情況。我們更需要的是培養設計師的規範意識，而不是過於教條。

第八章 項目跟進——保障設計效果的實現

8.1 做設計評審的主導者

1.設計評審的目的

①檢驗目標

②發現問題

③達成共識

2.評審前的充足準備

①事先考慮所有可能的方案（評審簽需要把能想到的方案仔都細考慮一遍）

②準備各種設計依據

③做好會議邀請工作（撰寫一封正式的邀請郵件，並附上自己的設計稿）

3.如何再評審中掌握主導權

①主導流程，方案完成並不代表著工作結束，推薦設計也是設計師的重要工作之一，因為好的設計要上線後才能被廣大用戶感知到。在設計方案展示過程中注意表達技巧，語速不要過塊，闡述重要的設計點時要清晰，還要注意時間和節奏的把握。

②提高效率，控制話題。偏離主題的討論和對某個細節的持久爭論時會議效率的兩大殺手。

③區分和收集有價值的反饋意見，設計師需要區分哪些反饋是有價值的，可以指導後續的設計和修改，哪些反饋是需要過濾掉的。

④評審後的分析和跟進，在評審會上收集了反饋意見之後設計師需要整理總結這些意見。

8.2 如何審核視覺稿

1.對交互稿理解是否正確

2.關注視覺層次是否足夠清晰

3關注交互細節和狀態標註

4.在審美方面不要過分干涉

8.3 開發階段設計師該做些什麼

1.勤於溝通

2.統一的規範和標準（行高/文字距離）

3.設計走查。（更好的確保上線後的產品與設計稿一致）

第九章 成果檢驗——設計優劣可以判斷

9.1 可用性測試

1.什麼是可用性測試，可用性測試是改善產品的最佳方式之一。通過觀察用戶使用產品，發現存在的問題的一種方法。的每一個交互設計師都應該至少掌握簡易可用性測試的方法。因為任何產品都有問題，而我們不是用戶。

2.設計測試任務該注意些什麼

①給出使用目標，而不是直接地操作。

②盡量選擇最重要的，最頻繁的任務進行測試。

③符合正常的操作流程

3.測試用戶選擇

①選擇有代表性的用戶

②用戶數量的選擇（5名左右）

4.測試過程中的注意事項

①切忌引導性國強

②操作行為永遠是重點

③不要忽視現場反應

④考慮使用場景

⑤感謝被測試者，並給予一定的報酬

④問題的分析與改進

⑤靈活運用可用性測試

9.2 A/B測試

1.設定衡量標準

2.對同一個用戶呈現相同的頁面

3.保證開兩個版本同時測試

4.單一變數

5.A/B測試的延展——灰度發布

9.3 定性的用戶反饋和定量的產品數據

1.收集和讀懂用戶反饋

①收集用戶反饋

②分析用戶反饋

2.用數據檢驗產品目標

第三篇 實現用戶體驗設計師的價值

第十章 設計師的自我修養

10.1 什麼是好的設計師

（1）對設計充滿興趣和激情、有天分、思維活躍、有很多好的想法，時常記錄自己的靈感；

（2）有創意，有高度的概括、總結能力及抽象思維能力，可以迅速歸納出問題的本質；

（3）執行力強、情商高。永遠不滿足於現狀，追求完美、關注細節，做出的東西永遠都超出需求方預期，在設計中融入自己的精神和靈魂。

（4）有條理、有上進心。眼界開闊、知識面廣、樂於分享。

10.2 什麼是糟糕的設計師

（1）缺乏興趣、不用心，作品既沒有太大的問題，也沒有太大的驚喜。

（2）心態不好頑固任性愛抱怨喜歡找客觀理由，推脫責任，不接受意見。

（3）不會合理安排時間，時間估算不準。

（4）不會恰當表現只知道埋頭苦幹，卻不懂適度表現 ，存在感低。

（5）過於被動，溝通及團隊協作能力差，學習意願不強，不夠專業。

10.3 從哪幾方面來提高

（1）從這些表象上來看設計師需要從三方面來提升自己，即專業、溝通、流程。興趣、素養、思維、技能決定了你未來職業發展的優劣，而不純粹是具體的知識或技能。想要變優秀，不要先追逐「外功」，而是修鍊好「內功」。內外兼修，方可成事。

10.4 學會思考，事半功倍

（1）思維能力是可以通過後天培養的。具備良好的思維能力是優秀設計師必備的條件。

（2）why，what，how三步分析法

① why：得到外界結論是先思考為什麼。

② what：對現狀進行更深層次的解讀。

③ how：在已知的基礎上，如何做得更好。

10.5 在否定中積極成長

（1）別害怕被否定：遇到否定和挫折時，不要一味的灰心喪氣，而是要反思自己哪裡做得不夠好，積極改進，這樣你就不會再被否定。

（2）學會忍耐和付出：抱怨解決不了任何問題，我們唯一能做的就是改變自己，讓自己變得更好。

（3）識別真相：用戶說的不一定是他心裡想的，同理，同事對你說的也不見得是他心中真實的想法。

（4）適度妥協：實際是雖然需要適度的堅持，但也要注意不要過於堅持，工作中需要適當的變通。

（5）超越自我：在別人否定中積極調整心態，改進提高，同時還善於自我否定，永遠給自己設置更高的目標，永遠不滿足現狀。有良好的思維能力，健康的心態。

第十一章 設計師易忽略的工作意識

11.1 設計師的品牌意識

（1）只有懂得尊重品牌，別人才會尊重你的品牌；好的品牌可以成為一種信仰，對內凝聚員工，對外樹立形象。

（2）保證關聯性：保證你設計的東西是和產品相關。

（3）力求一致性：應用內一致，圖標、啟動頁、首頁一致；應用內界面配色一致；不同性質的元素要做出區分；不同頁面的針對同一性質的操作應保持一致性；平台內一致，同時和該平台其他產品通用規則盡量保持一致。平台間一致，內部產品一致。

（4）追求獨特性：個性的標誌，獨特的風格。

（5）品牌宣傳無處不在：頁面載入，出現產品名稱水印效果。

11.2 設計師的溝通意識

（1）項目中常見的溝通方式：通過文檔溝通，通過郵件溝通，通過IM,通過電話溝通，面對面溝通，會議溝通。

（2）不同溝通的適用環境

（3）項目中常見的溝通問題：敢怒不敢言，用批評代替讚揚和鼓勵，單向溝通少說多聽，思維方式、立場不一導致的溝通障礙，性格差異導致的溝通障礙，溝通積極性差。

（4）如何更好地溝通：放平心態換位思考。積極主動多思考、多提問、多表達自己的意見，遇到不快的事不要急著下結論。更多肯定、更少批評。真正認識溝通的意義，真正優秀的設計師，不一定咄咄逼人，但卻言之有理、讓人心服口服。

11.3 設計師的流程意識

（1）兩類流程：

①設計流程：需求分析-信息架構-任務流程-頁面草圖-標準原型

②項目流程：

（2）如果不遵守流程：需求不確定、反覆更改；無具體排期、上線遙遙無期；沒預留出走查時間、倉促上線；產品經理一人獨大、項目失控；出現問題難以定責。

（3）一些需要注意的問題：

①需求變動：需要重新評估工作量，大的改動放到下一期，小的改動如徵得大家同意可以本期修改。

②關於排期：根據需求內容來確定具體的時間安排。

③關於設計：後期有修改，需要通知大家評估。

④多做可用性測試。

⑤上線前後：產品經理通知項目成員，進行最後的檢查。

（4）設計師的流程意識：靈活性、主動性和專業性。

第十二章 設計師為了什麼而設計

12.1 設計師為了誰而設計

（1）設計師不是為自己設計，也不是為老闆、為用戶設計，更不應該只看重眼前的利益。設計師要做的是平衡商業價值與用戶需求，通過自己的專業水平為公司、用戶創造最大的價值。

12.2 實現商業價值與用戶需求的平衡

（1）構建強大的自我：產品經理在項目中佔據了一定的主導地位。對整個項目的結果負責，是團隊的精神領袖。設計師不想在項目中過於被動，在產品設計上擁有話語權，只懂得設計是遠遠不夠的，一定要有商業意識，懂產品，懂得如何站在更高的角度上權衡利弊。

（2）與產品經理的制衡：二者需要互相平衡，互相制衡，否則容易失控。

（3）與產品經理合作

（4）設計師具體應該：

① 識別需求的有效性

② 重塑需求

③ 梳理結構流&界面設計

12.3 實現用戶體驗設計師的價值

（1）交互設計師首先要肯定自己的價值，然後努力去發揮自己的價值。把學到的在工作中不斷加以應用，不斷總結積累，那麼終有一天，你會破繭成碟，實現用戶體驗設計師的價值。

三米工作室 WE團隊