什么樣的界面算好用?

用戶覺(jué)得軟件不好用通常是由于操作界面不符合常識(shí)，交互邏輯出人意料導(dǎo)致的。

這里我們要引入三個(gè)模型的概念:實(shí)現(xiàn)模型，心理模型和呈現(xiàn)模型。

設(shè)計(jì)師要理解業(yè)務(wù)訴求?

用戶是真的想要一匹很快的馬嗎？或許吧。

然后福特就發(fā)明了汽車(chē)，很好的滿足了的客戶的需求。

嗯！這個(gè)可能是一個(gè)很好的滿足了這個(gè)客戶以及一群客戶的需求。

這個(gè)故事告訴我們，我們需要挖掘客戶真正想要的東西，而不是停留在現(xiàn)有客戶所說(shuō)事物的表面，傻傻去找一匹很快的“馬”。

接到需求后產(chǎn)品經(jīng)理一般會(huì)在PRD評(píng)審時(shí)向設(shè)計(jì)側(cè)講解需求背景和功能邏輯，在這個(gè)階段我們可以了解到產(chǎn)品經(jīng)理規(guī)劃中的用戶流程和使用方式。產(chǎn)品原型呈現(xiàn)的只是無(wú)數(shù)解決方案中的一種，了解了業(yè)務(wù)訴求再回顧原型方案，經(jīng)?？梢詭?lái)全新的視野，并由此推導(dǎo)設(shè)計(jì)方案。

下面我們就看下如何從組件，結(jié)構(gòu)，功能，狀態(tài)幾個(gè)層面解決設(shè)計(jì)問(wèn)題。

一.明確功能用途

1.1 信達(dá)雅的文案

文案是界面的重要構(gòu)成，卻是界面設(shè)計(jì)中最不被重視的一部分。很多軟件之所以用起來(lái)有一層朦朧的隔閡感，罪魁禍?zhǔn)拙褪腔逎奈陌?。?jiǎn)單的糾正文案可能會(huì)帶來(lái)煥然一新的使用感受。

• 信:語(yǔ)義準(zhǔn)確，明確事件的主體客體。
• 達(dá):避免無(wú)效或重復(fù)文案，減少被動(dòng)語(yǔ)態(tài)，簡(jiǎn)潔通順地進(jìn)行描述。
• 雅:優(yōu)雅且有涵養(yǎng)地與用戶溝通。
• 配圖:有些流程或者用詞比較特殊，單用語(yǔ)言難以描述，配上圖一目了然。

1.2 視覺(jué)線索

圖形用戶界面誕生之初，界面元素對(duì)物理世界的模擬是為了便于用戶將現(xiàn)實(shí)中的常識(shí)套用到虛擬界面上:擬物化通過(guò)質(zhì)感暗示用戶界面的交互方式;在扁平化時(shí)代，提供視覺(jué)線索仍然是必要的原則。拿拖拽操作來(lái)說(shuō)，首先可以拖動(dòng)的組件上要有把手，暗示可以撿起。組件被拿起來(lái)時(shí)要明顯擴(kuò)大的投影樣式描繪高度，并在列表中顯示一條瞄準(zhǔn)線便于用戶精確定位。

再比如卡片式設(shè)計(jì)，和現(xiàn)實(shí)中的卡片相同，它可以明確地劃分出功能和信息的關(guān)系。要注意的是，視覺(jué)分區(qū)越多，頁(yè)面復(fù)雜度越高，設(shè)計(jì)時(shí)需要控制平衡。

1.3 熟悉的組件

用戶點(diǎn)擊下拉選擇器的時(shí)候，自然會(huì)期望在周?chē)鷱楅_(kāi)一個(gè)選項(xiàng)浮層，因?yàn)樗麄冇眠^(guò)的所有軟件交互都是這樣。這個(gè)就是習(xí)慣用法范式的應(yīng)用（盡可能套用常規(guī)的交互方式讓軟件的操作容易預(yù)測(cè)，用戶理解成本低）。

然而在常規(guī)組件無(wú)法承載實(shí)際需求時(shí)，有必要跳出慣用范式，通過(guò)差異的視覺(jué)樣式給用戶思想準(zhǔn)備。例如一些原型圖中的選擇器使用了下拉的樣式，觸發(fā)的卻是選擇抽屜或者彈窗。這種意外的發(fā)生或多或少會(huì)降低用戶使用時(shí)的信心，因?yàn)樗麄冊(cè)僖膊淮_定點(diǎn)擊下拉后會(huì)發(fā)生什么。通過(guò)特殊與常規(guī)的區(qū)分，其實(shí)也維護(hù)了慣用范式的一致性。

