<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 一篇文章搞定UI文字設計規范

          2021-6-30    seo達人


          小編:Sketch視覺稿到了開發實現,字號和對應行間距會出現不一致的情況,這樣會導致還原度出現問題。今天我們來講講如何避免這種問題以及有什么解決方法,文末有福利大贈送哦,千萬不要錯過哈~一起來看看一篇文章搞定UI文字設計規范吧!

           

          前言

          UI設計中,文字設置是必不可少的一環。

          文字設置過程中涉及到字體類型、字號、字重、行高、行寬以及顏色等。

          本文講述的文字設計規范,包含以下部分:

          1、類型

          2、字號

          3、字重

          4、行高

          5、行寬

          6、顏色

           

          1、類型

          iOS設備的系統默認字體,中文為蘋方,英文&數字為SF UI Text。

          Android設備系統默認字體,中文為思源黑體,英文&數字為Roboto。

           

          2、字號

          不同的使用場景,文字的字號也不相同。文字的主使用場景分為:一級標題、二級標題、三級標題、正文和提示文字 。

          文字最小字號一般為11。也有特殊情況,例如標簽里面的文字,字號為10甚至可能更小。

           

          3、字重

          字重就是指字體筆畫的粗細。字重的等級是用來標明同一字體家族中不同粗細筆畫的字型。

          UI設計中,常用的字重有兩個,一個是常規(Regular),另一個是中黑體( Medium)。

          正常文字使用常規體(Regular)。當需要突出層級展示,增加對比時使用中黑體( Medium),中黑體( Medium)常用于標題。

           

          4、行高

          字號大小等于文字高度,如下圖所示,字號為16時,行高設置為16,那么其行高也是字體本身的高度(16pt)。

          行高= 字號 + 行間距。

          如下圖所示:行間距距離文字上方為3pt,行間距距離文字下方也為3pt。字體高度為16pt。

          行高(22)= 字號(16) + 行間距(3+3)。
          在界面過程中,需要規范字號大小和對應的行高。不然的話會存在設計布局問題。

          舉個例子,設計一個標簽時,當字號為14時,行高為20,那么為了保持視覺上字體到四周距離相同,那么上下間距為4,左右間距為8。

          因為行間距的存在,不能將上下間距和左右間距設置相同。

          如果行高設置為14(文字本身大小),那么上下間距應該也為8pt,而非4pt。

          如下表格為iOS設計指南建議字號和對應的行高對照表。

          下圖是Sketch默認字號和行高對照表:

          可以看出iOS建議字號行高的對照表和Sketch默認的不一樣。
           
          Sketch視覺稿到了開發實現,字號和對應行間距會出現不一致的情況,這樣會導致還原度出現問題。
          解決行高無法完美開發還原的辦法有兩個:
          1、將行高設置為字號大小,這樣的話,就不存在行間距的問題,可以保證完美還原。但是由于一倍行高會導致有些機型的字被切掉。
          2、使用字體插件,這樣它可以自動修復Sketch文檔中的字體行高,做到Sketch中字體行高與開發中字體行高100%還原。
           

          5、行寬

          行寬=字體寬度+兩側距離字體的寬度

          行寬作用于文本范圍,如下圖所示:
          將行寬拉長,代表著設置了文本內容范圍,文本距離右側語音圖標為12pt,表示當文字內容距離語音圖標12pt時,文字打點或截斷展示。 

           

          6、顏色

          字體顏色有兩種規則定義做法,一種是直接使用色值,如圖所示:

          另一種做法是通過不透明度實現,通常以#000000為基準,設置不同的不透明度,如下圖所示:

          綜合而言,使用不透明度的方法,使用場景更加廣泛一些。


          原文地址:Echo的設計筆記(公眾號)

          作者:Echo

          轉載請注明:學UI網》一篇文章搞定UI文字設計規范

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

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

          藍藍設計www.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          日歷

          鏈接

          個人資料

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

          存檔

          久久国产精品一国产精品金尊| 欧美精品一区二区精品久久| 亚洲日韩欧美一区久久久久我| 国产欧美久久久精品影院| 久久综合香蕉国产蜜臀AV| 情人伊人久久综合亚洲| 久久无码AV一区二区三区| 成人国内精品久久久久影院| 亚洲а∨天堂久久精品| 成人久久精品一区二区三区| 久久www免费人成精品香蕉| 天天躁日日躁狠狠久久| 久久国产高清一区二区三区| 久久精品国产亚洲AV麻豆网站| 亚洲а∨天堂久久精品9966| 精品综合久久久久久97超人| 国产偷久久久精品专区| 久久伊人影视| 国产精品伊人久久伊人电影| 欧美黑人又粗又大久久久| 亚洲欧美国产日韩综合久久 | 欧美精品一区二区久久| 久久精品无码专区免费青青| 久久99热这里只有精品国产| 久久亚洲精品无码播放| 国产亚洲色婷婷久久99精品91 | 欧美日韩精品久久久免费观看| 狠狠色丁香婷婷综合久久来来去| 久久综合九色综合网站| 亚洲精品美女久久777777| 狠狠色丁香婷婷久久综合五月| 久久综合亚洲色HEZYO国产| 91麻精品国产91久久久久| 久久99精品久久久久久| 久久99毛片免费观看不卡| 久久精品成人免费网站| 天天综合久久久网| 久久精品国产一区二区电影| 久久精品中文字幕一区| 日本加勒比久久精品| 久久久久久久精品妇女99|