2020-11-30 周周
從入行到如今的這些年中，眼中的設(shè)計(jì)風(fēng)格不斷變化。伴隨這些年行業(yè)的興起，從最早的擬物風(fēng)到現(xiàn)在的內(nèi)容當(dāng)?shù)溃絹?lái)越多的設(shè)計(jì)師參與其中，為行業(yè)貢獻(xiàn)著自己的理解。但也發(fā)現(xiàn)同質(zhì)化的現(xiàn)象越趨明顯，個(gè)人認(rèn)為這里面有設(shè)計(jì)師本身的問題，也有行業(yè)風(fēng)氣的問題。同質(zhì)化的現(xiàn)象有很多的組成因素，可能是頁(yè)面視覺是直接的拿來(lái)主義，亦可能是脫離不了舒適圈的習(xí)慣為之。
我很擔(dān)心的一件事情就是我們一味的反對(duì)同質(zhì)化的假，最后會(huì)演變成另外一種假。是一味的擯棄，還是部分的接納。這是一個(gè)界限的問題，而這個(gè)界限我還沒想明白。如今風(fēng)格太現(xiàn)成，都像麥當(dāng)勞一樣，思想的麥當(dāng)勞，短暫的吃下去了，飽了，不去想了。這個(gè)慣性思維很可怕，最可怕的是可能有段時(shí)間自身都意識(shí)不到這個(gè)問題。
那么如何跳出這個(gè)慣性思維？我這邊借用馮小剛導(dǎo)演在十三邀里說(shuō)的一段話來(lái)解釋。創(chuàng)作過(guò)程太正常很多時(shí)候是經(jīng)驗(yàn)在發(fā)揮作用，每次都和自己的經(jīng)驗(yàn)作斗爭(zhēng)，最后可能會(huì)出現(xiàn)一個(gè)在經(jīng)驗(yàn)之外又讓自己激動(dòng)的東西。簡(jiǎn)而言之就是革了自己的命?？赡苣奶煳蚁朊靼走@個(gè)問題，會(huì)再寫一章如何創(chuàng)新來(lái)講這個(gè)問題。
那么本章主要講我們是如何在前期定義一張大屏的風(fēng)格？主要可以從幾個(gè)方面來(lái)講：配色、字體、構(gòu)圖、氛圍。
定義大屏配色的前提是對(duì)于用戶的政務(wù)有著充分的調(diào)研，明白是主管哪個(gè)行業(yè)的，分別用對(duì)應(yīng)的色系去定調(diào)子。
舉個(gè)例子，生物醫(yī)藥、環(huán)保等行業(yè)通常選用能表達(dá)健康安全的綠色；公安、教育、政府等通常選用能表達(dá)科技未來(lái)的藍(lán)色；消費(fèi)業(yè)、服務(wù)業(yè)等行業(yè)通常選用能表達(dá)熱鬧、朝氣的暖色調(diào)。
它們有個(gè)共性就是主色調(diào)不管傾向于哪個(gè)顏色，背景通常是對(duì)應(yīng)顏色的暗色系。因?yàn)榭梢暬笃潦褂铆h(huán)境通常是在室內(nèi)、展廳等這種外部環(huán)境比較暗的地方，避免對(duì)于觀賞者視覺上的不適應(yīng)。而且這也有幫助觀賞者對(duì)于數(shù)據(jù)的聚焦比對(duì)的工作，暗色調(diào)的背景加上高亮的配色，也容易在界面中將層次做出來(lái)，這點(diǎn)特別適用與3D城市的構(gòu)建，以后我們會(huì)講述如何在城市中做出層次對(duì)比的方法。
色彩心理學(xué)普遍還是適用于可視化大屏的，顏色對(duì)于人意識(shí)的傾向性還是比較強(qiáng)烈的。但是需要明確的是在數(shù)據(jù)可視化領(lǐng)域中，有些配色規(guī)則并不適用。在傳統(tǒng)UI設(shè)計(jì)中我們一般會(huì)擬訂主色輔色特殊狀態(tài)色，甚至在灰階會(huì)把標(biāo)題、正文、背景的顏色區(qū)分做全。這樣做的好處就組件一致性，給人統(tǒng)一的感覺。數(shù)據(jù)可視化一般會(huì)定一個(gè)主基調(diào)，圍繞這個(gè)主基調(diào)會(huì)用至少5-6中以上的調(diào)色板進(jìn)行設(shè)計(jì)。
假設(shè)我們需要做一個(gè)政務(wù)的可視化系統(tǒng)，在設(shè)計(jì)初期敲定了以靛藍(lán)（H:200）為主色調(diào)的設(shè)定。那么我們會(huì)尋找在這個(gè)顏色周邊的鄰近色去做這個(gè)靛藍(lán)色調(diào)的搭配，比如在青（H:180）和深藍(lán)（H:220），使得整個(gè)大面積的色彩整體上過(guò)渡會(huì)比較自然。通過(guò)對(duì)純度S和明度B的調(diào)節(jié)，我們可以找到很多色調(diào)用于數(shù)字、文字、點(diǎn)線面等視覺元素。然后在靛藍(lán)色調(diào)的對(duì)比色上去尋找用于高亮的展示，比如綠（H:120）這類的，起到強(qiáng)化主色調(diào)的層級(jí)作用。最后找到靛藍(lán)色的互補(bǔ)色左右的紅（H:10）和黃（H:45）用于重點(diǎn)強(qiáng)調(diào)內(nèi)容。主色調(diào)的互補(bǔ)色需要少量并且珍惜的使用，需要有但不是大面積得使用。
色彩是為了突出內(nèi)容的重要信息，請(qǐng)有選擇、有策略的使用顏色，切勿濫用。配色沒有絕對(duì)的好壞，只有在當(dāng)前場(chǎng)景下是否適合，色環(huán)理論只能大致告訴你一些配色的方式，最重要的是靠設(shè)計(jì)師自己眼睛去感受顏色帶來(lái)的沖擊力。上述的配色方式僅僅是我們工作的一個(gè)慣用方式，不同項(xiàng)目敲定的內(nèi)容也不同，請(qǐng)靈活使用。
當(dāng)然我們?cè)谶@邊提及的色調(diào)并不是一個(gè)確定的值，而是圍繞選定顏色周邊的一個(gè)色域?？赡茉谖淖只蛘邤?shù)字上會(huì)沿用傳統(tǒng)UI的規(guī)則，保持特定的統(tǒng)一。但是在點(diǎn)線面、配飾、特殊狀態(tài)的觸發(fā)等元素上使用這些色域去提高整個(gè)界面的層次和細(xì)節(jié)，使得畫面沒有那么硬，各個(gè)板塊之間是有舒服得過(guò)渡。這里的色域以前是需要自己將色調(diào)于黑白二色融合的漸變中選取不同位置的顏色組成色板，如今AntDesign的輪子比較友好，填入主色就可以對(duì)應(yīng)生成有層級(jí)的顏色。
我們上述的配色方案是有傾向觀賞展示型的，由于用戶使用大屏普遍都是匯報(bào)展覽并且用戶樣本容量小。故在表達(dá)的過(guò)程中大量借鑒了運(yùn)營(yíng)設(shè)計(jì)的方式方法，因此配色方式存在包容性不夠的現(xiàn)象，對(duì)于色盲色弱的人群是有障礙的。比如青色、藍(lán)色、紫色在色域展開的過(guò)程中，選取其中幾個(gè)顏色做疊加色板樣式時(shí)，灰色模式下存在顏色拉不開的現(xiàn)象。可能是“藍(lán)色”是對(duì)色障人群最友好的顏色，AntV保留MPC疊加色板，但同時(shí)在使用建議中也寫明推薦使用MOB疊加色板。
在數(shù)據(jù)可視化領(lǐng)域中，還需要界定清楚你做的是偏向觀賞展示型的還是偏向?qū)崙?zhàn)分析型。這兩者的區(qū)別主要在觀賞性的數(shù)據(jù)可視化往往需要大量的視覺語(yǔ)言去烘托氣氛、用輔助性的元素去增強(qiáng)觀賞的趣味。實(shí)戰(zhàn)分析型的主要是需要消除不必要的視覺雜音、強(qiáng)化傳達(dá)的力度。因此這就是一個(gè)尺度的問題，是偏向品牌創(chuàng)意的手法多一點(diǎn)，還是偏向傳統(tǒng)UI的手法多一點(diǎn)，君可自決~
以下的案例是我自己工作中犯的錯(cuò)誤，拿出來(lái)共勉（捂臉233333）。做的時(shí)候由于可視化的經(jīng)驗(yàn)并不是很多，在選用顏色的過(guò)程中并沒有把顏色的層級(jí)拉的特別開，導(dǎo)致長(zhǎng)時(shí)間觀賞容易產(chǎn)生識(shí)別不清的問題，進(jìn)一步講有可能在比對(duì)數(shù)據(jù)過(guò)程中產(chǎn)生認(rèn)知障礙?；厥滓豢矗醒氲暮诵膮^(qū)插畫的比重大于數(shù)據(jù)本身要表達(dá)的內(nèi)容，出現(xiàn)了喧賓奪主的情況。這也是一些設(shè)計(jì)師容易犯的錯(cuò)誤，需要再次明確所有的手法和表達(dá)方式都是服從一個(gè)原則，即清晰有效地傳達(dá)與溝通信息。
設(shè)想一下，一個(gè)充滿數(shù)據(jù)的界面本身就是會(huì)伴隨視覺疲勞的。人是有惰性的，會(huì)自然的抗拒一些不清晰不明確的展現(xiàn)方式。數(shù)據(jù)可視化在我們理解中就是通過(guò)設(shè)計(jì)師清晰有效地傳達(dá)與溝通信息，使人有能力抗拒自己的惰性去從枯燥的數(shù)據(jù)中分析出超額信息。
數(shù)據(jù)可視化和大量數(shù)字打交道，選對(duì)數(shù)字的字體挺重要的。涉及到字體版權(quán)的問題請(qǐng)自行解決，在推薦字體之前有兩件事情需要注意下：
第一、文字習(xí)慣左對(duì)齊，數(shù)字習(xí)慣右對(duì)齊。文字左對(duì)齊是人一般從左至右閱讀，數(shù)字右對(duì)齊能夠快速識(shí)別數(shù)據(jù)量的大小，容易與其他數(shù)據(jù)比對(duì)。因此在選用數(shù)字字體的時(shí)候，盡量使用字間距相同的字體（比如Lato字體和DIN字體，注意PS中比對(duì)的時(shí)候需要選擇度量標(biāo)準(zhǔn)，使用視覺的字間距會(huì)有問題），這樣比對(duì)數(shù)據(jù)的時(shí)候字間距相同更容易產(chǎn)生比對(duì)結(jié)果。
第二、選用數(shù)字字體的時(shí)候需要檢查下常用字符是否有缺失、是否顯示正常。比如錢幣的符號(hào)“￥”和“$”以及“%”。還有就是“1”和“7”、“0”和“O”這兩個(gè)需要能夠清晰識(shí)別。（國(guó)外的很多字體是沒有人民幣的符號(hào)的，DIN的0和O并不是特別好識(shí)別，故很多公司會(huì)自己改良字體滿足自身業(yè)務(wù)的要求）
我們最長(zhǎng)使用的就是思源黑體、思源宋體，開源并且字體庫(kù)全。缺點(diǎn)就是比較中性，在數(shù)字上辨識(shí)度不是很友好，因此我們?cè)跀?shù)字上最常使用的就是DIN字體。DIN 是德國(guó)標(biāo)準(zhǔn)協(xié)會(huì)，Deutsches Institut für Normung 的首字母縮寫。1975年起，德國(guó)政府把DIN作為國(guó)家標(biāo)準(zhǔn)體系，DIN 標(biāo)準(zhǔn)在國(guó)際和歐洲范圍內(nèi)被廣泛使用。DIN 字體繼承了嚴(yán)謹(jǐn)可識(shí)別度高，被廣泛運(yùn)用。
DIN也是有缺陷的，支付寶設(shè)計(jì)師SKY在專欄里也講過(guò)4的開頭較大，以及5，6字體的圓形不夠一致，7縮小后識(shí)別度問題，所以很多公司都會(huì)基于這些問題進(jìn)行二次設(shè)計(jì)，比如微信錢包、京東金融、百度金融都在一些地方對(duì)DIN字體進(jìn)行了微調(diào)后使用。
接下來(lái)我們直接推薦幾個(gè)有風(fēng)格的英文和數(shù)字字體給大家（私貨環(huán)節(jié)！）：
Futura這個(gè)字體是我自己特別喜歡的一個(gè)字體，字體表現(xiàn)很現(xiàn)代，看上去特別利落，繼承了包豪斯的設(shè)計(jì)理念。
Optima也是我個(gè)人比較心水的一款，字體充滿人文主義。字體本身嚴(yán)格遵循了黃金分割原則，比例優(yōu)美，字里行間充滿了變化。
Garamond簡(jiǎn)直就是襯線體之中的典范，就這么說(shuō)吧，經(jīng)典的設(shè)計(jì)中一定會(huì)出現(xiàn)他的身影。
Bodoni被譽(yù)為“現(xiàn)代主義風(fēng)格最完美的體現(xiàn)”。字體粗細(xì)對(duì)比強(qiáng)烈，給人浪漫的感覺。
Didot和Bodoni很相似，都是給人浪漫的感覺，不同的是Didot在數(shù)字上面做了不一樣的處理，兩者在電商上使用都蠻多的，一般用做價(jià)格顯示。
DIN被德國(guó)人視為“國(guó)民字體”，有著悠久的歷史。德國(guó)的路標(biāo)和路牌的標(biāo)準(zhǔn)字體就是DIN。其中的4這個(gè)設(shè)計(jì)挺有個(gè)性和特點(diǎn)的，容易辯識(shí)出來(lái)。除了前面說(shuō)的問題，真的是精準(zhǔn)的徳國(guó)工藝阿（dog臉~）
lcdD是常見的電子表數(shù)字的字體風(fēng)格，更加端正鮮明的視覺效果，運(yùn)用在數(shù)字提示等內(nèi)容上，傾斜風(fēng)的設(shè)計(jì)讓字體更有自己的獨(dú)特魅力。
Lato就是那種非?，F(xiàn)代科技感的一款，并且具備了很多常用自己的特點(diǎn)，屬于那種用了不會(huì)出錯(cuò)的字體。
Avanti和DIN在字形上是很相似的，但是它的字形更加飽滿。差異主要在3、5、8這三個(gè)數(shù)字以及G、Q都做了不一樣的處理，上半部較小而下半部較大，多了一些變化和趣味性。這個(gè)字體還有一個(gè)細(xì)體，一粗一細(xì)，靈活使用。
Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的轉(zhuǎn)折以及中圈部分都挺相似的，有點(diǎn)像Avanti字體的加粗版本。但是Tensans特征更加明顯，比如2、3、4、7的轉(zhuǎn)角尖銳，切角鋒利，具有很濃重的現(xiàn)代工業(yè)氣息，比較適合速度、剛猛、游戲等主題的設(shè)計(jì)。
Impact這個(gè)字體第一感覺就是厚重醒目，視覺沖擊力很強(qiáng)。特粗的筆畫、緊縮的間距以及狹窄的中宮，特別適合大標(biāo)題和醒目的價(jià)格展示。
字體字面比較秀長(zhǎng)，筆畫流暢，簡(jiǎn)約大方。適用于化妝品、服裝等女性向。
和上面哪個(gè)BebasNeue是有點(diǎn)相像的，字面細(xì)瘦，挺拔優(yōu)美。多了一些襯線體的字重和體勢(shì)的變化，設(shè)計(jì)感與裝飾感更強(qiáng)，尤為時(shí)尚，在女性、文化、時(shí)尚類中用的格外多。
Gaoel有著Avanti的韻味，但是更加年輕、圓潤(rùn)，令人驚喜的是大寫的字母有著統(tǒng)一的特點(diǎn)，特別未來(lái)。不過(guò)需要注意的是該款沒有小寫，小寫就直接變成如下樣子。整體字體設(shè)計(jì)很圓潤(rùn)，年輕化，可愛非常適合一些偏年輕化的產(chǎn)品，同時(shí)字重非常適合金融產(chǎn)品的字重效果！
Proxima Nova的style還是比較多的，我個(gè)人用的比較多還是在它的細(xì)體上做修改，比較纖細(xì)現(xiàn)代。
Gotham號(hào)稱發(fā)布會(huì)字體，特別現(xiàn)代干凈的一款字體，這些年看到的較多是手機(jī)發(fā)布會(huì)的海報(bào)設(shè)計(jì)，纖細(xì)的字體壓在海報(bào)上很有力量。
Expansiva也是特別有個(gè)性的一款字體，用于做數(shù)字的也比較多，目前看到的可視化設(shè)計(jì)中存在，但是使用量并不多，由于字形骨骼的因素，用于數(shù)字上比較多。
文章來(lái)源：tob.design 作者：王亮亮同學(xué)
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com