最近几个月都在忙乎自己的产品，活生生体验了一把需求-设计-前端开拓集成式累去世狗的节奏；但，自从离开学校后基本没怎么敲代码的半吊子选手，通过这次的独立重生，仿佛在阴郁中找到了光明，变得大彻大悟，牛的一比哈哈哈哈~
大略交代下事发背景，我这款产品的研发职员构成：就俩人，除了我还有一个iOS工程师，那么按照知识我们都知道，一款产品的上线须要经由「1.确定方向」-「2.详细需求剖析与产出」-「3.产品设计」-「4.产品研发」-「5.市场推广和渠道投放」这些个环节（我分的颗粒度比较粗），才算是勉勉强强的一个合格的流程；以是由于工种缘故原由，我把这些环节做了些许整理分配给我们俩，大致情形如下：
看上图能创造，实在我们在市场和渠道上须要大量的H5，比如：社群裂变landingpage / 官网 / 公众年夜众号SVG推文等等；但，问题来了，woc我们特么没有前端啊！
万了！
万了！
芭比Q了个屁的了…
在这种情形下，鄙人寻思了半天想出两个结局，要么冷启动阶段不做宣发，让这个襁褓中的产品自生自灭（这弗成，舍不得）；要么自己coding，每晚拜四阿哥，祈求他干掉每一个bug！
换的一方安然，顺利渡过冷启动阶段（就这个了！
）；
背景便是这样，于是我开始自己写吧（边写边查边百度复制），打算重新跟CSS / JS交个朋友…令人切切没想到的事，就在这个拧巴的过程中我通过 CSS 对视觉空间有了一些新的想法：
一、盒子模型的三维化
说个大家都懂但又绕不过去的观点，网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)，CSS都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，以是叫它盒子模型，CSS盒子模型便是在网页设计中常常用到的 CSS 技能所利用的一种思维模型：
虽然所有HTML元素可以看作盒子，但在日常运用时，按照过往的认知，我们常日只对单一的某个元素授予盒子，给ta添加干系属性，总体上这种做法确实可以让一个物体更充足丰富，也由于仅仅是对个体的属性，也便是说纵然在xy轴的二维空间上玩出花来，也无法帮助全体画面里的所有元素形成相对舒适的关系。
举个例子?来解释下，方便理解，下图是我孵化的新产品产品欢迎页，当设计完成后，看了半天生出一种“平平无奇”的鸡肋感；坦诚的讲，这样的画面谈不上多好，中规中矩罢了，于是反复的不雅观摩，逐渐创造了问题，造成这种高不成低不就的缘故原由有二：缺陷东西和少点层次…
你会创造实在这些看似摸不着头脑的问题背后的实质是很直接和明了的，空间太软弱，设计出来的东西也立不住，会有一种缥缈的觉得，也对应的画面不足丰富饱满；由于紧张问题出在空间上，以是也是基于此我从源头开始来了个重新推导，结合CSS盒子模型把视觉构造重新塑造了一番：
然后，我随意画了几个长方形，看起来像碎纸屑的样子，再试着把页面的元素按照总结的方法套进去，效果如下（gif实在是太拉垮了）：
嗯，总体觉得舒畅多了，该有的也有了，还不戳~如果你细品，就会创造这个理论构建了一个半自动的事情流，只须要把特定的几个元素更换下，调节部分属性参数，就可以复制出一系列的视觉方案；按照这个方法，我做了一系列的拓展方便未来做产品运营可以用的上：
要解释的是，办理层级问题的方法有很多，立体化的盒子是办法，通过改变材料或质地也是一种办法，比如我们现在及其盛行的磨砂玻璃：
·要解释的是，办理层级问题的方法有很多，立体化的盒子是办法，通过改变材料或质地也是一种办法，比如我们现在及其盛行的磨砂玻璃：
他们的实质都是让画面各种元素关联起来，相互之间都有联系，从而凸显层级关系，三维盒子是这样，磨砂玻璃同样也是，这跟扁平的设计风格差异很大。说到这就不得不提一嘴历史，从过去到现在，我们反复在经历“写实”-“扁平”-“写实”-“扁平”的设计浪潮，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完成所有的细节调度。开拓者和设计师再也不用在浏览器和开拓工具之间来回切换、调度、支配了。
四、总结一下
不得不说，产品设计一贯以来都是着重视于规则和方法，比如设计组件、设计规范、转化方法、引流方法等等等等；但产品在视觉上由于无法利用方法，以至于权重或多或少的被降落了，这也涉及到一个观点——方法之以是称之为方法，具备一定的流程性和可复制性，以是这篇文章尽可能的把视觉总结归纳成现实可用的方法，希望对铁子们有那么一丁点的启示吧~
#专栏作家#
负能量补给站，微信"大众号：负能量补给站，大家都是产品经理专栏作家。专注设计不雅观点输出和资源共享。
本文原创发布于大家都是产品经理，未经容许，禁止转载
题图来自 Unsplash，基于 CC0 协议
