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

一致性

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

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

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

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

 

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

 

 

阿里云盤(pán)，App啟動(dòng)頁(yè)和網(wǎng)頁(yè)功能介紹，都是使用了C4D插畫(huà)，來(lái)保證兩個(gè)終端品牌風(fēng)格的一致性。

 

 

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

 

 

 

費(fèi)茨定律

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

 

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

 

 

 

滴滴出行、如祺出行

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

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

 

 

 

 

容錯(cuò)性

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

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

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

 

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

 

 

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

 

 

 

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

 

 

 

 

?？硕?/span>

?？硕?，又叫是?？艘缓Ｂ桑℉ick Hymalrs 1aw），是一種心理物理學(xué)定律。應(yīng)用在產(chǎn)品設(shè)計(jì)當(dāng)中，就是當(dāng)頁(yè)面中需要有不同選項(xiàng)時(shí)，要盡可能的少而簡(jiǎn)單，降低用戶(hù)的決策成本。

 

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

作者：不吃橙子D

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

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

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

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

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

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