画面不够饱满？学会用光影让你的设计脱颖而出！

元旦过后，新的一波工作又要开始了，我在开始准备新一轮汇报材料的时候突然想到了一个问题，不知道铁子们在往年参加设计评审的时候，有没有总被老板 diss 设计稿里“太空了” “不够饱满” 这些个问题呢？ 我猜测应该 99%的铁子经历过，我也不例外，从校招进到第一家公司就开始被植入页面需要利用好每一像素的理念，搞得像北京房价一样寸土寸金，生怕被浪费了；思前想后为了大家不重蹈我的覆辙，所以新年的第一篇，咱一起来聊聊排版的问题： 如果你看过我过往的文章，也许会对我的排版多少有点印象，夸张的大字，极强的对比，还有一些微妙的层级关系。

 往期回顾： 不知道如何写年终总结？收下这份速成攻略（附实用模板）想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…按我做人的 30 年经验来说，一般“正常人”是没有日报 / 周报 / 月报的习惯（即使有也多半是被强制未必认真对待）那么此时应该是慌乱无措，怪自己平时不积累，犹如明天就要上考场的学生为没记知识点而苦恼。

 面试官：请挑一个设计案例重点介绍下……面试的时候，你一定遇到过类似的场景，对面的那个人（也可能是屏幕里）脸色铁青的说了一句：“请挑一个案例重点介绍下…”想必此时你心中一慌，拍了拍脑袋随意说出了些日后再也不敢回忆的话，心里期盼着这一切快点过去，如果能侥幸过关就回家烧香拜佛… 看过60位设计师作品集后，我总结了这些加分技巧距离2021年的金三银四黄金求职季不到100天了，所以关于作品集这个化石级的老话题，我还是得絮叨絮叨。从去年开始组建团队开始，面试了接近 60 位设计师朋友，有刚毕业的 P4 级别，也有工作 10 年有余的 P7 级别，基本覆盖了当下求职的主要人群。 坦诚的讲，我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格；

 1. 瑞士风格 整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在；这种一丝不苟，传达准确的风格，即所谓瑞士国际主义风格。简单的说，由于 Swiss Design 这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此，又被称为国际主义平面设计风格； 简单的说，瑞士的这种设计风格典型的代表就是我们看到的杂志，其中有 3 个特点：讲究网格 / 非常理智的克制颜色的使用 / 层级关系；有趣的是，审美和潮流是循环的，随着时代的发展，越来越多的 app 开始重新挖掘出来瑞士风格并加以使用，比如我们 iOS 系统自带的应用们，Spotify： 年少的时候，我经常看着这些个 app 会不禁的问，为什么在没有一张图片的情况下还能如此好看？这些年终于明白了前人良苦用心：文字是内容，同样也是构成；是信息，同样也是装饰；简单可以理解为，不管在平面还是网页亦或者是 UI 界面，在没有可用的装饰下，信息本身要承担起装饰和传达的双重功能，这就是瑞士风格的核心本质。

 2. 拟物风格  iOS 是拟物的典型代表，网上对于这块的讲解已经过于饱和了，我也没必要赘述；那么这一趴，来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳，潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已… 但当我打开下图这个页面的时候，我意识到我对拟物的理解还是浅薄了，第一次被光影的层次震撼到： 通过光影塑造了一个三维空间，让整个画面丰富饱满，也打破了我幼稚的设计观，PS.不管锤子科技现在如何，我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献，respect！ 优设专访！

锤子科技设计总监罗子雄的全能自学之路编者按：从锤子科技设计总监到登上TEDx的舞台发表《如何成为一名优秀设计师》的演讲，罗子雄一直是设计行业为人瞩目的焦点。在没采访他之前，编辑远远没想到，他的经历如此丰富浩荡。 毫无保留的说，我的设计就是二者的融合，以 层次对比 作为核心理念。

 啰嗦了半天，赶紧进入正题；如果你是一名产品体验设计师，一定听说过 “奥卡姆剃刀” ，这个定律通常用在交互链路的设计上（意思就是在用户路径中没必要的步骤，省了就完事了），“如无必要，勿增实体” 即简单有效原理； 同样，在嘈杂的视觉结构里，画面也需要奥卡姆剃刀，当你在对画面的饱和上困扰不已，并急于找到一些背景和纹理填充的时候，我建议你先冷静一下…因为页面的空虚未必是需要实体化的东西来填充的；上文有说过以 “层次对比” 作为核心理念出发，要区别于平面设计，营造一个立体空间，所以先理一下画面结构： 通常来讲，如果想要不平，把二维空间转化成三维空间是必要的一步，需要在 Z 轴上下功夫；如果你恰巧也是一名摄影爱好者，可以想象下照相机的焦距和景深，工作原理是相同的，需要 前景 / 主体和背景 三个层次；当然，虚实的对比对信息的呈现和层次的拉开是极其重要的，这里需要通过景深来控制效果，你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到： 另外，空间的感觉想要被突显，那么“光影和空气”的价值就可以无限放大了，按照如上所说的结构，把内容和自然物质摆进去就好了，甚至可以做到举一反三（比如不同颜色的氛围，我就不展开了）： 整个 case 下来，你会发现用光来聚焦在信息上，自然而然就形成了我们说所得 “信息优先级”；有点时候空气和光影的饱满程度超乎你的想象，这种自然存在的物质可以很好的帮助画面分层，以达到填充的效果，并不是一定要依赖于实体化的装饰。

 对了，如果你跟我一样闲着没事干的话，借用 keynote 的动画效果做一个吊炸天的动效，一定可以成为汇报场上最靓的崽（注意：视频有音乐）！ keynote 素材和视频可在开头/文末下载 本来不打算再开一个章节说这个，但还是觉着很有必要再说下（我好纠结），作为 PPT 来讲，ta 的主要用途分为两种：其一是给人看的，其二是给人讲的；不管是哪种，尽可能的简化文字，是对输入者关爱； 以上图为例（实名 diss 自己的作品），坦诚的讲左边的部分大多数观者是不会有心思来看的，按照视觉系统的处理，这部分就会被当成一个“面”而被忽略掉，这种情况下右边显得有力很多，也能帮助观者聚焦信息，所以还是那句话，能不写的就别写，能少些的别多写，保持信息的密度也是设计师必要的职责之一。

 总结一下 想问一个问题，铁子们觉着 UI 的本质或者作用是什么？从我个人的角度来讲，UI 设计的本质就是对信息的整理归类和编排，没有什么比信息更重要，如果贸然为了饱满加入一些装饰元素，很有可能是本末倒置，得不偿失。这就像喝酒一样，喝醉很容易，但微醺的感觉才是最棒的，希望你能有个好心情迎接美好的一年～