在許多方面荆几，一個(gè)主控面板（或叫儀表盤，本文統(tǒng)一采用“主控面板”）就像一塊數(shù)字設(shè)備的屏幕 ——在其表象之下其實(shí)發(fā)生了許多活動(dòng)赊时，但作為用戶吨铸，我們不知道這樣的活動(dòng)，只是相信我們所看到的祖秒。

有多少人知道甚至關(guān)心在手機(jī)屏幕上要顯示電池的狀態(tài)到底需要調(diào)用多少系統(tǒng)級(jí)功能诞吱？但是舟奠，一旦電池標(biāo)志變?yōu)榧t色，我們很快就能明白房维，如果還不充電沼瘫，設(shè)備很快就無(wú)法使用了。類似的例子舉不勝舉咙俩，于是我們不得不意識(shí)到耿戚，隨著時(shí)間的推移，我們的一些認(rèn)知和判斷都開始依賴系統(tǒng)設(shè)計(jì)了阿趁。

當(dāng)談到B2B/SaaS產(chǎn)品時(shí)膜蛔，可以說(shuō)主控面板就是其系統(tǒng)的生命線，因?yàn)樗强蛻襞c之交互的主要對(duì)外接口脖阵。雖然一個(gè)主控面板封裝了底層系統(tǒng)的復(fù)雜性皂股，但它的成功真正在于它如何有意義地將KPI傳遞給客戶，如何作為一個(gè)可靠的信息來(lái)源的以及如何使客戶的工作更加高效独撇。

在這篇文章中屑墨，我想分享一下作為一個(gè)好學(xué)的產(chǎn)品經(jīng)理，在缺乏專業(yè)設(shè)計(jì)師指導(dǎo)的情況下纷铣，你如何應(yīng)用Jakob Nielsen的10條可用性原則（啟發(fā)式方法）評(píng)估你的SaaS類產(chǎn)品的主控面板的設(shè)計(jì)卵史。

接下來(lái)，讓我們來(lái)看看這10條啟發(fā)式方法是什么搜立，以及各種控制面板的設(shè)計(jì)中是如何應(yīng)用它們的以躯。

1、系統(tǒng)狀態(tài)具有可見(jiàn)性

系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答佔挠唬冀K向用戶通知正在發(fā)生的情況忧设。

在儀表板的上下文中，應(yīng)該預(yù)先顯示對(duì)用戶最重要的信息颠通。根據(jù)您的產(chǎn)品所面向的客戶類型址晕，這些信息可能是數(shù)字型的——幫助用戶可視化他們需要經(jīng)常通過(guò)圖表追蹤的一些指標(biāo)，或是文本型的——使用摘要文字告訴他們關(guān)鍵信息顿锰。

由于店主們主要使用Shopify來(lái)在線售賣實(shí)體產(chǎn)品谨垃，因此Shopify的主控面板就用來(lái)告訴店主他們的銷售情況究竟如何，比如店主們登錄進(jìn)來(lái)就能立刻看到他們的銷售額硼控、訂單量和付款數(shù)量等信息刘陶。

Basecamp的主頁(yè)通過(guò)由標(biāo)題、簡(jiǎn)要說(shuō)明以及成員列表構(gòu)成的一個(gè)個(gè)卡片讓用戶能夠統(tǒng)覽不同的團(tuán)隊(duì)和項(xiàng)目牢撼。這些卡片反過(guò)來(lái)又作為網(wǎng)站中不同區(qū)塊的入口匙隔。

2、系統(tǒng)和現(xiàn)實(shí)世界要貼切匹配

系統(tǒng)應(yīng)該說(shuō)人人都能理解的話熏版，使用用戶熟悉的詞語(yǔ)纷责、短語(yǔ)以及概念捍掺，而不是拿系統(tǒng)導(dǎo)向的術(shù)語(yǔ)來(lái)為難用戶。要遵循真實(shí)世界的約定再膳，使其傳達(dá)的信息以符合自然語(yǔ)言的邏輯乡小。

Hubspot 使用訪問(wèn)量、聯(lián)系人饵史、客戶满钟、登錄頁(yè)、轉(zhuǎn)換率胳喷、瀏覽量以及提交等關(guān)鍵詞向他們的核心用戶——市場(chǎng)營(yíng)銷者傳達(dá)關(guān)鍵信息湃番。

