文章來自網(wǎng)絡(luò)征集
目前UI設(shè)計行業(yè)里一個非常常見的問題免都，就是很多人雖然已經(jīng)從事UI設(shè)計行業(yè)，但是他們對UI設(shè)計的一些很基本的專業(yè)知識和理論缺乏認知帆竹∪颇铮或者說是沒有規(guī)范理論的學(xué)習這些基礎(chǔ)知識。
1栽连、擬物化和扁平化
在UI設(shè)計領(lǐng)域里险领，設(shè)計風格主要分為兩個“擬物化”和“扁平化“侨舆。“擬物化”以iOS（6之前版本）和安卓陣營的錘子為代表绢陌。它的顯著優(yōu)點是挨下，細節(jié)多、有光影脐湾、有質(zhì)感臭笆，很大程度上模擬了現(xiàn)實生活中的物品形狀、材質(zhì)秤掌、光影效果愁铺。扁平化則是以安卓5.0以及若干國產(chǎn)手機ROM為代表，它強調(diào)簡單闻鉴、抽象茵乱、符號化，去掉了裝飾性設(shè)計元素椒拗，沒有明顯質(zhì)感似将，弱化光影（某些文字資料說扁平化完全沒有光影效果获黔，我個人不認同蚀苛，參考谷歌MD），最核心的設(shè)計方法是幾何形狀和復(fù)色方案（稍后介紹）玷氏。Google在安卓5.0上使用了全新的Material Design設(shè)計堵未，讓安卓有了跟蘋果一樣鮮明的、系統(tǒng)化的設(shè)計語言盏触。關(guān)于兩者的好壞渗蟹，一直沒有定論，我個人認為兩者各有特色赞辩，可以各成一家雌芽，每一種風格都有欣賞的人，每一種都有它最合適的應(yīng)用場景辨嗽，設(shè)計本身沒有好壞世落，只有是否合適。
2糟需、原色屉佳、補色、復(fù)色
在了解如何使用顏色之前洲押，我們需要先知道色彩的構(gòu)成武花。三原色分為"光三原色（RGB）"和"顏料三原色（CMY）"UI是為電子顯示設(shè)備設(shè)計，所以我們我們這里說的三原色是"光三原色RGB"杈帐，我們看到的顯示設(shè)備上的圖像就是由RGB三種顏色的光構(gòu)成体箕，后續(xù)所有概念也是相對于光而言。
?原色：原色有三種，包括紅色Red累铅、綠色Green驶沼、藍色Blue，原色的RGB通道其中兩個為0争群。
?補色：由2種等量原色組成的叫做補色回怜，也叫互補色，補色加上另一種原色會呈現(xiàn)白色（飽和度100%的時候）换薄，例如紅色+綠色=黃色玉雾，為藍色的互補色；綠色+藍色=青色轻要，為紅色的互補色复旬。
?復(fù)色：由三種原色組成的顏色叫做復(fù)色，一般而言復(fù)色相對于原色和補色的飽和度要低冲泥。復(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)垒酬，三言兩語沒有實踐砰嘁，很難解釋清楚件炉。要了解如何換算，首先我們必須要了解幾個專業(yè)名詞：
?PPI：Pixels per Inch矮湘，中文為“像素每英寸”斟冕，也有很多人直接叫“像素密度”，意思就是在設(shè)備的1英寸物理長度上可以顯示的獨立物理像素缅阳。但是需要注意的是磕蛇，這個是一般情況下我們在手機廠商對手機參數(shù)標注的單位。而在安卓系統(tǒng)開發(fā)中十办，它有另外一個意思秀撇，就是“邏輯像素密度”。在手機系統(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屏手機改為1080P顯示的同學(xué)可能就比較好理解逛揩，2K里面這個參數(shù)值原來是640，當你改為480的時候麸俘，它就會以1080P的分辨率渲染辩稽，這樣可以提高手機運行速度，當然說省電那是扯的）从媚。
在iOS中逞泄，在目前最高分辨率的iPhone6 Plus里，手機首先會把實際的物理分辨率2208x1242（489PPI）乘以0.87壓縮到1920x1080（1080P）渲染拜效，然后再以1080P的渲染分辨率除以2.69英寸（iPhone6 Plus屏幕寬度）喷众，得到401PPI的“邏輯像素密度”，所以我們最終在官方資料里看到的iPhone6 Plus的PPI是“邏輯像素密度”而不是“物理像素密度”紧憾。
?px：Pixel到千，中文全稱”圖像元素“，簡稱”像素“赴穗，為顯示設(shè)備的顯示單位憔四，也是我們圖像設(shè)計的基本單位膀息。我們設(shè)計的圖像上的1個像素點，在顯示設(shè)備上占用一個RGB顯示單元了赵。
?pt：Point潜支，中文翻譯應(yīng)該為”點“，這個pt并非平面印刷的”磅“單位柿汛，而是和dp冗酿、sp（詳見后面解釋）一樣，是一個相對單位（沒有絕對的值络断，就算在物理尺寸上也沒有絕對的值已烤，換算值取決于屏幕尺寸和系統(tǒng)邏輯像素密度），無關(guān)設(shè)備物理尺寸妓羊。根據(jù)研究胯究，人的手指點擊屏幕的時候觸碰面積大概是7-10mm，而物理單位上大約5.26pt=1mm（1pt≈0.19mm）躁绸，44pt大約相當于8mm裕循。pt單位用于iOS的UI設(shè)計，基于@1x（iPhone3GS）1pt=1px净刮；基于@2x（iPhone4-iPhone6S）1pt=2px剥哑；基于@3x（iPhone6Plus）1pt=3px。
?dp：Device Independent Pixels淹父，中文全稱”設(shè)備獨立像素“（也可譯為”設(shè)備無關(guān)像素“株婴，單詞Independent有獨立自主或者不相關(guān)的意思），也簡稱dip暑认。正如其英文字面意思一樣困介，它是一個“無關(guān)設(shè)備物理尺寸的單位”。原理和pt基本一致蘸际，用于安卓系統(tǒng)UI設(shè)計座哩，一般用作長度單位，也可以用作字體單位粮彤，但是一般不建議這么用根穷，具體下面的sp會解釋。要注意的是导坟，決定它換算比例的是上面一開始所說的“邏輯像素密度”，而不是屏幕的物理PPI密度惫周。這個一定要注意，否則你會無盡的陷入這個陷阱中闯两。不要再問441PPI的小米手機用哪個尺寸設(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)致你的布局錯誤诚亚。
4晕换、UI設(shè)計的基本原則
?KISS原則寺枉，英文Keep it simple , stupid!（從簡原則）的縮寫申尤。KISS原則由著名劇作家David Mamet（大衛(wèi)?馬梅）提出的電影理論臼婆，后而延伸至設(shè)計領(lǐng)域牢撼，從字面意思我們可以大概地知道括眠，KISS的原則旨在用最簡單的設(shè)計去達到目的。沒有任何多余的裝飾绒疗，也沒有任何多余的步驟帝美，用最簡單的方式和最短的操作路徑完成目標，這就是KISSS原則库快。是的摸袁，也許你發(fā)現(xiàn)了，它不就是設(shè)計師偷懶想出來的借口嘛义屏！確實靠汁，它也有另一個名字，叫做“懶人原則”闽铐，誰不喜歡并且習慣用最簡單的方式完成工作呢蝶怔？但是實際上，KISS原則在設(shè)計過程中兄墅，設(shè)計師往往需要投入大量的精力去打磨踢星，找到一個最合適并且最簡單的功能，簡單的東西往往最難以得到隙咸。所以沐悦，KISS原則并不等于設(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è)計師其實并不是一個只會用Photoshop的美工料扰，我們設(shè)計的出發(fā)點并不在于它有多好看晒杈，設(shè)計的最終目的是為了好用，而且是讓用戶覺得好用壳嚎。要成為一名優(yōu)秀的UI設(shè)計師烟馅，我們必須先摒棄一個理念：我喜歡的設(shè)計就是好的設(shè)計。因為我們的設(shè)計是為廣泛的用戶服務(wù)刊驴，而非為自己服務(wù)寡润。設(shè)計的最終目的一定是得到大多數(shù)用戶的認可，為用戶提供最合理最好用的設(shè)計躲惰，好用遠比好看重要础拨。好看只是錦上添花，好用才是最終目的诡宗。正因如此塔沃，優(yōu)秀的UI設(shè)計師蛀柴，除了掌握過硬的設(shè)計技能之外矫夯，還需要有廣泛的科學(xué)認知，為我們的設(shè)計服務(wù)，為用戶服務(wù)融蹂。
除了這兩條之外，還有一致性原則区拳、準確性原則、布局合理化原則约素、系統(tǒng)操作合理性原則圣猎、系統(tǒng)響應(yīng)時間原則等五大原則乞而，詳情可以百度相關(guān)資料了解爪模。
5、采用什么尺寸去進行設(shè)計屋灌？
在通過上面的了解之后共郭，我們可以知道落塑，我們手機顯示內(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進行換算的尺寸（參考第三點后的表格）。在第三點最后的表里我們可以看到蛤袒，在@1x妙真、MDPI的時候1pt/dp=1px荚守，在@2x、XHDPI的時候1pt/dp=2px锈候，顯然相對于0.5泵琳、3這些會更加容易換算誊役。所以蛔垢，我們設(shè)計的時候一般選用一倍或者兩倍圖去設(shè)計鹏漆，例如iOS我們可以選用320x568（iPhone5）或者375x667（iPhone6）的尺寸設(shè)計创泄，而安卓我們則可以選擇360x480或者720x1280（720P）進行設(shè)計验烧。選用哪個尺寸我們可以考慮下自己手中的測試設(shè)備，方便我們進行測試若治。
另外多說幾句端幼，我個人是更建議采用2倍的圖進行設(shè)計婆跑，因為這樣畫布更大滑进，我們設(shè)計的時候會相對容易一點，特別是采用Photoshop進行設(shè)計阴汇，2倍圖是相對合適后期進行多版本適配的搀庶，而且在安卓陣營中铜异，如果沒有專門做多版本適配的話揍庄，720P的兩倍圖是最合適的（分辨率不太低，體積也不太大币绩，向上向下兼容效果相對好）缆镣。當然董瞻，如果你選用了2倍圖進行設(shè)計田巴，那么輸出的時候就應(yīng)該注意一下壹哺，例如在Sketch里面輸出@1x的話管宵，需要在檢查器的輸出設(shè)置里設(shè)置為0.5x箩朴，輸出@2x的話則需要設(shè)置為1x炸庞，輸出@3x則是設(shè)置1.5x荚斯，這個參數(shù)是相對于你的畫板而言的滥壕。此外需要注意的就是捏浊，如果你使用Photoshop設(shè)計的話金踪，標注的時候就需要注意牵敷，如果是用二倍圖設(shè)計枷餐，標注的時候就需要把數(shù)值除以2靶瘸，或者在標注插件里面設(shè)置為2倍圖進行標注，而Sketch的話毛肋，你只需要在Sketch Measure插件里設(shè)置一下就可以怨咪。其實我們?nèi)绻麑挝粨Q算和規(guī)范足夠熟悉的話，我們使用什么尺寸去設(shè)計都是沒有問題的润匙，如果你是使用Sketch的話诗眨，你可以輸出任意尺寸的資源。
6孕讳、如何進行真機預(yù)覽匠楚？
真機預(yù)覽主要有三種途徑：圖片預(yù)覽巍膘、插件預(yù)覽、搭建web預(yù)覽
?圖片預(yù)覽：這是最簡單的芋簿，也是最原始的方式峡懈，就是把設(shè)計好的界面效果圖導(dǎo)出肪康，然后傳輸?shù)绞謾C上，利用手機自帶的圖庫或者其他看圖軟件預(yù)覽冻河，人人都可以這么做，簡單粗暴，但是缺點是：每次更新設(shè)計都需要重新傳，不是那么的方便爽醋。
?插件預(yù)覽：在Photoshop里面哪痰，我們可以使用PS Play（騰訊IXUS出品，目前好像停更了奸笤，手機安裝，使用Photoshop的遠程功能實現(xiàn)），而Sketch我們則使用Sketch官方插件Sketch Mirror（收費扣癣，30元）士嚎。這類軟件通過手機電腦連接到同一個WiFi網(wǎng)絡(luò)娇澎，可以直接實時更新或者快速手動更新設(shè)計稿的畫面到手機，而無需導(dǎo)出圖片勒极。
