顶部右侧 | 自行修改 西安网站推广
当前位置:网站首页 > SEO技术 > 正文

超干货!iOS中4种UI元素的可用性问题及优化建议

seo秀 2019-05-25 64 浏览 0 评论

编者按:这周又是一篇来自Nielsen Norman Group的文章。供参考吧,这种文章背后的思维模式甚至是精神才是最该汲取的,内容本身反而是其次;这样的东西看的越多,实践当中具有代表性的产品案例经历的越多,你越会发现,设计这种事,在很多时候,无明无暗,无是无非,有的只是特定的产品、特定的资源、特定的情境、特定的用户群体,以及所有这些因素混杂在一起之后摆在面前的需要不断权衡、争取或妥协的各种可能性。下面进入正文。,那些大的软件公司,譬如Apple、微软、Google等等,通常会为第三方app设计师们提供一系列设计指南。这样做的目的在于:,一方面,设计师和开发者可以比较轻松的上手打造在质量方面至少符合“基础标准”的产品,而无需重新思考和验证全新的设计模式及UI元素。 另一方面,如果某一平台当中的所有产品都遵从统一的设计规则,那么用户也将受益于界面外观与互动方式的一致性。,

编者按:这周又是一篇来自Nielsen Norman Group的文章。供参考吧,这种文章背后的思维模式甚至是精神才是最该汲取的,内容本身反而是其次;这样的东西看的越多,实践当中具有代表性的产品案例经历的越多,你越会发现,设计这种事,在很多时候,无明无暗,无是无非,有的只是特定的产品、特定的资源、特定的情境、特定的用户群体,以及所有这些因素混杂在一起之后摆在面前的需要不断权衡、争取或妥协的各种可能性。下面进入正文。

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

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

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

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

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

  • 页码指示符(小圆点)
  • 导航栏里的完成按钮
  • 加号(+)图标
  • 拖拽图标

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

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

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

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

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

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

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

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

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

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

  • 首先考虑你的内容是否适宜通过横滑的方式依次浏览,还是可以通过更复杂同时也更灵活的其他导航方式进行架构。
  • 对于横滑浏览的内容,尽量采用右边缘露出一部分内容的方式来加强对于“更多”的暗示,而不要单纯依靠页码指示符。

相关推荐

SEO专员日常工作内容有哪些?谈谈seo人员的工作指标

 SEO还有用吗?SEO还有前途吗?经常会遇到这样的提问,在我看来,能问出这些问题的人大多还是对于SEO有一定的了解但是并没有真正的去坚持或者操作的方法不对造成的。通常来说,SEO并不是一个立...

网站24小时收录小技巧分享
  • 网站24小时收录小技巧分享
  • 网站24小时收录小技巧分享
  • 网站24小时收录小技巧分享
  • 网站24小时收录小技巧分享
影响着网站排名的17个SEO因素

 哪些seo算法因素在影响着网站排名?为什么同一篇文章发布在两个不同的网站上排名会有特别大的差距?本文将为你一一揭晓。一、网站设计对SEO和用户友好网站设计的要简洁大方,框架结构及url...

SEO的未来:视频与SEO的结合

 SEO经历过几个阶段:01、纯文字。合理的文字布局,关键词就能获得排名。02、文字+图片。单单靠一篇文章,排名变得困难。“文字+图片”这种文章形式开始获得大量的排名。03、文字+视...

做好网站SEO推广需要掌握哪些要点?

 随着互联网的发展,现如今很多的企业都开始做网站,并对其做相应的推广,若能够利用好网站推广,掌握一些推广的技巧,那么推广站长的工作相对来说也更具有目的性,这样想好做好推广也比较的简单,不过,话虽...

谷歌与搜狗高PR老域名外链价值详解

 GooglePR是什么意思?到底有什么作用呢?又如何来分析这些PR真正的外链价值呢?今天,小小课堂SEO自学网带来的是《Google谷歌PR值是什么意思?搜狗高SR域名外链价值分析》。希望对...

快排对网站seo优化排名是否有影响?

 今天,在seo优化中被人们常提起的就是“快排”,它的出现对seo行业整体冲击很大,不过很多的从事seo优化的站长又说,这种优化方式属于作弊手段,一旦网站做了快排,被搜索引擎发现很容易会惩罚网站...

新站如何快速度过百度沙盒期的观察呢

 喜子SEO的博客站点上线快四个月了,这几个月的时间基本都是在沉淀站点的基础,让百度、360、搜狗、神马等等搜索引擎认可自身,以期能够更快的走出沙盒期。那么到了今天,网站已被这个四个搜索引擎巨头...

新网站快速被收录内容页方法有哪些?

 (文/守护袁昆)最近站长圈不少朋友反映新网站内容页收录缓慢,正常情况下一个月就会慢慢放出内页,如何差不多要两三个月。对于这样的问题应该怎样解决呢?对于新网站内容页收录缓慢的原因,守护袁昆发...

如何写一份高质量网站优化方案,我们的分析思路一样吗?

 作为一名SEOer,写网站优化方案是必备的技能。网站优化方案既是对网站问题的挖掘与处理,也是往后网站优化的方向指引。毫不夸张地说,一份高质量的网站优化方案,对我们优化一个网站非常地有帮助。然而...

欢迎 发表评论: