近段時間來，我和靜電的sketch 設(shè)計群都已經(jīng)超過千人規(guī)模，也有很多設(shè)計是新人加入到 UI 設(shè)計和 sketch 這個大家庭。但是，隨之而來的也暴露了很多問題，也是目前 UI 設(shè)計行業(yè)里一個非常常見的問題，就是很多人雖然已經(jīng)從事 UI 設(shè)計行業(yè)，但是他們對 UI 設(shè)計的一些很基本的專業(yè)知識缺乏最基本的認(rèn)知?；蛘哒f是接受到的是一些錯誤的認(rèn)知。我們一個群的管理員也曾不厭其煩得為大家科普，但是很多東西確實(shí)不是一句兩句話就能解釋清楚，也不是一時半會就能輕易理解，所以就有了今天這篇文章。

一名合格的 UI 設(shè)計師需要知道的...

1、擬物化（擬真化）和扁平化

在 UI 設(shè)計領(lǐng)域里，設(shè)計風(fēng)格主要分為兩個“擬物化”和“扁平化“?！皵M物化”也叫“擬真化”，其以iOS（6之前版本）和安卓陣營的錘子為代表。它的顯著優(yōu)點(diǎn)是，細(xì)節(jié)多、有光影、有質(zhì)感，很大程度上模擬了現(xiàn)實(shí)生活中的物品形狀、材質(zhì)、光影效果。扁平化則是以安卓5.0以及若干國產(chǎn)手機(jī) ROM 為代表，它強(qiáng)調(diào)簡單、抽象、符號化，去掉了裝飾性設(shè)計元素，沒有明顯質(zhì)感，弱化光影（某些文字資料說扁平化完全沒有光影效果，我個人不認(rèn)同，參考谷歌 MD），最核心的設(shè)計方法是幾何形狀和復(fù)色方案（稍后介紹）。Google 在安卓5.0上使用了全新的 Material Design 設(shè)計，讓安卓有了跟蘋果一樣鮮明的、系統(tǒng)化的設(shè)計語言。關(guān)于兩者的好壞，一直沒有定論，我個人認(rèn)為兩者各有特色，可以各成一家，每一種風(fēng)格都有欣賞的人，每一種都有它最合適的應(yīng)用場景，設(shè)計本身沒有好壞，只有是否合適。（話說我個人更喜歡扁平化）

有興趣了解更多扁平化好擬物化兩種風(fēng)格的好與壞，可以參考國內(nèi)知名設(shè)計師龐門正道”阿門“的《擬物扁平話題終結(jié)者》

2、原色、補(bǔ)色、復(fù)色

在了解如何使用顏色之前，我們需要先知道色彩的構(gòu)成。三原色分為"光三原色（RGB）"和"顏料三原色（CMY）"UI是為電子顯示設(shè)備設(shè)計，所以我們我們這里說的三原色是"光三原色 RGB"，我們看到的顯示設(shè)備上的圖像就是由RGB 三種顏色的光構(gòu)成，后續(xù)所有概念也是相對于光而言。

?原色：原色有三種，包括紅色 Red、綠色 Green、藍(lán)色 Blue，原色的 RGB 通道其中兩個為0。

?補(bǔ)色：由2種等量原色組成的叫做補(bǔ)色，也叫互補(bǔ)色，補(bǔ)色加上另一種原色會呈現(xiàn)白色（飽和度100%的時候），例如紅色+綠色=黃色，為藍(lán)色的互補(bǔ)色；綠色+藍(lán)色=青色，為紅色的互補(bǔ)色。

?復(fù)色：由三種原色組成的顏色叫做復(fù)色，一般而言復(fù)色相對于原色和補(bǔ)色的飽和度要低。復(fù)色的視覺感官上相對于前兩者沒那么鮮艷扎眼，亮度相對高的復(fù)色更加討好人的眼球，我們看到的顏色絕大部分屬于復(fù)色。