你一定遇到過(guò)這種棘手的原型:頁(yè)面導(dǎo)航又多又深，林林總總地鋪酒在導(dǎo)航區(qū)和功能區(qū)，信息密度堪比柯林斯英漢辭典。頁(yè)面導(dǎo)航是界面的基本框架，處理系統(tǒng)的導(dǎo)航方式是頁(yè)面設(shè)計(jì)早期就需要完成的工作。

二. 幾種反例

• 主導(dǎo)航級(jí)數(shù)過(guò)多:視覺(jué)樣式復(fù)雜，操作時(shí)需要頻繁卷展。
• 內(nèi)容區(qū)頭部導(dǎo)航堆積:用戶先看到的不是內(nèi)容而是導(dǎo)航，瀏覽效率較低
• 橫向?qū)Ш椒峙洳缓侠恚翰缓侠淼慕Y(jié)構(gòu)會(huì)影響視線掃描和點(diǎn)選，且空間利用率低。以圖中的結(jié)構(gòu)為例，一級(jí)導(dǎo)航下不一定都會(huì)有二級(jí)或三級(jí)導(dǎo)航，就會(huì)導(dǎo)致頁(yè)面版式差異過(guò)大。

2.1 控制一級(jí)導(dǎo)航深度

一級(jí)導(dǎo)航過(guò)深時(shí)，有必要進(jìn)行降級(jí)。頂欄導(dǎo)航可以向邊欄導(dǎo)航轉(zhuǎn)移。邊欄導(dǎo)航是一級(jí)時(shí)，可將最低級(jí)的導(dǎo)航放到內(nèi)容區(qū)吸頂;若層級(jí)仍然不夠用或?qū)Ш綏l目較多，可以再增加一個(gè)縱向?qū)Ш健?/p>

2.2 平衡內(nèi)容區(qū)導(dǎo)航

吸頂導(dǎo)航會(huì)占用內(nèi)容區(qū)的縱向空間，但可以隨時(shí)跳轉(zhuǎn)。

內(nèi)容區(qū)內(nèi)的導(dǎo)航性質(zhì)更類(lèi)似于篩選，能夠隨內(nèi)容滾，不便于隨時(shí)切換。

頁(yè)簽類(lèi)型區(qū)別大或是需要切換對(duì)比時(shí)，可以將導(dǎo)航吸頂;頁(yè)簽下內(nèi)容形式近似或需要更多瀏覽空間時(shí)，可以將導(dǎo)航放在內(nèi)容區(qū)。

2.3 減少空間浪費(fèi)

很多原型會(huì)習(xí)慣性地在頁(yè)面頂部配置一個(gè)頂欄。實(shí)際上里面的商標(biāo)，賬戶信息，設(shè)置等功能可以整合到邊欄中，這樣內(nèi)容區(qū)上方會(huì)多一些縱向空間。

三.合理布置功能

3.1分級(jí)展示功能

比如一些的圖表類(lèi)頁(yè)面主要用于瀏覽而不是編輯，這種情況下將操作隱藏到省略號(hào)或者漢堡菜單中，不僅可以減少信息干擾，還能避免誤操作。

高級(jí)功能的隱藏很好理解，比如 macOS 的網(wǎng)絡(luò)配置只顯示基礎(chǔ)的連接功能，DNS 配置等高級(jí)操作被整理到了一個(gè)按鈕中。你可以想象如果所有的配置項(xiàng)都展示一個(gè)頁(yè)面，對(duì)于用戶日常聯(lián)網(wǎng)操作會(huì)有多么不友好。

3.2 拆分功能

除了分級(jí)，當(dāng)頁(yè)面或區(qū)域內(nèi)的功能過(guò)于集中時(shí)，可以進(jìn)行拆分以降低信息壓力。

分離檢索與查看:列表同時(shí)兼具瀏覽與管理的功能，但在字段眾多，空間有限的情況下，可以選擇其中有代表性的字段在單元行中顯示，便于快速掃描和管理，完整的單元行信息放到下一個(gè)層級(jí)顯示。

分離表單區(qū)塊:當(dāng)表單存在區(qū)塊表單時(shí)，可以只在表單中顯示區(qū)塊的預(yù)覽，將區(qū)塊的新增和配置放到抽屜中進(jìn)行，由此減少功能堆積。

3.3 數(shù)據(jù)的編輯

