學會軟件，并不代表就能合理輸出界面了。就像寫作一樣，會用筆寫字和掌握寫作技巧、行文思路、語法措辭是兩碼事。

學習設計，就必然要掌相關領域的規范，而這部分規范和軟件技巧無關，不要只把軟件的學習放在第一位，要同等重視 UI 基礎規范的學習。

這一章，主要分享和移動端 UI 有關的基本規范性常識，讓新手不會成為光會動手沒有常識的 “職業巨嬰”。

往期回顧：

UI 規范是什么規范

1. 規范類型梳理

很多人都知道學 UI 有規范，蘋果的規范，安卓的規范。但是，多數人并不清楚這些規范到底是什么，有哪些，以及它們的作用、意義、內容。

規范一詞，可以解釋為 —— 某一行業或者行為進行定性的信息規定。它不是數學定理，而是人為制定的條件、規則、約束、限制。

在從事 UI 設計師這個職業，掌握規范，就是掌握界面設計的必備條件、規則、約束、限制有哪些，確保自己做出來的東西具備可用性的，而不是毫無實現價值的飛機稿。

而職業相關的規范，并不是只有蘋果、安卓規范叫規范，而是包含好幾種類型的規范需要我們去了解。

我把它們分為下面這些類型：

計算機規范，指的就是計算機領域的部分基礎常識。有一部分知識是設計師也必須掌握的，例如圖形成像、圖形文件格式、字體顯示原理等。

硬件規范，主要指的是硬件上的特性對設計產生的影響。例如電容屏和電阻屏的操作差異，視網膜屏和低分屏的顯示邏輯，折疊屏的操作和適配方式。

系統規范，則是不同軟件系統開發者制定出來的規范原則。系統級規范大到硬件底層系統，比如 Windows、Mac OS、Android，小到一些開源框架或軟件系統，如 AntDesign、Element 等。

視覺和交互規范，則是在視覺和交互領域中的一些必要規則和限制。比如視覺統一性的要求，最小可點擊區域等。

這兩類規范我們會在后續的分享中一點點加入，本篇內容將圍繞前三者展開。

2. 學習規范的方法

學習規范的重要性大家應該心里都有數，可能你們已經摩拳擦掌想要大學一番了。但我要先潑盆冷水，那就是規范學起來不像軟件那么 “舒服”。

不管是什么方向的規范，都可以分成兩個大類，那就是規則和建議。

規則是指硬性規定，即這個規范說什么就是什么，不以產品、設計、開發個人意志為轉移。比如非視網膜屏幕，你不可能要求文字的顯示沒有筆畫虛化，你也不能在 iOS 系統下憑空制定安卓系統字體。

這類規范是最容易掌握的，因為規范是被定死的，只要按照這個標準做就可以了。就算有再多規范，你整個筆記全記錄下來按需查看也就完事了。

而建議，則是行業或官方建議你這么干，但如果你頭鐵，比較有自己的小情緒不想這么干的時候怎么辦……我能怎么辦？當然是你想做就做啊！

例如無論 iOS 還是 Material 都建議使用 8 的倍數設置元素尺寸（實際上官方自己的設計也沒有完全遵守），實際上對于設計師來說，你愛用不用……對于實際設計過程和落地的項目不會產生什么決定性的影響。

壞就壞在建議這個地方，建議類規范才是規范中的大部分，我們翻譯的的 iOS 中文版本在后面可以獲取，只要你們看了，就可以發現這洋洋灑灑幾百頁里，大多數都是建議，它們根本無法直接指導你要怎么做。

新手天真的以為，只要學會 iOS 規范或者安卓規范之類的系統規范，就知道界面怎么設計了，實際上根本不存在那回事。規范中大量的建議，宏觀的、玄學的、模棱兩可的，就是怕過渡干涉設計師創作發揮，要預留充分的彈性空間。

而這些建議的內容，你想怎么解讀，怎么實施，就看你自己的經驗和對當前項目的理解，沒有絕對正確的結論。

