【譯文】探究后臺用戶體驗設(shè)計

?????? 我們發(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)的子菜單位置,以承載大量的鏈接糙及。

圖片1:Tab導(dǎo)航樣例

?????? 任何形式的Tab鏈接都可以為導(dǎo)航服務(wù)弧腥。你不必過多地考慮標(biāo)簽的常用圓角或在界面上的視覺設(shè)計帐偎,通常運用的就是簡單的文字鏈接或者運用一些背景和icon。這能夠幫助用戶決定某個鏈接將會鏈到管理界面的哪個模塊池。Tab導(dǎo)航的呈現(xiàn)通常一閃而過漂坏,運用字體加粗或者放大蛇耀,能夠讓選中的Tab標(biāo)簽在導(dǎo)航欄中脫穎而出块茁。

圖片二? tab樣式的設(shè)計樣例

????? 并不是說控制板塊的導(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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末根悼,一起剝皮案震驚了整個濱河市凶异,隨后出現(xiàn)的幾起案子蜀撑,更是在濱河造成了極大的恐慌,老刑警劉巖剩彬,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酷麦,死亡現(xiàn)場離奇詭異,居然都是意外死亡喉恋,警方通過查閱死者的電腦和手機沃饶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轻黑,“玉大人糊肤,你說我怎么就攤上這事√υ茫” “怎么了轩褐?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長玖详。 經(jīng)常有香客問我把介,道長,這世上最難降的妖魔是什么蟋座? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任拗踢,我火速辦了婚禮,結(jié)果婚禮上向臀,老公的妹妹穿的比我還像新娘巢墅。我一直安慰自己,他們只是感情好券膀,可當(dāng)我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布君纫。 她就那樣靜靜地躺著,像睡著了一般芹彬。 火紅的嫁衣襯著肌膚如雪蓄髓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天舒帮,我揣著相機與錄音会喝,去河邊找鬼。 笑死玩郊,一個胖子當(dāng)著我的面吹牛肢执,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播译红,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼预茄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了侦厚?” 一聲冷哼從身側(cè)響起耻陕,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤昵慌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后淮蜈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡已卷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年梧田,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侧蘸。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡裁眯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出讳癌,到底是詐尸還是另有隱情穿稳,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布晌坤,位于F島的核電站逢艘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏骤菠。R本人自食惡果不足惜它改,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望商乎。 院中可真熱鬧央拖,春花似錦、人聲如沸鹉戚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抹凳。三九已至遏餐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間却桶,已是汗流浹背境输。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留颖系,地道東北人嗅剖。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像嘁扼,于是被迫代替她去往敵國和親信粮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,749評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫趁啸、插件强缘、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • 1 “霞督惰,該你上場了÷玫啵” 是嗎赏胚? 是啊,你聽商虐,臺下的粉絲都叫著你的名字觉阅。 2 紫是一名演員。 有人說秘车,她是走了狗屎...
    敏萱閱讀 274評論 0 0
  • 小娃特別喜歡一個動作伤溉,把手伸進喉嚨直到作嘔,偶爾幾次甚至?xí)褎偝缘臇|西吐出來妻率,而且一旦開始了這個動作就停不下來谈火,我...
    jewelliu閱讀 804評論 0 0
  • 娘娘是我的大學(xué)同學(xué),后來變成了我的大學(xué)室友舌涨。她原名叫徐紅陽糯耍,如果不是因為十分特意地想了一下,我還真差點就忘了她的本...
    Holiday歷險記閱讀 608評論 2 11