小編: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。
舉個例子,設計一個標簽時,當字號為14時,行高為20,那么為了保持視覺上字體到四周距離相同,那么上下間距為4,左右間距為8。
因為行間距的存在,不能將上下間距和左右間距設置相同。
如果行高設置為14(文字本身大小),那么上下間距應該也為8pt,而非4pt。
5、行寬
行寬=字體寬度+兩側距離字體的寬度
6、顏色
字體顏色有兩種規則定義做法,一種是直接使用色值,如圖所示:
綜合而言,使用不透明度的方法,使用場景更加廣泛一些。
作者:Echo
轉載請注明:學UI網》一篇文章搞定UI文字設計規范
文章來源:站酷 作者:陳皮Celia
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務