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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  One more thing...

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

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