最近几个月都在忙乎自己的产品，活生生体验了一把需求-设计-前端开发集成式累死狗的节奏；但，自从离开学校后基本没怎么敲代码的半吊子选手，通过这次的自力更生，仿佛在黑暗中找到了光明，变得大彻大悟，牛的一比哈哈哈哈~
简单交代下事发背景，我这款产品的研发人员构成：就俩人，除了我还有一个iOS工程师，那么按照常识我们都知道，一款产品的上线需要经过「1.确定方向」-「2.具体需求分析与产出」-「3.产品设计」-「4.产品研发」-「5.市场推广和渠道投放」这些个环节（我分的颗粒度比较粗），才算是勉勉强强的一个合格的流程；所以因为工种原因，我把这些环节做了些许整理分配给我们俩，大致情况如下：
看上图能发现，其实我们在市场和渠道上需要大量的H5，比如：社群裂变landingpage / 官网 / 公众号SVG推文等等；但，问题来了，woc我们特么没有前端啊！万了！万了！芭比Q了个屁的了…
背景就是这样，于是我开始自己写吧（边写边查边百度复制），打算重新跟CSS / JS交个朋友…令人万万没想到的事，就在这个拧巴的过程中我通过 CSS 对视觉空间有了一些新的想法：
NO.1 盒子模型的三维化
你会发现其实这些看似摸不着头脑的问题背后的本质是很直接和明了的，空间太单薄，设计出来的东西也立不住，会有一种缥缈的感觉，也对应的画面不够丰富饱满；因为主要问题出在空间上，所以也是基于此我从源头开始来了个重新推导，结合CSS盒子模型把视觉结构重新塑造了一番：
他们的本质都是让画面各种元素关联起来，互相之间都有联系，从而凸显层级关系，三维盒子是这样，磨砂玻璃同样也是，这跟扁平的设计风格区别很大。说到这就不得不提一嘴历史，从过去到现在，我们反复在经历“写实”-“扁平”-“写实”-“扁平”的设计浪潮，2种风格在时代的冲击下不停迭代着，我们很难评价他们的好坏，但如果细琢磨也能发现两者的不同，从我的观点出发，写实是对现实的隐喻，ta强调关系（源于现实世界没有独立存在的个体），每一个物体都会处于某一个环境，形成一定的空间，产生一定的关系；扁平是对规则的抽象，ta强调约束，因为少了透视层级，所以需要在仅有的二维空间里尽可能的通过逻辑规则帮助画面统一和谐；可以预见的是，不管你是喜欢或讨厌，它们还是会此消彼长，永远循环着。
NO.2 微妙的视觉冲力
三维的盒子借助空间就很容易产生微妙的效果，比如下图这个例子，虽然终点是相同的画面，但起点不同使这个过程带了来大为不同的视觉冲力（gif实在是太拉垮了，again！）：
NO.3 参考/工具推荐
这里面强如apple没毛病，华米OV（华为/小米/oppo/vivo）等手机厂商也不赖，还有蔚小理（蔚来/小鹏/理想）等等新能源厂商，他们的产品详情页基本走在了趋势的前沿，对技术和设计也都具备很高的水平，比如其中我最喜欢蔚来的这个：
因为大小限制，截屏只是一小部分，建议铁子们去看一下完整版的页面，非常惊艳，也能更好的理解上文所说的“精神小盒”具体的含义，链接：https://www.nio.cn/ep9-experience，还有2款小工具提供给铁子们供大家使用：
第一款，浏览器CSS overview
第二款，VisBug
这款插件是Chrome开发者峰会上，Google推出的新开发工具，它简化了使用简单的点击式界面编辑网页的任务，更适合产品设计师使用，操作如下：
这款工具的应用意味着，页面初步开发完成之后，完全可以在一个简单的GUI完成所有的细节调整。开发者和设计师再也不用在浏览器和开发工具之间来回切换、调整、部署了。