排版 on Victor42

使用无序列表的7项注意

hi@victor42.work (Victor42) — Sun, 16 Apr 2017 00:18:42 +0000

[国外设计第168期]

摘要：小圆点有助于分割大段文字，使得复杂的文章和博客更容易消化，突出关键信息。

有时候，最好的信息展现方式就是无序列表。无序列表能吸引注意、便于浏览、简化文本，并且表达出项目之间的关系。

网站不是一个适合长篇大论的地方。相比之下，网站的读者更喜欢文案以某种易于浏览的形式组织起来，能让他们轻松跳过大段文字，直达自己感兴趣的部分。

有许多种网页文本格式的技巧，能够分割大段内容。无序列表和加粗、缩进、行间距、彩色文字，都是辅助网页内容高效阅读的重要手段。

区区几个小圆点能够吸引视线，并且让复杂的概念易于理解。小圆点能让读者感知到内容的简明和重要。这并不奇怪，在可用性研究中，我们观察到读者对无序列表满怀热情。网页的读者希望快速消化内容。

我们可以对比下面这两个版本。你会发现第2个版本中的内容更易阅读。这是因为它以纵向列表的形式展现。相比之下，在第1个版本中，读者只能在结构不太清晰的段落中寻找。

版本1

我们的Spa度假套餐包含了2晚住宿，2次50分钟的任选spa项目，1顿两人份的上门早餐，到达时还有礼品篮相赠。

版本2

我们的Spa度假套餐包含:

2晚住宿
2次50分钟的任选spa项目
1顿两人份的上门早餐
到达时赠送礼品篮

不必担心版本2占了更大的纵向版面。如果（或者说除非）用户对内容感兴趣，随着视线的下移，他们完全不介意往下滚动。事实上，相比那些用长篇大论吓退用户的网站，恰当地使用了无序列表的网站，会更加亲切易懂，用户也会更有动力向下滚动。

使用无序列表的7条建议

1. 每一项的长度要比较接近

无序列表在展示相关内容时会达到最佳效果。其中的每一项都应该有同等的重要性。可能的话，让每一项的长度保持接近，就不会有明显的主次之分。保持统一的外观能让眼睛更舒适，使列表显得不那么杂乱。

错误用法

请带上以下物品参加露营：

睡袋
去瀑布徒步旅行时要用到的洗浴套件
防晒霜
防水夹克应对可能的雨天。我们可能会遇到强烈的暴风雨

长度上的差异，使得列表项显得杂乱、不统一。

建议用法

请带上以下物品参加露营：

睡袋
洗浴套件
防晒霜
防水夹克

2. 除非顺序很重要，否则不要使用有序列表

有序列表的使用场合，通常是列表项必须按照某个特定顺序排列，例如程序步骤。或者数量很重要时才能使用，比如前十名的榜单。

如果列表项的顺序和数量不重要，那就不需要数字序号。这么做会使人困惑：我们在用户研究中发现，人们会错误地认为他们必须完成有序列表中的每一项，但其实他们只需要选择其中一项即可。

错误用法

请通过下列任何一种方式联系我们：

在线联系登记表
在线聊天
致电
亲自上门

这些数字序号，让列表项显得好像是要按照顺序步骤来执行，而不是几个独立选项。

建议用法

请通过下列任何一种方式联系我们：

在线联系登记表
在线聊天
致电
亲自上门

3. 在列表项中使用相似的句子结构

每一项都要有统一的措辞风格。多变的措辞影响句子通顺，会阻碍读者阅读（甚至导致困惑）。

用相同的方式组织每一项。确保无序列表的每一项以相同的语法元素开头（例如名词、动词），要么都是词组，要么都是完整的句子。

错误用法

在公园中请遵守以下规则：

将垃圾投入指定的垃圾桶。
巨大噪音会吓坏动物。
应该站在黄色的标记线区域。
保持公园干净，人人有责。

在这个例子中，4条语句都以不同的词语开头。

建议用法

在公园中请遵守以下规则：