所以，規范學習首先要學會的，就是分辨哪些是規則，哪些是建議。把規則牢牢背下來記住，把建議作為一個疑問去思考背后的理由……

順便輸出下觀點，如果所有設計細節全可以通過規范定死，實現標準化，那還要 UI 設計師做什么，直接寫成程序和初級 AI 生成就行了。

基礎規范的掃盲

1. 屏幕和分辨率

首先，UI 設計師產出的內容，都是在電子屏幕中顯示的，是數字化的圖形，而不是要打印噴繪出來的三維世界實物。所以，屏幕顯示規則決定了圖形的顯示方式。

電子屏幕成像的基本原理，即一塊完整的屏幕由若干像素點組成。屏幕分辨率的參數，如 1920*1080，指的就是這塊屏幕 XY 軸包含的像素點數量。

像素點是圖像顯示的最小單位（通道不算），每個像素點可以顯示一個顏色，我們看見的電子圖像，就是由這一個個色彩的 “小點” 拼裝而成。

隨著技術的進步，屏幕分辨率越來越高，以及增加了子像素渲染技術，讓我們看到的圖形越來越細膩、清晰。

而 iPhone 4 問世后更是帶來了 “視網膜屏” 技術，3GS 使用 320*480，而 4 使用 640*960，像素密度提升了一倍，總量提升 4 (2*2) 倍。再到后來的 iPhoneX，屏幕密度再次提升一倍，總量是原來的 9 (3*3) 倍。

那么這時候問題就來了，這些數值差距那么大，我們創建畫布要以哪個參數為標準？真實項目里，我們是不是得每個尺寸做一套？

在這里，我們不做過于專業的技術科普，大家只要牢記一點，在 iOS 和 Android 開發中，是沒有 “像素” 這個單位的。

蘋果用的長度單位叫 PT，安卓的是 DP 和 SP，這些單位具體內涵大家不用去糾結，本質上它們只是一個符號、矢量單位，沒有任何區別。

這種單位的價值，就是可以統一一套數值體系，并運用在任何不同密度的屏幕中去，系統會自動完成對屏幕實際顯示像素的換算和顯示。

例如，我們在 iOS 中制定了一個長寬 44pt 的圖標，那么它在 3GS 中就是 1:1 的顯示狀態，即 44px。如果在 iPhone 4 中，就是 1:2 的狀態，即 88px，在 iPhone X 中，則是 1:3 的 132px。

換算成幾倍，以及換算依據是什么，前期可以不用深究。只要知道用 PT 給出的數值是萬能的，程序員寫代碼用這個單位，系統也根據這個單位計算像素值。

我們在 Figma / Sketch / XD 創建的畫布，實際上就是以 PT 為基礎（矢量）。如果我們要輸出不同屏幕密度的圖像，就可以在導出面板選擇導出 1x、2x、3x 的倍率即可。

2. 矢量和位圖

上面我們說了 PT、DP、SP，本質上都是一樣的東西，單位可有可無。主要的原因，就在于矢量和位圖之間的原理差異上，它們是計算機領域最重要的兩種圖像類型，

簡單點說，矢量圖是通過代碼繪制出來的圖形。比如代碼指定了一個圓，那么系統就就會按圓的顯示規則去解析它。而位圖，則是去記錄一定像素區域內，每個像素顯示顏色的格式。

所以，如果用矢量和位圖格式分別畫個圓，那么持續放大，就會發現矢量邊緣依舊平滑，而位圖的圓則邊緣出現了深淺不一的 “鋸齒”。

之所以有這種差異，就是因為對于系統來說，它解析矢量文件是接受了我要 “畫個圓” 的指令，不管放大還是縮小，它都按圓的方式顯示。而解析位圖，則僅僅是把位圖中的像素色彩信息展示出來，它本身包含的了多少像素色彩信息，就顯示多少。

所以，矢量圖形可以隨意進行縮放，不會有顯示上的問題。而位圖因為包含的色彩信息是固定的，就沒辦法支持無損的放大。