UI 設(shè)計相對于平面設(shè)計而言，我們并不需要給用戶十分鮮艷搶眼的顏色，這樣可能會在長時間使用的過程中產(chǎn)生視覺疲勞，我們更需要的是，給用戶一個視覺上相對討人喜歡，并且能在長時間的使用過程中不會輕易產(chǎn)生視覺疲勞，或者延緩視覺疲勞的產(chǎn)生。復(fù)色的飽和度相對低，并且復(fù)色通過不同的顏色組合，千變?nèi)f化，給設(shè)計的發(fā)揮空間很大。復(fù)色方案也是扁平化設(shè)計的一個精髓。

• 3、 PPI、px、pt、dp、sp的名詞解釋與單位換算

  幾乎每一個 UI 設(shè)計師都被這個問題坑過，我也不例外。我曾經(jīng)無數(shù)次不厭其煩地向一些新人解釋這個問題，但是后來發(fā)現(xiàn)，三言兩語沒有實(shí)踐，很難解釋清楚。要了解如何換算，首先我們必須要了解幾個專業(yè)名詞：

  ?PPI：Pixels per Inch，中文為“像素每英寸”，也有很多人直接叫“像素密度”，意思就是在設(shè)備的1英寸物理長度上可以顯示的獨(dú)立物理像素。但是需要注意的是，這個是一般情況下我們在手機(jī)廠商對手機(jī)參數(shù)標(biāo)注的單位。而在安卓系統(tǒng)開發(fā)中，它有另外一個意思，就是“邏輯像素密度”。在手機(jī)系統(tǒng)中有一個配置文件寫了一個參數(shù)，告訴系統(tǒng)應(yīng)該以什么分辨率去顯示內(nèi)容，寫的值一般為120、160、360、480、640，分別對應(yīng)從320P 到2K 的顯示屏。這個“邏輯像素密度”是為了解決超高密度屏幕可以正常顯示內(nèi)容而存在的。（例如有了它就可以把同樣是5.5英寸的1080P 和2K 屏幕顯示相同的內(nèi)容，而這兩塊屏幕的物理 PPI 明顯是不一樣，并且有很大差別的。有試過把2K 屏手機(jī)改為1080P 顯示的同學(xué)可能就比較好理解，2K 里面這個參數(shù)值原來是640，當(dāng)你改為480的時候，它就會以1080P 的分辨率渲染，這樣可以提高手機(jī)運(yùn)行速度，當(dāng)然說省電那是扯的）。

  在 iOS中，在目前最高分辨率的 iPhone6 Plus 里，手機(jī)首先會把實(shí)際的物理分辨率2208x1242（489PPI） 乘以0.87壓縮到1920x1080（1080P）渲染，然后再以1080P 的渲染分辨率除以2.69英寸（iPhone6 Plus 屏幕寬度），得到401PPI 的“邏輯像素密度”，所以我們最終在官方資料里看到的 iPhone6 Plus 的 PPI 是“邏輯像素密度”而不是“物理像素密度”。

  ?px：Pixel，中文全稱”圖像元素“，簡稱”像素“，為顯示設(shè)備的顯示單位，也是我們圖像設(shè)計的基本單位。我們設(shè)計的圖像上的1個像素點(diǎn)，在顯示設(shè)備上占用一個RGB顯示單元。

  ?pt：Point，中文翻譯應(yīng)該為”點(diǎn)“，這個 pt 并非平面印刷的”磅“單位，而是和 dp、sp （詳見后面解釋）一樣，是一個相對單位（沒有絕對的值，就算在物理尺寸上也沒有絕對的值，換算值取決于屏幕尺寸和系統(tǒng)邏輯像素密度），無關(guān)設(shè)備物理尺寸。根據(jù)研究，人的手指點(diǎn)擊屏幕的時候觸碰面積大概是7-10mm，而物理單位上大約5.26pt=1mm（1pt≈0.19mm），44pt大約相當(dāng)于8mm。pt 單位用于 iOS 的 UI 設(shè)計，基于@1x（iPhone3GS）1pt=1px；基于@2x（iPhone4-iPhone6S）1pt=2px；基于@3x（iPhone6Plus）1pt=3px。

  ?dp：Device Independent Pixels，中文全稱”設(shè)備獨(dú)立像素“（也可譯為”設(shè)備無關(guān)像素“，單詞Independent有獨(dú)立自主或者不相關(guān)的意思），也簡稱 dip。正如其英文字面意思一樣，它是一個“無關(guān)設(shè)備物理尺寸的單位”。原理和 pt 基本一致，用于安卓系統(tǒng) UI 設(shè)計，一般用作長度單位，也可以用作字體單位，但是一般不建議這么用，具體下面的 sp 會解釋。要注意的是，決定它換算比例的是上面一開始所說的“邏輯像素密度”，而不是屏幕的物理 PPI 密度。這個一定要注意，否則你會無盡的陷入這個陷阱中。不要再問441PPI 的小米手機(jī)用哪個尺寸設(shè)計，546PPI的魅族 MX4PRO 用哪個尺寸設(shè)計這種問題了。重要的事情將三遍：dp 是無關(guān)設(shè)備物理尺寸的單位！dp 是無關(guān)設(shè)備物理尺寸的單位！dp 是無關(guān)設(shè)備物理尺寸的單位！

  ?sp：Scaled Pixels，中文全稱“可放縮像素”，這個單位的換算方式完全跟 dp 一樣，這個單位跟 dp 最大的區(qū)別是，它一般用于文字的字號或者與文字相關(guān)的地方。它是一個可以放縮的單位，會根據(jù)系統(tǒng)設(shè)定，按照一定比例放大或者縮小，例如安卓系統(tǒng)中一般會有文字顯示大小，可以選擇常規(guī)、較大、特大等。這時候如果你用的單位是 sp 的話就按照比例放大，如果你用的單位是 dp ,那么放大將對其無效。根據(jù)以前程序員同事給我的意見，一般情況下文字都選用 sp 為單位，其他則使用 dp 為單位，并且不建議用 dp 作為文字字號，除非你十分肯定，你并不希望這個文字可以被放大。同樣不建議把 sp 用作其他非文本的元素尺寸、間距等，這樣可能在用戶放縮系統(tǒng)文字后導(dǎo)致你的布局錯誤。

  詳細(xì)的單位換算，大家可以參考下表，一定要記住 PPI 這里指的只是“邏輯像素密度”