将垃圾投入指定的垃圾桶。
不要发出巨大噪音。
站在黄线区域内。
尽量保持公园清洁。

第二个列表的阅读更顺畅，因为每个短语的开头都用了同一类词语——本例中是动词。

4. 避免在每一项开头重复相同的词语

如果可以的话，请省略“一个”、“是”、“这个”这样的词语，去掉每一项开头的重复词语。每个列表项开头的词语有所区分，能让列表更加容易分辨。

错误用法

如何挑选菠萝：

用闻的。它闻起来要甜。
用按的。它应该按下去结实但柔软。
用看的。它最好是金黄色。

建议用法

如何挑选菠萝：

闻。它闻起来要甜。
按。按下去应该结实但柔软。
看。最好是金黄色。

5. 使用清晰的、描述性的句子和词语来说明列表

引语（或者说说无序列表之前的那句话）很重要，因为它让读者知道列表的内容大概是什么，为什么重要。引语不必是完整的句子，也可以和列表的每一项组合成完整有意义的句子。

错误用法

不列颠哥伦比亚省的假期：

徒步旅行
艺术博物馆
在湖上划独木舟

引语（不列颠哥伦比亚的假期）没有充分描述列表。而且，列表中包含了假期要完成的事项，但艺术博物馆并不是一个动作。

建议用法

我们在不列颠哥伦比亚省的假期行程包括：

上山徒步旅行
参观艺术博物馆
在湖上划独木舟

6. 保持格式一致

关于大小写和标点有一些基本准则：

如果列表项是句子，那么每一项的首字母就要大写，并且以句号结尾。
如果列表项是词组，不需要任何标点结尾，也不是一定要首字母大写。但是我们还是建议首字母大写，这样更易于浏览。

错误用法

如果发现霸凌行为：

支持受害者
将事情告知成年人
鼓励受害者向成年人反映
通过表示关心来提供帮助

这些句子没有首字母大写【译者注：当然中文没这个问题】，而且结尾没有标点。

建议用法

如果发现霸凌行为：

支持受害者。
将事情告知成年人。
鼓励受害者向成年人反映。
通过表示关心来提供帮助。

错误用法

你可以通过____来保护环境：

回收纸张和塑料产品。
少用一次性物品。
捐赠旧衣服和闲置物品。
骑车与步行替代开车。

列表项是词组，因此不需要标点符号结尾。

建议用法

你可以通过____来保护环境：

可回收纸张和塑料产品
少用一次性物品
捐赠旧衣服和闲置物品
骑车与步行替代开车

7. 不要滥用无序列表，会导致它们丧失效果

就像所有的视觉设计技巧一样，过度使用都是有害的。如果看到满是小圆点和缩进的页面，你会吓傻的。明智地选择需要强调的内容。（如果你没发现本文中的无序列表是前后对比的案例，你就会觉得有点使用过头了。）

在有3项或更多重要信息时，纵向列表是最好的展示方式。如果项目更少，那就杀鸡用牛刀了，直接放在句子中通常效果更好。

避免嵌套使用列表，这样就很难理解了。如果一定要表现多层级的列表，每一级都要用不同样式的小圆点。

注意

这些只是一般规范。但是每个公司或组织可能会采用不同的格式。如果你的公司在遵循某套风格指南，你应该先了解指南，然后才决定是否遵循以上规范。文案撰写有一个重要的方面，就是在整个文档和网页中保持内容统一格式。

结论

纵向列表吸引视线，能使列表每一项各自独立。因此，它比行内的列表更有效，能让人更有效地浏览、参考和理解关键要点。

原文链接：https://www.nngroup.com/articles/presenting-bulleted-lists/

作者信息：HOA LORANGER Hoa Loranger is VP at Nielsen Norman Group and has worked in user experience for over 15 years. She conducts research worldwide, and presents keynotes and training on best practices for interface design. Hoa has consulted for companies such as Microsoft, HP, Allstate, Samsung, Verizon, and Disney. She authors publications, including a book, Prioritizing Web Usability.

网页设计师该向印刷设计学习的3件事

hi@victor42.work (Victor42) — Sun, 20 Sep 2015 10:52:00 +0000

[国外设计第103期]

了解这3条经典原则，能帮助你创造更好、更易懂的网页设计。

许多经典原则，例如那些字体设计原则，在线上仍然有效。图片由Peter Van Lancker提供，www.flickr.com/photos/petervanlancker

设计就是特定功能的构成——无论构成物是字节还是原子。这就意味着网页设计从它的祖先——纸墨中受益良多。

本文中，我们重点介绍几则印刷设计原则，它们在线上仍然适用。

熟练掌握后，你就能提升UI与UX设计水平，创造出更好、更易懂的设计。

01. 让读者保持专注

印刷设计专注于易读性，网页上也是如此：只是把“读者”换成“用户”而已。

目标应当是清晰的表达，并且让人能够轻松纵览整个设计。我们来看几个从印刷设计沿用过来的概念。

排版

就像报纸，用户不会阅读网站上的每个字——至少一开始不会。正如免费电子书《为人眼进行网页UI设计》里面描述的，扫视页面是用户的标准行为。

为扫视而设计时，有两种模式需要考虑。首先是F模式。

F模式排版：Creative Bloq的主页

F模式反映了用户最通常的扫视页面的方式。他们的视线从上面开始横向移动，然后沿着左边垂直移动，寻找突出的文字。

一旦找到激起他们兴趣的内容，他们又会开始横向浏览页面。

还有Z模式：

Z模式布局：MailChimp的主页

Z模式也是一种自然的浏览模式，通常用于报纸，网页上也是如此。用户在页面顶部水平浏览，然后向左下移动，在页面的下一行再次进行水平移动搜寻。

文字

和印刷一样，网页文字也应该有清晰的层次。选择适合的字号，有助于关键词在页面上突出，让用户更轻松的浏览页面。

清晰的文字层次：World Baking Day网站

我们来看看文字层次中一些常见的层级：

主要：页面上最显著的文字更大更闪耀，吸引用户的注意力。通常用于标题与装饰。
次要：介于中间的所有内容。不像标题那么显著，但要在页面的常规文字中突出显示。
再次：主要内容所选的文字。文字层次中的这一级，有助于使用户沉浸在正文中。
其他：更小的一级，使用斜体、粗体、下划线、不同颜色等等。

配合运用，建立文字的层次，可以创造出秩序，防止用户迷失其中。

要测试你页面的易读性，可以使用“3秒原则”：简略地浏览页面，然后看向别处。其中突出的内容有没有反映出你设计意图？如果是的，那你方向正确，继续保持；如果不是，则需要打回重新设计——可能确实如此。

02. 建立平衡感

无论平衡感来自于对称、非对称或是放射状，都是为了让设计创造出稳固与一致的感觉。如果用户在你的网页上感到轻松，他们会更愿意逗留。

图片或文字不要过于密集：时刻考虑元素的间隙。排版倾向于简洁——密集的布局会妨碍用户。眼睛难以接受杂乱，使人更难接受信息的流转。

考虑使用极简的设计，通过白色、黑色或非常深的背景和前景元素达到平衡。《为人眼进行网页UI设计》里讨论过，负空间的运用可以引导用户的注意力。

震撼的极简设计案例：鞋类品牌ETQ的网站

上面展示的ETQ网站，利用了负空间将视线引向所陈列的产品。页面底部对比鲜明的黑白色块，让用户选择尺寸或查看商品价格。

网页上极少干扰信息，创造了一种平静与秩序的感觉——当然，也希望有助于促成用户购买。

03. 创造可靠的设计

让你的设计对于所有用户都是可靠的。不要使用两种以上的字体，确保所有年龄层的用户都能阅读。过于杂乱会扰乱信息。

如果你发现自己在屏幕前手足无措，你的设计可能就包含了太多的图片。

选择配色方案时也要时刻为用户着想——如果是医院网站，使用冷静柔和的色彩；如果受众是青少年，则适合更鲜明的色彩。

UC San Diego Health的网站选用的配色很吻合它严肃的内容

