?????? 我們發(fā)現(xiàn),對后臺設(shè)計的技巧通常不會像普通網(wǎng)頁布局設(shè)計那樣公開分享毒涧。這是因為我們通常很難在網(wǎng)絡(luò)上找到后臺的一些樣例魂拦。由于要進入后臺界面都需要賬戶和密碼,所以很多設(shè)計師只能從其他樣例中探尋設(shè)計趨勢做瞪。但是對于管理者來說对粪,后臺儀表板的界面布局已經(jīng)形成一種通用的風(fēng)格了。
?????? 在本文中穿扳,作者希望和大家一起探究dashboard的布局多樣性及其設(shè)計理念衩侥。大多數(shù)典型網(wǎng)站的布局都是通過Html/CSS來搭建的。但網(wǎng)站管理者和用戶不一樣矛物,他們只需要設(shè)置網(wǎng)頁茫死、套用模板或者更新內(nèi)容頁面。那相對特殊的管理后臺設(shè)計是怎樣呢履羞?作者就打算對后臺管理的設(shè)計進行討論峦萎。
Tab 標(biāo)簽導(dǎo)航
?????? 利用Tab標(biāo)簽作為網(wǎng)站導(dǎo)航一直是多年來的流行趨勢。它在后臺界面表現(xiàn)如此良好的原因是忆首,我們通常會把相似的工具放置在一個區(qū)塊下爱榔。使用同一水平或垂直線上的選項卡菜單可以容納大量的相關(guān)的子菜單位置,以承載大量的鏈接糙及。
?????? 任何形式的Tab鏈接都可以為導(dǎo)航服務(wù)弧腥。你不必過多地考慮標(biāo)簽的常用圓角或在界面上的視覺設(shè)計帐偎,通常運用的就是簡單的文字鏈接或者運用一些背景和icon。這能夠幫助用戶決定某個鏈接將會鏈到管理界面的哪個模塊池。Tab導(dǎo)航的呈現(xiàn)通常一閃而過漂坏,運用字體加粗或者放大蛇耀,能夠讓選中的Tab標(biāo)簽在導(dǎo)航欄中脫穎而出块茁。
????? 并不是說控制板塊的導(dǎo)航都是要用Tab標(biāo)簽的形式癣蟋。當(dāng)我們看WordPress的管理界面時,它看起來更像一個列表組聪蘸,而不是Tab導(dǎo)航宪肖。而WordPress是一個非常出名的CMS管理系統(tǒng)表制,這就說明任何形式的導(dǎo)航都能發(fā)揮它的作用。一個比較好的思路控乾,是先規(guī)劃出一個站點地圖及其鏈接的對象么介,再根據(jù)這個思路對鏈接項進行整合。
工具欄圖標(biāo)
????? 作者之前簡要地提到過關(guān)于icon的設(shè)計阱持,其實在他看來icon是導(dǎo)航欄中非常重要且容易出彩的元素夭拌。icon能夠?qū)ζ滏溄踊蛱D(zhuǎn)的內(nèi)容頁進行圖像化的表征。文本則需要大腦花費更多的時間去進行識別和加工其含義衷咽,而圖形更直觀和簡潔鸽扁。我認(rèn)為icon應(yīng)該被包含在界面元素諸如:按鈕、表格镶骗、頁頭桶现、輸入?yún)^(qū)或者頁面上任何可能引起人困惑的區(qū)域。
?????? 現(xiàn)代設(shè)計師們更容易搭建頁面鼎姊,因為有很多免費開放的圖標(biāo)可供下載骡和。有很多根據(jù)不同主題、不同技法和不同設(shè)計風(fēng)格的收藏集相寇,你能毫不費力地找到一套icon用于你的后臺界面慰于。你可以通過合理的icon擺放,讓用戶能夠在繁雜的內(nèi)容信息頁面快速瀏覽唤衫,并且有益于視覺表現(xiàn)婆赠。
彈出懸停菜單
??????? 當(dāng)你需要展示更多的輸入內(nèi)容或者明細(xì)介紹,而頁面上又實在沒有足夠的空間佳励。在初始加載時適當(dāng)隱藏休里,當(dāng)鼠標(biāo)移入時以彈出菜單的形式來展示,不失為一個好辦法赃承。通常通過點擊頁面上的某個鏈接或按鈕來觸發(fā)妙黍。
??????? 你也可以在頁面上運用彈出懸停菜單用來隱藏于輸入字段相關(guān)的一些數(shù)據(jù)。網(wǎng)站管理員通常有大量的編輯頁面或編寫內(nèi)容的工作瞧剖,這就需要花很多耐心和心思把很多內(nèi)容聚合在一起拭嫁。很顯然一個彈出框會包含很多內(nèi)容,甚至包含一些流行的窗口樣式和陰影效果抓于。
?????? 我真的非常喜歡上面提到的這個被標(biāo)記為芒果管理的做粤。當(dāng)你鼠標(biāo)移入這個message鏈接按鈕時,會展示幾條具體的message概要毡咏。這還可以類似地運用在擴展諸如發(fā)送、草稿逮刨、用戶評論和一些涵蓋大量列表數(shù)據(jù)的功能呕缭。任何典型的CMS系統(tǒng)都需要一些內(nèi)容管理功能,以確保一切正常運轉(zhuǎn)順利堵泽。將頁面上這些內(nèi)容重新組合,適時隱藏和展示恢总,能夠給擁擠的頁面騰出很多位置迎罗。
內(nèi)容樣式顯示
????? 多種多樣的后臺管理系統(tǒng),歸根到底都有一個最基本的目的片仿,就是信息的展示纹安。其實像什么表單、列表砂豌、按鈕厢岂、圖形這些統(tǒng)統(tǒng)都可以稱為“內(nèi)容”。整個布局的設(shè)計一般都是為了將信息整合組裝阳距,以便于更好地閱讀和編輯塔粒。
????? 我喜歡那些表單中的小icon,它們能讓你快速發(fā)現(xiàn)哪些是可訪問的按鈕筐摘。你可以快速添加卒茬、編輯或刪除表的行中的內(nèi)容。圖形的特征和顏色咖熟,能夠讓用戶一樣明白他需要做什么圃酵。當(dāng)然,這只是一個簡單的例子,但很難找到這樣的趨勢。多去思考和創(chuàng)新馍管,才能讓你設(shè)計出來的后臺更簡潔易用郭赐。
?????? 值得一提是,并不是所有的管理界面都需要圖形、圖表或是統(tǒng)計數(shù)據(jù)咽斧。有時你只需直接處理信息堪置。盡管有可能有些枯燥,但是你必須想好如何處理數(shù)據(jù)的交互张惹。這時候你會發(fā)現(xiàn)考慮用戶的認(rèn)知是一個挑戰(zhàn)舀锨。無論嘗試多少次新的想法都是值得的,要知道沒有人能進行最完美的界面設(shè)計宛逗,新的設(shè)計走向永遠(yuǎn)是即將到來的坎匿。
樣例展示
?????? 本文中展示的所有設(shè)計樣例都是只為了給設(shè)計師們拋磚引玉。但我相信大家能夠從大量的案例中獲得一些后臺界面設(shè)計的通用知識雷激。這里一些整理過的精美后臺設(shè)計模板?供大家自取替蔬。從中您可能會發(fā)現(xiàn)一些和我所說的一樣設(shè)計走向,又或者您能從中發(fā)現(xiàn)新的點子用在您自己的設(shè)計中屎暇。
(翻譯僅出于興趣承桥,歡迎共同學(xué)習(xí),互相交流)
原文地址:https://speckyboy.com/user-experience-trends-for-admin-dashboards/