主要分兩個(gè)部分介紹，第一個(gè)輕松點(diǎn)的主題，回顧下UI的風(fēng)格變遷，再聊一聊行業(yè)情況，然后科普一下app界面設(shè)計(jì)的提案思路；第二個(gè)部分就稍微嚴(yán)謹(jǐn)些，是UI設(shè)計(jì)師必須掌握的一些基本知識(shí)，包括分辨率適配，倍率適配等關(guān)鍵知識(shí)點(diǎn)

先來(lái)認(rèn)識(shí)下UI是什么，我給大家精簡(jiǎn)成了三句話，如上圖所示

首先第一是媒介，也就是我們直接能看到的各種界面，UI就主要設(shè)計(jì)界面

第二是行為，也就是我們使用一個(gè)產(chǎn)品時(shí)，通過(guò)怎樣的行為來(lái)操作，UI還需要思考界面的交互

目前大家比較熟悉的，手持（手機(jī)），穿戴（vr，眼鏡）等

最后則是用戶，也就是我們常做的用戶調(diào)研，不只是UI，所有的設(shè)計(jì)行業(yè)都需要這個(gè)環(huán)節(jié)

所以，如果有人問(wèn)到UI是干什么的，那么你就可以告訴他，主要做三件事情：

日常需要做界面設(shè)計(jì)；進(jìn)階一點(diǎn)的會(huì)研究交互設(shè)計(jì)；高級(jí)的UI會(huì)去更深入研究用戶

而我們這次主要就了解界面設(shè)計(jì)上那點(diǎn)事情，先給大家回顧一下UI設(shè)計(jì)風(fēng)格的一個(gè)變遷，至今為止UI已經(jīng)從黑白時(shí)代演變到了今天至少經(jīng)歷了至少5代蛻變，主要的風(fēng)格如我右邊列出的種類，而我覺得其實(shí)主要分成三個(gè)大時(shí)代來(lái)看就行

其中第一個(gè)大時(shí)代統(tǒng)稱像素時(shí)代，也就是最早UI誕生的時(shí)候做就是這樣的界面，大家熟知的表情包“有內(nèi)鬼終止交易”就是一個(gè)經(jīng)典的時(shí)代縮影

第二個(gè)大時(shí)代是擬物水晶時(shí)代，也就是UI發(fā)展最快，行業(yè)規(guī)模變化最大的一個(gè)時(shí)代，很多早期一批UI設(shè)計(jì)師都在這個(gè)時(shí)代吃到了所謂時(shí)代紅利，當(dāng)然不包括我，我已經(jīng)晚了。這個(gè)時(shí)代界面的特點(diǎn)特別明顯，就是比較寫實(shí)的質(zhì)感，投影以及一個(gè)大高光的罩子結(jié)合起來(lái)，給人一種硬玻璃的感覺

最后一個(gè)時(shí)代則是扁平，新擬物，現(xiàn)實(shí)增強(qiáng)等的混合時(shí)代（跟抖音內(nèi)容的生態(tài)變遷差不多，從明顯的高端視頻風(fēng)格到現(xiàn)在和快手差不多的魚龍混雜），這個(gè)時(shí)期其實(shí)很多風(fēng)格會(huì)延續(xù)下去，尤其是扁平，也就是我們現(xiàn)在辦公?？吹降慕缑?，會(huì)作為一個(gè)基礎(chǔ)，不斷的吸收和混合其他的風(fēng)格去進(jìn)行延展

VR中的界面則是稍微前衛(wèi)一些的，因?yàn)闀?huì)有一個(gè)360度的環(huán)繞視角以及一個(gè)虛擬的現(xiàn)實(shí)場(chǎng)景，可自定義的程度很高，目前是剛剛興起的時(shí)期，也是一個(gè)新的UI比較建議入手的高門檻業(yè)務(wù)領(lǐng)域，為什么說(shuō)高門檻，因?yàn)樽鰝€(gè)界面都要戴著頭盔來(lái)看效果

比較值得給大家科普一下的則是最近比較趨勢(shì)的兩個(gè)風(fēng)格，一個(gè)是新扁平：在扁平界面的基礎(chǔ)上，大面積用色，漸變，微質(zhì)感，少邊框，結(jié)合3D等一些其他元素來(lái)凸顯主題

