欢迎回到这一期的围绕设计者作开发!如果您错过了上一篇 请务必读一下。在本文中我会论述一下我对某一学派理念的感悟,该理念可以说能够消除开发与设计之间的隔阂。
“原子式设计”——您需要对此流行语或关键字亦或新概念非常之熟悉。其寓意为:
“…一套生成设计体系的方法学。” – Brad Frost
这对我来说一项突破。作为一个开发人员,我知道程序逻辑是由最小的概念如变量、数组、函数、类等建立起来的。设计者也是如此,我能通过选择互补颜色、字体、正负空间与形状等构建某些复杂的图形。这种拿人类自身存在形态所作的寓喻还真是很大气。
这将 会出一本书
原子式设计的核心理念是:原子合成分子,分子合成有机体,有机体可以是复杂的或简单的——一个细菌或是当前正坐在电脑前阐述该概念的作者本人。我们都是原子式设计的杰作。
此方法论能非常贴切的表达物联网或移动开发等 web 体验的特性。因为它提供了一个通过固化简单元素而创建复杂事物的架构。毕竟 简单是最终极的精密,难道不是吗?
是系统,而不是页面
原子式设计是一套体系,此体系与多方面共同协作从而创造独一无二的事物。不管您是设计者还是开发者,都能够理解该体系,且由此而能让两者的工作都变得更容易维护、变更以及升级。更加别提在万一有团队核心设计或开发成员需要替换或离队的情况下,它还能够减轻压力与冲击。
这是一个快速概览:
原子单元
原子单元是基本的构建元件;是一个在保持功能的前提下不能再被拆分的实体。它们可以是 HTML标签如 <p>、<label>、<input>、<span>。
原子单元也可用来意指调色板或字体等。然而有一点需要注意,那就是原子单元能够不需要依赖于上下文而自我抽离。一个定义良好的原子单元才能生成结构良好的分子体。
分子体
分子体是原子单元的排列与组合,是设计体系中的骨干核心。一个分子体可以是导航栏或搜索表单,又或是如由一个 <input>、 一个 <label> 和 一个 <button> 原子单元组成的实体。当然您如果愿意,还可以再往里添加,从而创建出复杂的分子体。
有机体
一个有机体能够通过分子体的组合再继续往上构建。网站的整个头部可以看作是一个有机体。从其基本架构上讲,创建一个复杂的有机体涉及到对原子单元与分子体的独特布局。网站的页脚区也算是一个有机体。如果往网站内容上找,WooCommerce模板可以认为是一个有机体——它使用不同的内容重复着相同的分子体,甚至是用不同的值重复相同的原子单元。
模板
虽然此层面与 Brad 建立的物理形态类比确实没有多大关系,但是模板可用于或重用于显示有机体序列。到了此处,布局显得尤为重要。人类由一个单细胞开始,然后长成一个胎盘,然后是一个成形的婴儿,然后是儿童、少年、青年,然后当达到全盛期时我们停止类比。全盛期模板是一个对有机体、分子体和原子单元的赏心悦目的语义排列。从本质上来讲,这就是我们长期开发使用的线框图。
页面
当一个模板达到全盛时,我们用图像、内容和方案等将其实例化便能得到一个页面。在进行正式编码前,此页面还可能会被放到类似 InVision 的工具软件中进行基础性的用户测试。
结论
这里给大家留下一些我的最终见解。开发者与设计者之间的关系没有所谓正确 的处理方式。创建一个 web 体验,不管它是网站、平台、网络、SaaS(软件即服务) 还是 PaaS(平台即服务),都必须结合开发者与设计者共同的天赋与洞察。无论哪一方离开另一方都是无法生存的。因而,在任何项目中两者都是缺一不可的。我希望这个系列结束后大家能够从更加清晰的角度来理解我所要表达的内容,它也许会让您在如何才能更加默契与队友协作的问题上产生新的灵感。
我还需要申明一下,虽说这个系列是专注于讲设计者与开发者的,但这并不表示我对各位内容编辑或文案很不屑。想要创造绝佳的 web 体验你们的工作同样非常重要。
现在您对原子式设计已经有了认识,我们就可以去充分了解它是如何应用到设计与开发当中的了。
在接下来的文章中我们将深入探讨网站前、后端各自的世界。如果您是设计者,甚或是入门级开发者,后面两篇将帮助您获取必备的基础知识。如果您来自设计界,甚或印刷界,而且想要转向开发,我将要阐述的概念会帮助您缩小从设计向开发转变所产生的意识理解鸿沟。





