超全面！高手總結(jié)的18條交互設(shè)計(jì)原則（二）

這是一套較系統(tǒng)的交互設(shè)計(jì)原則，我將會(huì)結(jié)合一些案例進(jìn)行講解，希望你有收獲。

上期回顧：《超全面！高手總結(jié)的18條交互設(shè)計(jì)原則（一）》

此書(shū)屬于作者博客分享，并未成書(shū)出版，總結(jié)于14年，在閱讀翻譯過(guò)程中發(fā)現(xiàn)很多案例及原則已經(jīng)過(guò)時(shí)，因此結(jié)合當(dāng)下的互聯(lián)網(wǎng)產(chǎn)品和新潮的交互設(shè)計(jì)原則對(duì)其進(jìn)行了補(bǔ)充。國(guó)內(nèi)交互設(shè)計(jì)起步較晚，我在杭州曾經(jīng)結(jié)識(shí)過(guò)第一位中央美院的交互設(shè)計(jì)專(zhuān)業(yè)畢業(yè)生學(xué)姐，那是國(guó)內(nèi)第一屆交互設(shè)計(jì)專(zhuān)業(yè)畢業(yè)生，且最終學(xué)姐從事的是運(yùn)營(yíng)設(shè)計(jì)。

因此國(guó)內(nèi)交互設(shè)計(jì)領(lǐng)域的發(fā)展，既要依托大廠優(yōu)秀設(shè)計(jì)團(tuán)隊(duì)的成長(zhǎng)與分享，也要依靠外部大環(huán)境下愈發(fā)重視交互的趨勢(shì)的形成。雖然職能劃分目前仍沒(méi)有一個(gè)定論，是獨(dú)立劃分出交互設(shè)計(jì)師，還是 UI 晉升產(chǎn)品設(shè)計(jì)師、UED設(shè)計(jì)師？但有一個(gè)準(zhǔn)則卻是大概可以達(dá)成共識(shí)的，那就是，產(chǎn)品經(jīng)理職能愈發(fā)向業(yè)務(wù)層傾斜，懂得在戰(zhàn)略層業(yè)務(wù)向高屋建瓴籌備戰(zhàn)略的產(chǎn)品經(jīng)理，能為企業(yè)創(chuàng)造更多的價(jià)值。而交互邏輯信息架構(gòu)等交互設(shè)計(jì)領(lǐng)域的職能必然分發(fā)下來(lái)，由中下游的設(shè)計(jì)師來(lái)負(fù)責(zé)，即在座的各位。有壓力但也是一條康莊大道，共勉。

一、可發(fā)現(xiàn)性

1. 隱藏復(fù)雜性的行為可能會(huì)導(dǎo)致增加復(fù)雜性

設(shè)計(jì)嘗試隱藏一些元素控件以使得界面更加輕盈簡(jiǎn)潔，或者希望減少多余元素對(duì)用戶(hù)的干擾，使用戶(hù)聚焦于核心任務(wù)。這種做法是沒(méi)有錯(cuò)的，且多用于移動(dòng)端產(chǎn)品，如閱讀類(lèi)app，為打造沉浸式閱讀體驗(yàn)而隱藏操作欄。

但在執(zhí)行這一設(shè)計(jì)時(shí)要考慮需要隱藏的內(nèi)容是否會(huì)對(duì)用戶(hù)造成困擾，在這里分享一個(gè)案例。

微信掃一掃功能將手電筒隱藏，通過(guò)判斷掃描內(nèi)容的情況來(lái)調(diào)取手電筒功能。這個(gè)設(shè)計(jì)本身沒(méi)有錯(cuò)，結(jié)合用戶(hù)場(chǎng)景在最恰當(dāng)?shù)臅r(shí)機(jī)觸發(fā)，在其余場(chǎng)景隱藏以保證界面簡(jiǎn)潔。但這個(gè)設(shè)計(jì)實(shí)際上犯了一個(gè)較大的原則性錯(cuò)誤——用戶(hù)自治（上一篇文章中有講到），產(chǎn)品設(shè)計(jì)者太過(guò)自信于機(jī)器的識(shí)別效率，自信于代碼的精湛，而沒(méi)有在廣泛的實(shí)際場(chǎng)景中進(jìn)行大量測(cè)試。導(dǎo)致用戶(hù)無(wú)法按照自己的意愿執(zhí)行操作，大大降低效率并引發(fā)用戶(hù)反感。

使用時(shí)會(huì)出現(xiàn)的問(wèn)題：我在晚上急切的想要掃碼騎車(chē)，打開(kāi)微信掃一掃后它需要很長(zhǎng)時(shí)間（有時(shí)超過(guò)十秒）才判定我處于黑暗場(chǎng)景，然后出現(xiàn)輕觸照亮的按鈕，點(diǎn)擊按鈕手電筒會(huì)打開(kāi)。（有時(shí)候只是略微暗一些，但二維碼是無(wú)法被識(shí)別成功的，而手電筒的判斷也無(wú)法實(shí)現(xiàn)）在此期間我只能干等著，因?yàn)閽咭粧吖δ苷加昧耸蛛娡玻虼思幢阄沂謩?dòng)去開(kāi)啟手電筒，也會(huì)顯示此功能已被占用。很多人也出現(xiàn)過(guò)類(lèi)似的狀況。

2. 使用新手引導(dǎo)（功能引導(dǎo)）告知用戶(hù)使用新功能

永遠(yuǎn)不要認(rèn)為用戶(hù)是高級(jí)用戶(hù)，產(chǎn)品設(shè)計(jì)者不能主觀臆想用戶(hù)很容易理解你所設(shè)計(jì)的功能，主觀想法沒(méi)有實(shí)際測(cè)試的數(shù)據(jù)可靠，這是準(zhǔn)則。

當(dāng)產(chǎn)品迭代后應(yīng)對(duì)新增的功能進(jìn)行解釋和必要的引導(dǎo)，否則這些功能對(duì)用戶(hù)來(lái)說(shuō)是隱形不可用的。大版本迭代更新，設(shè)計(jì)者一般會(huì)主動(dòng)進(jìn)行引導(dǎo)和宣傳，如常用的開(kāi)屏引導(dǎo)，遮罩功能引導(dǎo)等。對(duì)于一些極小的功能增添或改動(dòng)，也應(yīng)當(dāng)提供必要的說(shuō)明。

3. 必要控件和必要內(nèi)容始終可見(jiàn)

要實(shí)現(xiàn)用戶(hù)體驗(yàn)?zāi)繕?biāo)需要一個(gè)核心的任務(wù)路徑，用戶(hù)要依照這個(gè)路徑完成其核心任務(wù)并達(dá)成目標(biāo)。例如我需要購(gòu)買(mǎi)一件 T恤，用戶(hù)需要在淘寶下單以完成這個(gè)目標(biāo)。反映在界面中，需要為用戶(hù)提供購(gòu)買(mǎi)按鈕、付款按鈕等必要控件，同時(shí)當(dāng)然也需要展示商品價(jià)格、商品尺寸等必要信息。

反觀京東部分商品的購(gòu)買(mǎi)界面是沒(méi)有直接購(gòu)買(mǎi)這一按鈕的，而是替換為加入購(gòu)物車(chē)。從體驗(yàn)角度講這是一個(gè)錯(cuò)誤的設(shè)計(jì)，用戶(hù)需要執(zhí)行加入購(gòu)物車(chē) - 進(jìn)入購(gòu)物車(chē) - 結(jié)算三步操作，和單獨(dú)的立即購(gòu)買(mǎi)按鈕相比，效率低下，容易造成流失。但從業(yè)務(wù)角度講，加入購(gòu)物車(chē)容易觸發(fā)用戶(hù)購(gòu)買(mǎi)多件商品的欲望，另外單件商品不足99元無(wú)法享受包郵，要額外付郵費(fèi)，這一點(diǎn)容易對(duì)用戶(hù)購(gòu)物體驗(yàn)構(gòu)成阻礙，原理參照下面的解釋。因此產(chǎn)品設(shè)計(jì)要綜合體驗(yàn)業(yè)務(wù)各方面的因素，沒(méi)有絕對(duì)的準(zhǔn)則，只有絕對(duì)的適合。

