云南体彩网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 所有的系統字體列表:

文字設置

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. 文本框設置

云南体彩网接下來,就該講講有關文字的排版操作了。在設計界面的過程中,我們通常會使用定寬模式進行排版,也就是輸入文字前像置入矩形元素一樣拖動一個文本區域出來。

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

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

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

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

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

4. 操作實例

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

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

步調1:

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

步調2:

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

  • 大題目:商家名
  • 次題目:模塊名稱
  • 正文:主介紹文字
  • 次文本:簡介、價格
  • 注釋:演出時間、地址、德律風

步調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 基礎課程,學習更全面有用的干貨。

歡迎關注作者的微信公眾號:「超人的德律風亭」

點贊
收藏 210

發表評論 已發布 32

還可以輸入 800 個字
 
 
載入中....
相關推薦
32 收藏