99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

可視化設計十要素-字體篇

2023-2-16    博博

整體架構


今天就帶大家好好聊一聊可視化大屏設計中的字體、字號、字重、字體優化等一系類注意事項。字體篇主要分為四大模塊:字體選擇與字重、字號規范與應用、字體優化與交接、常用字體與推薦。





字體選擇與字重


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



1、襯線體與無襯線體


襯線體

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


無襯線體

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


總結

無襯線字體所具備的技術感和理性氣質,更受科技型企業或品牌青睞,騰訊谷歌等互聯網企業都是選用的無襯線體;襯線字體的優雅與復古,則常用于藝術性文字,時尚品牌等。


因此在具有濃厚技術的可視化氛圍中體現科技感和數字感,結合我們的觀測體驗,展示形式等,我們統一選用的字體是無襯線體。



2、中文字體


a、字體選擇

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


b、注意事項

標題可以用Bold,更厚重,更加醒目,且不需要長時間觀看;正文由于需要長時間觀看,因此采用Regular字重,觀感以及體驗更佳;



3、英文字體


a、字體選擇

英文字體類型的使用,英文選擇更明顯的粗體,因為要展示數據,使得數據展示更加直觀,依舊是選用無襯線體,比較推薦:D-DIN字體。


b、注意事項

字重用Regular,更加纖細精致,英文字體分為大小寫,一般推薦使用純大寫模式,因為大寫可以保證字體本身整齊,并且寬高都是一致的,對于排版以及展示會更加友好。



4、數字字體


a、字體選擇

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


b、注意事項

數字字體的字重盡量使用Bold,因為展示更加明顯,數字的展示一般都為數據展示,在界面的展示中,一般數字字體會比同字號下中文小4-6px,因此展示是保證數據清晰顯示,數字的字體大一點數據才能更清晰,更符合數據可視化展示。


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




字號規范與應用


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


1、常規16:9屏


常規16:9指的是1920*1080的分辨率


在字體大小的選擇上,參考了頁面上常規大小,定義了一套關于不同尺寸下的標準字號,正常1080P頁面,最小字號不小于16px。


此處字號并不是絕對,因為考慮到目標群體適老化的原因,我們主動提高了字體的大小,一切都是為了提高客戶的觀測體驗,具體字號大小還需要參考設備清晰度,環境燈光,視距,人為原因等因素。



2、常規32:9屏


常規32:9指的是3840*1080的分辨率


在字體大小的選擇上,其實是兩塊1080P的屏幕進行拼接,因此如果畫面內容較多時,定義最小字號不小于16px。


如果畫面內容較少時,具體字號大小還需要參考設備清晰度,環境燈光,視距等因素,對字體進行相應的放大,比例合適即可。


此處字號并不是絕對,因為考慮到目標群體適老化的原因,我們主動提高了字體的大小,一切都是為了提高客戶的觀測體驗。



3、特殊尺寸屏


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


這塊的字號大小比較難定義,因為需要考慮的因素很多,總體來說字號大小如果高度在1080px左右,那么就按16:9的字號規范來算。


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



4、字號影響因素


字號的大小受到屏幕大小的影響;

字號的大小受到界面內容的影響;

字號的大小受到觀測距離的影響;

字號的大小受到設備性能的影響;

字號的大小受到主觀人為的影響;



字體優化與交接


給開發的字體太大怎么辦?如何優化?開發采用默認字體去開發怎么辦?開發用部署電腦沒有這個字體去打發你又該怎么辦?


1、優化字體


給開發的字體太大,占用內存該怎么辦?

其實我們可以用一些特殊的方法對原有的字體包進行優化,比如英文字體,我們可以刪除非必要的中文字體和數字,符號,只保留一些必要的英文字母。具體方法如下,我們可以用FontCreator軟件去進行字體的優化與刪減,并修改字體細節,重新命名發布。


同時如果有意向的同學,也可以用自己設計的字體去應用到開發,這樣的操作不是一舉兩得嗎?

優化字體教程:https://www.bilibili.com/video/av82311138



2、開發交接問題解析


