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

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

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

因此國內(nèi)交互設(shè)計(jì)領(lǐng)域的發(fā)展，既要依托大廠優(yōu)秀設(shè)計(jì)團(tuán)隊(duì)的成長與分享，也要依靠外部大環(huán)境下愈發(fā)重視交互的趨勢(shì)的形成。雖然職能劃分目前仍沒有一個(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ā)下來，由中下游的設(shè)計(jì)師來負(fù)責(zé)，即在座的各位。有壓力但也是一條康莊大道，共勉。

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

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

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

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

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

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

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

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

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

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

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

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

4. 通過用戶測(cè)試來判斷界面的可發(fā)現(xiàn)性

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

二、提高用戶效率

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

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

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

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

這是已經(jīng)被騰訊網(wǎng)易等大廠設(shè)計(jì)團(tuán)隊(duì)提到過多次的設(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)和用戶體驗(yàn)?zāi)繕?biāo)后，以目標(biāo)為導(dǎo)向開展設(shè)計(jì)，可以避免反復(fù)修改等問題，從而提高產(chǎn)品設(shè)計(jì)的效率。

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

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

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

三、可探索的路徑

概括來說就是清晰易用的導(dǎo)航。

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

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

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

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

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

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

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

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

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

4. 始終允許撤銷

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

四、費(fèi)茨定律

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

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

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

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

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

即界面中的視覺或交互元素。

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)希望用戶以不同的方式進(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)常用左滑喚出操作控件，而安卓則是長按喚出，特殊情況如業(yè)務(wù)需要，或考慮開發(fā)成本，雙端合一出一稿設(shè)計(jì)時(shí)可以適當(dāng)打破規(guī)則，而有時(shí)為了滿足不同平臺(tái)的用戶習(xí)慣，我們需要提供兩種樣式的操作方式。如在小程序平臺(tái)，無法判斷他是iOS還是安卓的用戶，也就無法僅提供一種交互樣式來滿足所有用戶。

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

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

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

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

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

3. 等待時(shí)需要告知用戶，信息盡量完整，如具體等待時(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ì)》