火星網校
不懂UI文字設計規(guī)范?這篇文章幫你搞定
發(fā)布時間：2024-01-24 17:06:29 瀏覽量：200次
UI設計中，文字設置是必不可少的一環(huán)。
文字設置過程中涉及到字體類型、字號、字重、行高、行寬以及顏色等。
本文講述的文字設計規(guī)范，包含以下部分：
1、類型
2、字號
3、字重
4、行高
5、行寬
6、顏色
1、類型
iOS設備的系統(tǒng)默認字體，中文為蘋方，英文&數字為SF UI Text。
Android設備系統(tǒng)默認字體，中文為思源黑體，英文&數字為Roboto。
2、字號
不同的使用場景，文字的字號也不相同。文字的主使用場景分為：一級標題、二級標題、三級標題、正文和提示文字 。
文字最小字號一般為11。也有特殊情況，例如標簽里面的文字，字號為10甚至可能更小。
3、字重
字重就是指字體筆畫的粗細。字重的等級是用來標明同一字體家族中不同粗細筆畫的字型。
UI設計中，常用的字重有兩個，一個是常規(guī)（Regular），另一個是中黑體（ Medium）。
正常文字使用常規(guī)體（Regular）。當需要突出層級展示，增加對比時使用中黑體（ Medium），中黑體（ Medium）常用于標題。
4、行高
字號大小等于文字高度，如下圖所示，字號為16時，行高設置為16，那么其行高也是字體本身的高度（16pt）。
行高= 字號 + 行間距。
如下圖所示：行間距距離文字上方為3pt，行間距距離文字下方也為3pt。字體高度為16pt。
行高（22）= 字號（16） + 行間距（3+3）。
在界面過程中，需要規(guī)范字號大小和對應的行高。不然的話會存在設計布局問題。
舉個例子，設計一個標簽時，當字號為14時，行高為20，那么為了保持視覺上字體到四周距離相同，那么上下間距為4，左右間距為8。
因為行間距的存在，不能將上下間距和左右間距設置相同。
如果行高設置為14（文字本身大?。?，那么上下間距應該也為8pt，而非4pt。
如下表格為iOS設計指南建議字號和對應的行高對照表。
下圖是Sketch默認字號和行高對照表：
可以看出iOS建議字號行高的對照表和Sketch默認的不一樣。
Sketch視覺稿到了開發(fā)實現，字號和對應行間距會出現不一致的情況，這樣會導致還原度出現問題。
解決行高無法完美開發(fā)還原的辦法有兩個：
1、將行高設置為字號大小，這樣的話，就不存在行間距的問題，可以保證完美還原。但是由于一倍行高會導致有些機型的字被切掉。
2、使用字體插件，這樣它可以自動修復Sketch文檔中的字體行高，做到Sketch中字體行高與開發(fā)中字體行高100%還原。
5、行寬
行寬=字體寬度+兩側距離字體的寬度
行寬作用于文本范圍，如下圖所示：
將行寬拉長，代表著設置了文本內容范圍，文本距離右側語音圖標為12pt，表示當文字內容距離語音圖標12pt時，文字打點或截斷展示。
6、顏色
字體顏色有兩種規(guī)則定義做法，一種是直接使用色值，如圖所示：
另一種做法是通過不透明度實現，通常以#000000為基準，設置不同的不透明度，如下圖所示：
綜合而言，使用不透明度的方法，使用場景更加廣泛一些。
文章來源：「Echo的設計筆記」
點擊下方了解更多獲取UI設計資源
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
9. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