• 4、UI 設(shè)計的基本原則

  ?KISS 原則，英文 Keep it simple , stupid!（從簡原則）的縮寫。KISS 原則由著名劇作家 David Mamet（大衛(wèi)?馬梅）提出的電影理論，后而延伸至設(shè)計領(lǐng)域，從字面意思我們可以大概地知道，KISS 的原則旨在用最簡單的設(shè)計去達(dá)到目的。沒有任何多余的裝飾，也沒有任何多余的步驟，用最簡單的方式和最短的操作路徑完成目標(biāo)，這就是 KISSS 原則。是的，也許你發(fā)現(xiàn)了，它不就是設(shè)計師偷懶想出來的借口嘛！確實(shí)，它也有另一個名字，叫做“懶人原則”，誰不喜歡并且習(xí)慣用最簡單的方式完成工作呢？但是實(shí)際上，KISS 原則在設(shè)計過程中，設(shè)計師往往需要投入大量的精力去打磨，找到一個最合適并且最簡單的功能，簡單的東西往往最難以得到。所以，KISS 原則并不等于設(shè)計師偷懶，其實(shí)是設(shè)計師為用戶偷懶。

  ?UCD 原則，英文 User-centered Design的縮寫，中文意思為“以用戶為中心的設(shè)計”。

  這里引用一段網(wǎng)絡(luò)上關(guān)于 UCD 的描述：

  【衡量一個好的以用戶為中心的產(chǎn)品設(shè)計，可以有以下幾個維度：產(chǎn)品在特定使用環(huán)境下為特定用戶用于特定用途時所具有的有效性（Effectiveness）、效率（Efficiency）和用戶主觀滿意度（ Satisfaction）,延伸開來還包括對特定用戶而言，產(chǎn)品的易學(xué)程度、對用戶的吸引程度、用戶在體驗產(chǎn)品前后的整體心理感受等?！?

  UI 設(shè)計師其實(shí)并不是一個只會用Photoshop 的美工，我們設(shè)計的出發(fā)點(diǎn)并不在于它有多好看，設(shè)計的最終目的是為了好用，而且是讓用戶覺得好用。要成為一名優(yōu)秀的 UI 設(shè)計師，我們必須先摒棄一個理念：我喜歡的設(shè)計就是好的設(shè)計。因為我們的設(shè)計是為廣泛的用戶服務(wù)，而非為自己服務(wù)。設(shè)計的最終目的一定是得到大多數(shù)用戶的認(rèn)可，為用戶提供最合理最好用的設(shè)計，好用遠(yuǎn)比好看重要。好看只是錦上添花，好用才是最終目的。正因如此，優(yōu)秀的 UI 設(shè)計師，除了掌握過硬的設(shè)計技能之外，還需要有廣泛的科學(xué)認(rèn)知，為我們的設(shè)計服務(wù)，為用戶服務(wù)。

  除了這兩條之外，還有一致性原則、準(zhǔn)確性原則、布局合理化原則、系統(tǒng)操作合理性原則、系統(tǒng)響應(yīng)時間原則等五大原則，詳情可以百度相關(guān)資料了解。

  5、采用什么尺寸去進(jìn)行設(shè)計？

  在通過上面的了解之后，我們可以知道，我們手機(jī)顯示內(nèi)容的時候并非用像素為單位去顯示呈現(xiàn)內(nèi)容（不是說渲染問題），而是 pt、dp 這類的相對單位，通過系統(tǒng)的設(shè)定重新計算出應(yīng)該渲染的內(nèi)容，所以我們設(shè)計的時候就應(yīng)該以 pt、dp 這樣的單位去設(shè)計。但是隨之而來的問題是，設(shè)計軟件里面的單位一般有 mm、inch、px 這類具體的單位，UI 設(shè)計顯然不會使用 mm 這類的單位，我們選用的是 px，所以在設(shè)計之前我們需要找一個方便pt、dp 與 px 進(jìn)行換算的尺寸（參考第三點(diǎn)后的表格）。在第三點(diǎn)最后的表里我們可以看到，在@1x、MDPI的時候1pt/dp=1px，在@2x、XHDPI的時候1pt/dp=2px，顯然相對于0.5、3這些會更加容易換算。所以，我們設(shè)計的時候一般選用一倍或者兩倍圖去設(shè)計，例如 iOS我們可以選用320x568（iPhone5）或者375x667（iPhone6）的尺寸設(shè)計，而安卓我們則可以選擇360x480或者720x1280（720P）進(jìn)行設(shè)計。 選用哪個尺寸我們可以考慮下自己手中的測試設(shè)備，方便我們進(jìn)行測試。

  另外多說幾句，我個人是更建議采用2倍的圖進(jìn)行設(shè)計，因為這樣畫布更大，我們設(shè)計的時候會相對容易一點(diǎn)，特別是采用 Photoshop 進(jìn)行設(shè)計，2倍圖是相對合適后期進(jìn)行多版本適配的，而且在安卓陣營中，如果沒有專門做多版本適配的話，720P 的兩倍圖是最合適的（分辨率不太低，體積也不太大，向上向下兼容效果相對好）。當(dāng)然，如果你選用了2倍圖進(jìn)行設(shè)計，那么輸出的時候就應(yīng)該注意一下，例如在 Sketch 里面輸出@1x 的話，需要在檢查器的輸出設(shè)置里設(shè)置為0.5x，輸出@2x 的話則需要設(shè)置為1x，輸出@3x 則是設(shè)置1.5x，這個參數(shù)是相對于你的畫板而言的。此外需要注意的就是，如果你使用 Photoshop 設(shè)計的話，標(biāo)注的時候就需要注意，如果是用二倍圖設(shè)計，標(biāo)注的時候就需要把數(shù)值除以2，或者在標(biāo)注插件里面設(shè)置為2倍圖進(jìn)行標(biāo)注，而 Sketch 的話，你只需要在 Sketch Measure 插件里設(shè)置一下就可以。其實(shí)我們?nèi)绻麑挝粨Q算和規(guī)范足夠熟悉的話，我們使用什么尺寸去設(shè)計都是沒有問題的，如果你是使用 Sketch 的話，你可以輸出任意尺寸的資源。

  6、如何進(jìn)行真機(jī)預(yù)覽？

  真機(jī)預(yù)覽主要有三種途徑：圖片預(yù)覽、插件預(yù)覽、搭建 web 預(yù)覽

  ?圖片預(yù)覽：這是最簡單的，也是最原始的方式，就是把設(shè)計好的界面效果圖導(dǎo)出，然后傳輸?shù)绞謾C(jī)上，利用手機(jī)自帶的圖庫或者其他看圖軟件預(yù)覽，人人都可以這么做，簡單粗暴，但是缺點(diǎn)是：每次更新設(shè)計都需要重新傳，不是那么的方便。

  ?插件預(yù)覽：在 Photoshop 里面，我們可以使用Skala Preview （手機(jī)電腦都要安裝）和 PS Play（騰訊 IXUS 出品，目前好像停更了，手機(jī)安裝，使用 Photoshop 的遠(yuǎn)程功能實(shí)現(xiàn)），而 Sketch 我們則使用 Sketch 官方插件 Sketch Mirror（收費(fèi)，30元）。這類軟件通過手機(jī)電腦連接到同一個 WiFi 網(wǎng)絡(luò)，可以直接實(shí)時更新或者快速手動更新設(shè)計稿的畫面到手機(jī)，而無需導(dǎo)出圖片。但是這類軟件對網(wǎng)絡(luò)環(huán)境要求比較高，偶爾會抽風(fēng)，需要重新啟動，甚至重新啟動都不太好用，Skala Previw iOS 版本和Sketch Mirror iOS 版本可以用過數(shù)據(jù)線共享網(wǎng)絡(luò)，能保證比較穩(wěn)定。對了，Skala Preview是 sketch 、Photoshop 、AI 等都通用的一個軟件。

