服务热线:400-889-1636
业务联系:021-5230 0317
客户服务:021-5230 0319
在线咨询: 
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
首页 > 关于求创 > 求创博客

UI设计不可或缺的元素——留白

时间: 2016.08.03 来源:本站
分享到:

适当留白不仅是出自审美的考量,它还能提供 3 个相当实际的功能:1.提高用户的理解能力;2.明确视觉元素之间的关系;3.吸引注意力。

 


1、提高用户的理解能力

 

如果你在网页中胡乱堆积太多视觉元素,就会使得你的用户信息过载,反之,将网页精简将提高用户对其内容的理解程度。


留白可以以 4 种形式存在于网页设计之中:视觉留白(在图形、图标与图片四周留有空间);排版中留白(段落两边留有空间,内边距、装订线);文本留白(行间距以及字母之间了空隙);内容留白(在文本列与列之间用空白分隔。



Medium 是一个综合使用了这 4 种留白方式的好例子。首先,从交互的角度来看它充分考虑了用户的目的:用户想要尽快读到有趣的阅读内容。Medium 主页满足用户这一需求的直接做法就是将内容安排到中心靠前的位置,同时在内容两侧使用了大块留白来强调文本内容。Medium 主页上的图片周围和行与行之间都留有充足的空间,虽然其图片的内边距设计还有提升的空间(注意:图片左下角的文字与图片之间并没有充分留白。

 

 

除了提升用户的理解能力之外,留白还能够帮助他们创造出自己的意境地图(译者注:即人类头脑中的空间意象)。在顶部导航条与内容瀑布流之间的微小留白也可以促使读者深入阅读内容。网页右侧的导航栏目的在于让用户创建并保存内容,因此需要使用更多的留白让其与文章内容分隔开来。在 Medium 的这个案例中,我们可以看到留白指引用户在不同的区域完成不同的功能。当用户点击标题进去阅读文章具体内容时,留白可以帮助他们集中注意力在最关心的内容之上。文章行与行之间的适当留白提高了其整体可读性。


2、明确视觉元素之间的关系

 

当在观察人类个体如何组织视觉信息时,格式塔心理学家无意中发现了所谓的相似定律,即相邻的图像看上去是相似的。比如说,看看下面这张图:

 

 

几乎每一个人都看到了两组图标,而不是单独的 20 个图标。其实这些图标都是相同的,唯一的用来区分它们的就是用来分隔的留白。这种行为观察在交互设计中有着一些重要的应用,尤其是在输入表格的时候,下面有2 点是需要记住的:


将标签靠近相关字段。在你所看到的如下示例中,当标签放置的更加靠近相关字段时,其中的信息交流将变得非常清晰明了。在我们先前的实践中也已经证明,即使是最微小的犹豫不决也会伤害形式的完整性,在这种情况下仅仅调整一下间距就会提升用户在填写表单时的信心,这将提升完成率。


组织相关话题。当处理较长表单时,完成该表格填写的任务会看上去如此艰巨,有些用户甚至连试都不试就直接放弃了。利用留白将信息分成适当的几组,可以让那些长表单看上去更容易处理一些。在右边的表格之中,将 15 个字段分成 3 组让这个填写过程看上去似乎更容易一些。虽然内容是相同的,但是给用户留下的印象是完全不同的。虽然这一原则通常运用于表单之中让它更能吸引用户填写,但是同样的原则也适用于导航栏和网站内容。相对于在顶部导航栏安排20个选项,你可以使用下拉目录将顶部导航栏分成4 到7 栏,余下的内容都可以收入到下拉框中。


3、吸引注意力

 

正如我们在上文中提到的,缺乏其他的元素将使得剩下的元素更加突出。Yelp 的页面重新设计就是一个很好的例子,在这样一个高保真的原型当中,设计者添加了大量留白将分类目录内容与搜索功能进行区隔。在如此设计之后,分类图标变得更加引人注目(布局也比先前凌乱的垂直设计显得更加整洁)。同时将颜色填充其中,分类目录部分将更具吸引力,还能够提供给用户更好的反馈。但是因为人类的注意力是有选择性的,可能会有意无意就忽略了横幅式样的信息比如横幅广告,这通常被称作「旗帜盲点」,因此你在使用留白的时候后还需要指导如何削减或者调整其幅度。


最后,你需要明白的是留白的力量来自于人们注意力与记忆力的局限。你可以比较一下Yahoo 与Google 的交互设计,Yahoo 在其网页中安排了太多的按钮,而 Google 深知用户使用网站的基本需求就是使用搜索功能找到其想要的东西。正因为 Google 能够对于用户的需求进行现实的考量,因此其网页设计创造了更为积极有效的交互。


大多数的设计师都属于「不要让用户动脑子」学派,这不仅仅是因为用户通常是懒惰的,还因为他们在浏览网页的时候脑海中已经存有很多信息了,如果还要填鸭式地向其脑中灌输信息,只会使得他们感觉无力阅读。这种在交互设计中传递太多信息而导致用户无力接受的现象通常被称作【认知负荷】。

 

 

网页设计中减少认知负荷不仅仅会让 UI 设计更为实用,也会让用户更加乐于使用,适当的留白会增添和谐感,让用户的浏览体验更具流畅性。

上一篇文章: HTML5并非听上去那么完美
下一篇文章: 域名更换Q&A
返回

业务咨询

客户服务

我要留言

节假日咨询电话

136-1188-9500

关于我们

上海求创科技有限公司成立于2001年,是一家专注于为客户提供高端网站策划、网站建设、网页设计、品牌网络营销以及相关的基于互联网应用服务的专业公司。

更多

全国客户服务热线

400-889-1636

网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-微官网 网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-手机网
域名超市 | 苏州网站优化 | 北京网站建设 | 邯郸网站建设 | h5建站 | 手机网站建设 | 营销型网站建设 | 沈阳seo优化 | 企业网站建设 | 网页设计 |
业务热线:021-52300315 021-52300317 业务部:sales@dn.cn 售后服务:service@dn.cn 投诉邮箱:info@dn.cn 域名和主机服务:021-52300319
地址:上海市长宁区延安西路1160号 首信银都大厦2楼 邮政编码:200052
版权所有©上海求创科技有限公司 沪ICP备13005298号-24  网站地图