文件名 文件大小 提取碼 下載來源
iOS 14 規範資源377Mhquu 點此復制 登錄下載

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

往期回顧︰

UI 規範是什麼規範

1. 規範類型梳理

很多人都知道學 UI 有規範,隻果的規範,安卓的規範。但是,多數人並不清楚這些規範到底是什麼,有哪些,以及它們的作用、意義、內容。

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

而職業相關的規範,並不是只有隻果、安卓規範叫規範,而是包含好幾種類型的規範需要我們去了解。

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

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

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

2. 學習規範的方法

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

而建議,則是行業或官方建議你這麼干,但如果你頭鐵,比較有自己的小情緒不想這麼干的時候怎麼辦……我能怎麼辦?當然是你想做就做。/p>

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

壞就壞在建議這個地方,建議類規範才是規範中的大部分,我們翻譯的的 iOS 中文版本在後面可以獲。 灰 忝強戳,就可以發現這洋洋灑灑幾百頁里,大多數都是建議,它們根本無法直接指導你要怎麼做。

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

所以,規範學習首先要學會的,就是分辨哪些是規則,哪些是建議。把規則牢牢背下來記。 呀ㄒ樽魑 桓 晌嗜Я伎急澈蟺睦磧傘 /p>

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

基礎規範的掃盲

1. 屏幕和分辨率

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

2. 矢量和位圖

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

既然矢量可以隨意縮放,位圖還有什麼存在必要?

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

3. 圖像文件格式

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

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

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

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

4. 色彩模式認識

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

  • 硬件規格
  • 配置文件

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

3. 計算機字體

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

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

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

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

結語

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

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

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

我們下篇再賤……

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

零基礎 UI 入門指南(四)︰移動端相關規範認識(附素材打包)

附件下載

文件名 文件大小 提取碼 下載來源
iOS 14 規範資源377Mhquu 點此復制 登錄下載
點贊 25
收藏 65
繼續閱讀相關资讯

發表評論 已發布 6

還可以輸入 800 個字
 
 
載入中....
6 收藏