在著手設計UI界面時坎炼，困擾著新人最突出的問題就是元素尺寸如何設置的問題。所以整理了一篇文章做一下掃盲拦键，力求讓新人一次搞懂谣光。
因為文章實在太長，所以會分為上下兩篇發(fā)布芬为，本篇為下篇萄金，主要內(nèi)容為：
- 字體字號
- 圖標大小
- 組件尺寸
- 組件尺寸
本小節(jié)要開始介紹前面沒有說的文字了，文字的尺寸至關(guān)重要媚朦，但首先理解了前面所講的控件之后氧敢，再去思考文字尺寸的用法，會相對更容易一些询张，它們之間也有一些有趣的聯(lián)系孙乖。
而在對控件和文字都掌握熟練以后，才能進入后面的組件設計份氧，這是我認為的一個比較合理的學習過程唯袄。
首先我們知道，安卓和 iOS 應用的中英文字體各不相同蜗帜，蘋果是用蘋方和 San Francisco越妈，安卓使用思源黑體和 Roboto。
如果不知道該去哪里下載這些字的同學钮糖，可以在我公眾號里回復“字體”下載對應的字體源文件梅掠。
在后面我們主要以 iOS 作為說明的對象酌住，安卓則同理，可以直接參照 iOS 的字體尺寸設置阎抒。
一酪我、英文的字號
在蘋果的官方建議中，有羅列出比較完整的文字字號建議且叁，但大家一定要謹記都哭，那些就是建議，并不需要在非官方的組件中應用那些字號逞带。下圖是蘋果默認字體尺寸欺矫，詳見我們翻譯的 iOS 規(guī)范第 124 頁 (公眾號中回復“iOS”可獲得下載鏈接)。
首先我們要先劃分出一個文字字號的取用范圍展氓，之后所有字體的字號設置就在那里面挑選穆趴。
在 UI 中，最小字號的依據(jù)一般有兩個遇汞，一個是人眼的可見度未妹，另一個是屏幕的顯示極限，綜合兩者最小的字號應該在 9pt 空入。而最大的字號络它，以 iOS11 的標題字號 34pt 為準即可。
從 9-34歪赢，理論上其中每一個整數(shù)都可以使用化戳，但我還是建議要應用一定的習慣。下面埋凯，就是我在英文應用設計中會使用的字體字號列表点楼，為了便于記憶，我就只拆分成三種類型递鹉，初學者在使用時直接套用就可以盟步。
? 標題：34藏斩、28躏结、24、22狰域、20
? 閱讀：18媳拴、16、14兆览、12
? 注釋：11屈溉、10、9
注：單位均為pt
在英文應用中抬探，我們應用的字號大小隨項目復雜度決定子巾，通常帆赢，尺寸會在五種以上，兩種標題线梗、兩種正文椰于、一種注釋類字號，當然仪搔，我們還會通過字重和色彩進一步劃分瘾婿，不過那不在這里的討論范圍中。例如下面我使用五種字號尺寸設計出來的原型案例：
另外烤咧，在 iOS 中偏陪，字號小于 20pt 使用 SF Pro Text，大于等于 20pt 時則使用 SF Pro Display 字體煮嫌，這點大家需要牢記笛谦。
數(shù)字字體則可以等同于英文，但如果有需要展示數(shù)據(jù)的需求立膛，那么最大尺寸就要靠自己的判斷了揪罕。
二、中文字體
中文字體和英文字體的最大差異在于筆畫數(shù)宝泵，很多中文的筆畫和結(jié)構(gòu)都異常復雜好啰，如 “嚷”、“饕”儿奶、“餐”等框往，所以，最小的尺寸不可能和英文相等闯捎。建議最小中文字號使用 11pt椰弊。
至于最大的中文，因為蘋方并沒有 SF pro 字體那么豐富的字重瓤鼻，字號過大會有正負形失衡的違和感秉版，所以，最大字號的尺寸也應比英文小茬祷。
下面是我在中文應用中建議使用的字號：
? 標題：28清焕、24、22祭犯、20
? 正文：18秸妥、16、14
? 注釋：12沃粗、11
注：單位均為pt
前面做過的原型粥惧，應用的就是這些字號。
中文的字號選擇范圍是比英文小的最盅，并且突雪，中文字重數(shù)遠少于英文起惕，我們在做中文應用的排版遠遠比英文應用的容易。很多新手誤以為英文更容易設計咏删，那都是源自對英文的陌生疤祭，只是將字符純粹的當成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本，而如果涉及到需要閱讀的英文文本設計時饵婆，字體勺馆、字號、字間距以及行高的選擇就會變得異常復雜侨核。
三草穆、文字的邊距
講完了字號的選擇范圍，這里我們就要再來討論下一個問題搓译，就是如何更細化地去選擇字號悲柱。
首先，合理的字號是和環(huán)境息息相關(guān)的些己，而這種聯(lián)系最多的體現(xiàn)在文本區(qū)域的邊距上豌鸡。能被合理閱讀的文本段落，是需要留白的段标，過于擁擠的文字排列只會造成閱讀的不適涯冠。
因為前面我們已經(jīng)說過控件的尺寸如何設置，所以當我們在設置文字時逼庞，很多時候是根據(jù)所定義的控件的高度蛇更，結(jié)合邊距來選擇文字的字號，下面通過一些控件來舉例赛糟。
例如我們定義了一個 40pt 高的按鈕派任，在設置文字時，嘗試將多種文字字號置入璧南，過多的間距和過小的間距都會讓按鈕看起來不精致掌逛。合適的字體大小應該是 16pt。
而如果設置了一個 24pt 按鈕司倚，那么得到的結(jié)論應該是 12pt豆混。
輸入框的文字應用和按鈕相同，也以上下間距作為主要參考对湃。
字號的選擇崖叫，除了本身的定位（如標題或正文）以外遗淳，是可以通過比較的方式得出最優(yōu)結(jié)果的拍柒。只要稍微花一點點時間，像上方案例演示的一樣將設計元素復制排列出來屈暗，就可以很快選出最適合的數(shù)值拆讯。
最后脂男，前面說到的關(guān)于文字字號的設定，結(jié)合控件的尺寸規(guī)范种呐，就能在下面決定組件的設計尺寸宰翅，缺一不可。
多做針對性練習爽室，以提升對控件和文字的掌握熟練度是很有必要的汁讼。建議多做一些簡單界面的臨摹，并套用前面提到的元素尺寸阔墩，這樣很快就能適應這種高效規(guī)范的方式了嘿架。
這一節(jié)要講講關(guān)于圖標的尺寸，應該是最容易的地方啸箫，因為前面的內(nèi)容中耸彪，我們已經(jīng)規(guī)范并習慣了使用 4 的倍數(shù)作為尺寸的最小量度，那么在圖標中只需要同樣遵循這樣的原則忘苛。從相關(guān)的圖標素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律蝉娜，如 iconfont、iconsearch 等等扎唾。
一召川、圖標的權(quán)重
在設置具體的尺寸前，我們還是要談談權(quán)重的問題胸遇。正常的 APP扮宠，通常會包含大量的圖標，而這些圖標狐榔，大小并不會完全一樣坛增。如下面的案例：
之所以這些圖標的大小不一樣，和它們代表的功能和權(quán)重分不開關(guān)系薄腻。我們可以簡單將應用內(nèi)會出現(xiàn)的圖標分成 3 類收捣，代表不同級別的權(quán)重。
最高：頁面中重要的功能入口
中等：底部導航欄用的圖標
最低：一般的工具類圖標
當然庵楷，這是我簡化過的邏輯罢艾，類似淘寶、京東尽纽、攜程這類大型應用咐蚯，就還可以劃分出更細致的權(quán)重類型。而不同的權(quán)重實際上就對應了不同尺寸的圖標弄贿，如果有 3 種權(quán)重春锋，那么我們在設計的過程里就會設計三種尺寸的圖標。
二差凹、圖標的尺寸
首先劃重點：圖標的尺寸期奔，主要指的是圖標在應用中占據(jù)的矩形區(qū)域侧馅，而不是圖標本身圖形的區(qū)域。
我們在設計具體圖形前呐萌，是先通過確定矩形區(qū)域的尺寸馁痴，再制作參考線然后進行設計的。而不是隨意設計了圖標再對應縮放到指定的位置肺孤。
例如罗晕，設計快速入口時，一開始我們定義出的這個組件為分割成兩行四列的矩形塊赠堵，即每個入口的實際大小攀例。
所以，下面就是我對矩形尺寸定義的建議：
? 最大：64顾腊、56粤铭、48
? 中等：44、36杂靶、32
? 最邪鸸摺：28、24吗垮、20
注：單位均為pt
根據(jù)圖標所處區(qū)域的上下間距垛吗，從上方挑選合理尺寸即可，過程與字號設置是一樣的烁登，這里就不多做演示了怯屉。
還需要注意，在一套 App 中饵沧，圖標出現(xiàn)的尺寸數(shù)盡可能減少锨络，尤其對于新手，只需要應用 2-4 套不同的尺寸即可狼牺，否則也會對視覺體驗帶來明顯的破壞羡儿。
最后，就要說說組件的尺寸是怎么設置了是钥。
首先我們要知道組件是什么掠归，它是一個包含了控件、文字悄泥、圖標的功能合集虏冻。可以是一個獨立的信息展示單元弹囚，也可以完成一個復雜的操作流厨相，是學習 App 設計中最重要的環(huán)節(jié)。
一、組件的尺寸原則
定義組件的長和寬领铐，方式有兩種，一種是根據(jù)外部環(huán)境制定宋舷，一種是根據(jù)內(nèi)容調(diào)節(jié)绪撵。
第一種，即通過外部的元素來確定組件的尺寸祝蝠。例如我們要設計一個頭部的 banner 輪播圖組件音诈，以左右可以滾動的形式展現(xiàn)。那么首先要確定我們希望輪播圖在屏幕中占多少比例绎狭，再確定高度细溅。例如我們覺得大致要有屏幕 1/3 高，那么可以設定高度為 220pt（664/3）儡嘶，而根據(jù)上下對齊的原則喇聊，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。
第二種蹦狂，是根據(jù)我們里面添加的內(nèi)容元素來確定寬和高誓篱。例如在首頁輪播圖下方，添加左右滾動的卡片凯楔，那么我們先設定里面的控件和文字尺寸窜骄，然后再通過添加內(nèi)邊距的形式確定組件的尺寸。
當然摆屯，也有混合的定義方式邻遏，如一開始定好寬，根據(jù)內(nèi)容設定高虐骑，像花瓣瀑布流的卡片准验，或者定義好高來調(diào)節(jié)寬。具體使用什么形式廷没，就要因地制宜了沟娱。
下面會通過幾個常見的組件案例，來演示如何定義它們的尺寸腕柜。
二济似、動態(tài)卡片
動態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)盏缤。每條動態(tài)通常占據(jù)內(nèi)容區(qū)域的整列砰蠢，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343 pt 的寬唉铜。而高度台舱，就要根據(jù)里面所包含的元素了，如下圖所示。
三竞惋、設置列表
設置列表中柜去，由高度相同的列表項組成，它們的高和寬應該是根據(jù)設計的風格一開始就制定好拆宛，如比較緊湊的風格我們采用 48pt 的高嗓奢，比較寬松的風格就采用 64pt 的高。然后我們再排列內(nèi)部的元素浑厚，進行垂直居中股耽。
四、班次信息
常見的班次信息钳幅，我們在定義它尺寸時物蝙，也是根據(jù)內(nèi)容來考慮的。首先確認它是一個撐滿屏幕的組件即 375pt 寬敢艰，再填入對應的字段內(nèi)容诬乞。
這時候可以將上下的內(nèi)容拆分成3個不同的子模塊：班次、時間钠导、更多操作丽惭，班次和更多操作采用固定高度 44pt 的方式，時間則根據(jù)內(nèi)容設置邊距的方式辈双，最后得到的高度的和责掏，就是班次信息組件的高度。
五湃望、瓷片區(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ù)設置進行分解卿操，就可以很輕松的定義出組件的實際尺寸。而無論任何組件，它們都沒有固定的尺寸值害淤，需要大家不斷的練習掌握制定的思路扇雕。之后再設計完整的頁面，或整套應用時窥摄，就能大大提升效率和設計質(zhì)量镶奉。
有目的和邏輯地對參數(shù)進行設置，是 UI 設計中最重要的一環(huán)溪王！想要真正掌握它們腮鞍，就一定要多做練習進行鞏固值骇。相信任何人都可以在這個過程中發(fā)現(xiàn) UI 設計的樂趣莹菱。
以上的內(nèi)容篇幅限制（實在寫不動了），只專注于元素尺寸的設置方法吱瘩，關(guān)于配色道伟、字體屬性、圖片使用的方法在以后有時間會繼續(xù)更新使碾。
