設(shè)計(jì)總是憑感覺(jué)?那是你不了解這些交互設(shè)計(jì)原則
編輯導(dǎo)語(yǔ):在產(chǎn)品設(shè)計(jì)中,很多交互細(xì)節(jié)方面的設(shè)計(jì)會(huì)很大程度的影響用戶體驗(yàn),在設(shè)計(jì)產(chǎn)品時(shí)需要把握好設(shè)計(jì)中的幾種原則,做到產(chǎn)品最基本的易用性;本文作者分享了關(guān)于產(chǎn)品設(shè)計(jì)中的交互設(shè)計(jì)原則,我們一起來(lái)了解一下。
本文主要聊一下產(chǎn)品中使用的幾個(gè)交互設(shè)計(jì)原則:一致性、費(fèi)茨定律、容錯(cuò)性、??硕伞?/strong>
01 一致性
我們?cè)谧鲈O(shè)計(jì)時(shí),經(jīng)常會(huì)講到要保持一致。
一致性的好處:
- 從外部來(lái)說(shuō),可以極大的提升產(chǎn)品的易用性,降低用戶的學(xué)習(xí)成本,同時(shí)也有利于品牌形象的傳達(dá)。
- 從內(nèi)部來(lái)說(shuō),將一些相同或類似的功能進(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è)面,用戶已經(jīng)習(xí)慣了上面是歌曲宣傳圖。
下面是播放切換的控件,各個(gè)產(chǎn)品的排版布局都是相似的,這樣的統(tǒng)一可以讓用戶沒(méi)有陌生感,在接觸一個(gè)新的音樂(lè)類產(chǎn)品時(shí)很快的上手。
滴答清單的網(wǎng)頁(yè)端、桌面版、網(wǎng)頁(yè)插件,將頁(yè)面的主要功能信息都放在了左邊,中間部分是清單列表,最右側(cè)是清單詳情,配色都是用了灰色、白色、淺藍(lán)色,圖標(biāo)風(fēng)格上使用的面型風(fēng)格;這三個(gè)終端的視覺(jué)風(fēng)格是保持了高度的一致,傳遞給用戶的也是很強(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)論功能都使用了相同的底部彈出框的控件樣式,用戶可以在不用思考的情況下直接操作,這是利用了相同功能在不同頁(yè)面復(fù)用了相同的交互控件。
02 費(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)視圖,用戶可以進(jìn)行新建文檔、表格等操作;這里使用從底部彈出活動(dòng)視圖,而不是在新頁(yè)面或者頁(yè)面中間,正是利用了費(fèi)茨定律,縮短了兩步操作之間手指移動(dòng)的距離,降低操作難度。
滴滴出行、如祺出行
滴滴出行打車頁(yè)面,App首先會(huì)自動(dòng)定位你當(dāng)前所在位置為出發(fā)位置,目的地一欄顯示文案「輸入目的地」;設(shè)計(jì)師將輸入框設(shè)計(jì)的很大,文案字體也很大,在當(dāng)前頁(yè)面中非常醒目,極大的方便了用戶的操作;這就是應(yīng)用了費(fèi)茨定律的第二個(gè)因素,當(dāng)前操作目標(biāo)越大,操作也就越容易。
反觀如祺出行的打車頁(yè)面,出發(fā)地一欄和目的地一欄的尺寸是一樣大的,都是使用圖標(biāo)+文字樣式,出發(fā)地一欄使用深灰色的圖標(biāo)、深灰色的字體;而目的地一欄圖標(biāo)雖然使用了橙色主題色,但是文字的顏色是淺灰色,字號(hào)也沒(méi)有放大,非常不顯眼。
要知道用戶當(dāng)前的迫切需求是輸入目的地,這樣設(shè)計(jì)無(wú)疑是增加了用戶操作的難度。
03 容錯(cuò)性
平時(shí)在操作產(chǎn)品界面時(shí),經(jīng)常會(huì)因?yàn)橐恍┰蛟斐刹僮麇e(cuò)誤,而有些錯(cuò)誤造成的損失是無(wú)法挽回的。
那么設(shè)計(jì)師應(yīng)該怎么避免用戶操作中犯錯(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)品的交流更加流暢?!?/p>
拆解一下,影響「操作時(shí)出現(xiàn)錯(cuò)誤的概率」的因素有,操作前的引導(dǎo)提醒以及操作時(shí)的提示;影響「錯(cuò)誤出現(xiàn)后得到解決的概率和效率」的因素有,操作后的解決方案。
微信的修改微信號(hào)功能,不同于修改昵稱直接進(jìn)入編輯頁(yè)面,微信在中間增加了一個(gè)頁(yè)面,頁(yè)面內(nèi)容顯示當(dāng)前的微信號(hào)及提示文字,目的是提醒用戶要慎重,避免有些用戶修改了微信號(hào)之后后悔;這里是用到了容錯(cuò)性的操作前的引導(dǎo)提醒,降低了出現(xiàn)錯(cuò)誤的概率。
QQ注冊(cè)頁(yè)面,用戶輸入昵稱后,系統(tǒng)會(huì)檢測(cè)昵稱是否可用,及時(shí)給出給出提示;輸入密碼時(shí)會(huì)自動(dòng)出現(xiàn)密碼設(shè)置的提示,及時(shí)提醒密碼都有哪些規(guī)則,避免用戶輸入不符合要求的密碼;操作中給出這些相應(yīng)的提示,可以使用戶更加流暢的完成注冊(cè)流程。
印象筆記網(wǎng)頁(yè)版,將一篇筆記刪除后,頁(yè)面頂部會(huì)出現(xiàn)一個(gè)提示框,文案是「已將XX文章移至廢紙簍」,提示框2、3秒之后自動(dòng)消失;如果剛好這篇筆記是不小心誤刪的,這里的提示框給予了用戶反悔的機(jī)會(huì),幫助用戶及時(shí)的找回筆記,彌補(bǔ)錯(cuò)誤。
04 希克定律
??硕桑纸惺窍?艘缓B桑℉ick Hymalrs 1aw),是一種心理物理學(xué)定律,應(yīng)用在產(chǎn)品設(shè)計(jì)當(dāng)中;就是當(dāng)頁(yè)面中需要有不同選項(xiàng)時(shí),要盡可能的少而簡(jiǎn)單,降低用戶的決策成本。
美團(tuán)外賣頁(yè)面的金剛區(qū),共有三行應(yīng)用;核心推薦的5個(gè)應(yīng)用是放在第一排,其他10個(gè)應(yīng)用排成兩排,核心推薦應(yīng)用與其他應(yīng)用在圖標(biāo)風(fēng)格上使用了區(qū)別化設(shè)計(jì),用戶在進(jìn)行選擇時(shí)變成了5選1,而不是15選1。
這是設(shè)計(jì)師在功能設(shè)計(jì)時(shí)針對(duì)應(yīng)用做出了重要程度的區(qū)分,以幫助用戶更快做出選擇。
本文由 @YI易設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自?Unsplash,基于 CC0 協(xié)議
學(xué)習(xí)了,謝謝