网格的历史:使用网格构建更好的UI设计

网格就像无形的粘合剂,将一个设计连接在一起。即使每个元素之间存在着物理上的隔阂,也有无形的东西将它们连接在一起。

网格的历史:使用网格构建更好的UI设计

虽然网格和布局系统是设计传统的一部分,但在我们生活的这个多屏世界中,它们仍然具有现实意义。科技设备从根本上改变了我们搜索信息的方式和日常生活中的工作模式。今天,90%的媒体互动都是基于屏幕的,人们通过手机、平板电脑、笔记本电脑、电视和智能手表来观看内容。多屏的行为正在迅速成为一种常态,为多屏设计已经成为企业不可或缺的一部分。作为设计师,我们希望为使用我们产品的人提供愉悦的体验,而网格可以帮助我们实现这一目标。

通过将不同的设计元素捆绑在一起,以实现有效的层次性、对齐和一致性,网格可以帮助设计师打造出更好的产品,而不需要花费多少精力。如果执行得当,你的设计就会显得周到而有条理。

在这篇文章中,我整理了很多关于网格的信息,比如:

  1. 什么是网格;
  2. 网格的简史;
  3. 网格的基本理论;
  4. 四种类型的布局网格;
  5. 交互设计中的布局网格;

1、什么是网格?

用大白话来说,网格是由一系列的线(垂直或相交)组成的结构,将页面划分为若干列或模块。这种结构可以帮助设计者在页面上安排内容。虽然网格的线条本身不一定是可见的(虽然在某些设计中,它们是可见的),但这种结构可以帮助你管理页面上要对齐的元素之间的比例。这个网格将作为页面布局的框架。把它看成是一个骨架,设计师可以在这个骨架上组织图形元素(例如,文字部分、图片和其他功能或装饰性元素),以一种易于理解的方式。

网格的历史:使用网格构建更好的UI设计

网格使设计师能够在设计中构建坚固的结构和形式。

网格系统起源于印刷设计,但也被应用到了很多学科。事实上,如果我们放眼望去,就会发现我们日常使用的很多东西都是用网格设计的:

网格的历史:使用网格构建更好的UI设计

网格的历史:使用网格构建更好的UI设计

网格的历史:使用网格构建更好的UI设计

网格的历史:使用网格构建更好的UI设计

2、网格简史

在我们深入探讨布局网格的细节以及如何将其应用到数字产品中之前,我们有必要回过头来看看过去,了解一下基础知识。这些知识将帮助我们更好地进行数字体验设计。

网格和早期书籍设计

网格与排版系统有着密切的联系。作为一种系统,网格最早是用来安排纸上的手写文字,后来被应用于手稿排版。从早期的书籍设计开始,网格就开始帮助设计者安排页面排版,帮助用户进行阅读行为。

网格的历史:使用网格构建更好的UI设计

英格兰圣奥尔本斯(St.Albans Psalter),十二世纪。

文艺复兴时代,和谐设计

文艺复兴时期的绘画对网格系统的发展产生了重大影响。艺术家们努力创造出完美的几何图形,形成了居中对称的画布布局,这也是这一时期艺术家作品的一大特点。

网格的历史:使用网格构建更好的UI设计

马萨乔(Masaccio),《致敬的钱》(The Tribute Money),布兰卡奇教堂(Brancacci Chapel),1425年

到了13世纪,法国建筑师Villard de Honnecourt创造了一种图样,试图实现 "和谐设计"。该图将网格系统与黄金比例合并在一起,以产生基于固定比例的页边距的页面布局。这一技术至今仍在使用,大多数印刷书籍和杂志的设计师都在使用Villard de Honnecourt的图样来创造平衡设计。

网格的历史:使用网格构建更好的UI设计

Villard de Honnecourt的图仍然是设计书籍封面等印刷对象的指导原则。它显示了如何找到平衡以创造优雅的外观

网格和印刷设计

从印刷术开始(15世纪中期)到工业革命(18世纪末),书籍是印刷术的主要产出。除极少数例外,一般情况下,字体一般是每页只设一栏,并对称地放在书页上。

网格的历史:使用网格构建更好的UI设计

文艺复兴时期的书

产业革命与争夺

工业革命标志着印刷品大生产的开始。报纸、海报、传单和各类广告等印刷品的兴起,对印刷品设计师提出了很高的要求。设计师们必须解决两个问题:向不同的人群传达不同的信息,并允许自然的扫描行为,同时防止不同的版面争夺读者的注意力。

网格的历史:使用网格构建更好的UI设计

带有广告的报纸页面,法国巴黎,1919年

SWISS SCHOOL

我们今天所熟知的网格与瑞士的字体设计息息相关。在第一次世界大战时,一直保持中立的瑞士成为欧洲各地创意人士的聚集地。由于印刷出版物必须用三种官方语言---德语、法语和意大利语---设计者们需要一个新的网格系统来实现这一点。像Jan Tschichichold和Herbert Bayer这样的排版师用模块化的方法解决了这一问题。第一次,白色空间被用作版面设计中的动态组件,这导致了复杂的网格系统的发展。

网格的历史:使用网格构建更好的UI设计

3、网格的基本理论

无论你是从事平面设计还是网页和移动设计,你都需要了解网格理论的基础知识。

网格的剖析

无论简单或复杂,所有的网格都有一些共同的部分:

板面

所谓板面,是指设计的区域。在纸质书上,板面是指页面的大小。在网络上,板面是指浏览器窗口的大小。

页边距

页边距是指板式的边缘与内容的外缘之间的负空间。

网格的历史:使用网格构建更好的UI设计

列和水槽

在最基本的形式下,网格由两个主要部分组成:列和水槽。列是网格的构件。列之间的空间被称为水槽。列和水槽共同占据了网格的水平宽度。

网格的历史:使用网格构建更好的UI设计

模块

模块是由列和行的交点创建的单个空间单位。

网格的历史:使用网格构建更好的UI设计

4、四种类型的布局网格

列、模块、巷道和边框可以用不同的方式组合成不同类型的网格。下面是四种标准的排版网格:

手稿网格。

列网格。

模块化网格。

基线网格。

让我们来看看你可能会在什么时候使用每一个。

手稿网格

手稿网格(也就是通常所说的单列网格)是最简单的网格结构。它本质上是一个大的长方形区域,占据了格式内的大部分空间。手稿网格适合于连续的文本块。然而,它们并不局限于文字,图片也可以用来填充块状物。

既然有了这个名字,人们自然会把手稿网格和印刷版联系在一起。手稿网格传统上用于书籍,是一种很好的排版方式,用于呈现连续的文字块。

网格的历史:使用网格构建更好的UI设计

iA Writer中的原稿网格

多列网格

顾名思义,一个多列网格有几列。请记住这个简单的规则。你创建的列越多,你的网格就越灵活。

多列网格对于包含不连续信息的布局很有用。当你使用多列网格时,可以为不同类型的内容创建区域。例如,你可以使用一个特定的列,只为一个插图。

网格的历史:使用网格构建更好的UI设计

模块化网格

多列网格将页面垂直分成若干列,而模块网格则将页面垂直和水平分成若干模块。列和行以及它们之间的巷道形成了一个由单元格或模块组成的矩阵。

当您需要对复杂的布局进行更多的控制时,模块化网格是很好的选择。模块化网格为页面提供了灵活的格式,并允许你创建一个复杂的层次结构。网格中的每个模块可以包含一小块信息,或者相邻的模块可以组合成块。

网格的历史:使用网格构建更好的UI设计

基线网格

基线网格是指导设计中的垂直间距的底层结构。它主要用于水平对齐和层次结构。类似于你在设计中使用列和模块作为指导,你可以使用基线网格来建立布局的一致性。使用这种类型的网格就像在一张有规则的纸上书写一样--网格可以确保每一行文字的底部(基线)与垂直间距一致。这使得基线网格不仅是一个很好的排版工具,而且当你在页面上布局元素时也非常有用,因为你可以快速检查页面上的东西是否缺少一行空间。

网格的历史:使用网格构建更好的UI设计

