新闻资讯

精品主题,实战科普,最新行业热点话题,随时掌握云上咨讯。

当前位置:首页 >新闻资讯 >行业动态
超干货!iOS中4种UI元素的可用性问题及优化建议
来源:中科服    发布时间:2015-08-04    文章分类:行业动态     分享:

那些大的软件公司,譬如Apple、微软、Google等等,通常会为第三方app设计师们提供一系列设计指南。这样做的目的在于:

 

一方面,设计师和开发者可以比较轻松的上手打造在质量方面至少符合“基础标准”的产品,而无需重新思考和验证全新的设计模式及UI元素。 另一方面,如果某一平台当中的所有产品都遵从统一的设计规则,那么用户也将受益于界面外观与互动方式的一致性。

 

遵守设计指南,这几乎是一条铁打的规矩。但是在实际当中,“官方标准”未必能很好的适用于各种情况。我们不清楚为什么有些元素会出现在设计指南当中,也许是因为官方所做的测试不够彻底,或者说这些元素和模式是用来解决某一类设计问题的最基础最具适用性的解决方案。

 

本文当中提到的4UI元素都是Apple惯于在自家app中使用的,其中的一些也出现在了官方的设计规范当中;自然,不计其数的设计师也会跟从这些用法。而另一方面,我们(Nielsen Norman Group)在一次又一次的可用性测试当中也真真实实的发现了这些元素所导致的可用性问题。

 

说不定Apple的诸神会用雷劈我们,但我们仍然建议各位设计师在使用这些UI元素时多加考虑,或尝试优化/替代方案,因为这些元素在可用性测试当中的表现确实存在问题:

•页码指示符(小圆点)

•导航栏里的完成按钮

•加号(+)图标

•拖拽图标

 

1.页码指示符(小圆点)

 

iOS的页码指示符,在形式上就是横排的圆点,用来表示一系列可以通过横滑浏览的分页视图。其中,代表当前视图的圆点处于高亮状态,其他的则是灰暗的半透明状态。

 

iOS系统首屏,页码指示符用来表示页面总数以及当前所在位置。我们时常见到这种通过系统首屏来演示页码指示符使用方式的范例,实际上,页码指示符能完美适用的界面环境并不多,而系统首屏正是其中之一,因为用户明确的知道自己的手机里装有很多app以至于第一屏无法完整呈现,需要通过横向滑动查看更多。

 

很多app或网页都会使用这种元素来暗示用户可以通过横向滑动来查看同级的其他页面,也有一些是将其用在界面中特定的区域来暗示其中存在更多内容。不能否认,这种形式的页码指示符在app和移动Web的界面设计当中都很流行,但是要知道,它同时也是用户最容易忽略掉的界面元素之一。在我们所做的一系列可用性测试当中,用户经常难以发现这些在尺寸上过于微小的圆点,进而错失了那些可以通过横滑来查看到的内容或功能入口。所以,我们认为圆点形式的页码指示符至少不能被用作关键功能和内容的唯一导航方式。

 

虽然iOS允许你将这些圆点渲染成其他颜色,但想要使如此微小的元素一目了然的突显在界面当中还是非常困难的,除非你能确保将其置于高对比度的纯色背景上。很多产品会将圆点们放置在五颜六色的banner图上,使这些本就难以被留意到元素不知不觉的融入到背景当中,进一步降低了可发现性。如果一定要这样做,那么必须确保圆点和背景色之间始终具有较高的对比度,最好是使用纯色背景。

 

iOSZappos,在第一张底图上,页码指示符已经很弱了,而在右侧第二张底图上,几乎完全消失了。

 

有一部分产品则在iOS的基础上进一步自由发挥,将圆点改为方形或其他形状,布局上也更加随意。不妨设想,即便用户已经习惯了iOS的小圆点模式,现在他们就算发现了界面中的这些小元素,还要猜想这些方块会不会就是代表着以前的那些小圆点 – 可发现性没有显著提升,同时还造成了认知上的困难。如果要使用页码指示符,尽可能使用用户已经熟悉的圆点模式,并将其居中的置于对应内容的下方。

 

Android中的Fab,借鉴了iOS模式的小圆点,但将其置于了内容的右侧,相比于居中的位置,更难被发现。

 

即便用户能够注意到页码指示符,这里还有一些潜在问题,譬如小圆点们可以让用户知道有多少同类型的信息视图以及当前所处位置,但无法提供任何与内容本身相关的信息。此外,用户对互动的控制权也非常弱,必须按照次序逐一浏览,无法直接跳转。所以,如果在你的需求当中这些体验要素比较重要,那么小圆点恐怕不是你的最佳选择。

 

鉴于小圆点页码指示符所存在的一些可用性问题,我们建议:

•首先考虑你的内容是否适宜通过横滑的方式依次浏览,还是可以通过更复杂同时也更灵活的其他导航方式进行架构。

•对于横滑浏览的内容,尽量采用右边缘露出一部分内容的方式来加强对于“更多”的暗示,而不要单纯依靠页码指示符。

 

2.导航栏里的完成按钮

 

iOS中很多代表“完成”操作的按钮时常被置于导航栏当中右侧的位置,包括表单界面的提交按钮也是如此。如今这种模式也开始潜移默化的影响到一些Android平台里的app

 

根据我们的可用性测试所得出的结论,不说跨平台的影响力,单就iOS本身,我们也不建议将“完成”性质的按钮放在这里,原因很简单,将最终操作放置在界面顶部,有悖于自上而下的信息流向。用户在填写表单或编辑内容时,交互行为通常是由上至下的,当他们即将完成的时候,也会预期在结尾处看到结束处理的操作。多数情况下,当人们无法在结尾处找到这样的功能时,便会产生迷惑并开始四处寻找。

 

在下面的案例当中(左侧是Pinkberry,右侧是Nordstorm),用户填写完表单之后需要点击登录或下单按钮。这样的布局就是我们所说的有悖于自上而下信息流向的形式,用户的全部注意力都随着表单而逐渐下移,最终发现在结尾的地方没有任何完成操作,剩下的就是茫然无措。要知道,即使是在手机这样的小屏设备上,四处寻找某种UI元素也是需要耗费很多额外的注意力成本的;将完成按钮直接放置在内容底部是最符合直觉的做法。

 

当然,从另外一个方面讲,将完成按钮置于导航栏当中的模式也有其自身的优势:

 

因为导航栏是固定在顶部的,所以用户在编辑内容时可以随时点击到,而且当内容区域较长时,放置在顶部的按钮也不会被键盘所遮挡。如果用户确实无需完成全部内容的填写便可以进行完成操作,那么你可以考虑将完成按钮固定在底部,并会随着键盘的起落而相应的移动。

 

这种方式的缺点是会占用一定的纵向空间,但优点也是很明显的:

 

即符合直觉,又随时保持可见,同时相比于顶部右端的位置来说,更易单手点击操作。

 

 

鉴于导航栏里的完成按钮所存在的一些可用性问题,我们建议:将按钮置于内容底部;如果内容较长,可以尝试将按钮位置固定,并使其不会被键盘遮挡,以便用户可以随时点击。

 

3.加号(+)图标

 

见过的app越多,你越会发现,在不同的环境当中,加号图标往往会代表各种不同的功能。当加号位于导航栏当中时,通常表示“新建”功能;如果被放在列表单元当中,要么是表示将这条内容添加到某种分组当中,要么是用来展开详情。无论是在同一个app的不同界面,还是在不同的app之间,同一元素承载着不同的功能含义,这对于用户的认知与记忆都是一种负担。

 

加号图标的可用性在很大程度上取决于它在界面当中所处的位置。当位于导航栏时,加号通常能够表达准确的含义,即创建一条与主要内容相同性质的新内容。然而,当加号出现在主要内容当中时,多种含义的可能就会给用户带来迷惑。

 

举个例子,Any.do曾经的一个版本当中,会在待办事项分组标题右侧放置加号图标。在这个环境下,你不知道点击这个图标是会展开其中的全部事项,还是会在这个分组中创建新事项。在最近的一个版本中,他们将加号放在了界面右上角,明确的用于创建新事项。

 

无论是Web还是移动app,位于界面内容当中的加号图标通常用来表示该内容可以扩展查看更多信息,有时还会搭配箭头图标同时使用。通过加号来触发其他类型的功能很可能破坏用户所习惯的预期。例如,在LinkedInapp当中,取决于所在位置的不同,嵌套在圆环当中的加号图标代表着关注或是加入某小组的功能。在我们的可用性测试当中,很多用户抱着查看详情的预期去点击该按钮,却发现自己关注了对方动态,进而感到莫名其妙。

 

返回列表

你知道你的Internet Explorer是过时了吗?

为了得到我们网站最好的体验效果,我们建议您升级到最新版本的Internet Explorer或选择另一个web浏览器.一个列表最流行的web浏览器在下面可以找到.