设计师随便画个框线就能年薪30w？

原标题:设计师随便画个框线就能年薪30w？

▼

你还记得微博原来的样子吗？

虽然微博改版这事已经过去了2个月，今天还是忍不住要和大家一起吐槽一下。作为最常用的APP之一，每次zha浪玩骚操作，都让人想报警。

从大V到普通用户，都在diss改版后的微博。但是，在一片怨声载道中，我注意到了评论中出现最多的一个词，那就是：

界面（UI）

▼

承包你全世界的UI设计

或许，你和我一样从来没有听过UI。但它，已经悄悄潜入了我们生活的方方面面，每天都在和我们紧！密！接！触！

让我们从头说起，时间回到2010年，也就是一代神机iPhone4诞生的那一年，苹果火遍大街小巷，成为全球的消费者卖肾都想要得到的一部手机。

▲ （原画）约翰内斯·维米尔 《戴珍珠耳环的少女》1665年

乔帮主的苹果以出色的UI设计，让人们获得了前所未有的用户体验，移动UI应运而生。当然，那时候还没有什么UI设计师这么洋气的称呼。

一晃到了2012年，一时间村里通了网。当村口卖菜的大爷都用起了微信支付宝，你的朋友圈逐渐被电商占领的时候，人们发现手机、APP、网页实在是太重要了，怎么才能让它们更好用，更便捷，更吸引人呢？

于是，UI设计诞生了。

▼

说人话，UI设计到底是个啥？

说了半天历史，UI设计到底是个啥呢？

界面，就是人和机器设备发生互动的地方。简单来说，屏幕或显示器上出现的东西，就是UI。

让我们假设一下，今天UI设计的产品是一个APP，那么这个APP里的每个界面，信息的呈现方式，页面的切换模式，什么功能的图标应该长成什么样子，都需要UI设计师的打造。

当然也免不了要经历N次测试不合格、打回修改，甚至回炉重造的糟心过程。

那么，问题来了，UI设计的价值在哪？或者说UI设计师厉害在什么地方？

▼

美的形式主义

UI设计师行走江湖，当然少不了一两招傍身之技。

尤其在这个看脸的时代，产品再有内涵，也少不了一幅美丽的画皮。

UI设计就是一个满足我们高颜值追求的界面整形医生。

都说对于整形医生而言，审美是最重要的。UI设计师设计一件作品，也离不了他们的艺术审美。

而美的定义，自始至终都是个流动的概念，回顾人类艺术史，有追求的质感和形式感的古典主义。

▲ 拉斐尔·桑西 《雅典学院》 1510-1511年

古典主义下的美，强调理性、均衡、完整，致力于展现宫廷趣味的华丽、典雅和庄重。

随后，出现了追求场面华丽、动态感的巴洛克以及精致、浮华的洛可可。

美，不再受到教条的束缚，它可以不需要稳重，甚至是轻浮的。

当艺术走过工业革命，艺术设计也可以工业化批量生产的时候，美，迎来了现代主义、后现代主义。艺术在此时就像一个进入青春期的反叛少年，处处表现出对理性、完美和权威的反抗。

▲ 皮特·蒙德里安 《百老汇爵士乐》 1942-1943年

▲ 安迪·沃霍尔 《金宝汤罐头》 1962年

与所有流行趋势的本质一样，UI的趋势也是不断地来来去去。

这就要谈到UI设计的第一招：简约。

我们说回苹果，它的UI设计就经历了从拟物化(Skeuomorph)到扁平化（Flat Design）的转变。

▲ ©Adam Lister 《雅典学院》

以iOS4的拟物化图标为例，从计算器到笔记本，都在模拟现实实物的造型和质感，UI设计师通过高光、纹理、阴影等效果，精心雕琢出一个物品的外表，可以说是代表了设计上的古典主义。

在数码设备普及化不高的年代，这样的UI设计可以说是非常的用户友好。因为加入了大量的细节，拟物化的设计更加直观有趣，能让人一眼认出这是个什么东西。

▲ iOS4界面

可渐渐设计师们发现，拟物化的设计在追求“像”这一点上，带来了很多功能上的限制，大量的细节对界面元素的功能没有任何帮助，反而加重了人们的视觉信息负担，容易形成审美疲劳。

于是，从iOS7开始，苹果的UI设计走向了扁平化，采用了全新的一套图片界面设计。用户突然发现iOS的图标们变得简洁、抽象了起来。

备忘录Icon的皮革风没了，短信、相机、相册等也变成了更简洁的二维图形。

扁平，说白了就是去掉界面冗余的装饰效果，抽离了多余的情感传递。

▲ iOS7界面

就好像近年来大行其道的极简主义，以及被吹爆的性冷淡风，UI设计的发展趋势也是如此，从形式上提倡简单几何造型，主张Less is More（少即是多）。

当卸下了过多复杂、花哨的装饰，信息本身作为核心，才得以被凸显出来，同时也很好地满足了面对信息过载，人们希望减轻信息焦虑的需要。

▲ iOS6与iOS7部分图标对比

当然，扁平化不代表简单无趣，古人云：“去伪存真，去粗取精”，在减少装饰的同时，更多注重的是细节的打磨。

UI设计中那些大家已经习以为常却又至关重要的细节有很多，比如高光、阴影、材质。但要我说，最能体现出设计师艺术哲学的，还得数留白和对称。

接下来介绍的，是UI设计的第二招：留白。

界面中的留白，或者设计师口中的“负空间”，通常会被人们忽视，但它和页面上那些占用空间的元素一样重要。

