如果你是零基础UI设计初学者，这一篇，将告诉你学习UI设计第一阶段到底要掌握哪些知识和技能。

一、学习工具

俗话说：工欲善其事必先利其器，对于入门阶段的童孩们，不要纠结如何学，先玩熟Photoshop。UI设计最常使用的工具就是PS，利用它做一些图标、界面。

二、学习UI设计规范

现在主要是安卓与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下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。

百度用户体验部做过一个小调查，对APP字体大小的调查结果如下：

<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"/>

内部设计

1、所有能点击的图片不得小于44px（Retina需要88px）

2、单独存在的部件必须是双数尺寸

3、两倍图以@2x作为命名后缀

4、充分考虑每个控件按钮在4种状态下的样式，如下图：

<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的设计尺寸

状态栏高度：50px

导航栏高度：96px

标签栏高度：96px

Android最近出的手机几乎去掉了实体键，将功能移到屏幕中，当然高度也和标签栏一样：96px

内容区域高度：1038px（1280-50-96-96=1038）

图标尺寸

<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设计规范中，使用的单位是dp，dp在安卓机上不同的密度转换后px值是不一样的

字体

Android 上的字体为： Droid sans fallback ，是谷歌自己的字体，与微软雅黑很像。 Android的字体大小调查结论是：

<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"/>

三、色彩学习

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

色相

色相指色彩的相貌，不同波长决定不同色相，是最直观感受到的色彩。

<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"/>

在光谱中，红橙黄绿青蓝紫是最基本的色相。

<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"/>

简单点解释，通过色相的加白加黑的一个变化，任何色彩都有明暗变化，从明度光谱上能看到最明亮的颜色是黄色，处于光谱中心位置。最暗的是紫色，处于光谱边缘。

<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"/>

纯度

纯度指色彩的鲜艳程度，即色彩饱和度、纯净度、彩度。纯度最高的色彩就是原色，随着纯度的降低，色彩就会变暗、淡。纯度讲到最低就失去色相，变为无彩色，也就是黑色、白色和灰色。

<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设计中色彩的使用

在UI设计中色彩如何搭配？在UI界面设计比例中：用色一般分为主色、次色和辅助色，它们的比例按照20%-30%、5%-10%和5%配色，通过不同配色比例让界面看起来不会突兀或主次部分。

<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"/>

四、临摹阶段

基础知识了解后，接下来就开始练习了，需要通过临摹来加强你的技巧，这个阶段要做的是：多练多问。

五、学会切图

作为设计师与开发之前的桥梁，切图是非常关键的，合适的切图、精准的位置能最大限度的还原效果图的设计。

UI入门阶段基本上需要了解这些，当然这只是UI设计中的其中一小部分，由浅入深，逐步提升

关于是自学还是报班这个问题，之前也有朋友问过我。学习是一件很枯燥的事情，面对这个选择时，你需要客观认识自己，如果你自制力差，没有办法每天坚持学习，那么就去找个专业的UI培训班吧。

在这里我相信有很多想要学习UI的小伙伴，我自己是一名从事了多年UI设计的设计师，辞职目前在做自己的UI私人定制课程，我花了一个多月整理了一份最适合2019年学习的UI学习干货，从最基础的UI学习都有整理，送给每一位UI小伙伴，想要获取的可以关注我的头条号并在后台私信我：学习，即可免费获取