近萬字雄文!全網最最最詳細的 UI 文字應用指南 - 優設網 - UISDC

近萬字雄文!全網最最最詳細的 UI 文字應用指南

2019/10/10 15012評論 31

UI 是一門偏向排版的設計類型,而對于排版來講,最重要的東西既不是軟件操作深度,也不是視覺設計創意性,而是對于文字的排列與設置。

對于新手來說,注意力往往被案例中精致的配圖,花哨的配色,酷炫的動畫吸引,而忽略文字的重要性。實際上,文字才是界面的骨骼和靈魂,掌握好文字的使用,才能真正駕馭所有界面的視覺表現。

并且,除了設計效果以外,實際開發過程中實現設計效果時,在字體上遇到的問題是最多,也是最難以解決的。所以,這篇文章會圍繞在 UI 中文字的使用展開,如何正確的設置文字做出正確的設計,且符合項目開發的實際需要。

文字的基本認識

在常規設計軟件中,主要將文字元素的設置劃分為兩個部分,分別是 「文字屬性」 和「排版屬性」。在開始具體講解如何應用文字前,需要先詳細了解它們的知識點以及設置規則。

在這里,我們主要使用 Sketch 的文字設置面板做介紹,如下圖所示,XD、Figma 等其它 UI 設計軟件界面與內容基本相同,看懂以下內容即可。

1. 文字屬性

字體 FontFamily

首先,我們要討論的是文字的字體,字體即文字設計的不同風格,相信大家都已經知道。那么值得注意的是,字體是如何顯示到我們的電子設備中的呢?

字體設計公司或者設計師完成一套字體的設計時,會將這些字體圖形合并成一個標準的字體格式文件,常見的如 OTF、TTC、TTF 等等。

這些字體文件,本質上也是矢量文件,因為界面中任何一個可見的文字都是已經已經設計好的矢量圖形輪廓,設計師將這些圖形置入并分配對應的編碼,于是系統就會通這些編碼來調用文字圖形。

任何設計軟件的字體都是從系統中調用的,如果缺乏對應字體文件,那么設計師在設計軟件的字體列表中就找不到。如果設計師應用了某字體,而用戶的客戶端系統里沒有,那么他們的字體顯示也會出錯或者用其它字體替代,與設計稿樣式有出入。

所以,商業系統為了顯示的統一性,都有規范各自平臺默認的字體,以防設計師過度發揮,導致字體在客戶端無法正常顯示,會在后面的部分詳細講解。

字號 FontSize

文字的字號,即文字的大小數值,通常使用 pt 作為字號的單位 (安卓是 sp 但是只是稱呼的不同)。相信大家還記得小時候學寫字時寫的田字格,在界面的文字顯示中,每個獨立的文字實際上都由一個 「田字格」 正方形包裹,字號即這個正方形的邊長。

因為文字的一些特性,這個矩形通?;岜仁導實奈淖滯夾胃吒?,比如中文 「一」 它的字形高度肯定不會和字號等同,而英文字母不是等寬的比如 「i」 和 「m」,字號就是——比文字更大的矩形容器的高度值。

字號的設置需要根據實際場景決定,但首先要了解它在界面中的限制。在中文中,字號如果小于10pt,那么就會因為太小無法被正常識別,而英文和數字的最小字號約為 9pt。最大的字號通常為iOS 的大標題 34pt,如果是類似鬧鐘、計數等大號文字,則根據設計風格制定。

字重 FontWeight

字重是文字筆畫粗細的設定,因為在排版中,不同的字段類型對字重的要求不同,比如標題往往需要比較粗的筆畫,注釋文字需要比較細的筆畫等等,所以我們要通過更改字體字重的方式來實現。

絕大多數人對字重更改的理解都來自學習 Office Word 的 「B」 加粗按鈕。但在 UI 設計軟件中,這個加粗按鈕并不存在,且加粗也不是真正的字重調節。加粗按鈕 「B「 只是對當前字體進行類似描邊的輪廓放大渲染,效果非常粗糙。