我们称之为留白，并不意味着就是单纯的白色，而是一片没有任何的文字和图像的空间。山水画里的留白，是画家创设意境、令人遐想的审美趣味。

▲ 倪瓒 《渔庄秋霁图》 元代

留白在一个界面中的作用在于它创造了对比，让我们更好地捕获物体的形状和边界。让界面上的各个元素之间存有自由呼吸的空间，用户才能更好地理解信息之间的关系。

UI设计师常常用留白的技巧，增加了屏幕上的层次，并且引导用户的眼睛朝着预期的方向看。这样，用户不会被混乱无章的界面给吓跑，而能够更快地发现重要信息。

最后再说一个UI设计中看似不起眼，却可以打遍天下无敌手的大招：对称。

大约在公元前五世纪，古希腊有个很厉害的雕塑家波留克列特斯（Polykleitos），除了是“三种理想男性形象创造者”，他还把“对称”的概念引入到艺术当中，提出了所谓的“匀称美”。

古埃及人对艺术有着固定的审美，无论是雕像、绘画还是建筑，都运用了大量的对称形式。

以下是强迫症福利时间。

向左滑动查看下一张图片

除此之外还有，印度的泰姬陵、希腊的帕台农神庙、巴黎的凯旋门，以及我们老祖宗留下的宫殿、坛庙、寺观、佛塔等等。

向左滑动查看下一张图片

对称的元素简单、和谐、端庄。人类喜欢对称的元素，是因为我们在进化过程中自然地形成了寻求稳定和秩序的基因。并且，人类也通过这样平衡的方式，探索和发现，甚至是创造着美。

一个界面的整洁、有序，在用户的眼中就代表着舒服，而这样的界面也是信息有效传递的前提。

当界面的左右两边运用了相同的布局，用户会自觉地自上到下，从左向右查看，对称的构图给人视觉上的舒适感，唯一的缺点是显得相对沉闷和无趣。

但聪明的UI设计师也很能利用人的视觉对称，往界面里加入几个具有动态性和趣味性的元素，打破沉闷。就好像一副画看似中规中矩，却就有那么一点小“偏差”，规整中的那一丢丢不对称，立刻就能抓住人的眼球，让你在众多信息里，一眼看到它，记住它。

▼

美的实用主义

说了这么多，你一定有这样的疑问？UI设计师和美工到底有啥区别？

（UID:你才是美工！）

答案是，作为一个UI设计师，会画几张美丽的图只是基础。

当然，会使出高超的绘画技巧已经不简单，但高手的养成还在于长年累月修炼的武功心法：为人民服务。

因为，艺术关乎审美，但艺术设计则需要解决问题。

说到信息的呈现，在这样一个信息爆炸的年代，我们每天受到无数碎片化信息的狂轰滥炸。UI设计师根据人眼的阅读习惯，用扁平化的布局，把信息分类、整合成一张张小卡片，从而帮助我们减轻阅读负担。

当然，有良心的UI设计，也有无良的UI设计。这里就不得不吐糟某些网页、应用，为了让你在它的界面（广告页）多停留一会，就喜欢和用户找变扭。比如对调确认、取消按钮的位置啊，或者干脆让关闭键玩起了捉迷藏。

非但不解决问题，还给人制造问题，对这样耍流氓的UI设计，劳资反手就是一个差评。

再来，还记得当年加载时苦苦的等待吗？每每加载到99%，进度条就开始装傻，仿佛从99到100隔着一个太平洋。

产品经理自以为洞悉人性，把进度条的加载速度设定成成先快后慢，就可以让用户不甘心、不忍心取消那前99%，只能守在屏幕前为最后那虚假的1%加油打call。

结果是，这种条形框加“注水”数字的加载页面，只让大量用户感受到等待的焦虑和绝望，并且思考把电脑倒过来加载会不会更快一点，这样违背物理原理的问题。

这个时候，UI设计师出现了，他们用新奇、有趣的美，缓解了等待的焦灼，填满了生命里被浪费的那几分钟，让用户们心甘情愿地等待。

▲ 来自设计师：Aleksey Tsvetkov

UI设计师的厉害之处就在于，他们善于表现美，又能将视觉上的美，变成解决问题的一剂良药。

▼

美的用户体验

说完了用美来解决问题，我们再来看看UI设计的另一个重要的技能心决，也是UI设计和平面设计的最大不同：

（UID：我们懂人，也懂机）

那就是，在人机交互的过程中给用户带来流畅、舒适的用户体验。

相信每天和手机谈恋爱的你，一定理解交互是个啥。

▲ （原画）保罗·塞尚 《玩纸牌的人》 1892-1893年

部分好看不中用的APP界面，美得像个尤物，可每每操作起来，要不是毫无反应宛若死机，要不就是步骤繁琐，“摩擦力”十足。不禁让人怀疑自己是不是下载了个人工智障。这样智商不平等的人机交互，给人的体验通常不会太好。

好的人机交互是什么？

好的人机交互就是，你的机能够理解并且满足你的需求。

你的每次触摸，每个动作或者是语音呼唤，你的机能够快速地给出反馈，用优美、流畅的视觉动作告诉你，它正在忙什么，已经完成了什么，以及它即将要做什么。

比如我们在Instagram上给自己的爱豆点赞，当你双击屏幕，一颗爱心由小变大，然后消失。图片下方的爱心变为红色。这一刻，你就能真切的感受到，为爱豆手动比心的过程，是多么神圣且富有仪式感。

▼

说了这么多，也只是UI设计的一点点皮毛。UI设计，可不止画画框线这么简单。