![c8751f38007e25fc35230a94c2fff721.gif](https://i-blog.csdnimg.cn/blog_migrate/65e36146e5b1bc0f18c517c992526fe2.gif)
研习设订阅号
设计干货 杜绝注水
![5cebcdba65b1cd8a97ae3a3e7261ecdd.gif](https://i-blog.csdnimg.cn/blog_migrate/f182c393e2af689cbad39ce199e781e6.gif)
戳一下看视频版
![5cebcdba65b1cd8a97ae3a3e7261ecdd.gif](https://i-blog.csdnimg.cn/blog_migrate/f182c393e2af689cbad39ce199e781e6.gif)
![6782b77e8487043e8cbf268ac5396e67.png](https://i-blog.csdnimg.cn/blog_migrate/477080a1f89e03e23bb6c08ed149c6f4.jpeg)
![05791d7768962cb326bc3f36871eb1e0.png](https://i-blog.csdnimg.cn/blog_migrate/a79289c5a0fa91100f429a24465b05ae.jpeg)
大家好,这是网页设计系列课程的第四期,前面讲解了网页的种类,以及用户的思维都有哪一些,今天我们进一步讲解如何系统性的设计一个网页。
当我们仔细观察一个网页时,你就会发现很多网页是模块化的,就好像小时候拼搭的积木一样,在不改变整个形状的前提下,可以任意的更改里面的内容,让它有新的形态或者功能。这使得网页设计的灵活性大大的提高了,可以按照计划任意的增加删减或者更改模块,让整个网页最大限度的发挥出它的价值。
![7ce3490c01ae7969236111626874dda2.png](https://i-blog.csdnimg.cn/blog_migrate/51595ce55c81cddd804884aa72562692.png)
前端工程师布拉德·弗罗斯特,在2013年,创造性的提出了一个问题,在化学上,物质都由最小的元素慢慢组合形成的,那么网页设计是不是也会遵循这个原则呢?
![16aded93837d5cfe4dcd2f39ebd4022c.png](https://i-blog.csdnimg.cn/blog_migrate/86a1664b8adf923e415d0c87bc3082f1.png)
于是他就把目光锁定到了门捷列夫的元素周期表,他惊奇的发现,整个网页设计中的一切内容,都可以按照元素周期表的形式一一对应,从最小的元素原子对应网页中的文字,颜色,到这些元素相互组合形成的网页。
![fe407b9d04e06686ea70081df5782711.png](https://i-blog.csdnimg.cn/blog_migrate/65b7471efec3a9940e646e6fc306dcc8.png)
在这个想法的基础上,他构建出了一个属于自己的设计理论,即原子设计。
![fedbe99c2e0f61a662aae2f644061fdb.png](https://i-blog.csdnimg.cn/blog_migrate/4fa9ad1ac613e86c75a4964b8879f2f2.png)
按照这个理论,整个网页设计的过程分为了五个环节,分别是原子、分子、组织、模板和页面。
![18c565b1d4d03a34f43ef1e1fb9b6301.png](https://i-blog.csdnimg.cn/blog_migrate/824e8b5ff942101e2925c7454f17de85.png)
首先来看原子部分,以生活中水(H2O)来举例子,水是由氢原子和氧原子组成的。(化学知识来啦)
![875ae169e686a74cb34477abdef8c6ea.png](https://i-blog.csdnimg.cn/blog_migrate/9def007a2c6b7055e376a58b04df62ae.png)
而在网页设计中,原子部分则对应着网页中的最小元素。按钮,文本和颜色等等。
![88355752aeb0581aee9e3ccb8114c04f.png](https://i-blog.csdnimg.cn/blog_migrate/ee8de7bb23fd42674db8f07aeb9be6fb.png)
当原子相互结合则形成了新的形式水分子。
![416dbc9678566ee9050385fe5606a0c5.gif](https://i-blog.csdnimg.cn/blog_migrate/119e9eb809362b5711bbba90d717c29d.gif)
设计中最小的元素,按钮文字颜色,互相结合在一起就形成一个模块。
![f63b40d1180fc8b4fbebd6f85eb9fc9a.gif](https://i-blog.csdnimg.cn/blog_migrate/3d6079b4e9a7f57df496e5213f960e45.gif)
到了组织的部分,越来越多的水分子会汇集在一起,组成我们常见的一杯水。
![2e4f53ef9223e952d663b5228fedb858.png](https://i-blog.csdnimg.cn/blog_migrate/5063776d5acaaade8da43875147b16df.png)
我们把原子部分的元素根据不同的要求重新进行拼搭,就可以得到不同类型的模块。就好像很多的水分子汇聚到一起形成了水一样。
![173eb867fe1566943c48db7a78bbaf5f.png](https://i-blog.csdnimg.cn/blog_migrate/eb21447ea014631fa26668df9bb8920e.jpeg)
![203642b3ae401ad00cbd012236fc6752.png](https://i-blog.csdnimg.cn/blog_migrate/5f096dd2aba54f83b39e5e1a0ca1afd1.png)
更多的水汇集成了湖泊,也就是模板这个部分。注意,这里不需要我们添加图片之类的内容,主要是为了减少干扰。
![2aac915d0ee5fd78d0ae79c7afb425ec.gif](https://i-blog.csdnimg.cn/blog_migrate/9be7e1b37fea4a808ddde6bc53426f53.gif)
把之前都已经做好的模块放在网页中,我们就得到了一个网页的基础形态的模板。
![05c60deea634b7b3e6a10f4718275d93.png](https://i-blog.csdnimg.cn/blog_migrate/e7f8a1ef26f48679e84bd4b56beb399e.jpeg)
![217815908ac85047a0c06e994720dd40.png](https://i-blog.csdnimg.cn/blog_migrate/e0f01fe873fa71a47a4e2f6fd8e60ecc.png)
湖泊汇集到了海洋的程度,也就是最后的页面环节了,这个部分添加图片形成一个设计精稿。
![59fef99737f990e90ba246d496383893.gif](https://i-blog.csdnimg.cn/blog_migrate/6cb64506db3cf4d17385633894ed509b.gif)
这样我们一个网页中的页面就形成了。
![af35ff76413604bc45f67c7d154e6428.png](https://i-blog.csdnimg.cn/blog_migrate/3e1de093e8185dfb334f8cba326e0486.png)
原子设计的优势在于统一性、模块化、高效率和方便协作,是它最主要的优势。
![697629e912bb8c886f03844d4688fc93.png](https://i-blog.csdnimg.cn/blog_migrate/b5ade00f15d5e7461c6c8df2237b51d2.png)
![1a0d006c04eaa285d3c439229dfac57e.gif](https://i-blog.csdnimg.cn/blog_migrate/e1a2769be3834c30b1581808e8db9dc6.gif)
还是刚才那段文字,在原子部分就设置在了整个文字的规范。好处是让整个网页具有统一性。
![69c59bd52d9119290dcfac86f9fd8754.gif](https://i-blog.csdnimg.cn/blog_migrate/7abbc48ee39e6e6357ac7fc9df536515.gif)
这里只需要把我们已经设置规范的文字,添加在单元形上就可以了。这样整个网页中的每一个模块内的元素都是统一标准的。
![0b5c2279021009eef2b9a95e04602011.png](https://i-blog.csdnimg.cn/blog_migrate/23ad1d0589389bddf1b723101fc9dad6.png)
![a274f000e781bd654e7d05a82289a100.png](https://i-blog.csdnimg.cn/blog_migrate/9a59cd18865a6c0bd66f1e13a614c0de.png)
![c5c7fabf2dbca435abe6c87c3649dd1b.gif](https://i-blog.csdnimg.cn/blog_migrate/19a3825db5ba6c76e5efe58797de15fb.gif)
![9685587e9a28a461b6d64b9fcbf24a36.png](https://i-blog.csdnimg.cn/blog_migrate/211e70576d66bd0ed6af6b7d0ca4f98a.png)
![1853727d67d509383d459bcbe5155040.png](https://i-blog.csdnimg.cn/blog_migrate/e1f9bc8c1ea3f5dc985f26bc144a04ea.png)
![8c7a49130afb3ea4e0fdd9af75e5800a.png](https://i-blog.csdnimg.cn/blog_migrate/8c7de807a6ea8ce1936aff798018385c.png)
![61b67b746054ed037930b8640b819ed2.png](https://i-blog.csdnimg.cn/blog_migrate/5b6c560c939df2e9fd8ded2fca9caf10.png)
![b4baac2035e5a7f83de00a19b4010a2f.png](https://i-blog.csdnimg.cn/blog_migrate/399d84e78fce49fe71d035f1b16fca47.png)
![824244a19e53e81de6a27548e7ff6463.png](https://i-blog.csdnimg.cn/blog_migrate/40f4e1244e825bc2e69daa7a386ba5f2.png)
![2d372a2469e18dea544abe9b3cca432e.png](https://i-blog.csdnimg.cn/blog_migrate/2c8f52fbf74397f758165653b9450841.png)
![eceb059bdde2f1dbc95f2448b6e99ef2.gif](https://i-blog.csdnimg.cn/blog_migrate/e4c5eaf3146b16f69c5c2427a2b36514.gif)
![976d2537e876dd6805ac848587a2c188.png](https://i-blog.csdnimg.cn/blog_migrate/9c7efd28f85e41dd171eb7a9fb2173ab.png)
![ebd54efde3e77f86f971e1d4b760d642.gif](https://i-blog.csdnimg.cn/blog_migrate/670aed84f71877df887d92e903734094.gif)
![7de23e5127f9cd9dd127ef5622694a64.png](https://i-blog.csdnimg.cn/blog_migrate/295b3497e8b9d2380e3a8e6dab011aee.png)
![cc6eef0080a69a8f3e620eeafbcaf987.gif](https://i-blog.csdnimg.cn/blog_migrate/3946767e388df20d871e4d41e686e6ae.gif)
![ce84fbd6d5a2a0be9e825861d9bf480d.png](https://i-blog.csdnimg.cn/blog_migrate/524059299590578360c33bfd246c1af7.png)
![088e2573f0b962f797dc01cf69abb15c.gif](https://i-blog.csdnimg.cn/blog_migrate/2f82b12352fcd08de6339e54c0d7b75a.gif)
当我们的设计出来的模块越来越多时,这些模块就会形成了一个网页设计的资料库。
![11177bdfdec3521c0d82e06845aad567.png](https://i-blog.csdnimg.cn/blog_migrate/0798c6b1c842725ff638948e428b4921.png)
团队的协作就会变的更加的高效,整个组员执行的都是统一的设计规范。
![3acd0c3de03966751625e56ff1a01e38.png](https://i-blog.csdnimg.cn/blog_migrate/c703792fb6a3d99159394f3d668119d9.png)
反而如果没有一个合理的资料库,则会大大的降低小组内的协作效率。
![125abe0a0135decc8af1f6ec7b418747.png](https://i-blog.csdnimg.cn/blog_migrate/b393498d731531ba36152f65377e6983.png)
现在,已经大概的了解了原子设计的概念,它更注重的是整个网页设计中的系统的构建,从最开始原子部分的统一标准,一步一步的构建出一个完整的网页。
但是,仅仅这些只是理论上的内容,还不足够能支持大家,可以像拼搭积木一样去完成一个网页设计,接下来更为细致的重新看一遍原子设计的内容,我们通过一部分的实例,来让大家更加明白原子设计的精髓,和网页设计中的常见的一些规范。
![c2170ae6f5538be8e60920f79299332c.png](https://i-blog.csdnimg.cn/blog_migrate/cec1fcaf79264e3e058233f33062eb2e.png)
![ecfe42c0961f3c1bbe1cb69e66258df4.png](https://i-blog.csdnimg.cn/blog_migrate/a2989891c70d5d0956e4c3b89a1d6d9d.png)
首先是原子部分,这里主要讲一下按钮、图标、选框按钮和输入框这几个常见的元素。
![e51c45c46c4bf0e905809e75bb16dcae.png](https://i-blog.csdnimg.cn/blog_migrate/3acbc140185841e1008a3c7ba07e6785.png)
![d22e19097aa0ad58f6f5b4ea41540922.png](https://i-blog.csdnimg.cn/blog_migrate/5617d85d1ab9cfdcc36c13b714dd6039.png)
按钮,是一个网页中最常见的交互形式,分为实色按钮 、线框按钮和文字按钮,三种形式。
![39006ebae4b93816b92e8a460adff071.gif](https://i-blog.csdnimg.cn/blog_migrate/2a62d8c71b3f98917b3427e955219c13.gif)
这三种按钮的重要程度,也是依次减少的,所以在重要的想要强调的信息下方,可以选择实色按钮,以此类推。
![d0b7423b34dc8c26ba4b7aa961a9e8a4.gif](https://i-blog.csdnimg.cn/blog_migrate/db2fee0b09ec227567f019f9bcbe22e7.gif)
同时,按钮的形式又分为,圆角按钮和直角按钮。其中圆角按钮的圆角的弧度通常为4像素的倍数。
![db90911a2bf89af63dfe59bf3f227246.gif](https://i-blog.csdnimg.cn/blog_migrate/7cb6c17209a024b45f1fefd963997c87.gif)
在一个圆角的实色按钮中,文字首先要放置在按钮的正中心的位置。
![eeae3f9ec14428ef0b66db87e1d5c6b0.png](https://i-blog.csdnimg.cn/blog_migrate/6b0bd4c0242e2ff05bec668b1d6d77b1.png)
而按钮的上下左右边距则存在一定的倍率关系,上下到文字的距离是10像素,左右是20像素,成两倍的倍率关系。
![085b7e76299155815994e906fe78eb5a.png](https://i-blog.csdnimg.cn/blog_migrate/4d386dfe23320caae33eb47d64c6bd8b.png)
通常按钮的长度和宽度的设置倍数关系也就是2倍或者3倍。当然特殊尺寸的按钮不在讨论之内。
![23c6f947d48a27a13bca0fe7febcc5b4.gif](https://i-blog.csdnimg.cn/blog_migrate/efe655b15a377a19cd8181fab1f352c2.gif)
除了纯文字的形式,添加了图标的部分,应该怎么考虑整个的按钮布局呢?同样,按钮内部的内容需要放置在正中心的位置,这里我们在原来按钮整体尺寸不变的情况下,让左右的边距减小,保持整个按钮的统一性。
![0c03f93d4e1a9daa554137dee3306781.png](https://i-blog.csdnimg.cn/blog_migrate/6c15c197dfcbdd680d0dd1efcc291aab.png)
图标和文字之间的距离为8像素,主要是整个文字和图标的组合更加的紧密。这些细节要注意到。
![a6baf962efd0190bc189368048c82ddb.png](https://i-blog.csdnimg.cn/blog_migrate/fcde8989f3e8b8c04857ded09aae45fe.png)
![5e18bbe7d15ca7dcf6f72b0fc26a4ad9.png](https://i-blog.csdnimg.cn/blog_migrate/a75d4525d17942805a3164853d15b5c6.png)
在网中,这种类型的图标,通常表示着用户自己,在选择图标的过程中,不要给用户产生疑惑。
![180cacc54b73140e896d2c9e0598f9a8.gif](https://i-blog.csdnimg.cn/blog_migrate/c6b337f372cbfdcffca6eb912b24eee3.gif)
在网页中我们绘制图标的时候,要注意一个基础的范围,也就是48x48像素,这是一个通用的图标设计的规范,它可以保证在各种情况下都可以有效的使用这个图标。
![1a3fc98d00f0f434a756f58d7ebe7a14.gif](https://i-blog.csdnimg.cn/blog_migrate/5993e086c86190918b44505c07157081.gif)
网页中的图标放大的形式,也同样遵循着倍率关系,这里是一个四倍倍率关系的图标形式。
![10bb1bc29fdc6c6620571dc2c3b11d31.png](https://i-blog.csdnimg.cn/blog_migrate/67d9c2530ac3d2b6e9f4eb05b1fcb0ca.png)
图标常见的倍率关系,也就是1:2:4的形式。
![7a9e93ce090485298b0b6de883917d20.png](https://i-blog.csdnimg.cn/blog_migrate/a94b6b064bb41160e117454449a829c1.png)
我们来看这两个图标,哪一个更适合当作网页中的图标进行使用。
![ac12b8e2013905cf9eb246079a80f992.png](https://i-blog.csdnimg.cn/blog_migrate/3c488903496b80527f3be90e53b7780e.png)
这里我们就要记住了,检验它们哪个可以使用,就把它们缩小到48像素,识别度高的那个图标,就是适合使用的。
![a8d12f12f6e12090eed6b29b3699715e.png](https://i-blog.csdnimg.cn/blog_migrate/89ed09bec354143fd1c504164b0a90d8.png)
所以这个图标更适合放置在网页中。
![4482e030cd0ecc6891555045ae1459a4.gif](https://i-blog.csdnimg.cn/blog_migrate/50de7c08f7a1308913b96f6f48bc4640.gif)
在选择图标的时候一定要选择风格和颜色一致的图标,不要给用户产生不信任的感觉。
![c5c27ae61ae79335a25c38f848fd5632.gif](https://i-blog.csdnimg.cn/blog_migrate/363f73e2a381bdcafacb1b4a9c8a21f6.gif)
像这种图标,我们称之为通用符号,如果修改反而会给用户产生困惑,这个时候应当在保证统一性的基础上适当修改。
![18d030202ddbcbc503b9997ec7070fb6.png](https://i-blog.csdnimg.cn/blog_migrate/e3df4066087624d410d6b2521623f81a.png)
![27333feea1b65c36a2c10bc8ae561ac0.gif](https://i-blog.csdnimg.cn/blog_migrate/321dc1f7fdb5d186d999f20adb7ef523.gif)
复选框,顾名思义就是可以做多选。大家看完课程以后答题的多选题部分,就是一个复选框直接的应用。
![199400c21b9c36d2f773a007c763f13f.gif](https://i-blog.csdnimg.cn/blog_migrate/a74e9d9ed90eccb1556902e7dc3f20e6.gif)
有多选就有单选,另一种形式就是单选框。这个标准规范可以参考按钮部分。
![c644be582dd38428edc49f50eb79e7be.png](https://i-blog.csdnimg.cn/blog_migrate/98b85e05038d2f02f2dbfa46d7fe799d.png)
![63f7deb3b6766785b5a230d2c7c816e9.gif](https://i-blog.csdnimg.cn/blog_migrate/89855503e60b67643574df69d66b988f.gif)
作为网页中重要的收集信息的工具之一,输入框分为实色输入框和线框输入框。和按钮一样,重要程度也是依次减少的。
![c31a4272a8b130503bc99ce5222a3a07.png](https://i-blog.csdnimg.cn/blog_migrate/199cdd2a45f4cce2acad79989a362893.png)
输入框的组成部分,其中选择提示图标时,不要给用户带来额外的困惑。
![14c9d061256d8052f137a61b827bf4f7.png](https://i-blog.csdnimg.cn/blog_migrate/0bb63650423ec1884f998621ff83a718.png)
原子的部分还有很多的内容,除去上面说的四个部分。还包括颜色,字体等等的内容,只要记住网页中不能再向下分割的元素,都属于原子这个范畴内。
![5b4cd1ef000584bf98b6a73272b6428e.png](https://i-blog.csdnimg.cn/blog_migrate/04ca662dc6636af7211781af1fb8d611.png)
![9b1bc7e3d3c0bd4d4b72d3df7e43ff86.png](https://i-blog.csdnimg.cn/blog_migrate/0008ae528324307ce4f08b2a2e1012f7.png)
![5a534a74600d471cfdb043c26855aba2.png](https://i-blog.csdnimg.cn/blog_migrate/3cb2d935644530365373654962ccd480.png)
最常见的组成部分,分别就是:标志、图标、字体、输入框、颜色和按钮。这里我们主要讲解一下图标、按钮和输入框这三个部分。
![444628de3c592bdc2e521f59b8fe37fe.png](https://i-blog.csdnimg.cn/blog_migrate/4dceb5f5df733da995b2461504b15748.png)
图标这里还是要重新强调一点,就是图标的统一性,搜索这里无法做到实色,我们就调整它变得协调。
![cc9625c13b4cf1d4bc0d51a7578ab28c.png](https://i-blog.csdnimg.cn/blog_migrate/2dcc8ae565d912005ccda03714222b81.png)
在网页设计中,按钮存在的不同的状态,这也会决定按钮的形式上的不同。
![8336b1685bcbfede0e41b908fd8298f0.png](https://i-blog.csdnimg.cn/blog_migrate/b5818ad23283f0dceb8a649dacb6c6c9.png)
一个按钮通常会有三个状态,正常状态,也就是未点击时的状态。点击状态,点击后按钮的反馈形式。还有无效状态。
![8ea050e89d279a05ae920f5eaed86a0d.gif](https://i-blog.csdnimg.cn/blog_migrate/208ef4a406561d3d416b3d2a45536f3c.gif)
这里我们来演示一遍,正常情况下,按钮没有点击,现在是线框按钮的状态,重要程度居中。鼠标点击后,按钮改变成为了实色按钮,重要程度提升。这就是一个常见的按钮切换的动效。
![21032266b394da3c299dbe4fbc24f967.png](https://i-blog.csdnimg.cn/blog_migrate/d7897062305bdfa9b595e8a7f661f7dd.png)
输入框,这里一定要设置提示文字,防止用户看不懂个别的图标,产生困惑。
![bd4d1d6356f5c923d86eb55ea12600f4.gif](https://i-blog.csdnimg.cn/blog_migrate/85f433a21e4ce5699ab0bf5261bef311.gif)
现在我们根据原子的部分,设定好的标准,直接进行拼搭,就可以创造各种不同形式的页眉了,而这些小的元素,都是来自于前面的原子部分。
![bac0a7ac1b48de665732622cd28d21d8.png](https://i-blog.csdnimg.cn/blog_migrate/859eff7a7b62e2c6619862214ff69340.png)
![be02562aee1689d15181d795f340d538.png](https://i-blog.csdnimg.cn/blog_migrate/8128cd4c7b6d65416bfdb70ae848064b.png)
这个部分我们有了前面的文字规范,按钮和图片 接下来做的就是拼搭在一起。
![d0f2d81b2dcdd84737105820d87692a9.png](https://i-blog.csdnimg.cn/blog_migrate/d38d5c6ae98cff8a225608c9701c9334.png)
当我们设计出一个文字的组合形式,这个分子部分,就可以拼搭出各种不同类型的卡片形式。
![604a0df537f5ab04258cc6253db9d54d.png](https://i-blog.csdnimg.cn/blog_migrate/bec3e573eed9d08ad83b9626a26feeda.png)
左右组合的卡片形式。
![63af64aa77413367aaa10fb7373385f5.png](https://i-blog.csdnimg.cn/blog_migrate/2892704e9f6a07b2e2b27a4d5f95998f.png)
正方形的左右组合的卡片组合形式。
![73d35999865cda418baf8fc7918727c5.png](https://i-blog.csdnimg.cn/blog_migrate/39b52387921acad92b8b15800efef270.png)
图片文字叠压类型。
![570e0a3de53afda2d04f2a3e807c2fff.gif](https://i-blog.csdnimg.cn/blog_migrate/96cbe5e1759039de37b6916ffbc5f9a1.gif)
在我们的一个文字组不变的情况下,可以创造出各种类型的单元形,这也是原子设计的模块化的表现。
![9c99ad850e1d0574ca43ce1e4090e5b5.gif](https://i-blog.csdnimg.cn/blog_migrate/703f716b5af849f97b2d081ad88463c2.gif)
当我们选用了这个卡片以后,使用重复的方式,就可以得到网页中的一个模块了。
![6c546ae8c06c70d0db541bbf52f8522a.gif](https://i-blog.csdnimg.cn/blog_migrate/ce5a1c31525c5897c4f2dbd1d97effca.gif)
通过更多的重复,还可以形成卡片瓷砖型的版式。
![125abe0a0135decc8af1f6ec7b418747.png](https://i-blog.csdnimg.cn/blog_migrate/b393498d731531ba36152f65377e6983.png)
通过上面我们可以得出,这个理论中整个设计过程是层层递进的。在原子部分,当我们设定好了字体和颜色的使用,按钮的形式和图标。到了分子部分,就是原子之间的相互组合,不论这个组合形式的变化性有多大,都可以在网页中保持一致。再向下进行也是以此类推的,这样我们的工作效率就会大大的提高。
可以说只需要把最基础的几种组合形式做好,剩下的就可以像拼搭积木一样设计出符合计划的不同形式的网页。后面的三个步骤,也同样是在原子和分子的基础上,进行拼搭完成的。
![02a011120e76a6cab2378ca381eb5173.png](https://i-blog.csdnimg.cn/blog_migrate/9b535adea9e3e46e21d9d5326b1656bf.png)
![8beb85987615ccaf5dd2ece43c56428e.png](https://i-blog.csdnimg.cn/blog_migrate/7c60518ff0f5e78bfe08c0eeb224c2ff.png)
和前面一样,这里我已经做好了一个单元形,也就是分子的部分。
![689cf08ce92d39e7f9fcbaef877a02a4.gif](https://i-blog.csdnimg.cn/blog_migrate/16b38906f1398b318db2548fddea1874.gif)
最简单的方式就是进行重复的手法,这个单元形就会变成一个组合。
![f10c6cf3621dc04cf4b8a77d4c4a79dc.gif](https://i-blog.csdnimg.cn/blog_migrate/018b4ba9fe7b4c3622c311350a2f6ca1.gif)
这里再将它和其他的元素进行组合,就可以形成一个模板,前面说过了,这个部分没有添加图片的就是模板阶段,这里呢,为了让大家更直观的看到。
![d8ed2ee5a0f2793dacf5636768061581.png](https://i-blog.csdnimg.cn/blog_migrate/59b070e628d1820dab091be368e30bf0.png)
添加图片后,是不是一个实际网页中的模块就完成了。
![fde0c5a59e69a2b39d74b19dcd3532c0.gif](https://i-blog.csdnimg.cn/blog_migrate/c3d28e7a7b7cc127c048296407a8c265.gif)
主要设计好最基础的单元形,我们通过重复的手法,可以设计出非常多的形式。
![a9386402f8442f49d5d7d4ef955fe1b4.gif](https://i-blog.csdnimg.cn/blog_migrate/671818a9ac79f83e4c8a7e936f9f6839.gif)
除了常见的横向展示的组合形式,还有着双排的组合形式。
![08d74d757805952dcb0d60d3a274c324.gif](https://i-blog.csdnimg.cn/blog_migrate/cc8d58a6711d70e24602419815a93d30.gif)
第三种形式同样是前面的原子和分子部分的重新组合,到了组织的这个阶段,是不是就有了搭积木的感觉了呢?
![6584675a4a151f1ec7bbdebb825b853f.gif](https://i-blog.csdnimg.cn/blog_migrate/d83d70c40c672718dc139413fc2c75b1.gif)
当我们把所有的已经做好的形式放置在资料库中,我们观察一下,整个的模块不论是哪种形式,统一性都是绝对的。
![df94b9b0184ab6c5318313c630d79d8d.gif](https://i-blog.csdnimg.cn/blog_migrate/c8c0fdb2032a3080b050fa7aa3b574d0.gif)
其他的部分,我们都以此类推,制作出不同的形式,放置在资料库中。这样我们的积木的部分都一一成型了。
![7a891ce76af52084df45db169d29ad34.gif](https://i-blog.csdnimg.cn/blog_migrate/e6ea9f44765fb368aa093eedb07f5742.gif)
从资料库中,选取这两个部分进行组合,就可以形成不同风格的网页类型。
![2f162fd87312a7f78a487872f40db10d.png](https://i-blog.csdnimg.cn/blog_migrate/1c4f9d2012390b0200b2559ecae6f3a5.png)
![c589065f659cb8da7fd1eb1a93895816.gif](https://i-blog.csdnimg.cn/blog_migrate/6b9a2ed9125947a1c649121ad5c7e0bf.gif)
首先我们建立一个网页的尺寸,并且规定它的可视范围(蓝色部分)。注意网页中宽度通常为1920像素,长度则是根据我们的内容决定的,这里没有统一的尺寸。
![fd89f52e4bc9a2c8403034fae06e98a1.gif](https://i-blog.csdnimg.cn/blog_migrate/61f5fb5a283896c7eade2a86fed5ee60.gif)
从前面的资料库中,我们只需要挑选出合适的组织部分,替换上图片就可以形成一个完整的页面。
![7538e9b6f6fb0d559744a98c5e5d8f6f.gif](https://i-blog.csdnimg.cn/blog_migrate/e4204e14aea12a6680149d3b103f4b5c.gif)
整体模块的顺序都是可以任意的按照需求进行替换的,这也是模块化的体现。
![26e6e31689553e69fcec34b274ae62ab.gif](https://i-blog.csdnimg.cn/blog_migrate/4bedfd47d62947ba833b558ad0e2b5b2.gif)
模块替换并不会影响这个网页的观感。
![ea5a97047371c1026c08185f7951fe5c.gif](https://i-blog.csdnimg.cn/blog_migrate/9dedeecdedf6197c710fe6e4e831cd2b.gif)
想要做展示图片为主的网页时,可以从资料库中选择大幅图片为主的模块形式,就可以形成一个新的网页了。
![643deb06fa75df0a0edde1180371e743.gif](https://i-blog.csdnimg.cn/blog_migrate/16dc5c75cd0f537f757012dacded2e2c.gif)
剩下的事情就是,从资料库中选择出最适合模块就可以了,整个的过程就像搭积木一样。
![125abe0a0135decc8af1f6ec7b418747.png](https://i-blog.csdnimg.cn/blog_migrate/b393498d731531ba36152f65377e6983.png)
今天学习了原子设计这个理论,我们发现整个网页设计的环节从最小的原子部分到页面部分,是层层相扣的。网页就是由这些小的元素慢慢累积出来的,就像是在拼搭一个积木的城堡。但是如果根基不牢靠的话,整个城堡都不会太牢靠。
所以就需要我们在原子和分子的部分多去下功夫,去完善整个网页的根基部分,做好每一个单元形,这样就可以通过不同的方法创造出各种不同形式的网页了。当然,这个过程也是需要我们不断地去学习和积累。今天的课程就到这里了,我们下期再见。
![4da60a9b2ce55520d0cb62aa97548cec.png](https://i-blog.csdnimg.cn/blog_migrate/f833a2c98dfc068edeba49938669edf8.png)
![301823c5228fd46657174c24ca97ff58.png](https://i-blog.csdnimg.cn/blog_migrate/de88df133496b250019cf40c1947a6fd.jpeg)
![5cebcdba65b1cd8a97ae3a3e7261ecdd.gif](https://i-blog.csdnimg.cn/blog_migrate/f182c393e2af689cbad39ce199e781e6.gif)
往期精彩内容推荐
戳一下看视频
![5cebcdba65b1cd8a97ae3a3e7261ecdd.gif](https://i-blog.csdnimg.cn/blog_migrate/f182c393e2af689cbad39ce199e781e6.gif)
由于微信公众号更改了推送机制,推文不再按照时间线推送,为了以后能及时观看到我们的教程和文章,看完文章后记得给我们点个“在看”哦。如果你喜欢我们的文章,这将是对我们最大的鼓励和支持。