軟件都有為字體提供字重調節的菜單,只要點擊就可以查看和選擇對應的字重。如果選項中只有一個,那么證明該字體并沒有包含其它字重,無法進行更改。當然,主流的 UI 設計字體都會包含豐富的字重,不用擔心想要的效果找不到。

常見的字重通常分為三個等級,粗 (Blod)、常規 (Regular)、細 (Light),如果字重較為豐富的字體則會在每個等級中包含更豐富的字重。例如,蘋方字體中,從細到粗包含了極細、纖細、細體、常規體、中黑體、中粗體等七種。

字色 FontColor

字色即文字對應的顏色,這個就沒有必要多做解釋了。只是大家需要注意的是,通常 UI 的字色只能使用純色,而不能使用漸變色。

并且,字體的顏色顯示和透明度有一定的關聯,在比較規范的設計過程中,切記不要使用透明度調節的方式來淡化字體的顏色。

字符樣式

除了以上4個最基本的文字樣式屬性以外,還有幾個使用頻率比較低,但也比較常見的設置。例如,為文本添加下劃線、刪除線。

還有就是文本的大小寫切換,即所有文本采用大寫字符和小寫字符,這個設置只對外文字符起作用,對中文沒有影響。如果是英文字體本身就全大寫的顯示的話,那么該設置也會失效。

2. 排版屬性

文本區域

在一般設計軟件中,我們在畫布添加文本,就會生成一個文本區域,即顯示該圖層文本的區域。通常,文本區域有三種類型,水平適應,定寬模式,固定尺寸。

水平適應就是默認的文本區域模式,我們輸入的內容可以無限向右延伸,只有按回車鍵才可以對文字換行。

定寬模式,是我們確定一個固定的文本區域寬度,則文本會在字數超過區域寬度后自動進行換行,直至顯示完為止。

固定尺寸,是對文本區域設置一個固定的寬度和高度,文本內容雖然也會自動換行,但當高度不足時,則超出的內容會被隱藏,而不會正常顯示。

對齊模式

對齊模式,即文本的對齊方向,有左、中、右三種對齊方式,這個大家初中就應該在 Word 里學過了。但是,文本對齊的標準是基于文本區域的邊緣決定的,只有設置定寬和固定的文本區域模式對齊才有意義。

除了以上三種垂直的對齊方向以外,類似 Sketch 等部分軟件中還包含水平方向的對齊模式。當我們使用了一個固定尺寸的文本區域以后,就可以設置文本內容的上、中、下對齊,在一些特殊的排版場景中非常便利。

字間距

字間距是單個字符之間的水平距離,即文字 「田字格」 邊框的間距,默認狀態下通常為 0,用來控制文本的橫向寬松程度,單位也是 pt。

這個屬性對于中文的排版來說并沒有太多用處,因為中文的字符區域是以正方形進行設計的,且在設計時就以已經考慮了最佳的默認顯示樣式,所以只有一些比較特殊的場景會用到。

而對于英文來說字間距就顯得尤為重要,因為不同字母的字寬是不同的,往往需要我們根據字號、字重的不同動態調節間距參數,所以蘋果在官方字體規范中使用 SF 不同字號狀態下就會應用不同的字間距數值。

為什么很多英文設計稿一看就是中國設計師做的,因為這它們使用的都是字間距為 0 的英文,在英文母語環境下這樣的間距是無法被接受的。

行高

行高是一行文本垂直方向的高度,這個高度和字高無關,文字內容默認處于這個高度的水平居中位置,如下圖所示。

在一般的 UI 軟件中,我們可以發現通常默認行高一定比字號本身更大,例如字號為 12pt 的文字行高為 17,導致文本區域高度大于實際的字高。這是一個正常現象,因為如果行高和文字同高或更小,那么在多行文本狀態下就無法正常顯示。

但是,還有一個在 Sketch、XD 等軟件中沒有包含的屬性需要引起我們重視,那就是 —— 「行間距」。

行間距是一個獨立于行高之外的屬性,在一些復雜的設計、排版軟件中會出現,以及iOS、Android 等前端語言中也有提供這個屬性,它是造成我們標注與實際開發過程出錯的罪魁禍首。

