作為一名合格的UI設計師，需要掌握的絕對不是會用 Photoshop 或者 sketch 這麼簡單，設計師是一個知識面要求很廣的職業，設計師的靈魂在於你的創造力，而你的創造力源自生活的方方面面。
本文為 sketch 鑽石黨創始人 Wyman.Leung 發表於 UI中國的原創文章，
需要轉載請先私信聯繫授權，並保留署名和出處。
近段時間來，我和靜電的sketch 設計群都已經超過千人規模，也有很多設計是新人加入到 UI 設計和 sketch 這個大家庭。但是，隨之而來的也暴露了很多問題，也是目前 UI 設計行業裡一個非常常見的問題，就是很多人雖然已經從事 UI 設計行業，但是他們對 UI 設計的一些很基本的專業知識缺乏最基本的認知。或者說是接受到的是一些錯誤的認知。我們一個群的管理員也曾不厭其煩得為大家科普，但是很多東西確實不是一句兩句話就能解釋清楚，也不是一時半會就能輕易理解，所以就有了今天這篇文章。
一名合格的UI設計師需要知道這些……
在 UI 設計領域裡，設計風格主要分為兩個「擬物化」和「扁平化「。
「擬物化」也叫「擬真化」，其以iOS（6之前版本）和安卓陣營的錘子為代表。它的顯著優點是，細節多、有光影、有質感，很大程度上模擬了現實生活中的物品形狀、材質、光影效果。
扁平化則是以安卓5.0以及若干國產手機 ROM 為代表，它強調簡單、抽象、符號化，去掉了裝飾性設計元素，沒有明顯質感，弱化光影（某些文字資料說扁平化完全沒有光影效果，我個人不認同，參考谷歌 MD），最核心的設計方法是幾何形狀和複色方案（稍後介紹）。Google 在安卓5.0上使用了全新的 Material Design 設計，讓安卓有了跟蘋果一樣鮮明的、系統化的設計語言。
關於兩者的好壞，一直沒有定論，我個人認為兩者各有特色，可以各成一家，每一種風格都有欣賞的人，每一種都有它最合適的應用場景，設計本身沒有好壞，只有是否合適。（話說我個人更喜歡扁平化）
有興趣了解更多扁平化好擬物化兩種風格的好與壞，可以參考國內知名設計師龐門正道「阿門」的《擬物扁平話題終結者》
文章地址：http://www.ui.cn/detail/35132.html
在了解如何使用顏色之前，我們需要先知道色彩的構成。三原色分為"光三原色（RGB）"和"顏料三原色（CMY）"UI是為電子顯示設備設計，所以我們我們這裡說的三原色是"光三原色 RGB"，我們看到的顯示設備上的圖像就是由RGB 三種顏色的光構成，後續所有概念也是相對於光而言。
原色：原色有三種，包括紅色 Red、綠色 Green、藍色 Blue，原色的 RGB 通道其中兩個為0。
補色：由2種等量原色組成的叫做補色，也叫互補色，補色加上另一種原色會呈現白色（飽和度100%的時候），例如紅色+綠色=黃色，為藍色的互補色；綠色+藍色=青色，為紅色的互補色。
複色：由三種原色組成的顏色叫做複色，一般而言複色相對於原色和補色的飽和度要低。複色的視覺感官上相對於前兩者沒那麼鮮豔扎眼，亮度相對高的複色更加討好人的眼球，我們看到的顏色絕大部分屬於複色。
UI設計相對於平面設計而言，我們並不需要給用戶十分鮮豔搶眼的顏色，這樣可能會在長時間使用的過程中產生視覺疲勞，我們更需要的是，給用戶一個視覺上相對討人喜歡，並且能在長時間的使用過程中不會輕易產生視覺疲勞，或者延緩視覺疲勞的產生。複色的飽和度相對低，並且複色通過不同的顏色組合，千變萬化，給設計的發揮空間很大。複色方案也是扁平化設計的一個精髓。
3
PPI、px、pt、dp、sp
名詞解釋與單位換算
幾乎每一個UI設計師都被這個問題坑過，我也不例外。我曾經無數次不厭其煩地向一些新人解釋這個問題，但是後來發現，三言兩語沒有實踐，很難解釋清楚。要了解如何換算，首先我們必須要了解幾個專業名詞：
PPI
Pixels per Inch，中文為「像素每英寸」，也有很多人直接叫「像素密度」，意思就是在設備的1英寸物理長度上可以顯示的獨立物理像素。但是需要注意的是，這個是一般情況下我們在手機廠商對手機參數標註的單位。而在安卓系統開發中，它有另外一個意思，就是「邏輯像素密度」。
在手機系統中有一個配置文件寫了一個參數，告訴系統應該以什麼解析度去顯示內容，寫的值一般為120、160、360、480、640，分別對應從320P 到2K 的顯示屏。這個「邏輯像素密度」是為了解決超高密度屏幕可以正常顯示內容而存在的。（例如有了它就可以把同樣是5.5英寸的1080P 和2K 屏幕顯示相同的內容，而這兩塊屏幕的物理 PPI 明顯是不一樣，並且有很大差別的。有試過把2K 屏手機改為1080P 顯示的同學可能就比較好理解，2K 裡面這個參數值原來是640，當你改為480的時候，它就會以1080P 的解析度渲染，這樣可以提高手機運行速度，當然說省電那是扯的）。
在iOS中，在目前最高解析度的 iPhone6 Plus 裡，手機首先會把實際的物理解析度2208x1242（489PPI） 乘以0.87壓縮到1920x1080（1080P）渲染，然後再以1080P 的渲染解析度除以2.69英寸（iPhone6 Plus 屏幕寬度），得到401PPI 的「邏輯像素密度」，所以我們最終在官方資料裡看到的 iPhone6 Plus 的 PPI 是「邏輯像素密度」而不是「物理像素密度」。
px
Pixel，中文全稱」圖像元素「，簡稱」像素「，為顯示設備的顯示單位，也是我們圖像設計的基本單位。我們設計的圖像上的1個像素點，在顯示設備上佔用一個RGB顯示單元。
pt
Point，中文翻譯應該為」點「，這個 pt 並非平面印刷的」磅「單位，而是和 dp、sp （詳見後面解釋）一樣，是一個相對單位（沒有絕對的值，就算在物理尺寸上也沒有絕對的值，換算值取決於屏幕尺寸和系統邏輯像素密度），無關設備物理尺寸。根據研究，人的手指點擊屏幕的時候觸碰面積大概是7-10mm，而物理單位上大約5.26pt=1mm（1pt≈0.19mm），44pt大約相當於8mm。pt 單位用於 iOS 的 UI 設計，基於@1x（iPhone3GS）1pt=1px；基於@2x（iPhone4-iPhone6S）1pt=2px；基於@3x（iPhone6Plus）1pt=3px。
dp
Device Independent Pixels，中文全稱」設備獨立像素「（也可譯為」設備無關像素「，單詞Independent有獨立自主或者不相關的意思），也簡稱 dip。正如其英文字面意思一樣，它是一個「無關設備物理尺寸的單位」。原理和 pt 基本一致，用於安卓系統 UI 設計，一般用作長度單位，也可以用作字體單位，但是一般不建議這麼用，具體下面的 sp 會解釋。要注意的是，決定它換算比例的是上面一開始所說的「邏輯像素密度」，而不是屏幕的物理 PPI 密度。這個一定要注意，否則你會無盡的陷入這個陷阱中。不要再問441PPI 的小米手機用哪個尺寸設計，546PPI的魅族 MX4PRO 用哪個尺寸設計這種問題了。
重要的事情將三遍：dp 是無關設備物理尺寸的單位！dp 是無關設備物理尺寸的單位！dp 是無關設備物理尺寸的單位！
sp
Scaled Pixels，中文全稱「可放縮像素」，這個單位的換算方式完全跟 dp 一樣，這個單位跟 dp 最大的區別是，它一般用於文字的字號或者與文字相關的地方。它是一個可以放縮的單位，會根據系統設定，按照一定比例放大或者縮小，例如安卓系統中一般會有文字顯示大小，可以選擇常規、較大、特大等。這時候如果你用的單位是 sp 的話就按照比例放大，如果你用的單位是 dp ,那麼放大將對其無效。根據以前程式設計師同事給我的意見，一般情況下文字都選用 sp 為單位，其他則使用 dp 為單位，並且不建議用 dp 作為文字字號，除非你十分肯定，你並不希望這個文字可以被放大。
同樣不建議把 sp 用作其他非文本的元素尺寸、間距等，這樣可能在用戶放縮系統文字後導致你的布局錯誤。
詳細的單位換算，大家可以參考下表，一定要記住 PPI 這裡指的只是「邏輯像素密度」 ▼
KISS 原則
英文 Keep it simple , stupid!（從簡原則）的縮寫。
KISS 原則由著名劇作家 David Mamet（大衛•馬梅）提出的電影理論，後而延伸至設計領域，從字面意思我們可以大概地知道，KISS 的原則旨在用最簡單的設計去達到目的。沒有任何多餘的裝飾，也沒有任何多餘的步驟，用最簡單的方式和最短的操作路徑完成目標，這就是 KISSS 原則。是的，也許你發現了，它不就是設計師偷懶想出來的藉口嘛！確實，它也有另一個名字，叫做「懶人原則」，誰不喜歡並且習慣用最簡單的方式完成工作呢？但是實際上，KISS 原則在設計過程中，設計師往往需要投入大量的精力去打磨，找到一個最合適並且最簡單的功能，簡單的東西往往最難以得到。所以，KISS 原則並不等於設計師偷懶，其實是設計師為用戶偷懶。
UCD 原則
英文 User-centered Design的縮寫，中文意思為「以用戶為中心的設計」。
這裡引用一段網絡上關於 UCD 的描述：
「衡量一個好的以用戶為中心的產品設計，可以有以下幾個維度：產品在特定使用環境下為特定用戶用於特定用途時所具有的有效性（Effectiveness）、效率（Efficiency）和用戶主觀滿意度（ Satisfaction）,延伸開來還包括對特定用戶而言，產品的易學程度、對用戶的吸引程度、用戶在體驗產品前後的整體心理感受等。」
UI 設計師其實並不是一個只會用Photoshop 的美工，我們設計的出發點並不在於它有多好看，設計的最終目的是為了好用，而且是讓用戶覺得好用。要成為一名優秀的 UI 設計師，我們必須先摒棄一個理念：我喜歡的設計就是好的設計。因為我們的設計是為廣泛的用戶服務，而非為自己服務。設計的最終目的一定是得到大多數用戶的認可，為用戶提供最合理最好用的設計，好用遠比好看重要。好看只是錦上添花，好用才是最終目的。正因如此，優秀的 UI 設計師，除了掌握過硬的設計技能之外，還需要有廣泛的科學認知，為我們的設計服務，為用戶服務。
除了這兩條之外，還有一致性原則、準確性原則、布局合理化原則、系統操作合理性原則、系統響應時間原則等五大原則，詳情可以百度相關資料了解。
5
採用什麼尺寸去進行設計？
在通過上面的了解之後，我們可以知道，我們手機顯示內容的時候並非用像素為單位去顯示呈現內容（不是說渲染問題），而是 pt、dp 這類的相對單位，通過系統的設定重新計算出應該渲染的內容，所以我們設計的時候就應該以 pt、dp 這樣的單位去設計。但是隨之而來的問題是，設計軟體裡面的單位一般有 mm、inch、px 這類具體的單位，UI 設計顯然不會使用 mm 這類的單位，我們選用的是 px，所以在設計之前我們需要找一個方便pt、dp 與 px 進行換算的尺寸（參考第三點後的表格）。在第三點最後的表裡我們可以看到，在@1x、MDPI的時候1pt/dp=1px，在@2x、XHDPI的時候1pt/dp=2px，顯然相對於0.5、3這些會更加容易換算。
所以，我們設計的時候一般選用一倍或者兩倍圖去設計，例如 iOS我們可以選用320x568（iPhone5）或者375x667（iPhone6）的尺寸設計，而安卓我們則可以選擇360x480或者720x1280（720P）進行設計。 選用哪個尺寸我們可以考慮下自己手中的測試設備，方便我們進行測試。
另外多說幾句，我個人是更建議採用2倍的圖進行設計，因為這樣畫布更大，我們設計的時候會相對容易一點，特別是採用 Photoshop 進行設計，2倍圖是相對合適後期進行多版本適配的，而且在安卓陣營中，如果沒有專門做多版本適配的話，720P 的兩倍圖是最合適的（解析度不太低，體積也不太大，向上向下兼容效果相對好）。
當然，如果你選用了2倍圖進行設計，那麼輸出的時候就應該注意一下，例如在 Sketch 裡面輸出@1x 的話，需要在檢查器的輸出設置裡設置為0.5x，輸出@2x 的話則需要設置為1x，輸出@3x 則是設置1.5x，這個參數是相對於你的畫板而言的。此外需要注意的就是，如果你使用 Photoshop 設計的話，標註的時候就需要注意，如果是用二倍圖設計，標註的時候就需要把數值除以2，或者在標註插件裡面設置為2倍圖進行標註，而 Sketch 的話，你只需要在 Sketch Measure 插件裡設置一下就可以。其實我們如果對單位換算和規範足夠熟悉的話，我們使用什麼尺寸去設計都是沒有問題的，如果你是使用 Sketch 的話，你可以輸出任意尺寸的資源。
真機預覽主要有三種途徑：圖片預覽、插件預覽、搭建 web 預覽
圖片預覽
這是最簡單的，也是最原始的方式，就是把設計好的界面效果圖導出，然後傳輸到手機上，利用手機自帶的圖庫或者其他看圖軟體預覽，人人都可以這麼做，簡單粗暴，但是缺點是：每次更新設計都需要重新傳，不是那麼的方便。
插件預覽
在 Photoshop 裡面，我們可以使用Skala Preview （手機電腦都要安裝）和 PS Play（騰訊 IXUS 出品，目前好像停更了，手機安裝，使用 Photoshop 的遠程功能實現），而 Sketch 我們則使用 Sketch 官方插件 Sketch Mirror（收費，30元）。
這類軟體通過手機電腦連接到同一個 WiFi 網絡，可以直接實時更新或者快速手動更新設計稿的畫面到手機，而無需導出圖片。但是這類軟體對網絡環境要求比較高，偶爾會抽風，需要重新啟動，甚至重新啟動都不太好用，Skala Previw iOS 版本和Sketch Mirror iOS 版本可以用過數據線共享網絡，能保證比較穩定。對了，Skala Preview是 sketch 、Photoshop 、AI 等都通用的一個軟體。
Skala Preview 下載：
https://bjango.com/mac/skalapreview/
PS Play 下載：
http://isux.tencent.com/app/psplay
web 預覽
這是三種方式裡面使用難度最高的一種，也是穩定性最好的一種。
Sketch 的話可以通過3.4版本之後推出的Local Sharing（本地預覽）功能，比較直接地、自動化地在本地自動搭建一個 Web Sever 環境，同樣手機電腦連接相同網絡，通過手機訪問網頁即可，好處是可以任意切換任何畫板，速度很快，不過對手機的瀏覽器有一點要求，在安卓上可以使用360瀏覽器，開啟全屏模式，這樣就會隱藏掉地址欄工具欄，實現全屏預覽。iOS 的話，可以在iTunes 裡面搜索一個叫做 Frameless 的無邊框瀏覽器進行預覽。
還有一種方法是，自行使用 tomcat 等軟體搭建一個 Web Sever 環境，然後還需要呢……你手動寫一個簡單的響應式頁面，放到你搭建好的 Web Sever 裡，然後通過手機訪問預覽，不過這種方法還需要你導出圖片到指定目錄，覆蓋原來的圖片才能更新，或者是你手動更新網頁代碼裡的文件名……是比較複雜的玩法，一般沒有點底子的人可能搞不了，如果你能說服你們的程式設計師或者前端給你搭建這樣的環境的話，還是可以考慮的。
通過網頁預覽最好的好處就是，十分的穩定，這裡不得不安利一下 Sketch 了，Sketch 這個軟體真心每個方面都為 UI 設計師著想，現在我們預覽都只需要點一下菜單，然後手機打開瀏覽器訪問就行，更重要的是，它是實時自動更新！！
One more thing……
設計師應該是一個有靈魂的職業，
我們為世界的一切變得更美好而生。
設計師的靈魂在於創造力，
而創造力源自生活的方方面面。
如果你覺得本文對你有幫助，
歡迎向原創作者隨意打賞。
▼