Localytics——另外一個(gè)營(yíng)銷自動(dòng)化產(chǎn)品，則使用了諸如用戶終身價(jià)值吭露、每用戶平均收入吠撮、購(gòu)買頻率、增長(zhǎng)率以及付費(fèi)用戶等營(yíng)銷者每天都在使用的詞匯讲竿。

3泥兰、給用戶控制權(quán)

實(shí)際上，用戶在選擇系統(tǒng)功能時(shí)經(jīng)常出錯(cuò)题禀，他們需要一個(gè)足夠清晰的“緊急出口”以快速的離開并非他們當(dāng)前想要的狀態(tài)鞋诗，而不必非得通過(guò)其他擴(kuò)展對(duì)話。另外迈嘹，應(yīng)該支持撤消和重做削彬。

Mailchimp用戶可以通過(guò)點(diǎn)擊標(biāo)記清楚的“保存并退出”按鈕離開模板創(chuàng)建工作流程。 此外秀仲，用戶可以“保存并關(guān)閉”模板的單獨(dú)組件融痛，例如文本塊和圖片模塊; 另外還支持了查看上次保存的時(shí)間戳以及撤消和重做。

Freshbooks 用戶可以在生成一個(gè)新發(fā)票的過(guò)程中通過(guò)取消雁刷、保存和退出按鈕回到主控面板保礼。這幾個(gè)按鈕的尺寸沛励、樣式和布局使用戶很容易注意到氓英。

4侯勉、保持一致性并符合一定標(biāo)準(zhǔn)

用戶不應(yīng)該還得花時(shí)間思考不同的措辭铝阐、情況或動(dòng)作是否意味著相同的事情铐拐。要遵循平臺(tái)的慣例徘键。

用戶在一個(gè)平臺(tái)上花費(fèi)的時(shí)間越多练对，他們的心智模型也會(huì)變得越來(lái)越成熟。 而隨著過(guò)去幾年中平臺(tái)的數(shù)量有所增長(zhǎng)螟凭，要應(yīng)用這個(gè)啟發(fā)式也就變得更加有挑戰(zhàn)性它呀。

這條啟發(fā)式在于兩方面：

（1）一個(gè)產(chǎn)品的主控面板在不同平臺(tái)間應(yīng)該保持一致性，包括用戶界面纵穿、措辭以及動(dòng)作等都應(yīng)該看起來(lái)熟悉的。

BlueJeans是一個(gè)企業(yè)在線視頻會(huì)議服務(wù)平臺(tái)淆院，它在不同的平臺(tái)（無(wú)論是網(wǎng)絡(luò)，桌面還是移動(dòng)）上向用戶顯示三個(gè)標(biāo)準(zhǔn)的號(hào)召性按鈕（“安排會(huì)議”土辩，“加入會(huì)議”抢野，“開始我的會(huì)議”），營(yíng)造了很好的一致性指孤。 作為一個(gè)用戶，當(dāng)你看到不同平臺(tái)的用戶界面時(shí)——按鈕的數(shù)量和他們的名字保持相同逝嚎，自然會(huì)產(chǎn)生一種似曾相識(shí)的感覺(jué)详恼，用起來(lái)也是得心應(yīng)手。

（2）無(wú)論是用在哪個(gè)平臺(tái)挽铁，主控面版的設(shè)計(jì)都應(yīng)該遵循當(dāng)前平臺(tái)的設(shè)計(jì)準(zhǔn)則敞掘。

在Android和iOS平臺(tái)上，Buffer提供了相同的功能玖雁，但UI卻不同更扁，因?yàn)檫@兩個(gè)應(yīng)用程序都遵循了各自平臺(tái)的設(shè)計(jì)準(zhǔn)則。在Android上，你會(huì)看到諸如漢堡包和溢出菜單浓镜、卡片溃列、懸浮按鈕等組件，而在iOS上膛薛，您看到的會(huì)是標(biāo)簽欄听隐、導(dǎo)航欄以及選擇器等哄啄。

5、預(yù)見(jiàn)性防錯(cuò)

相比于錯(cuò)誤發(fā)生后顯示一條錯(cuò)誤消息椿访，通過(guò)更細(xì)致的設(shè)計(jì)能在第一時(shí)間防止問(wèn)題發(fā)生顯然是更好的做法虑润。要么消除容易出錯(cuò)的條件，要么檢查它們哭当，并在用戶提交操作之前向用戶顯示確認(rèn)選項(xiàng)冗澈。

