【译】这些移动ux模式你用对了吗

本文译自medium上的文章Misused mobile UX patterns

作为一个用户体验设计师，你可能会认为界面设计中，受到别人的启发并不能算抄袭。实践是最好的研究方法，你使用设计模式，遵循设计规范，这些能够确保用户可以熟练地使用你的界面。于是就有人担心说，一味地遵从设计规范，跟随大众，会扼杀创造力，到最后，所有的应用看起来都是一样的。而从一个交互设计师的角度来看，我觉得我们应该关心的是另一个问题，那就是我们学习大公司的规范，学习他们的设计模式，我们相信他们总是对的，他们的设计目标是跟我们一致的，最后我们便失去了质疑他们的能力。
下面就来讲一些被认为是很好的设计模式，因为实际上它们并没有你想象中的那么好。

1、隐藏式导航

至少有50万的帖子在讨论关于汉堡包菜单的问题，大部分讨论者是设计师，他们在争论是否要反对使用这种菜单。概括地说，这其实不是图标本身的问题，而是关于将导航隐藏在图标后面的问题。

隐藏式导航为设计师带来了方便，不用再担心有限的屏幕空间，只要将你的导航挤到一个滚动列表里然后隐藏起来就好了。但是有关的实验表明，显式的菜单因为更容易被看到，能有效地提高参与度，用户满意度，甚至是收益。这也是为什么现在一些应用开始改变的原因，从汉堡包菜单转化为让最相关的导航项保持可见。如下图：

总之，如果你的导航很复杂，隐藏起来并不会让其在移动端上更加友好，但是按照优先级排序可以。

2、图标，到处都是图标

同样是因为屏幕空间有限，任何可以替换成图标的文字都尽可能被替换以节省空间，而这看起来也非常简单。图像占用更少的空间并且不需要翻译，用户也会慢慢习惯，几乎所有的应用都这样做。但有时，设计师会用一个相当难辨认的图标去表示某一个功能，比如下面这个例子。你知道这个图标可以让你在Instagram中直接发送信息吗？或者，假如你从没用过谷歌翻译，你知道这个图标的意思吗？

有一个普遍的错误的想法认为，用户如果不熟悉你使用的抽象的图标，就会花时间去探索和学习。如果你设计了一个图标，然后觉得有必要加上一个标签对其进行说明，那你的设计就有问题，即使你的弹出框让用户明白了图标的意义。

当然，不是说不能使用图标了，还是有许多图标用户非常熟悉的，像搜索、播放、邮件、设置等，在这种情况下，避免将常用的图标对应在不常规的功能上。

在另外一种情况下，对于一些比较复杂和抽象的功能，可以同时使用图标和文字，这时候，图标作为一种补充的元素，能够增强菜单项的可视性，也可以增加触点的面积，同时也给应用添加了一些个性化的元素。

总结一下，一些基础的功能可以使用图标来提高效率，但是对于复杂的功能来说，应该使用文字标签。使用图标时，应该进行相应的可用性测试。

3、基于手势的导航

2007年苹果手机发布后，多点触控成为主流，用户知道他们不仅仅可以点击或者轻触屏幕，还可以缩放，捏，快速滑动等。手势同样得到设计师的欢迎，各种包含实验性手势控制的应用被开发出来。

与上面的隐藏导航和图标一样，手势同样可以节省屏幕空间，比如删除，再也不需要有一个删除按钮，用户只需要向左滑动即可。但手势同时也具有隐藏导航和图标的问题，手势是看不见的，用户需要记住它才能使用，就像菜单，如果人们看不见，可能就会很少去用它。就像图标，手势也有一些常用的和非常用的，点击，缩放，滚动等是常用的，用户不需要学习，但是其他较复杂的则需要用户去发现和学习。

更不幸的是，手势并没有什么标准，同一个手势在不同的应用中有不同的意义。就像简单的滑动，在不同的邮件应用中是不同的，如下图。

总结一下，设计手势时，不要忘记手势是看不见的，用户需要花费精力去学习和记住。而且，也要注意手势在不同应用中的区别，尽量不要让用户困惑，除非很重要，不然不要做出一些与别人差异太大的手势设计。

4、入门教程

入门教程是用户第一次使用软件时出现的，最简单的方法就是直接在上面显示一些关于页面的操作教程，如下图所示。

这是一个不好的解决方案，因为很多用户是直接跳过介绍的，他们只想快速开始使用应用。即使用户注意到了你的教程，关掉之后也会很快忘记，特别是教程内容很多的情况。最后一个是，增加教程并不会让你的界面更加直观，更加容易使用，记住下面这句话。

用户界面就像一个笑话，如果你需要去解释他，那就说明不够好
入门教程可以有其他的更好的设计方案，比如介绍一下你的应用，强调这个应用具有什么优点。或者采用渐进式的入门，不解释应用如何工作，而是通过一系列的操作让用户学习。另外，前面提到的手势问题，如果你使用的是一些不常见的手势，可以在入门教程中让用户尝试一下。

总之，在设计一个半透明的教程盖层的时候，停下来想一想用户对应用的第一印象应该是怎样的，关注上下文，在大多数情况下，会有更好的方式去欢迎你的用户。

5、有创造性但是不够直观的空状态

新手经常会忽略空状态的设计，这对应用的整体体验非常重要。有些设计师觉得错误信息或者空状态出现时页面太单调，所以发挥创意对其进行设计，比如下面这张图。谷歌图片的空状态。

第一眼看起来挺好的，遵从设计规范，较好的组合式布局，加上漂亮的图片。
但是继续看，就会发现不少问题：

• 为什么会有一个突出显示的搜索按钮，既然都没有东西，还能搜索什么？
• 第二个比较突出的是那个图片，很明显以致于会让用户误以为是可以点击的。
• 文字上说，点击“＋”按钮，但是要在上面找，为什么不可以放在旁边。

这个空状态并没有帮助用户理解当前的环境：

• 什么是收集，为什么收集有用？
• 为什么我没有任何收集？
• 我可以做点什么？

下面是一个相对比较好的例子。

总之，要记住空状态不仅仅是关于视觉美学以及品牌特性，他们在可用性方面有很重要的作用，尽量让其更加直观。

怀疑一切

不要误会我的意思，设计模式和好的实践依然是你做设计时的好的参考。只要记得，每个应用和用户都是不一样的，一个方案可能在别的应用上用得很好，但在你的应用上并不适用。没有什么可以适用所有应用的。另外，你也不知道别的应用到底为什么要这样设计，盲目地借鉴没有意义。

做自己的思考，做自己的设计，做自己的调查。
估计、测试、验证--如果你的方案看起来更好，不要担心它不符合设计规范。

以上。