無論是設計過程中,或者設計標注文件中,都要拋棄掉任何有關行間距的概念,具體的原因會在后續內容中說明,這里只要搞清楚它們的區別即可。

段間距

前面我們已經了解了,在定寬和固定尺寸的文本區域中,文字超出一定數量會換行,這是自動執行的,但當我們想要對數量較多的文字做出主動的劃分,就會對內容進行換行操作,即——生成新的段落。而段間距,就是和前面所有元素無關的控制段和段之間距離的屬性。

根據親密性的原則,段落之間首尾的行之間間距應該大于段內的間距,這時候就應該增加段間距,使得文本的閱讀體驗得到進一步的提升。

比如本段和上一段內容……

系統的字體規范

在上面了解了文字基本屬性以后,接下來我們要簡單介紹一次有關 iOS、Android 端的文字規范。規范內容主要分為兩個方面,一個是使用的字體介紹,另一個是對文字大小的應用。

1. iOS 文字規范

可用字體

在 iOS 中中文和英文都有各自的官方字體,中文只有一個字體,那就是 「蘋方」,而英文有兩個系列的字體,一個是黑體 「SF Pro」 另一個是襯線體 「NewYork」。

在中文字體環境中,我們使用蘋方這個字體即可,蘋方中也有攜帶英文字符,所以中英文混排不需要特意設置英文字體,統一使用蘋方即可。

而英文環境下,使用的字體就比較復雜。我們可以根據需要選用 SF Pro 或者 NewYork 作為主要用字,但作為系列字體,它們實際上還各自包含好幾個字體類型,目前官網對 NewYork 的說明還語焉不詳,所以我們先從 SF Pro 入手。

蘋果官方為 SF 系列提供了 7 種字體,用于各種不同的設備,其中 SF Pro Text 和 SF Pro Display 是用于手機和 ipad 客戶端的系統字體。

而這兩個字體的區別,在于當我們使用的字號小于 20 時,使用 SF Text,大于或等于 20 時,則使用 SF Display,這需要我們在設計英文界面時手動進行切換。以及,每個 SF Pro 字體下包含了接近 20 種字重,直接讓設計師體會英文排版的復雜性。

除了官方提供給我們的字體以外,系統還有內置一些其它的英文字體可以供我們使用,在一些特殊的標題或者數字中使用。具體的我就不羅列出來了,大家可以參考下方的鏈接:

iOS 所有的系統字體列表:https://blog.csdn.net/appleLg/article/details/84140924

文字設置

2. Android 文字規范

可用字體

Android 系統中,Google 為 Material Design 系統指定的字體,中文是思源黑體,英文是 Roboto。相對于 iOS 來說,MD 的字體使用上比較簡單,沒有那么多系列要選。

但是,安卓與 iOS 不同的是,不同手機廠商會對系統進行深度定制,使用自己的設計語言,所以自然會更換掉機器默認的用字。我們無法為每個系統都開一個新的設計稿,所以通常在安卓系統的設計中,只要使用思源黑體和 Roboto 即可。

文字設置

3. 系統規范與應用

可能有些同學看了上面的列表和參數,就認為有關字體設置的難題都解開了……哪有那么容易。

iOS、Android、Windows 等系統的設計語言,都是基于英語環境下誕生的,給出的文字設置也是基于英文的參數。這種情況導致,這些設置不能無差別的應用到我們設計的界面中去,會為我們的設計帶來非常多不合理的地方和限制。

例如,官方規范中的字間距,在不同尺寸下有不同的數值,這在中文中是完全不需要,且英文適用的閱讀文本字號,比中文更小等。

所以,系統的規范只能作為一種參考,而不能作為我們直接套用的來源。合理的設計源自合理的思考,所以,我們會在下一部分開始講解文字在設計過程中的具體設置。

文字的應用實例

既然前面說了,官方的文字只能作為參考,所以這一部分,就要從思路開始,詳解我們設計過程中如何一步步完成文字的應用。

1. 文字的角色

在 UI 中應用文字,有一個非常重要的概念,就是 —— 文字的角色。這個詞聽起來很抽象,但并不難理解,比如下圖京東的購物信息:

包含的文字角色有商品標題、價格、原價、商品介紹、優惠信息、新品提示、標簽提示等,它們的樣式各不相同,不僅豐富了頁面的視覺體驗,也便于用戶理解內容。

文字的角色是決定它們樣式的關鍵因素。在我們用過的 Word 或 PPT 中,都有提供一個樣式選擇的列表,它們就是文字角色最基本的體現,比如標題、二級標題、三級標題、正文、注釋等等。

不同的角色,它們在畫面中的定位就不一樣,有各自的作用,所以我們必須通過不同樣式體現。

而角色中還包含一種內建的邏輯,即 「權重」 的等級,大標題、價格就像主角一樣,需要重點給特寫,而注釋類文字則是龍套無足輕重。

2. 字號、字重、字色

接下來,我們就講講文字角色差異如何來表現。主要涉及三個最基本的文字屬性,那就是字號、字重、字色。

先說權重,無論在中英文排版中,文字角色的等級越高,那么它們的字號也就越大。

但不同的是,在字重上,英文的排版由于 「正負形」 概念影響,可能字號越大,則字重越小,即使標題使用 Light 這種低字重也不影響我們的閱讀體驗,而中文則不行。

中文中,字號和字重都和文字的權重成正比,顏色的強弱也會和等級成正比,如下圖所示。

當然,一個應用中包含的文字角色數以百計,我們不可能劃分出幾百個等級出來,通常只會定義出10個以內,并將不同的角色對應分配進去。

而在差異的表現上,我們主要會使用色彩作為區分方法,即使是同一等級中,也有一些文字作用、權重不同于另一些文字,所以它們就會用更易于識別的顏色,比如可點擊文字、用戶名、價格等。

雖然要考慮的東西看似很多,但在 UI 這些年的發展中,文字的這三樣設置已經逐漸形成了固定、可用、高效的規律了,可以有效總結出在三個設置對應的參數和準則,下面我們分別進行說明。

字號應用

在字號上,字體有最小的顯示極限,10pt 是不把手機懟臉上可以接受的最小字號,而最大字號通常就以蘋果的標題欄大標題字號 34pt 為準。只有當界面設計一些類似倒計時、計數等特殊需求的時候,才會使用比這更大的字號。

如果再進一步拆分,那么我們可以將字號這么進行分配:

  • 標題:16-34
  • 正文:14-16
  • 注釋:10-12

字重應用

字重在中文的使用上,和字號成正比關系,但這并不是絕對的,字重核心且唯一的作用就是用來傳遞文字的權重,設計師會為重要的文字加重,為沒有什么觀看必要的文字減重,但不會僅僅為了美觀隨意更改字重。

并且,在中文環境的使用中,Light 字重是我們正常閱讀范圍內最輕的字重,Thin (纖細)、 Ultralight(極細) iOS10 以后已經基本不會出現在正常的設計稿中。

所以簡單概括起來,文字類的字重可以這么分配:

  • 標題:Meduim、Semibold
  • 正文:Regular、Meduim
  • 注釋:Regular、Light

字色應用

正常來說,配色應該是隨設計風格來決定的,無法被具體規定。但是,色彩除了視覺特征以外,也有一定的功能特性,即滿足文字最基本的 「清晰可見」 要求。

字號的影響主要體現在文字與背景環境的結合上,如果字色無法將文字信息從環境中凸顯出來,那么它的設置就是不合格的,比如下面這樣的情況:

面向所有色彩的情況先不談,先從白和黑兩種背景色系開始講起。在調色板中,我們都可以將色彩數值模式調節成 HSB,而 B 值(灰度)就是我們來控制字色的關鍵屬性。

在 HS 值為 0 的時候,B 值越高顏色越亮,100 為純白,0 為純黑。在不同背景下它們的顯示效果。

所以,在面向淺色和深色背景中,我們可以將 B 值控制在以下范圍內:

白色背景

  • 標題:0-20
  • 正文:20-50
  • 注釋:60-80

深色背景

  • 標題:100-90
  • 正文:90-70
  • 注釋:70-30

以上的內容可以整理成以下的表格,每當我們設置文字屬性的時候,就可以進行對照。

3. 文本框設置

接下來,就該講講有關文字的排版操作了。在設計界面的過程中,我們通?;崾褂枚砟J澆信虐?,也就是輸入文字前像置入矩形元素一樣拖動一個文本區域出來。

通常,文本框的高度由支持多少行文字決定,比如我們設置一個支持兩行文字的標題,每行高25,那么文本框的高就為 25*2 = 50,而寬度則由設計的排版需要決定。

并且,當我們使用文本框以后,那么當文字與其它元素計算間距與對齊時,是以文本框的邊緣為標準,而不是使用文字的圖形邊緣。

這么做雖然不符合設計師的第一直覺,但實際上這么排列的文字即使沒有文本區域的影響,也需要適當下移才能帶給我們更好的視覺體驗,所以絕大多數主流應用也都遵循這個規則而不是使用特殊的布局技巧強行對齊。大家可以自己打開手機里的應用看看……

接下來,我們要說說文本區域內的對齊。無論我們使用左或右對齊,文本會在每行末尾上會因為空間不足換行,導致其中一側的排列參差不齊,這是一個正常的現象,不要刻意制造兩端對齊的文本,這會導致不同行的字間距呈現不規則的變化,降低閱讀體驗。

最后,就是段間距的真正使用方法了。相信很多人在打字的時候是有這樣的習慣的,當在輸入區域換段以后,會覺得段落的間距不足,然后就再打一個回車增加段間距。這是一種低級錯誤,一定要牢記段落之間的區分,要由 「段間距」 這個屬性設置,并且基于親密性原則,段間距不能大于行高。例如下圖右圖中行高24,段間距為8。

4. 操作實例

上面密集的拋出一系列的知識點,硬記肯定是記不住的!所以,我們需要用一個具體的設計案例,講解這些知識點是如何使用的(重點來了的意思……)。

這次演示用我之前關于 Mars 的設計頁面案例來進行,效果如下:

步驟1:

首先在原型階段(開始設置細節前),將所有文字內容填充到畫布中去。這么做的目的是在調節細節前能對整體有一個宏觀的認識,否則我們無法對文字的角色作出定義。

步驟2:

開始對頁面的角色權重和定位做出梳理,構建文字的層級關系,例如下方的列表。這么看做起來是挺麻煩的,但如果對文字本身權重的考慮已經適應以后,是不需要再額外記錄的,直接上手即可。

  • 大標題:商家名
  • 次標題:??槊?/li>
  • 正文:主介紹文字
  • 次文本:簡介、價格
  • 注釋:演出時間、地址、電話

步驟3:

有了對應角色的定義以后,就可以開始下一步,為它們分配字重、字號和基礎字色了。大標題使用 18pt 的中粗體,次標題使用 16pt 的中粗體,正文使用 14pt 的常規體,次文本使用 12pt 常規體,注釋也使用 12pt 的常規題。然后為他們分別分配 B 值為 10、10、40、40、60 的灰度,這樣字體就具備了初級的層次感。

步驟4:

只依靠灰度值是不足以滿足真實界面設計需要的,所以這個過程中,我們要對一些比較特殊的文字類型使用一些其它色相進行突出。例如標題下方的小字用赭石色,地址和電話這些可以點擊的文字使用主色綠色(根據其它頁面設計用過的色彩,因地制宜了),進一步豐富了文字的展示樣式。

步驟5:

到這里,當然還沒結束,前面花了大篇幅講的文本區域與行高,這時候就要隆重登場了!故意留到后面再講,是因為對于新手來說,先做樣式再排版會比較友好一點,等到適應以后就不用在意順序了。

文本的設置難題主要來自于行高的制定,我們前面已經說過,最穩妥的做法就是為所有文本設置可以直接支持合理多行顯示的行高。比如簡介和詳細介紹部分的文字,行高明顯需要我們做出調整。簡介使用 20pt 行高,介紹使用 26pt 行高,且因為是多段文字設置段間距為 10pt。

步驟6:

除了這種顯而易見的多行文本以外,再看商家名大標題,實際上這個區域是支持兩行顯示的,雖然我們只做了一行,所以我們也要為它設置對應多行的行高,這樣這個字體無論在任何情況下都可以正常顯示。

所以,我們將所有字號設置了合適的行高,參數如下:

  • 字號 12 的行高從 17 改為 20
  • 字號 14 的行高從 20 改成 24
  • 字號 16 的行高從 20 改成 26

并將文本區域設置成實際文字的寬度,再根據親密性原則對文字進行合適的間距調整,就可以完成最終的效果了。

文組的開發與標注

是的,沒錯,文章到這里還沒結束!光了解怎么把圖做出來是不夠的,設計的任務,還要想辦法合理過度到開發階段,而在前端實現我們設計稿的過程中,最讓人頭疼的問題絕對不是動效,而是字體設置的差異,導致細節上的崩壞。

所以最后,我們要站在實際項目的角度上,來有哪些是設計師需要關注的事情。

1. 文字與代碼的實現

前端布局邏輯

我們先從前端程序員完成界面樣式的開發邏輯講起,很多人以為了解技術,是要我們自己學代碼,實際了解技術是明白功能和結果實現的過程,而不是具體操作。

在各種代碼類型中,我們會將實現頁面視覺效果的過程稱為 —— 界面布局,布局是個動詞。雖然每一個系統,不同的代碼版本,都有各自的布局特性,但大體上它們的實現邏輯是一致的。

界面布局的實現過程,就像是一個堆積木的過程,每一個積木,就是一個矩形區域,矩形區域內可以容納圖形、矢量文件、視頻動畫、文本內容等等。程序員通過一定的方式,將矩形區域置入頁面中進行排列和定位,再在其中添加對應的視覺內容,實現最終用戶可見的樣式。

比如下圖是 DW 中前端布局效果的預覽,線框的矩形就是一個 「積木」。

矩形區域在一定程度上可以等同于前文所說的文本區域,除設置長寬尺寸以外,更重要的事情就是可以用來定義它的坐標和位置。

比如上面案例中,在一個組件的區域內添加一行文本,那么定位過程就是將其設置成距上方圖片 10 即可。

行高的應用差異

行高始終是文字布局上最頭痛的問題,為什么,看看下面的內容就知道了。

前文說過,在 Sketch 等設計軟件中,只給我們提供了行高這個屬性來控制行間距。但是,iOS、 Android 都有提供過 LineSpacing (行間距),而很多設計師在標注設計稿的過程中也會使用標注間距的形式。

雖然 iOS 使用行間距可以實現,但是實現的效果和設計稿是有出入的。因為設計稿中我們只能使用行高,所以在一個文本區域中,它的上下兩側都有行高增加的空白區域,但是實現過程里面沒有這一截間距,導致實際文本區域和上方元素的距離效果有偏差。

并且,還有一個常見的問題,就是 iOS 在默認狀態下,行高是和字號相同的,但是安卓的行高如 Skecth 一樣會大于字號。所以經?;岬賈旅揮卸ㄒ迕魅返男懈?,兩個平臺使用同一套設計時實現的效果不一致。

前面提到,多行文本勢必要使用大于字號的行高,比如一個字號為 12pt 的文本區域,行高為 20pt,那么它的頂部就有 4pt 的空白,我們需要將它上移 4pt,才能保證文字邊緣和其它元素的邊界是持平的。

這意味著,在開發中,程序員還需要在設置屬性的過程里注意高度距離的實際差異,而這種左右高度不一致的做法還會直接導致布局過程變得更繁瑣,具體原因就不細說了,只需知道真實項目的情況會遠比現在復雜,且布局也會更麻煩即可。

可能還有一些同學會說,如果多行文本行高需要設置,那么我將只有單行的文本設置成行高字號相同可不可以?答案依舊是否定的,這就要在下一個環節中說明了。

文字樣式的復用

要在界面中實現字體的效果,就要用代碼把它的屬性和值都對應碼出來。雖然這個過程很簡單也很容易,但在整個應用中,出現的文本數量沒有一千也有八百,難道我們要挨個設置文本樣式?

顯然不是。

程序員應該屬于最討厭重復造輪子的群體了,所以自然會用別的方式來實現。通所有的程序語言都會提供文字復用的功能。比如在 CSS 中,可以通過 Class(類)的定義實現樣式的復用。

例如,命名了類1為 「TitleName」, 類2為 「PriceAll」, 它們分別包含了不同的文字屬性和樣式,當我們需要使用類1的時候,只要輸入 「TitleName」 這個名字,類2則輸入 「 PriceAll 」 即可,可以省去成千上萬行代碼。

所以,當我們在做設計規范時,為什么會有文字的部分,原因除了設計統一性的要求以外,還有就是為了方便程序員可以提前把字體的樣式定義好,提升整個項目界面布局的效率。

這里要注意的就是,任何一個文本樣式,只要定義過,它的所有屬性和值就是絕對的,如果要調整其中任意的一個參數,那么對于程序而言,它就是一個新的樣式。

所以回到前面所說的單行文本和多行文本的行高問題,如果在其它屬性相同的狀況下,設置了兩種行高,那么實際就變成了兩個文字樣式,會讓開發過程變得更繁瑣。

所以,盡可能保證文字樣式的精簡,是對設計過程中對文字設置的基本要求。

2. 設計規范中的文字

很多人以為文字設計規范就是把用過的文字列一些出來,沒啥難度。這也是一個誤區,想要讓整個開發過程順利,不在文字實現問題上栽跟頭,那么設計規范中文字的規范制定就至關重要。

從文章最開始,就說過,多行文字下,行高勢必要進行調整,于是就和默認狀態下有差異,而我們在設計過程中,有很多文字即可能出現單行也可能出現多行,比如下面的案例。左側是只有一行的狀態,右側是兩行的狀態,于是行高上就發生了變化。

所以,為了解決后面很多不必要的麻煩,我們盡可能在制定設計中的文字規范時,就將文字的行高設置成多行顯示高度下的數值,再以此進行排版。這樣,就可以解決非常多不必要的問題。

所以,細心的同學應該發現了上面演示的案例中,我用的文本框高度實際上都比正常行高再多出一點。

為了保證我們設計過程中的統一性,同時要將應用過的文字樣式通過軟件功能進行整理。比如下圖是 Sketch 中的字體樣式庫。

在項目開始設計的時候,隨著主要頁面樣式的確認,我們就要著手開始規范字體的使用,將這些樣式添加到軟件的字體庫中。

整理字體樣式的過程,一定要為樣式進行合理命名,絕對不能用一些完全不著調或者沒意義的字符,比如 A1、A2、C1、C2 之類的。我們要盡可能根據心里所想的角色名來命名文字樣式,這樣在添加文字的時候我們可以通過標題來快速識別。

還有,我會習慣于將樣式建立排序,根據權重的高低用數字序號來進行排列,這樣在高頻率和強度的使用下,可以形成肌肉記憶,而不是每次要調用樣式的時候我都要查找半天(實際項目中樣式數量會遠不止那么一點)。

只要頁面的字體樣式被整理出來,那么后續的設計中,我們就要盡可能的調用這些樣式來設計和排版,只有在某些新的場景下,已有的樣式實在不足以支撐界面,才創建新的樣式出來。

換句話說,就是要保證我們設計稿中每一個出現的文字它們都屬于已經制定好的某個樣式,并且它們的行高在多行和單行狀態下都能一致。這樣,我們只需要將設計稿上傳到類似藍湖的工具中,程序員就可以順滑高效的將文字效果正確的實現出來。

結尾

以上,就是我暫時能想到的關于一個專業的 UI 設計師,在設計過程中對文字進行排版和設置的全部內容了。再細節的東西實在肝不動了,因為篇幅很長,而且幾經修訂,細節處可能會有錯誤,如果大家發現了,可以在評論區留言。

當然,想要脫離圖文,通過更好的形式了解和學習這些知識點和實際應用方法,就需要通過視頻教學的形式了,歡迎來關注我的 UI 基礎課程,學習更全面有用的干貨。

歡迎關注作者的微信公眾號:「超人的電話亭」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/ui-text-application

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里