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