基线网格可确定设计的垂直间距。在此,通过相对于基线网格放置水平参考线来创建模块化网格。

5、交互设计中的布局网格

交互设计改变了我们对网格的思考方式。交互设计是动态变化的,没有固定的尺寸,因为人们使用不同类型的设备与产品进行交互,从智能手表的小屏幕到超宽的电视屏幕,交互设计是流动的,没有固定的尺寸。在使用产品时,人们经常会在多个设备之间移动,以完成与该产品的单一任务。尽管屏幕大小不同,但设计师必须以最直观、最容易理解的方式组织内容。实现这一目标的一种方法是使用布局网格系统。对于交互式设计来说,布局网格更适合于交互式设计,因为它定义了设计的底层结构以及每个组件如何响应不同的断点。这种类型的网格更快,也更容易在多屏幕和分辨率下进行设计。

网格的历史:使用网格构建更好的UI设计

数字化产品设计中的网格系统将页面上的元素组织起来并连接空间。网格系统可以从以下几个方面提高设计的质量(功能上和美学上)和设计过程的效率。

创造出清晰和一致的效果

网格是设计中秩序的基础。比例、韵律、空白空间和层次结构都是直接影响认知速度的设计特征。网格在整个界面中创造并强化了这些元素的一致性。一个有效的网格可以引导眼睛,使人们更容易、更愉快地扫描屏幕上的物体。这在数字产品中尤其重要,因为它们是功能性的,这意味着人们使用产品来完成特定的任务,例如发送信息、预订酒店房间或叫车等。一致性可以帮助浏览者了解到下一个信息在哪里可以找到下一个信息或者下一步该走哪一步。

提高设计的理解能力

人的大脑在一瞬间就会做出判断。一个糟糕的设计会让产品看起来不那么好用,也不那么值得信赖。网格通过提供一套规则,比如说元素应该在布局中的位置,来连接和强化设计的视觉层次感。

响应式

响应式设计不再是一种奢侈品,而是一种必需品,因为人们在不同屏幕的设备上体验应用和网站,其体验范围很广。这意味着设计师不能再为单一设备的屏幕而构建。多设备格局迫使设计师们不得不从动态网格系统的角度来思考,而不是固定的宽度。使用网格可以在不同屏幕尺寸的多个设备上创造出一致的体验。

加快了设计流程

网格使设计师能够管理UI元素之间的比例,如间距和边距等。这有助于从一开始就创建完美的像素设计,避免因调整不正确而导致的及时返工。

使设计更容易修改和重复使用

与印刷品生产不同,数字产品是永远不会完成的--它们是不断变化和发展的。网格提供了一个坚实的基础,因为当所有的东西都符合一个网格时,以前的解决方案可以很容易地重复使用,以创建一个新的设计版本。网格是一个骨架,可以用来制作完全不同的外观。

便于协作

网格系统通过提供一个放置元素的计划,使设计师更容易在设计上进行协作。网格系统有助于界面设计工作的解耦,因为多个设计师可以在不同部分的布局上工作,知道他们的工作将被无缝地整合在一起并保持一致。

网格是规范的基本组成部分

大多数设计项目的实施都需要设计师和开发人员之间的合作。对于一个UI设计师来说,最糟糕的事情莫过于提交一个像素完美的设计模拟图,却发现它在生产中看起来完全不同。

网格是一个框架,通过允许开发人员在代码中预设与列大小相对应的类,加快了设计师与开发人员之间的工作流程。这可以防止不一致的实现,并减少了构建网站所需的时间。

布局网格的最佳实践

虽然布局网格可以帮助设计者在设计中实现一致的、有条理的外观,并管理好元素之间的关系和比例,但在使用网格设计时,有一些事情需要注意。

选择你真正需要的网格

网格的历史:使用网格构建更好的UI设计

"有多少列?"是设计师在开始做网格工作时的第一个问题。

许多流行的框架都采用了12等宽列的网格系统。在合理的小数中,12这个数字是最容易被分割的;可以有12、6、4、3、2或1等距的列。这给了设计者极大的版面灵活性。

网格的历史:使用网格构建更好的UI设计

