狗万体育安卓版营销101:什么是网格(设计)?

2020年6月12日,
分享

营销有自己的语言。这是我们的最新产品旨在帮助新的营销人员学习这门语言的一系列帖子.你发现自己在入职时最常向新员工解释的术语是什么?让我们知道

这篇文章最初发表于营销夏尔巴电子邮件时事通讯

在之前的MarketingS狗万体育安卓版herpa网站上的一篇营销101文章中,你可能读过关于三分法的内容,“……一个基本的构图和构图指导原则,能让观众看到一个平衡、更自然、更讨人喜欢的图像。”(查看博文在这里如果你还没有读过的话。)

三分法则是网格的一个例子,特别是一个3 x 3的网格,主要用于图像、照片、绘画,可能还有其他媒介,如登录页。虽然它可能是最有名的网格,但还有很多其他网格可以帮助构建登录页的布局,并得到各地web设计师的认可。

一个网格是一个垂直和水平(或角)线相交的框架,用于将页面细分为页边距、列和模块(框),以在布局上构建内容。基本上,它是一个可视化的指南,用于将图像、文本和图形元素以有目的或合理的逻辑放置到页面上。

为什么要使用网格?

  • 这节省了很多时间。

经过一些练习后,您可以更容易、更快地看到文本和图像可以完美对齐的地方。你也不需要自己设计网格(除非你想),因为有许多流行的网格在网页设计布局中使用,一个谷歌搜索(并在下面提到)。

  • 它使协作更加顺畅。

网格可以成为设计团队每个成员必须遵循的准则的一部分,从而使项目上的协作更加容易。它使布局设计保持一致。

  • 网页看起来有组织和平衡的整体。

对多个页面使用相同的网格或类似的网格将有助于统一这些页面,使这些页面对访问者来说是可预测的,并且易于导航——尽管要小心不要让这些页面变得如此可预测,以至于布局变得枯燥乏味。

如何使用网格?

网格有基本元素;以下是概述:

  • 流线是引导视线穿过页面的标准对齐方式。
  • 利润率是页面边缘和内容之间的负间距。
  • 是分隔、包含和组织内容的垂直容器。
  • 模块是由列和行创建的单个空间单位(框),也有助于组织内容。
  • 空间区域由多个模块组成的区域,用于组织内容。

(这是一个视觉GIF):

网格的类型是什么?

您可以设计自己的网格或自定义其中一种主要的四种网格类型:手稿,列,模块化和层次结构。

  • 手稿网格是单列布局,主要用于基于文本的设计。对于像电子书和博客这样的文本较多的内容来说,它们非常适合。TokyoCreative的Page使用一个手稿网格,文本和图像一个接一个地组织在一个单一的栏。

  • 柱网有多个立柱和排水沟。它们主要用于具有不同大小和顺序元素的设计中。列的宽度通常相同,但有时布局设计要求一列或两列比其他列小或大。下面的例子来自Brainpickings乍一看可能有点牵强,但如果你仔细观察,就会发现出现是12列网格上的两个可见列。左边的文本有三列宽,右边的文本有九列宽。

  • 模块化网格甚至是创建模块的列、槽和行(大小相等的框)。
  • 空间区域由多个模块组成,例如,组合四个模块的空间以适合大图像。在按相同比例进行设计时,使用模块化网格非常好,例如在网上商店中显示商品。颜色狩猎有颜色调色板示例显示在相同大小的框和均匀的间隔在他们的页面上。
  • 分层网格是手稿网格、柱网和模块化网格的组合。它们被设置为强调页面上最重要的元素,使用来自一个或多个其他网格的元素组合来满足设计需要。例如,报纸网站经常使用此网格,如纽约时报

使用网格来设计网页

网页最常用的网格是分层网格和柱网,尽管移动设备使用四柱网,平板电脑使用八柱网,桌面使用12柱网或16柱网已变得更为常见。

这些列、排水沟和边距的大小完全取决于你和你的登陆页面需要什么,但它应该遵循一个比例。如果你使用的是线框图工具,比如Adobe XD、Axure、Sketch、InVision和其他许多工具,那么你可以根据不同的设备大小使用内置的列网格。

你可能还喜欢…

刚刚测试过的:库存图片还是真人?

狗万体育安卓版营销101:什么是移动断点?

狗万体育安卓版营销101:什么是寡妇和孤儿(在设计上)?

类别:设计标签:



我们不再接受MarketingSherpa博客上的评论,但我们很想听听你万博APP世杯版下载对“顾客至上”营销有什么了解。给我们一份致编辑的信分享你的故事。
Baidu