起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)交互設(shè)計(jì)的幾個(gè)關(guān)鍵詞
小編導(dǎo)讀：本文為作者斜陽(yáng)君閱讀《破繭成蝶：用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路》后的寫下的讀書筆記。
從抽象的需求落實(shí)到具體的交互界面并不是一件簡(jiǎn)單的事，其中的關(guān)鍵就在于處理信息和任務(wù)。需要展現(xiàn)哪些信息，如何組織信息結(jié)構(gòu)，如何引導(dǎo)用戶完成任務(wù)，仔細(xì)分析這些問題后，需要將解決方案用一系列相關(guān)聯(lián)的界面草圖表達(dá)出來；然后再細(xì)化草圖為具體界面，同時(shí)要考慮如何讓用戶輕松、愉悅、高效地瀏覽和操作；最后，再做一些錦上添花的設(shè)計(jì)，讓用戶驚喜于美妙的產(chǎn)品體驗(yàn)。這就是設(shè)計(jì)規(guī)劃的過程。
信息的組織與任務(wù)的設(shè)定（選圖以電影票產(chǎn)品為例）
信息分類：除了邏輯歸類以外，卡片分類也是一種不錯(cuò)的方法。簡(jiǎn)單來說就是將需要分類的信息寫在卡片上，招募用戶來對(duì)卡片進(jìn)行分類，以檢驗(yàn)設(shè)計(jì)的信息結(jié)構(gòu)是否合理。
導(dǎo)航：導(dǎo)航有三個(gè)關(guān)鍵點(diǎn)，其一是要讓用戶明確知道自己在信息結(jié)構(gòu)中所處的位置，其二是深廣度的平衡，其三需要為常用功能設(shè)置快捷入口。
設(shè)計(jì)主要任務(wù)與次要任務(wù)：主要任務(wù)即主線流程，如電商產(chǎn)品中的購(gòu)買流程；次要任務(wù)則是在完成主要任務(wù)時(shí)可能涉及到的任務(wù)，如購(gòu)買過程中的瀏覽，比價(jià)，收藏等。確定了任務(wù)流程，才能設(shè)計(jì)頁(yè)面流和具體交互細(xì)節(jié)。
分解任務(wù)：確定了主要任務(wù)后就需要在設(shè)計(jì)中突出主要任務(wù)，而第一步就是將所有的用戶任務(wù)分解為具體的行為操作（子任務(wù)）。
排布任務(wù)優(yōu)先級(jí)：分解完后就可以排優(yōu)先級(jí)了，可按使用人數(shù)，使用頻率，重要程度來排。這里的優(yōu)先級(jí)順序并不是操作流程順序。
組織合并相關(guān)任務(wù)：將次序相同，操作類似，界面類似的任務(wù)組合起來，合并為同一組模塊展現(xiàn)。根據(jù)優(yōu)先級(jí)，將重要任務(wù)放置在重要位置，同時(shí)進(jìn)行視覺突出。
引導(dǎo)用戶：引導(dǎo)用戶完成任務(wù)的方法有許多。相似性引導(dǎo)是利用相似的顏色或樣式暗示用戶某些元素的關(guān)聯(lián)性，方向性引導(dǎo)是利用指向性箭頭或清晰的視覺縱線指明流程的方向，運(yùn)動(dòng)元素引導(dǎo)則是利用運(yùn)動(dòng)元素的軌跡牽引用戶的視覺往下一步走，向?qū)Э丶脕頌槎嗖讲僮髦械挠脩籼峁╊A(yù)期。
易用的界面
簡(jiǎn)化復(fù)雜操作：減少冗余步驟和干擾項(xiàng)，將復(fù)雜操作轉(zhuǎn)移給系統(tǒng)（如地圖app的自動(dòng)定位起點(diǎn)），簡(jiǎn)化操作方式（Chrome瀏覽器在地址欄直接進(jìn)行Google搜索），優(yōu)化操作過程（提供合適的默認(rèn)選項(xiàng)，適時(shí)的幫助提示和及時(shí)的反饋）。
處理過大的信息量：界面的層次感（邏輯相關(guān)的在視覺上分為一組，內(nèi)容或重要程度不同的在視覺上體現(xiàn)出差異，邏輯上有包含關(guān)系的在視覺上進(jìn)行嵌套），突出重點(diǎn)信息&隱藏次要信息。
感性的界面：要做到人性化的設(shè)計(jì)就不能將產(chǎn)品邏輯原封不動(dòng)地展示給用戶，而是要在理性規(guī)劃的基礎(chǔ)上用情感打動(dòng)用戶，此謂感性的界面。如某些網(wǎng)站的登錄界面用精致的大圖吸引用戶，某天氣應(yīng)用用顏色的深淺體現(xiàn)氣溫的變化。切記邏輯正確的設(shè)計(jì)可以保證產(chǎn)品是可用的，但未必易用。
紙面原型
規(guī)劃好信息組織和任務(wù)設(shè)定后，先別急著打開原型設(shè)計(jì)軟件，可以在紙上先畫畫。紙面原型可以看作是最終設(shè)計(jì)方案的雛形。其中，最需要關(guān)注的是框架、流程、基本功能和內(nèi)容，可以忽略設(shè)計(jì)細(xì)節(jié)。
標(biāo)準(zhǔn)原型
標(biāo)準(zhǔn)原型一般包括以下幾個(gè)部分。
信息結(jié)構(gòu)：內(nèi)容功能在頁(yè)面層級(jí)中的分布，綜合考慮產(chǎn)品邏輯和用戶習(xí)慣。
任務(wù)流程與頁(yè)面流程：任務(wù)流程展現(xiàn)用戶使用產(chǎn)品時(shí)各種操作的結(jié)果和相應(yīng)的系統(tǒng)反饋。頁(yè)面流程更為細(xì)化，展現(xiàn)用戶操作過程中具體頁(yè)面的表現(xiàn)和跳轉(zhuǎn)。
線框圖與交互說明：線框圖代表原型中靜態(tài)的部分，而交互說明則代表動(dòng)態(tài)的部分。動(dòng)態(tài)效果有時(shí)候沒有交互說明來得便捷，某些特殊動(dòng)畫效果可用交互說明與動(dòng)態(tài)效果相配合的方式來說明。
交互說明類型：
限制：范圍值，極限值（字?jǐn)?shù)，是否折行）
狀態(tài)：默認(rèn)狀態(tài)（初始值等），常見狀態(tài)（如未登錄和已登錄），特殊狀態(tài)（如內(nèi)容為空）
操作：常見操作，特殊操作（極端情況下的操作，可與開發(fā)一同商討），誤操作（如選擇錯(cuò)誤的值），手勢(shì)操作（移動(dòng)產(chǎn)品）
反饋：提示，跳轉(zhuǎn)（是否為新窗口打開，app轉(zhuǎn)場(chǎng)方式），動(dòng)畫
線框圖技巧
通過明暗對(duì)比表達(dá)界面元素優(yōu)先級(jí)。
不使用截圖與顏色，以免對(duì)視覺設(shè)計(jì)師造成干擾。
合理的布局：在確定界面布局時(shí)，提前和視覺設(shè)計(jì)師溝通商量，避免不必要的返工。
遵守柵格規(guī)范：交互稿中的字號(hào)、間距盡量符合視覺要求（如間距最小為10像素等）
Web頁(yè)面標(biāo)記第一屏高度：在1024像素×768像素分辨率下，第一屏高度的極限情況可定為570像素（考慮到不同瀏覽器的高度不一致）
整理樣式規(guī)范：定義好通用的樣式規(guī)則，清楚地表達(dá)元素優(yōu)先級(jí)，減少視覺設(shè)計(jì)師的工作成本，同時(shí)也有利于幫助他們完善視覺規(guī)范。
了解視覺趨勢(shì)，并應(yīng)用到線框圖設(shè)計(jì)中。
交互說明技巧
盡量使用真實(shí)、符合邏輯的數(shù)據(jù)內(nèi)容，以防開發(fā)人員的困擾。
不遺漏特殊狀態(tài)的描述。
避免過長(zhǎng)的流水賬式的說明（可用流程圖描述流程，用表格羅列狀態(tài)，用if…else和case等程序語(yǔ)言組織說明文字，制作動(dòng)態(tài)效果）。
將重復(fù)出現(xiàn)的元素模塊化，只說明一次即可。
有改動(dòng)要保持更新。
設(shè)計(jì)規(guī)范
設(shè)計(jì)規(guī)范包含很多內(nèi)容，比如交互規(guī)范、色彩規(guī)范、logo規(guī)范、UI圖標(biāo)規(guī)范、控件規(guī)范等等。完善的設(shè)計(jì)規(guī)范可以保持產(chǎn)品的一致性，給用戶營(yíng)造熟悉的環(huán)境，同時(shí)也提高了設(shè)計(jì)工作效率（功能組件的復(fù)用），對(duì)品牌的建設(shè)也有很大的好處。
審核視覺稿
核驗(yàn)視覺設(shè)計(jì)師對(duì)交互稿的理解是否正確（美觀性與邏輯性的平衡）。
拒絕毫無發(fā)揮的視覺設(shè)計(jì)。
關(guān)注交互細(xì)節(jié)和狀態(tài)標(biāo)注（按鈕的各種狀態(tài)，間距等）。
在審美方面不要過分干涉。
對(duì)接開發(fā)
設(shè)計(jì)階段：了解是否會(huì)有技術(shù)難點(diǎn)。
設(shè)計(jì)完成后：當(dāng)面溝通設(shè)計(jì)要點(diǎn)。
開發(fā)階段：持續(xù)跟進(jìn)，解答問題。
對(duì)設(shè)計(jì)稿進(jìn)行尺寸標(biāo)注和規(guī)范的整理，減少前端的工作量。設(shè)計(jì)走查確認(rèn)頁(yè)面細(xì)節(jié)是否符合設(shè)計(jì)稿，包括交互和視覺兩方面。
交互：交互動(dòng)作，控件的各種狀態(tài)，極限和出錯(cuò)情況，默認(rèn)值，懸停狀態(tài)等。
視覺：視覺樣式，顏色，尺寸間距，圖片質(zhì)量，不同分辨率下的展現(xiàn)等。
可用性測(cè)試
上線前一般用可用性測(cè)試檢驗(yàn)設(shè)計(jì)方案是否靠譜，以下是一些技巧：
給出使用目標(biāo)，而不是直接的操作。
盡量選擇最重要，最頻繁的任務(wù)進(jìn)行測(cè)試。
用戶數(shù)量的選擇：一般小的功能點(diǎn)，測(cè)試3～5名用戶即可。新產(chǎn)品、較大的改版和重要功能，可以測(cè)試5～10名用戶。
鼓勵(lì)用戶采用「出聲思維法」。
不要忽視現(xiàn)場(chǎng)反應(yīng)，如表情和下意識(shí)的動(dòng)作和語(yǔ)言。
考慮使用場(chǎng)景，尤其是移動(dòng)端產(chǎn)品。
靈活運(yùn)用可用性測(cè)試，可以邀請(qǐng)不熟悉項(xiàng)目的同事或朋友，一般低保真原型即可。
A/B測(cè)試
預(yù)上線階段一般用A/B測(cè)試的方法檢驗(yàn)設(shè)計(jì)方案是否靠譜。
A方案和B方案要保證同時(shí)發(fā)布，同一用戶應(yīng)該自始至終只看到其中一種方案，同時(shí)要保證單一變量。
用戶反饋和產(chǎn)品數(shù)據(jù)
上線后一般通過用戶反饋和產(chǎn)品數(shù)據(jù)來評(píng)判設(shè)計(jì)的優(yōu)劣。
用戶反饋的來源有很多，主要包括客服（產(chǎn)品反饋入口），各大社交平臺(tái)，應(yīng)用市場(chǎng)等等。收集好用戶反饋后做好過濾和分類，然后按重要程度去解決問題。
產(chǎn)品數(shù)據(jù)綜合反映了設(shè)計(jì)，技術(shù)，運(yùn)營(yíng)的合力，設(shè)計(jì)關(guān)心的主要是用戶的行為數(shù)據(jù)，如頁(yè)面間的跳轉(zhuǎn)率，某按鈕的點(diǎn)擊量等。
本文作者：@斜陽(yáng)君 ? 來自：簡(jiǎn)書
不錯(cuò)，有值得借鑒的地方！
看起來不錯(cuò)。