具有12个等宽列的网格系统既坚固又灵活,并提供了组织结构的不同方法。

虽然12列网格是很多设计师的热门选择,但它并不是一个一刀切的解决方案。当你选择网格时,选择一个你真正需要的列数的网格。如果你的布局只需要8列,那么使用12列网格是没有意义的。

网格的历史:使用网格构建更好的UI设计

如何知道要用多少列?在决定列数之前,先勾勒出你可能的布局(纸质草图就可以了)。这意味着你需要知道屏幕上会有哪些内容。内容将定义网格,而不是相反。有了草图在手,你就能更好地了解你需要的列数。

网格的历史:使用网格构建更好的UI设计

考虑约束

在设计网格时,要考虑到你的设计的限制因素。例如,你的大部分用户可能会使用某种特定类型的设备(如手机)。这意味着,所有的设计决策(包括网格)都需要考虑到这个制约因素。学会用约束来设计是一种技能,它将帮助你专注于对用户真正重要的东西。

框定重要的对象

通过给重要的元素增加视觉上的分量来引导用户的注意力。提示:与只填充一列的项目相比,跨多列的项目在视觉上更重要。

网格的历史:使用网格构建更好的UI设计

不怕跳出格局

网格列(不是盟友)是每个内容块的开始和结束的位置。这个规则很简单,也很容易遵循;尽管如此,设计师们经常会有意地打破网格列,以增加视觉趣味或强调某些元素。通过将元素从网格中打破,你会突出它们,因为浏览者会很快看到这些打破的元素,并被吸引到它们。

网格的历史:使用网格构建更好的UI设计

打破网格会使某些元素脱颖而出。将元素宽松地放置在网格上会更加强调它

如果你决定打破网格,要知道你在做什么。把东西从列中拿出来,会打破视觉层次感,影响用户体验。

注意横向和纵向的间距都要注意

铺设网格需要注意横向和纵向的节奏,这两者同样重要。考虑一下下面几个例子的区别。在第一个例子中,网格的列宽和水平间距是一致的,但垂直间距的变化会产生视觉噪音。而在第二个例子中,水平间距(即内容块之间的空间)和垂直间距(列之间)都是一致的,这使得整体结构更加整洁,内容在视觉上易于使用。

网格的历史:使用网格构建更好的UI设计

注意水平和垂直间距。在左侧,不同的垂直间距。在右边,一致的垂直间距

以基线网格为基准,对齐元素

如前所述,基线网格可以用于水平对齐和层次结构。将UI设计元素(文本、图像和内容容器)对齐到基线上,意味着你需要让它们的高度是基线值的倍数。例如,如果你选择了8像素作为基线值,想要对齐文本,你需要使字体的行高是基线值的倍数,这意味着行高可以是8、16、24、32等。注意,字体大小不一定是基线值的倍数,只需要行高就可以了。

优化移动版的网格

移动网格的空间有限,使得多列布局并不是真正的可行。移动内容一般都是限制在一到两列。在为移动端设计时,可以考虑使用瓷砖布局网格,其中列和行的高度是一样的。这将使整个设计呈现出方块砖的外观。

网格的历史:使用网格构建更好的UI设计

在移动端,用户的屏幕空间有限,每次只能看到少量的内容,然后才需要滚动浏览。因此,在设计网格布局的时候,要让图片足够大,便于识别,但又要足够小,让用户一次可以看到更多的内容。

网格的历史:使用网格构建更好的UI设计

测试一下

你的网格并不是一成不变的。就像设计的任何部分一样,网格应该根据测试结果进行测试和迭代。

结论

至此,你应该对网格系统有了一定的了解,了解什么是网格系统,以及如何将其应用到设计过程中。对如何使用网格系统的理解将来自于实践经验。

引用Josef Muller-Brockmann的一句话:"网格系统是一种辅助,而不是保证。它允许有多种可能的用途,每个设计师可以寻找适合自己个人风格的解决方案。但必须学会如何使用网格;这是一门需要实践的艺术。"

本文由 新媒体之家 作者: 追波范儿 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
5

发表评论