请问什么是UI设计？

让我们从起源说起

要想知道UI是如何产生的我们就要从灯泡说起，因为我认为 用户界面就是从一个灯泡，到N个灯泡排列在一起的这么一个过程 。

大家可以看这幅图

1960年 DEC PDP 8

这是人类历史上第一台成功的商业微型电脑，那时候所谓的界面就是由 物理按钮加灯泡 组成，大家可以看看当时的UI/用户界面是什么？所有人可以交互的设备，就像最早的这台微型电脑，主要的操作界面就是按钮和灯泡。所以说，用户界面（UI）在早期还没有显示屏。

但是随着发展， 灯泡越来越小，排列的越来越密集 ，不管从显示器大小还是显像质量都有了明显改进所以显示屏就出现了。

大家看下面这幅图，这是 1962年 研制出的人类第一款电子游戏－星球大战

1962年 Spacewar

随着时间的推移，人们发现 图像 是机器与用户 最好的沟通方式 ，并且图像被 广泛的应用于 设备与人的信息 交流 。所以后来出现了GUI，也就是所谓的图形化界面。

但是现在几乎所有的信息都是通过显示屏传递，所以就以UI代指图形化界面GUI了。

大家可以回想一下 两个时间 点 ：

2000年 左右

2007年 左右

2000年是 电脑的开始普及 时间，2007年就是 iphone的出现 。尤其是2007年之后，我们的生活发生了 天翻覆地的变化 ， 大家去商店少了 ，在网上买东西多了，大家吃饭前也不聊天了，都拿着手机打 愤怒的小鸟 ，要不就是 自拍 或者 拍食物 。 造成这种现象的发生就是因为 智能设备 的飞速发展，手机电脑的功能 高度集成 。也就是说所有的信息基本上都可以从电脑端和手机端接入互联网获取。

2012年左右，随着国内智能手机、电脑的进一步普及和网速的提成， 互联网热潮 又再度爆发。越来越多的企业开始关注 用户的实际需求 ，并把各种需求以互联网产品的形态呈现给用户。而所有的互联网产品都是以app和web展现给用户，那对于用户和商家而言界面则成为彼此之间的沟通桥梁，所以在这个社会背景下 交互行业 需求量 飞速增长。

那么我们再谈谈国内外互联网行业的差距，主要从两方面体现：

第一就是 国内起步较晚

第二就是 教育体系不完整

1. 1998年9月－2000年三月，硅谷掀起了一场淘金热，那时候遍地是钱，那是美国互联网爆发的时间点，当时产生了巨大的互联网泡沫，可以类比中国现在的情况。现在美国的互联网行业依然强筋，原因在于互联网行业回归理性，产品的产生严格遵循市场和用户需求，而不是盲目加上互联网。这也就归功于美国院校这几年在设计类专业的大力投入。

2. 交互设计、工业设计这些学科都是起源于西方，中国全面引入此类学科较晚，所以目前的教育体系不够完善，国内一类高等院校开设交互设计本科专业的学校不超过15所。所以 目前在UI／交互行业的人才需求量极大。
   

那目前我们需要什么：

更专业的更系统的知识体系而不是把UI知识理解为软件操作

介绍了这么多背景知识，我们就来看看一个好的产品是如何实现的：

一个好的互联网产品除了要有非常好的UI视觉，还需要有给用户带来良好的使用体验，也就是我们所说的用户体验。那什么是用户体验呢？

大家看一下这张图，我通过三张图跟大家比较形象的解释一下什么是UI和UX

UI＝User Interface

UX＝User Experience＝UE

如果说你要给你正在追求的男朋友或者女朋友做一桌饭，你首先要考虑什么？

FIRST:

他喜欢吃什么？

他吃饭的时候有什么需求？

怎么能让他爱上这顿饭？

......

SECOND:

需要考虑你能做什么菜？

能买到什么？

......

LAST:

我有多少钱？

如何具体达到上面所说的效果？

......

那么想过这些后，你就要开始准备了：

把买回来的菜想想具体怎么做，他吃饭的时候喜欢用刀叉还是筷子，如果用刀叉，那么他的摆放顺序是什么，如何能让他方便实用，口味咸淡如何调节，他会不会口渴，需不需要一个精美的桌布保护桌子还能让他觉得很温馨。让他在整体的使用过程中得到良好的 用户体验 。

这就是用户体验，用户体验不在设计当中的一个步骤，而是一个全过程。

也就是说制作一个 好的用户体验 要从

用户、技术、商业 三个纬度挖掘 产品创新形态

看这幅图，你把这桌菜按照你的预期制做完了：

大家可以看到图上的饭菜很漂亮，会让你看上去就想吃，并且桌子上的东西一目了然。桌布和食材搭配的很好，摆盘也十分恰当，重要的是还放了一杯水还有盐和油，会让你感觉很贴心。

大家看，最后这幅图，如果把这幅静态图脑补成整个就餐过程，那就还会涉及到就餐的顺序，如何与内容进行互动，他们动态的效果和反应是什么等等，所以这些因素也都在影响一个产品带给用户使用体验的好坏。

