手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

政務可視化設計經(jīng)驗-頁面視覺-上

2020-11-30 周周

前言

從入行到如今的這些年中，眼中的設計風格不斷變化。伴隨這些年行業(yè)的興起，從最早的擬物風到現(xiàn)在的內(nèi)容當?shù)?，越來越多的設計師參與其中，為行業(yè)貢獻著自己的理解。但也發(fā)現(xiàn)同質(zhì)化的現(xiàn)象越趨明顯，個人認為這里面有設計師本身的問題，也有行業(yè)風氣的問題。同質(zhì)化的現(xiàn)象有很多的組成因素，可能是頁面視覺是直接的拿來主義，亦可能是脫離不了舒適圈的習慣為之。

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

那么如何跳出這個慣性思維？我這邊借用馮小剛導演在十三邀里說的一段話來解釋。創(chuàng)作過程太正常很多時候是經(jīng)驗在發(fā)揮作用，每次都和自己的經(jīng)驗作斗爭，最后可能會出現(xiàn)一個在經(jīng)驗之外又讓自己激動的東西。簡而言之就是革了自己的命?？赡苣奶煳蚁朊靼走@個問題，會再寫一章如何創(chuàng)新來講這個問題。

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

一、定義頁面配色

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

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

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

色彩心理學普遍還是適用于可視化大屏的，顏色對于人意識的傾向性還是比較強烈的。但是需要明確的是在數(shù)據(jù)可視化領域中，有些配色規(guī)則并不適用。在傳統(tǒng)UI設計中我們一般會擬訂主色輔色特殊狀態(tài)色，甚至在灰階會把標題、正文、背景的顏色區(qū)分做全。這樣做的好處就組件一致性，給人統(tǒng)一的感覺。數(shù)據(jù)可視化一般會定一個主基調(diào)，圍繞這個主基調(diào)會用至少5-6中以上的調(diào)色板進行設計。

（一）使用足夠并且容易區(qū)分層級的顏色種類

假設我們需要做一個政務的可視化系統(tǒng)，在設計初期敲定了以靛藍（H:200）為主色調(diào)的設定。那么我們會尋找在這個顏色周邊的鄰近色去做這個靛藍色調(diào)的搭配，比如在青（H:180）和深藍（H:220），使得整個大面積的色彩整體上過渡會比較自然。通過對純度S和明度B的調(diào)節(jié)，我們可以找到很多色調(diào)用于數(shù)字、文字、點線面等視覺元素。然后在靛藍色調(diào)的對比色上去尋找用于高亮的展示，比如綠（H:120）這類的，起到強化主色調(diào)的層級作用。最后找到靛藍色的互補色左右的紅（H:10）和黃（H:45）用于重點強調(diào)內(nèi)容。主色調(diào)的互補色需要少量并且珍惜的使用，需要有但不是大面積得使用。

色彩是為了突出內(nèi)容的重要信息，請有選擇、有策略的使用顏色，切勿濫用。配色沒有絕對的好壞，只有在當前場景下是否適合，色環(huán)理論只能大致告訴你一些配色的方式，最重要的是靠設計師自己眼睛去感受顏色帶來的沖擊力。上述的配色方式僅僅是我們工作的一個慣用方式，不同項目敲定的內(nèi)容也不同，請靈活使用。

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

我們上述的配色方案是有傾向觀賞展示型的，由于用戶使用大屏普遍都是匯報展覽并且用戶樣本容量小。故在表達的過程中大量借鑒了運營設計的方式方法，因此配色方式存在包容性不夠的現(xiàn)象，對于色盲色弱的人群是有障礙的。比如青色、藍色、紫色在色域展開的過程中，選取其中幾個顏色做疊加色板樣式時，灰色模式下存在顏色拉不開的現(xiàn)象?？赡苁恰八{色”是對色障人群最友好的顏色，AntV保留MPC疊加色板，但同時在使用建議中也寫明推薦使用MOB疊加色板。

在數(shù)據(jù)可視化領域中，還需要界定清楚你做的是偏向觀賞展示型的還是偏向?qū)崙?zhàn)分析型。這兩者的區(qū)別主要在觀賞性的數(shù)據(jù)可視化往往需要大量的視覺語言去烘托氣氛、用輔助性的元素去增強觀賞的趣味。實戰(zhàn)分析型的主要是需要消除不必要的視覺雜音、強化傳達的力度。因此這就是一個尺度的問題，是偏向品牌創(chuàng)意的手法多一點，還是偏向傳統(tǒng)UI的手法多一點，君可自決~

（二）反面案例解析

以下的案例是我自己工作中犯的錯誤，拿出來共勉（捂臉233333）。做的時候由于可視化的經(jīng)驗并不是很多，在選用顏色的過程中并沒有把顏色的層級拉的特別開，導致長時間觀賞容易產(chǎn)生識別不清的問題，進一步講有可能在比對數(shù)據(jù)過程中產(chǎn)生認知障礙?；厥滓豢?，中央的核心區(qū)插畫的比重大于數(shù)據(jù)本身要表達的內(nèi)容，出現(xiàn)了喧賓奪主的情況。這也是一些設計師容易犯的錯誤，需要再次明確所有的手法和表達方式都是服從一個原則，即清晰有效地傳達與溝通信息。

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

二、挑選頁面字體

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

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

第二、選用數(shù)字字體的時候需要檢查下常用字符是否有缺失、是否顯示正常。比如錢幣的符號“￥”和“$”以及“%”。還有就是“1”和“7”、“0”和“O”這兩個需要能夠清晰識別。（國外的很多字體是沒有人民幣的符號的，DIN的0和O并不是特別好識別，故很多公司會自己改良字體滿足自身業(yè)務的要求）

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

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

接下來我們直接推薦幾個有風格的英文和數(shù)字字體給大家（私貨環(huán)節(jié)?。?/span>

（一）英文字體

1.Futura

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

2.Optima

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

3.Garamond

Garamond簡直就是襯線體之中的典范，就這么說吧，經(jīng)典的設計中一定會出現(xiàn)他的身影。

4.Bodoni

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

5.Didot

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

（二）數(shù)字字體

1.DIN

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

2.lcdD

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

3.Lato

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

4.Avanti

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

5.Tensans

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