本文主要聊一下產(chǎn)品中使用的幾個交互設(shè)計原則，一致性，費(fèi)茨定律，容錯性，希克定律。

一致性

我們在做設(shè)計時，經(jīng)常會講到要保持一致。一致性的好處從外部來說，可以極大的提升產(chǎn)品的易用性，降低用戶的學(xué)習(xí)成本，同時也有利于品牌形象的傳達(dá)。從內(nèi)部來說，將一些相同或類似的功能進(jìn)行復(fù)用，提高團(tuán)隊的協(xié)作效率，讓資源得到更充分的利用。

那么設(shè)計師該如何做到一致性呢?

一致性體現(xiàn)在產(chǎn)品中可以體現(xiàn)在很多方面，比如是視覺風(fēng)格統(tǒng)一，交互操作統(tǒng)一。視覺上可以是配色、字體、圖標(biāo)、頁面布局、插畫，以及在不同終端上的統(tǒng)一。交互操作可以是相同相似功能在不同頁面的呼出方式，一些地方動畫的表現(xiàn)形式。

另外，產(chǎn)品與本身所處的行業(yè)內(nèi)的競品的一致性，比如音樂播放頁面，用戶已經(jīng)習(xí)慣了上面是歌曲宣傳圖，下面是播放切換的控件，各個產(chǎn)品的排版布局都是相似的，這樣的統(tǒng)一可以讓用戶沒有陌生感，在接觸一個新的音樂類產(chǎn)品時很快的上手。

 

滴答清單的網(wǎng)頁端、桌面版、網(wǎng)頁插件，將頁面的主要功能信息都放在了左邊，中間部分是清單列表，最右側(cè)是清單詳情，配色都是用了灰色、白色、淺藍(lán)色，圖標(biāo)風(fēng)格上使用的面型風(fēng)格，這三個終端的視覺風(fēng)格是保持了高度的一致，傳遞給用戶的也是很強(qiáng)的品牌理念。

 

 

阿里云盤，App啟動頁和網(wǎng)頁功能介紹，都是使用了C4D插畫，來保證兩個終端品牌風(fēng)格的一致性。

 

 

微博App的詳情頁及他人主頁，這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式，用戶可以在不用思考的情況下直接操作，這是利用了相同功能在不同頁面復(fù)用了相同的交互控件。

 

 

 

費(fèi)茨定律

簡單點(diǎn)來說，有兩個關(guān)鍵因素，兩個操作目標(biāo)的距離、操作目標(biāo)大小。第一個因素意思就是在當(dāng)前產(chǎn)品中兩步操作，手指移動的距離越短，操作就越容易。第二個因素是當(dāng)前操作目標(biāo)越大，操作越容易。

 

石墨文檔App。在頁面右下角有一個懸浮的新建按鈕，點(diǎn)擊后從底部彈出活動視圖，用戶可以進(jìn)行新建文檔、表格等操作。這里使用從底部彈出活動視圖，而不是在新頁面或者頁面中間，正是利用了費(fèi)茨定律，縮短了兩步操作之間手指移動的距離，降低操作難度。

 

 

 

滴滴出行、如祺出行

滴滴出行打車頁面，App首先會自動定位你當(dāng)前所在位置為出發(fā)位置，目的地一欄顯示文案「輸入目的地」。設(shè)計師將輸入框設(shè)計的很大，文案字體也很大，在當(dāng)前頁面中非常醒目，極大的方便了用戶的操作。這就是應(yīng)用了費(fèi)茨定律的第二個因素，當(dāng)前操作目標(biāo)越大，操作也就越容易。

反觀如祺出行的打車頁面，出發(fā)地一欄和目的地一欄的尺寸是一樣大的，都是使用圖標(biāo)+文字樣式，出發(fā)地一欄使用深灰色的圖標(biāo)、深灰色的字體，而目的地一欄圖標(biāo)雖然使用了橙色主題色，但是文字的顏色是淺灰色，字號也沒有放大，非常不顯眼。要知道用戶當(dāng)前的迫切需求是輸入目的地，這樣設(shè)計無疑是增加了用戶操作的難度。

 

 

 

 

容錯性

平時在操作產(chǎn)品界面時，經(jīng)常會因?yàn)橐恍┰蛟斐刹僮麇e誤，而有些錯誤造成的損失是無法挽回的。那么設(shè)計師應(yīng)該怎么避免用戶操作中犯錯呢？容錯性原則可以很好的解決這個問題。容錯性定義是：

“容錯性是產(chǎn)品對錯誤操作的承載性能，即一個產(chǎn)品操作時出現(xiàn)錯誤的概率和錯誤出現(xiàn)后得到解決的概率和效率。容錯性最初應(yīng)用于計算機(jī)領(lǐng)域，它的存在能保證系統(tǒng)在故障存在的情況下不失效，仍然正常工作。產(chǎn)品容錯性設(shè)計能使產(chǎn)品與人的交流或人與人借助產(chǎn)品的交流更加流暢。”

拆解一下，影響「操作時出現(xiàn)錯誤的概率」的因素有，操作前的引導(dǎo)提醒以及操作時的提示。影響「錯誤出現(xiàn)后得到解決的概率和效率」的因素有，操作后的解決方案

 

微信的修改微信號功能，不同于修改昵稱直接進(jìn)入編輯頁面，微信在中間增加了一個頁面，頁面內(nèi)容顯示當(dāng)前的微信號及提示文字，目的是提醒用戶要慎重，避免有些用戶修改了微信號之后后悔。這里是用到了容錯性的操作前的引導(dǎo)提醒，降低了出現(xiàn)錯誤的概率。

 

 

QQ注冊頁面，用戶輸入昵稱后，系統(tǒng)會檢測昵稱是否可用，及時給出給出提示。輸入密碼時會自動出現(xiàn)密碼設(shè)置的提示，及時提醒密碼都有哪些規(guī)則，避免用戶輸入不符合要求的密碼。操作中給出這些相應(yīng)的提示，可以使用戶更加流暢的完成注冊流程。

 

 

 

印象筆記網(wǎng)頁版。將一篇筆記刪除后，頁面頂部會出現(xiàn)一個提示框，文案是「已將XX文章移至廢紙簍」，提示框2、3秒之后自動消失。如果剛好這篇筆記是不小心誤刪的，這里的提示框給予了用戶反悔的機(jī)會，幫助用戶及時的找回筆記，彌補(bǔ)錯誤。

 

 

 

 

希克定律

希克定律，又叫是希克一海曼定律（Hick Hymalrs 1aw），是一種心理物理學(xué)定律。應(yīng)用在產(chǎn)品設(shè)計當(dāng)中，就是當(dāng)頁面中需要有不同選項時，要盡可能的少而簡單，降低用戶的決策成本。

 

美團(tuán)外賣頁面的金剛區(qū)，共有三行應(yīng)用。核心推薦的5個應(yīng)用是放在第一排，其他10個應(yīng)用排成兩排，核心推薦應(yīng)用與其他應(yīng)用在圖標(biāo)風(fēng)格上使用了區(qū)別化設(shè)計，用戶在進(jìn)行選擇時變成了5選1，而不是15選1。這是設(shè)計師在功能設(shè)計時針對應(yīng)用做出了重要程度的區(qū)分，以幫助用戶更快做出選擇。

作者：不吃橙子D

轉(zhuǎn)載請注明：站酷

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司