下面是一些书籍设计中常犯的错误，同样适用于网页：

**未经过足够的测试：**始终要尽可能广泛对设计进行测试。内容可能会跨越多种媒介（网页、电子书、印刷品），这会使得文字有新面貌。而且，有些字体转换到新媒介上可能会变得不易阅读。找到适用于所有情境的字体非常重要。还要考虑你的设计在不同屏幕尺寸、不同分辨率和不同浏览器中如何展现。
**不恰当的语调：**为每个页面元素选择正确的语调。与字体一样，标题应该吸引读者注意，副标题作为标题的阐明或补充，正文要像一段友好的对话——温暖亲切，让读者渴望了解更多信息。
**不恰当的格式：**遵循你所选的媒介：否则，会一直浪费时间修改文件，应对CMYK用于印刷、RGB用于网站这样的问题。

深度阅读：UXPin的免费电子书，2015-2016趋势的网页设计手册

想要了解更多有用的UI与UX设计技巧，查看UXPin的免费电子书，《2015-2016趋势的网页设计手册》

在其中，你会看到166个手工挑选的案例，来自于Adidas、Intercom、Apple、Google与Versace这样的公司。还列出了100项免费的在线资源，帮助你加速设计流程。

原文链接：http://www.creativebloq.com/web-design/3-things-web-designers-can-learn-print-design-91516662

作者信息： Kyle Pereira Kyle is publishing and design studio manager of TLAC Design Studio. He has more than 20 years of experience in print, graphic design, computer graphics and prepress: www.tlac.ca

2015年至关重要的4种排版趋势

hi@victor42.work (Victor42) — Sun, 25 Jan 2015 14:01:00 +0000

[国外设计第73期]

近十年来，互联网已经发生了翻天覆地的变化，然而它其实一点也没变。如果看看10年前，我们会发现大批网站都有一套通行的排版模式。页头、页脚、侧边栏和内容区域，构成了这种直截了当的布局。这是人们预期中的网页排版。同时期Macromedia Flash的兴起，引领其他排版方式进入了一个新的时代。布局不必再拘泥于固定格式。当然，随着FLASH的衰退，这种方式也稍稍淡出……我说稍稍，是因为它如今又卷土重来了。

假如你研究一个流行的作品集网站，里面展示了当今的网页设计。毫无疑问，你会注意到网页的基本结构千变万化，根本没有固定形态。它可以伸缩变化成任何所需的东西。我认为这是响应式网页设计带来的最棒的副产品。事实上，新的准则，就是根本没有固定准则。

综上所述，我们能观察发现几种重大的排版设计趋势，能够代表我所理解的非常规布局。说它们非常规，是因为它们并不严格遵循某种准则或既定体系。但这种趋势的例子，即使没有几百，我也能找出几十个，归入这几类中。

本文中，你会看到有趣的非常规排版趋势大杂烩，希望它能给你带来启发，帮助你构思网页设计的基本结构。我们这就深入了解一下……

##分割屏幕

在这类中，我们精选的网站都用了垂直分隔线来分割屏幕。可能这么做有很多原因，通过研究大量此类案例，我发现主要有两点。

原因之一，有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。

原因之二，有时你要表现出一种重要的两重性。以Eight and Four网站为例。他们在此要表达的是，他们的核心竞争力来自植根数字领域，还有多才多艺的员工。这两点成就了他们。通过屏幕分割来表现这一点，是种令人愉快的方式。

##去界面化！

网页设计中的主要元素之一，就是容器元素：方块、边框、形状和所有类型的容器，用于将内容从页面中分离开。想象一个古板的页头，元素刚好容纳其中，与内容分隔开。如今的一项普遍趋势，就是去除所有这些额外的界面元素。

这是种极简主义的方式，但它更进一步，带来一些有趣的转变。

在这个例子中，他们把页头和页尾的概念统统去掉了。反而更像一个交互式杂货摊。从左向右的排列，就基本完成了内容层次的排布，有助于让排版更加直观。用于分隔导航和内容的界面就不需要了。取而代之的是漂亮的产品惊艳全场。

