如果你是零基礎(chǔ)UI設(shè)計(jì)初學(xué)者，這一篇，將告訴你學(xué)習(xí)UI設(shè)計(jì)第一階段到底要掌握哪些知識(shí)和技能。

一、學(xué)習(xí)工具

俗話說：工欲善其事必先利其器，對(duì)于入門階段的童孩們，不要糾結(jié)如何學(xué)，先玩熟Photoshop。UI設(shè)計(jì)最常使用的工具就是PS，利用它做一些圖標(biāo)、界面。

二、學(xué)習(xí)UI設(shè)計(jì)規(guī)范

現(xiàn)在主要是安卓與iOS版本

iOS：

<img src="https://pic1.zhimg.com/50/v2-0dcf327aadcd03e17e9c0fccc932f975_hd.jpg" data-rawwidth="554" data-rawheight="374" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic1.zhimg.com/v2-0dcf327aadcd03e17e9c0fccc932f975_r.jpg"/>

<img src="https://pic2.zhimg.com/50/v2-1676ed28218ad2d6f1a00a6082b91917_hd.jpg" data-rawwidth="554" data-rawheight="314" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic2.zhimg.com/v2-1676ed28218ad2d6f1a00a6082b91917_r.jpg"/>

<img src="https://pic4.zhimg.com/50/v2-c4f6e75163d7730878ba92bd49648bde_hd.jpg" data-rawwidth="554" data-rawheight="298" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic4.zhimg.com/v2-c4f6e75163d7730878ba92bd49648bde_r.jpg"/>

字體

iPhone上的字體英文為：HelveticaNeue 至于中文，Mac下用的是黑體-簡(jiǎn)，Win下則為華文黑體，所有字體要用雙數(shù)字號(hào)。

百度用戶體驗(yàn)部做過一個(gè)小調(diào)查，對(duì)APP字體大小的調(diào)查結(jié)果如下：

<img src="https://pic2.zhimg.com/50/v2-2adc93807c677a40b5147eaa2e2b99b5_hd.jpg" data-rawwidth="554" data-rawheight="137" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic2.zhimg.com/v2-2adc93807c677a40b5147eaa2e2b99b5_r.jpg"/>

內(nèi)部設(shè)計(jì)

1、所有能點(diǎn)擊的圖片不得小于44px（Retina需要88px）

2、單獨(dú)存在的部件必須是雙數(shù)尺寸

3、兩倍圖以@2x作為命名后綴

4、充分考慮每個(gè)控件按鈕在4種狀態(tài)下的樣式，如下圖：

<img src="https://pic3.zhimg.com/50/v2-4cf9b913c00d2f7a2d684e354f0704da_hd.jpg" data-rawwidth="554" data-rawheight="245" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic3.zhimg.com/v2-4cf9b913c00d2f7a2d684e354f0704da_r.jpg"/>

安卓：

界面尺寸

安卓的尺寸太多，建議使用分辨率為720×1280的設(shè)計(jì)尺寸

狀態(tài)欄高度：50px

導(dǎo)航欄高度：96px

標(biāo)簽欄高度：96px

Android最近出的手機(jī)幾乎去掉了實(shí)體鍵，將功能移到屏幕中，當(dāng)然高度也和標(biāo)簽欄一樣：96px

內(nèi)容區(qū)域高度：1038px（1280-50-96-96=1038）

圖標(biāo)尺寸

<img src="https://pic1.zhimg.com/50/v2-b141371144b90079825c626a9d962fa0_hd.jpg" data-rawwidth="554" data-rawheight="261" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic1.zhimg.com/v2-b141371144b90079825c626a9d962fa0_r.jpg"/>

Android設(shè)計(jì)規(guī)范中，使用的單位是dp，dp在安卓機(jī)上不同的密度轉(zhuǎn)換后px值是不一樣的

字體

Android 上的字體為： Droid sans fallback ，是谷歌自己的字體，與微軟雅黑很像。 Android的字體大小調(diào)查結(jié)論是：

<img src="https://pic3.zhimg.com/50/v2-faa6d0be930a0d4ca6863e49507722e4_hd.jpg" data-rawwidth="554" data-rawheight="197" class="origin_image zh-lightbox-thumb" width="554" data-original="https://pic3.zhimg.com/v2-faa6d0be930a0d4ca6863e49507722e4_r.jpg"/>

三、色彩學(xué)習(xí)

色彩三要素是指：色相、明度、純度

色相

色相指色彩的相貌，不同波長(zhǎng)決定不同色相，是最直觀感受到的色彩。

