层级|假如用CSS来逆向推理视觉设计空间( 二 )

文章插图
他们的本质都是让画面各种元素关联起来，互相之间都有联系，从而凸显层级关系，三维盒子是这样，磨砂玻璃同样也是，这跟扁平的设计风格区别很大。说到这就不得不提一嘴历史，从过去到现在，我们反复在经历“写实”-“扁平”-“写实”-“扁平”的设计浪潮，2种风格在时代的冲击下不停迭代着，我们很难评价他们的好坏，但如果细琢磨也能发现两者的不同，从我的观点出发，写实是对现实的隐喻，ta强调关系（源于现实世界没有独立存在的个体），每一个物体都会处于某一个环境，形成一定的空间，产生一定的关系；扁平是对规则的抽象，ta强调约束，因为少了透视层级，所以需要在仅有的二维空间里尽可能的通过逻辑规则帮助画面统一和谐；可以预见的是，不管你是喜欢或讨厌，它们还是会此消彼长，永远循环着。
二、微妙的视觉冲力三维的盒子借助空间就很容易产生微妙的效果，比如下图这个例子，虽然终点是相同的画面，但起点不同使这个过程带了来大为不同的视觉冲力（gif实在是太拉垮了，again！）：

文章插图
所以如果你恰巧在做动态设计或者视频剪辑等工作的话，那么别单纯的把这当做一个视觉问题，本质还是信息与视觉神经的交互问题，还是以上面两个例子来说，他们分别给了观者“扑面而来”和“穿脑而过”的感觉，如果细品你会发现：前者是压迫和震撼，后者是意外和出奇。
另外，在静态的设计上也同样如此，我翻了下最近收到的作品集，也发现很多朋友为了显得项目厚实写了很多推导，这导致画面臃肿不堪，在面试官和信息的交互上并没有起到很好地作用，甚至增添了获取信息的成本，所以，排版尽量简洁，这无关美丑，只是让信息提取过程高效且舒服就好。
三、参考/工具推荐最后推荐个参考和几个web工具：我自己是个重度3C爱好者，所以闲着没事我就会去看看各大手机（硬件/汽车主机厂）厂商的官网，特别是手机和新能源汽车行业卷到死，年度旗舰感觉一年都能搞个3-5款，更别提频率接近每个月的新品发布会了，所以这些网站就成了我摄取灵感的最佳基地；
这里面强如apple没毛病，华米OV（华为/小米/oppo/vivo）等手机厂商也不赖，还有蔚小理（蔚来/小鹏/理想）等等新能源厂商，他们的产品详情页基本走在了趋势的前沿，对技术和设计也都具备很高的水平，比如其中我最喜欢蔚来的这个：

文章插图
因为大小限制，截屏只是一小部分，建议铁子们去看一下完整版的页面，非常惊艳，也能更好的理解上文所说的“精神小盒”具体的含义，链接：https://www.nio.cn/ep9-experience，还有2款小工具提供给铁子们供大家使用：
第一款，浏览器CSS overview这简直就是神器，可以在任意站点查看他们的颜色使用情况、字体使用情况，甚至能分析出是否符合wcag的可用性标准；我在最常用的两款浏览器上（Chrome / edge）都测试了一下，响应速度超快，通过自带的分析基本可以推导出每家企业的基础规划和应用，棒的一比~而且只需要非常简单的操作就可以解锁这神仙工具：

文章插图
第二款，VisBug这款插件是Chrome开发者峰会上，Google推出的新开发工具，它简化了使用简单的点击式界面编辑网页的任务，更适合产品设计师使用，操作如下：

文章插图
这款工具的应用意味着，页面初步开发完成之后，完全可以在一个简单的GUI完成所有的细节调整。开发者和设计师再也不用在浏览器和开发工具之间来回切换、调整、部署了。
四、总结一下不得不说，产品设计一直以来都是侧注重于规则和方法，比如设计组件、设计规范、转化方法、引流方法等等等等；但产品在视觉上因为无法使用方法，以至于权重或多或少的被降低了，这也涉及到一个概念——方法之所以称之为方法，具备一定的流程性和可复制性，所以这篇文章尽可能的把视觉总结归纳成现实可用的方法，希望对铁子们有那么一丁点的启发吧~
#专栏作家#负能量补给站，微信公众号：负能量补给站，人人都是产品经理专栏作家。专注设计观点输出和资源共享。
本文原创发布于人人都是产品经理，未经许可，禁止转载