前言：我現(xiàn)在的大部分時(shí)間都在做這些設(shè)計(jì)。給自己做一個(gè)沉淀。很多思路來源于Jan Losert的《26 Steps of Product & Dashboard Design》
一、關(guān)于dashboard
? ? ? Dashboard主要是后臺(tái)產(chǎn)品。 To? B產(chǎn)品主要包括兩類，一類是平臺(tái)型產(chǎn)品，比如百度推廣、微信公眾平臺(tái)、UCloud。另一類是公司自己內(nèi)部的平臺(tái)，比如OA、CRM、WMS等，用戶全部是內(nèi)部員工。而這兩大類無(wú)論是哪一種，普通用戶都很難接觸到，除非有明確需求的用戶才會(huì)接觸到。
后臺(tái)產(chǎn)品多數(shù)都以下長(zhǎng)這樣，一般都是滿屏的圖表、表格、輸入框、按鈕：
二、設(shè)計(jì)流程
? ? ? 1.設(shè)計(jì)之前
? ? ? ? 1）無(wú)疑就是了解業(yè)務(wù)，2B產(chǎn)品的業(yè)務(wù)相對(duì)來說，了解起來非常困難。那這個(gè)其實(shí)也沒有很多辦法，唯有多看幾遍需求，多和產(chǎn)品和后臺(tái)同學(xué)溝通多了解了。
? ? ? ? 2）最好讓客戶發(fā)2-3個(gè)喜歡的參考案例過來，了解他喜歡的內(nèi)容，以及他對(duì)設(shè)計(jì)結(jié)果的期望。
? ? ? ? 3）用戶畫像。它讓你明確為誰(shuí)設(shè)計(jì)；在解決方案模棱兩可時(shí)，它能有效地幫助選出一個(gè)最合適方案。用戶畫像其實(shí)只是一個(gè)需求的一個(gè)描述，它雖然能幫助不同角色在產(chǎn)品研發(fā)過程中，站在用戶的角度思考問題，但是用戶會(huì)隨著你產(chǎn)品的擴(kuò)大，時(shí)間的推移等也會(huì)跟著一起變化，所以也需要進(jìn)行更新和調(diào)研。（我基本都是通過咨詢市場(chǎng)運(yùn)營(yíng)的人，進(jìn)行描述，很難實(shí)際接觸到真正的人。）
? ? ? ? 4）設(shè)立一個(gè)明確的目標(biāo)。
? ? ? ? 5）建好項(xiàng)目文件夾?？吹奖容^好的東西，就檔下來。為之后做情緒板做準(zhǔn)備。下圖是我創(chuàng)建時(shí)的文件命名。
? ? ? ? ? ? ? 關(guān)于找參考。1.設(shè)計(jì)相關(guān)。由于相對(duì)而言，在市場(chǎng)上很少能夠讓你直接登錄后臺(tái)的系統(tǒng)，所以我一般會(huì)在dribble、Behance、花瓣上面找一些相關(guān)的設(shè)計(jì)。? 2.? 新功能。我會(huì)直接百度谷歌搜界面，雖然很丑，但是大致需要放什么內(nèi)容，也能夠大致了解到人家的交互邏輯
? ? ? 2 、原型階段
? ? ? 這個(gè)時(shí)候一般我們產(chǎn)品都會(huì)出一份很草的原型圖（不解釋的情況下很多情況是看不懂的）。但也因?yàn)槿绱耍约嚎梢园l(fā)揮的空間就很大了，可以進(jìn)一步站在產(chǎn)品的角度思考問題。
? ? ? ? 回歸正題，比如出一個(gè)新功能，我會(huì)重新思考一下整個(gè)操作流程和交互邏輯，看是否有更好的方案。這個(gè)階段思考最多的是極端邊緣情況，然后反饋給大家。在這個(gè)階段，就把邊緣情況定下來非常重要。不要等到設(shè)計(jì)階段再去想這些問題；更糟糕的是要到開發(fā)階段才去想，那樣你會(huì)浪費(fèi)大量時(shí)間和精力。
? ? ? 3、設(shè)計(jì)階段
? ? ? ? ? 1）情緒板
? ? ? ? ? ? ? 這個(gè)時(shí)候根據(jù)業(yè)務(wù)，思考好整個(gè)設(shè)計(jì)的關(guān)鍵詞，比如，我設(shè)計(jì)的是大數(shù)據(jù)，那我這邊可以是科技感，真實(shí)，數(shù)據(jù)，直觀之類的詞。根據(jù)之前找的一些圖，提取一些相關(guān)詞的顏色、代表形狀等等。那這個(gè)時(shí)候，整個(gè)設(shè)計(jì)的調(diào)性和icon的一些元素都可以定掉了。
? ? ? ? ? 2）各個(gè)部分的設(shè)計(jì)
? ? ? ? ? ? ? ① dashboard。你要明確，dashboard是誰(shuí)看的，市場(chǎng)銷售？領(lǐng)導(dǎo)？技術(shù)人員？運(yùn)維？這一步其實(shí)蠻重要的，明確之后，我們?cè)偬峁┫鄳?yīng)的數(shù)據(jù)，否則就會(huì)有部分和用戶相關(guān)，部分和用戶半毛錢關(guān)系都沒有的情況。如下，這種大數(shù)據(jù)的統(tǒng)計(jì)，很明顯是給領(lǐng)導(dǎo)看的。那我實(shí)際用的是運(yùn)維人員，那這些統(tǒng)計(jì)對(duì)于用戶人員來說是沒有用的。
（ 這篇文章講的是給領(lǐng)導(dǎo)和市場(chǎng)人員的dashboard的設(shè)計(jì)：https://www.geckoboard.com/blog/building-great-dashboards-6-golden-rules-to-successful-dashboard-design/#.WZ_gcpOg_yI）
? ? ? ? ? ? ② 有邏輯組織信息，善用留白。
? ? ? ? ? ? ? ? ·將所要展示的數(shù)據(jù)梳理清楚后，思考不同數(shù)據(jù)之間，誰(shuí)和誰(shuí)有相關(guān)性，適合放在一起。比如，KPI數(shù)據(jù)和銷售渠道放一塊，財(cái)務(wù)信息統(tǒng)一放一起。
? ? ? ? ? ? ? ? ·同時(shí)考慮每種信息的重要性，分層級(jí)展示。
? ? ? ? ? ? ? ? ·只放重要的信息。別放無(wú)用的信息。
此處在公司深有體會(huì)，不管是產(chǎn)品還是開發(fā)，都喜歡多而全，密而重，卻不講有用性和呼吸感。表示很無(wú)奈
? ? ? ? ? ? ③? 布局。
? ? ? ? ? ? ? ? ? 為了獲得第一反饋并開展討論，我第一稿不會(huì)考慮像素，會(huì)把之前用的元素拖過來用，這讓我不到一天就湊出來一個(gè)像模像樣的頁(yè)面。
? ? ? ? ? ? ? ? 討論過后就要考慮像素的問題了。這個(gè)時(shí)候我一般會(huì)用柵格來做，做柵格之前我會(huì)先大致定一個(gè)，然后和程序員溝通，他們用的是什么方式，我這套柵格系統(tǒng)是否適用？更精細(xì)的我會(huì)用格式塔原理進(jìn)行排版。
? ? ? ? ? ? ? ? ④配色。我是根據(jù)情緒板提煉出來的顏色進(jìn)行配色的。這樣到時(shí)候評(píng)審的時(shí)候，別人問你，為什么是這個(gè)顏色，你也是有理有據(jù)的。當(dāng)然由于行業(yè)內(nèi)的一些特殊用色，會(huì)進(jìn)行稍微的修改。
? ? ? ? ? ? ? ? ? 這里不太建議，使用相近的顏色進(jìn)行做柱狀圖的。畢竟要考慮色盲的情況。提供工具是Corlor Oracle，用來檢測(cè)自己所用的顏色，是否能讓色盲色弱患者正常使用（http://colororacle.org/）。體量輕巧，用起來極方便。
所以在設(shè)計(jì)的時(shí)候? 1.色調(diào)和明度的跨度一定要大；2.仿照自然的配色；3.使用漸變，不要使用一系列固定顏色
? ? ? ? ? ? ? ⑤控件。對(duì)于控件，我經(jīng)常使用原子理論。例如，一個(gè)表單標(biāo)簽，搜索框和按鈕共同打造一了個(gè)搜索表單分子。分子組成好了，我就可能會(huì)有有機(jī)體。每個(gè)組件都設(shè)計(jì)好了之后，更換配色，替換掉之前的占位的部分就好了。（有興趣的可以看下《設(shè)計(jì)的形狀》這本書）
? ? ? ? ? ? ? ⑥表格。數(shù)據(jù)表格方便用戶瀏覽、分析、對(duì)比、篩選、搜索、操作信息、以獲得相應(yīng)信息，進(jìn)行相關(guān)操作。
? ? ? ? ? ? ? 對(duì)齊方式：文字用左對(duì)齊；數(shù)字用右對(duì)齊；表頭遵循數(shù)字對(duì)齊的方式；別用居中對(duì)齊。
? ? ? ? ? ? ? 表頭：樣式與表格主體，最好有明顯的視覺區(qū)分。標(biāo)題文案盡量簡(jiǎn)約清晰。
? ? ? ? ? ? ? 分割線：水平分割線最有用；垂直分割線有時(shí)可以用有效的對(duì)齊方式代替。別在需要垂直瀏覽的表格中使用斑馬線。用分割線的時(shí)候，一定要非常淡，不要影響查看數(shù)據(jù)，一定要淡?。?！降噪?。?br>
? ? ? ? ? ? ? 借助圖形化表達(dá)：過多的文字卻會(huì)給界面帶來閱讀負(fù)擔(dān)，適當(dāng)使用圖形表達(dá)，可減少占用空間，讓表格主次分明。
? ? ? ? ? ? ? ⑦表單。管理平臺(tái)的功能大部分需要通過填寫表單來實(shí)現(xiàn)，但由于其業(yè)務(wù)特點(diǎn)，它的表單填寫內(nèi)容繁多，邏輯復(fù)雜。若直接羅列所有表單內(nèi)容，一定會(huì)讓用戶望而生畏，且容易出錯(cuò)。
? ? ? ? ? ? ? 合理組織表單內(nèi)容：加標(biāo)題，加進(jìn)度提示（有研究表明，比起完成一項(xiàng)大任務(wù)，人們更愿意去完成10個(gè)小任務(wù)，因?yàn)槊客瓿梢粋€(gè)小任務(wù)就能給人帶來一定成就感）
?
? ? ? ? ? ? ? ? 對(duì)齊：業(yè)界比較認(rèn)可的標(biāo)簽對(duì)齊方式有頂對(duì)齊、左對(duì)齊和右對(duì)齊三種。
? ? ? ? ? ? ? ? ? ? ? ? ? 對(duì)于簡(jiǎn)易表單可以使用頂對(duì)齊；對(duì)于較復(fù)雜表單，更傾向于選擇右對(duì)齊，而對(duì)于布局復(fù)雜的表單則可以用左對(duì)齊的方式。
三、交付
我一般都是上傳到 “藍(lán)湖”，然后配上交互，這樣開發(fā)和產(chǎn)品看都沒什么問題了。然后等開發(fā)完就走查。
四、總結(jié)
目標(biāo)：我曾經(jīng)同時(shí)做4個(gè)項(xiàng)目，但到最終都很無(wú)力?，F(xiàn)在只負(fù)責(zé)1-2個(gè)項(xiàng)目，我對(duì)項(xiàng)目會(huì)進(jìn)行更多的思考，自己進(jìn)步也大了很多。
別太信dribble：1、我給我領(lǐng)導(dǎo)看了些dribble里面我認(rèn)為神乎其神的圖，領(lǐng)導(dǎo)看過之后覺得毫無(wú)感覺，反倒是一些內(nèi)容很多看上去很復(fù)雜的圖，領(lǐng)導(dǎo)倒是很喜歡。（此處要考慮國(guó)人的審美，看看國(guó)內(nèi)的大街和國(guó)外的大街就知道了）2.考慮實(shí)際運(yùn)用情況，dribble里的圖很多只care視覺形式，實(shí)際運(yùn)用情況和實(shí)際性能相對(duì)來說很弱，
但人家的設(shè)計(jì)思路還是很值得借鑒的！