在矢量的世界里，也沒有具體的度量單位，圖形和圖形之間的大小關系是比例關系而不是尺寸，只是根據我們顯示的需要，它再被轉換成像素呈現。所以不管是 PT、DP、SP，都沒有本質區別。

既然矢量可以隨意縮放，位圖還有什么存在必要？

矢量并不是萬能的，它記錄圖形的信息是非常有限的，適用于有明確幾何關系和色彩簡單的圖形，比如圖標、文字、扁平插畫。

而復雜的不規則圖像，或者包含漸變、投影元素，都沒法用矢量來完成，如照片、還是必須使用位圖來記錄才能正常顯示。

矢量和位圖的認識涉及到項目方方面面，需要慢慢理解它們的差異和使用場景，包含切圖導出格式，Lottie 動畫邏輯，字體圖標應用限制等。

3. 圖像文件格式

圖像文件格式，即在計算機中記錄單個圖像的文件格式類型、文件后綴。根據矢量和位圖的區別也可以分成兩個大類。

首先說矢量格式，UI 中會涉及的主要就是 SVG 和 PDF 了。在 iOS 規范中，矢量格式圖形要導出 PDF，而安卓中則使用 SVG。至于它們具體有什么差異，感興趣的同學可以自己查找。

除了矢量格式外，還有若干的位圖，它們有各自適用的場景，我們分別介紹。

• PNG：無損的位圖格式，可以顯示透明背景，是 UI 位圖元素切圖的最佳選擇。
• JPG：有損的位圖格式，體積更小，但不能顯示透明背景，適用于運營圖片素材。
• GIF：可支持動畫幀的位圖格式，主要用來作為動效示意，或一些運營動畫元素的素材。
• WEBP：近年新興的格式，壓縮效率較高，常用來作為逐幀動畫的幀圖形。

4. 色彩模式認識

顏色是一門很復雜的學問，在具體學習配色前，更應該先認識顏色的底層規范 —— 色彩模式。

色彩模式是一種用來描述、記錄色彩的方法，而不同場景，方法就不一樣。為什么解釋顏色還要用不同的方法？

首先，最早系統研究色彩必然從自然界開始，我們總結了色彩的基本規律，由色相、飽和度、明度構成了色彩的三個基本要素，即 HSB 色彩模式。

HSB 是描述自然界所有顏色的方法。但是，隨著人類的工業、化學技術提升，以及彩色屏幕的發明，對顏色的需求和應用就越來越廣泛。

在專業的染印領域，形成了由 青(Cyan)、紅(Magenta)、黃(Yellow)、黑(Black) 四種顏料作為基礎調和其它色彩的體系，也就是我們常說的 CMYK 模式。

而在電子屏幕中，每個像素，由紅(Red)、綠(Green)、藍(Blue) 三個不同發光二極管的發光強弱來組合成一個顏色的，就叫 RGB 模式。

在設計軟件中，通常會自動幫助我們在不同的色彩模式中進行換算，每個顏色會由對應的其它模式色值，比如 PS 的識色器面板。

根據顯示的原理，不管你創建一個什么色彩模式的文件，在屏幕上你看到的顏色必然是被換算成 RGB 顯示的。

光知道這幾個模式是不夠的，它們只是最基礎的概念。在實際的設備中，即使都是使用 RGB 的電子屏幕，顯示同一個數值的顏色，色彩也可能天差地別。

這種差別對 UI 的設計過程會造成非常重大的干擾和影響，比如你公司電腦上做完的顏色放手機、客戶、PPT、甚至家里電腦上，就可能完全不一樣。

造成 UI 設計師設計內容色彩差異的原因主要有兩個：

• 硬件規格
• 配置文件

硬件規格是顯示器本身電路板、顯示面板、晶體管、工藝水平的總和。技術方案、成本不一樣，就必然導致 Gamma、色域、亮度的差異，最終顯示效果的差異，這問題網上屢見不鮮。

更蛋疼的是，在一個屏幕的不同軟件里，一樣的色彩設置都能顯示出不同的顏色……這就是色彩配置文件引起的差異。

