• 郑州软件开发

    |

    郑州网站建设

    |

    郑州网站制作

    |

    APP开发

    |
  • 郑州软件开发电话: 15937160052
  • 资深设计师心得:网格,更科学的排版方法
  • 发表日期:2018-08-15   浏览:2318   关键词: 资深设计师 界面排版 网格布局
  • 9b2qitkmnw3cfdav.jpeg

    作者:sky,微信公众号“我们的设计日记 ”

    为什么要学习网格

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

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

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

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

    2. 网格的基础概念   

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

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

    ▲ 移动端一般分为 6 列

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

    内容模块

    也叫内容区域,填充设计内容,模块是由行和列交叉创建的空间单位。

    组合区域

    区域是形成组合元素的列,行或模块的分组。

    水槽

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

    ▲ 图中橙色区域就是水槽

    这里做设计时候是模块和模块之间间距,最好不要放内容。

    屏幕边距

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

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

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

  • 相关新闻
    • 如何搭建景区网站建设?
      搭建一个景区网站建设的很有必要的,因为做了网站可以增加客户对旅游景点的信任,还有一方面是能让旅游企业获得更多
      日期:2022-09-02 浏览:2223
      电商网站建设为什么要独立开发?
      线上购物的基础就来源于企业的电商网站建设,做好电商网站,才能让客户在线上购物,而且现在市面上有很多的电商网站
      日期:2022-03-24 浏览:2878
      郑州建网站细节分析说明
      郑州建网站要重视产品介绍和展示,作为网站建设,其最重要的一个特点就是能够较好的进行产品的推广和宣传
      日期:2021-12-26 浏览:3036
  • 一个企业的成长,从无到有,从一个人到一群人,从一种元素到元素集合;或多或少、都要有品牌意识的存在……