4. 通過(guò)用戶(hù)測(cè)試來(lái)判斷界面的可發(fā)現(xiàn)性

用戶(hù)測(cè)試能夠幫助產(chǎn)品發(fā)現(xiàn)是否有關(guān)鍵元素被隱藏從而降低體驗(yàn)。用戶(hù)測(cè)試是一種極好的用戶(hù)研究策略，如果設(shè)計(jì)人員沒(méi)有足夠精力完成問(wèn)卷或訪談等專(zhuān)業(yè)調(diào)研工作的話，可以考慮尋找身邊的用戶(hù)進(jìn)行簡(jiǎn)單測(cè)試，優(yōu)于埋頭苦干。

二、提高用戶(hù)效率

1. 從提高用戶(hù)工作的效率出發(fā)，而不是提高機(jī)器的效率

雖然提高機(jī)器工作效率貌似必然提升用戶(hù)工作效率，實(shí)則相反。這里作者舉例，輸入電話號(hào)碼這一用戶(hù)行為，從機(jī)器效率角度設(shè)計(jì)，最好輸入一連串的十幾位的數(shù)字，而從用戶(hù)角度講，為避免輸錯(cuò)而導(dǎo)致的效率低下及經(jīng)濟(jì)損失，應(yīng)當(dāng)將數(shù)字每幾位隔開(kāi)。而很多時(shí)候，人力成本比機(jī)器成本要高得多，因此無(wú)論從體驗(yàn)角度還是從業(yè)務(wù)收入角度，都應(yīng)當(dāng)以人為本進(jìn)行設(shè)計(jì)。

2. 提高軟件的效率需要從系統(tǒng)架構(gòu)入手而不是表面的設(shè)計(jì)

可以理解為：交互設(shè)計(jì)對(duì)于提高軟件的工作效率有著更重要作用，相比信息設(shè)計(jì)視覺(jué)設(shè)計(jì)等。引申到現(xiàn)代的產(chǎn)品設(shè)計(jì)流程中，要求產(chǎn)品經(jīng)理和交互設(shè)計(jì)師在產(chǎn)品設(shè)計(jì)的前期應(yīng)該將更多時(shí)間花費(fèi)在用戶(hù)調(diào)研，數(shù)據(jù)分析，以及信息架構(gòu)上，而不是流于表面的交互稿，二八原則中的八用來(lái)進(jìn)行前期數(shù)據(jù)整理和研究分析，而剩余的百分之二十的時(shí)間用來(lái)完成交互稿的構(gòu)建即可。

這是已經(jīng)被騰訊網(wǎng)易等大廠設(shè)計(jì)團(tuán)隊(duì)提到過(guò)多次的設(shè)計(jì)方法，即實(shí)際設(shè)計(jì)稿的產(chǎn)出時(shí)間應(yīng)當(dāng)是整個(gè)產(chǎn)品設(shè)計(jì)流程中占用最短的，更多的時(shí)間應(yīng)當(dāng)用于調(diào)研分析和架構(gòu)，在明確業(yè)務(wù)目標(biāo)和用戶(hù)體驗(yàn)?zāi)繕?biāo)后，以目標(biāo)為導(dǎo)向開(kāi)展設(shè)計(jì)，可以避免反復(fù)修改等問(wèn)題，從而提高產(chǎn)品設(shè)計(jì)的效率。

3. 異常信息應(yīng)當(dāng)由專(zhuān)業(yè)人員編寫(xiě)

使用產(chǎn)品過(guò)程中不可避免會(huì)出現(xiàn)一些異常狀態(tài)、錯(cuò)誤提示。這些提示文案應(yīng)當(dāng)由專(zhuān)業(yè)人員編寫(xiě)，其內(nèi)容需要包括：

• 解釋什么是錯(cuò)的；
• 告訴用戶(hù)如何處理它。

三、可探索的路徑