色彩配置文件（ICC，也叫色彩描述文件）是一個用來告訴系統應該如何顯示色彩的規范。任何系統、顯示器，都會加載這個規范來呈現色彩，相當于疊加一層 “濾鏡”。它的本質作用是確保不同設備（包括印刷設備）、環境對相同色彩信息的呈現保持一致。

但是，色彩配置文件并不只有一個，不同廠商、標準會根據相關需求制定出不同配置文件，在電腦相關設置中就可以找到。

一般軟件顯示內容跟隨系統的色彩配置，但是對于我們用的專業軟件，是可以獨立制定的。無論是 PS 還是 Figma、Sketch。如果要將不同設計軟件和系統色彩保持一致，就一定要記得將它們的色彩配置文件設置成同一個。

3. 計算機字體

這部分我們要講的是文字怎么被顯示出來的規范，但不是字體參數應該怎么設置的規范。

文字對于我們人來說是有價值有信息的，但對于計算機來說，任何文字對于計算機都只是一串固定的編碼。計算機通過讀取文字編碼，來呈現對應的文字信息。

世界語言文字多種多言，而每個文化的文字都需要制定相關的編碼，所以文字編碼也不是只有一種。比如計算機最早的 ASCII 編碼，只記錄了大小寫、數字少量符號。這顯然滿足不了幾萬個中文字體。

所以，后面就有了 GBK、Unicode、UTF-8 等不同文字編碼規則，為文字的顯示提供識別基礎。除了系統外，任何軟件、APP、網頁，都可以指定編碼類型，比如 HTML 代碼中頭部的編碼指定。

有了文字的編碼，計算機能識別要輸出哪個文字。但是，這個文字長啥樣怎么決定呢？

這時候就要討論字體文件了，常見的字體文件包含 TTF、OTF、TTC 等。這里我們不用特意關注不同字體文件格式的差異，只要知道一件事，字體的圖形樣式被記錄在這些文件中。

我們可以用一些字體工具來打開或創建字體文件（下圖是 Fontcreator），你就可以看到每個字體，其實就是一個獨立的矢量圖形，同時包含一段對應的編碼。

所以，計算機顯示字體的邏輯，實際上就是讀取了數據中文字的編碼，然后用這個編碼去指定的字體文件中檢索對應的圖形，再將這個圖形顯示出來的過程。

這個過程中如果有前后不匹配的情況，就會出現問題。首先就是編碼，如果軟件使用編碼和系統不一致，匹配不到對應文字信息，就會變成亂碼，相信網上下國外單機游戲的同學都有經歷過。

如果想要顯示對應的字體樣式，通常就要讀取本地的字庫文件，你要是沒安裝就顯示不了。蘋果、安卓等設備之所以不能亂指定其它字體，就是因為設備里沒帶那些字體文件顯示不了。

再者，就是中文環境下非常容易出現的問題，中文這么多，多數中文字體文件只覆蓋了一小部分，缺失其它字體，導致同一段文本中出現了指定外的默認字體或者干脆變成空白。

Figma 在網頁版本中使用的字體插件，就是為了保證瀏覽器可以順利處理文字編碼、調用本地字庫，否則中文就不能正常使用和顯示。

最后，字體文件只是一個包含若干對應編碼的矢量圖形，所以你想添加什么矢量圖形都可以，即使不是真實的文字也沒關系。

在 UI 的應用場景里，還有個非常普遍的做法就是，將項目使用的矢量圖標素材，合并成單個字體文件，讓前端通過設置對應的字體來使用這些圖標。而類似我們常見的 Emoji 表情，蘋果官方的 SF Symbol 也都是字體文件，只是置入了不同的圖形而已。

結語

以上，就是對于 UI 必須了解的規范上半部分內容。基于篇幅的限制，也因為是初期整體掃盲階段，部分知識點不會全部展開，后續會以獨立的分享提供出來。

下一篇，才會開始講解有關蘋果和安卓系統規范，以及對應的適配原則。

這個系列寫起來很心累，大家記得點贊、在看、轉發！活躍度越高，我更新頻率才能越快～

我們下篇再賤……

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