• 中蒙俄文化交流演出《草原蒙古韵》在乌兰浩特举行 2019-05-24
  • 中国国家烹饪赛事金丰专项基金在京成立 2019-05-24
  • 北京:积分落户申报结束 12.4万人申报 2019-05-21
  • órgo legislativo nacional da China encerra sesso anual 2019-05-21
  • 记者卧底揭“信用消费卡”黑幕:3000元办“神卡”10万额度贷不出钱 2019-04-29
  • 2018年5月16日国台办新闻发布会 2019-04-28
  • 【家国网聚·网络旺年】海外劲吹中国风 中国年味正全球飘香 2019-04-27
  • 展开美丽中国的时代画卷——十九大代表聚焦生态文明建设 2019-04-27
  • 《辉煌中国》第一集《圆梦工程》 2019-04-25
  • 【理上网来·喜迎十九大】这五年,全面从严治党交出靓丽“赶考”答卷 2019-04-25
  • 审计署:19万套房子空置 数百亿元资金闲置 2019-04-14
  • 中医药属不属于科学并不重要(原创) 2019-04-14
  • 2018年上半年韩国动漫出口额同比增五成 2019-04-09
  • 新华社评论员:全面贯彻习近平强军思想 2019-04-09
  • 十九大宣讲员走进贵州企业 创业青年:新时代是我们的舞台 2019-04-05
  • 吉林十一选五任三遗漏客户案例品牌营销网站建设微信小程序开发百度排名优化+口碑营销关于我们新闻联系咨询

    吉林十一选五任三遗漏 www.dmpt5.com 如何掌握栅格系统基础知识!

    2018年12月24日

    1. 栅格
    栅格最早起源于平面设计。1692年法国为提高印刷水平,以方格为设计基础,将一个印刷版面分成上千个小格,这就是最早的栅格雏形。再后来,慢慢演变成运用固定的格子设计版面的平面设计风格。

    2. 网页栅格
    包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。

    3. 为什么要使用栅格
    通过栅格的使用,可以用逻辑解释商业设计的细节问题。

    设计内容都应该有所依据,当其他人质疑时,可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性,让内容更具可读性;可以快速校准元素的位置,让画面更平衡;可以??榛毓芾碓?,让版面更有层次感。

    4. 栅格基础七要素
    最小单位

    需要先定好界面的单位基础,后续内容元素和布局规则都是基于它整数倍递增。

    网页端最小单位:10

    移动端最小单位:3、4、5

    总宽度/W

    总宽度:对整体布局进行规范,且还可以保证设计尺寸的统一性。

    界面设计要有具体尺寸,由于内容多少不确定,所以高度没有办法定死,但内容区的宽度是可以定的。

    列数/N

    列数是界面总宽度设定好后,纵向等分成几列。

    网页端:12列、24列(常用等分列数,当然不是固定的,需要根据自己的内容设定列数)
    移动端:6列(常用等分列数)

    大列宽/L

    把界面总宽度等分成几列,每一列的宽度即为大列宽。

    计算公式:L = W / N
    大列宽包含:列宽和水槽

    水槽/G

    相邻两个列宽之间的间隔是水槽。

    水槽宽度越大,页面留白和呼吸感会更好,反之则更紧凑。水槽可以将内容更规范的区分开来。

    列宽/C

    把界面总宽度等分成列,相邻两列之间的间隔(水槽)减去后就是列宽。

    安全边距/M

    界面左右能保证可读性和美观度的、合适的空隙就是安全边距。

    Sketch 里设置水槽后,安全边距是水槽的0.5倍。

    计算公式:M = G / 2

    5. 安全边距
    除了使用水槽的0.5倍,还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例:水槽是20,使用0.5倍,安全边距为10;水槽是20,使用2.0倍,安全边距为40。

    栅格是辅助页面布局的,所以需要根据实际内容灵活的使用栅格,而不要被栅格所束缚。

    6. 各种公式汇总
    N 是自定义设置的列数。

    小结

    在 Sketch 里设置栅格,定义好3个数值即可,总宽度、列数和水槽,这三个内容定义好数值后,其他内容就会自动计算,一个栅格就生成了。

    如何用栅格系统布局页面
    第一步:确定页面宽度,比如1920、1800、1600、1366、1280等等。

    第二步:分析内容等分的复杂度,如果内容简单只需要3、4等分,12列的栅格系统即可。如果有较多不等分的可能,建议采用24列的栅格系统,可灵活设置。

    第三步:根据内容布局页面,确定??橹涫欠裼小讣涓簟?,间隔尺寸是多少,6px、8px、10px、12px和20px选一个方便计算、方便记忆和整除的数值即可。

    就像过去,开发人员发现960px是最适合作为网格布局的宽度,因为960可以整除3,4,5,6,8,10,12,15,是不是突然发现设计其实是一道数学题。

    1. 网页举例

    根据具体内容,使用方格布局整个页面。

    Sketch 栅格设置,这里的总宽度1190是内容设计的实际宽度,设计页面宽度是1920,因为有些内容展示选用居中布局方式,两边留白。

    影响网页设计的两大因素
    影响网页设计的两大因素:分辨率和浏览器。

    1. 分辨率

    什么是分辨率?

    比如1920*1080px,整个屏幕可以看成是由很多小方格子组成,一个像素就是一个小格子,横向有1920个小格子,竖向有1080个小格子。

    电脑屏幕是14寸还是15寸的,尺寸不变,电脑分辨率是可变的,在同一个屏幕上,分辨率越大画面就越精细,反之就越模糊。当下比较流行的屏幕分辨率:1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。

    注意:

    关于分辨率,可以选用适合自己团队的分辨率尺寸,我们团队是梳理出所有产品的分辨率的使用情况,及团队产品设计的特点,选取2~3个作为后续统一使用的尺寸。

    2. 浏览器

    设计网页时要考虑好浏览器,主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。

    因为不同浏览器工具栏高度不同,如果设计内容需要在小屏幕上展示,就要考虑到打开浏览器默认页面及全屏页面的高度展示情况,如果浏览器所占高度较多,那么内容展示区域就被压缩了,所以就要考虑将最重要的内容尽量放在上面。


    本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

    标签: 广州营销型网站建设公司 、 广州小程序开发公司 、 广州小程序开发 、 广州营销型网站建设 、 小程序开发 、 营销型网站建设 、 网站设计 、 网站建设 、 广帆互动 、 广州网站设计公司 、 广州网站设计 、 广州网站建设公司

    填写您的联系方式并验证获取报价。

    * 下载报价如有疑问,请与我们的销售顾问取得联系。
    线上服务咨询微信二维码吉林十一选五任三遗漏填写需求索取报价
  • 中蒙俄文化交流演出《草原蒙古韵》在乌兰浩特举行 2019-05-24
  • 中国国家烹饪赛事金丰专项基金在京成立 2019-05-24
  • 北京:积分落户申报结束 12.4万人申报 2019-05-21
  • órgo legislativo nacional da China encerra sesso anual 2019-05-21
  • 记者卧底揭“信用消费卡”黑幕:3000元办“神卡”10万额度贷不出钱 2019-04-29
  • 2018年5月16日国台办新闻发布会 2019-04-28
  • 【家国网聚·网络旺年】海外劲吹中国风 中国年味正全球飘香 2019-04-27
  • 展开美丽中国的时代画卷——十九大代表聚焦生态文明建设 2019-04-27
  • 《辉煌中国》第一集《圆梦工程》 2019-04-25
  • 【理上网来·喜迎十九大】这五年,全面从严治党交出靓丽“赶考”答卷 2019-04-25
  • 审计署:19万套房子空置 数百亿元资金闲置 2019-04-14
  • 中医药属不属于科学并不重要(原创) 2019-04-14
  • 2018年上半年韩国动漫出口额同比增五成 2019-04-09
  • 新华社评论员:全面贯彻习近平强军思想 2019-04-09
  • 十九大宣讲员走进贵州企业 创业青年:新时代是我们的舞台 2019-04-05
  • 北京赛车六码走势公式 pk10交流 山东时时彩导航 中国足彩网5元 幸运28评测网 舟山飞鱼网上直播 湖南体育彩票 双色球71小复式如何选号 河南中国福彩网 北京pk10走势图表 全国开乐彩 新时时彩几点开奖 极速飞艇内购破解版 时时彩计划软件 7星彩66期开奖结果 幸运飞艇彩票是哪里的?