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

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

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

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

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

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

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

页码指示符(小圆点)

导航栏里的完成按钮

加号(+)图标

拖拽图标

1.页码指示符（小圆点）

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

APP优化 UI优化 性能优化 产品优化

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

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

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

APP优化 UI优化 性能优化 产品优化

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

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

APP优化 UI优化 性能优化 产品优化

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

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

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

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

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

APP优化 UI优化 性能优化 产品优化