政務可視化設計經驗——頁面視覺（上）

編輯導語：如今我們每天都要面對各種平臺，對于這些平臺頁面的設計以及調性都有一定的認知，對于政務系統來說，很多板塊都具有自己的調性，要根據實際情況進行頁面可視化的設計；本文作者分享了關于政務可視化的頁面視覺，我們一起來了解一下。

從入行到如今的這些年中，眼中的設計風格不斷變化。

伴隨這些年行業的興起，從最早的擬物風到現在的內容當道，越來越多的設計師參與其中，為行業貢獻著自己的理解；但也發現同質化的現象越趨明顯，個人認為這里面有設計師本身的問題，也有行業風氣的問題。同質化的現象有很多的組成因素，可能是頁面視覺是直接的拿來主義，亦可能是脫離不了舒適圈的習慣為之。

我很擔心的一件事情就是我們一味的反對同質化的假，最后會演變成另外一種假。是一味的擯棄，還是部分的接納，這是一個界限的問題，而這個界限我還沒想明白。如今風格太現成，都像麥當勞一樣，思想的麥當勞，短暫的吃下去了，飽了，不去想了。這個慣性思維很可怕，最可怕的是可能有段時間自身都意識不到這個問題。

那么如何跳出這個慣性思維？

我這邊借用馮小剛導演在十三邀里說的一段話來解釋——創作過程太正常很多時候是經驗在發揮作用，每次都和自己的經驗作斗爭，最后可能會出現一個在經驗之外又讓自己激動的東西。簡而言之就是革了自己的命。可能哪天我想明白這個問題，會再寫一章如何創新來講這個問題。

那么本章主要講我們是如何在前期定義一張大屏的風格？主要可以從幾個方面來講：配色、字體、構圖、氛圍。

一、定義頁面配色

定義大屏配色的前提是對于用戶的政務有著充分的調研，明白是主管哪個行業的，分別用對應的色系去定調子。

舉個例子，生物醫藥、環保等行業通常選用能表達健康安全的綠色；公安、教育、政府等通常選用能表達科技未來的藍色；消費業、服務業等行業通常選用能表達熱鬧、朝氣的暖色調。

它們有個共性就是主色調不管傾向于哪個顏色，背景通常是對應顏色的暗色系。因為可視化大屏使用環境通常是在室內、展廳等這種外部環境比較暗的地方，避免對于觀賞者視覺上的不適應。而且這也有幫助觀賞者對于數據的聚焦比對的工作，暗色調的背景加上高亮的配色，也容易在界面中將層次做出來，這點特別適用與3D城市的構建，以后我們會講述如何在城市中做出層次對比的方法。

色彩心理學普遍還是適用于可視化大屏的，顏色對于人意識的傾向性還是比較強烈的。但是需要明確的是在數據可視化領域中，有些配色規則并不適用。

在傳統UI設計中我們一般會擬訂主色輔色特殊狀態色，甚至在灰階會把標題、正文、背景的顏色區分做全。這樣做的好處就組件一致性，給人統一的感覺。

數據可視化一般會定一個主基調，圍繞這個主基調會用至少5-6中以上的調色板進行設計。

1. 使用足夠并且容易區分層級的顏色種類

假設我們需要做一個政務的可視化系統，在設計初期敲定了以靛藍（H:200）為主色調的設定。

那么我們會尋找在這個顏色周邊的鄰近色去做這個靛藍色調的搭配，比如在青（H:180）和深藍（H:220），使得整個大面積的色彩整體上過渡會比較自然。

通過對純度S和明度B的調節，我們可以找到很多色調用于數字、文字、點線面等視覺元素；然后在靛藍色調的對比色上去尋找用于高亮的展示，比如綠（H:120）這類的，起到強化主色調的層級作用。最后找到靛藍色的互補色左右的紅（H:10）和黃（H:45）用于重點強調內容。主色調的互補色需要少量并且珍惜的使用，需要有但不是大面積得使用。

色彩是為了突出內容的重要信息，請有選擇、有策略的使用顏色，切勿濫用。配色沒有絕對的好壞，只有在當前場景下是否適合，色環理論只能大致告訴你一些配色的方式，最重要的是靠設計師自己眼睛去感受顏色帶來的沖擊力。

上述的配色方式僅僅是我們工作的一個慣用方式，不同項目敲定的內容也不同，請靈活使用。

當然我們在這邊提及的色調并不是一個確定的值，而是圍繞選定顏色周邊的一個色域。可能在文字或者數字上會沿用傳統UI的規則，保持特定的統一。但是在點線面、配飾、特殊狀態的觸發等元素上使用這些色域去提高整個界面的層次和細節，使得畫面沒有那么硬，各個板塊之間是有舒服得過渡。這里的色域以前是需要自己將色調于黑白二色融合的漸變中選取不同位置的顏色組成色板，如今AntDesign的輪子比較友好，填入主色就可以對應生成有層級的顏色。

我們上述的配色方案是有傾向觀賞展示型的，由于用戶使用大屏普遍都是匯報展覽并且用戶樣本容量小。

故在表達的過程中大量借鑒了運營設計的方式方法，因此配色方式存在包容性不夠的現象，對于色盲色弱的人群是有障礙的；比如青色、藍色、紫色在色域展開的過程中，選取其中幾個顏色做疊加色板樣式時，灰色模式下存在顏色拉不開的現象。可能是“藍色”是對色障人群最友好的顏色，AntV保留MPC疊加色板，但同時在使用建議中也寫明推薦使用MOB疊加色板。

在數據可視化領域中，還需要界定清楚你做的是偏向觀賞展示型的還是偏向實戰分析型。這兩者的區別主要在觀賞性的數據可視化往往需要大量的視覺語言去烘托氣氛、用輔助性的元素去增強觀賞的趣味。

實戰分析型的主要是需要消除不必要的視覺雜音、強化傳達的力度；因此這就是一個尺度的問題，是偏向品牌創意的手法多一點，還是偏向傳統UI的手法多一點，君可自決~

2. 反面案例解析

以下的案例是我自己工作中犯的錯誤，拿出來共勉（捂臉233333）。

做的時候由于可視化的經驗并不是很多，在選用顏色的過程中并沒有把顏色的層級拉的特別開，導致長時間觀賞容易產生識別不清的問題，進一步講有可能在比對數據過程中產生認知障礙。

回首一看，中央的核心區插畫的比重大于數據本身要表達的內容，出現了喧賓奪主的情況；這也是一些設計師容易犯的錯誤，需要再次明確所有的手法和表達方式都是服從一個原則，即清晰有效地傳達與溝通信息。

設想一下，一個充滿數據的界面本身就是會伴隨視覺疲勞的。人是有惰性的，會自然的抗拒一些不清晰不明確的展現方式。數據可視化在我們理解中就是通過設計師清晰有效地傳達與溝通信息，使人有能力抗拒自己的惰性去從枯燥的數據中分析出超額信息。

二、挑選頁面字體

數據可視化和大量數字打交道，選對數字的字體挺重要的。涉及到字體版權的問題請自行解決，在推薦字體之前有兩件事情需要注意下：

第一、文字習慣左對齊，數字習慣右對齊。

文字左對齊是人一般從左至右閱讀，數字右對齊能夠快速識別數據量的大小，容易與其他數據比對。因此在選用數字字體的時候，盡量使用字間距相同的字體（比如Lato字體和DIN字體，注意PS中比對的時候需要選擇度量標準，使用視覺的字間距會有問題），這樣比對數據的時候字間距相同更容易產生比對結果。

第二、選用數字字體的時候需要檢查下常用字符是否有缺失、是否顯示正常。

比如錢幣的符號“￥”和“$”以及“%”。還有就是“1”和“7”、“0”和“O”這兩個需要能夠清晰識別。（國外的很多字體是沒有人民幣的符號的，DIN的0和O并不是特別好識別，故很多公司會自己改良字體滿足自身業務的要求。）

我們最長使用的就是思源黑體、思源宋體，開源并且字體庫全。缺點就是比較中性，在數字上辨識度不是很友好，因此我們在數字上最常使用的就是DIN字體。DIN 是德國標準協會，Deutsches Institut für Normung 的首字母縮寫。1975年起，德國政府把DIN作為國家標準體系，DIN 標準在國際和歐洲范圍內被廣泛使用。DIN 字體繼承了嚴謹可識別度高，被廣泛運用。

DIN也是有缺陷的，支付寶設計師SKY在專欄里也講過4的開頭較大，以及5，6字體的圓形不夠一致，7縮小后識別度問題，所以很多公司都會基于這些問題進行二次設計，比如微信錢包、京東金融、百度金融都在一些地方對DIN字體進行了微調后使用。

接下來我們直接推薦幾個有風格的英文和數字字體給大家（私貨環節！）：

1. 英文字體

1）Futura

Futura這個字體是我自己特別喜歡的一個字體，字體表現很現代，看上去特別利落，繼承了包豪斯的設計理念。

2）Optima

Optima也是我個人比較心水的一款，字體充滿人文主義。字體本身嚴格遵循了黃金分割原則，比例優美，字里行間充滿了變化。

3）Garamond

Garamond簡直就是襯線體之中的典范，就這么說吧，經典的設計中一定會出現他的身影。

4）Bodoni

Bodoni被譽為“現代主義風格最完美的體現”。字體粗細對比強烈，給人浪漫的感覺。

5）Didot

Didot和Bodoni很相似，都是給人浪漫的感覺，不同的是Didot在數字上面做了不一樣的處理，兩者在電商上使用都蠻多的，一般用做價格顯示。

2. 數字字體

1）DIN

DIN被德國人視為“國民字體”，有著悠久的歷史。德國的路標和路牌的標準字體就是DIN。其中的4這個設計挺有個性和特點的，容易辯識出來。除了前面說的問題，真的是精準的徳國工藝阿（dog臉~）

2）lcdD

lcdD是常見的電子表數字的字體風格，更加端正鮮明的視覺效果，運用在數字提示等內容上，傾斜風的設計讓字體更有自己的獨特魅力。

3）Lato

Lato就是那種非常現代科技感的一款，并且具備了很多常用自己的特點，屬于那種用了不會出錯的字體。

4）Avanti

Avanti和DIN在字形上是很相似的，但是它的字形更加飽滿。差異主要在3、5、8這三個數字以及G、Q都做了不一樣的處理，上半部較小而下半部較大，多了一些變化和趣味性。這個字體還有一個細體，一粗一細，靈活使用。

5）Tensans

Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的轉折以及中圈部分都挺相似的，有點像Avanti字體的加粗版本。但是Tensans特征更加明顯，比如2、3、4、7的轉角尖銳，切角鋒利，具有很濃重的現代工業氣息，比較適合速度、剛猛、游戲等主題的設計。

6）Impact

Impact這個字體第一感覺就是厚重醒目，視覺沖擊力很強。特粗的筆畫、緊縮的間距以及狹窄的中宮，特別適合大標題和醒目的價格展示。

7）BebasNeue

字體字面比較秀長，筆畫流暢，簡約大方。適用于化妝品、服裝等女性向。

8）Niagara-Solid

和上面哪個BebasNeue是有點相像的，字面細瘦，挺拔優美。多了一些襯線體的字重和體勢的變化，設計感與裝飾感更強，尤為時尚，在女性、文化、時尚類中用的格外多。

9）Gaoel

Gaoel有著Avanti的韻味，但是更加年輕、圓潤，令人驚喜的是大寫的字母有著統一的特點，特別未來。不過需要注意的是該款沒有小寫，小寫就直接變成如下樣子。整體字體設計很圓潤，年輕化，可愛非常適合一些偏年輕化的產品，同時字重非常適合金融產品的字重效果！

10）Proxima Nova

Proxima Nova的style還是比較多的，我個人用的比較多還是在它的細體上做修改，比較纖細現代。

11）Gotham

Gotham號稱發布會字體，特別現代干凈的一款字體，這些年看到的較多是手機發布會的海報設計，纖細的字體壓在海報上很有力量。

12）Expansiva

Expansiva也是特別有個性的一款字體，用于做數字的也比較多，目前看到的可視化設計中存在，但是使用量并不多，由于字形骨骼的因素，用于數字上比較多。

 

作者：王亮亮，微信公眾號：曉之以厘

本文由 @王亮亮同學 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。