热门相关搜索

过滤器

设计中留白的力量

by 马德斯Soegaard | | 12分钟读取

皇冠官网登录想向你展示一个至关重要的工具,它可能会让作为设计师的你感到惊讶. 它就像音符之间的沉默一样被低估了. 然而,它的强大足以让人们留在你的页面上——换句话说,生存.

作品的布局和结构由许多元素组成 交互设计. 经常被忽视的,其中最重要的是 空白 (or 负空间),其他设计元素的内部和周围的空间.

对于一个网站或应用程序,许多不同的视觉元素组成了布局. 这些包括 排版,画的线,图标,图像等. Imagine a painting; these parts are the painted bits. 然而,他们都需要什么来形成这幅画? 他们需要画布! 空白就像画布:它是将设计中的元素结合在一起的背景, 让他们脱颖而出.

皇冠官网登录来看看为什么设计留白如此重要.

什么是空白?

空白区域是面积 之间的 设计元素. 它也是空间 个人 设计元素,包括排版符号(可读字符)之间的空间.

尽管它的名字,空白并不一定是白色的. 它可以是任何 color、纹理、图案,甚至是背景图像.

留白会导致设计师和客户之间的问题. 设计理论提倡使用白色空间来保证优雅和质量 用户体验. 可悲的是,许多客户和经理认为留白是浪费空间. 他们认为它可以用来容纳更多的信息或其他视觉元素.

恰恰相反, 留白是平衡设计元素和更好地组织内容以改善视觉传达体验的好工具. 如果你是一名技术作家,负责为一家厨房电器公司编写数百份手册, 你会努力找到文字和图像的完美平衡. Few people read manuals for pleasure; it is then crucial to hold the readers’ attention! 因此,留白是这个节目真正的明星,在文字和图片之间发挥作用. 它使每个页面看起来都不繁忙. 读者不需要拨打帮助热线,而是要消化这些故障排除建议.

当信息轰炸时,人们会感到沮丧. 皇冠官网登录是人,不是机器. 空白让皇冠官网登录平静,让皇冠官网登录“呼吸”.

和其他的一样 用户界面 元素, 作为设计师,你需要理解留白所扮演的角色,并尝试在它和其他元素之间找到合适的平衡.

微vs. 宏观空白

白色空间通常根据微观白色空间的密度及其与宏观白色空间的关系进行分类. 皇冠官网登录讨论的是比率和比例.

微空白

皇冠官网登录称之为设计元素之间的小空间 空白. 你可以在字里行间找到它. 它包括中间的空间 网格 图片和用来分隔菜单链接的图片.

微空白直接影响内容的易读性. 例如, 段落周围的空白会影响用户的阅读速度和理解能力. 如果文字出现在常规段落之外的空白处,人们阅读的速度会变慢. 他们发现这比没有空白的文本更难理解.

宏观空白

宏观空白是主要布局元素之间的大空间, 并对空间周边进行设计布局. 你会发现 大多数网站内容的左右两边都有空白, 以及网站内容块之间的空间.

与微观留白不同,宏观留白是整体设计的容器. 这是“大局”的空白——更容易注意到. 的主页可能是一个网站集中(有效地)实现宏空白的最好例子 谷歌.com. 谷歌的标志性外观非常简洁,但你注意到其他东西了吗? 那 简单平静的. 因为没有杂物,你的眼睛和大脑就没有那么多工作要做. 你可以专注于你在那里的原因:寻找一些东西!

谷歌的结局背后有一个很好的故事. 谷歌.Com是最早大量使用留白的网站之一. 刚开始的时候,互联网连接要慢得多. 用户测试的参与者会等待页面下载,尽管一切都已经就绪 在屏幕上. 他们不习惯看到这么多空白! 从这些用户测试中, 谷歌的设计师决定在页面底部添加版权声明,以便用户知道页面已完全加载.

所以,是什么决定了你应该使用哪些空白?

宏观和微观空间的使用取决于以下因素:

内容 -布局中的信息越多,宏空白的数量就越少. 相比之下,微空白的体积会增加. This compromise is vital; otherwise, 页面将是坚固的数据块:极难阅读! 例如, 博尔顿(2007)描述了新闻网站如何倾向于依赖微空白来为用户提供有效的易读体验. 用户的阅读舒适度至关重要.

设计 -用户界面设计影响布局中微观和宏观空白的比例. 设计师选择设计风格. 这可以 偏见 布局为1 类型 白色的空间在另一个.

用户用户研究 (包括人口统计信息)可以用来确定特定受众的宏观和微观空白的正确平衡. 没有什么“经验法则”可以在不同受众之间始终适用. 在用户体验方面,皇冠官网登录总是需要与皇冠官网登录产品或服务的目标用户进行核对.

