UI设计小白到大神的进阶之路—入门基础篇

什么是UI设计？

UI即User Interface（用户界面）。那什么是用户界面呢？我们现在用的电脑，手机，iPad等等电子设备都有操作界面，那么这些可以和人进行信息交互的界面都是用户界面。所以衍生出的UI设计就是指对软件的人机交互、操作流程、界面美化的整体设计。说白了就是你通过界面去操作软件或设备，设备通过UI界面显示出你要的信息。这里需要特别强调的就是UI界面一定是人与机器之间是可交互的。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

我们还记得传统的打字机或者电报吗？那些虽然也是与信息相关的设备，但由于那个年代科技水平尚不发达，所以没有界面呈现给我们，所以我们与机器之间的交互是通过输入设备完成的。随着科技的发展，计算机等硬件开始有了屏幕，并且人们可以通过鼠标和键盘对软件实施操作，实现了人与机器之间的交互。那么我们本课程要学习的就是如何设计UI界面以及应该掌握哪些基础知识。

UI设计发展史

UI设计到今天大致经历了三个时期。在早期的操作系统中，图形和色彩相对简单，主要通过简单的渐变和阴影来绘制交互界面。我们可以看PPT这张图就是早期计算机的交互界面。

那个时候的计算机内存和CPU的效能和今天都没办法比拟，所以人们的审美也受到技术的限制，我们只能设计出这种相对简陋的UI设计元素，现在看起来相对单调乏味，不过在当时呢，已经算是里程碑式的跃进了。（见下图）

随着计算机成像能力的发展，在中期UI设计发展出了以拟物化为风格的界面设计。就是PPT这张图上所呈现的。设计师可以设计出色彩更加丰富细腻，更加真实的UI设计元素。在中期主要以写实的设计风格为主。让UI界面看起来更加生动贴近现实。（见下图）

到了后期随着网络的普及但受到带宽的限制，计算机软件界面要求能最快时间加载并呈现给用户，拟物化风格界面显然加载会很慢并大量消耗流量，人们也看腻了拟物化的界面。根据现实需求，扁平化图标问世了。就是我们现在依然在用的扁平化设计风格。（见下图）

UI设计风格

拟物化

拟物化的优点：更加真实的还原了生活中的物品作为功能的象征和体现。让人们能够快速理解图标的含义，说白了就是看图说话。

拟物化的缺点：但是拟物化除了看起来逼真它本身有什么缺点呢？第一就是对设计师的手绘能力要求相对较高，如果你没有扎实的绘画基础，你很难用软件绘制出高保真的图标。第二呢，就是工作效率相对低下。因为绘制一个高保真的拟物化图标需要很多图层和样式进行叠加，可能一天也就能画一两个，那么就相对延长了开发时间。现在是一个讲究工作效率的年代，敏捷开发为主。花费太长时间去扣细节已经过时了。第三呢，就是随着移动设备的普及，我们更愿意用手机进行浏览网页。但是高保真的拟物化图标占据的空间比较大所以会消耗我们更多的流量而且页面加载会变的很慢，人机交互变的不太友好。那么为了解决这一问题，扁平化设计风格的图标问世了。一个风格的出现绝对不是凭空出现的，一定是有所需求。对吧。扁平化图标由于色彩单一，样式简单，占据的空间较小，加载快，流量消耗小。所以成为了现在的主流设计风格。

那么扁平化呢，又可以细分出这种线性的图标，块面类图标和2.5D伪3D图标。

UI设计的分类

我们将UI设计可以细分出以下三种，分别是GUI  WUI  MUI。

GUI  即图形用户界面（Graphical User Interface，简称 GUI）是指采用图形方式显示的计算机操作用户界面。你可以把它理解成就是专攻画ICON的设计同学，GUI要求设计师有扎实的美术功底，将具象的实物抽象成简单的ICON。需要我们在绘制之前在纸上绘制出简单的草图。GUI的难点就在于你有可能要为一个产品画一整套的ICON，那就非常考验设计师的整体设计风格的把控能力，做到统一当中求变化，变化当中有统一。（见下图）

WUI 即网页端用户界面（Web User Interface，简称 WUI）是专指网页端人机交互界面的设计。从事WUI的设计同学以后要更多的接触PC端的网页布局设计。要求设计师对网页的开发和设计流程要熟悉和了解。尤其是网页的过去 现在 和未来都有哪些变化，应该怎么布局更合理。WUI设计师要掌握的知识非常多，比如网页的常规尺寸，字体字号，配色等内容，还需要WUI同学会一点HTML及CSS的知识。所以网页UI设计师的身价目前普遍要高于平面设计师。

MUI  手机端用户界面（Mobile User Interface，简称 MUI）是专指手机端人机交互界面的设计。手机端用户界面的设计有点类似网页端设计，但是由于显示媒介不同，造成的尺寸和交互方式也不同，WUI是通过鼠标和键盘和界面进行交互，而手机端页面主要是通过手指进行点击 长按 滑动 晃动等方式。所以设计的风格也截然不同。但设计的原理是相通的。手机端由于受到屏幕尺寸的限制，所以方寸之间每一像素都很珍贵，所以我们在设计手机端的UI界面的时候一定主要像素对齐等细节。

UI设计的基本原则

我们在设计任何产品的时候都可以从三个维度去考虑如何设计，哪三个维度呢，就是产品的形，色，质。

形，说的就是产品的页面布局风格，图标类型风格等。一个产品里的UI设计元素应该是统一的。在其他设计分类中，形还可以指代产品的造型等。

色：就是指一个产品的主色和辅助色都是什么。在用色的时候一定要考究，颜色不要过于多显得杂乱。应该定义一个产品的主色和辅助色即可。一个产品里的UI设计元素其颜色应该是统一的，有主次之分。

质：质就是指产品的整体设计风格，也叫调性。是清新风格，还是商务风格，还是卡通风格等。质还可以理解成产品的品质。

以上内容均附视频教程：《网页UI设计-零基础入门篇》