1. 怎么算好用
用戶覺得軟件不好用通常是由于操作界面不符合常識，交互邏輯出人意料導(dǎo)致的。這里我們要引入三個模型的概念：實現(xiàn)模型，心理模型和呈現(xiàn)模型。實現(xiàn)模型是軟件的內(nèi)部運行原理，用戶無需關(guān)心。心理模型是用戶期望中完成任務(wù)的方式，呈現(xiàn)模型則是軟件被設(shè)計來完成任務(wù)的方式。呈現(xiàn)模型越是接近用戶的心理預(yù)期，用戶的學(xué)習(xí)成本越低，也就會覺得這款軟件很好用。
2. 理解業(yè)務(wù)訴求
有個很恰當(dāng)?shù)谋扔鳎河脩舨皇切枰话央娿@，而是墻上要有個洞。后來的研究理論更進一步：還得搞明白為什么用戶需要在墻上打洞，他要連接什么東西？能不能做成無線的？等等。
接到需求后產(chǎn)品經(jīng)理一般會在 PRD 評審時向設(shè)計側(cè)講解需求背景和功能邏輯，在這個階段我們可以了解到產(chǎn)品經(jīng)理規(guī)劃中的用戶流程和使用方式。產(chǎn)品原型呈現(xiàn)的只是無數(shù)解決方案中的一種，了解了業(yè)務(wù)訴求再回顧原型方案，經(jīng)?？梢詭砣碌囊曇埃⒂纱送茖?dǎo)設(shè)計方案。下面我們就看下如何從組件，結(jié)構(gòu)，功能，狀態(tài)幾個層面解決設(shè)計問題。
一. 明確功能用途
1.1 信達(dá)雅的文案
文案是界面的重要構(gòu)成，卻是界面設(shè)計中最不被重視的一部分。很多軟件之所以用起來有一層朦朧的隔閡感，罪魁禍?zhǔn)拙褪腔逎奈陌?。簡單的糾正文案可能會帶來煥然一新的使用感受。
- 信：語義準(zhǔn)確，明確事件的主體客體。
- 達(dá)：避免無效或重復(fù)文案，減少被動語態(tài)，簡潔通順地進行描述。
- 雅：優(yōu)雅且有涵養(yǎng)地與用戶溝通。
- 配圖：有些流程或者用詞比較特殊，單用語言難以描述，配上圖一目了然。
1.2 視覺線索（功能可見性）
圖形用戶界面誕生之初，界面元素對物理世界的模擬是為了便于用戶將現(xiàn)實中的常識套用到虛擬界面上；擬物化通過質(zhì)感暗示用戶界面的交互方式；在扁平化時代，提供視覺線索仍然是必要的原則。拿拖拽操作來說，首先可以拖動的組件上要有把手，暗示可以被撿起。組件被拿起來時要明顯擴大的投影樣式描繪高度，并在列表中顯示一條瞄準(zhǔn)線便于用戶精確定位。
再比如卡片式設(shè)計，和現(xiàn)實中的卡片相同，它可以明確地劃分出功能和信息的關(guān)系。要注意的是，視覺分區(qū)越多，頁面復(fù)雜度越高，設(shè)計時需要控制平衡。
1.3 熟悉的組件
用戶點擊下拉選擇器的時候，自然會期望在周圍彈開一個選項浮層，因為他們用過的所有軟件交互都是這樣。這個就是習(xí)慣用法范式的應(yīng)用[注]，盡可能套用常規(guī)的交互方式讓軟件的操作容易預(yù)測，用戶理解成本低。
然而在常規(guī)組件無法承載實際需求時，有必要跳出慣用范式，通過差異的視覺樣式給用戶思想準(zhǔn)備。例如一些原型圖中的選擇器使用了下拉的樣式，觸發(fā)的卻是選擇抽屜或者彈窗。這種意外的發(fā)生或多或少會降低用戶使用時的信心，因為他們再也不確定點擊下拉后會發(fā)生什么。通過特殊與常規(guī)的區(qū)分，其實也維護了慣用范式的一致性。
二. 導(dǎo)航結(jié)構(gòu)分配
你一定遇到過這種棘手的原型：頁面導(dǎo)航又多又深，林林總總地鋪灑在導(dǎo)航區(qū)和功能區(qū)，信息密度堪比柯林斯英漢辭典。頁面導(dǎo)航是界面的基本框架，處理系統(tǒng)的導(dǎo)航方式是頁面設(shè)計早期就需要完成的工作。
2.1 幾種反例
- 主導(dǎo)航級數(shù)過多：視覺樣式復(fù)雜，操作時需要頻繁卷展。
- 內(nèi)容區(qū)頭部導(dǎo)航堆積：用戶先看到的不是內(nèi)容而是導(dǎo)航，瀏覽效率較低。
- 橫縱導(dǎo)航分配不合理：不合理的結(jié)構(gòu)會影響視線掃描和點選，且空間利用率低。以圖中的結(jié)構(gòu)為例，一級導(dǎo)航下不一定都會有二級或三級導(dǎo)航，就會導(dǎo)致頁面版式差異過大。
2.2 控制一級導(dǎo)航深度
一級導(dǎo)航過深時，有必要進行降級。頂欄導(dǎo)航可以向邊欄導(dǎo)航卸載。邊欄導(dǎo)航是一級時，可將最低級的導(dǎo)航放到內(nèi)容區(qū)吸頂；若層級仍然不夠用或?qū)Ш綏l目較多，可以再增加一個縱向?qū)Ш健?
2.3 平衡內(nèi)容區(qū)導(dǎo)航
吸頂導(dǎo)航會占用內(nèi)容區(qū)的縱向空間，但可以隨時跳轉(zhuǎn)。內(nèi)容區(qū)內(nèi)的導(dǎo)航性質(zhì)更類似于篩選，能夠隨內(nèi)容滾動，不便于隨時切換。頁簽類型區(qū)別大或是需要切換對比時，可以將導(dǎo)航吸頂；頁簽下內(nèi)容形式近似或需要更多瀏覽空間時，可以將導(dǎo)航放在內(nèi)容區(qū)。
2.4 減少空間浪費
很多原型會習(xí)慣性地在頁面頂部配置一個頂欄。實際上里面的商標(biāo)，賬戶信息，設(shè)置等功能可以整合到邊欄中，這樣內(nèi)容區(qū)上方會多一些縱向空間。
三. 合理布置功能
3.1 分級展示功能
比如一些的圖表類頁面主要用于瀏覽而不是編輯，這種情況下將操作隱藏到省略號或者漢堡菜單中，不僅可以減少信息干擾，還能避免誤操作。
高級功能的隱藏很好理解，比如 macOS 的網(wǎng)絡(luò)配置只顯示基礎(chǔ)的連接功能，DNS 配置等高級操作被整理到了一個按鈕中。你可以想象如果所有的配置項都展示一個頁面，對于用戶日常聯(lián)網(wǎng)操作會有多么不友好。
3.2 拆分功能
除了分級，當(dāng)頁面或區(qū)域內(nèi)的功能過于集中時，可以進行拆分以降低信息壓力。
分離檢索與查看：列表同時兼具瀏覽與管理的功能，但在字段眾多，空間有限的情況下，可以選擇其中有代表性的字段在單元行中顯示，便于快速掃描和管理，完整的單元行信息放到下一個層級顯示。
分離表單區(qū)塊：當(dāng)表單存在區(qū)塊表單時，可以只在表單中顯示區(qū)塊的預(yù)覽，將區(qū)塊的新增和配置放到抽屜中進行，由此減少功能堆積。
3.3 數(shù)據(jù)的編輯
涉及數(shù)據(jù)編輯的頁面存在四種設(shè)計方式，需要綜合考慮表單的數(shù)量，用戶的操作頻次和使用方式來判斷采用哪種。對于此類問題的推敲，也可以在 StackExchange 的用戶體驗社區(qū)參考更多案例：
例1：https://ux.stackexchange.com/questions/28210/inline-editing-vs-edit-view?rq=1
例2：https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode
查看模式：帶查看模式的頁面視覺效果整齊，信息干擾最小，且不會誤操作。但需要進入編輯模式修改頁面內(nèi)容。
直接編輯模式：用戶到達(dá)頁面時，數(shù)據(jù)就可以被修改生效。常見于設(shè)置類頁面。該模式使用效率最高。但由于容易誤操作且視覺信息冗雜，不太適合大型表單。
行內(nèi)編輯模式：頁面樣式類似查看模式，當(dāng)鼠標(biāo)懸停在數(shù)據(jù)上，界面會提示用戶此處可以編輯，用戶點擊后可以快速針對局部數(shù)據(jù)做修改。該模式只適用表單項少的情況。
實時保存：頁面長期處于編輯模式，系統(tǒng)會自動保存用戶的操作。常見于線上文檔工具。該模式誤操作風(fēng)險最高，需要提供版本控制和操作撤回功能。
3.4 減輕視覺壓力
業(yè)務(wù)層面上無法避免單頁出現(xiàn)大量表單時，可以在視覺上分節(jié)。注意！和真正的分步不同，這里的只是從視覺層面對頁面信息進行處理，沒有流程先后的概念，所以盡可能不要拆分頁面。以下圖為例，通過視覺上的劃分，即使在同一個頁面顯示同樣數(shù)量的表單，版面空間的呼吸給予了用戶喘歇的余地。錨點導(dǎo)航是個錦上添花的控件，空間允許時可以加上。
3.5 定制化交互
3DS Max 的四元菜單是一個很有代表性的設(shè)計，在視口右鍵時會圍繞光標(biāo)彈出4個內(nèi)容敏感菜單而不是一個，這四個菜單顯示的工具甚至可以自定義。普通系統(tǒng)在處理此類問題時，要么采用需要滾動的長菜單，要么用聯(lián)級選擇器分類。而這個設(shè)計的優(yōu)越性在于，通過分類并同時顯示四個面板，用戶點擊次數(shù)少，光標(biāo)的移動距離短，大大提高了工作效率。
再比如 Spotify 底欄的探索頁簽，點擊會進入音樂探索頁面（頂部有搜索框），雙擊會直接進入搜索框，長按則會激活語音助手。這些定制化交互的特點在于，它們巧妙地簡化了操作流程，但是用戶不知道也絲毫不影響使用。
四. 補救意外情況
4.1 空狀態(tài)引導(dǎo)
一個列表出現(xiàn)空狀態(tài)的可能性有：
- 確實沒有條目：如果能添加的話，可以提示用戶如何添加。
- 應(yīng)用了過多篩選器：提示用戶嘗試其他篩選方式或重置篩選器。
- 加載異常：提示用戶刷新頁面。
雖然后果一樣，但問題本質(zhì)不同，解決方式自然也不同，此時需要分別給出對應(yīng)的引導(dǎo)。
4.2 異常引導(dǎo)
再沒有什么比一行“操作失敗”的提示更讓人絕望，用戶不知道哪出了問題，也不清楚如何解決。異常流程時有發(fā)生，此時系統(tǒng)的引導(dǎo)會起到至關(guān)重要的作用，它能夠帶用戶走回正軌，減少無助感。
4.3 標(biāo)明功能不可用的原因
該問題的重災(zāi)區(qū)是工具類軟件，用著用著一些功能突然就灰掉了，只能慢慢摸索是哪里的問題。功能之所以不可用肯定有個原因，不論是直接顯示還是鼠標(biāo)懸停時顯示，有必要要讓用戶明白原由或者如何解決，避免把用戶困在死胡同。
4.4 提供幫助
新手教程特別考驗用戶的記憶力，尤其是在新接觸軟件的學(xué)習(xí)爬坡階段，而且很難保證在一段時間不用后，用戶還能記得如何操作。當(dāng)系統(tǒng)引入了晦澀概念或復(fù)雜交互時，最好在該功能周圍提供說明，或懸停時展示 tooltip. 使用戶無需長期記憶，在用到該功能時又可以快速上手。
我曾經(jīng)寫過一篇介紹 Protopie 的文章，慚愧的說，由于日常項目中的交互大多比較基礎(chǔ)，其實用到 Protopie 的并不是很多，重新打開難免手生。但這款軟件界面上可以見到很多問號圖標(biāo)，點擊即可跳轉(zhuǎn)到詳細(xì)的功能講解文檔，不論是對于新人上手還是發(fā)掘軟件功能都很有幫助。
結(jié)語
圖形界面的本質(zhì)是人與機器交流的語言。與現(xiàn)實生活一樣，我們傾向與禮貌體貼的對象溝通。所以下手設(shè)計時要盡最大可能從人類的本性出發(fā)，才能在業(yè)務(wù)和產(chǎn)品邏輯的限制下，為用戶塑造更具親和力的界面模型。
注：文章中均為設(shè)計時遇到的真實案例，為脫敏隱去了細(xì)節(jié)。三種模型和界面范式的內(nèi)容整理自 About Face，分別在14頁和240頁, 有興趣可以詳細(xì)閱讀了解。
原文地址：京東設(shè)計中心JDC（公眾號）
作者：邢禹
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》引起舒適！什么是好用的界面
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)