a、開發采用默認字體去開發怎么辦?

默認字體開發可能有時候會出現文字換行,或者文字放不下的情況,因為不同字體的字間距以及大小可能是不同的,因此在初期就需要跟開發協調好,跟設計效果圖的字體保持同步,這樣才能保證設計效果的還原。


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

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


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


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


比如你是Windows系統,哪呢么自帶的就是微軟雅黑,IOS系統自帶的就是蘋方平臺,會自動根據寫出的代碼按順序篩選自帶的系統字體。



常用字體與推薦


一些特別好用的字體,會在設計過程中提升畫面視覺,因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。

可視化商用免費字體鏈接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取碼: owve


1、可視化常用中文字體


中文字體包含了一些可以做標題的一些造型比較好看的字體,比如優設標題黑,站酷高端黑體,盧帥正銳黑體,胡曉波男神體等等。可做正文字體的比如,蘋方簡體,思源黑體等等。



2、可視化常用英文/數字字體


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



全篇總結


1、字體的最基本屬性:字族、字類、字重、字號,通過四種基本屬性為切入點,精準的去講述大屏可視化的字體規范和樣式。


2、在可視化大屏設計中,字體更加偏向于無襯線體,無襯線字體所具備的技術感和理性氣質,更受科技型企業或品牌青睞;


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


4、在不同屏幕中,可視化大屏的字號大小規范是有區別的,并且需要結合影響字號的五大因素:屏幕大小、界面內容、觀測距離、設備性能、主觀人為去制定字體規范;


5、通過FontCreator軟件去對字體進行優化,掌握字體的刪減發布以及交付開發的方法;


6、了解開發存儲字體的兩種形式,一種是本地化部署,一種是與代碼打包服務器云存儲,以及了解兩種方式的優缺點;


7、了解可視化開發關于字體交接時的注意事項,可以通過自己的理解去解決工作中的關于字體的問題;


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


9、如果畫面內容較少時,可以適當提高字號,反之亦然,比例合適即可。


10、可視化大屏設計字體規范不存在絕對字體規范。



作者:AYONG_BDR      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計www.lapeinture.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

日歷

鏈接

個人資料

藍藍設計的小編 http://www.lapeinture.cn

存檔