概括來(lái)說(shuō)就是清晰易用的導(dǎo)航。

1. 為用戶(hù)提供核心工作路徑但也允許用戶(hù)以自己的方式探索產(chǎn)品

不要強(qiáng)制用戶(hù)按照預(yù)先設(shè)置好的方式使用產(chǎn)品，允許用戶(hù)自己探索（針對(duì)那些想要主動(dòng)探索和發(fā)現(xiàn)的用戶(hù)）但同時(shí)一定要提供一個(gè)最快捷高效的工作路徑，以滿(mǎn)足新用戶(hù)的需求。以滴滴為例，強(qiáng)工具類(lèi)產(chǎn)品以提供核心服務(wù)為主，應(yīng)當(dāng)保證所有用戶(hù)能夠迅速實(shí)現(xiàn)體驗(yàn)?zāi)繕?biāo)：打車(chē)并抵達(dá)目的地。其他次要功能或者運(yùn)營(yíng)需求都應(yīng)當(dāng)不影響這一核心工作路徑。

2. 提供穩(wěn)定的home選項(xiàng)，使用戶(hù)隨時(shí)可以找到自己的主頁(yè)

home 選項(xiàng)的設(shè)計(jì)應(yīng)當(dāng)符合行業(yè)標(biāo)準(zhǔn)，如淘寶 tab欄的第一項(xiàng)，如 PC產(chǎn)品左上角的 logo，都屬于 home 路徑，且早已培養(yǎng)好用戶(hù)習(xí)慣，設(shè)計(jì)師可以直接復(fù)用這一規(guī)則，而不應(yīng)重新設(shè)計(jì) home 的樣式或位置。

在此基礎(chǔ)上，移動(dòng)端 home 選項(xiàng)有很多運(yùn)營(yíng)機(jī)會(huì)和體驗(yàn)機(jī)會(huì)，如瀏覽 feed流很久后，點(diǎn)擊 home 鍵回到頂部就是一個(gè)很驚艷的體驗(yàn)點(diǎn)。

3. 使行動(dòng)可逆

使大部分操作可逆意味著用戶(hù)可以以自己的方式工作又不會(huì)造成損失。此原則應(yīng)當(dāng)靈活運(yùn)用，可逆的成本應(yīng)當(dāng)結(jié)合產(chǎn)品來(lái)設(shè)計(jì)。例如填寫(xiě)表單后重新輸入，加入購(gòu)物車(chē)后刪除，付款后取消訂單，他們的成本應(yīng)當(dāng)是依次遞增的。

表單是純體驗(yàn)向的東西，設(shè)計(jì)人員更關(guān)注其填寫(xiě)效率，因此其可逆操作成本應(yīng)當(dāng)降到最低。購(gòu)物和付款相關(guān)可逆操作是和業(yè)務(wù)掛鉤的，設(shè)計(jì)人員應(yīng)當(dāng)考慮成本，考慮如何阻止用戶(hù)執(zhí)行逆操作從而提高轉(zhuǎn)化率付款率，減少取消訂單的比率。因此我們平時(shí)接觸的電商類(lèi)產(chǎn)品，下單后去尋找取消訂單或退款需要花費(fèi)一定時(shí)間。

所以原則可以正向使用也可以反向使用，大家不要局限思維，需要培養(yǎng)業(yè)務(wù)觀。

4. 始終允許撤銷(xiāo)

如我們?cè)诰庉嬑恼碌刃袨闀r(shí)可以通過(guò) command+Z 撤銷(xiāo)文字。此撤銷(xiāo)不同于行動(dòng)可逆，是一種更加便捷成本更低的交互。例如微信聊天提供撤銷(xiāo)操作，撤銷(xiāo)后會(huì)提供重新編輯的選項(xiàng)，此撤銷(xiāo)提高用戶(hù)編輯的效率，是一個(gè)體驗(yàn)向的優(yōu)化點(diǎn)。

四、費(fèi)茨定律

距離越長(zhǎng)，所用時(shí)間越長(zhǎng)，目標(biāo)越大，所用時(shí)間越短。

