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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
网页模块大小规范,网页设计中栅格系统
0.0°
2017-04-11 好文转载 教程 原作者: 绿豆芽儿 举报 17401 194 99 2

来源:UI设计网  作者:绿豆芽儿

对于高深的栅格系统,很多人可能琢磨不透,其实我们定的各种网页对齐规范,网页模块大小规范,就是来自栅格系统。

本文是个人学习前辈的文章和主流网站的分析,总结的对栅格系统的理解,得出的[a+i=100]的栅格方法

题记:提起网页布局,大家公认最为规范的就是栅格系统,对于高深的栅格系统,很多人可能琢磨不透,其实我们定的各种网页对齐规范,网页模块大小规范,就是来自栅格系统。本文是个人学习前辈的文章和主流网站的分析,总结的对栅格系统的理解,得出的[a+i=100]栅格布局。

(本文仅做学习交流使用,未得权威认证,欢迎大家批评指正,文末注引出处。)

栅格系统

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁。最早出现于印刷,简单的说就是运用固定的格子使界面排列工整简洁。后来延续到web设计,其中比较有名的是960 Grid System。目的也无非让网页布局的更合理、易于阅读等。

使用网格系统,让你的设计具有正式感和规范感,还具有一种结构分明的设计感。这让你设计起来更轻松,对于开发者来说,同样如此。(让设计师清楚的跟其他人解释他们是如何设计的)

栅格化的基础概念

Image title


当n = 24, i = 10;假如A=40,则W=950;假如A=50,则W=1190;假如A=60,则W=1430。

当n = 24, i = 20;假如A=50,则W=1180;

当n = 12, i = 20;假如A=100,则W=1180;

栅格化是通过确定等分的单位宽度以及单位宽度之间的间距,把单位宽度进行组合的一种排版方式。

首先分析等份的复杂度,如果版式仅仅是4等份、3等份的话,12列的栅格系统就可以满足需求。如果有较多不等分的可能,那么还是建议采用24列的栅格系统

栅格系统的三种形式:

1、  有边距的栅格:

Image title


当我们用已知想做的宽度的时候,可以用这种栅格

假设W=1200,i=30(10的倍数),n=12

W=(a+i)*n

1200=(a+30)*12

a=70

例如1、<人人都是产品经理>采用这种栅格,(所有内容皆在版心1200px内,图片内容块是A的倍数,多数内容间距30px,根据内容灵活应用栅格)

Image title


2、无边距的栅格

Image title


假设W=1200,i=10(10的倍数),n=12

W=(a+i)*n-i

1200+10=(a+10)*12

a约等于90

所以W=(90+10)*12-10=1190

所以这种等分方式是最接近1200屏幕需求

例如:淘宝,天猫,京东

W=(90+10)*12-10=1190

Image title


1180版心:

W=1180,i=20(10的倍数),n=12,a=80

W=(80+20)*12-20=1180

例如:UI中国

Image title


3、直接等分的栅格

简单明了,直接根据站点内容分几块

例如1:站酷

Image title


所有内容都在版心1083px内。以10px倍数为间距,每个模块250px。

例如2:echo回声

Image title


所有内容都在版心1000px内。以15px的倍数为间距。

UI设计网(游戏UI页面)

Image title


总结:

以上栅格皆是A=100,先确定栅格间距i,再根据网页宽度定栅格的数目n。所以个人得出的定义就是现在主流的网页是以100为基准的栅格,(如:90+10、80+20、70+30、85+15)。

很多人,尤其是对于新手来说——网格系统会阻碍他们的发挥创造。你会感觉你的灵感被束缚在这些条条框框里面了。如果出现这种状况,我建议你从网格系统中跳出来,用自己的创意去设计,根据自己所做的项目,按照自己的经验来排布元素,然后再切出网格系统,想出一个二者结合的两全其美的办法,稍做调整,如果网格系统和你的原创设计出入过大,不能有效协调,那么建议换一个网格系统,或者自己设计一个。其次,网格系统用起来比较困难,有一定的学习成本,需要有一定的数学基础,你得懂比例,会计算。对于那些数学不好的人来说,网格系统真的是太复杂了。但是我认为,刚开始虽然比较难以上手,但是习惯之后,你会得心应手,设计也将会更加出彩。还有在网页设计或排版的时候除了注意竖向的布局,一些横向也是要注意的,标题间距、模块间距也要统一,最好与栅格间距统一,多以5、10、15、20、30等为间距。

网页图片

对于网页中的图片建议用一些常见的比例,如:1:1、4:3、16:9、7:5、3:2、16:10、21:9,

1.43:1、7:5等

好了,就这些,栅格系统还需大家到实际项目中去实践,用了就离不开他,用了他你好大家好。

更多优质教程请访问UI设计网(www.uisjw.com)

更新:2017-04-11

收藏

194人已收藏

米你课堂UI设计

有喜欢的伙伴可以加我

  • 71

    作品

  • 235

    粉丝

  • 1

    关注

  • 浅谈统一原则在网页设计当中的运用
  • UI设计-绘制暂停按钮
  • 【练练手】超漂亮玻璃质感icon教程
  • 炉石传说卡牌设计
相关标签

    猜你喜欢

      2017-04-11 好文转载 教程 原作者: 绿豆芽儿 举报 17401 194 99 2

      网页模块大小规范,网页设计中栅格系统

      0.0°

      你确定要举报网页模块大小规范,网页设计中栅格系统

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      99
      194
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录