大數(shù)據(jù)可視化界面設(shè)計(jì)之五:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

2022-6-14    博博


前言


讀者朋友們大家好呀!(聲明:《字體篇》文章中所有的字體規(guī)范都只針對(duì)可視化大屏設(shè)計(jì),后臺(tái)可視化以及 B 端可視化的字體規(guī)范與其不同)

最近產(chǎn)出了很多東西,但都是以零碎的知識(shí)為主,主要是在社群進(jìn)行分享,因此有需要的小伙伴歡迎加我交流。


整體架構(gòu)


今天就帶大家好好聊一聊可視化大屏設(shè)計(jì)中的字體、字號(hào)、字重、字體優(yōu)化等一系列注意事項(xiàng)。字體篇主要分為四大模塊:字體選擇與字重、字號(hào)規(guī)范與應(yīng)用、字體優(yōu)化與交接、常用字體與推薦。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇


字體選擇與字重


文字是界面中最核心的元素,是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容,它的承載體即是字體。從字體的最基本屬性(字族、字類、字重、字號(hào)等)說起,熟悉字體的那些特征,了解字體在界面中的作用。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

1. 襯線體與無襯線體

襯線體

襯線又被稱為“字腳”,襯線體就是有邊角裝飾的字體。我們常用的西文字體 Times New Roman 等;中文比較常見的比如宋體、明體等。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

無襯線體

無襯線體則與襯線體相反,通常是機(jī)械和統(tǒng)一粗細(xì)的線條,沒有邊角的裝飾。最具代表性的 Arial、Helvetica 的西文字體,中文比較常見的比如黑體,微軟雅黑等。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

總結(jié)

無襯線字體所具備的技術(shù)感和理性氣質(zhì),更受科技型企業(yè)或品牌青睞,騰訊谷歌等互聯(lián)網(wǎng)企業(yè)都是選用的無襯線體;襯線字體的優(yōu)雅與復(fù)古,則常用于藝術(shù)性文字,時(shí)尚品牌等。

因此在具有濃厚技術(shù)的可視化氛圍中,體現(xiàn)科技感和數(shù)字感,結(jié)合我們的觀測(cè)體驗(yàn),展示形式等,我們統(tǒng)一選用的字體是無襯線體。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

2. 中文字體

字體選擇

在使用數(shù)字屏幕閱讀時(shí),字體的選擇要選用無襯線體(比如黑體,微軟雅黑)厚重一點(diǎn),不可選用襯線體(比如宋體,書法體)比較單薄。

注意事項(xiàng)

標(biāo)題可以用 Bold,更厚重,更加醒目,且不需要長(zhǎng)時(shí)間觀看;正文由于需要長(zhǎng)時(shí)間觀看,因此采用 Regular 字重,觀感以及體驗(yàn)更佳;

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

3. 英文字體

字體選擇

英文字體類型的使用,英文選擇更明顯的粗體,因?yàn)橐故緮?shù)據(jù),使得數(shù)據(jù)展示更加直觀,依舊是選用無襯線體,比較推薦:D-DIN 字體。

注意事項(xiàng)

字重用 Regular,更加纖細(xì)精致,英文字體分為大小寫,一般推薦使用純大寫模式,因?yàn)榇髮懣梢员WC字體本身整齊,并且寬高都是一致的,對(duì)于排版以及展示會(huì)更加友好。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

4. 數(shù)字字體

字體選擇

數(shù)字字體類型的使用,考慮畫面的字體的種類不超過三種,并考慮到字體的統(tǒng)一性,數(shù)字的字體與英文字體保持統(tǒng)一,比較推薦:D-DIN 字體。

注意事項(xiàng)

數(shù)字字體的字重盡量使用 Bold,因?yàn)檎故靖用黠@,數(shù)字的展示一般都為數(shù)據(jù)展示,在界面的展示中,一般數(shù)字字體會(huì)比同字號(hào)下中文小 4-6px,因此展示是保證數(shù)據(jù)清晰顯示,數(shù)字的字體大一點(diǎn)數(shù)據(jù)才能更清晰,更符合數(shù)據(jù)可視化展示。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

數(shù)字字體盡量選用等距字體,比如數(shù)字“1”和“0”,有些字體的間距會(huì)相應(yīng)的縮小,我們要選用的就是等距字體,這樣在做一些列表數(shù)據(jù)對(duì)齊的時(shí)候,數(shù)據(jù)展示更加友好。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇


字號(hào)規(guī)范與應(yīng)用


政府類客戶對(duì)于文字大小粗細(xì)的追求可以說是非常的偏激,字體加大加粗幾乎成了標(biāo)配,這種需求下,我們能做的就是在原有規(guī)范的基礎(chǔ)上盡量去提升字號(hào)和字重。

1. 常規(guī) 16:9 屏

常規(guī) 16:9 指的是 1920*1080 的分辨率

在字體大小的選擇上,參考了頁面上常規(guī)大小,定義了一套關(guān)于不同尺寸下的標(biāo)準(zhǔn)字號(hào),正常 1080P 頁面,最小字號(hào)不小于 16px。

此處字號(hào)并不是絕對(duì),因?yàn)榭紤]到目標(biāo)群體適老化的原因,我們主動(dòng)提高了字體的大小,一切都是為了提高客戶的觀測(cè)體驗(yàn),具體字號(hào)大小還需要參考設(shè)備清晰度,環(huán)境燈光,視距,人為原因等因素。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

2. 常規(guī) 32:9 屏

常規(guī) 32:9 指的是 3840*1080 的分辨率

在字體大小的選擇上,其實(shí)是兩塊 1080P 的屏幕進(jìn)行拼接,因此如果畫面內(nèi)容較多時(shí),定義最小字號(hào)不小于 16px。

如果畫面內(nèi)容較少時(shí),具體字號(hào)大小還需要參考設(shè)備清晰度,環(huán)境燈光,視距等因素,對(duì)字體進(jìn)行相應(yīng)的放大,比例合適即可。

此處字號(hào)并不是絕對(duì),因?yàn)榭紤]到目標(biāo)群體適老化的原因,我們主動(dòng)提高了字體的大小,一切都是為了提高客戶的觀測(cè)體驗(yàn)。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

3. 特殊尺寸屏

特殊尺寸指的是非主流的分辨率,比如 2880*1920 的分辨率

這塊的字號(hào)大小比較難定義,因?yàn)樾枰紤]的因素很多,總體來說字號(hào)大小如果高度在 1080px 左右,那么就按 16:9 的字號(hào)規(guī)范來算。

如果高度高于 1080 且很多,則需要等比計(jì)算或者放大,具體實(shí)踐出的準(zhǔn)確數(shù)值還得需要根據(jù)大屏的實(shí)際情況來綜合考慮,這里只是提供一些基礎(chǔ)計(jì)算方式。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

4. 字號(hào)影響因素

字號(hào)的大小受到屏幕大小的影響;字號(hào)的大小受到界面內(nèi)容的影響;字號(hào)的大小受到觀測(cè)距離的影響;字號(hào)的大小受到設(shè)備性能的影響;字號(hào)的大小受到主觀人為的影響;

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇


字體優(yōu)化與交接


給開發(fā)的字體太大怎么辦?如何優(yōu)化?開發(fā)采用默認(rèn)字體去開發(fā)怎么辦?開發(fā)用部署電腦沒有這個(gè)字體去打發(fā)你又該怎么辦?

1. 優(yōu)化字體

給開發(fā)的字體太大,占用內(nèi)存該怎么辦?

其實(shí)我們可以用一些特殊的方法對(duì)原有的字體包進(jìn)行優(yōu)化,比如英文字體,我們可以刪除非必要的中文字體和數(shù)字,符號(hào),只保留一些必要的英文字母。具體方法如下,我們可以用 FontCreator 軟件去進(jìn)行字體的優(yōu)化與刪減,并修改字體細(xì)節(jié),重新命名發(fā)布。

同時(shí)如果有意向的同學(xué),也可以用自己設(shè)計(jì)的字體去應(yīng)用到開發(fā),這樣的操作不是一舉兩得嗎?

優(yōu)化字體教程: https://www.bilibili.com/video/av82311138

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

2. 開發(fā)交接問題解析

開發(fā)采用默認(rèn)字體去開發(fā)怎么辦?

默認(rèn)字體開發(fā)可能有時(shí)候會(huì)出現(xiàn)文字換行,或者文字放不下的情況,因?yàn)椴煌煮w的字間距以及大小可能是不同的,因此在初期就需要跟開發(fā)協(xié)調(diào)好,跟設(shè)計(jì)效果圖的字體保持同步,這樣才能保證設(shè)計(jì)效果的還原。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

