我怀疑这种网页设计方式没几个人知道!
来自公众号:研习设
当我们仔细观察一个网页时,你就会发现很多网页是模块化的,就好像小时候拼搭的积木一样,在不改变整个形状的前提下,可以任意的更改里面的内容,让它有新的形态或者功能。这使得网页设计的灵活性大大的提高了,可以按照计划任意的增加删减或者更改模块,让整个网页最大限度的发挥出它的价值。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222155-c280bcff583a8e1.jpg)
前端工程师布拉德·弗罗斯特,在2013年,创造性地提出了一个问题,在化学上,物质都是由最小的元素慢慢组合形成的,那么网页设计是不是也会遵循这个原则呢?
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222156-6f8523ab848b235.jpg)
于是他就把目光锁定到了门捷列夫的元素周期表,他惊奇地发现,整个网页设计中的一切内容,都可以按照元素周期表的形式一一对应,从最小的元素原子对应网页中的文字,颜色,到这些元素相互组合形成的网页。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222157-1d4c82bb5c5b50b.jpg)
在这个想法的基础上,他构建出了一个属于自己的设计理论,即原子设计。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222157-7342267b6acba4f.jpg)
按照这个理论,整个网页设计的过程分为了五个环节,分别是原子、分子、组织、模板和页面。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222157-e0e50481f3917c2.jpg)
首先来看原子部分,以生活中水(H2O)来举例子,水是由氢原子和氧原子组成的。(化学知识来啦)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222158-46b35366a80b9c3.jpg)
而在网页设计中,原子部分则对应着网页中的最小元素。按钮,文本和颜色等等。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222158-343b822247efb91.jpg)
当原子相互结合则形成了新的形式水分子。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222159-19d072b4683643a.jpg)
设计中最小的元素,按钮文字颜色,互相结合在一起就形成一个模块。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222159-17d31b84525482e.jpg)
到了组织的部分,越来越多的水分子会汇集在一起,组成我们常见的一杯水。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222159-f52a5253251979f.jpg)
我们把原子部分的元素根据不同的要求重新进行拼搭,就可以得到不同类型的模块。就好像很多的水分子汇聚到一起形成了水一样。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222160-1556ff3e3571bb1.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222161-1a5a8039176f23e.jpg)
更多的水汇集成了湖泊,也就是模板这个部分。注意,这里不需要我们添加图片之类的内容,主要是为了减少干扰。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222161-fc81f7e22a7ec03.jpg)
把之前都已经做好的模块放在网页中,我们就得到了一个网页的基础形态的模板。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222161-8ee4700496f8ca3.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222162-d4499d26e349637.jpg)
湖泊汇集到了海洋的程度,也就是最后的页面环节了,这个部分添加图片形成一个设计精稿。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222162-aaf0bf8f3df6dd6.jpg)
这样我们一个网页中的页面就形成了。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222163-8bd5c4217a4cdb3.jpg)
原子设计的优势在于统一性、模块化、高效率和方便协作,是它最主要的优势。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222163-55a572810c5d909.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222164-3cf8ed480b235e1.jpg)
还是刚才那段文字,在原子部分就设置在了整个文字的规范。好处是让整个网页具有统一性。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222164-3939f7b6a2c359f.jpg)
这里只需要把我们已经设置规范的文字,添加在单元形上就可以了。这样整个网页中的每一个模块内的元素都是统一标准的。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222165-ee58603d1bf084c.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222165-e1cf22b44e74f5a.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222166-a8e470ce6044e14.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222166-b99d00716b2d299.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222167-bb3dd3fee61c2c0.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222167-49bd51b04c9f0ee.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222168-c023f13db28c9e2.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222168-439701d2009255d.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222169-3d43abce533689c.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222169-6aa41c54763529f.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222170-940c2b268a7f3d3.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222170-80640c1318abfc0.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222171-0ee756bf410dd8b.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222171-67cee383737850c.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222172-f28e55758c55203.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222172-85b49e3cf0183e0.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222173-169518f48c7931d.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222173-5891226473743e2.jpg)
当我们设计出来的模块越来越多时,这些模块就会形成了一个网页设计的资料库。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222173-f8f6274b83f6887.jpg)
团队的协作就会变得更加的高效,整个组员执行的都是统一的设计规范。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222174-f3e2b10171cdd7a.jpg)
反而如果没有一个合理的资料库,则会大大地降低小组内的协作效率。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222174-62e67bf443f4a58.jpg)
现在,已经大概地了解了原子设计的概念,它更注重的是整个网页设计中的系统的构建,从最开始原子部分的统一标准,一步一步的构建出一个完整的网页。
但是,仅仅这些只是理论上的内容,还不足以支持大家,可以像拼搭积木一样去完成一个网页设计,接下来更为细致的重新看一遍原子设计的内容,我们通过一部分的实例,来让大家更加明白原子设计的精髓,和网页设计中的常见的一些规范。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222174-2e55fafae221902.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222175-722650886061781.jpg)
首先是原子部分,这里主要讲一下按钮、图标、选框按钮和输入框这几个常见的元素。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222175-6b0e3239ba14c79.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222175-0e742d72119c965.jpg)
按钮,是一个网页中最常见的交互形式,分为实色按钮 、线框按钮和文字按钮,三种形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222176-661c243c340c7d5.jpg)
这三种按钮的重要程度,也是依次减少的,所以在重要的想要强调的信息下方,可以选择实色按钮,以此类推。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222177-739943c27b6b6be.jpg)
同时,按钮的形式又分为,圆角按钮和直角按钮。其中圆角按钮的圆角的弧度通常为4像素的倍数。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222177-60105c977450bc8.jpg)
在一个圆角的实色按钮中,文字首先要放置在按钮的正中心的位置。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222178-9d1865ff9ec7a9d.jpg)
而按钮的上下左右边距则存在一定的倍率关系,上下到文字的距离是10像素,左右是20像素,成两倍的倍率关系。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222178-d83e0efb6a841ac.jpg)
通常按钮的长度和宽度的设置倍数关系也就是2倍或者3倍。当然特殊尺寸的按钮不在讨论范围之内。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222178-d5430cdd28c3857.jpg)
除了纯文字的形式,添加了图标的部分,应该怎么考虑整个的按钮布局呢?同样,按钮内部的内容需要放置在正中心的位置,这里我们在原来按钮整体尺寸不变的情况下,让左右的边距减小,保持整个按钮的统一性。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222179-6dc2a10f945c069.jpg)
图标和文字之间的距离为8像素,主要是整个文字和图标的组合更加的紧密。这些细节要注意到。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222179-ec74cd3ffd52b18.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222179-42887a22d92f63f.jpg)
在网络中,这种类型的图标,通常表示着用户自己,在选择图标的过程中,不要给用户产生疑惑。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222180-214b486b952ea04.jpg)
在网页中我们绘制图标的时候,要注意一个基础的范围,也就是48x48像素,这是一个通用的图标设计的规范,它可以保证在各种情况下都可以有效的使用这个图标。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222180-a6ae75f549ef265.jpg)
网页中的图标放大的形式,也同样遵循着倍率关系,这里是一个四倍倍率关系的图标形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222181-65a2719fadc7bd3.jpg)
图标常见的倍率关系,也就是1:2:4的形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222182-cbaafa02ed2c5cc.jpg)
我们来看这两个图标,哪一个更适合当作网页中的图标进行使用。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222182-b80fe2fade54b3f.jpg)
这里我们就要记住了,检验它们哪个可以使用,就把它们缩小到48像素,识别度高的那个图标,就是适合使用的。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222183-730d850a2099a77.jpg)
所以这个图标更适合放置在网页中。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222183-ae667442c16652c.jpg)
在选择图标的时候一定要选择风格和颜色一致的图标,不要给用户产生不信任的感觉。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222184-dee1c945ed29872.jpg)
像这种图标,我们称之为通用符号,如果修改反而会给用户产生困惑,这个时候应当在保证统一性的基础上适当修改。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222184-092914f6f336947.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222185-55972915b4de12f.jpg)
复选框,顾名思义就是可以多做多选。大家看完课程以后答题的多选题部分,就是一个复选框直接的应用。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222186-3161cba40f3219e.jpg)
有多选就有单选,另一种形式就是单选框。这个标准规范可以参考按钮部分。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222187-2bb8998a3ba0f5a.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222187-deac16fc560a8e0.jpg)
作为网页中重要的收集信息的工具之一,输入框分为实色输入框和线框输入框。和按钮一样,重要程度也是依次减少的。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222187-abf5fedd76cd216.jpg)
输入框的组成部分,其中选择提示图标时,不要给用户带来额外的困惑。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222188-f2714bce5994a52.jpg)
原子的部分还有很多的内容,除去上面说的四个部分。还包括颜色,字体等等的内容,只要记住网页中不能再向下分割的元素,都属于原子这个范畴内。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222188-55cdf38cba6f2c3.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222189-28077f4d8bdcd1b.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222189-c8206fa9fa8b015.jpg)
最常见的组成部分,分别就是:标志、图标、字体、输入框、颜色和按钮。这里我们主要讲解一下图标、按钮和输入框这三个部分。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222190-40497522d38e034.jpg)
图标这里还是要重新强调一点,就是图标的统一性,搜索这里无法做到实色,我们就调整它变得协调。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222190-a87d8da5769a006.jpg)
在网页设计中,按钮存在的不同的状态,这也会决定按钮的形式上的不同。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222190-828239e445f311c.jpg)
一个按钮通常会有三个状态,正常状态,也就是未点击时的状态。点击状态,然后点击后按钮的反馈形式。还有无效状态。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222192-7e1dfa9b26a9e50.jpg)
这里我们来演示一遍,正常情况下,按钮没有点击,现在是线框按钮的状态,重要程度居中。鼠标点击后,按钮改变成为了实色按钮,重要程度提升。这就是一个常见的按钮切换的动效。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222193-d6a69cad9fe6a8f.jpg)
输入框,这里一定要设置提示文字,防止用户看不懂个别的图标,产生困惑。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222193-759be5f1bc7ea69.jpg)
现在我们根据原子的部分,设定好的标准,直接进行拼搭,就可以创造各种不同形式的页眉了,而这些小的元素,都是来自于前面的原子部分。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222194-0aaee23f9e0302a.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222194-ccf309d0e099c02.jpg)
这个部分我们有了前面的文字规范,按钮和图片 接下来做的就是拼搭在一起。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222195-b948f1f3fc48a30.jpg)
当我们设计出一个文字的组合形式,这个分子部分,就可以拼搭出各种不同类型的卡片形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222195-648add0a735e1f7.jpg)
左右组合的卡片形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222195-e3d526aa1575a06.jpg)
正方形的左右组合的卡片组合形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222196-bff5de0ef199058.jpg)
图片文字叠压类型。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222196-b8ddf45343790ce.jpg)
在我们的一个文字组不变的情况下,可以创造出各种类型的单元形,这也是原子设计的模块化的表现。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222197-11753b9124a95e9.jpg)
当我们选用了这个卡片以后,使用重复的方式,就可以得到网页中的一个模块了。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222197-09064f162446c2f.jpg)
通过更多的重复,还可以形成卡片瓷砖型的版式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222198-f95780725f54bdc.jpg)
通过上面我们可以得出,这个理论中整个设计过程是层层递进的。在原子部分,当我们设定好了字体和颜色的使用,按钮的形式和图标。到了分子部分,就是原子之间的相互组合,不论这个组合形式的变化性有多大,都可以在网页中保持一致。再向下进行也是以此类推的,这样我们的工作效率就会大大地提高。
可以说只需要把最基础的几种组合形式做好,剩下的就可以像拼搭积木一样设计出符合计划的不同形式的网页。后面的三个步骤,也同样是在原子和分子的基础上,进行拼搭完成的。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222198-9ace2fd1d635402.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222198-eb8161a3b41e143.jpg)
和前面一样,这里我已经做好了一个单元形,也就是分子的部分。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222199-214680b643df13d.jpg)
最简单的方式就是进行重复的手法,这个单元形就会变成一个组合。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222199-dc94dd65ef23243.jpg)
这里再将它和其他的元素进行组合,就可以形成一个模板,前面说过了,这个部分没有添加图片的就是模板阶段,这里呢,为了让大家更直观的看到。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222199-4802dd346930ce6.jpg)
添加图片后,是不是一个实际网页中的模块就完成了。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222200-0d048cde0b67dac.jpg)
主要设计好最基础的单元形,我们通过重复的手法,可以设计出非常多的形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222200-ae7f5e1e1000cea.jpg)
除了常见的横向展示的组合形式,还有着双排的组合形式。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222201-11ad26c58fb0567.jpg)
第三种形式同样是前面的原子和分子部分的重新组合,到了组织的这个阶段,是不是就有了搭积木的感觉了呢?
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222202-c3dea079c0d700f.jpg)
当我们把所有的已经做好的形式放置在资料库中,我们观察一下,整个的模块不论是哪种形式,统一性都是绝对的。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222202-6dda451662cc0bc.jpg)
其他的部分,我们都以此类推,制作出不同的形式,放置在资料库中。这样我们的积木的部分都一一成型了。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222202-5f10ff500bb6c3e.jpg)
从资料库中,选取这两个部分进行组合,就可以形成不同风格的网页类型。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222203-f4fe00bb926d4fe.jpg)
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222203-7828790ee130b49.jpg)
首先我们建立一个网页的尺寸,并且规定它的可视范围(蓝色部分)。注意网页中宽度通常为1920像素,长度则是根据我们的内容决定的,这里没有统一的尺寸。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222204-561a6bd7d35dfca.jpg)
从前面的资料库中,我们只需要挑选出合适的组织部分,替换上图片就可以形成一个完整的页面。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222205-48c8d64457c6de5.jpg)
整体模块的顺序都是可以任意的按照需求进行替换的,这也是模块化的体现。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222205-be6d2154fe56e9a.jpg)
模块替换并不会影响这个网页的观感。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222206-7cb97e64215b4db.jpg)
想要做展示图片为主的网页时,可以从资料库中选择大幅图片为主的模块形式,就可以形成一个新的网页了。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222206-f4d79dbc06c30f4.jpg)
剩下的事情就是,从资料库中选择出最适合模块就可以了,整个的过程就像搭积木一样。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222207-b5679aa245d855c.jpg)
今天学习了原子设计这个理论,我们发现整个网页设计的环节从最小的原子部分到页面部分,是层层相扣的。网页就是由这些小的元素慢慢累积出来的,就像是在拼搭一个积木的城堡。但是如果根基不牢靠的话,整个城堡都不会太牢靠。
所以就需要我们在原子和分子的部分多去下功夫,去完善整个网页的根基部分,做好每一个单元形,这样就可以通过不同的方法创造出各种不同形式的网页了。当然,这个过程也是需要我们不断地去学习和积累。今天的课程就到这里了,我们下期再见。
![](https://www.pphouqi.com/wp-content/uploads/2022/06/1655222207-2d3e200ec7c3354.jpg)