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