栅格不是唯一选择_网页设计中栅格布局的思考与应用

原创文章 分类: 经验/观点 版权:
13264 227 325 22
2017-11-27
94.1
首页推荐

栅格布局能让每个用户享受良好的使用体验,带来好体验的同时却需要额外付出,我们试图寻找一种简化的布局方法,在保证页面效果的同时兼顾好的适配效果,让设计变得更简单。

Image title


栅格布局,这是一个老话题。


栅格系统早已辅助我们设计多年,但栅格系统的应用不是循规蹈矩,一味按照预先设定好的栅格网络进行页面设计与模块布局。栅格系统的意义在于更灵活的帮助你有序布局,而不是限制你的设计。


用户看不到栅格系统,他们不了解栅格布局的重要性。对于用户而言赏心悦目,富有创意与美感的页面设计才是他们所关注的。在实际项目中为了达到这一目的,在对栅格布局的使用过程中产生了新的认识,并应用于项目中,得到了不错的效果,记录下我的理解与应用案例与大家讨论。



了解栅格布局


以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。


通俗一点就是在一个特定的区域内划分出有规律的格子,并依靠这些格子进行有规律的版面布局。


栅格布局最早应用于传统纸媒(平面设计),由于平面设计与网页设计有诸多共性,因而将栅格系统引入到网页设计中,由于栅格布局在网页设计中的实用性便逐渐成为了网页设计的基础准则。



栅格布局的作用


不同页面,即使由不同设计师设计,也能让内容保持一致的视觉疏密程度,提升产品整体性。基于界面的栅格系统可以很大程度上保证设计产出的质量,尤其对于刚入行和经验不足的设计师。


很多设计师对栅格布局理解与使用都止步于页面设计,停留在设计稿中的静态效果。忽略了栅格布局更为重要的作用是为响应式布局提供依据,让布局变换的更加合理,在不同分辨率浏览窗口下都能为用户提供一个最优的视觉效果。



布局类型


①  固定布局


在一个固定尺寸下做设计,只做一套设计图,应用于不同尺寸浏览器,最终呈现效果不因浏览器窗口大小的改变做任何调整。

Image title



②  可切换的固定布局


参考主流设备尺寸,设计多套(1-3套)不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度,选择最合适的布局类型。

Image title



③  弹性布局


页面宽度与内容的呈比例关系(设置内容在窗口中所占的比例大小,内容会随着窗口大小的改变而改变),可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,能利用有效控件展示最佳效果。

Image title



④  混合布局


参考主流设备尺寸,做多套设计,并设置不同布局兼容最大与最小尺寸,在兼容尺寸内随比例放大,超出范围切换布局。可适应一定范围内所有尺寸的设备屏幕及浏览器宽度,能利用有效空间展示最佳效果。

Image title



以上网站使用了不同的布局类型,他们在选择布局类型时都是根据其产品定位与具体项目需要来决定的。


好的栅格布局能让网页兼容更多的不同尺寸的设备,让每个用户都能享受良好的使用体验。但带来好体验的同时是需要额外付出的,设计时需要兼顾不同的可能性、开发成本的提高。


我在寻找一种更为简化的布局方法,让设计变得更简单。在保证页面具有条例性,易于拓展的同时兼顾好的适配效果。



实例分析


项目类型:用户行为数据分析平台

产品功能:数据查阅为主

产品特点:① 内容以数据图表为主体

                  ② 表单数据需横向阅读

                  ③ 数据种类与数据量无法确定

应用设备:电脑浏览器(笔记本为主)


需求分析:

① 由于是数据后台类的产品,用户主要查看是以电脑为主,所以剔除 了兼容手机查看的布局需求。

② 根据产品内容需要横向阅读,且内容无法确定,所以将内容区 域尽可能的最大化显示以,占满整个浏览器窗口应对不同的内容显 示需求。因此在页面设计时没有使用分栏式栅格布局,只给内容区 域外添加了安全边距。


Image title


Image title


设置安全边距,让内容区域随窗口尺寸改变而改变的做法能够很好的满足产品横向内容展示的需求。而且由于规则简单,易于团队协作,同时还能提高开发效率。


Image title

安全边距同样适用于表单界面(表单内容会随需求自由组合)



结论


需求决定设计形式。

根据最终适配要求结合内容呈现方式来制定栅格布局。


如果我们所设计的页面要适配更多不同尺寸的屏幕,合理的栅格是最优选择。


如果不用适配,那根据需求制定一套合理的排版规范会更加易用,简单的规则会更易于掌握与应用。



以上观点和做法是在实际工作的经验总结,如有有错误之处还请各位同行伙伴多多指正。




金山办公用户体验中心_北京

We Create!

1942粉丝/3关注

这里有干货!优雅绕开“产品经理”挖的坑做到这两点方案一稿过

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN