进退失据的UI设计，到底需要什么做灵魂

小优同学其实已经毕业2年了，青春无敌的面庞依然留有一点学生时代的稚气，大概也是因为这份青春的气息加上积极向上乐于学习的态度，不知道从什么时候起，设计部门里的同事半调侃半赞赏地开始称呼她「小优同学」。

早在大三的时候，出于对 UI设计的热爱，小优同学已经开始用自己的 Macbook Pro 一边学习一边接私单，得益于此，寝室的姐妹也没少跟她一起去簋街敞开了吃小龙虾。

毕业季来临，小优同学放弃了并不那么热爱的本职专业，而是向着自己热爱的设计靠拢。得亏大学后2年的积累，小优同学被一家20多人的小型创业公司相中了，由此告别学生时代，开始 UI设计师的职业生涯。

在过去的2年时间里，小优同学每天早上都得跟随着西二旗汹涌的人流，挤上地铁，前往位于中关村善缘街的办公室。

北京干燥的气候，坚定不移上涨的房租和忙碌紧凑的节奏，都没有成为小优同学的障碍。在 UI设计这个圈子里，小优同学已经坚定不移地奋斗了4个年头，对于软件的使用早已熟稔，设计的趋势，各平台的规范也都了然于胸，产品的需求和客户的意见再也不会像刚入职的时候那样让她手忙脚乱。

是，在最近半年的工作当中，小优同学隐约感受到了一丝压力。参与的设计项目越多，越发清晰地感受到 UI设计师这个职业上方的玻璃天花板。不是不懂得排版，也不是画不好界面，更不是不清楚最新的效果如何实现，而是发现自己并不懂得 UI元素背后，真正的原理。

「我知道它们每个控件的名字，也知道它们大概应该在哪，可就是说不清楚为什么。」

这次的项目，小优同学的任务是要为一个老产品重新设计一整套的控制面板。这个面向企业用户的产品有着相对复杂的业务逻辑，随着甲方业务的快速变化，这个产品的界面和功能都要进行相应的调整。在重新设计控制面板这个事情上，小优同学开始发现自己的经验不够用了，并不是不会画，而是「不知道为什么」所给她造成的困扰，开始影响到了自己的 UI设计了。

已经是周五的下午4点，面对着依然半空着的 UI设计稿，小优同学焦躁地摁动着中性笔顶端的按钮，一下又一下，设计稿看样子是陷入僵局了。

沉思间，肩膀被人轻轻拍了一下，小优同学回头，看到了端着马克杯的盯着她的昱姐。

昱姐是公司的资深交互设计师，10多年前就已经在做着交互设计的活儿，设计 UI 称得上是大佬，对于产品也有着颇为独到的见解，目前负责公司内一个主要的产品的更新改版。

「看你纠结好几天了。碰到问题了？」昱姐的左手轻轻搓着马克杯的杯口边缘，笑着问到。

「是呀，有点无从下手，不知道为什么，也不知道哪里出了状况。」松开手中的笔，小优同学双手纠缠。

「不缺这一时半会儿，溜达着，聊聊呗。」昱姐说道，拍了下小优同学的肩膀，笑着转身带头走向门外。

「好哒~」小优同学意识大佬又要传授秘技了，赶紧跟上。

「功夫往往在诗外。你的疑惑和问题可能并不在这个项目里，答案往往是在其他的地方。」昱姐微微一笑。

美剧里的掌故

「看过美剧《疑犯追踪》么？」昱姐扫了一眼正在摸鱼看美剧的前端，下意识问道小优同学。

「当然看过！我喜欢根妹！宅总也很有意思！」聊到自己感兴趣的剧，工作上的不快似乎都被抚平了。

「宅总有个特别有意思的爱好，还记得么~」昱姐嘴角的弧度里面仿佛藏着什么秘密。

「是收藏什么电脑……」小优同学右手抚摸下巴，迟疑道。

「对，那个叫做施乐之星，最早有着图形化界面的电脑，诞生于上世纪70年代中期，之后的苹果和微软的操作系统界面也都是抄袭自这一产品，也算是一次伟大的抄袭吧。」昱姐盯着窗外，眼神中有一丝神往。

「最初的图形化界面的设计者当中，有人是信息工程学背景背景，有的会写程序，也有精通平面设计的设计师，有钻研行为学和心理学的学者，各有所长，从不同的领域汇集起来，一同创造更为优秀的软硬件，当然，还有UI。」

「如今显而易见的设计，在当时都是参考各个领域的知识，从0到1一点点创造和摸索出来的。最表层的图形界面，只是诸多领域的一个视觉交汇点，它的纵深维度，远远不止于此。」昱姐的表情有点高深莫测。

从电影到交互的维度

「你有看过4D电影嘛，小优同学？」昱姐的思维之飘忽，让小优同学有点猝不及防。

「诶，你说的是那种会跟着电影场景变化，椅子会跟着摇动或者震动，会喷水的那种4D电影么？」迟疑了一下，小优答道。

「对！其实这个东西可以帮你更好的理解你的 UI设计和交互。」昱姐喝了一口咖啡，继续说道：「你所看到的电影字幕和文本，都是一维的，而海报，电影中平铺的场景，就是二维的，这个不难理解。电影院借助3D眼镜和偏振光，让你感受到远近距离和物体的厚度，这就变成3D的了。那么4D指的是什么呢？对，是时空。」