可以发现，移除任何感官上的页头和页尾后，内容得到了极大的强调。你会先看到公司名称，然后是关于他们经营内容（和场所）的清晰描述，而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌，这个方式太棒了！它造就了优美的视觉流程。有趣的是，当你滚动页面时，页头和界面才出现。美观且有效的排版，这种模式的运用颇具启迪性。

##基于模块或网格

接下来这些排版方式，建立在模块化或类似网格的结构上。在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。

这个案例完美地诠释了这一点。整个设计都是响应式的。随着屏幕尺寸变化，每个模块都改变尺寸来适应空间。均匀划分屏幕使得设计更易于适应。他们还（在大屏幕尺寸中）引入一些元素来打破模块界限的束缚，这是画龙点睛之笔。

这个案例更加激进。当然，它也包含了模块化的方式，让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用，之前的案例是没有的。模块通过尺寸变化，来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险，它使每样东西尺寸都相同，这意味着无法强调任何事物。相反，这个案例还是清晰地突出了主要元素。

##一屏以内

最后，还有一些网站采用这样的方式，让设计完全在一屏内展现。这是响应式设计的一个分支，因为它会适应屏幕尺寸。不过在这个绝佳案例中，整个设计的适应方式完完全全吻合屏幕，没有产生滚动条。没有滚动，意味着内容必须极度聚焦，而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度，令人耳目一新。

##结论

虽然我把这几种趋势分开讲，但其实他们都表现为积木块的形式。这些积木可以通过很多不同方式组合。事实上，本文中展示的很多案例，都可以放在我们讨论过的其他几个分类中。现代网页的布局如此多样化，而且确实合乎使用，造就了如此激动人心的互联网媒体。

原文链接

为网页文字的可读性而设计

hi@victor42.work (Victor42) — Sun, 14 Sep 2014 00:01:53 +0000

[国外设计第57期]

可读性：“阅读的状态或质量，是一种影响印刷品持续阅读难易程度的属性。”——dictionary.com

文字可以是优美的、简单的、狂放的、有趣的、激动人心的，还有很多其他种类。它能激起情绪，帮助用户理解你所要传达的讯息。字体有很多种，但有一点是共通的——它必须具有可读性。

这是一个时常被遗忘的因素。设计师们往太狭小的空间填入太多信息，或是选用了外观胜过可读性的字体。但重点是：如果字体无法阅读，你的设计就无法完全生效。

尽管有些耸人听闻，但它几乎是普适规律。你会问：“作为艺术元素的那些字体怎么说？” 不可阅读的字体在这类设计中确实能发挥作用，但是，仅限于与可读的文字搭配使用。

###在狭窄空间体现可读性

什么使得文字能够阅读呢？它实际上是很多因素共同作用的结果，包括行长度、行距、字体样式、外边距和内边距，还有颜色和对比度。

每一个元素，都影响着屏幕阅读的难易程度。这每一种元素，都是设计师能够操控的。记住，本文中谈论的这些元素，是指网站主体部分的文字，此处文字的可读性可以说是首要考虑因素。（别处文字的标准相对宽松许多，只要主体部分高度可读。）

行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。
字体样式：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。
外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。
颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。

###不同屏幕上的可读性

那如何创造最易读的文字？如果是正文文字，有一些基本准则规定每行的字数——每种设备不同—— 有助于打造最佳的可读性。

从何开始呢？最佳行长度有助于帮你确定文字段落的大小。可以这样：确定正文部分的宽度——通常可以假定分成桌面、平板、手机三种尺寸。然后调整文字大小到理想的单行字数。

虽然还有其他因素在起作用，这些准则是很好的入手点。

桌面：每行55到75个英文字符，包括空格；理想状态是每行65个字符
移动设备：每行35到50个字符

将最佳的单行字数与绝佳的行距相结合，可以提升可读性。通常，行距最好是按照正文字体字号的百分比来定义，也可以定义为固定值或是em。

桌面：字号的1.5倍
移动设备：字号的1.75至2倍

