dashboard的中文翻譯是“儀表盤”塘砸，那在網(wǎng)頁設(shè)計中郊酒，個人認為确封，翻譯成“數(shù)據(jù)面板”更為恰當，它主要是由多個卡片組合而成的一個數(shù)據(jù)信息展示頁面鹉动。
在一般的dashboard設(shè)計中轧坎，確定頁面需求之后，可以從以下三個方面進行思考泽示，基本可以涵蓋一個dashboard的基本設(shè)計需求了缸血。
?一、Layout-布局
常見的dashboard布局有三種：
1.1豎直對齊
俗稱的瀑布流優(yōu)點是擴展性好械筛，因為卡片之間捎泻，底部不要求對齊，因此新卡片加入的時候埋哟，可以直接在用相同寬度的卡片在底部插入笆豁。由于一開始設(shè)計就要確定好“瀑布流”要分為幾列，因此它的缺點是卡片內(nèi)容的尺寸設(shè)計受限赤赊。
1.2 水平對齊
目前在dashboard設(shè)計中使用最多的一種樣式闯狱。優(yōu)點是信息卡片的上下尺寸可以隨意調(diào)整，并且當一個模塊的內(nèi)容很豐富時砍鸠，可以在一屏集中展示扩氢，適用于圖表較多的場景。缺點是擴展性一般爷辱，后續(xù)如果有新卡片要插入录豺，必須要一個水平的大卡片或者兩到三個卡片朦肘，才能保證底部依然對齊。
1.3 豎直和水平均對齊
優(yōu)點是信息格局整齊双饥，界面美觀媒抠，瀏覽起來舒服。缺點是不易擴展咏花，以及尺寸設(shè)計的大小會受到更加嚴格的限制趴生。
二、Elements-元素
把卡片布局設(shè)計好了之后昏翰，接下來就是要考慮卡片需要哪些元素苍匆。除了卡片的content（第三點會講）之外，一個“合格”的卡片棚菊，會有以下這些基本要素：
* 標題（title）：一般都會有浸踩，信息明確，為了讓用戶明確他們正在關(guān)注的是什么模塊下的信息统求。
* 操作（option）：刷新检碗、Tab切換、篩選這些是比較常見的码邻，可以直接針對卡片內(nèi)容的操作折剃。
* 鏈接（link）：視情況而定。在卡片上出現(xiàn)的鏈接像屋，通常是”查看更多“的按鈕怕犁。
三、Content-內(nèi)容
不管在什么界面己莺，內(nèi)容當然是最重要的因苹。在dashboard設(shè)計中，內(nèi)容決定卡片的元素篇恒，甚至直接影響整個布局扶檐。一般來說，內(nèi)容不外乎以下這幾種樣式：
* 純數(shù)字（number）
* 純文字（text）
* 圖表（chart）
* 表格（table）
內(nèi)容是王道胁艰，決定卡片呈現(xiàn)的樣式款筑，而所謂的樣式，其實就是根據(jù)內(nèi)容進行常規(guī)的排版腾么，但是對于在dashboard這么小的卡片進行排版奈梳，還要整體布局看起來協(xié)調(diào)，有靈性和吸引人解虱，它比常規(guī)的排版更需要一點技巧攘须。下面分別說說這幾種樣式的基礎(chǔ)設(shè)計。
3.1 單獨的數(shù)字
這種卡片在dashboard的設(shè)計中是一定會涉及到的殴泰，僅僅展示一個數(shù)據(jù)就夠了于宙，比如“新增用戶數(shù)”浮驳、“賬戶余額”等。而且相對來說捞魁，這種設(shè)計也是最簡單的至会。內(nèi)容即卡片，因此可以去掉卡片的標題和操作谱俭，直接呈現(xiàn)內(nèi)容奉件。下面兩種最基本簡單的排版設(shè)計。
3.2 圖表
圖表在整個dashboard頁面中扮演著至關(guān)重要的作用窃这。形形色色的圖表，一方面會讓用戶一眼抓住重點征候，另一方面也給了設(shè)計師很多發(fā)揮空間，畢竟占據(jù)的視覺面積通常較大祟敛，最能給用戶視覺沖擊的部分之一疤坝。
3.3 表格
表格在dashboard中也比較常見。這跟在普通的頁面中的表格設(shè)計馆铁，基本沒有差異跑揉。但是要注意列表不能過長，要根據(jù)頁面整體埠巨，決定展示展示的條數(shù)历谍，以控制當前卡片的高度。另外辣垒，跟第2點的“純文字”設(shè)計的出發(fā)點一樣望侈，為了增加卡片的”靈性“，可以給某些字段增加tags勋桶，或者利用數(shù)據(jù)可視化脱衙，增加圖表的元素。
3.4 純文字
純文字的卡片捐韩，一般會是多條結(jié)構(gòu)相同的文字標題/梗概，比方說消息中心鹃锈、幫助中心模塊荤胁，需要把部分內(nèi)容展現(xiàn)在dashboard上。為了給這個純文字的卡片增加一點“靈性”屎债，可以在內(nèi)容中抽取一些屬性仅政，然后加icons或tags垢油，這樣就能保證與dashboard其他“花花綠綠”的卡片形成一致的風格。
四已旧、總結(jié)
這篇文章僅僅從設(shè)計的角度整理了對dashboard的設(shè)計的一點方法論秸苗，但是具體需求具體分析，設(shè)計師們在吃透了需求的前提下运褪，能夠幫助設(shè)計們師快速搭好一個滿足基本需求的框架惊楼。