那再次强调一下，大家要记住 UX是一个设计过程 ，而不是在设计之中某个节点需要做的是，他应该贯穿始终， UI则是为了达到一个良好的用户体验的直接展现工具 ，但是对于 一个UI设计师出了要有很强的表现能力外还需要考虑交互逻辑 ，就是我们说的交互流程图，交互流程是看一个设计师是否具有很好的产品设计能力的一个指标、动态效果或者交互方式就是考察一个设计师是否懂得正确的理解信息传达和用户使用习惯的能力等等。

那我们再说下制作出一个好的产品你需要注意以下四个点：

Utility实用性

Usability可用性

UserInterface 用户界面

UserExperience 用户体验

Utility （ 实用性） 一个好的产品首先要具有实用性，简单说就是 有用 ，用户有这个需求并且 愿意使用 。这就需要前期做很多 市场挖掘 和 用户的需求 方面的 调研 工作。

Usability （ 可用性） 可用性是指用户能否 简单、高效 的完成一个目标，这就牵扯到 使用效率 ， 展现方式 ， 交互方式 和 使用逻辑 等，这样我们就需要在产品的制作过程中 不断的测试 产品的可用性，而使用 效率 往往是测试的标准。

UserInterface（用户界面） 则是展示前两者的 载体 ，并且给用户带来最直接的

UserExperience（用户体验），起到一个承前启后的作用。

不过大家要注意，现在不管是国内还是国外，大家对上述四点的关系理解会有差异，因为用户体验是一个相对来说比较虚的东西，很难精确量化，所以只要言之有理，都可以接受。但是确定的事，用户体验不是设计的一个步骤，而是一个过程。希望大家能理解吸收以上这些共同支撑了一个好产品。

有盆友问：一个好的作品集里面要有什么？

其实你的作品如果可以凸显以上几点，那就已经很好了，但是如果你现在达不到，那最重要的是学习设计方法，建议你们了解下 Design Thinking 等设计方法，学习设计不能 单单的理解为是软件操作 ，其关键在于在不断实践的过程中 经验积累 和找到合适的 设计方法 。作品的好坏不在于是不是给公司做的还是自己做着玩， 一个好的产品一定是符合用户需求并且市场针对性极强的 。

一般一个UI设计师需要具备一下几个能力：

1. 理解问题能力，需要能 抓住利益相关者的需求

2. 解决问题的能力，需要 针对利益相关者的需求做出解决方案

3. 决定能力，在众多的解决办法里 选择最好的一个解决方案

4. 原型制作能力，需要用不同的保真度 把产品实现出来

5. 测试能力，测试产品 是否达成设计目标和持续不断的迭代

   
   

下面我以安卓系统为例跟大家说一下 如何创造出一个好UI ：

往往在做设计的时候大家会感觉到界面设计完了，总觉得哪怪怪的，一般这种时候都是因为在视觉上没有区分每个模块的层级和主次。

那如何分清层级和层级如何体现？

首先你要理解UI宏观上虽然看似是一个平面，但微观来看其实他也是立体的，主要体现的就是层级关系。所以在我们制作UI的时候就要注意这三个纬度。 X和Y轴主要是用来表现顺序，Z轴则是来标示层次 。一般大家在制作UI的时候都会考虑X和Y，但会忽视Z轴的存在。

既然有了Z轴就会有高低的不同，这主要反映出了内容的层次。在展现的时候也相应的可以用阴影来展现。大家先来感受下阴影， 阴影是表示不同模块层级的直观表现形式 。

我们再来看看如何正确的表示 内容模块的高低、层级和阴影 。如果我们换个角度来看就会对此有了更直观的感受， 内容的高低由阴影的大小表现，阴影的大小则反映内容层级的高低 。

对于初学者来讲， 阴影的大小的使用会成为你心里的阴影 。那我们就看一下这种情况有没有发生在你身上，阴影大小区分不大会造成方向效果，尤其是有选择恐惧的人，他会反复的调节阴影的大小，总觉得不舒服。那么也就是说阴影一定要大胆，而不要让阴影失去了价值。大胆使用高度的差异化

如果没有阴影，

你会发现你在做的是一个饼...

对，吃的饼

你们感受下~

欸...是不是舒服多了

给大家举个“栗子”：

大家看这个图，这样看上去是不是层级关系就很明显了，一般刚开始做UI的同志经常会认为内容最重要，然后把内容模块的阴影弄的非常大，但是实际效果则恰恰相反，那样会让人感觉内容要溢出来了，一般来说 内容的体量最大，也相对丰富，所以内容的层级就比较靠下，这是要突出整体产品的功能 ，大家脑补下，如果把图中的黄色按钮阴影调小，或者没有那会是用户注意不到这个功能性按键，并且有可能认为他是内容的一部分。所以可见阴影的大小在UI上面的重要性，这也是一般初学者经常犯的错误。

今天跟大家分享了我对UI和互联网产品的理解，希望大家能多接触些设计方法和设计思维的东西，因为 只会软件的只能称为美工，作为一个设计师，必须慢慢培养你的设计方法和设计思 维。希望今天分享的东西能够给大家带来帮助。

更多设计交流可以加我微信： VictoriaUEN