2022-9-8 博博
在設(shè)計(jì)一個(gè)產(chǎn)品的時(shí)候，我們要透過(guò)現(xiàn)象看本質(zhì)。
我們是為誰(shuí)？解決什么問(wèn)題？分析的結(jié)果將直接影響到方案的好壞。 這里推薦大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一種思考方法，也可以說(shuō)是一種場(chǎng)景創(chuàng)造分析法。
5W1H分析法包含如下幾個(gè)方面：
Why：為什么要做，是原因。
What：做什么、做成什么，是目標(biāo)。
Where：在哪兒做，是地點(diǎn)。
When：什么時(shí)候做，是時(shí)間。
Who：誰(shuí)來(lái)做，是執(zhí)行對(duì)象。
How：怎么做，是方法。
通過(guò)上述分析我們可以（假設(shè)）知道：我們的用戶是技術(shù)人員、基層管理人員；做這個(gè)頁(yè)面的目的是為了讓用戶隨時(shí)掌握各項(xiàng)工作的進(jìn)展情況，快速進(jìn)入需要處理的工作事項(xiàng)。 根據(jù)結(jié)論可以得出工作臺(tái)是一個(gè)導(dǎo)航頁(yè)面或者綜合管理頁(yè)面，它是用戶感知產(chǎn)品價(jià)值的重要“門面”，使用者有一定的經(jīng)驗(yàn)，屬于高級(jí)用戶。從設(shè)計(jì)角度來(lái)看，首頁(yè)工作臺(tái)是整個(gè)系統(tǒng)規(guī)范與視覺(jué)風(fēng)格的核心場(chǎng)景。
主要是技術(shù)人員、基層管理人員
P0:各類數(shù)據(jù)指標(biāo)的匯總、我的動(dòng)態(tài)
p1:總量趨勢(shì)、數(shù)據(jù)排名、操作匯總
p2:分發(fā)匯總、待辦事項(xiàng)
重點(diǎn)突出、簡(jiǎn)潔、清晰
下面這張圖是產(chǎn)品給的原型，也是B端面試題中經(jīng)常會(huì)遇到的題目。如果你打算就按照產(chǎn)品給的原型直接做美化，那估計(jì)很難被選中。
做需求分析的目的之一就是為了做信息處理，這里要提到一個(gè)詞叫“屏效”。B端產(chǎn)品我們都知道，目的是“降本增效”，在合理的信息布局下盡量利用交互等手段讓頁(yè)面縮短。
比如：上面原型中有兩個(gè)top10排名，如果一行展示會(huì)比較擁擠，也體現(xiàn)不了top10排名?？紤]“易讀性”我們會(huì)放兩行，但這樣又占據(jù)了屏幕空間，在與產(chǎn)品溝通后我們把它整合到一起，利用按鈕組切換進(jìn)行查看。同時(shí)排名也是業(yè)務(wù)人員需要關(guān)注的，所以我們把它們往上放。
頂部個(gè)人信息內(nèi)容比較少，也沒(méi)必要占一整行，我們把它移到右邊；各類指標(biāo)因前3個(gè)是不能點(diǎn)擊的，為了和后面可點(diǎn)擊按鈕做區(qū)分，我們整合到一個(gè)卡片上；待辦事項(xiàng)與產(chǎn)品溝通后說(shuō)不太重要，移動(dòng)到了最下面，操作匯總模塊往上移；
到這里模塊之間的信息優(yōu)先級(jí)基本處理完成，下面就要對(duì)單個(gè)模塊進(jìn)行拆解處理。
首先我們要觀察哪個(gè)是：重要信息、次要信息、輔助信息，上面我們提到了“效率”，把重要信息突出顯示，就是為了讓用戶一眼就能看清，不需要去尋找或被次要信息干擾。
最后一個(gè)模塊原型上只有一個(gè)標(biāo)題，這真是驗(yàn)證了一句話：“巧婦難為無(wú)米之炊”，所以又去找產(chǎn)品溝通，為什么單個(gè)模型可以點(diǎn)擊查看更多？用戶在這個(gè)地方想要獲取什么樣的數(shù)據(jù)？
經(jīng)過(guò)一番溝通，拿到了一些“米”，巧婦終于可以干活了。為了體現(xiàn)“易發(fā)現(xiàn)性”，我們?cè)诤竺孢@個(gè)模塊上加了一個(gè)詳情按鈕。
其實(shí)上面的圖是我處理過(guò)的，產(chǎn)品的原型可不長(zhǎng)這個(gè)樣子，模塊大小、間距都是隨便給的。你如果也按照產(chǎn)品給的原型模塊大小做，估計(jì)研發(fā)會(huì)“罵娘”，因?yàn)檫@樣沒(méi)法按照比例進(jìn)行換算，也就沒(méi)法做自適應(yīng)。
這一步主要就是做柵格化處理，我們需要定義每個(gè)模塊的占比與間距。B端產(chǎn)品通常選用24柵格布局，也就是24欄+23水槽+2頁(yè)邊距。
我遇到的工作臺(tái)頁(yè)面有兩種，一種是帶左側(cè)樹，一種是不帶，這兩種對(duì)應(yīng)的柵格化數(shù)值不太一樣。 按照目前常用的尺寸1440*900來(lái)計(jì)算：不帶左側(cè)樹我采用的是1440=2*20+43*24+16*23。
如果大家做的是帶左側(cè)樹，可以參考下圖數(shù)據(jù)
重點(diǎn)來(lái)了，我個(gè)人覺(jué)得這一節(jié)才是工作臺(tái)、數(shù)據(jù)分析頁(yè)面的核心，但很多人都忽略了，覺(jué)得不就是幾個(gè)圖表，唰唰唰一下就搞定了......
上面我們提到過(guò)B端測(cè)試題給的都是原始數(shù)據(jù)（表格），需要設(shè)計(jì)師自己根據(jù)數(shù)據(jù)找合適的可視化圖形進(jìn)行展示。
如果你對(duì)可視化圖表不熟悉，不知道什么時(shí)候該用柱圖、折線圖、餅圖；不知道隨時(shí)間變化該用什么圖形；不知道體現(xiàn)排名的數(shù)據(jù)該用什么圖形。那你很難輸出一份有理有據(jù)的作品。
因圖表類型太多，詳細(xì)的留到后面文章討論，這次只對(duì)原型中使用的到圖表進(jìn)行分析：
柱狀圖是常用的數(shù)據(jù)可視化圖形之一，可用于隨時(shí)間變化而產(chǎn)生變量的數(shù)據(jù)統(tǒng)計(jì)，也可用于數(shù)據(jù)類別的對(duì)比、排名。
如圖，柱狀圖能展示知乎文章觀看者地域分布，也能反應(yīng)出不同時(shí)間段的情況，并通過(guò)圖形能夠快速了解 分布最多和最少的省份。
優(yōu)點(diǎn)：
人眼對(duì)長(zhǎng)短（高度）比較敏感，可以直觀體現(xiàn)數(shù)據(jù)差異性。
缺陷：
分類過(guò)多時(shí)數(shù)據(jù)的展示效果會(huì)降低。
能把圖形視覺(jué)與體驗(yàn)都兼顧好，才能體現(xiàn)設(shè)計(jì)師的價(jià)值。 設(shè)計(jì)師的能力不僅體現(xiàn)在技法上，更多的是體現(xiàn)在思考能力上。圖形擴(kuò)展性設(shè)計(jì)和創(chuàng)新性設(shè)計(jì)都需要設(shè)計(jì)師做縝密的思考，只有這樣才會(huì)有出彩的設(shè)計(jì)結(jié)果。
信息層級(jí)：
視覺(jué)展示：
2個(gè)人站在一起我們除了對(duì)比高度、顏值，還有會(huì)對(duì)比胖廋。那么，柱狀體的粗細(xì)和間距如何定義呢？ 在圖中，中間柱狀圖的柱子間距過(guò)于疏散沒(méi)有規(guī)律；右邊圖中的柱子間距又過(guò)小，視覺(jué)上顯得擁擠，并且當(dāng)分類過(guò)多時(shí)，過(guò)小的間距會(huì)導(dǎo)致柱狀體之間沒(méi)有獨(dú)立性，不易閱讀。
定義柱狀體的間距可以用5分原則設(shè)計(jì)法，即柱子之間的間距為N，左右兩邊與柱子之間的距離就是2/N。 如圖所示。這也是很多界面設(shè)計(jì)中常用的技法，其原理就是接近黃金比例，視覺(jué)上較為舒適。同時(shí)，在保證界面元素整體協(xié)調(diào)性的情況下，盡可能把柱子的寬度設(shè)計(jì)成N，這樣視覺(jué)上最為協(xié)調(diào)。
另外，在設(shè)計(jì)圖形前，設(shè)計(jì)師最好能了解到真實(shí)數(shù)據(jù)，這樣才能結(jié)合真實(shí)的數(shù)據(jù)來(lái)設(shè)計(jì)圖形，盡可能還原落地后的樣子。在圖中，圖形的設(shè)計(jì)和落地后的樣子存在較大的差異。問(wèn)題就出在設(shè)計(jì)前設(shè)計(jì)師沒(méi)有了解數(shù)據(jù)的真實(shí)情況，前端工程師按照設(shè)計(jì)圖把X軸的數(shù)值固定了。
相似圖表：
堆積柱狀圖：堆積柱狀圖可以展示兩個(gè)或多個(gè)數(shù)據(jù)的變化，以及數(shù)據(jù)之間的綜合比較情況。
分組柱狀圖：分組柱狀圖可以在同一數(shù)軸上展示各個(gè)分類下的不同分組數(shù)據(jù)。
有序柱狀圖：與有序條形圖一樣，有序柱狀圖也能呈現(xiàn)數(shù)據(jù)的排名情況。
折線圖常用于表示一個(gè)連續(xù)時(shí)間段內(nèi)數(shù)據(jù)的變化趨勢(shì)，主要功能是能夠清晰地反映出數(shù)據(jù)隨時(shí)間變化的趨勢(shì)。
如圖，折線圖不僅能展示不同月份的價(jià)格趨勢(shì)，還能清晰呈現(xiàn)數(shù)據(jù)的峰值和低谷。折線圖也可以是多條線，用來(lái)分析多組數(shù)據(jù)隨時(shí)間變化的趨勢(shì)及數(shù)據(jù)間的趨勢(shì)比較。
優(yōu)點(diǎn)：
直觀反映數(shù)據(jù)變化趨勢(shì)
缺陷：
無(wú)序的類別無(wú)法展示數(shù)據(jù)特點(diǎn)。
折線圖可以用于展示數(shù)據(jù)的趨勢(shì)變化，通過(guò)折線的起伏波動(dòng)可以幫助人們探究數(shù)據(jù)背后的邏輯。但如果折線圖的設(shè)計(jì)不夠合理，在視覺(jué)上會(huì)讓人產(chǎn)生錯(cuò)誤的認(rèn)知。在圖中，有的折線圖的刻度值設(shè)置不合理，如中間折線圖的刻度值未從0開始，導(dǎo)致折線的呈現(xiàn)夸大；右邊折線圖的刻度值過(guò)高，趨勢(shì)變化呈現(xiàn)過(guò)于平緩，這些都是在不客觀地表達(dá)數(shù)據(jù)。正確的方式應(yīng)該是刻度值從0開始，隨著數(shù)據(jù)的增減，刻度值也做相應(yīng)的變化。
視覺(jué)展示：
在折線圖設(shè)計(jì)中，還需要注意折線的粗細(xì)要適中。在圖中，其中一條折線過(guò)細(xì)，這會(huì)降低數(shù)據(jù)可視化的表現(xiàn)；另一條過(guò)粗，就會(huì)損失折線中的數(shù)據(jù)波動(dòng)細(xì)節(jié)。在產(chǎn)品的圖形設(shè)計(jì)中，一般網(wǎng)格線和起始線都是1像素，折線一般用2像素，這樣的粗細(xì)會(huì)有較好的視覺(jué)表現(xiàn)。
相似圖表：
階梯線圖：線在數(shù)據(jù)點(diǎn)之間形成一系列步驟。
面積圖：與折線圖唯一不同的是，其自變量數(shù)據(jù)和坐標(biāo)軸之間有顏色填充，這樣能更加突出數(shù)據(jù)的趨勢(shì)變化。
提到數(shù)據(jù)的占比，相信你第一個(gè)就會(huì)想到餅圖，主要用來(lái)展示數(shù)據(jù)分布情況。 餅圖是展示占比數(shù)據(jù)最直觀的圖形，通過(guò)弧度大小來(lái)表示分類的占比多少。但餅圖有一定的局限性，當(dāng)占比數(shù)值接近或占比分類過(guò)多時(shí)，在視覺(jué)上就不容易辨別各個(gè)類別占比的大小。在數(shù)據(jù)可視化產(chǎn)品中，因?yàn)轱瀳D是大面積的色塊，視覺(jué)上會(huì)非常突顯，很容易搶走重要數(shù)據(jù)的風(fēng)頭，所以使用時(shí)要酌情考慮。
優(yōu)點(diǎn)：
直觀顯示各項(xiàng)占總體的占比，分布情況，強(qiáng)調(diào)整體與個(gè)體間的比較。
缺陷：
分類過(guò)多，則扇形越小，無(wú)法展現(xiàn)圖表。
每個(gè)圖形都有自己的設(shè)計(jì)規(guī)范，如當(dāng)餅圖分類過(guò)多時(shí)，一般不把文字放在圖形元素上，因?yàn)橐坏┏霈F(xiàn)幾個(gè)相對(duì)較小的占比數(shù)據(jù)，字就很容易溢出，不容易辨別指向的分類，如圖中的右圖所示。好的解決方案就是，在圖形的外圍用引線指出分類數(shù)據(jù)，或者加示例圖展示。
視覺(jué)展示：
另外，餅圖的分類最好從12點(diǎn)鐘的位置開始，這樣較為符合人的閱讀習(xí)慣，即從上到下、從左到右，如圖中。如果餅圖隨意從不同位置開始展示，就會(huì)缺少規(guī)范，這樣當(dāng)多個(gè)餅圖同時(shí)展示時(shí)容易出現(xiàn)混亂。
同時(shí)，在餅圖的分類中如果沒(méi)帶排序，如1月、2月……，那么占比最好能夠從大到小依次排列，這樣還能直觀地呈現(xiàn)出分類的排名情況。任何時(shí)候，如果有“其他”這項(xiàng)分類，無(wú)論其占比多少都要放在最后，因?yàn)槠鋽?shù)據(jù)通常是最不被關(guān)注的數(shù)據(jù)。
相似圖表：
嵌套圈餅圖：用于一個(gè)指標(biāo)在不同維度的占比。
跑道圖：看到占比的同時(shí)，可以直觀看到指標(biāo)在當(dāng)前維度下的排名情況。
表格看起來(lái)簡(jiǎn)單，但想設(shè)計(jì)好也不是一件容易事。通常我們見(jiàn)到的（產(chǎn)品中）表格都屬于比較簡(jiǎn)單的表格。
在BI系統(tǒng)中有一些復(fù)雜的表報(bào)，如果直接用組件信息會(huì)很難閱讀。我們需要對(duì)表格的視覺(jué)進(jìn)行調(diào)整，讓信息獲取更高效，這就需要一些設(shè)計(jì)技巧和原則。
而圖中（上圖）的項(xiàng)目名稱長(zhǎng)短不一，居中對(duì)齊在視覺(jué)上會(huì)使切入點(diǎn)呈現(xiàn)“Z”字形，影響閱讀效率。左對(duì)齊可以使線性結(jié)構(gòu)在視覺(jué)上不跳躍，閱讀流暢且更具美感。表格中的數(shù)字需要右對(duì)齊，因?yàn)楫?dāng)我們?cè)诿鎸?duì)一個(gè)長(zhǎng)數(shù)字時(shí)，一般會(huì)從右往左讀。比如數(shù)字￥368,568,023.00，我們一般是從個(gè)位到最后的千萬(wàn)位順序識(shí)別數(shù)字體量，有的人可以通過(guò)千分符迅速判斷數(shù)字的體量，但其實(shí)也是從右到左的瀏覽順序，因此數(shù)字右對(duì)齊最符合人的閱讀方式。
在圖中（下圖），讓我們感受一下數(shù)字左對(duì)齊、居中對(duì)齊、右對(duì)齊的閱讀效率，以及對(duì)各個(gè)數(shù)據(jù)體量的對(duì)比感知。
文字左對(duì)齊和數(shù)字右對(duì)齊，針對(duì)的是長(zhǎng)短不一的名稱和大體量的數(shù)字，而對(duì)于文字?jǐn)?shù)量一樣、體量較小的數(shù)字也可以嘗試用居中對(duì)齊的方式，對(duì)稱的元素本身就具有美感。如圖所示，通過(guò)對(duì)表格中的文字和數(shù)字的重新排版，相信在閱讀效率上會(huì)有較大的提高。雖然提高了閱讀效率，但這相比優(yōu)秀的表格設(shè)計(jì)還差得很遠(yuǎn)，其中最明顯的是表格的邊框在視覺(jué)上過(guò)于突出，接下來(lái)我們繼續(xù)調(diào)整。
如圖（下圖）所示，通過(guò)弱化邊框在視覺(jué)上能夠突出表格的內(nèi)容。表格邊框可以讓信息的呈現(xiàn)更有條理，能夠提高易讀性，但在視覺(jué)層級(jí)上不能高于內(nèi)容信息。
將表格的邊框與分割線去掉，用留白分隔內(nèi)容，無(wú)框勝有框，增大留白可以使表格更有空間感。這樣的設(shè)計(jì)需要注意的是，元素的間隔不能太小，不然會(huì)顯得擁擠。由于去掉邊框后有些問(wèn)題會(huì)被放大，比如標(biāo)題與內(nèi)容沒(méi)有對(duì)比，因此需要增強(qiáng)對(duì)比，在整體上要有層次。
圖中的表格加強(qiáng)了標(biāo)題，這樣看起來(lái)更有層次。強(qiáng)調(diào)標(biāo)題的方法有很多種，不一定只是加粗字體或加大字號(hào)，還可以給標(biāo)題欄添加背景，以形成對(duì)比。
如果在一組數(shù)據(jù)中有重要數(shù)據(jù)和次要數(shù)據(jù)之分，那么就需要在對(duì)重要數(shù)據(jù)的設(shè)計(jì)上著重突出，表格的設(shè)計(jì)同樣如此。圖中所示就是把重要的數(shù)據(jù)信息通過(guò)增加背景色與其他元素形成較為突出的對(duì)比，這種設(shè)計(jì)是一種為用戶做選擇的設(shè)計(jì)方法，容易讓用戶的視覺(jué)停留在他本想重點(diǎn)關(guān)注的地方。
由于人們常常會(huì)對(duì)熟悉的事物產(chǎn)生審美疲勞，因此設(shè)計(jì)中有創(chuàng)新才容易給人眼前一亮的感覺(jué)。
下圖在背景上面給了一根橫線，來(lái)凸顯這一列的數(shù)據(jù)，這樣除了可以加強(qiáng)信息傳達(dá)也可以打破常規(guī)的表格樣式（這里只是提供一種思路）。
表格數(shù)字最容易出問(wèn)題的是數(shù)字字體的運(yùn)用，因?yàn)楹芏鄶?shù)字字體不是等距設(shè)計(jì)，比如數(shù)字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級(jí)的數(shù)字，就有可能會(huì)誤導(dǎo)觀者。
如下圖所示，本來(lái)32,118,116,00大于28,558,363,00，但由于不同數(shù)字所占寬度不一樣，這樣的設(shè)計(jì)在視覺(jué)上容易誤導(dǎo)用戶。因此，表格中的數(shù)字要使用表格字體，因?yàn)楸砀褡煮w每個(gè)數(shù)字所占面積一致，這樣就不會(huì)出現(xiàn)案例中的問(wèn)題了。
其實(shí)很多表格里面的數(shù)字字體都存在類似問(wèn)題。下圖是修改數(shù)字字體后的設(shè)計(jì)，這樣就能客觀地呈現(xiàn)數(shù)據(jù)了。
表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。
四、視覺(jué)設(shè)計(jì)
參考631配色法
對(duì)有含義的顏色要謹(jǐn)慎使用，例如：紅、黃、綠
常用的圖標(biāo)分為兩類：
工具圖標(biāo)：包含一定產(chǎn)品功能隱喻的簡(jiǎn)化抽象圖形，代替文字節(jié)省界面空間，方便用戶理解，常用于b端產(chǎn)品里面。
如圖，里面來(lái)自不同產(chǎn)品的圖標(biāo)，雖然表現(xiàn)形式不太一樣，風(fēng)格不太一樣，但都是為了體現(xiàn)圖標(biāo)后面文字的意思。
裝飾圖標(biāo)：主要目的是用來(lái)裝飾界面的視覺(jué)元素，樣式大于功能，常用于產(chǎn)品宣傳、活動(dòng)等頁(yè)面。 如圖，云計(jì)算、大數(shù)據(jù)相關(guān)的產(chǎn)品，語(yǔ)義都比較復(fù)雜，很難通過(guò)圖標(biāo)去表達(dá)，既然看不懂，就抽象點(diǎn)。
在 B 端產(chǎn)品中，應(yīng)用最廣泛的還是工具圖標(biāo)。 可能有人覺(jué)得工具類圖標(biāo)太簡(jiǎn)單了，它是看起來(lái)簡(jiǎn)單，想做好一點(diǎn)都不容易。
首先要保證“一致性”， 粗細(xì)一致、圓角一致、透視一致、大小一致，同時(shí)還要把語(yǔ)義用圖形表達(dá)出來(lái)。
一般采用8的倍數(shù)：8、16、24、32、40、48、...
12px、14px、16px、20px、24px，可采用“回退機(jī)制”
作者：夜鶯YEAH
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn