?????? 我們發(fā)現(xiàn)，對(duì)后臺(tái)設(shè)計(jì)的技巧通常不會(huì)像普通網(wǎng)頁(yè)布局設(shè)計(jì)那樣公開分享。這是因?yàn)槲覀兺ǔ：茈y在網(wǎng)絡(luò)上找到后臺(tái)的一些樣例。由于要進(jìn)入后臺(tái)界面都需要賬戶和密碼，所以很多設(shè)計(jì)師只能從其他樣例中探尋設(shè)計(jì)趨勢(shì)。但是對(duì)于管理者來(lái)說(shuō)，后臺(tái)儀表板的界面布局已經(jīng)形成一種通用的風(fēng)格了。
?????? 在本文中，作者希望和大家一起探究dashboard的布局多樣性及其設(shè)計(jì)理念。大多數(shù)典型網(wǎng)站的布局都是通過(guò)Html/CSS來(lái)搭建的。但網(wǎng)站管理者和用戶不一樣，他們只需要設(shè)置網(wǎng)頁(yè)、套用模板或者更新內(nèi)容頁(yè)面。那相對(duì)特殊的管理后臺(tái)設(shè)計(jì)是怎樣呢？作者就打算對(duì)后臺(tái)管理的設(shè)計(jì)進(jìn)行討論。
Tab 標(biāo)簽導(dǎo)航
?????? 利用Tab標(biāo)簽作為網(wǎng)站導(dǎo)航一直是多年來(lái)的流行趨勢(shì)。它在后臺(tái)界面表現(xiàn)如此良好的原因是，我們通常會(huì)把相似的工具放置在一個(gè)區(qū)塊下。使用同一水平或垂直線上的選項(xiàng)卡菜單可以容納大量的相關(guān)的子菜單位置，以承載大量的鏈接。
?????? 任何形式的Tab鏈接都可以為導(dǎo)航服務(wù)。你不必過(guò)多地考慮標(biāo)簽的常用圓角或在界面上的視覺設(shè)計(jì)，通常運(yùn)用的就是簡(jiǎn)單的文字鏈接或者運(yùn)用一些背景和icon。這能夠幫助用戶決定某個(gè)鏈接將會(huì)鏈到管理界面的哪個(gè)模塊池。Tab導(dǎo)航的呈現(xiàn)通常一閃而過(guò)，運(yùn)用字體加粗或者放大，能夠讓選中的Tab標(biāo)簽在導(dǎo)航欄中脫穎而出。
????? 并不是說(shuō)控制板塊的導(dǎo)航都是要用Tab標(biāo)簽的形式。當(dāng)我們看WordPress的管理界面時(shí)，它看起來(lái)更像一個(gè)列表組，而不是Tab導(dǎo)航。而WordPress是一個(gè)非常出名的CMS管理系統(tǒng)，這就說(shuō)明任何形式的導(dǎo)航都能發(fā)揮它的作用。一個(gè)比較好的思路，是先規(guī)劃出一個(gè)站點(diǎn)地圖及其鏈接的對(duì)象，再根據(jù)這個(gè)思路對(duì)鏈接項(xiàng)進(jìn)行整合。
工具欄圖標(biāo)
????? 作者之前簡(jiǎn)要地提到過(guò)關(guān)于icon的設(shè)計(jì)，其實(shí)在他看來(lái)icon是導(dǎo)航欄中非常重要且容易出彩的元素。icon能夠?qū)ζ滏溄踊蛱D(zhuǎn)的內(nèi)容頁(yè)進(jìn)行圖像化的表征。文本則需要大腦花費(fèi)更多的時(shí)間去進(jìn)行識(shí)別和加工其含義，而圖形更直觀和簡(jiǎn)潔。我認(rèn)為icon應(yīng)該被包含在界面元素諸如：按鈕、表格、頁(yè)頭、輸入?yún)^(qū)或者頁(yè)面上任何可能引起人困惑的區(qū)域。
?????? 現(xiàn)代設(shè)計(jì)師們更容易搭建頁(yè)面，因?yàn)橛泻芏嗝赓M(fèi)開放的圖標(biāo)可供下載。有很多根據(jù)不同主題、不同技法和不同設(shè)計(jì)風(fēng)格的收藏集，你能毫不費(fèi)力地找到一套icon用于你的后臺(tái)界面。你可以通過(guò)合理的icon擺放，讓用戶能夠在繁雜的內(nèi)容信息頁(yè)面快速瀏覽，并且有益于視覺表現(xiàn)。
彈出懸停菜單
??????? 當(dāng)你需要展示更多的輸入內(nèi)容或者明細(xì)介紹，而頁(yè)面上又實(shí)在沒有足夠的空間。在初始加載時(shí)適當(dāng)隱藏，當(dāng)鼠標(biāo)移入時(shí)以彈出菜單的形式來(lái)展示，不失為一個(gè)好辦法。通常通過(guò)點(diǎn)擊頁(yè)面上的某個(gè)鏈接或按鈕來(lái)觸發(fā)。
??????? 你也可以在頁(yè)面上運(yùn)用彈出懸停菜單用來(lái)隱藏于輸入字段相關(guān)的一些數(shù)據(jù)。網(wǎng)站管理員通常有大量的編輯頁(yè)面或編寫內(nèi)容的工作，這就需要花很多耐心和心思把很多內(nèi)容聚合在一起。很顯然一個(gè)彈出框會(huì)包含很多內(nèi)容，甚至包含一些流行的窗口樣式和陰影效果。
?????? 我真的非常喜歡上面提到的這個(gè)被標(biāo)記為芒果管理的。當(dāng)你鼠標(biāo)移入這個(gè)message鏈接按鈕時(shí)，會(huì)展示幾條具體的message概要。這還可以類似地運(yùn)用在擴(kuò)展諸如發(fā)送、草稿、用戶評(píng)論和一些涵蓋大量列表數(shù)據(jù)的功能。任何典型的CMS系統(tǒng)都需要一些內(nèi)容管理功能,以確保一切正常運(yùn)轉(zhuǎn)順利。將頁(yè)面上這些內(nèi)容重新組合，適時(shí)隱藏和展示，能夠給擁擠的頁(yè)面騰出很多位置。
內(nèi)容樣式顯示
????? 多種多樣的后臺(tái)管理系統(tǒng)，歸根到底都有一個(gè)最基本的目的，就是信息的展示。其實(shí)像什么表單、列表、按鈕、圖形這些統(tǒng)統(tǒng)都可以稱為“內(nèi)容”。整個(gè)布局的設(shè)計(jì)一般都是為了將信息整合組裝，以便于更好地閱讀和編輯。
????? 我喜歡那些表單中的小icon，它們能讓你快速發(fā)現(xiàn)哪些是可訪問(wèn)的按鈕。你可以快速添加、編輯或刪除表的行中的內(nèi)容。圖形的特征和顏色，能夠讓用戶一樣明白他需要做什么。當(dāng)然,這只是一個(gè)簡(jiǎn)單的例子,但很難找到這樣的趨勢(shì)。多去思考和創(chuàng)新，才能讓你設(shè)計(jì)出來(lái)的后臺(tái)更簡(jiǎn)潔易用。
?????? 值得一提是,并不是所有的管理界面都需要圖形、圖表或是統(tǒng)計(jì)數(shù)據(jù)。有時(shí)你只需直接處理信息。盡管有可能有些枯燥，但是你必須想好如何處理數(shù)據(jù)的交互。這時(shí)候你會(huì)發(fā)現(xiàn)考慮用戶的認(rèn)知是一個(gè)挑戰(zhàn)。無(wú)論嘗試多少次新的想法都是值得的，要知道沒有人能進(jìn)行最完美的界面設(shè)計(jì)，新的設(shè)計(jì)走向永遠(yuǎn)是即將到來(lái)的。
樣例展示
?????? 本文中展示的所有設(shè)計(jì)樣例都是只為了給設(shè)計(jì)師們拋磚引玉。但我相信大家能夠從大量的案例中獲得一些后臺(tái)界面設(shè)計(jì)的通用知識(shí)。這里一些整理過(guò)的精美后臺(tái)設(shè)計(jì)模板?供大家自取。從中您可能會(huì)發(fā)現(xiàn)一些和我所說(shuō)的一樣設(shè)計(jì)走向，又或者您能從中發(fā)現(xiàn)新的點(diǎn)子用在您自己的設(shè)計(jì)中。
（翻譯僅出于興趣，歡迎共同學(xué)習(xí)，互相交流）
原文地址：https://speckyboy.com/user-experience-trends-for-admin-dashboards/