如果你想找个工具来简化所有这些工作，试试黄金比例文字计数器。

###可读性的其他提示

要打造可读的排版，正文以外的文字也大有关联。使用标题、无序列表、段落间的额外间距和颜色，也能提升整体可读性（标题则有助于浏览整个网站）。

考虑使用如下元素增进文字层级，创造更完整、更易读的网页设计。记得要把这些元素“设计”成独特的字体、字号和颜色，并要在正文中保持协调。

标题
链接
粗体或斜体字
无序或有序列表
图像元素，例如照片
说明文字
引用文字
在各元素中混合使用衬线字体和无衬线字体

##10种易读的字体

没有一篇讨论可读性的文章不推荐字体的。下面有10种高度可读——并且相当流行——的字体供你选择建立网站。

###无衬线字体

Open Sans

Lato

Exo

Nobile

Droid Sans

###衬线字体

Arvo

Old Standard TT

Abril Fatface

Vollkorn

Josefin Slab

##可读性清单

既然你已经有了好点子，决定下个设计项目中要使用什么字体和样式，你确定能以一种完全可读的方式将它们组合起来吗？下面是一列清单，供你规划字体的设计。

主体部分字号够大吗？在每种设备上，它是否达到最佳的行长度？
每行文字间是否有足够的间距？
文字与页面边界和其他元素之间有没有足够的空间？
正文文字颜色与背景对比反差够强烈吗？
每个新段落之间是否有额外的空隙？
标题和其他元素与正文文字不同吗？
有没有使用其他元素（无序列表、粗体字等）分解大段文字？
正文文字是否使用了易读的字体（建议选用一种衬线或无衬线字体）？

###结论

可读性是设计中至关重要的组成部分。如果无法阅读和理解页面上的内容，对于用户而言，它就完全不相关也不重要。

如何在设计项目中规划可读性？你有没有其他通往成功的技巧？在评论中与我们分享吧。

原文链接

如何在网页中使用留白

hi@victor42.work (Victor42) — Sun, 27 Jul 2014 11:09:41 +0000

[国外设计第50期]

所谓留白，有时也称作负空间，两者是同一个概念。尽管这个术语尤其指留“白”，但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。

这样的空间体现为多种不同形式，例如图片、图表、缝隙、外边距、列甚至一行行文字之间的空间。尽管它似乎“空无一物”，里面没有任何其他设计元素占据一席之地，但我们不应该如此看待它。视之为“无物”，也许打造美感与表现力的机会就流失了。

处理得当的话，留白确实可以为网页设计带来大量的益处。不应减少网页设计中的留白，相反，应该增加网页中的负空间。一些知名的大众品牌已经在朝这个方向前进，更多的设计师们也在追随他们的脚步。

##更多的留白，等同于更奢华的品牌与网站

客户往往要求设计师尽可能用尽网页里的空间，因为网页中的空间是昂贵的，只有有限的屏幕来展示信息。无论如何，反其道而行之——增加留白——促使设计师在更严格约束的空间中，打造更加光鲜的品牌信息。

另外，大家会觉得，留白更多的网站，它的内容比屏幕空间更重要。所以，品牌也显得更尽奢华，因为它牺牲了更多屏幕空间，反而将焦点汇聚在内容信息上。

奢华的品牌了解这层隐喻，通常都使用更多留白来达到这一确切效果。PotteryBarn是个知名的高档家具零售商，它的网站很聪明地使用了留白，恰恰反映了这一点。留白支配了主页，页面旁边大片的留白，更好地将访问者的注意力集中在页面中间的交易与促销信息上。甚至页面顶部的品牌名称本身，也在字符之间慷慨地运用了留白。

##留白提升搜索流畅度

两大搜索引擎Google和Yahoo Search，诠释了留白简洁有效，这个简单的例子再适合不过了。

Google准确地理解了一点，正在搜索某个话题的用户，不想被嘈杂的背景和广告分散注意力。因此，留白支配了整个Google搜索引擎页面，实际搜索框只占据页面中央窄窄一丝空间。类似的，Yahoo搜索也体现了使用留白的妙处。虽然这个页面顶部有长长一条菜单栏，理念还是相同的：大量的留白，使用户专注于搜索，别无他物。

