热门相关搜索

过滤器

网格系统:构建一个坚实的设计布局

by 马德斯Soegaard | | 13分钟读数

现在皇冠官网登录已经在三分法则的文章中看到了一些网格的工作, 让皇冠官网登录更深入地研究一下. 作为一个概念,它从根本上涉及到皇冠官网登录作为设计师工作的结构和背景, 人们很容易忽视网格的力量,而更多地考虑皇冠官网登录想要创建的元素. 许多传统艺术家仍然在模糊的交叉线条上描绘他们的杰作. 帮助皇冠官网登录最大限度地利用皇冠官网登录的工作表面,并精确地创造, 皇冠官网登录设计师有一个工具来回应这一点. 皇冠官网登录称之为 网格系统.

网格的故事

实现有组织设计的最简单方法之一是应用网格系统. 这是一种久经考验的技术,最初在印刷布局中得到青睐. 技术含量低,价格便宜, 这是一个伟大的资源,你作为一个设计师-考虑它的十大工具在你的办公室. 网格在 交互设计 还能在不同屏幕尺寸的多台设备上提供一致的体验吗. 当用户看到熟悉的功能以他们期望的方式呈现时,他们会很高兴.

网格系统有助于根据已排序的列和行对齐页面元素. 皇冠官网登录使用这种基于列的结构来放置文本, 图片, 并在整个设计中以一致的方式发挥功能. 每个元素都有它的位置,皇冠官网登录可以立即看到并在其他地方复制. 想想皇冠官网登录在地图上发现的网格. 岛屿, 城镇, 湖泊将出现在地图的确切部分, 在一组南北/东西坐标上. 它们总是出现在其他地图的相同位置. A 全球定位系统(GPS) accesses these coordinates to help guide us; imagine the chaos if there were no grid system for it to latch on to and keep us right on the road!

网格系统最初被用于安排纸上的笔迹,然后在出版中用于组织印刷页面的布局. 鉴于打印页面和虚拟页面有很多共同之处,皇冠官网登录在网页和应用程序设计中也使用它,这应该不足为奇. 为虚拟页面创建网格系统要比为物理页面创建网格系统复杂一些——浏览器处理信息的方式不同, 屏幕大小不一.然而,令人高兴的是,原则没有改变.

这并不是说使用网格系统没有任何阻力. 一些设计师认为网格有局限性 创造力.虽然这可能是真的, 重要的是要认识到,许多设计师经常使用网格系统,因为它是 so 有效组织信息.

最好的布局是不分散内容的内容. 由于其数学精度,网格系统是这种布局的一个很好的例子.

网格作为设计原则

Villard De Honnecourt,一位13世纪的法国艺术家,将网格系统与 黄金比例 根据固定的比例,制作页边距的印刷版式. 正如大多数印刷书籍和杂志所证明的那样,这种方法一直延续到今天. 出版商, 编辑和设计师在保持传统上付出了很多努力, 不仅因为这是最好的方法,还有另一个重要原因. 读者(i).e.用户)希望找到所有东西都在适当的位置. 还记得, the human eye is drawn to elements; it is also easily upset if it is confused or made to work out a problem it was not expecting to encounter.

作者/版权所有人:Jason Prini. 版权条款和许可:CC BY-NC-SA

皇冠官网登录做一个快速实验,看看网格有多有效. 如果你手边有两张白纸,在其中一张纸上随机画四到五个形状. 不要担心整洁和几何-这只是一个简单的 插图. 当你完成时, 当它们出现在第二页空白纸上时,试着复制它们(请不要“欺骗”,把第二页放在第一页下面,然后再画上形状来描摹它们). 即使你有一双敏锐的眼睛和一双可靠的手, 您将注意到,复制最初的设计实际上是不可能的, 所有东西都出现在同一个地方.

这个实验的第二部分是可选的,但它将有助于阐明要点. 如果你周围有方格纸或图表纸,拿两页纸重复上面的步骤. 你有没有注意到,当你能控制自己的手时,复制你的原文会变得容易得多? 由这种特殊纸张的交叉线组成的网格给了皇冠官网登录制作真正精确副本的礼物. 通过训练皇冠官网登录的眼睛看横的列数和横的行数, 皇冠官网登录可以徒手复制,几乎像用复印机一样完美.

本文顶部的图像说明了打印页面的组成部分:标题, footer, 还有左右边距. 在页边空白处,设计师设计了大小相等的字体 它们之间有一个空格,称为 地沟. 知道页面可以包含一个或多个列, 设计人员可以在这些列中放置图像和文本等元素,以提供与其余内容的对齐. 图像和段落区域可以在一个或多个列中重叠.

类似于垂直网格线创建这些有用列的方式, 水平网格线引导设计中元素的高度. 网格的这些部分被称为 . 作为设计师,皇冠官网登录希望每行的高度与列的宽度成比例. 例如,列宽与行高之比为3:2、4:3等.

注意皇冠官网登录如何在页面布局中均等地排列行, 以及如何在每一行之间插入排水沟. 然后,皇冠官网登录可以将页面内容的元素放在一行或多行中, 如上图所示.