• ?web 預(yù)覽：這是三種方式里面使用難度最高的一種，也是穩(wěn)定性最好的一種，但是也是最麻煩的一種。 Sketch 的話可以通過3.4版本之后推出的Local Sharing（本地預(yù)覽）功能，比較直接地、自動化地在本地自動搭建一個 Web Sever 環(huán)境，同樣手機(jī)電腦連接相同網(wǎng)絡(luò)，通過手機(jī)訪問網(wǎng)頁即可，好處是可以任意切換任何畫板，速度很快，不過對手機(jī)的瀏覽器有一點(diǎn)要求，在安卓上可以使用360瀏覽器，開啟全屏模式，這樣就會隱藏掉地址欄工具欄，實(shí)現(xiàn)全屏預(yù)覽。iOS 的話，可以在iTunes 里面搜索一個叫做 Frameless 的無邊框瀏覽器進(jìn)行預(yù)覽。 還有一種方法是，自行使用 tomcat 等軟件搭建一個 Web Sever 環(huán)境，然后還需要呢...你手動寫一個簡單的響應(yīng)式頁面，放到你搭建好的 Web Sever 里，然后通過手機(jī)訪問預(yù)覽，不過這種方法還需要你導(dǎo)出圖片到指定目錄，覆蓋原來的圖片才能更新，或者是你手動更新網(wǎng)頁代碼里的文件名...是比較復(fù)雜的玩法，一般沒有點(diǎn)底子的人可能搞不了，如果你能說服你們的程序員或者前端給你搭建這樣的環(huán)境的話，還是可以考慮的。通過網(wǎng)頁預(yù)覽最好的好處就是，十分的穩(wěn)定，這里不得不安利一下 Sketch 了，Sketch 這個軟件真心每個方面都為 UI 設(shè)計師著想，現(xiàn)在我們預(yù)覽都只需要點(diǎn)一下菜單，然后手機(jī)打開瀏覽器訪問就行，更重要的是，它是實(shí)時自動更新?。?

  One more thing...

  設(shè)計師應(yīng)該是一個有靈魂的職業(yè)，我們?yōu)槭澜绲囊磺凶兊酶篮枚?/strong>

  作為一名合格的UI 設(shè)計師，需要掌握的絕對不是會用 Photoshop 或者 sketch 這么簡單，設(shè)計師是一個知識面要求很廣的職業(yè)，設(shè)計師的靈魂在于你的創(chuàng)造力，而你的創(chuàng)造力源自生活的方方面面。