還有一個(gè)是新擬物，時(shí)代的風(fēng)格總是偶爾會(huì)有輪回，擬物風(fēng)格也進(jìn)化成了新的形態(tài)：只有部分寫實(shí)，整體強(qiáng)調(diào)3D立體感和光影感覺

還有一個(gè)是新擬物，時(shí)代的風(fēng)格總是偶爾會(huì)有輪回，擬物風(fēng)格也進(jìn)化成了新的形態(tài)：只有部分寫實(shí)，整體強(qiáng)調(diào)3D立體感和光影感覺

風(fēng)格介紹完現(xiàn)在簡(jiǎn)單給大家講下這個(gè)行業(yè)，它的覆蓋領(lǐng)域主要分為四個(gè)，其中主要的行業(yè)人才都集中在移動(dòng)端和PC端；游戲是一個(gè)特殊行業(yè)，要單獨(dú)劃為一個(gè)領(lǐng)域，它跨越多端風(fēng)格也多樣；其他端則主要包含一些國(guó)有傳統(tǒng)行業(yè)和一些未來(lái)的，科技的比較冷門的領(lǐng)域

然后UI這個(gè)職業(yè)的主要行業(yè)特點(diǎn)是怎樣呢？作為一個(gè)過(guò)來(lái)人可以見證的主要有以上七個(gè)部分，但是一句話總結(jié)就是：熱度下降，規(guī)模穩(wěn)定，門檻變低，人人切圖。說(shuō)得更殘酷一點(diǎn)，現(xiàn)在大家報(bào)個(gè)班學(xué)完都可以投UI設(shè)計(jì)崗位了，時(shí)代的紅利已經(jīng)遠(yuǎn)去。當(dāng)然如果覺得我說(shuō)的不對(duì)也沒事，可能我站得還不夠高～

比較值得一提的則是風(fēng)格的分布情況，雖然已經(jīng)經(jīng)歷了5代變遷，但是仍有很多傳統(tǒng)和冷門的行業(yè)停留在水晶擬物的時(shí)代，只有主流和熱門的行業(yè)保持著最新的風(fēng)格，而前衛(wèi)的行業(yè)則會(huì)去嘗試最新的UI和交互

這連續(xù)的兩張里的圖就是一個(gè)天南一個(gè)地北，但確實(shí)同一個(gè)時(shí)代的產(chǎn)品

那么職業(yè)科普和行業(yè)情況都有了之后，我們具體UI設(shè)計(jì)師，做界面大概是什么個(gè)流程，讓大家了解下UI設(shè)計(jì)的思路，我稱之為“眼睛會(huì)了腦子沒會(huì)系列”，就跟你看到網(wǎng)上那些大佬的教程視頻一樣的，全程只有鼠標(biāo)在飛，然后東西它自己就做完了。（開玩笑）

這個(gè)設(shè)計(jì)思路是我UI設(shè)計(jì)時(shí)期總結(jié)出來(lái)的最快的提案設(shè)計(jì)思路，接下來(lái)講解每個(gè)環(huán)節(jié)該做什么

首先是快速切入，就是把我們前期收集好的資料參考，比如我這里有個(gè)情侶的app需要展現(xiàn)出青春，活力的感覺，那么我從最左邊的參考圖，提煉出符合自己要求的元素、顏色、特征等，填充到已有的交互框架（在UI設(shè)計(jì)業(yè)務(wù)中，交互框架一般由交互設(shè)計(jì)師或者產(chǎn)品給到），然后形成一個(gè)有視覺顏色等大體感覺的初版效果

然后在這個(gè)初版的基礎(chǔ)上，我們?cè)谧约旱膸?kù)或者素材網(wǎng)上找到icon和圖片進(jìn)行填充，整體調(diào)整顏、排版等，一個(gè)進(jìn)階效果圖就完成了，同理還有如下兩個(gè)界面的產(chǎn)生過(guò)程，都是初稿

接下來(lái)第二個(gè)環(huán)節(jié)獨(dú)特性，就是在自己進(jìn)階效果圖的基礎(chǔ)上，去強(qiáng)化一些關(guān)鍵的特征，讓它的特點(diǎn)更明顯更出彩，比如剛才的界面，把素材icon優(yōu)化成更有主題特色和個(gè)人風(fēng)格的類型，那這里涉及到icon的設(shè)計(jì)了