涉及數(shù)據(jù)編輯的頁(yè)面存在四種設(shè)計(jì)方式，需要綜合考慮表單的數(shù)量，用戶的操作頻次和使用方式來(lái)判斷采用哪種。

查看模式:帶查看模式的頁(yè)面視覺(jué)效果整齊，信息干擾最小，且不會(huì)誤操作。但需要進(jìn)入編輯模式修改頁(yè)面內(nèi)容。

直接編輯模式:用戶到達(dá)頁(yè)面時(shí)，數(shù)據(jù)就可以被修改生效。常見(jiàn)于設(shè)置類(lèi)頁(yè)面。該模式使用效率最高。但由于容易誤操作且視覺(jué)信息冗雜，不太適合大型表單。

行內(nèi)編輯模式:頁(yè)面樣式類(lèi)似查看模式，當(dāng)鼠標(biāo)懸停在數(shù)據(jù)上，界面會(huì)提示用戶此處可以編輯，用戶點(diǎn)擊后可以快速針對(duì)局部數(shù)據(jù)做修改。該模式只適用表單項(xiàng)少的情況。

實(shí)時(shí)保存:頁(yè)面長(zhǎng)期處于編輯模式，系統(tǒng)會(huì)自動(dòng)保存用戶的操作。常見(jiàn)于線上文檔工具。該模式誤操作風(fēng)險(xiǎn)最高，需要提供版本控制和操作撤回功能。

3.4減輕視覺(jué)壓力

業(yè)務(wù)層面上無(wú)法避免單頁(yè)出現(xiàn)大量表單時(shí)，可以在視覺(jué)上分節(jié)。注意!和真正的分步不同，這里的只是從視覺(jué)層面對(duì)頁(yè)面信息進(jìn)行處理，沒(méi)有流程先后的概念，所以盡可能不要拆分頁(yè)面。

以下圖為例，通過(guò)視覺(jué)上的劃分，即使在同一個(gè)頁(yè)面顯示同樣數(shù)量的表單，版面空間的呼吸給予了用戶喘歇的余地。錨點(diǎn)導(dǎo)航是個(gè)錦上添花的控件，空間允許時(shí)可以加上。

四.補(bǔ)救意外情況

4.1空狀態(tài)引導(dǎo)

一個(gè)列表出現(xiàn)空狀態(tài)的可能性有:

• 確實(shí)沒(méi)有條目:如果能添加的話，可以提示用戶如何添加。
• 應(yīng)用了過(guò)多篩選器:提示用戶嘗試其他篩選方式或重置篩選器。
• 加載異常:提示用戶刷新頁(yè)面。

雖然后果一樣，但問(wèn)題本質(zhì)不同，解決方式自然也不同，此時(shí)需要分別給出對(duì)應(yīng)的引導(dǎo)。

4.2 異常引導(dǎo)

再?zèng)]有什么比一行“操作失敗”的提示更讓人絕望，用戶不知道哪出了問(wèn)題，也不清楚如何解決。異常流程時(shí)有發(fā)生，此時(shí)系統(tǒng)的引導(dǎo)會(huì)起到至關(guān)重要的作用，它能夠帶用戶走回正軌，減少無(wú)助感。

4.3 標(biāo)明功能不可用的原因

該問(wèn)題的重災(zāi)區(qū)是工具類(lèi)軟件，用著用著一些功能突然就灰掉了，只能慢慢摸索是哪里的問(wèn)題。功能之所以不可用肯定有個(gè)原因，不論是直接顯示還是鼠標(biāo)懸停時(shí)顯示，有必要要讓用戶明白原由或者如何解決，避免把用戶困在死胡同。

4.4提供幫助

新手教程特別考驗(yàn)用戶的記憶力，尤其是在新接觸軟件的學(xué)習(xí)爬坡階段，而且很難保證在一段時(shí)間不用后，用戶還能記得如何操作。當(dāng)系統(tǒng)引入了晦澀概念或復(fù)雜交互時(shí)，最好在該功能周?chē)峁┱f(shuō)明，或懸停時(shí)展示 tooltip.使用戶無(wú)需長(zhǎng)期記憶，在用到該功能時(shí)又可以快速上手。

結(jié)語(yǔ)

圖形界面的本質(zhì)是人與機(jī)器交流的語(yǔ)言。與現(xiàn)實(shí)生活一樣，我們傾向與禮貌體貼的對(duì)象溝通。所以下手設(shè)計(jì)時(shí)要盡最大可能從人類(lèi)的本性出發(fā)，才能在業(yè)務(wù)和產(chǎn)品邏輯的限制下，為用戶塑造更具親和力的界面模型。