99久久精品国产国产毛片| 免费的黄视频| 欧美大片毛片aaa免费看| 欧美激情一区二区三区在线播放 | 日韩一级黄色| 日韩一级黄色片| 天天做人人爱夜夜爽2020| 九九干| 国产一区二区精品久久| 精品在线观看国产| 成人a大片在线观看| 99久久精品国产麻豆| 免费国产在线视频| 999精品影视在线观看| 久久成人综合网| 九九久久国产精品大片| 久久久久久久网| 国产伦久视频免费观看视频| 韩国毛片基地| 亚洲天堂免费| 韩国毛片| 麻豆网站在线看| 91麻豆tv| 免费国产一级特黄aa大片在线| 精品视频一区二区三区免费| 91麻豆精品国产自产在线| 免费毛片基地| 欧美a级片免费看| 精品视频免费观看| 青青久久国产成人免费网站| 欧美激情在线精品video| 天天做日日爱| 91麻豆国产| 成人高清免费| 精品毛片视频| 九九干| 久久精品大片| 欧美另类videosbestsex高清| 香蕉视频亚洲一级| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 天天做人人爱夜夜爽2020毛片| 欧美大片aaaa一级毛片| 中文字幕一区二区三区 精品| 国产成人精品综合在线| 青青青草视频在线观看| 精品久久久久久综合网| 一级毛片视频播放| 精品视频一区二区| 国产网站免费| 亚洲精品永久一区| 精品在线免费播放| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 国产麻豆精品| 黄视频网站在线看| 久久国产一区二区| 一a一级片| 欧美一区二区三区在线观看| 可以免费看毛片的网站| 尤物视频网站在线| 日韩在线观看网站| 可以免费看毛片的网站| 国产不卡在线观看| 午夜激情视频在线播放| 韩国三级香港三级日本三级la | 成人在免费观看视频国产| 亚洲精品中文字幕久久久久久| 日韩中文字幕在线播放| 国产不卡在线看| 999精品视频在线| 国产亚洲精品成人a在线| 99色视频在线| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 久久99中文字幕| 99热精品一区| 国产麻豆精品免费密入口| 精品国产一区二区三区久久久蜜臀 | 999精品在线| 亚洲女初尝黑人巨高清在线观看| 精品国产一区二区三区久久久狼| 99久久网站| 国产一区二区精品尤物| 成人免费观看的视频黄页| 国产精品免费精品自在线观看| 一级片免费在线观看视频| 午夜激情视频在线观看| 一级片免费在线观看视频| 天堂网中文在线| 四虎久久影院| 欧美国产日韩久久久| 日韩免费在线视频| 黄视频网站在线免费观看| 精品毛片视频| 成人影视在线观看| 欧美日本免费| 九九九网站| 国产一级生活片| 色综合久久天天综合观看| 天堂网中文在线| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 日韩在线观看视频免费| 国产亚洲免费观看| 九九精品影院| 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 日韩中文字幕一区二区不卡| 日韩专区亚洲综合久久| 日韩字幕在线| 一本高清在线| 国产麻豆精品免费视频| 免费一级片在线观看| 91麻豆精品国产综合久久久| 国产一区二区精品| 国产不卡精品一区二区三区| 久久久久久久网| 国产美女在线观看| 国产国产人免费视频成69堂| 成人免费观看网欧美片| 韩国毛片免费大片| 一本高清在线| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 欧美激情在线精品video| 欧美激情一区二区三区视频高清| 人人干人人插| 国产高清视频免费观看| 国产高清在线精品一区二区| 免费国产一级特黄aa大片在线| 国产不卡在线看| 久久国产影院| 日本伦理网站| 黄视频网站在线免费观看| 国产伦久视频免费观看 视频| 亚洲精品影院一区二区| 欧美a级片视频| 韩国毛片免费大片| 精品视频在线看| 国产韩国精品一区二区三区| 色综合久久天天综合观看| 久久国产精品永久免费网站| 国产麻豆精品hdvideoss| 91麻豆精品国产综合久久久| 精品国产一区二区三区久| 一级女性全黄久久生活片| 成人在激情在线视频| 91麻豆精品国产自产在线| 日韩在线观看免费| 国产麻豆精品免费密入口| 99热精品在线| 精品视频免费观看| 国产视频久久久| 可以免费在线看黄的网站| 国产网站在线| 黄视频网站在线观看| 麻豆污视频| 欧美1区| 日本特黄特色aaa大片免费| 免费国产一级特黄aa大片在线| 亚洲 欧美 成人日韩| 一级女性全黄生活片免费| 午夜精品国产自在现线拍| 久久99这里只有精品国产| 色综合久久久久综合体桃花网| 国产一区二区精品| 国产欧美精品| a级毛片免费全部播放| 国产原创视频在线| 亚洲精品中文字幕久久久久久| 999精品影视在线观看| 99久久精品国产高清一区二区| 你懂的日韩| 国产一区二区福利久久| 一级女人毛片人一女人| 日本特黄特色aaa大片免费| 亚欧视频在线| 黄视频网站免费看| 亚洲第一页色| 精品国产亚洲人成在线| 国产a视频精品免费观看| 国产精品自拍在线观看| 欧美a级片视频| 欧美另类videosbestsex久久 | 亚洲第一色在线| 日本免费乱人伦在线观看| 久久成人综合网| 国产麻豆精品hdvideoss| 中文字幕一区二区三区精彩视频| 色综合久久天天综合观看| 久久国产一久久高清| 麻豆网站在线看| 国产高清在线精品一区a| 999精品影视在线观看| 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 久久精品人人做人人爽97| 欧美电影免费| 国产韩国精品一区二区三区| 99热精品一区| 久久国产一区二区| 日韩av成人| 999久久66久6只有精品| 精品久久久久久中文| 欧美国产日韩精品| 香蕉视频久久|