笔 记 . 3

UI设计

UI的全称叫 User lnterface，就是用户界面，也就是一个产品 (例如 App，或者汽车上的车载设备、智能硬件等等)和用户交互时，需要借助的界面。不要把 UI 理解成画，和手绘之类的更不沾边。UI 设计本身是互联网研发中的一部分，要以互联网的视角来看。UI 设计本来就不是一个艺术类工作，而是一个产品工程类工作。

（Ps,Ai,Ae这三个是软件都是我们应该掌握的工具。Photoshop: 是一款老牌像素处理软件。主要处理以像素所构成的数字图像。在图像、图形、文字、视频、出版等各方面都有涉及。各种设计行业图形处理都会用到Photoshop，可以满足UI界面设计的日常需要。llustrator: 是矢量软件，广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和与联网页面的制作等。在处理一些及其复杂的图形路径时候，可以考虑使用llustrator，也有设计师所有的图标在lllustrator 中完成，然后连接嵌入到Photoshop。After Efects: 现在扁平化设计成为主流，所以动效设计成为不可或缺的一部分。可通过这个软件设计动效平滑切换界面。）

UI设计主要要负责的有：

1.配色

2.界面

3.banner图

4.按钮和图标

5.字体

6.动效

7.切图和设计规范的制定

先说说配色

平面设计，如今常常被称为视觉传达设计。我们不难看出决定我们设计的最重要的部分是——视觉。人眼看到的是光，光带来颜色。在视觉传达之中，固有色、照射光色和环境色是影响我们看到的颜色的最主要的因素。固有色就是物体本身的颜色，不说了。光色1日光灯灯光下物体颜色偏冷，发蓝，2自然光，比如阳光，晴天条件下的光线，阴天的光线，都能影响色彩。还有就是是环境的影响，比方说把一罐子放屋里，屋里有一红窗帘，罐子颜色会变暖，甚至偏红。或者罐子旁边放一个橘子，或地板是冷色，都会给此罐子带来一定程度的颜色变化，只要在反光上，就称之为环境色。

首先，因为UI设计作用于电子屏幕之上，而电子屏幕本身是发光的，所以UI设计中对于色彩的使用是不同于其他几个的。人眼是收到光信号再成像的，所以在考虑UI设计中颜色的搭配时，我们要先考虑颜色是怎样呈现出来的。

其次，对于传统的平面设计来讲，颜色是物体表面的反光反射到人眼中而呈现出来的，这样的光线更加的柔和。与之不同的是，UI设计中，屏幕本身发光，这样的有色光更加的强烈，对人言的刺激更加强烈，所以首先要考虑的是饱和度和亮度的问题。

传统的平面设计中，招贴海报可以是巨幅的，复盖楼房整个墙面的，海报对于细节的要求也不一定有那么高；

插画可以是单色的（例如过去书籍中常用到的版画，通常是黑白的（受限于印刷技术））；

商业海报或者包装设计，为了吸引顾客，使用非常强烈色彩对比的也大有人在；

在UI设计中，由于屏幕大小以及屏幕本身发光的问题，不应该使用过多的复杂的颜色，对比度与饱和度也不应该过于高。

与传统平面设计相同，UI设计同样会受到环境光的影响。无论是光源变强变弱造成反射光线变强变弱，还是屏幕本身的亮度调节，都使得平面设计对于颜色有了更进一步的要求，这其中，由于UI设计本身是动态可变的，所以应当在不同使用情境中，对颜色做出调整。不只是日间模式和夜间模式，因为手机在不同环境亮度情况下对屏幕亮度的调节，在手机不同亮度的情况下也可以并且应当对颜色进行微调。

在UI设计中，用到的颜色不一定多，但是几个颜色本身可以做非常非常多的细微调整。在其他平面设计中又是不一样的要求，接下来我们仔细的进行讨论。

1.首先，每个页面之中有要突出的东西。

比方说在第一个页面里，颜色的饱和度都太低了，整个页面显得灰蒙蒙的，下方的按钮的对比不够强烈，人在看这个页面的时候，使用体验就会很差。第二个页面里，虽然是夜间模式，对比足够强烈，那么就会更加的方便使用者找到想要的功能。

2.

其次就是界面里不应该出现太过于细碎的图形或者图像。

比方说这个，虽然看起来不错，但是在手机屏幕上显现出来就过于花哨了。

手机屏幕本身就不是很大，细碎的线条一类的会分散使用者的注意力，以及造成视觉上的疲劳。同理，颜色也不能太多，尽量保持在4个颜色以内就够了。手机本身是发光的，所以颜色会比实际上显得更加亮。所以在调配颜色的时候，颜色应该稍微暗一些。比方说我在手机上想要看到一个正红色，那么在制作的过程中选区的颜色应该亮度稍低一些。

渐变的使用也会让界面看起来更美观一些。但是也不能一个页面到处都是渐变色，纯色仍然是要占主要地位的，因为大量的渐变仍然会使得界面显得过于花哨。