美文网首页交互设计方法论ui@产品
【译】这些移动ux模式你用对了吗

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

作者: 7win7 | 来源:发表于2016-08-10 16:02 被阅读287次

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

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

    1、隐藏式导航

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

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

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

    2、图标,到处都是图标

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

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

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

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


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

    3、基于手势的导航

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



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

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

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

    4、入门教程

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



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


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

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

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

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


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

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

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

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

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

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

    怀疑一切

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

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

    以上。

    相关文章

      网友评论

        本文标题:【译】这些移动ux模式你用对了吗

        本文链接:https://www.haomeiwen.com/subject/vbqjsttx.html