嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

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

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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.sdgs6788.com

存檔

嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片
<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 亚洲视频一区二区在线观看| 欧美黄色免费网站| 美女视频黄 久久| 久久综合婷婷| 欧美成人免费小视频| 免费观看在线综合色| 欧美二区在线观看| 亚洲精品日产精品乱码不卡| 99视频有精品| 欧美一区二区成人6969| 免费在线成人| 国产精品网站在线播放| 国外成人在线视频| 亚洲婷婷综合久久一本伊一区| 欧美在线电影| 欧美黄色日本| 亚洲自拍偷拍视频| 免费在线国产精品| 国产精品日日摸夜夜摸av| 亚洲第一精品影视| 亚洲一级二级| 免费观看欧美在线视频的网站| 亚洲精选视频免费看| 狠狠入ady亚洲精品| 亚洲欧美在线视频观看| 久热精品在线视频| 国产精品美女久久久久久免费| 国产精品一区二区久久久| 国产一区激情| 中文精品视频一区二区在线观看| 久久国产视频网站| 日韩视频在线一区| 久久这里只精品最新地址| 国产精品久久久久久久久久免费看 | 国产精品久久久久久久免费软件| 国产亚洲观看| 亚洲尤物精选| 亚洲精品视频在线看| 久久婷婷久久一区二区三区| 国产精品美女久久久浪潮软件| 亚洲精品一区二区网址| 久久国产毛片| 亚洲天堂av图片| 欧美激情综合亚洲一二区 | 国产精品久久久久久久一区探花| 在线精品一区| 久久久久国产成人精品亚洲午夜| 一本色道久久综合亚洲精品小说 | 午夜精品久久久| 亚洲精品美女| 免费人成网站在线观看欧美高清 | 亚洲综合成人婷婷小说| 亚洲国产91| 久热这里只精品99re8久| 国产一区二区三区四区三区四 | 国产精品入口尤物| 亚洲一二三区在线观看| 日韩西西人体444www| 欧美国产日韩一二三区| 亚洲国产免费| 欧美二区在线| 欧美成人一二三| 亚洲精品四区| 亚洲人www| 欧美视频一区| 亚洲欧美综合网| 亚洲欧美影音先锋| 国产日韩在线一区二区三区| 久久精品动漫| 久久久久久久久久久一区| 欧美一区二区三区精品| 久久天堂成人| 精品成人在线| 欧美1区2区视频| 男女激情久久| 夜夜嗨av一区二区三区四季av| 亚洲国产第一| 欧美久久电影| 午夜一级久久| 久久人人爽人人爽爽久久| 亚洲国产日韩欧美在线图片| 欧美激情欧美激情在线五月| 欧美精品在线免费播放| 亚洲欧美日韩在线综合| 欧美一区二区黄| 亚洲精品久久久一区二区三区| 亚洲美女91| 国产日韩欧美亚洲| 欧美粗暴jizz性欧美20| 国产精品99免费看 | 先锋影音一区二区三区| 黄色日韩网站| 亚洲国产乱码最新视频| 国产精品久久久久久妇女6080 | 国产精品久久国产精麻豆99网站| 久久精品亚洲| 欧美欧美全黄| 久久综合999| 欧美日韩中文字幕综合视频| 久久蜜桃精品| 国产精品美女久久久浪潮软件| 美日韩精品视频| 欧美午夜精品一区二区三区| 免费久久99精品国产自在现线| 欧美久久视频| 欧美成人资源网| 国产免费亚洲高清| 亚洲精品美女久久久久| 曰韩精品一区二区| 亚洲一区精品电影| 亚洲精品中文字幕在线| 久久九九久久九九| 欧美一区二区三区婷婷月色 | 99日韩精品| 亚洲国产va精品久久久不卡综合| 一区二区高清视频| 亚洲国内自拍| 久久永久免费| 美乳少妇欧美精品| 国产视频精品xxxx| 亚洲激情网址| 亚洲国产专区| 亚洲成色www8888| 欧美在线观看网址综合| 亚洲男人的天堂在线| 欧美日韩亚洲高清一区二区| 亚洲国产成人在线视频| 91久久久一线二线三线品牌| 久久久久久精| 久久一二三区| 一区二区三区在线视频免费观看| 亚洲主播在线播放| 亚洲欧美另类中文字幕| 欧美视频在线观看视频极品| 一本色道久久加勒比88综合| 中文国产一区| 国产精品对白刺激久久久| 一本色道久久综合亚洲精品小说| 中国女人久久久| 欧美网站在线观看| 一区二区三区精品视频| 亚洲欧美经典视频| 国产精品xnxxcom| 亚洲自拍都市欧美小说| 欧美在线观看视频一区二区| 国产欧美日韩一区二区三区| 欧美在线一级视频| 久久午夜电影| 亚洲精品欧美日韩| 欧美日韩精品一二三区| 在线视频你懂得一区二区三区| 亚洲欧美大片| 国内精品久久久久久久果冻传媒| 久久综合狠狠| 日韩图片一区| 欧美综合第一页| 亚洲国产高清在线观看视频| 欧美国产在线视频| 亚洲性视频网站| 久久夜色精品| 一区二区三区精品| 国产精品性做久久久久久| 久久国产精品黑丝| 亚洲欧洲在线播放| 欧美呦呦网站| 亚洲毛片在线| 国产日产精品一区二区三区四区的观看方式 | 国语自产精品视频在线看| 美女网站久久| 这里只有精品丝袜| 久久久之久亚州精品露出| 亚洲美女电影在线| 国产精品亚洲一区二区三区在线| 欧美在线高清| 亚洲精品日韩久久| 另类激情亚洲| 亚洲欧美日本视频在线观看| 亚洲国产婷婷综合在线精品| 国产欧美一区二区精品性| 欧美激情在线免费观看| 午夜精品久久久久久99热软件| 欧美成人午夜激情视频| 亚洲一区二区日本| 亚洲人成网站在线播| 国产视频在线观看一区二区| 欧美精品一卡| 久久久精品久久久久| 一区在线视频| 国产精品久久久久久久久果冻传媒 | 国产有码一区二区| 欧美日韩精品久久久| 久久久久国产精品一区二区| 亚洲欧美精品在线观看| 亚洲精品国产欧美| 久久夜色精品国产噜噜av| 亚洲欧美国内爽妇网| 亚洲国产一二三| 在线不卡亚洲| 激情欧美一区二区三区在线观看| 国产精品日韩精品欧美精品|