當(dāng)然了，一些基本的處理方法彻采，比如表單校驗(yàn)捌归、輸入類型和范圍的檢查、錯(cuò)誤消息和幫助文本的提示都可以很好地發(fā)揮作用特笋，但是難道就不能在用戶可能犯錯(cuò)誤時(shí)就預(yù)防某些情況的出現(xiàn)嗎巾兆？ 具有前瞻性的設(shè)計(jì)方案既可以幫助用戶避免令其挫敗沮喪的體驗(yàn)，又能夠反映出一個(gè)設(shè)計(jì)師對(duì)用戶的同理心蔫磨。

JIRA 在用戶創(chuàng)建一個(gè)事務(wù)時(shí)強(qiáng)制性的要求選擇一個(gè)受托人圃伶。然而很多時(shí)候蒲列，用戶批量的添加事務(wù)時(shí)，他們也不會(huì)事先搞清楚究竟誰(shuí)將負(fù)責(zé)處理這個(gè)事務(wù)炼邀。 JIRA幫助用戶提供兩種類型的默認(rèn)默認(rèn)：a拭宁、自動(dòng)分配事務(wù)，通常是給管理員或版主或當(dāng)前用戶杰标，b腔剂、提供一個(gè)名為“分配給我”的鏈接，也就是將該任務(wù)分配給該事務(wù)的報(bào)告人掸犬。

只要用戶嘗試向5個(gè)或更多團(tuán)隊(duì)成員發(fā)布通知時(shí)湾碎，Slack就會(huì)顯示警告消息。警告通過(guò)尋求用戶的確認(rèn)來(lái)防止錯(cuò)誤地發(fā)布通知座掘。

6柔滔、關(guān)鍵信息擺上臺(tái)面

通過(guò)保持系統(tǒng)對(duì)象睛廊、操作和選項(xiàng)可見(jiàn)，最小化用戶的記憶負(fù)載喉前。用戶不應(yīng)該還需要記住從跟系統(tǒng)對(duì)話的一個(gè)地方到另一個(gè)地方的信息卵迂。在適當(dāng)?shù)臅r(shí)候，系統(tǒng)的使用說(shuō)明應(yīng)該是可見(jiàn)的或容易檢索的见咒。

這種啟發(fā)式的經(jīng)典例證是文本編輯器中常見(jiàn)的字體下拉列表。 從用戶認(rèn)知上來(lái)說(shuō)下翎，區(qū)分識(shí)別一個(gè)字體名稱使用了其本身代表的樣式的字體顯然更加容易视事，而不是所有字體名稱都采用相同樣式，用戶還需要自己去把字體名稱跟樣式靠記憶一一對(duì)應(yīng)起來(lái)跌穗。

這樣的視覺(jué)提示對(duì)于減少用戶在檢索信息上付出的腦力勞動(dòng)有很大的幫助虏辫。

JIRA直接在系統(tǒng)主控面板上顯示分配給一個(gè)用戶的事務(wù)流， 這有助于用戶快速導(dǎo)航到相關(guān)事務(wù)項(xiàng)羹唠，而不需要再花費(fèi)時(shí)間和精力去應(yīng)用過(guò)濾器來(lái)查找娄昆。

在Trello中稿黄，用戶回看一個(gè)板子和卡片時(shí)，他們不需要去回想之前都做了哪些改動(dòng)族购，Trello自動(dòng)幫助用戶保存了其更改日志陵珍，讓用戶一目了然。

7瑟幕、靈活高效

“加速器” ——新手用戶往往看不到——但通沉袅剩可以提高專家用戶跟系統(tǒng)間的交互效率，這就使得系統(tǒng)既滿足了新手用戶的基本使用又從一定程度上迎合了有經(jīng)驗(yàn)的用戶的更高級(jí)的需求殖卑。 另外坊萝，要允許用戶能自定義一些比較頻繁的操作许起。

“加速器”其實(shí)就是一些相對(duì)高級(jí)的功能园细，比如鍵盤快捷鍵功能接校，對(duì)于相對(duì)專業(yè)的用戶而言，無(wú)疑是一個(gè)提升工作效率的利器伦乔。不過(guò)請(qǐng)注意董习，這里并不是說(shuō)面向?qū)＜矣脩魰?huì)提供額外的功能爱只，而是說(shuō)在使用一個(gè)相同的功能時(shí)，提供一個(gè)更佳的體驗(yàn)給這群用戶以提高他們的生產(chǎn)率窝趣。