##可读性和易读性得到应有的大幅提升

用好留白，任何网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤，它就会妨碍舒适的阅读体验，从而阻碍整体用户体验。更多的留白使文字更易浏览，从而提升阅读体验，也更易理解。

Information Highwayman是个掌握这项原则的个人站点，是D Bnonn Tennant——一名文案和市场专员的个人网站。擅长夸耀的他，知道什么样的网页内容对任何小本经营管用，令人欣慰的是，Tennant在他自己的网站上实践了他所宣扬的东西。标题的字间距、文字段落和菜单栏间距，有利于确保可读性和易读性。

留白也可以用于不同内容区块之间，不只是为了提升阅读体验，也为了将内容分隔成不同部分，使得信息的吸收更加专注。Andrew Lucas的网站很好地展示了这一点。他是名伦敦的设计师，留白在他个人主页上运用得行之有效。

##它让颜色更鲜明

也许留白最直接，尽管也是最简单的益处，就是突出网页中的其他色彩，使它们更加鲜艳。这点对于吸引访客目光大有帮助，因为颜色深浅、饱和度甚至浓度都更加突出。

I Am Dan背后的设计师处理得非常棒，他在主页上使用稀疏的色彩，成为了这个概念的典范。他的网站简直就是零星几片红色分割开的留白。通过这种手段，红色突显了他作品集的链接，吸引访客浏览他的站点，有效地突出了他的网站，因此提高了访客响应召唤的几率。

Zurb是家网页设计公司，他们网站也体现了留白如何能突出色彩。它的特点是主页顶部单一的纯色和不同页面的彩色图标（就在虚线附近）。除了极少的颜色使用外，首页的整体设计以留白为主。

像绿色、橙色和红色这种简单的颜色，能够创造出令人愉快同时吸引注意的外观。上面提到两个网站，都采用了极简的用色方案，因为有如此大面积的留白。因此，用色非常机智得当，使用户赞赏有加。

##留白不是浪费空间

网页设计师们越来越多抛弃之前的误解，认为设计页面时应该尽可能在屏幕内填塞每个元素、每种颜色。正如上面例子解释过的，留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时，展现出了强大的影响力。

俗话说“少即是多”，不论你怎么看，它的确适用于关于留白的一切观点。广义上讲，网页设计中的这种极简处理方式，如今正越来越盛行，这项趋势肯定能持续下去。

原文链接

改善文字的层级关系

hi@victor42.work (Victor42) — Sun, 01 Jun 2014 10:12:55 +0000

[国外设计第42期]

文字层级经常在交互设计中被忽视。无论如何，要建立一套成功的用户流程，在项目流程之初就得将文字纳入考虑。

文字层级在沟通中扮演着重要角色，将用户引向期望中的结果，还能改善用户体验。网页应用总有繁复的文字层级，区分不够鲜明。各级文字相互较劲，使用户不知所措、迷失其中。

新闻头条应用Inside.com就是个很好的例子，反映了不清晰的文字层级如何影响用户体验。在“all updates”中，新闻逐条展示。每条包含了7个文字层级（下图）。分类名（1）、标题（2）、标题链接（3）、正文链接（4）、正文（5）、网站链接（6）、发布时间（7），由于没有被清晰地区分开，它们全都在争相吸引用户注意。这种模棱两可的层级，使每则故事都不易阅读，阻滞了用户交互流程。

假如花更多心思在文字层级上，Inside.com会受益良多

为了更好地区分文字的层级，你需要对用户希望如何剖析信息有所了解。在缺乏可用性测试的情况下，我可以假设用户第一眼会看到标题，然后阅读正文，接下来如果他们感兴趣，则会点击网站链接。

很快，我重新设计了第一篇文章，优化了文字的层级。增大了标题的字号，将它剥离出正文，把正文改为中灰色，将网站链接放在正文下方，并加大了行高，增加易读性。

