[感悟]iOS当中4种UI元素的可用性问题及优化建议

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

关键字：设计规范  设计元素  可用性测试

链接：http://www.beforweb.com/node/748

评论:

这篇文章说了四种UI设计元素：

页码指示符（小圆点）

导航栏的完成按钮

加号（+）图标

拖拽图标

然而随着各个平台的开发者对设计规范的含糊，以至于这些设计元素不止出现在iOS平台上，Android平台也常常会出现这样的设计元素。而这篇文章指出了这些元素在使用上导致一些可用性问题。

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

我记得在我去年在上一家公司实习的，我们公司的App首页用的就是这种指示符，，形式与下图类似：

是的，就是在导航栏“首页”这个导航标题下面有三个指示符，用来告诉用户，通过滑动，后面还有两页内容。在这一级导航中，第一页内容是微博列表，第二页是博主动态，第三页是关注的博主。本来这三个关联性不太大的内容拼凑在一起，本身就有点不妥当，并且用这种圆点指示符进行分页，更加增加用户的认知成本。虽然当时公司没有做用户行为的记录，但是我猜，能滑到第三页查看”关注的博主“这一页的用户肯定很少！

当时Android的设计中，用Tab的形式作为二级导航栏放在一级导航栏下面，已经很普遍了。这样的优点也不言而喻。用Tab的形式，一来用户可以一眼看到三个页面的内容，而不用去猜测下面另个页面隐藏的是什么。二来用户想从第一页跳到第三页的时候，可以直接点击Tab进行切换，不用滑动两次。

跟当时的产品经理讨论这点，他给我的回复是”人家Twitter首页也是这样的！你敢说不好？！”当时无以反驳。不过还好在后面改版中，通过信息架构重组，解决了这个问题。

文章也提到两种优化的建议，要么采取更灵活地导航方式取代，要么在单纯靠指示码引导的基础上，采用右边缘露出一部分下页的内容来加强“更多”的暗示。我们采用了第一种。

2.导航栏的完成按钮

文章举出的例子是在登录/注册的流程中，很多应用程序会把完成的按钮放在导航栏的右上角。这违背了自上而下的信息流向。但是当表单比较长的时候，为了避免完成按钮在 有限的垂直空间下被忽略，固定在右上角，也不失为一种妥协的办法。然而文章指出，除了把完成按钮用常规的方式放在列表内容最后，和固定在导航栏的右上角之外，还可以尝试固定在屏幕底部（但是要注意不与键盘产生冲突）。暂时get不到固定在屏幕底部的实现效果，因为键盘在填写表单的时候，键盘也必然在底部。但是也感谢作者在这里提供了一个新的思路。但愿在往后的设计中，可以启发出更多优秀的设计方案。

3.加号（+）图标

在不同 的App中，+号这个元素在不用的位置，也承载着不同的含义。所以在使用这个元素的适合，更加要小心谨慎，一不小心就增加用户的认知负担。

“当加号位于导航栏当中时，通常表示“新建”功能；如果被放在列表单元当中，要么是表示将这条内容添加到某种分组当中，要么是用来展开详情。”

文章指出了几个很典型的例子，来分别论述自己的观点。在这里，我最想提到的是用户量级以“亿’为单位的微信。

不管是Android还是iOS，微信的首页顶部导航栏的右边都有一个”+“按钮，点击按钮，展开下拉二级菜单。当然微信有海量的用户，而且大部分用户的生活已经离不开微信的情况下，导航栏这里不管这里用什么图标，用户只要有需要就会去尝试点击，找到自己需要的操作。然而正是因为微信有这种巨大的威力，在图标的设置上更加应该小心谨慎，因为一旦错误引导，就会”培养“了用户的错误认知，从而导致用户在使用其他”正确 “的模式的时候，产生不适。

用表示“更多”含义的三个点，来代替“+”这个图标，会更加恰当一点吧？

4.拖拽的图标

文章提到一点比较具备参考意义，就是拖拽的图标跟传统的“汉堡包”菜单的图标太相似了，都是三条横条。所以在设计的时候，刚好应用中有拖拽的操作，这个操作又在很浅的层级就可以进行拖拽的话，那么建议把“汉堡包”菜单的图标，前面再加三个点，来进行区分比较妥当。

总结：

这篇文章从可用性测试的角度来对界面元素设计进行分析，而且分析得很透彻很详细，也给出了相应地优化方案。但是在平时的设计工作当中，这类非常细小的问题，好像大家都不太在乎，也懒得去纠结。但是我想说，要成为一名优秀的交互设计师，这样的精神实在是必须要具备。如果一个细节可以放弃，那么整个应用的更多细节都会被放弃掉，从而设计也就没有用户体验而言了。关注用户，关注细节，多点进行可用性测试。