「UI设计中，文本元素是一维的，常见的图标啊图片啊，UI控件啊，这些都是二维的元素。很多时候，对于 UI 的探讨还仅仅停留在这个层面上。UI界面中很多东西会模拟现实世界中的实体，比如带有光影的按钮，带有阴影的卡片，它们会有实体一样的质感，这是三维。可是，当一个 UI元素在动效的加持之下会运动，它身上就有了时间的属性。这就算是四维的了。真要说起来，这真得只能简单地归为 UI 的范畴么？我觉得，根子是在交互上。」「这让我想起两个关于苹果的掌故。一个有个年轻人去苹果面试，带着他亲手制作的一个小样给乔布斯看，他让底部的 Dock 中的图标随着光标的移动而出现缩放的动态效果，点击之后图标会灵活地弹跳，他因此而入职苹果，并且随后负责了 Mac系统中这一功能的开发。」

「这个我太熟悉了。」本身就是 Mac 用户的小优同学感叹道：「所以动效实际上是增加了时间维度的 UI元素对吧？」

「可以这么说，但是还不止。」昱姐说道：「通过合理的设计，你还能通过合理的设计感知到重量！」

「那是怎么实现的？！」小优同学瞪大了眼睛。

「这就是另外一个故事了。早在80年代，开发最早的 Macintosh 系统的时候，有位工程师就开发过一个特别有意思功能，当用户把文件拖到一个文件夹的时候，会根据文件大小，系统发出不一样大的声音，大文件放进去会发出更为沉重的声音，而小文件放进文件夹的时候，会在声音上作出更轻巧的回应，这样一来，用户就能感知到文件的大小重量了！」

「所以，UI设计的根源要往交互上找。但是仅仅了解交互的维度是不够的。这个时候该祭出乔帮主的名言了：」

「设计不只关乎外观和感觉，设计需要洞悉产品运作的原理。」

「这句话我听过！」小优同学开始对这句话有更深入的理解。

「对，交互设计根本上是关于人的科学，需要设计师了解人的心理和行为，也要明白事物运作的规律。懂得交互，就能够更好地将人和数字界面真正连接到一起。如今在设计行业当中，有许多职位都强调要懂得用户体验，而用户体验本质上也是关于交互，关于人的。从根源上掌握设计的脉络，UI设计师，UX设计师，产品设计师，产品经理，这些都只是头衔。」

「就是说，我要知其然，也要知其所以然才行！」小优同学高兴道~

设计要回归基础

「在70年代之前，电脑没有界面，靠的是小纸条来输入输出内容。在80年代到新世纪，图形化界面逐步占据主流，以鼠标和键盘为主的交互，而如今的我们，已经随着 iPhone 的诞生，手指触摸成为主要交互手段。 」

「这有什么问题吗？」小优同学听出昱姐似乎要抛出什么重要的论调。

「如今移动端交互是主流。对于许多00后而言，他们自出生之后就有 iPad 和大屏手机相伴，而从事 UI、交互、产品的从业者，入行的时候，iOS 和安卓已经是最主要的平台，甚至它们就是一切。想想看，你开始学习设计的时候，真的去追溯过 UI设计的根源么？更多的恐怕只是图形元素和界面控件之间的排列组合吧？」

「大概就是这个样子……」小优同学忍不住挠了挠头，不好意思地笑了。

「先进的平台赋予你更高远的视野，可是距离扎实的大地，就更远了。但是身为设计师，恰恰是需要回归基本，才能让设计走心又走肾。再高级的海报设计，都是从基本的平面构成开始的，功夫无非是一横一竖，好的 UI设计的基础不止是懂得软件的运用，还要懂得人的心理和行为，以及事物运作的规律，通常，我们常常简单称之为交互。」昱姐笑道。

流程的力量

「我们现在常说的用户体验设计，也是交互设计的一个部分。你想让你的 UI 更加优秀，自然也是希望 UI 的体验也足够好是吧？」

「我当然想要我的 UI 用户体验更好啦！所以我要怎么做？」小优同学觉得没带个小本子出来真是失策。

「一个合理的设计，通常不是简单的 UI 排列组合，这个已经说过了。按照现代数字产品设计的成熟流程，我们会划分出前后5个不同的层级，从前到后分别是战略层，范围层，结构层，框架层，表现层。UI设计师输出的界面应该算是最后面的表现层的产物，如果没有前面四层打好基础，自然就没法在最后输出好的设计啦。」昱姐看了下喝空的咖啡杯，将杯子顺手搁在窗台上。

「整个构建过程当中，交互设计师几乎是全程参与，贯穿始终。在产品立项初期，交互设计师需要协同产品经理、用研和公司高层，一同敲定战略层和范围层，也就是产品的方向和基本的功能特性，在用户研究等支撑信息的帮助下，协同产品经理，完成需求文档的构建。此后，确定目标用户，不断了解用户的特征、喜好、行为模式，转化需求为低保真原型，随后搭建信息架构，梳理产品流程，完成页面原型，随后协同 UI设计，完成高保真 UI 效果图。当然，这些你大概都是了解的。」昱姐如数家珍地说出了交互设计师的工作职能。