學會軟件，并不代表就能合理輸出界面了。就像寫作一樣，會用筆寫字和掌握寫作技巧、行文思路、語法措辭是兩碼事。
學習設計，就必然要掌相關領域的規(guī)范，而這部分規(guī)范和軟件技巧無關，不要只把軟件的學習放在第一位，要同等重視 UI 基礎規(guī)范的學習。
1. 規(guī)范類型梳理
很多人都知道學 UI 有規(guī)范，蘋果的規(guī)范，安卓的規(guī)范。但是，多數(shù)人并不清楚這些規(guī)范到底是什么，有哪些，以及它們的作用、意義、內容。
規(guī)范一詞，可以解釋為 —— 某一行業(yè)或者行為進行定性的信息規(guī)定。它不是數(shù)學定理，而是人為制定的條件、規(guī)則、約束、限制。
在從事 UI 設計師這個職業(yè)，掌握規(guī)范，就是掌握界面設計的必備條件、規(guī)則、約束、限制有哪些，確保自己做出來的東西具備可用性的，而不是毫無實現(xiàn)價值的飛機稿。
而職業(yè)相關的規(guī)范，并不是只有蘋果、安卓規(guī)范叫規(guī)范，而是包含好幾種類型的規(guī)范需要我們去了解。
我把它們分為下面這些類型：
計算機規(guī)范，指的就是計算機領域的部分基礎常識。有一部分知識是設計師也必須掌握的，例如圖形成像、圖形文件格式、字體顯示原理等。
硬件規(guī)范，主要指的是硬件上的特性對設計產生的影響。例如電容屏和電阻屏的操作差異，視網膜屏和低分屏的顯示邏輯，折疊屏的操作和適配方式。
系統(tǒng)規(guī)范，則是不同軟件系統(tǒng)開發(fā)者制定出來的規(guī)范原則。系統(tǒng)級規(guī)范大到硬件底層系統(tǒng)，比如 Windows、Mac OS、Android，小到一些開源框架或軟件系統(tǒng)，如 AntDesign、Element 等。
視覺和交互規(guī)范，則是在視覺和交互領域中的一些必要規(guī)則和限制。比如視覺統(tǒng)一性的要求，最小可點擊區(qū)域等。
這兩類規(guī)范我們會在后續(xù)的分享中一點點加入，本篇內容將圍繞前三者展開。
2. 學習規(guī)范的方法
學習規(guī)范的重要性大家應該心里都有數(shù)，可能你們已經摩拳擦掌想要大學一番了。但我要先潑盆冷水，那就是規(guī)范學起來不像軟件那么 “舒服”。
不管是什么方向的規(guī)范，都可以分成兩個大類，那就是規(guī)則和建議。
規(guī)則是指硬性規(guī)定，即這個規(guī)范說什么就是什么，不以產品、設計、開發(fā)個人意志為轉移。比如非視網膜屏幕，你不可能要求文字的顯示沒有筆畫虛化，你也不能在 iOS 系統(tǒng)下憑空制定安卓系統(tǒng)字體。
這類規(guī)范是最容易掌握的，因為規(guī)范是被定死的，只要按照這個標準做就可以了。就算有再多規(guī)范，你整個筆記全記錄下來按需查看也就完事了。
而建議，則是行業(yè)或官方建議你這么干，但如果你頭鐵，比較有自己的小情緒不想這么干的時候怎么辦……我能怎么辦？當然是你想做就做。
例如無論 iOS 還是 Material 都建議使用 8 的倍數(shù)設置元素尺寸（實際上官方自己的設計也沒有完全遵守），實際上對于設計師來說，你愛用不用……對于實際設計過程和落地的項目不會產生什么決定性的影響。
壞就壞在建議這個地方，建議類規(guī)范才是規(guī)范中的大部分，我們翻譯的的 iOS 中文版本在后面可以獲取，只要你們看了，就可以發(fā)現(xiàn)這洋洋灑灑幾百頁里，大多數(shù)都是建議，它們根本無法直接指導你要怎么做。
新手天真的以為，只要學會 iOS 規(guī)范或者安卓規(guī)范之類的系統(tǒng)規(guī)范，就知道界面怎么設計了，實際上根本不存在那回事。規(guī)范中大量的建議，宏觀的、玄學的、模棱兩可的，就是怕過渡干涉設計師創(chuàng)作發(fā)揮，要預留充分的彈性空間。
而這些建議的內容，你想怎么解讀，怎么實施，就看你自己的經驗和對當前項目的理解，沒有絕對正確的結論。
所以，規(guī)范學習首先要學會的，就是分辨哪些是規(guī)則，哪些是建議。把規(guī)則牢牢背下來記住，把建議作為一個疑問去思考背后的理由……
順便輸出下觀點，如果所有設計細節(jié)全可以通過規(guī)范定死，實現(xiàn)標準化，那還要 UI 設計師做什么，直接寫成程序和初級 AI 生成就行了。
1. 屏幕和分辨率
首先，UI 設計師產出的內容，都是在電子屏幕中顯示的，是數(shù)字化的圖形，而不是要打印噴繪出來的三維世界實物。所以，屏幕顯示規(guī)則決定了圖形的顯示方式。
電子屏幕成像的基本原理，即一塊完整的屏幕由若干像素點組成。屏幕分辨率的參數(shù)，如 1920*1080，指的就是這塊屏幕 XY 軸包含的像素點數(shù)量。
像素點是圖像顯示的最小單位（通道不算），每個像素點可以顯示一個顏色，我們看見的電子圖像，就是由這一個個色彩的 “小點” 拼裝而成。
隨著技術的進步，屏幕分辨率越來越高，以及增加了子像素渲染技術，讓我們看到的圖形越來越細膩、清晰。
而 iPhone 4 問世后更是帶來了 “視網膜屏” 技術，3GS 使用 320*480，而 4 使用 640*960，像素密度提升了一倍，總量提升 4 (2*2) 倍。再到后來的 iPhoneX，屏幕密度再次提升一倍，總量是原來的 9 (3*3) 倍。
那么這時候問題就來了，這些數(shù)值差距那么大，我們創(chuàng)建畫布要以哪個參數(shù)為標準？真實項目里，我們是不是得每個尺寸做一套？
在這里，我們不做過于專業(yè)的技術科普，大家只要牢記一點，在 iOS 和 Android 開發(fā)中，是沒有 “像素” 這個單位的。
蘋果用的長度單位叫 PT，安卓的是 DP 和 SP，這些單位具體內涵大家不用去糾結，本質上它們只是一個符號、矢量單位，沒有任何區(qū)別。
這種單位的價值，就是可以統(tǒng)一一套數(shù)值體系，并運用在任何不同密度的屏幕中去，系統(tǒng)會自動完成對屏幕實際顯示像素的換算和顯示。
例如，我們在 iOS 中制定了一個長寬 44pt 的圖標，那么它在 3GS 中就是 1:1 的顯示狀態(tài)，即 44px。如果在 iPhone 4 中，就是 1:2 的狀態(tài)，即 88px，在 iPhone X 中，則是 1:3 的 132px。
換算成幾倍，以及換算依據是什么，前期可以不用深究。只要知道用 PT 給出的數(shù)值是萬能的，程序員寫代碼用這個單位，系統(tǒng)也根據這個單位計算像素值。
我們在 Figma / Sketch / XD 創(chuàng)建的畫布，實際上就是以 PT 為基礎（矢量）。如果我們要輸出不同屏幕密度的圖像，就可以在導出面板選擇導出 1x、2x、3x 的倍率即可。
2. 矢量和位圖
上面我們說了 PT、DP、SP，本質上都是一樣的東西，單位可有可無。主要的原因，就在于矢量和位圖之間的原理差異上，它們是計算機領域最重要的兩種圖像類型，
簡單點說，矢量圖是通過代碼繪制出來的圖形。比如代碼指定了一個圓，那么系統(tǒng)就就會按圓的顯示規(guī)則去解析它。而位圖，則是去記錄一定像素區(qū)域內，每個像素顯示顏色的格式。
所以，如果用矢量和位圖格式分別畫個圓，那么持續(xù)放大，就會發(fā)現(xiàn)矢量邊緣依舊平滑，而位圖的圓則邊緣出現(xiàn)了深淺不一的 “鋸齒”。
之所以有這種差異，就是因為對于系統(tǒng)來說，它解析矢量文件是接受了我要 “畫個圓” 的指令，不管放大還是縮小，它都按圓的方式顯示。而解析位圖，則僅僅是把位圖中的像素色彩信息展示出來，它本身包含的了多少像素色彩信息，就顯示多少。
所以，矢量圖形可以隨意進行縮放，不會有顯示上的問題。而位圖因為包含的色彩信息是固定的，就沒辦法支持無損的放大。
在矢量的世界里，也沒有具體的度量單位，圖形和圖形之間的大小關系是比例關系而不是尺寸，只是根據我們顯示的需要，它再被轉換成像素呈現(xiàn)。所以不管是 PT、DP、SP，都沒有本質區(qū)別。
既然矢量可以隨意縮放，位圖還有什么存在必要？
矢量并不是萬能的，它記錄圖形的信息是非常有限的，適用于有明確幾何關系和色彩簡單的圖形，比如圖標、文字、扁平插畫。
而復雜的不規(guī)則圖像，或者包含漸變、投影元素，都沒法用矢量來完成，如照片、還是必須使用位圖來記錄才能正常顯示。
矢量和位圖的認識涉及到項目方方面面，需要慢慢理解它們的差異和使用場景，包含切圖導出格式，Lottie 動畫邏輯，字體圖標應用限制等。
3. 圖像文件格式
圖像文件格式，即在計算機中記錄單個圖像的文件格式類型、文件后綴。根據矢量和位圖的區(qū)別也可以分成兩個大類。
首先說矢量格式，UI 中會涉及的主要就是 SVG 和 PDF 了。在 iOS 規(guī)范中，矢量格式圖形要導出 PDF，而安卓中則使用 SVG。至于它們具體有什么差異，感興趣的同學可以自己查找。
除了矢量格式外，還有若干的位圖，它們有各自適用的場景，我們分別介紹。
- PNG：無損的位圖格式，可以顯示透明背景，是 UI 位圖元素切圖的最佳選擇。
- JPG：有損的位圖格式，體積更小，但不能顯示透明背景，適用于運營圖片素材。
- GIF：可支持動畫幀的位圖格式，主要用來作為動效示意，或一些運營動畫元素的素材。
- WEBP：近年新興的格式，壓縮效率較高，常用來作為逐幀動畫的幀圖形。
4. 色彩模式認識
顏色是一門很復雜的學問，在具體學習配色前，更應該先認識顏色的底層規(guī)范 —— 色彩模式。
色彩模式是一種用來描述、記錄色彩的方法，而不同場景，方法就不一樣。為什么解釋顏色還要用不同的方法？
首先，最早系統(tǒng)研究色彩必然從自然界開始，我們總結了色彩的基本規(guī)律，由色相、飽和度、明度構成了色彩的三個基本要素，即 HSB 色彩模式。
HSB 是描述自然界所有顏色的方法。但是，隨著人類的工業(yè)、化學技術提升，以及彩色屏幕的發(fā)明，對顏色的需求和應用就越來越廣泛。
在專業(yè)的染印領域，形成了由 青(Cyan)、紅(Magenta)、黃(Yellow)、黑(Black) 四種顏料作為基礎調和其它色彩的體系，也就是我們常說的 CMYK 模式。
而在電子屏幕中，每個像素，由紅(Red)、綠(Green)、藍(Blue) 三個不同發(fā)光二極管的發(fā)光強弱來組合成一個顏色的，就叫 RGB 模式。
在設計軟件中，通常會自動幫助我們在不同的色彩模式中進行換算，每個顏色會由對應的其它模式色值，比如 PS 的識色器面板。
根據顯示的原理，不管你創(chuàng)建一個什么色彩模式的文件，在屏幕上你看到的顏色必然是被換算成 RGB 顯示的。
光知道這幾個模式是不夠的，它們只是最基礎的概念。在實際的設備中，即使都是使用 RGB 的電子屏幕，顯示同一個數(shù)值的顏色，色彩也可能天差地別。
這種差別對 UI 的設計過程會造成非常重大的干擾和影響，比如你公司電腦上做完的顏色放手機、客戶、PPT、甚至家里電腦上，就可能完全不一樣。
造成 UI 設計師設計內容色彩差異的原因主要有兩個：
- 硬件規(guī)格
- 配置文件
硬件規(guī)格是顯示器本身電路板、顯示面板、晶體管、工藝水平的總和。技術方案、成本不一樣，就必然導致 Gamma、色域、亮度的差異，最終顯示效果的差異，這問題網上屢見不鮮。
更蛋疼的是，在一個屏幕的不同軟件里，一樣的色彩設置都能顯示出不同的顏色……這就是色彩配置文件引起的差異。
色彩配置文件（ICC，也叫色彩描述文件）是一個用來告訴系統(tǒng)應該如何顯示色彩的規(guī)范。任何系統(tǒng)、顯示器，都會加載這個規(guī)范來呈現(xiàn)色彩，相當于疊加一層 “濾鏡”。它的本質作用是確保不同設備（包括印刷設備）、環(huán)境對相同色彩信息的呈現(xiàn)保持一致。
但是，色彩配置文件并不只有一個，不同廠商、標準會根據相關需求制定出不同配置文件，在電腦相關設置中就可以找到。
一般軟件顯示內容跟隨系統(tǒng)的色彩配置，但是對于我們用的專業(yè)軟件，是可以獨立制定的。無論是 PS 還是 Figma、Sketch。如果要將不同設計軟件和系統(tǒng)色彩保持一致，就一定要記得將它們的色彩配置文件設置成同一個。
3. 計算機字體
這部分我們要講的是文字怎么被顯示出來的規(guī)范，但不是字體參數(shù)應該怎么設置的規(guī)范。
文字對于我們人來說是有價值有信息的，但對于計算機來說，任何文字對于計算機都只是一串固定的編碼。計算機通過讀取文字編碼，來呈現(xiàn)對應的文字信息。
世界語言文字多種多言，而每個文化的文字都需要制定相關的編碼，所以文字編碼也不是只有一種。比如計算機最早的 ASCII 編碼，只記錄了大小寫、數(shù)字少量符號。這顯然滿足不了幾萬個中文字體。
所以，后面就有了 GBK、Unicode、UTF-8 等不同文字編碼規(guī)則，為文字的顯示提供識別基礎。除了系統(tǒng)外，任何軟件、APP、網頁，都可以指定編碼類型，比如 HTML 代碼中頭部的編碼指定。
有了文字的編碼，計算機能識別要輸出哪個文字。但是，這個文字長啥樣怎么決定呢？
這時候就要討論字體文件了，常見的字體文件包含 TTF、OTF、TTC 等。這里我們不用特意關注不同字體文件格式的差異，只要知道一件事，字體的圖形樣式被記錄在這些文件中。
我們可以用一些字體工具來打開或創(chuàng)建字體文件（下圖是 Fontcreator），你就可以看到每個字體，其實就是一個獨立的矢量圖形，同時包含一段對應的編碼。
所以，計算機顯示字體的邏輯，實際上就是讀取了數(shù)據中文字的編碼，然后用這個編碼去指定的字體文件中檢索對應的圖形，再將這個圖形顯示出來的過程。
這個過程中如果有前后不匹配的情況，就會出現(xiàn)問題。首先就是編碼，如果軟件使用編碼和系統(tǒng)不一致，匹配不到對應文字信息，就會變成亂碼，相信網上下國外單機游戲的同學都有經歷過。
如果想要顯示對應的字體樣式，通常就要讀取本地的字庫文件，你要是沒安裝就顯示不了。蘋果、安卓等設備之所以不能亂指定其它字體，就是因為設備里沒帶那些字體文件顯示不了。
再者，就是中文環(huán)境下非常容易出現(xiàn)的問題，中文這么多，多數(shù)中文字體文件只覆蓋了一小部分，缺失其它字體，導致同一段文本中出現(xiàn)了指定外的默認字體或者干脆變成空白。
Figma 在網頁版本中使用的字體插件，就是為了保證瀏覽器可以順利處理文字編碼、調用本地字庫，否則中文就不能正常使用和顯示。
最后，字體文件只是一個包含若干對應編碼的矢量圖形，所以你想添加什么矢量圖形都可以，即使不是真實的文字也沒關系。
在 UI 的應用場景里，還有個非常普遍的做法就是，將項目使用的矢量圖標素材，合并成單個字體文件，讓前端通過設置對應的字體來使用這些圖標。而類似我們常見的 Emoji 表情，蘋果官方的 SF Symbol 也都是字體文件，只是置入了不同的圖形而已。
以上，就是對于 UI 必須了解的規(guī)范上半部分內容。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。