恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
栅格不是唯一选择_网页设计中栅格布局的思考与应用
0.0°
2017-12-13 原创文章 经验/观点 举报 10366 265 340 22

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

Image title


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


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


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



了解栅格布局


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


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


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



栅格布局的作用


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


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



布局类型


①  固定布局


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

Image title



②  可切换的固定布局


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

Image title



③  弹性布局


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

Image title



④  混合布局


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

Image title



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


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


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



实例分析


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

产品功能:数据查阅为主

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

                  ② 表单数据需横向阅读

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

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


需求分析:

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

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


Image title


Image title


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


Image title

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



结论


需求决定设计形式。

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


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


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



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




更新:2017-12-13

收藏

265人已收藏

  • 22

    作品

  • 4238

    粉丝

  • 3

    关注

  • 运营设计策略-借鉴方法论
  • 2019上半年作品回顾2_插画篇
  • 2019上半年作品回顾(1)_金山词霸插画篇
  • 所有设计师都应该懂的动效设计

    猜你喜欢

      2017-12-13 原创文章 经验/观点 举报 10366 265 340 22

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

      0.0°

      你确定要举报栅格不是唯一选择_网页设计中栅格布局的思考与应用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年11月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      340
      265
      22

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录