繼續(xù)《破繭成蝶：用戶體驗設(shè)計師的成長之路》的讀書筆記之拨。上一篇講到了對產(chǎn)品需求的分析佑笋，這一篇講講交互設(shè)計的那些事寄狼。（文中圖片皆來自此書）

從抽象的需求落實到具體的交互界面并不是一件簡單的事寺滚，其中的關(guān)鍵就在于處理信息和任務(wù)柑营。需要展現(xiàn)哪些信息，如何組織信息結(jié)構(gòu)村视，如何引導用戶完成任務(wù)官套，仔細分析這些問題后，需要將解決方案用一系列相關(guān)聯(lián)的界面草圖表達出來蚁孔；然后再細化草圖為具體界面奶赔，同時要考慮如何讓用戶輕松、愉悅勒虾、高效地瀏覽和操作纺阔；最后瘸彤，再做一些錦上添花的設(shè)計修然，讓用戶驚喜于美妙的產(chǎn)品體驗。這就是設(shè)計規(guī)劃的過程。

信息的組織與任務(wù)的設(shè)定

（選圖以電影票產(chǎn)品為例）

信息分類：除了邏輯歸類以外愕宋，卡片分類也是一種不錯的方法玻靡。簡單來說就是將需要分類的信息寫在卡片上，招募用戶來對卡片進行分類中贝，以檢驗設(shè)計的信息結(jié)構(gòu)是否合理囤捻。

導航：導航有三個關(guān)鍵點，其一是要讓用戶明確知道自己在信息結(jié)構(gòu)中所處的位置邻寿，其二是深廣度的平衡蝎土，其三需要為常用功能設(shè)置快捷入口。

設(shè)計主要任務(wù)與次要任務(wù)：主要任務(wù)即主線流程绣否，如電商產(chǎn)品中的購買流程誊涯；次要任務(wù)則是在完成主要任務(wù)時可能涉及到的任務(wù)，如購買過程中的瀏覽蒜撮，比價暴构，收藏等。確定了任務(wù)流程段磨，才能設(shè)計頁面流和具體交互細節(jié)取逾。

分解任務(wù)：確定了主要任務(wù)后就需要在設(shè)計中突出主要任務(wù)，而第一步就是將所有的用戶任務(wù)分解為具體的行為操作（子任務(wù)）苹支。

分解任務(wù)

排布任務(wù)優(yōu)先級：分解完后就可以排優(yōu)先級了砾隅，可按使用人數(shù)，使用頻率债蜜，重要程度來排琉用。這里的優(yōu)先級順序并不是操作流程順序。

任務(wù)優(yōu)先級

組織合并相關(guān)任務(wù)：將次序相同策幼，操作類似邑时，界面類似的任務(wù)組合起來，合并為同一組模塊展現(xiàn)特姐。根據(jù)優(yōu)先級晶丘，將重要任務(wù)放置在重要位置，同時進行視覺突出唐含。

組織合并相關(guān)任務(wù)

引導用戶：引導用戶完成任務(wù)的方法有許多浅浮。相似性引導是利用相似的顏色或樣式暗示用戶某些元素的關(guān)聯(lián)性，方向性引導是利用指向性箭頭或清晰的視覺縱線指明流程的方向捷枯，運動元素引導則是利用運動元素的軌跡牽引用戶的視覺往下一步走滚秩，向?qū)Э丶脕頌槎嗖讲僮髦械挠脩籼峁╊A期。

向?qū)Э丶?/div>

易用的界面

簡化復雜操作：減少冗余步驟和干擾項淮捆，將復雜操作轉(zhuǎn)移給系統(tǒng)（如地圖app的自動定位起點）郁油，簡化操作方式（Chrome瀏覽器在地址欄直接進行Google搜索）本股，優(yōu)化操作過程（提供合適的默認選項，適時的幫助提示和及時的反饋）桐腌。

處理過大的信息量：界面的層次感（邏輯相關(guān)的在視覺上分為一組拄显，內(nèi)容或重要程度不同的在視覺上體現(xiàn)出差異，邏輯上有包含關(guān)系的在視覺上進行嵌套）案站，突出重點信息&隱藏次要信息躬审。

感性的界面：要做到人性化的設(shè)計就不能將產(chǎn)品邏輯原封不動地展示給用戶，而是要在理性規(guī)劃的基礎(chǔ)上用情感打動用戶蟆盐，此謂感性的界面承边。如某些網(wǎng)站的登錄界面用精致的大圖吸引用戶，某天氣應(yīng)用用顏色的深淺體現(xiàn)氣溫的變化石挂。切記邏輯正確的設(shè)計可以保證產(chǎn)品是可用的炒刁，但未必易用。

紙面原型

規(guī)劃好信息組織和任務(wù)設(shè)定后誊稚，先別急著打開原型設(shè)計軟件翔始，可以在紙上先畫畫。紙面原型可以看作是最終設(shè)計方案的雛形里伯。其中城瞎，最需要關(guān)注的是框架、流程疾瓮、基本功能和內(nèi)容脖镀，可以忽略設(shè)計細節(jié)。

標準原型

標準原型一般包括以下幾個部分狼电。

信息結(jié)構(gòu)：內(nèi)容功能在頁面層級中的分布蜒灰，綜合考慮產(chǎn)品邏輯和用戶習慣。

任務(wù)流程與頁面流程：任務(wù)流程展現(xiàn)用戶使用產(chǎn)品時各種操作的結(jié)果和相應(yīng)的系統(tǒng)反饋肩碟。頁面流程更為細化强窖，展現(xiàn)用戶操作過程中具體頁面的表現(xiàn)和跳轉(zhuǎn)。

線框圖與交互說明：線框圖代表原型中靜態(tài)的部分削祈，而交互說明則代表動態(tài)的部分翅溺。動態(tài)效果有時候沒有交互說明來得便捷，某些特殊動畫效果可用交互說明與動態(tài)效果相配合的方式來說明髓抑。

線框圖+交互說明

交互說明類型：
限制：范圍值咙崎，極限值（字數(shù)，是否折行）
狀態(tài)：默認狀態(tài)（初始值等）吨拍，常見狀態(tài)（如未登錄和已登錄）褪猛，特殊狀態(tài)（如內(nèi)容為空）
操作：常見操作，特殊操作（極端情況下的操作羹饰，可與開發(fā)一同商討）伊滋，誤操作（如選擇錯誤的值）碳却，手勢操作（移動產(chǎn)品）
反饋：提示，跳轉(zhuǎn)（是否為新窗口打開新啼，app轉(zhuǎn)場方式），動畫

一些app的轉(zhuǎn)場方式

線框圖技巧

通過明暗對比表達界面元素優(yōu)先級刹碾。
不使用截圖與顏色燥撞，以免對視覺設(shè)計師造成干擾。
合理的布局：在確定界面布局時迷帜，提前和視覺設(shè)計師溝通商量物舒，避免不必要的返工。
遵守柵格規(guī)范：交互稿中的字號戏锹、間距盡量符合視覺要求（如間距最小為10像素等）

柵格布局

Web頁面標記第一屏高度：在1024像素×768像素分辨率下冠胯，第一屏高度的極限情況可定為570像素（考慮到不同瀏覽器的高度不一致）
整理樣式規(guī)范：定義好通用的樣式規(guī)則，清楚地表達元素優(yōu)先級锦针，減少視覺設(shè)計師的工作成本荠察，同時也有利于幫助他們完善視覺規(guī)范。

樣式規(guī)范舉例

了解視覺趨勢奈搜，并應(yīng)用到線框圖設(shè)計中悉盆。

交互說明技巧

盡量使用真實、符合邏輯的數(shù)據(jù)內(nèi)容馋吗，以防開發(fā)人員的困擾焕盟。
不遺漏特殊狀態(tài)的描述。

某些特殊狀態(tài)

避免過長的流水賬式的說明（可用流程圖描述流程宏粤，用表格羅列狀態(tài)脚翘，用if...else和case等程序語言組織說明文字，制作動態(tài)效果）绍哎。
將重復出現(xiàn)的元素模塊化来农，只說明一次即可。
有改動要保持更新崇堰。

設(shè)計規(guī)范

設(shè)計規(guī)范包含很多內(nèi)容备图，比如交互規(guī)范、色彩規(guī)范赶袄、logo規(guī)范揽涮、UI圖標規(guī)范、控件規(guī)范等等饿肺。完善的設(shè)計規(guī)范可以保持產(chǎn)品的一致性蒋困，給用戶營造熟悉的環(huán)境，同時也提高了設(shè)計工作效率（功能組件的復用）敬辣，對品牌的建設(shè)也有很大的好處雪标。

審核視覺稿

核驗視覺設(shè)計師對交互稿的理解是否正確（美觀性與邏輯性的平衡）零院。
拒絕毫無發(fā)揮的視覺設(shè)計。
關(guān)注交互細節(jié)和狀態(tài)標注（按鈕的各種狀態(tài)村刨，間距等）告抄。
在審美方面不要過分干涉。

對接開發(fā)

設(shè)計階段：了解是否會有技術(shù)難點嵌牺。
設(shè)計完成后：當面溝通設(shè)計要點打洼。
開發(fā)階段：持續(xù)跟進，解答問題逆粹。
對設(shè)計稿進行尺寸標注和規(guī)范的整理募疮，減少前端的工作量。設(shè)計走查確認頁面細節(jié)是否符合設(shè)計稿僻弹，包括交互和視覺兩方面阿浓。
交互：交互動作，控件的各種狀態(tài)蹋绽，極限和出錯情況芭毙，默認值，懸停狀態(tài)等卸耘。
視覺：視覺樣式稿蹲，顏色，尺寸間距鹊奖，圖片質(zhì)量苛聘，不同分辨率下的展現(xiàn)等。

可用性測試

上線前一般用可用性測試檢驗設(shè)計方案是否靠譜忠聚，以下是一些技巧：
給出使用目標设哗，而不是直接的操作。
盡量選擇最重要两蟀，最頻繁的任務(wù)進行測試网梢。
用戶數(shù)量的選擇：一般小的功能點，測試3～5名用戶即可赂毯。新產(chǎn)品战虏、較大的改版和重要功能，可以測試5～10名用戶党涕。
鼓勵用戶采用「出聲思維法」烦感。
不要忽視現(xiàn)場反應(yīng)，如表情和下意識的動作和語言膛堤。
考慮使用場景手趣，尤其是移動端產(chǎn)品。
靈活運用可用性測試肥荔，可以邀請不熟悉項目的同事或朋友绿渣，一般低保真原型即可朝群。

可用性準則

可用性問題嚴重等級

可用性測試考量標準

A/B測試

預上線階段一般用A/B測試的方法檢驗設(shè)計方案是否靠譜。
A方案和B方案要保證同時發(fā)布中符，同一用戶應(yīng)該自始至終只看到其中一種方案姜胖，同時要保證單一變量。

用戶反饋和產(chǎn)品數(shù)據(jù)

上線后一般通過用戶反饋和產(chǎn)品數(shù)據(jù)來評判設(shè)計的優(yōu)劣淀散。
用戶反饋的來源有很多右莱，主要包括客服（產(chǎn)品反饋入口），各大社交平臺吧凉，應(yīng)用市場等等隧出。收集好用戶反饋后做好過濾和分類踏志，然后按重要程度去解決問題阀捅。
產(chǎn)品數(shù)據(jù)綜合反映了設(shè)計，技術(shù)针余，運營的合力饲鄙，設(shè)計關(guān)心的主要是用戶的行為數(shù)據(jù)，如頁面間的跳轉(zhuǎn)率圆雁，某按鈕的點擊量等忍级。