icon設(shè)計(jì)講究快準(zhǔn)狠，不需要太復(fù)雜

第三個(gè)環(huán)節(jié)則是高效性，這里開始就是要去優(yōu)化我們交互體驗(yàn)上的東西了，也就是顏色的分布和使用在UI設(shè)計(jì)中是以邏輯和效率為主導(dǎo)的，好看不是首要的，比如這個(gè)經(jīng)典的界面，出自淘寶app，它的顏色使用，就非常尊重用戶，提高了識(shí)別和操作上的效率

然后是加分環(huán)節(jié)，細(xì)節(jié)環(huán)節(jié)，則是自己嘗試要融合一些小的心思到你的UI界面中，哪怕是圖片的使用，文案上的小趣味，都會(huì)讓你整個(gè)app的調(diào)性有提高

        

第二個(gè)加分環(huán)節(jié)則是動(dòng)效，主要是展示界面操作上的流程和自己的一些特色效果，這些都做完，就可以拿著你的靜態(tài)界面稿子和動(dòng)畫一起去找老板匯報(bào)了

其實(shí)整個(gè)鏈路真的很簡(jiǎn)單，UI設(shè)計(jì)師每次提案做下來(lái)就這些事，只是不同人他的先后順序不一樣

首先我們已經(jīng)知道UI設(shè)計(jì)師每天都在搞界面，也知道他們?nèi)绾胃愠鲆粋€(gè)界面，那具體搞的過(guò)程中，又是做哪幾件事呢？這里給大家概括成三件事：規(guī)范，切圖和標(biāo)注

今天我們只普及規(guī)范知識(shí)，也就是在畫界面之前，建立畫板之前都要先搞清楚的事情，UI設(shè)計(jì)師真的數(shù)學(xué)邏輯要好

我們先要知道，規(guī)范為什么是要先掌握的事情，那是因?yàn)樵谠O(shè)計(jì)界面這件事上，規(guī)范已經(jīng)在手機(jī)生產(chǎn)出來(lái)的時(shí)候就有了，不同于我們說(shuō)的設(shè)計(jì)規(guī)范是一些視覺上的規(guī)范，UI的規(guī)范是和尺寸，像素，倍率等知識(shí)密切相關(guān)的

首先從界面上去分割，UI說(shuō)的規(guī)范主要是講這幾個(gè)部分和一個(gè)整體的設(shè)計(jì)尺寸

先講設(shè)計(jì)尺寸，我們以蘋果手機(jī)為案例，第一臺(tái)手機(jī)出廠后，就會(huì)存在這樣的規(guī)格分布，告訴你分辨率是多少，每個(gè)部分各占多少高度，有了這些，大大小小的app和系統(tǒng)等界面才有了設(shè)計(jì)的基礎(chǔ)

所以問(wèn)題來(lái)了，那每出一臺(tái)手機(jī)就要有一個(gè)新的設(shè)計(jì)尺寸嗎？理論上是的，但是實(shí)際上不管手機(jī)廠商和UI設(shè)計(jì)師，都會(huì)去找里面的規(guī)律來(lái)避免麻煩，于是廠商創(chuàng)造了一個(gè)規(guī)律，也就是這個(gè)pt為單位的尺寸，這里就要先解釋下這兩種單位的關(guān)系

說(shuō)的簡(jiǎn)單點(diǎn)，就是pt是一個(gè)虛擬單位，它永遠(yuǎn)取最小值，也就是分辨率長(zhǎng)寬都取了公約數(shù)之后的那個(gè)最小值

所以我們?cè)倩仡^看這幾個(gè)機(jī)型，就能發(fā)現(xiàn)一個(gè)規(guī)律，就是如果pt不變，設(shè)計(jì)尺寸是不需要改變的，因?yàn)檎w可以進(jìn)行放大或者縮小來(lái)進(jìn)行適配。比如左側(cè)兩臺(tái)手機(jī)，我用640x960為設(shè)計(jì)尺寸，做來(lái)的界面，兩臺(tái)手機(jī)都可以用，不會(huì)有拉伸之類的變形；右側(cè)之所以高度上pt不同，是因?yàn)轫敳康闹拔覀冋f(shuō)的狀態(tài)欄，導(dǎo)航欄之類的高度變了而已，實(shí)際中間的區(qū)域是沒變的

