• 发现食品安全问题拨打12331投诉 2019-03-22
  • 市场能调节供需平衡吗? 2019-03-22
  • 中纪委:从公款招待私客等入手 露头就打 2019-03-12
  • 本论坛上有位网名为“第十阶层1”的网友,你可问问他“阶层”与“阶级”有什么区别!呵呵! 2019-03-11
  • 侵华日军513部队首被发现 日本老兵:主做细菌研究 2019-03-11
  • 陈海滢的专栏作者中国国家地理网 2019-03-11
  • 希腊议长:希中合作潜力巨大 支持“一带一路”倡议 2019-03-07
  • 聚焦2018年高考改革新动态 2019-03-06
  • “几乎是时时在流血、天天有牺牲”,他们的故事你知道吗? 2019-03-03
  • 回复@不能这样啊:那你不是可以啥事不做天天甩起手耍?你自己不求上进还不准别人有所追求么? 2019-03-01
  • 两年换4次工作 退役战友们亟待补上这八堂课 2019-03-01
  • 实用-热门标签-华商生活 2019-02-24
  • 21世纪马克思主义的实践贡献与时代价值 2019-02-20
  • 粤港澳大湾区未来有望成为世界第五大经济体 2019-02-20
  • 地方领导如何回复网友留言 2019-01-09
  • 首页 > 网页教程 > 设计分享 > 网格设计:更科学的排版方法

    快乐十分任三奖金:网格设计:更科学的排版方法

    时间:2018-08-15    作者:sky   来源:我们的设计日记

    为什么要学习网格

    快乐十分推荐直选号码 www.fenos.net 有效、有规律的设计布局是设计的一个基本原则,网格无处不在,可能只是你没有注意到它的存在,简单理解就是把一个页面,根据版心划分为无数统一尺寸的网格,广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。

    它能让你的设计更有秩序、更有规律,简单来说就是用更科学的方法去排版。

    ▲ 谷歌material响应UI基于 12 列网格布局

    该网格在布局之间创建视觉一致性,同时允许各种设计的灵活性,网格列的数量根据断点系统而变化。

    2. 网格的基础概念   

    列是网格的垂直部分也可以理解为内容区域,网格中的列越多,其灵活性越大。但是列并不是越多越好,PC端一般是 12 列,移动端一般是 6 列,特别是移动端不适合列太多,列太多会让页面更碎。

    ▲ PC端 970 为分辨率网格分为 12 列

    ▲ 移动端一般分为 6 列

    行是网格的水平部分,也是横向部分,它们通常在网页设计中被省略。具有行和列的网格称为??榛?,移动端行间距用的比较少可以忽略,一般在UI设计师中就是横向的间距。

    内容???/strong>

    也叫内容区域,填充设计内容,??槭怯尚泻土薪徊娲唇ǖ目占涞ノ?。

    组合区域

    区域是形成组合元素的列,行或??榈姆肿?。

    水槽

    列和行由水槽分隔。沟渠越紧,视觉张力就越大。如果你希望你界面间距大点,水槽就可以留大,相反水槽越小,越紧凑,注意一点,水槽里面是不要放内容,除非和区域一样组合使用,内容尽量放在??槔锩?。

    ▲ 图中橙色区域就是水槽

    这里做设计时候是??楹湍?橹浼渚?,最好不要放内容。

    屏幕边距

    边距是网格列和行之外的空间,不要填充内容,移动端主要是两侧空间和屏幕边缘的距离,这里设计时候切忌不要填充内容,保持页面骨架边界。

    ▲ 黄色区域就是屏幕边距,设计时候切忌填充内容,保持设计骨架统一

    上述基本就是网格的一些常用单位,当然还有更细分的流线,标记,还有各种网格类型。但是今天我们主要学习移动端的网格,只需要掌握:移动端一般分为 6 列,内容区域(UI设计元素,内容)一般放置到内容??楹妥楹夏??,水槽和屏幕边距保持留白,不放内容。

    相关推荐
    版式设计:深入浅出学会网格系统的应用
    界面设计:如何用网格系统设计出大师般的APP界面?
    网页设计教程:20步创建完美网站布局设计
    UI布局设计:文章列表与内容详情页设计案例赏析
    新手教程:9款经典网页布局设计推荐

    精彩推荐

    热门教程

  • 发现食品安全问题拨打12331投诉 2019-03-22
  • 市场能调节供需平衡吗? 2019-03-22
  • 中纪委:从公款招待私客等入手 露头就打 2019-03-12
  • 本论坛上有位网名为“第十阶层1”的网友,你可问问他“阶层”与“阶级”有什么区别!呵呵! 2019-03-11
  • 侵华日军513部队首被发现 日本老兵:主做细菌研究 2019-03-11
  • 陈海滢的专栏作者中国国家地理网 2019-03-11
  • 希腊议长:希中合作潜力巨大 支持“一带一路”倡议 2019-03-07
  • 聚焦2018年高考改革新动态 2019-03-06
  • “几乎是时时在流血、天天有牺牲”,他们的故事你知道吗? 2019-03-03
  • 回复@不能这样啊:那你不是可以啥事不做天天甩起手耍?你自己不求上进还不准别人有所追求么? 2019-03-01
  • 两年换4次工作 退役战友们亟待补上这八堂课 2019-03-01
  • 实用-热门标签-华商生活 2019-02-24
  • 21世纪马克思主义的实践贡献与时代价值 2019-02-20
  • 粤港澳大湾区未来有望成为世界第五大经济体 2019-02-20
  • 地方领导如何回复网友留言 2019-01-09