1. 將大對(duì)象用于希望用戶(hù)執(zhí)行的功能，如CTA按鈕。將小對(duì)象用于不希望用戶(hù)執(zhí)行的功能或希望用戶(hù)次要考慮的功能

2. 獲取多個(gè)目標(biāo)需要的成本是獲取每個(gè)目標(biāo)的成本的總和

因此在使用費(fèi)茨定律時(shí)，不僅要考慮距離和大小，還要減少用戶(hù)需要考慮的目標(biāo)的數(shù)量。即提供更少的選擇可以幫用戶(hù)更快的完成決策。

五、人機(jī)界面對(duì)象

即界面中的視覺(jué)或交互元素。

1. 人機(jī)界面對(duì)象應(yīng)當(dāng)有一個(gè)標(biāo)準(zhǔn)的操作方式

比如 button 觸發(fā)點(diǎn)擊的操作，滑塊觸發(fā)滑動(dòng)的操作。

2. 人機(jī)界面對(duì)象具有標(biāo)準(zhǔn)的結(jié)果行為

如 mac系統(tǒng)中，垃圾桶并不是真的將文件刪除，而是將其儲(chǔ)存在垃圾桶中， 只有傾倒廢紙簍才能將文件徹底刪除。

3. 當(dāng)希望用戶(hù)以不同的方式進(jìn)行交互的時(shí)候，應(yīng)當(dāng)使用新對(duì)象

一般情況，我們應(yīng)當(dāng)在產(chǎn)品使用常用的控件樣式和交互方式，如點(diǎn)擊，滑動(dòng)，雙擊等，不同平臺(tái)要入鄉(xiāng)隨俗，iOS平臺(tái)常用左滑喚出操作控件，而安卓則是長(zhǎng)按喚出，特殊情況如業(yè)務(wù)需要，或考慮開(kāi)發(fā)成本，雙端合一出一稿設(shè)計(jì)時(shí)可以適當(dāng)打破規(guī)則，而有時(shí)為了滿(mǎn)足不同平臺(tái)的用戶(hù)習(xí)慣，我們需要提供兩種樣式的操作方式。如在小程序平臺(tái)，無(wú)法判斷他是iOS還是安卓的用戶(hù)，也就無(wú)法僅提供一種交互樣式來(lái)滿(mǎn)足所有用戶(hù)。

六、降低延遲（用戶(hù)等待時(shí)間）

1. 盡可能使用多線程將延遲推送到后臺(tái)

盡量保證用戶(hù)在等待進(jìn)程時(shí)可以繼續(xù)完成其他工作或?yàn)g覽其他內(nèi)容。如上傳視頻后不必在原頁(yè)面等待，可以瀏覽其他信息。

2. 優(yōu)化用戶(hù)延遲體驗(yàn)

通過(guò)50毫秒內(nèi)的視覺(jué)或者聽(tīng)覺(jué)反饋確認(rèn)所有按鈕點(diǎn)擊，避免多次點(diǎn)擊的陷阱。（在網(wǎng)速卡時(shí)，人們通常會(huì)多次點(diǎn)擊按鈕，而后臺(tái)應(yīng)避免多次發(fā)送請(qǐng)求從而導(dǎo)致卡頓）

3. 等待時(shí)需要告知用戶(hù)，信息盡量完整，如具體等待時(shí)間

加載樣式多樣，應(yīng)當(dāng)選取最適合產(chǎn)品及場(chǎng)景的樣式。程度較重的如全屏加載，輕度加載如微信 button 加載樣式。

「延伸閱讀，設(shè)計(jì)原則在產(chǎn)品中的運(yùn)用」

• 費(fèi)茨定律｜《大產(chǎn)品小細(xì)節(jié)！5分鐘帶你了解經(jīng)典的費(fèi)茨定律》
• 提升可讀性｜《超強(qiáng)干貨！如何更加科學(xué)地提高文本可讀性？》
• 加載設(shè)計(jì)｜《5000字，超詳細(xì)總結(jié)App加載設(shè)計(jì)》