交互设计中的网格

在数字世界里, 在组织页面上的元素时,网格系统的作用类似于打印布局. 另外, 它为设计师提供了一个指南,以创建多种布局,支持响应主题的不同屏幕尺寸.

皇冠官网登录将网页布局划分为用页边距分隔的列, 使用空格, 他们之间. 列的宽度和边距相等, 皇冠官网登录可以根据设计的布局将内容放置在一个或多个列中.

网格的应用意味着设计可以被分成多个列,可以帮助设计师组织内容. 例如,皇冠官网登录可以有1、2、3、6、12或更多列. 与早期的计算机相比,今天的屏幕分辨率达到了非常大的尺寸. 即便如此, 使用960像素宽度可以确保设计正确地显示在许多计算机屏幕上. 它还可以帮助设计师修改移动设备的布局.

上面的例子显示 网格系统 这是基于960像素的分辨率 http://960.gs,提供了一个有用的指南来建立你自己的基于网格的网页布局.

网上也有其他有用的构建网格布局的工具:

  • http://1200px.com/1200px:这个网站可以帮助你建立一个网格系统,用于比960像素风格更广泛的网站设计.

  • 黄金网格系统:这个网站可以帮助你建立一个网格系统,并优化它的移动响应式显示.

如果您想为了不同的目的进一步探索网格系统, 你可以在以下网站找到一些:

拿走

网格系统长期以来一直在帮助各种类型的艺术家(包括作家). 首先由13世纪的艺术家使用, 是谁把它和黄金分割率结合在一起的, 网格系统已被尝试, 测试, 以及几个世纪以来值得信赖的方法论. It firstly empowered writers to position their handwriting neatly on paper; later on, 它成为出版业的通用标准. 各地的出版社在制作既赏心悦目又符合读者期望的作品时,都严格遵守网格系统.

作者/版权所有人:Lauren Manning. 版权条款和许可:CC BY 2.0

皇冠老牌网站元素的设置,网格提供了极高的精度. 皇冠官网登录可以在地图上看到这一原则, 注意位置是如何用表示坐标的网格线来精确定位的. 对精确制图的追求将使航海家能够在世界上未知的广大地区发现新的地方. 现在, 用网格线标记经度和纬度, 全球定位系统使皇冠官网登录可以到达任何皇冠官网登录想去的地方.

然而, 制图师的地图代表了固定的“设计”,多年来只会发生难以察觉的变化. 制图学可能是一门科学, 但网格, 用他们精确的数学, 是艺术家需要的杰出工具吗, 太. 纵观历史, 艺术家们一直在利用网格线来规划和绘制他们自己的图像, 哪些捕获了最好的, 最令人愉悦的比例.

易于创建和几乎免费, 网格还使皇冠官网登录的网页和应用程序设计师能够以一种有组织和精确的方式布局皇冠官网登录的工作. 通过使皇冠官网登录能够将元素插入到由它们的相交线创建的框中, 网格使皇冠官网登录能够保持一致 用户体验 跨多种设备. 例如,皇冠官网登录的电脑和智能手机屏幕的尺寸和布局不同. 计划好皇冠官网登录的工作,使其能够适应不同的平台,使皇冠官网登录的设计保持完整, 按比例,在皇冠官网登录的用户期望找到它们的地方.

设计人员使用列和行, 按设定的列宽行高比例成型(如3:2或4:3), 水槽(这些“盒子”之间的空间)以最好的方式呈现皇冠官网登录的设计元素.

尽管皇冠官网登录拥有非常高的屏幕分辨率,这让皇冠官网登录能够展示更令人印象深刻和逼真的设计, 通过使用基于宽度960像素的网格, 皇冠官网登录可以确保皇冠官网登录的设计可以正确地转换到许多电脑屏幕和移动设备上,如手机. 然而, 皇冠官网登录拥有丰富的资源,可以帮助皇冠官网登录微调网格系统的选择,以匹配皇冠官网登录想要的设计.

但是,您可以使用网格系统来构建您的设计, 你应该记住其他原则, 比如黄金比例. 为了创造一致的用户体验,还需要创建一个 令人愉快的 用户体验将在许多设备上保持一致. 如果你记住,你的选择将与用户眼睛的已知倾向相一致, 你将能够创造出更有条理的醒目设计, 正如你的用户在电脑上看到的那样, 平板电脑, 或者手机屏幕.

参考表

Bigman,. 设计网格的历史. 99年设计. 检索自:http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1. [2014年10月1日]

弗里德曼,V. 基于网格的设计方法. Smashing Magazine. 检索: http://www.smashingmagazine.com/2007/04/14/designi... [2014年10月1日]

Shillcock R. (2013)所有皇冠老牌网站网格系统. 网页设计 图坦卡蒙+. 检索自:http://webdesign.将.com/articles/all - -网格系统-设计- 14471. (2015年,可能)

英雄形象:作者/版权所有人:Jeremy Keith. 版权条款和许可:CC BY 2.0

每周获取用户体验洞察

加入 312034位设计师 谁从皇冠官网登录的通讯中获得有用的用户体验技巧.
需要一个有效的电子邮件地址.