留白分割≧線性分割≧卡片分割

留白分割定義：指的是只通過(guò)增加間距的方式，利用人的視知覺(jué)原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然的將信息分組。（如上圖）

間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。（如下圖）

使用原則：建議在不影響核心數(shù)據(jù)指標(biāo)的前提下，條目之間盡可能采用留白分割，會(huì)讓界面更清爽，瀏覽更沉浸。

留白分割的分類(lèi)及適用場(chǎng)景：當(dāng)條目信息層次較少（≦2）時(shí)，留白分割是比較合適的，當(dāng)信息層次較多（≧3）時(shí)，留白分割既會(huì)浪費(fèi)空間，也難以達(dá)到一目了然的分割效果。

線性分割定義：用線來(lái)分隔不同的信息內(nèi)容。（大部分APP的分割線是1px粗細(xì)，黑色，不透明度12%）。

使用原則：分割線可以幫助用戶理解頁(yè)面是如何組成的，但過(guò)度使用分割線會(huì)造成視覺(jué)干擾，影響頁(yè)面信息傳達(dá)。

Android系統(tǒng)明確規(guī)定了分割線的使用原則：
1、微妙的：分割線在布局中應(yīng)該很容易被注意到，但又不凸顯。
2、次要的：只有當(dāng)留白不能起到分割作用時(shí)，才采用分分割線。
3、少用的：謹(jǐn)慎使用分割線，用它來(lái)創(chuàng)建分組而不是分割條目。（如下圖）

分類(lèi)及使用場(chǎng)景：
1、通欄分割線：用于分割彼此完全獨(dú)立的內(nèi)容。
2、內(nèi)嵌分割線：用于分割有錨點(diǎn)（頭像或圖標(biāo)）的相關(guān)內(nèi)容。
3、中間分割線：用于分割無(wú)錨點(diǎn)（頭像或圖標(biāo)）的相關(guān)內(nèi)容。

如果為了提高屏效，希望在一屏內(nèi)盡可能多的展示信息，那么同樣的信息布局，分割線帶來(lái)的效果會(huì)更清晰（如下圖）

卡片分割定義：卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①，它可以包含縮略圖②、標(biāo)題③、副標(biāo)題④、副媒體⑤、文本⑥、問(wèn)文字按鈕⑦和圖標(biāo)按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片上。

使用原則：
1、包含的：卡片是一個(gè)可識(shí)別的，單獨(dú)的、包含內(nèi)容的單元。
2、獨(dú)立的：一張卡片可以獨(dú)立存在，而不依賴于上下文環(huán)境。
3、不可分割的：一張卡片不能與另一張合并，也不能拆分成多張卡片。
分類(lèi)及適用場(chǎng)景：
卡片根據(jù)左右是否有邊距，可簡(jiǎn)單分為通欄卡片和非通欄卡片（如下圖）。

從視覺(jué)效果上來(lái)看，由于圓角的聚焦效應(yīng)，非通欄卡片對(duì)于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫(huà)面的分割感會(huì)更強(qiáng)。
1、當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線時(shí)，建議采用卡片分割，讓主題信息層次更加清晰。
2、當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類(lèi)型較多，上下所占空間較大，建議采用卡片分割，以更好的圈定該主題的內(nèi)容范圍，給用戶明確的內(nèi)容邊界感。
3、當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí)，暗示頁(yè)面可以橫向滑動(dòng)時(shí)，需要采用非通欄卡片，利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立可以橫向滑動(dòng)的意識(shí)。

小結(jié)：

• 當(dāng)信息條目復(fù)雜度較低時(shí)，優(yōu)先采用留白分割，視覺(jué)清爽無(wú)干擾。
• 當(dāng)信息條目復(fù)雜度增加，只利用留白分割效果不明顯時(shí)，建議引入線性分割，讓信息層次更清晰且屏效高。
• 當(dāng)信息條目復(fù)雜度進(jìn)一步提升，（比如已經(jīng)有了線性分割，或者有更多操作），需要進(jìn)一步強(qiáng)化信息條目本身的邊界感，建議引入卡片，以強(qiáng)化條目信息的視覺(jué)層次和可操作性。

信息分割本身不是目的，分割方式的選擇是為了讓版面產(chǎn)生清晰的條理性，用悅目的信息秩序來(lái)更好的突出內(nèi)容，達(dá)成最佳的信息傳達(dá)效果，所以決策時(shí)，除了上述細(xì)節(jié)考慮因素，還要考慮整體版面效果和信息傳達(dá)效率。