大家都知道做网页设计有栅格 ， 有纵向栅格也有横向栅格 ， 栅格提供内容布局的规范 ， 让信息组织更有条理 ， 我们在栅格规范内做设计 ， 上下左右、垂直居中对齐 ， 横平竖直、方方正正的看着舒服 ， 信息布局清晰易读 ， 表面看没什么问题 ， 但经常会有那么点死板 ， 缺少点活力 。
如何在视觉设计中突破页面布局的“格” ， 让设计更具特点与众不同 ， 下面通过几个小技巧来解决页面布局中死板的问题 。
延伸
古词中“满园春色关不住 ， 一枝红杏出墙来” ， 就是这个感觉 ， 让主体内容不局限于页面的条条框框之内 ， 适当的延伸出去 ， 横跨两个模块 ， 不仅能够打破规则的布局 ， 而且能够让两个模块有一定延伸感和连接感 。
曲线
网页设计中 ， 免不了内容模块的分割 ， 这种直线多了自然就会让画面死板 ， 我们可以通过改变直线的方式 ， 比如曲线、斜线等来解决这个问题 。
用曲线来达到分割的模块地目的 ， 同时也表达出数据产品的特点 。
不论是背景还是主体图形 ， 都有12°角度的倾斜 ， 让画面顿时就“活”了起来 。
过渡
当然我们很多时候任然无法避免分割中的直线 ， 也不可能把所有的直线都改为曲线 ， 这时候我们可以适当利用一些元素让模块之间有个过渡 。
左右分屏是最近一年比较流行的布局方式之一 ， 这种布局能够更加强调品牌的色彩调性 ， 避免图片与文字的叠加干扰阅读 ， 带来的问题就是中间死板的分割线 ， 设计师将输入框横跨了两个模块 ， 巧妙地打破了这个死板的形式
隐藏
有些信息不一定完整的展示出来 ， 可以只展示最重要的部分 ， 将不重要的置于画面之外 ， 适度的隐藏 ， 更有利于突出重要信息 ， 也能够让画面有一定的延伸感 ， 不死板 。
层叠
将图形、图片、文字等信息进行层叠 ， 打破传统的左右、上下布局 ， 增加画面的透视与层次关系 。
主体人物与文字进行叠加 ， 文字虽然做了一定的遮挡 ， 若隐若现却不影响阅读 。
错位
将图形、图片、文字等信息进行错位布局 ， 不拘泥于条条框框之内 。
图片与背景块错位布局 ， 看似好像没做完 ， 实际是设计师精心的布局方式 ， 让画面充满动感 ， 同时图片的投影也让这部分信息顿时有了层次感 。
利用文字、方框与主体图片进行交错组合 ， 让这些碎片信息融为一个整体 ， 视觉上也更加有层次感 。
结语
以上方法并非只是为了突破而突破 ， 是基于浏览体验的前提下 ， 做出更具特点的视觉形式 ， 设计师不须拘泥于传统的布局方式 ， 也无须受制于同类产品形式的影响 ， 可以大胆尝试各种布局方式 ， 做出创新与特色 。
【6个小技巧让你的网页设计活力十足！】
推荐阅读
- 玩手机头晕恶心怎么缓解 玩手机头晕恶心缓解小窍门
- 网页设计中图片有哪些常见的使用技巧？
- 10个网页设计中字体的应用技巧！
- 网页设计师必备10个搜索引擎优化技巧
- 七个实用的网页设计技巧！
- 蒲公英的外形和特点 蒲公英的外形和特点的小练笔
- 移动端网页设计小技巧分享，怎么让移动端网页更好看？
- 单页面网站设计的5个技巧！
- 手机网站建设如何留住用户，手机网站建设小建议
- 超实用的网页设计六大技巧！