学习ui设计，如何学好ui设计

问答里面经常会有人问：“我是UI设计的零基础，可是我要学UI设计，想学UI设计，UI哪里可以学？如何学习UI？”在这里告诉你学习UI设计第一阶段到底要掌握哪一些知识和技能。如果你是新手的，坚持看完每个知识点并且搞懂你就知道了。

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

一：学习工具选择

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

二：学习UI设计规范

主要有安卓版的和iOS版本的，现在市场上有很多种的系统、比如我们的安卓，苹果、黑莓、windows phone等，身为一个ui设计师，我们都应该对这些系统有所了解，了解完之后再去做APP界面就会更加的得心应手。

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

• 第一行就是我们的手机分辨率，这个是一定要记住的，比较重要的，我们去做设计图的时候就是利用它的这个分辨率作为尺寸的。
• 第二行是密度值，这个是手机出厂的时候手机厂商给的，就是一个英寸里面有的颜色点，比如LDPI这个分辨率的，它每一个英寸里面就有120个颜色点，所以密度值越高，屏幕越清晰，接下来的比例就只是一个相对应的比例了，没什么好说，接下来看一下下面的倍率关系。
• 以MDPI为基准，也就是说MDPI是一个一倍的分辨率，那么其它的都给出了它们相应的倍率，去适配的时候就是通过记住这个倍率去进行大小尺寸的转换。那么我们有这么多的分辨率，对应的就有这么多的尺寸，我们去设计的时候应该拿哪一个的尺寸来作为设计稿呢？一般去选择设计稿的时候有两种方法：
• 方法1：以一个基本的尺寸(MDPI=320*480或者XHDPI=720*1280) 开始，之后将其缩放到不同的屏幕尺寸。
• 方法2：从最大的屏幕尺寸开始，之后为小屏幕去掉一些 UI 元素。
  因为MDPI是一倍的，而XHDPI是两倍，都是整数倍，容易去适配其它的分辨率，如果以XHDPI为设计稿，设计的所有数值都要求是双数的，去转换的时候才能保证不出现小数点，第二种方法的话就比较难去控制，所以一般还是建议用第一种，当然最好的方式自然是每一个分辨率都单独去做一套界面图。

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

布局规范表

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

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

图标尺寸

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

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

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

字体规范

字体的也有相应的规范，比如最小字体是多大，文本是多大，按照规范来设计的话就可以保证我们的界面图整体看起来更加的美观，而且在使用的字体方面，也是有一个严格的规定。

在设计界面的时候要注意控制字体的大小，放置的位置不同、作用不同，它的字体大小也不一样。

设计规范还是那句话，规范只是一些设计师去设计界面时候的参考，不要因为这些规范去限定你的设计想法，重要的还是用户体验和界面的美观。

三：色彩学习

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

1.色相

色相指色彩的相貌，不同的波长决定不同的色相，这是大家最直观感受到的色彩。色相对于色彩是最直接的代表，是色彩的灵魂。

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

2.明度

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

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

3.纯度

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

4.UI设计中色彩的使用

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

四：临摹阶段

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

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

五：掌握切图

之所以需要切图是因为用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。

切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！

好了，大概这几点，当然这个只是学习UI设计的中的其中一小部分，也是入门的阶级。如果你觉得有用，就是今天这一篇最大的目的。你是否能够真的很有毅力的去学习。最重要的，不要低估自己也不要高估自己，时间才是金钱。

祝大家成功...............！！！

多看

为了提高审美，你需要大量去看别人优秀的APP或网页作品，在Dribbble、Behance、Pinterest等设计网站你可以很容易的找到大量优秀的作品。

除了UI设计外，平面、摄影、3D、手绘等全球顶级的作品也都可以看到，找到并收藏它们。一段时间后，回顾这些作品，如果发现三个月前收藏的作品很low，恭喜，说明你的审美提高了！

多做

当你看过很多优秀的作品后，你可能还是不会设计，所以接下来你要做的就是不断的练习，第一阶段就是临摹。

给大家推荐几款比较有设计感的APP供临摹练习：《犀牛故事》、《Light》、《想去》，这几款APP设计都比较简洁清新，初学者比较容易上手。同时，可以尝试去学习一些设计规范，例如《iOS人机交互指南》，它是从事UI设计工作者需要掌握的内容，建议仔细读一读。

临摹几套作品过后，可以进入第二阶段——Redesign。你可以redesign一个自己版本的iOS系统界面，或者重新设计一个微信，加入自己的想法和理念。如果你喜欢玩《阴阳师》，你可以设计个自己版本的阴阳师界面，甚至把里面的角色换掉都可以。

学习过程中如果遇到自己解决不了的问题，多百度或google，如果是一个大问题，可以把它拆分成若干小问题，逐个解决掉就好。

多想

在看和做的过程中，设计技法只是学习UI的一小部分，更多的是要去理解设计背后的思路和原理。比如，这个产品为什么定义蓝色为主色？为什么要放大和加粗那个数字？整个页面的结构和布局是怎样的？设计的目标有哪些？

不断去思考，不停去问自己为什么，只有这样，才能在今后的工作和创作过程中，使设计有理有据，经得起别人的推敲，显得自己更专业，从而获得认可和尊重，更好地使用设计去解决问题。