如何打造丰富而充满呼吸感的网页设计布局？

我们人类千人千面，但怎么长都不会偏离骨骼。因此，保持了内在的坚固恒久性，外表就一出戏，相对自由式的进行视觉想象编结。布局排版说来很容易，无非就是整理好网页的元素清单，然后一一放上版面即可。其实就因为自由搭配的方式千差万别，我们总为解决方案心悬一线，其实最后的结果又马马虎虎。

没有边界

一段文字和一张图片，甚至一个图标……在进行布局的时候，由于素材并不是立刻手到擒来，有的设计师布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让页面陷入“框架陷阱”。

就像一个布局，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。然而，很有可能一些设计师就会因此而将页面设计成在框架图基础上的简单补色。

当然，你会说这样其实并没有什么不好，因为几乎我们所有看到的扁平化网页都是这个样式，但可以肯定的是，这个网页并没有多少呼吸的空间，整个网页都被信息所填满，如果稍微改变一下布局的元素大小和位置，其实就会展示出不一样的版面效果，而很显而易见后者的排版是更为灵活的。
边界所造成的局限就是一些设计的固有思维，它将会习惯在这个框架内去思考解决方案，如果想要躲过这个陷阱，就是学会越过框架去思考。就算做好了框架，也要认识到这不过是一个前期的不确定方向的试探，完全可以改变框架的构造。
很多设计师自诩为美术民工，而觉得自己离艺术家这个范畴越来越远，其本质的差别就是，工匠只是重复一项劳动，在创造之前它就已经知道了目标。比如设计网页前，已经知道最终网页做成什么样，那么你的工作就仅仅是按部就班完成每个元素的对齐工作。而艺术家则是在事前并不知道结果，往往是一步一试探去寻找更加有效的解决方案，艺术创作类似于一种冒险。设计师其实是取乎其中，也就是两个身份兼有的理想结合。

创造焦点

这么说也许有点夸张，但任何一件好的平面作品，一定是有焦点的。就像我们谈到过，十字准星型的视觉结构习惯将焦点置于中心位置，要制造一个焦点的办法有很多，简言之，就是制造冲突。想象你在一个人群稀疏的大厅，突然有两个人高声争论什么，这时引起了几个人围观，这个情景就在原本安静的人流中制造了一个关注焦点。同样，在视觉领域也是如此，利用对比冲突应该是一种最有效的制造焦点的方式。

对于焦点的认识我们也不应局限于是一个“点”，它是一块正吸引你的视线所投射的区域。它还可以分为实焦点和虚焦点，实焦点是在虚焦点之上更为精准的投射存在。

除了色彩，其他任何属性都可以经由对比形成焦点，这时你要做的，就是注意焦点不应太多。也因此，除了焦点以外，设计中的其他元素都要保持一种相似性。
这里我们总结一下能用于进行对比属性，这些属性之间形成的对比越大，冲突越大。
空间：充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放
形式：简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎
结构：井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工
纹理：细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝
位置：顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、中心-边缘、整齐排列-互不关联、内-外
方向：垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字
尺寸：大-小、长-短、窄-宽、扩大-收缩、深-浅
颜色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和（深色）-无色（素色）
密度：透明-晦暗、稠密-稀薄、液体-固体
重力：轻-重、稳定-不稳定
保持比例

说起比例，难免和数学公式扯上关系。其实，简单一点来看，我们完全可以把比例看作一个视觉的原子单位，一切位置、大小的关系都以这个原子单位为标杆。

比如我确定一个原子单位是50px的正方形，那么以这个矩形为基准来创作一个图形，这个图形就是又这个正方形所搭建的，有点类似我们玩的拼图游戏。

比例会让你的网页设计形成某种看不见的稳定感，每个元素恰如其分的表现在所应该出现的位置，如果你选采用对称的布局，由于对称本身就具稳定性，因此，网格在非对称的布局中发挥作用更大。
后记

灵动本身是一个极富感染力的词汇，也许源于此很多人以为这就需要煞费苦心，其实往往越用力越欲速而不达，只要明确了设计的目标，你就只需要跟随目标而进入过程。这里不得不提及，很多看似简单的可操作性的技巧都未必能真正帮到你，比如“运用黄金比例就能获得好效果”“非对称布局一定比对称布局更具动感”“一个页面的色彩不得超过三种颜色”“字体用蓝色阅读体验不佳”……类似这样的经验总结之所以会误导你的原因，并非它本身不正确，而是由于它并没有为初学者提供一个外部环境，他们只给出了基于他们设计现场里出现的问题的解决方案，而换个环境就未必适合你。

当前题目：如何打造丰富而充满呼吸感的网页设计布局？
文章URL：/news29/190729.html

成都网站建设公司_创新互联，为您提供网站收录、面包屑导航、外贸网站建设、虚拟主机、网站设计、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联