本地部署電腦沒有字體該怎么辦?

字體的存放一般是有兩種,一種是放到單獨(dú)的服務(wù)器然后每次加載去服務(wù)器訪問字體,另一種是跟代碼放到一起。對(duì)于字體大小的要求。本地存儲(chǔ)不需要考慮字體包的大小,云存儲(chǔ)需要考慮字體包大小。

云存儲(chǔ)一般字體包大小的話可以限制在 2、3M 左右,5、6M 的字體包就已經(jīng)非常大了,太大會(huì)影響我們字體的讀取,畫面加載很慢。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

最優(yōu)解就是在部署本地的電腦上安裝你需要的字體,這樣的話程序就自動(dòng)讀取,可以識(shí)別本地部署的字體;如果不支持本地化部署的,字體是存放在服務(wù)器或者是跟代碼打包放一起的,可以要求開發(fā)在全局代碼中多寫幾個(gè)備用的字體。

比如你是 Windows 系統(tǒng),那么自帶的就是微軟雅黑,iOS 系統(tǒng)自帶的就是蘋方平臺(tái),會(huì)自動(dòng)根據(jù)寫出的代碼按順序篩選自帶的系統(tǒng)字體。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇


常用字體與推薦


一些特別好用的字體,會(huì)在設(shè)計(jì)過程中提升畫面視覺,因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。附件下載。

1. 可視化常用中文字體

中文字體包含了一些可以做標(biāo)題的一些造型比較好看的字體,比如優(yōu)設(shè)標(biāo)題黑,站酷高端黑體,盧帥正銳黑體,胡曉波男神體等等。可做正文字體的比如,蘋方簡(jiǎn)體,思源黑體等等。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇

2. 可視化常用英文/數(shù)字字體

英文字體和數(shù)字字體主要是分享了一些數(shù)據(jù)展示比較奇特的造型字體,比如:DS-digital、Furore、以及正常數(shù)據(jù)展示的 D-DIN 字體家族等。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:字體篇


全篇總結(jié)


字體的最基本屬性:字族、字類、字重、字號(hào),通過四種基本屬性為切入點(diǎn),精準(zhǔn)的去講述大屏可視化的字體規(guī)范和樣式。

在可視化大屏設(shè)計(jì)中,字體更加偏向于無襯線體,無襯線字體所具備的技術(shù)感和理性氣質(zhì),更受科技型企業(yè)或品牌青睞;

在可視化大屏中,展示數(shù)據(jù)的重要性不言而喻,因此要注意中文、英文、數(shù)字字體的選擇以及注意事項(xiàng),一切以數(shù)據(jù)展示更加明顯為前提;

在不同屏幕中,可視化大屏的字號(hào)大小規(guī)范是有區(qū)別的,并且需要結(jié)合影響字號(hào)的五大因素:屏幕大小、界面內(nèi)容、觀測(cè)距離、設(shè)備性能、主觀人為去制定字體規(guī)范;

通過 FontCreator 軟件去對(duì)字體進(jìn)行優(yōu)化,掌握字體的刪減發(fā)布以及交付開發(fā)的方法;

了解開發(fā)存儲(chǔ)字體的兩種形式,一種是本地化部署,一種是與代碼打包服務(wù)器云存儲(chǔ),以及了解兩種方式的優(yōu)缺點(diǎn);

了解可視化開發(fā)關(guān)于字體交接時(shí)的注意事項(xiàng),可以通過自己的理解去解決工作中的關(guān)于字體的問題;

推薦了常用的可視化大屏的字體:中文字體、英文字體;

如果畫面內(nèi)容較少時(shí),可以適當(dāng)提高字號(hào),反之亦然,比例合適即可;

可視化大屏設(shè)計(jì)字體規(guī)范不存在絕對(duì)字體規(guī)范。

作者:生活因你而火熱

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.820esy.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ì)公司



更多精彩文章:

大數(shù)據(jù)可視化界面設(shè)計(jì)之一:可視化大屏設(shè)計(jì)快速入門指南

大數(shù)據(jù)可視化界面設(shè)計(jì)之九:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:設(shè)備篇

大數(shù)據(jù)可視化界面設(shè)計(jì)之十:數(shù)據(jù)可視化必修課:表格篇














分享本文至:

日歷

鏈接

個(gè)人資料

存檔