iOS的UI元素导航栏里的完成按钮的优化

发表日期：2015/8/12 11:49:18 文章编辑：浏览次数：1804

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

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

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

当然，从另外一个方面讲，将完成按钮置于导航栏当中的模式也有其自身的优势：因为网页设计导航栏是固定在顶部的，所以用户在编辑内容时可以随时点击到，而且当内容区域较长时，放置在顶部的按钮也不会被键盘所遮挡。如果用户确实无需完成全部内容的填写便可以进行完成操作，那么你可以考虑将完成按钮固定在底部，并会随着键盘的起落而相应的移动。这种方式的缺点是会占用一定的纵向空间，但优点也是很明显的：即符合直觉，又随时保持可见，同时相比于顶部右端的位置来说，更易单手点击操作。