在上篇文章《基礎(chǔ)科普 !超全面的 UI 元素尺寸設(shè)置指南(上)》中介紹了設(shè)置 UI 元素尺寸的基礎(chǔ)規(guī)范,及控件尺寸的定義。
這篇就要開始介紹前面沒有說過的文字設(shè)置,圖標的尺寸,UI 的組件設(shè)計了。
01#界面的字號設(shè)置秘訣
文字的尺寸至關(guān)重要,但先理解了控件再思考文字,會更容易一些,它們之間也有一些有趣的聯(lián)系。
而在對控件和文字都掌握熟練以后,才能進入后面的組件設(shè)計認識。
首先我們知道,安卓和 iOS 應用的中英文字體各不相同,蘋果是用蘋方和 San Francisco,安卓使用思源黑體和 Robot。
在后面我們主要以 iOS 作為說明的對象,安卓可以直接參照它的字體尺寸設(shè)置。
1. 英文的字號
在蘋果的官方建議中,有羅列比較完整的文字字號建議,但大家一定要謹記,那些就是建議,并不需要在非官方的組件中應用那些字號。下圖是蘋果默認字體尺寸,詳見我們翻譯的 iOS 規(guī)范第 124 頁。
《iOS 12 設(shè)計規(guī)范——iOS 中文規(guī)范更新啦!》
首先我們要先劃分出一個文字字號的范圍,之后所有字體的字號設(shè)置就在那里面挑選。
在 UI 中,最小字號的依據(jù)一般有兩個,一個是人眼的可見度,另一個是屏幕的顯示極限,最小的字號應該在 9pt 。而最大的字號,以 iOS11 的標題字號 34pt 為準即可。
從 9-34,理論上其中每一個整數(shù)都可以使用,但我還是建議要應用一定的習慣。下面,就是我在英文應用設(shè)計中會使用的字體字號列表,為了便于記憶,我就只拆分成三種類型,初學者在使用時直接照搬就可以。
標題:34、28、24、22、20
閱讀:18、16、14、12
注釋:11、10、9
在英文應用中,我們應用的字號大小隨項目復雜度決定,通常,尺寸會在五種以上,兩種標題、兩種閱讀、一種注釋類字號,當然,我們還會通過字重和色彩進一步劃分,在這不再贅述。例如下面我使用五種字號尺寸設(shè)計出來的原型案例:
在 iOS 中,尺寸小于 20pt 使用 SF Pro Text,大于等于 20pt 時則使用 SF Pro Display 字體,這點大家需要牢記。
數(shù)字字體可以等同于英文,但如果有需要展示數(shù)據(jù)的需求,那么最大尺寸就要靠自己的判斷了。
2. 中文字體
中文字體和英文字體的最大差異在于筆畫數(shù),很多中文的筆畫和結(jié)構(gòu)都異常復雜,如 「嚷」、「饕」、「餐」等,所以,最小的尺寸不可能和英文相等。建議最小中文字號使用 11pt。
至于最大的中文,因為蘋方并沒有 SF pro 字體那么豐富的字重,字號過大會有正負形失衡的違和感,所以,最大字號的尺寸也應比英文小。
下面是我在中文應用中建議使用的字號:
標題:28、24、22、20
正文:18、16、14
注釋:12、11
前面做過的原型,應用的就是這些字號。
中文的字號選擇范圍是比英文小的,并且,中文字重數(shù)遠少于英文,我們在做中文的應用排版遠遠比英文應用容易。很多新手天真的以為英文更容易設(shè)計,那都是源自對英文的陌生,只是將字符純粹的當成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本。
3. 文字的邊距
前面講完了字號的選擇范圍,這里我們就要再來討論一個問題,就是如何選擇。
首先,合理的字號應用是要和環(huán)境息息相關(guān)的,而這種聯(lián)系最多體現(xiàn)在文本區(qū)域的邊距上。能被合理閱讀的文本段落,是需要留白的,過于擁擠的文字排列只會造成閱讀的不適。
因為前面我們已經(jīng)說過控件的尺寸如何設(shè)置,所以當我們在設(shè)置文字時,很多時候是根據(jù)控件定義的高度結(jié)合邊距來選擇文字的字號,下面通過一些控件來舉例。
例如我們定義了一個 40pt 高的按鈕,在設(shè)置文字時,嘗試將多種文字字號置入,過多的間距和過小的間距都會讓按鈕看起來不精致。合適的字體大小應該是 16pt。
而如果設(shè)置了一個 24pt 按鈕,那么得到的結(jié)論應該是 12pt。
輸入框的文字應用和按鈕相同,也以上下間距作為主要參考。
字號的選擇,除了本身定位(如標題或正文)以外,是可以通過比較的方式得出最優(yōu)結(jié)果的。只要稍微花一點點時間,像上方案例演示的一樣將設(shè)計元素復制排列出來,就可以很快選出正確的數(shù)值。
最后,前面說到的關(guān)于文字字號的設(shè)定,結(jié)合控件的規(guī)范,就能在下一節(jié)中決定組件的設(shè)計尺寸,缺一不可。
多做針對性練習,以提升對控件和文字的掌握熟練度是很有必要的。建議多做一些簡單界面的臨摹,并套用前面提到的元素尺寸,這樣很快就能適應這種高效規(guī)范的方式了。
02#界面圖標的尺寸要怎么定?
這一節(jié)要講講關(guān)于圖標的尺寸,應該是最容易的地方,因為前面的內(nèi)容中,應該已經(jīng)習慣使用 4 的倍數(shù),在圖標中同樣遵循這樣的原則。從相關(guān)的圖標素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律,如 iconfont、iconsearch 等等。
1. 圖標的權(quán)重
在設(shè)置具體的尺寸前,我們還是要談?wù)剻?quán)重的問題。正常的 APP,通常會包含大量的圖標,而這些圖標,大小并不會完全一樣。如下面的案例:
之所以這些圖標的大小不一樣,和它們代表的功能和權(quán)重分不開關(guān)系。我們可以簡單將應用內(nèi)會出現(xiàn)的圖標分成 3 類,代表不同級別的權(quán)重。
最高:頁面中重要的功能入口
中等:底部導航欄用的圖標
最低:一般的工具類圖標
當然,這是我簡化過的邏輯,類似淘寶、京東、攜程這類大型應用,就還可以劃分出更細致的權(quán)重類型。而不同的權(quán)重實際上就對應了不同尺寸的圖標,如果有 3 種權(quán)重,那么我們在設(shè)計的過程里就會設(shè)計三種尺寸的圖標。
2. 圖標的尺寸
首先劃重點,圖標的尺寸,主要指的是圖標在應用中占據(jù)的矩形區(qū)域,而不是圖標本身圖形的區(qū)域。
我們在設(shè)計具體圖形前,是先通過確定矩形區(qū)域的尺寸,再制作參考線然后進行設(shè)計的。而不是隨意設(shè)計了圖標再對應縮放到指定的位置。
例如,設(shè)計快速入口,一開始我們定義出的這個組件為分割成兩行四列的卡片,每個入口的實際大小。
所以,下面就是我對矩形尺寸定義的建議:
最大:64、56、48
中等:44、36、32
最小:28、24、20
根據(jù)圖標所處區(qū)域的上下間距,從上方挑選合理尺寸即可,過程與字號設(shè)置是一樣的,這里就不多做演示了。
還需要注意,在一套 App 中,圖標出現(xiàn)的尺寸數(shù)盡可能減少,尤其對于新手,只需要應用 2-4 套不同的尺寸即可,否則也會對視覺體驗帶來明顯的破壞。
03#UI 的組件設(shè)計
最后,就要說說組件的尺寸是怎么設(shè)置了。
首先我們要知道組件是什么,它是一個包含了控件、文字、圖標的功能合集?梢允且粋獨立的信息展示單元,也可以完成一個復雜的操作流,是學習 App 設(shè)計中最重要的環(huán)節(jié)。
1. 組件的尺寸原則
定義組件的長和寬,方式有兩種,一種是根據(jù)環(huán)境制定,一種是根據(jù)內(nèi)容調(diào)節(jié)。
第一種,即通過外部的元素來確定組件的尺寸。例如我們要設(shè)計一個頭部的幻燈片組件,以左右可以滾動的形式展現(xiàn)。那么我們首先要根據(jù)想要幻燈片在屏幕中的占比來制定高度,例如我們覺得大致要有屏幕 1/3 的比例,那么可以設(shè)定高度為 220pt(664除3),而根據(jù)上下對齊的原則,左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。
第二種,是根據(jù)我們里面添加的元素來確定寬和高。例如在首頁幻燈片下方,添加左右滾動的卡片,那么我們先設(shè)定里面的控件和文字尺寸,然后再通過制定內(nèi)邊距的形式確定組件的尺寸。
當然,也有混合的定義方式,如一開始訂好寬,根據(jù)內(nèi)容設(shè)定高,像花瓣瀑布流的卡片,或者定義好高來調(diào)節(jié)寬。具體使用什么形式,就要因地制宜了。
下面會通過幾個常見的組件案例,來演示如何定義它們的尺寸的。
2. 動態(tài)卡片
動態(tài)卡片是很常用的組件,通常以卡片的形式展現(xiàn)。每條動態(tài)通常占據(jù)內(nèi)容區(qū)域的整列,即左右減去制定好的內(nèi)邊距 16pt,那么就是 375-32 = 343pt 的寬。而高度,就要根據(jù)里面所包含的元素了,如下圖所示。
3. 設(shè)置列表
設(shè)置列表中,由高度相同的列表項組成,它們的高和寬應該是根據(jù)設(shè)計的風格一開始就制定好,如比較緊湊的風格我們采用 48pt 的高,比較寬松的風格就采用 64pt 的高。然后我們再排列內(nèi)部的元素,進行水平居中。
4. 班次信息
常見的班次信息,我們在定義它尺寸時,也是根據(jù)內(nèi)容來考慮的。首先確認它是一個撐滿屏幕的組件即 375pt 寬,再填入對應的字段內(nèi)容。
這時候可以將上下的內(nèi)容拆分成3個不同的子模塊,班次、時間、更多操作,班次和更多操作采用固定高度 44pt 的方式,時間則根據(jù)內(nèi)容設(shè)置邊距的方式,最后得到的高度總和,就是班次信息組件的高度。
5. 瓷片區(qū)
主流的瓷片區(qū),其實也由子模塊組合而成,而如淘寶這類會有很多瓷片區(qū)并列的狀態(tài),我們優(yōu)先要考慮的,是每個瓷片區(qū)在屏幕中的占比,也就是先定義好瓷片區(qū)的高度,再拆分內(nèi)容的子模塊。
例如劃分為兩行的瓷片區(qū),總高度為 280pt,上方的模塊高度為 180pt,下方的模塊高度為 100pt,里面的元素,再根據(jù)這個內(nèi)容區(qū)域進行排版。
完成一個完整的組件,是根據(jù)它的內(nèi)容和周圍的環(huán)境決定,我們只要感覺前面幾個部分所說的參數(shù)設(shè)置進行分解,就可以很輕松的定義出組件的實際尺寸。而無論任何組件,它們都沒有固定的尺寸值,需要大家不斷的練習掌握制定的思路。之后再設(shè)計完整的頁面,或整套應用時,就能大大提升效率和設(shè)計質(zhì)量。
總結(jié)
有目的和邏輯性的對參數(shù)進行設(shè)置,是 UI 設(shè)計中最重要的一環(huán)!想要真正掌握它們,就一定要多做練習進行鞏固。相信任何人都可以在這個過程中發(fā)現(xiàn) UI 設(shè)計的樂趣。
全部評論