经常会有人问：“我是UI设计的零基础，可是我要学UI设计，想学UI设计，你能不能给我一个大纲？”这个问题已经磨破嘴皮子了，今天这一篇，告诉你学习UI设计第一阶段到底要掌握哪一些知识和技能。如果你是新手的，坚持看完每个知识点并且搞懂你就不要再说你是个新手了，努力学习，然后去和别人说我有基础，我想进阶。

入门阶段的你就像一张白纸，最主要的特征就是迷茫，不知道从何学起，知道网上有海量的信息，全是教程，但是不知道先看什么，后学什么，怎么学习。

今天主要罗列大概学习大纲，在最后再回答一个经常有人问的问题“我是报班还是自学？”

第一：学习工具

工欲善其事，必先利其器。

对于入门阶段的童鞋，你就不要老是纠结怎么学。先玩透Photoshop，UI设计的工作中最主要的工具就是PS，比方在做一些图标和界面的时候，PS都是必不可少的。但是Photoshop有那么多功能需要每一个都学吗？当然不用，这个后面我们专门找一节慢慢说，在UI设计中ps主要学习那几个工具。

如何下载？

网页链接 即可跳转到下载链接。附相关破解及安装教程

第二：学习UI设计规范

主要有安卓版的和iOS版本的，下面整理了两篇。

【安卓版】

现在市场上有很多种的系统、比如我们的安卓，苹果、黑莓、windows phone等，身为一个ui设计师，我们都应该对这些系统有所了解，了解完之后再去做APP界面就会更加的得心应手。上表是一张安卓版本的设计参考规范表，首先了解市场上用得最多安卓的分辨率种类：LDPI、MDPI、HDPI、XHDPI、XXHDPI。

首先我们从上往下来分析上表：

• 第一行就是我们的手机分辨率，这个是一定要记住的，比较重要的，我们去做设计图的时候就是利用它的这个分辨率作为尺寸的。

• 第二行是密度值，这个是手机出厂的时候手机厂商给的，就是一个英寸里面有的颜色点，比如LDPI这个分辨率的，它每一个英寸里面就有120个颜色点，所以密度值越高，屏幕越清晰，接下来的比例就只是一个相对应的比例了，没什么好说，接下来看一下下面的倍率关系。

以MDPI为基准，也就是说MDPI是一个一倍的分辨率，那么其它的都给出了它们相应的倍率，去适配的时候就是通过记住这个倍率去进行大小尺寸的转换。那么我们有这么多的分辨率，对应的就有这么多的尺寸，我们去设计的时候应该拿哪一个的尺寸来作为设计稿呢？一般去选择设计稿的时候有两种方法：

• 方法1：以一个基本的尺寸(MDPI=320*480或者XHDPI=720*1280) 开始，之后将其缩放到不同的屏幕尺寸。

• 方法2：从最大的屏幕尺寸开始，之后为小屏幕去掉一些 UI 元素。

因为MDPI是一倍的，而XHDPI是两倍，都是整数倍，容易去适配其它的分辨率，如果以XHDPI为设计稿，设计的所有数值都要求是双数的，去转换的时候才能保证不出现小数点，第二种方法的话就比较难去控制，所以一般还是建议用第一种，当然最好的方式自然是每一个分辨率都单独去做一套界面图。

了解完这些分辨率和用什么尺寸做标准之后，接下来让我们直接看一下界面设计要注意的一些规范。首先先从界面的布局尺寸开始：

1.布局规范表

上表就是我们在界面上最基本的一些控件尺寸的大小规范，比如状态栏、导航栏、和菜单栏，这些都是比较死的数据，多去看几次就记了，当然数据还是挺多的，你也可以用MDPI的尺寸标准看成DP然后再去适配其它的尺寸，这样做的话需要记住的数据就少了很多了，这就是DP的法，比如，MDPI的状态栏高度是25px，你就把它等同成25dp，然后再去进行相应的转换。

哪些基础控件的大小就不说了，记住就行，宽度的话是满屏，接下来看一下最细画笔大小，指的是一些分割线，或者一些线性图标，这些我们要保证做出来之后，用户去使用的时候可以看的清楚。

2.图标尺寸

在一个分辨率里，一张界面图上有太多的图标，不可能每一个图标的大小都是一样的，所有图标会根据所处的位置的不同，用处的不同，图标的大小也会不一样，图标的大小也不是我们想给多大就给多大，安卓系统有一套自己的规范。接下来我们看一下上面的这些图标指的是哪些。

第一个是启动图标，就是我们手机桌面上的图标。操作栏图标就是一个应用上操作栏上面的图标，上下文图标就是放在正文里面的一些图标，系统通知栏图标也就是状态栏上面的图标，商店启动图标是当我们去网页上下载的时候出现的那个图标，了解一下就行了。

看完了分辨率、控件大小和图标的规范，接下来再看一下字体的规范。

3.字体规范

字体的大小安卓里面也有相应的规范，比如最小字体是多大，文本是多大，按照规范来设计的话就可以保证我们的界面图整体看起来更加的美观，而且在使用的字体方面，也是有一个严格的规定，英文在安卓里面使用的是Roboto，中文字体使用的是droid sans fallback，当然现在随着安卓手机分辨率的增加， 中文，字体的选择也多了几种，比如中文也可以使用思源黑体等。本文为趣达爱设计原创，如需转载请私信获取授权，谢谢配合。

【iOS版】

首先我们要知道怎么去用它，就必须先了解它的一些尺寸的大小和各种的版本，通过一个表格来简单认识一下I苹果手机。