然后再換成我們現(xiàn)在主流的機(jī)型看也是這個(gè)道理，但出現(xiàn)了一個(gè)新詞，叫渲染分辨率，自此以后我們要分清楚，設(shè)計(jì)尺寸永遠(yuǎn)是渲染分辨率，因?yàn)橥ǔｄ秩痉直媛屎推聊环直媛适且恢碌?。這就是為什么官方說(shuō)plus的屏幕更清楚，就是因?yàn)槭菑姆直媛矢叩慕缑婵s小下來(lái)的，px密度更高

在了解了這幾點(diǎn)基本概念后，我們就可以去看整個(gè)行業(yè)的機(jī)型規(guī)范了，我們現(xiàn)在UI界面是主要以750x1334為設(shè)計(jì)尺寸的，就是因?yàn)檫@個(gè)分辨率所占據(jù)的機(jī)型是最多的，也就是大部分的pt都是在這個(gè)檔位

同理安卓市場(chǎng)也一樣，只不過(guò)安卓的機(jī)型更多，所以更復(fù)雜，他們對(duì)應(yīng)的一個(gè)虛擬單位則是dp

推導(dǎo)過(guò)程是一樣的，所以我們直接說(shuō)結(jié)論，雙端的設(shè)計(jì)尺寸如圖所示，你用720x1280和750x1334都可以，因?yàn)檫@兩者都約等于9:16，現(xiàn)在UI設(shè)計(jì)師的軟件比如sketch大多都自帶了完整的各個(gè)機(jī)型的pt/dp，所以已經(jīng)現(xiàn)在很多UI設(shè)計(jì)師都不大了解這個(gè)知識(shí)

剛才我們介紹完的部分，只是適配的一種情況，還有一種情況則是通過(guò)切圖，又稱為倍率圖。

作為一個(gè)合格的切圖仔，切圖是最常見的操作，不同的倍率圖，不僅僅是大小不同，也被用來(lái)適配不同的機(jī)型

切圖倍率是隨著機(jī)型一起產(chǎn)生的，所以每個(gè)機(jī)型在適配的時(shí)候，主要的規(guī)律就是：pt相同看切圖倍率；切圖倍率相同看pt；如果兩個(gè)都不同，則先按pt適配，然后再通過(guò)倍率適配。這里重申一下，pt適配的意思就是：只輸出一套圖，然后整體界面進(jìn)行一個(gè)放大或縮小的方式適配不同機(jī)型；而切圖倍率適配：則是不需要整體放大或縮小，而是通過(guò)輸出多套圖去給不同機(jī)型用

雙端其實(shí)都有自己機(jī)型對(duì)應(yīng)的切圖倍率，兩者通過(guò)各自的虛擬單位pt和dp還能統(tǒng)一轉(zhuǎn)化為px，這樣才能進(jìn)行多機(jī)型的適配

前面我們說(shuō)了，雙端的主流設(shè)計(jì)分辨率基本上是一樣的比例，但他們各自有不同的切圖倍率，ios端的機(jī)型比較統(tǒng)一，所以切圖倍率一直都沒有太多；而安卓因?yàn)楦鞣N機(jī)型層出不窮，所以用于適配的切圖倍率非常多，適配的難度也很大，但目前主流的輸出結(jié)果如圖所示，但當(dāng)全面屏越來(lái)越多的時(shí)候，這個(gè)結(jié)構(gòu)也會(huì)逐漸改變

最后講一下UI的工具，在工作的環(huán)境中碰到使用比較多的就是sketch和新興的figma，兩者都相似，都以pt和dp為單位去建立畫板，也有全面的切圖倍率供輸出使用

也常見有人一定喜歡用PS來(lái)設(shè)計(jì)界面的，也可以用這樣的切圖插件來(lái)一鍵輕松輸出

最后標(biāo)注也是一個(gè)大工程，主要是眼花，難度不大，現(xiàn)在各種主流軟件都搭配標(biāo)注插件，這里不多講

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷  作者：lionisready

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)