92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

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

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。 



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



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

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
国产精品a久久久久久| 国产一区免费视频| 日韩中文欧美| 日韩av成人高清| 中文字幕一区电影| 精品国产乱码久久久久久郑州公司| 久久91亚洲人成电影网站| 在线观看亚洲精品福利片| 日本在线视频中文有码| 国产手机精品在线| 国产精品成人一区二区网站软件| 台湾色综合娱乐中文网| 免费电影日韩网站| 亚洲一区精品在线| 麻豆免费在线观看| 麻豆av一区二区三区久久| 欧美视频在线观看| 久久精品国产99精品国产亚洲性色| 亚洲成人资源在线| 久久伦理网站| 日韩欧美一区电影| 一本久道中文字幕精品亚洲嫩| 2021久久精品国产99国产精品| 精品电影一区二区| 精品一区二区三区免费视频| 国产精品成人一区二区网站软件| 亚洲精品一区二区网址| 国产精品美女久久久久| 57pao成人永久免费视频| 麻豆成人在线播放| 97超碰人人看人人| 成人av在线资源网站| 欧美亚洲图片小说| 欧美激情办公室videoshd| 日韩区一区二| 欧美一区二区精品久久911| 国产乱人伦精品一区二区| 麻豆mv在线观看| 国产情人综合久久777777| 久久99久久精品| 日韩电影一区| 在线观看国产精品淫| 久久成人综合网| 97精品国产aⅴ7777| 久久精品国产2020观看福利| 91在线色戒在线| 青草热久免费精品视频| 欧美成人精品在线视频| 亚洲已满18点击进入久久| 亚洲图片88| 99久久精品免费| 国产成人午夜片在线观看高清观看| 国产美女直播视频一区| 在线欧美小视频| 国内外成人免费激情在线视频网站| 噜噜噜在线观看免费视频日韩| 夜夜精品浪潮av一区二区三区| 久久琪琪电影院| 午夜裸体女人视频网站在线观看| 国产欧美在线观看免费| 日韩不卡视频在线观看| 成人高清伦理免费影院在线观看| 美女视频黄免费的亚洲男人天堂| 色88久久久久高潮综合影院| 伊人精品影院| 一本色道久久综合狠狠躁的推荐| 国产精品久久久久久久久久白浆| 欧美草草影院在线视频| 国产精品福利网站| 黄色工厂这里只有精品| 日本欧美一区二区三区| 成人看片毛片免费播放器| 97精品资源在线观看| 久久久久久久久成人| 人人网欧美视频| 亚洲精品国产电影| 亚洲人成伊人成综合网久久久| 精品欧美激情精品一区| 精品国产白色丝袜高跟鞋| 欧美黄色三级网站| 亚洲激情五月| 亚洲电影一级黄| 91精品国产欧美一区二区成人| 视频在线一区二区三区| 亚洲色图官网| 国产精品美乳一区二区免费| 北条麻妃一区二区三区中文字幕| 欧美在线激情视频| 亚洲在线视频福利| 国产精品亚洲不卡a| 成人午夜电影小说| 美乳视频一区二区| 欧美日韩大片免费观看| 亚洲1卡2卡3卡4卡乱码精品| 亚洲精品一级二级三级| 亚洲欧美激情一区| 亚洲天堂成人在线观看| 亚洲精品视频观看| 一区二区不卡在线视频 午夜欧美不卡在| 免费黄色在线| 亚洲h色精品| 亚洲三级免费| 伊伊综合在线| 国产精品一区二区三区毛片淫片| 亚洲第一区在线| www.亚洲男人天堂| 黄在线观看免费网站ktv| 欧美一级黑人aaaaaaa做受| 欧美福利电影网| 日本一区二区三区国色天香| 在线毛片网站| 日本韩国精品在线| 深夜福利亚洲| 年轻的保姆91精品| 日韩中文第一页| 国产精品福利在线观看播放| 日本老师69xxx| www 成人av com| 妖精一区二区三区精品视频| 日韩中文视频免费在线观看| 狂野欧美性猛交xxxx巴西| 久久一区欧美| 亚洲小说图片| 美女少妇精品视频| 国产精品777| 99久久久国产精品免费调教网站| 日韩欧美亚洲日产国产| 亚洲全部视频| 国产一区二区三区在线观看免费| 亚洲毛片在线免费观看| 忘忧草在线www成人影院| 国产专区欧美精品| 日韩hd视频在线观看| 群体交乱之放荡娇妻一区二区| 精品一区二区三区久久久| 136国产福利精品导航| 日韩欧美另类一区二区| 欧美日韩国产一二| 欧美一级片久久久久久久| 伦理一区二区| 亚洲少妇屁股交4| 国产伦精一区二区三区| 中文字幕亚洲一区二区va在线| 97在线视频免费看| 久草免费在线| 日韩理论视频| 国产成人免费视频| 日本va欧美va欧美va精品| 国产一区免费在线观看| 在线成人av观看| 欧美在线视频一区二区三区| 亚洲综合99| 亚洲国产日韩欧美在线99| 日韩—二三区免费观看av| 日本韩国视频一区二区| 亚洲高清自拍| 国产精品毛片久久久| 日韩亚洲国产中文字幕| 国内综合精品午夜久久资源| 成人日韩av| 日韩免费一区| 欧美一区二区三区性视频| 伊人久久大香线蕉综合网站| 51成人做爰www免费看网站|