<img src="https://pic3.zhimg.com/50/v2-9f1f4cc3374be1e7779e581600939bdf_hd.jpg" data-rawwidth="491" data-rawheight="78" class="origin_image zh-lightbox-thumb" width="491" data-original="https://pic3.zhimg.com/v2-9f1f4cc3374be1e7779e581600939bdf_r.jpg"/>

在光譜中，紅橙黃綠青藍(lán)紫是最基本的色相。

<img src="https://pic2.zhimg.com/50/v2-df670e5be676aae25da8829b463026cf_hd.jpg" data-rawwidth="337" data-rawheight="359" class="content_image" width="337"/>

明度

明度即色彩的明暗程度。

<img src="https://pic3.zhimg.com/50/v2-471405879f6ed6506bf1f11949e61c3a_hd.jpg" data-rawwidth="506" data-rawheight="252" class="origin_image zh-lightbox-thumb" width="506" data-original="https://pic3.zhimg.com/v2-471405879f6ed6506bf1f11949e61c3a_r.jpg"/>

簡(jiǎn)單點(diǎn)解釋，通過色相的加白加黑的一個(gè)變化，任何色彩都有明暗變化，從明度光譜上能看到最明亮的顏色是黃色，處于光譜中心位置。最暗的是紫色，處于光譜邊緣。

<img src="https://pic2.zhimg.com/50/v2-d5b965e44c1a2f33499b9ebf0d4ea3de_hd.jpg" data-rawwidth="470" data-rawheight="89" class="origin_image zh-lightbox-thumb" width="470" data-original="https://pic2.zhimg.com/v2-d5b965e44c1a2f33499b9ebf0d4ea3de_r.jpg"/>

純度

純度指色彩的鮮艷程度，即色彩飽和度、純凈度、彩度。純度最高的色彩就是原色，隨著純度的降低，色彩就會(huì)變暗、淡。純度講到最低就失去色相，變?yōu)闊o彩色，也就是黑色、白色和灰色。

<img src="https://pic4.zhimg.com/50/v2-a4d133a048bcbfc943f547770b1586bd_hd.jpg" data-rawwidth="521" data-rawheight="147" class="origin_image zh-lightbox-thumb" width="521" data-original="https://pic4.zhimg.com/v2-a4d133a048bcbfc943f547770b1586bd_r.jpg"/>

UI設(shè)計(jì)中色彩的使用

在UI設(shè)計(jì)中色彩如何搭配？在UI界面設(shè)計(jì)比例中：用色一般分為主色、次色和輔助色，它們的比例按照20%-30%、5%-10%和5%配色，通過不同配色比例讓界面看起來不會(huì)突兀或主次部分。

<img src="https://pic1.zhimg.com/50/v2-f1e599fd74a458e7679eae1c3de58ae0_hd.jpg" data-rawwidth="433" data-rawheight="221" class="origin_image zh-lightbox-thumb" width="433" data-original="https://pic1.zhimg.com/v2-f1e599fd74a458e7679eae1c3de58ae0_r.jpg"/>

四、臨摹階段

基礎(chǔ)知識(shí)了解后，接下來就開始練習(xí)了，需要通過臨摹來加強(qiáng)你的技巧，這個(gè)階段要做的是：多練多問。

五、學(xué)會(huì)切圖

作為設(shè)計(jì)師與開發(fā)之前的橋梁，切圖是非常關(guān)鍵的，合適的切圖、精準(zhǔn)的位置能最大限度的還原效果圖的設(shè)計(jì)。

UI入門階段基本上需要了解這些，當(dāng)然這只是UI設(shè)計(jì)中的其中一小部分，由淺入深，逐步提升

關(guān)于是自學(xué)還是報(bào)班這個(gè)問題，之前也有朋友問過我。學(xué)習(xí)是一件很枯燥的事情，面對(duì)這個(gè)選擇時(shí)，你需要客觀認(rèn)識(shí)自己，如果你自制力差，沒有辦法每天堅(jiān)持學(xué)習(xí)，那么就去找個(gè)專業(yè)的UI培訓(xùn)班吧。

在這里我相信有很多想要學(xué)習(xí)UI的小伙伴，我自己是一名從事了多年UI設(shè)計(jì)的設(shè)計(jì)師，辭職目前在做自己的UI私人定制課程，我花了一個(gè)多月整理了一份最適合2019年學(xué)習(xí)的UI學(xué)習(xí)干貨，從最基礎(chǔ)的UI學(xué)習(xí)都有整理，送給每一位UI小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：學(xué)習(xí)，即可免費(fèi)獲取