UXPin 會(huì)在用戶將鼠標(biāo)光標(biāo)移動(dòng)至一個(gè)按鈕上時(shí)顯示其對(duì)應(yīng)的快捷鍵训柴，從而讓專家用戶使用起來(lái)更有效率。

定期使用Meetup并且非常依賴個(gè)人日歷的專家用戶可以將設(shè)定的會(huì)面時(shí)間與各種其他服務(wù)（例如Google日歷洗鸵，iCal）進(jìn)行同步膘滨，而新手用戶則可以通過(guò)主控面板的日歷小部件查看即將到來(lái)的會(huì)面時(shí)間稀拐。

8、兼具美學(xué)設(shè)計(jì)和極簡(jiǎn)設(shè)計(jì)

跟用戶的對(duì)話不應(yīng)該包含不相關(guān)或很少需要的信息铲咨。對(duì)話中的每一個(gè)額外的信息單元都會(huì)與相關(guān)信息單元有競(jìng)爭(zhēng)關(guān)系蜓洪，會(huì)降低它們的相對(duì)可見(jiàn)性蝠咆。

Mailchimp的電子郵件模板部分僅包含用戶選擇一個(gè)模板的足夠信息——用戶可以通過(guò)查看模板名稱和線框圖來(lái)區(qū)分各種模板北滥。 該設(shè)計(jì)采用最小的灰度色調(diào)闸翅，留有充足的空白和一個(gè)容易理解的視覺(jué)層次。

SoundCloud 的統(tǒng)計(jì)頁(yè)面為藝術(shù)家提供了豐富的信息济赎，這些信息可以清楚地辨別记某，因?yàn)樗?i>的頁(yè)面結(jié)構(gòu)通過(guò)交互式圖表液南、列表、關(guān)鍵色和留白等要素組織得很好滑凉。

9畅姊、幫助用戶識(shí)別、診斷和恢復(fù)錯(cuò)誤

錯(cuò)誤消息應(yīng)以簡(jiǎn)明的語(yǔ)言（無(wú)代碼）表示朱嘴，準(zhǔn)確地指出問(wèn)題所在粗合，并建設(shè)性地提出解決方案。

在用戶嘗試將Trello與Slack集成時(shí)帚湘，如果他不屬于某個(gè)團(tuán)隊(duì)甚淡，則會(huì)顯示一條以簡(jiǎn)明扼要的錯(cuò)誤消息，既描述了問(wèn)題所在资柔，又提供了解決方案撵割。

如果系統(tǒng)跟服務(wù)器斷開啡彬，Asana會(huì)將屏幕半遮蓋使其處于非活躍狀態(tài)故硅，并顯示一個(gè)明亮的彈出消息纵搁，告訴用戶當(dāng)前發(fā)生的錯(cuò)誤并顯示Asana正在恢復(fù)的狀態(tài)以及一個(gè)找到更多可能原因詳細(xì)信息的鏈接。

10徘层、提供適時(shí)的幫助

盡管一個(gè)好的系統(tǒng)即使沒(méi)有任何幫助文檔也應(yīng)該可以使用趣效，但提供相關(guān)的幫助說(shuō)明或文檔還是有必要的猪贪。 任何這樣的信息都應(yīng)該容易搜索到，而且關(guān)注于用戶任務(wù)哮伟，列出具體的步驟楞黄，并且篇幅不要太大抡驼，保持簡(jiǎn)潔。

Wordpress Help 組件貫穿于所有頁(yè)面——它易于發(fā)現(xiàn)碎税，關(guān)聯(lián)于用戶當(dāng)前所處的頁(yè)面和選取馏锡，內(nèi)容簡(jiǎn)介且能夠根據(jù)用戶需要展開或收縮。

Mixpanel 在用戶開始填充文本字段時(shí)顯示簡(jiǎn)短匪煌、有用和相關(guān)的幫助消息党巾。

最后齿拂，不妨思考下你遇到過(guò)的最喜歡的主控面板的設(shè)計(jì)方案是什么樣的？你認(rèn)為它們有沒(méi)有或是如何應(yīng)用本文提到的這些啟發(fā)式方法的吗购？不妨留言分享。

譯自：https://rahulgulati.com/designing-a-usable-dashboard-896f50636841#.6q2f66xyh

話不多說(shuō)昨登，喜歡請(qǐng)點(diǎn)贊贯底！