行业新闻 您当前的位置:首页 > 回声智库 > 行业新闻 >上海网站设计制作中UI设计留白的3个功能

上海网站设计制作中UI设计留白的3个功能


发布时间:2016-08-03 18:12:57      作者:回声网络

 上海网站设计制作,UI设计中适当留白不仅是出自审美的考量,它还能提供 3 个相当实际的功能:1.提高用户的理解能力;2.明确视觉元素之间的关系;3.吸引注意力。让我们跟着回声网络小编一起来看看这3个功能的详情:
  1、提高用户的理解能力
  在进行网站设计中,如果你在网页中胡乱堆积太多视觉元素,就会使得你的用户信息过载,反之,将网页精简将提高用户对其内容的理解程度。
  留白可以以 4 种形式存在于之中:视觉留白(在图形、图标与图片四周留有空间);排版中留白(段落两边留有空间,内边距、装订线);文本留白(行间距以及字母之间了空隙);内容留白(在文本列与列之间用空白分隔。
  Medium 是一个综合使用了这 4 种留白方式的好例子。首先,从交互的角度来看它充分考虑了用户的目的:用户想要尽快读到有趣的阅读内容。Medium 主页满足用户这一需求的直接做法就是将内容安排到中心靠前的位置,同时在内容两侧使用了大块留白来强调文本内容。Medium 主页上的图片周围和行与行之间都留有充足的空间,虽然其图片的内边距设计还有提升的空间(注意:图片左下角的文字与图片之间并没有充分留白。
  上海网站设计制作,除了提升用户的理解能力之外,留白还能够帮助他们创造出自己的意境地图(译者注:即人类头脑中的空间意象)。在顶部导航条与内容瀑布流之间的微小留白也可以促使读者深入阅读内容。网页右侧的导航栏目的在于让用户创建并保存内容,因此需要使用更多的留白让其与文章内容分隔开来。在 Medium 的这个案例中,我们可以看到留白指引用户在不同的区域完成不同的功能。当用户点击标题进去阅读文章具体内容时,留白可以帮助他们集中注意力在最关心的内容之上。文章行与行之间的适当留白提高了其整体可读性。
  2、明确视觉元素之间的关系
  网站设计的时候,当在观察人类个体如何组织视觉信息时,格式塔心理学家无意中发现了所谓的相似定律,即相邻的图像看上去是相似的。比如说,看看下面这张图:
  几乎每一个人都看到了两组图标,而不是单独的 20 个图标。其实这些图标都是相同的,唯一的用来区分它们的就是用来分隔的留白。这种行为观察在交互设计中有着一些重要的应用,尤其是在输入表格的时候,下面有2 点是需要记住的:
  将标签靠近相关字段。在你所看到的如下示例中,当标签放置的更加靠近相关字段时,其中的信息交流将变得非常清晰明了。在我们先前的实践中也已经证明,即使是最微小的犹豫不决也会伤害形式的完整性,在这种情况下仅仅调整一下间距就会提升用户在填写表单时的信心,这将提升完成率。
  组织相关话题。当处理较长表单时,完成该表格填写的任务会看上去如此艰巨,有些用户甚至连试都不试就直接放弃了。利用留白将信息分成适当的几组,可以让那些长表单看上去更容易处理一些。在右边的表格之中,将 15 个字段分成 3 组让这个填写过程看上去似乎更容易一些。虽然内容是相同的,但是给用户留下的印象是完全不同的。虽然这一原则通常运用于表单之中让它更能吸引用户填写,但是同样的原则也适用于导航栏和网站内容。相对于在顶部导航栏安排20个选项,你可以使用下拉目录将顶部导航栏分成4 到7 栏,余下的内容都可以收入到下拉框中。
  3、吸引注意力
  网站设计制作,UI设计如何吸引注意力呢?正如我们在上文中提到的,缺乏其他的元素将使得剩下的元素更加突出。Yelp 的页面就是一个很好的例子,在这样一个高保真的原型当中,设计者添加了大量留白将分类目录内容与搜索功能进行区隔。在如此设计之后,分类图标变得更加引人注目(布局也比先前凌乱的垂直设计显得更加整洁)。同时将颜色填充其中,分类目录部分将更具吸引力,还能够提供给用户更好的反馈。但是因为人类的注意力是有选择性的,可能会有意无意就忽略了横幅式样的信息比如横幅广告,这通常被称作「旗帜盲点」,因此你在使用留白的时候后还需要指导如何削减或者调整其幅度。
  最后,你需要明白的是留白的力量来自于人们注意力与记忆力的局限。你可以比较一下Yahoo 与Google 的交互设计,Yahoo 在其网页中安排了太多的按钮,而 Google 深知用户使用网站的基本需求就是使用搜索功能找到其想要的东西。正因为 Google 能够对于用户的需求进行现实的考量,因此其网页设计创造了更为积极有效的交互。
  在进行上海网站设计制作的时候,大多数的设计师都属于「不要让用户动脑子」学派,这不仅仅是因为用户通常是懒惰的,还因为他们在浏览网页的时候脑海中已经存有很多信息了,如果还要填鸭式地向其脑中灌输信息,只会使得他们感觉无力阅读。这种在交互设计中传递太多信息而导致用户无力接受的现象通常被称作【认知负荷】。
  在中减少认知负荷不仅仅会让UI设计更为实用,也会让用户更加乐于使用,适当的留白会增添和谐感,让用户的浏览体验更具流畅性。
  关于上海网站设计制作UI设计的一些要点,回声网络小编就为大家分享到这。了解更多关于网站设计的要点以及网站制作,欢迎来拨打全国免费400电话:400-638-6378

回声科技,网站建设 | 网络推广 多元化一站式服务!免费咨询热线:021-52835722 如需转载,请注明文章出处和来源
网址:http://www.huisheng.com 网站建设回声科技发布,否则视为侵权,谢谢合作!
关于我们

我们专注于为客户提供高端网站策划、网站建设、网站设计、品牌网络营销、小程序开发、电商平台策划开发、APP开发、软件开发、腾讯企业邮箱...

查看更多
最新案例
鞋帽零售企业响应式网站模板案例
食品饮料加工厂响应式网站建设案例
联系我们

地 址:上海市谈家渡路28号盛泉大厦7楼
邮 箱:info@huisheng.com

微信订阅号 个人微信号
沪公网安备 31010702001726号ICP备案12038328号-1   ©Copyright 上海回声网络科技有限公司 .All Rights Reserved. 网站地图