快速重设计

这些改变有助于区分文字层级，随后便提升了用户体验。

前后对比

从结构的角度看，还能使整体层级更加清晰。记住文字只是一种元素（尽管通常是最重要的），对导航条、图片位置、文章排列进行重新设计，也能提升用户体验。我们下次会讲到……

如果喜欢这篇文章，请点击下方绿色的“推荐”按钮，并关注Designed Thought Collection。

欢迎来访，我的Twitter、 Dribbble、Behance

原文链接

通过留白打造简洁有效的设计

hi@victor42.work (Victor42) — Sun, 12 Jan 2014 14:16:57 +0000

[国外设计第26期]

有时最有效的设计技巧，就是什么也没有。

而且它的目的性非常强。

留白是最有力的设计素材之一。它使得文字清晰易读，将注意力吸引至某部分，并且有助于打造整体氛围。

本文中，我们来看看一些优秀的留白使用案例，看看它们如何创造简洁的同时，有效地为不同网站定义了设计风格。

留白的基本要素

留白和负空间的术语近年来被交替使用，它们指画布（或数码设备屏幕）上不包含任何内容的空间。简而言之，留白就是空白。

但是留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色，甚至包含微妙的纹理。

空间是所有设计的重要组成。字间距和行间距决定了文字的易读性。如果文字靠的太近或太松散，就很难阅读。关键是找到平衡点。

留白也能把图片和其他元素区分开。回想一下你见到过的杂乱无章的网站。通常问题就在于元素间没有足够的空间。记得在元素和文字间留下足够的边距，为了更加专业的外观，应该进一步使用统一的边距。在设计多列网站时也是同样的道理（即使只有主栏和边栏），在垂直元素间加入适当的空隙，就创造出了明显的划分。

留白还有助于引导视线，为设计建立层次，区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。

留白是创造平衡、协调的工具，也是组织网站内容的基础。没有留白，如何为元素分组？如何找到导航？你又怎么知道滚动有更多内容，或是应该从左上往右下浏览？所有这些视觉线索，都来自于设计中留白的合理运用。

重点使用留白的地方

虽然有效使用留白是任何设计的重要部分，还是有些地方值得注意。

请看以下清单：

logo周
每个导航按钮或图标周围，并围绕这些元素的“容器
在两列文字间，在主体部分与边栏之
当你使用视觉差效果时，在每页“滚屏”之
在所有不同的元素之间，比如照片和文字之间，或是主体内容与页尾之间

12例留白的有效运用

Adhara：看看左侧的边栏和主体内容的距离。此处的留白确实在元素之间创造了很棒的区分，并使彼此通过自己独有的方式突出展示。

BeoPlay A9：背景与中央物体形成简洁的对比，创造了独特的视觉焦点。与优秀的对齐排布结合时，留白还有助于将注意力从图片引导至文字段落。

Fixate：在一个像这样丰富的设计中，留白告诉你的眼睛应该看哪里（还有点击哪里）。

Google：这个搜索引擎已经使用留白很长时间了，白色的海洋中，它只有一个简单的数据入口和一个logo在。

Jac in a Box：留白在此处的运用是如此抢眼，因为它真的很大面积。将的视线从logo（本身的留白就运用非常完美）吸引到另一个角落的主体文字上。

Lapka：这家公司用了一种独具创意的方式，通过阴阳式的留白，将视线吸引到这些小物件上。

Leah Haggar：白色字体在黑色空间上很突出。精妙的底纹为整体效果增色不少。

Medium：这是一个使用非白色留白的绝佳案例。

Metta Skincare：通过对图片进行设计，留白为文字提供了绝佳的展现位置。

PandaWeb：留白直接将注意力转移至这家公司的业务上。

Square：这个网站将元素间的留白运用得很棒，作为图片和按钮的视觉焦点，也作为分栏的间隙。每个细节处的留白都精心处理过，创造了视觉冲击。

The Mealings：简洁、美观、舒适。留白——在设计与logo中——成就了这些特点，看起来简洁得不可思议

原文链接