从上面的表格上可以看出，现在市场上的苹果手机有这么多种，每一代都有自己的屏幕大小，导致了很多几种分辨率的出现，苹果手机的分辨率有@1、@2x和@3x三种分辨率，也就是我们经常说的一倍、两倍和三倍。

苹果三代是一倍分辨率，4到6s是两倍，6p开始就是三倍了。那么有三种分辨率，我们去设计的时候该怎么做呢？每一种都设计一遍？但这样会不会太浪费时间了，为了提高设计的效率，我们会选择其中一个作为我们的设计搞去做出设计图，其余的通过适配去得到其它的分辨率。

一般我们选择设计稿的时候会选择苹果5或者苹果6的大小去设计，也就是640*1136或者是750*1334这两种。因为这两种尺寸最接近androidXHDPI的分辨率，方便之后去适配。

说完了IOS的分辨率，接下来我们就可以正式进入怎么设计的话题了。首先第一个开始说的就是界面上最常见的控件了，先看一下表：

1.IOS控件尺寸规范

根据上表来分析：

首先解释下什么是PPI？

PPI，英文全称：pixels per inch，即像素每英寸，也叫像素密度，我们的屏幕都是由很多很多的颜色点构成的，而PPI就是一英寸屏幕里面有多少个颜色点。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度高，拟真度就越高。 

屏幕大小：这个相信大家都懂

状态栏：再下来一行就是状态栏的高度了，状态栏就是我们手机屏幕顶部放电池的那块区域。在分辨率一倍的手机里，高度为20，根据表格查看其它规格。

导航栏：就是状态栏下面那块区域，一般放返回键和页面名称，不如设置、个人中心或者首页。它再一倍分辨率里的高度为48px，最后一行就是标签栏，也是我们安卓里面的菜单栏，一般放在屏幕最下方，它的高度为49px，其余分辨率的高度用一倍的乘以他们相对应的倍数得到。

2.IOS图标规范表

在手机应用上，图标放置的位置和作用不同，决定了他们有一些各自的大小规范。我们大概说一下上面的图标指的是哪些图标，应用图标、搜索结果图标、主屏幕快捷方式图标都是一样的，只是出现的位置不同而已，可以简单的看成都是手机桌面上的图标，应用商店图标是在网页下载的时候的那个图标，大概了解一下就行，设置界面图标指的是设置页里面的图标，工具栏、导航栏和标签栏图标这个就不多说了，就是刚好对应他们放置的位置。

3.IOS字体设计规范

在设计界面的时候要注意控制字体的大小，放置的位置不同、作用不同，它的字体大小也不一样，而且IOS系统也限定界面上使用的字体，现在最新的都要求中文使用苹方、英文使用San Francisco。

设计规范还是那句话，规范只是一些设计师去设计界面时候的参考，不要因为这些规范去限定你的设计想法，重要的还是用户体验和界面的美观。本文为趣达爱设计原创，如需转载请私信获取授权，谢谢配合。

第三：色彩学习

色彩的三要素指的就是色相、明度和纯度。这三个分别是什么意思呢？我们可以这样理解：

1.色相

色相指色彩的相貌，不同的波长决定不同的色相，这是大家最直观感受到的色彩。色相对于色彩是最直接的代表，是色彩的灵魂。在光谱中，红、橙、黄、绿、蓝、紫等由于有着不同的波长，带给我们不同的色彩感受，它们是最基本的色相，其他诸如象牙白、柠檬黄等都是指色彩特定的色相，是人们对不同色相的不同称谓。有一个地方要注意，黑色和白色是无色相的。

2.明度

明度指色彩的明暗程度。明度可以说是色彩的骨架，明度对色彩的结构起着关键性的作用。明度具有定的独立性，它可以离开色相和纯度单独存在，而色彩的色相和纯度总是伴随着明度一起出现的，所以明度是色彩的骨架。

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

3.纯度

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

4.UI设计中色彩的使用

那么在UI设计过程中色彩该如何去搭配？主要通过4部分来讲解。在UI界面设计比例中：用色一般分为主色，次色和辅助色，它们的比例是按照20%-30%、5%-10%和5%来进行配色，通过不同的配色比例让界面看起来不会出现突兀或者是主次不分的情况。

第四：临摹阶段

了解了具体的知识，最主要的就是练习了，需要联系临摹来加强你的技巧，不要想着怎么做，怎么临摹，学啊~直接打开ps就开始操作，如果不知道怎么临摹，可以多加几个大神群去问。

这个阶段的就是要：多练和多问

第五：掌握切图

之所以需要切图是因为用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！

好了，大概这几点，当然这个只是学习UI设计的中的其中一小部分，也是入门的阶级。如果你觉得有用，就是今天这一篇最大的目的。本文为趣达原创文章，图片某部分来源于网络，作品版权及观点归原作者所有，向原作者致敬。

问题：自学还是报班？

学习是一件很枯燥的事情，面对这个的问题选择，你必须客观的认识你自己。如果你是一个自制力很差的，你没办法做到一练习就是几个小时甚至一天的人，那么建议报班，跟着老师和小伙伴一起学习。反之亦然。

报班和自学各有优缺点，不要因为几个钱的事就老是纠结，如果是你，辛辛苦苦学了几年的知识，人家一来就说，“你会，你来免费教我”，人家一拳就过去。

所以这个问题的选择需要看你自己是否需要。你是否能够真的很有毅力的去学习。最重要的，不要低估自己也不要高估自己，时间才是金钱。

文章作者：趣达小楠

版权说明：本文为趣达原创文章，图片某部分来源于网络，作品版权及观点归原作者所有，向原作者致敬。所有的转载均标明原始来源及原作者，如尽力核查未能发现原始出处和原作者，则默认“来自网络”。若有疏漏欢迎原作者及时联络署名及删除。