UI設(shè)計(jì)中的交互原則
時(shí)間：2020-11-05來(lái)源：lb577.com點(diǎn)擊量：次作者：Arya
時(shí)間：2020-11-05點(diǎn)擊量：次作者：Arya
好的設(shè)計(jì)原則是產(chǎn)品設(shè)計(jì)的堅(jiān)實(shí)基礎(chǔ)，它可以描述產(chǎn)品整體層面的設(shè)計(jì)目標(biāo)，也可以對(duì)具體問(wèn)題的決策進(jìn)行支持。今天AAA教育的武老師從設(shè)計(jì)原則的重要性出發(fā)，分享了用戶(hù)體驗(yàn)的8條UX原則，供大家一起參考學(xué)習(xí)，聊聊UI設(shè)計(jì)中的交互原則。
01 前言
UI設(shè)計(jì)日新月異，但在變化的背后不變的是設(shè)計(jì)師對(duì)美和易用的追求。在對(duì)用戶(hù)體驗(yàn)的不斷研究中，很多復(fù)雜的案例被凝聚成簡(jiǎn)明的設(shè)計(jì)原則供我們使用。Lawsofux的UX原則便是其中的典范，這些原則久經(jīng)考驗(yàn)，歷久彌新。本文僅就這些優(yōu)秀的交互原則結(jié)合自己的工作項(xiàng)目。談些淺顯的看法，意在拋磚引玉。
02 Lawsofux的UX原則
1. 希克定律
決策成本隨著可選數(shù)量和復(fù)雜性增加而增加。將復(fù)雜任務(wù)拆解為簡(jiǎn)單的步驟可以降低用戶(hù)的決策成本。突示推薦選項(xiàng)可以避免用戶(hù)無(wú)所適從。漸進(jìn)式設(shè)計(jì)可以減少新用戶(hù)的認(rèn)知負(fù)擔(dān)。
應(yīng)用案例：省心招-招聘刷新設(shè)置結(jié)果頁(yè)
我們?cè)谠O(shè)計(jì)過(guò)程中經(jīng)常會(huì)遇到一種情況：?jiǎn)我豁?yè)面會(huì)有很多類(lèi)似的入口或內(nèi)容，并且需求方希望都加以強(qiáng)調(diào)。由?？硕傻弥瑢?duì)于用戶(hù)來(lái)說(shuō)這樣的頁(yè)面是十分復(fù)雜的。既全都強(qiáng)調(diào)等于沒(méi)有強(qiáng)調(diào)，效果反而不理想。在招才貓的的設(shè)置結(jié)果頁(yè)中我們避免了這種情況，對(duì)結(jié)果頁(yè)的三種入口進(jìn)行了區(qū)別化處理，將用戶(hù)最需要的操作突出顯示，防止用戶(hù)陷入困惑。UI設(shè)計(jì)增強(qiáng)用戶(hù)體驗(yàn)。
2. 菲茨定律
獲取目標(biāo)的時(shí)間取決于目標(biāo)的距離和大小。點(diǎn)擊目標(biāo)應(yīng)足夠大，使用戶(hù)可以辨別和準(zhǔn)確選擇。點(diǎn)擊目標(biāo)之間應(yīng)有充分空隙。點(diǎn)擊目標(biāo)應(yīng)該放置在一個(gè)界面內(nèi)易于獲取的區(qū)域。
應(yīng)用案例：58營(yíng)銷(xiāo)平臺(tái)-效果數(shù)據(jù)升級(jí)
在數(shù)據(jù)展示類(lèi)設(shè)計(jì)中，用戶(hù)查看數(shù)據(jù)一直是個(gè)痛點(diǎn)，因?yàn)閳D表可能很長(zhǎng)或者數(shù)據(jù)文字不夠明顯，導(dǎo)致界面識(shí)別性較低。在58營(yíng)銷(xiāo)平臺(tái)效果數(shù)據(jù)頁(yè)設(shè)計(jì)時(shí)，我們嘗試優(yōu)化這個(gè)問(wèn)題。于是在柱狀圖頂部增加了觸發(fā)點(diǎn)，鼠標(biāo)劃過(guò)時(shí)會(huì)浮現(xiàn)卡片展現(xiàn)其具體數(shù)據(jù)。設(shè)計(jì)時(shí)觸發(fā)點(diǎn)應(yīng)足夠大，或者有更大的熱區(qū)，以增加數(shù)據(jù)識(shí)別性。之前也分享過(guò)UI設(shè)計(jì)中交互設(shè)計(jì)指南。
3. 共域定律
UI設(shè)計(jì)增強(qiáng)用戶(hù)體驗(yàn)的一種情況，如果元素們?cè)谝粋€(gè)明顯的區(qū)域內(nèi)，人們將認(rèn)為他們是一組的。為不同數(shù)量元素添加邊框是創(chuàng)建公共區(qū)域的簡(jiǎn)便方法。也可以為不同數(shù)量元素添加背景來(lái)創(chuàng)建公共區(qū)域。
應(yīng)用案例：幫幫商家2.4.0版本迭代
在這個(gè)頁(yè)面優(yōu)化時(shí)，遇見(jiàn)了用戶(hù)使用習(xí)慣與內(nèi)容邏輯分類(lèi)的沖突。頁(yè)面分為操作項(xiàng)與展示項(xiàng)，操作項(xiàng)多且復(fù)雜，用戶(hù)可能只要設(shè)置部分功能就足夠。但是原頁(yè)面保存按鈕在操作項(xiàng)最下方，可能要翻頁(yè)去找，不是很方便。于是將保存按鈕與右側(cè)預(yù)覽頁(yè)面上下排布，通過(guò)灰色的背景使得其視覺(jué)上歸為一組。這樣也符合了用戶(hù)“保存滿(mǎn)意設(shè)置“的心智模型。
4. 靠近性原則
彼此臨近的對(duì)象往往會(huì)組合在一起。鄰近有助于與附近物體建立關(guān)系。鄰近性可幫助用戶(hù)更快，更有效地理解和組織信息。
應(yīng)用案例：58營(yíng)銷(xiāo)平臺(tái)-效果數(shù)據(jù)頁(yè)
這個(gè)原則有兩個(gè)方面：相關(guān)的內(nèi)容要靠近，不相關(guān)的數(shù)據(jù)也要遠(yuǎn)離，防止用戶(hù)混淆。在效果數(shù)據(jù)頁(yè)的創(chuàng)建漏斗模塊中，僅僅依靠操作項(xiàng)目之間的間距就可以給用戶(hù)控件使用方式的暗示。在數(shù)據(jù)分析模塊中，不同的控件之間，間距和位置也可以表明他們的相關(guān)性和優(yōu)先級(jí)。
5. 連通性原則
UI設(shè)計(jì)元素，與沒(méi)有連接的元素相比，在視覺(jué)上連接的元素被認(rèn)為更相關(guān)。可以通過(guò)顏色，線(xiàn)條，框架或其他形狀連接具有類(lèi)似性質(zhì)的分組功能。
應(yīng)用案例：招才貓-刷新設(shè)置頁(yè)
兩個(gè)方案中，左側(cè)使用卡片將承載所有內(nèi)容的方案使得功能的從屬于關(guān)系更加明確。而右側(cè)的線(xiàn)框也將標(biāo)題與說(shuō)明緊緊的連接在一起。
6. 美即是好用
審美不好可以學(xué)UI嗎？用戶(hù)通常認(rèn)為美觀的設(shè)計(jì)是更實(shí)用的設(shè)計(jì)。美觀的設(shè)計(jì)可以讓用戶(hù)對(duì)小的可用性問(wèn)題更加寬容。美觀的設(shè)計(jì)在人們的大腦中產(chǎn)生了積極的反應(yīng)，并使他們相信設(shè)計(jì)的比實(shí)際上更好用。美觀的設(shè)計(jì)可以掩蓋可用性問(wèn)題，防止在可用性測(cè)試期間發(fā)現(xiàn)問(wèn)題。
應(yīng)用案例：省心招-置頂頁(yè)面改版
置頂頁(yè)面改版的設(shè)計(jì)重點(diǎn)是視覺(jué)提升。所以增加了icon、配圖以及豐富的顏色。但這些會(huì)增加用視覺(jué)復(fù)雜度，使得頁(yè)面不夠簡(jiǎn)潔高效。所以要使用大字突出關(guān)鍵信息以彌補(bǔ)干擾。
7. 米勒定律(7±2原理)
一般人只能在其工作記憶中保留7個(gè)(±2)項(xiàng)。分塊是一種以可管理的方式呈現(xiàn)內(nèi)容組的有效方法。一次組織5-9項(xiàng)內(nèi)容。
應(yīng)用案例：招才貓-刷新設(shè)置頁(yè)彈窗
在設(shè)計(jì)中，需求方也常常希望在有限的屏幕上放進(jìn)更多的內(nèi)容。但是米勒定律說(shuō)明，少即是多，適中的即是恰當(dāng)?shù)摹o(wú)論多么飽滿(mǎn)的頁(yè)面都面臨用戶(hù)工作記憶量的限制。太多的重點(diǎn)，用戶(hù)反而難以抓住重點(diǎn)。所以梳理頁(yè)面信息量和歸納重點(diǎn)也成為了設(shè)計(jì)師的必修課。
不過(guò)也有研究認(rèn)為工作記憶量是4(±2)項(xiàng),所以要更注重簡(jiǎn)潔。
8. 特斯勒定律 / 復(fù)雜性守恒定律
UI設(shè)計(jì)人性化，特斯勒定律(又稱(chēng)為復(fù)雜性守恒定律)指出，對(duì)于任何系統(tǒng)，都存在一定程度的復(fù)雜性，無(wú)法降低。
應(yīng)用案例：復(fù)雜性無(wú)法降低，但是可以轉(zhuǎn)移。
在刷新設(shè)置方式中，可設(shè)置項(xiàng)越多，功能就越強(qiáng)大，但是操作也越復(fù)雜。若是默認(rèn)使用智能刷新，則能夠最大程度的降低用戶(hù)操作的復(fù)雜度。
03 總結(jié)
中后臺(tái)項(xiàng)目一般側(cè)重效率和易用性，在設(shè)計(jì)過(guò)程中更要帶入交互思維，時(shí)刻的思考用戶(hù)當(dāng)前狀態(tài)。這就要求設(shè)計(jì)師對(duì)用戶(hù)的認(rèn)識(shí)模式，記憶承載，使用方式有著清晰的認(rèn)識(shí)。而Lawsofux的設(shè)計(jì)原則很好的闡釋了這些。希望這篇文章能夠和你一起發(fā)現(xiàn)界面背后的邏輯，讓每一處設(shè)計(jì)都有據(jù)可循，更多資訊持續(xù)關(guān)注AAA教育~
熱門(mén)推薦
UI設(shè)計(jì)
產(chǎn)品經(jīng)理
大數(shù)據(jù)分析
原畫(huà)設(shè)計(jì)
平面設(shè)計(jì)
新媒體運(yùn)營(yíng) 
