Web 设计巧用留白
时间：2023-09-26 14:24:02 | 来源：网站运营
时间：2023-09-26 14:24:02 来源：网站运营
Web 设计巧用留白：
层级（Hierarchy）
恰如王室贵族设有等级以表尊卑，设计师要善用层级去凸显关系。国王的等级高过王子，好比一级标题要在视觉上盖过二级、三级标题部分。调整字体大小和样式当然是必要的，还有就是留白，可以用空白空间去划分不同的段落或小节。
良好的层级安排使内容更直白地被用户理解。
这篇文章中，我们会探讨信息层级如何引导用户的注意力，以及安排好信息层级的同时如何让 UI 更吸引人。
引导注意力
给页面元素间留下更多空白空间，也就意味着你把多余的东西拿掉了。你大可放心使用留白技巧，因为一般用户不会明显注意到空白，他们更容易被内容吸引。
如果在犹豫多留还是少留时，选择前者几乎能最大程度保证设计效果。大多数网站因为填充了太多内容而然用户不堪重负，没有呼吸的空间。但要注意，前面所说的也只是一般规律，不是什么绝对正确的教条。我们曾在 交互设计最佳实践 中指出过，多余的留白反而会弱化页面元素的层级关系。
在做设计时，要根据上下文去把握分寸，在一个设计中好的布局照搬照套到另一个设计中未必合适。除了在实践中总结经验，还得多逛逛做得好的网站是如何处理的。
Apple iMac
先看苹果官网 iMac 页面。一直以来为设计师所追捧的「简洁」设计哲学贯穿了苹果所有的产品设计，有兴趣的读者可以翻看官方提供的 iOS 和 OS X 人机界面设计指南。在官网中，这种大胆留白和简洁的设计风格目的很简单：强调商品。
超大号的标题和配图占据了页面主要空间，其他信息以更小但仍可辨识的字号展示。在这里留白的运用和恰到好处的行高设置让用户轻松扫过大段文字，而不用仔细地盯着看上两三分钟。
继续下拉页面会注意到，每块内容遵循同一模式，左边是配图，那么右边就是标题和大段文字说明，每隔一个调换一次位置。这种排布方式让整个页面视觉上是对称的，不会让重心往一边倒（配图在视觉上比文字更「重」），这样还能有效避免视觉疲劳，让整个浏览过程不枯燥。
Wunderlist
再看看奇妙清单的产品官网，导航栏和注册引导的关系处理得很好。注册引导、图文介绍、视频介绍这部分内容聚合在页面中间，导航栏上的链接则向两边扩散，就像是轻松地漂浮在上面。和整个页面篇幅相比，导航栏所占比例很小，内部链接排布紧密。这种处理方式能引导用户首先开始注册并使用产品。
再往下拉，看到一个功能特性矩阵，每一小块内容由图标、小标题、说明文字组成。背景的淡灰色与文字产生恰当的对比，让用户可以轻松聚焦。在你聚焦一小块内容的同时，其他所有内容块会自然地联合起来产生对称性，从而营造出一种整体感。
在这里，图标是每个小块的点睛之笔，近看独立，远看浑然一体。其实，单看图标和小标题就能理解每个功能特性是什么，用户不用细读文字，扫一眼就能获取整个功能特性矩阵的大意。
在线咨询