品牌信息 -使用空白可以暗示公司的预算,从而暗示产品的质量. 想想苹果、奔驰和宜家等公司的品牌. 他们如何支持这个理论?

下图显示了BBC新闻网站旧页面上的宏观和微观空白. 和纸质报纸一样,新闻网站也很少使用留白. 相反,他们展示他们的 信誉 通过在页面上大量的内容. 它们反映了皇冠官网登录的世界是如何“发生”的!

积极与. 被动:探讨留白功能的另一种方式

除了区别 而且 空白,你也可以把空白看成 活跃的 or 被动.

主动留白 -用于增强的空白 页面结构 并帮助引导用户浏览页面的内容.

被动空白 ——应用于改善 美学 没有引导用户通过特定的阅读、流程或内容顺序的布局. 例如, 字体符号和段落行之间的空白就是这样起作用的(博尔顿, 2007).

上图显示了没有应用空白的文本之间的区别, 被动留白, 以及被动和主动空白应用:

  • 在图像的左边, 文本在字符之间没有任何空白, 行, 段落, 等. 皇冠官网登录立即注意到,缺少空白会使文本被压缩. 很难读.

  • 在中心示例中,皇冠官网登录添加了一些被动(和微)空白. 你有没有注意到你读起来比第一个容易多了?

  • 再看右边的例子, 皇冠官网登录添加了一些活动空白来引导皇冠官网登录浏览文本. 幸福的, 皇冠官网登录最初看到的硬“文字墙”已经变成了皇冠官网登录习惯的格式. 留白可以提高文本的整体可读性和流畅性,但皇冠官网登录需要 为了皇冠官网登录的眼睛和理智!

设计负空间需要考虑的三个因素

易读性

正如皇冠官网登录所看到的,微空白对于使界面内容清晰可辨是必不可少的. 作为一名设计师, 在选择设计字体规格时,应该考虑留白, 比如字体, 大小, color, style, 领先的, 字距调整, 和跟踪. 记住上一页的图片? 改变空白布局会影响阅读性能和整体用户体验. 快乐的读者更有可能停留在你的页面上.

设计基调和品牌

留白有助于整体设计的基调. 有大量宏观空白的网站可能反映了极简主义和奢华. 有少量宏观空白的网站可能会给人以信息丰富的印象, 就像新闻网站一样(Kyrnin, 2015).

注意:这些指示并不是“固定不变的”. 这样做总是最好的 测验 对用户使用空白. 只有他们能告诉你他们如何看待你的设计.

集中注意力

留白有助于引导用户浏览交互内容. 它可能有助于建立焦点,并将用户的注意力引导到特定的布局部分.

网站战略规划的一部分是优先考虑特定的元素或内容. You can use many visual methods to spotlight specific 元素; one is to play with the amounts of 空白 around these focal points. 品牌和印刷行业应用这一理论来吸引人们对品牌信息的关注.

的外卖

空白(负空间)是设计元素之间的区域. 它是设计师为用户体验(皇冠老牌网站)设计的另一个工具。. Remember that 空白 is not necessarily white; it’s just the name to indicate spaces where there are neither 用户界面 (UI) 元素 nor specific content.

作为设计师,你可以根据以下四个主要因素来引入空白:

  • 内容,

  • 设计,

  • 用户和

  • 品牌

使用 宏空白 在布局中组织内容,并引导用户通过显示的内容块. 使用 微空白 内部 设计元素的特点可以在文本、图像和内容块中看到.

皇冠官网登录也可以把空白看成是 被动 or 活跃的. 被动留白除了促进用户体验外,在设计中没有特定的作用. 这一切都是为了更容易阅读. 主动留白引导用户的注意力. 它更多的是要脱颖而出,并做出声明.

参考文献 & 从哪里了解更多信息

网上有许多皇冠老牌网站留白及其在设计中的相关性的文章. 下面是一些文章,你可以从中深入了解负空间的力量和用法.

Boag P. (2011年2月15日) 为什么留白很重要. Boag世界. [2014年6月20日]

博尔顿,M. (2007).空格. 单独列出一份清单. (2015年4月)

Kollin Z. 用户体验神话.误解28:空白是浪费空间. [2014年6月20日]

Kyrnin J. 空白在网页设计中的重要性. 网页设计 基础知识. [2014年6月20日]

特恩布尔,C. 在你的设计中使用空白(或负空间). 网页设计图坦卡蒙加. [2014年6月20日]

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

每周获取用户体验洞察

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