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