美文网首页
移动端UX模式的错用

移动端UX模式的错用

作者: 杨校尉 | 来源:发表于2015-11-28 13:04 被阅读0次

    如果你是一个有经验的设计师,你可能同意在UI设计中从别人的作品里获取灵感并不算抄袭的说法。通过借鉴而产生的作品是一种最好的实践练习,它也要运用各种设计模式,也要遵循设计规范,也要确保选用用户熟悉的模式来创作使用界面。

    有人也许会说墨守陈规或模仿别人会扼杀创造力,到最后所有的应用看起来都是一样的。但从用户体验的角度我看到了另一个的问题。盲目运用最佳设计使你相信Google/Facebook/Instagram或者其他你喜欢的应用永远是正确的,他们的设计目标和你的一样,并未对他们的设计产生过质疑。这里有些现在(或过去)被认为最佳实例的模块。但未必如你初见时认为的那么出色。

    1、隐藏式导航

    有近五十万篇描述过汉堡式菜单的文章,多数都是设计师写的,并为此展开激烈争辩。如果你错过了相关文章,可以阅读一下这篇这篇,但简而言之,这不是关于图标本身而是有关于把导航藏到一个图标后面的讨论。

    滑动菜单便于使用
    对于设计师来说这是一种十分诱人和方便的解决办法:你不必担心屏幕空间的限制,仅需要把整个导航塞进默认隐藏的滚动层里就可以了。

    但是,实践表明,用一种更加可见式的方式展示菜单选项,能够提升活跃度、用户满意度、甚至收入。这就是为什么大型的应用移除汉堡式导航而趋向于使更多相关的导航项始终可见。

    YouTube的导航改变
    如果导航相对复杂,将其隐藏不能带来友好的操作。应从优先级去考虑。

    2、图标,无处不见的图标

    在有局限性的屏幕界面上,通过使用图标替换文本标签的方式来节省空间也是没有道理的。图标占用较少空间,也不需要翻译,同时人们对这些图标都很熟悉,对吗?而且其他应用都是这么做的

    从这个假设考虑,应用程序设计者有时候在图标背后隐藏的功能在实际操作中是难以被识别的。例如,你能猜到,通过Instagram里的这个图标来发送即时消息嘛?


    或者,假如说之前你从无使用过Google Translate,你会期望通过点击下面的象形图标访问哪些功能?

    有个常见的错误,就是认为用户都熟悉抽象的象形图,或者他们愿意花费额外的时间去探索和学习它们的含义。
    Bloom.fm难以理解的标签栏
    如果你认为在图标上添加悬浮气泡会让它更易用,那你就错了。即使你是Foursquare,用户也需要去学习如何使用。
    Swarm中的图标提示
    但也不可以不使用图标。有大量的图标被用户所熟知,其中多数表示一些常用的功能如搜索、播放视频、邮件、设置等等。(但是用户仍然不确定当他们点击一个类似心型的图标时会发生什么。)
    有些图标是多数用户认识的,可以被视为通用图标
    然而,复杂而抽象的功能需要配备显示适当的文字标签。在这种情况下,图标仍然有用,因为他们可增强菜单的发现性,同时在应用中增加亲密感和个性化。
    Pixelmator的导航
    ** 基本功能通过图标可以有效地展现,但是对于复杂的功能,需要添加上文字标签。(并且如果使用图标,需要先对他们的易用性进行测试。) **

    3、基于手势的导航

    2007年苹果公司推出iPhone时,多触点技术得到主流关注,用户了解到,在操作界面上不仅可以点击还可以缩放、捏合和滑动。

    手势操作深受设计师的欢迎,许多应用程序都带有实验性的手势控制。


    Clear应用中的手势导航

    就像隐藏导航和使用图标代替文字标签一样,手势对于想节省界面空间的设计师来说是很有诱惑力的。(“那里不应有一个删除图标,人们可以向左滑动清空即可。或者向右滑动,我们来决定如何使用。”)

    对于手势,首先需要了解的是它们都是隐藏起来的。人们需要记住他们。就像汉堡式导航的状况一样,一个隐藏的功能只有少数的人会去使用。

    此外,手势和图标有着相同的问题:有些大多数用户都掌握并通用的手势,比如点击、缩放、滚动;还有一些手势是需要在每个应用中发现和学习的。

    不幸的是,更多的手势在夸应用间尚未实现标准化和一致性——在触控界面设计中手势依然是一个新的领域。甚至简单如滑动一封电子邮件的手势,在各个邮件管理应用中工作效果也是不一样的。


    在 Apple Mail中向右滑动会显示出“标记为未读”
    在Mailbox中同样的手势(向右滑动)表示归档邮件

    还有,想一想,摇晃你的设备,可能意味着撤销(在iOS上)也可能表示发送反馈(在谷歌地图上)。

    永远不要忘记手势是隐藏的操控,而且要记住,你的用户在上面需要花费大量的精力。除非你是Tinder,那你或许可以替全世界定义向右滑动的含义——但也仅限于你应用中至关重要的某个概念。

    4、首次使用时的界面引导

    首次操作,一个最近很火的用户体验议题,指用户和应用第一次接触。在许多情况下,这仅仅意味着展示一些覆盖的引导给用户讲解应用界面:

    dcovery中的教学引导
    为什么这是个糟糕的解决方案?因为许多用户会跳过你的简介;他们只是想快点使用应用。即使他们注意到你的引导,但是当关闭覆盖时,他们通常会忘掉一切。(特别是,如果屏幕塞满了信息。)而且最重要的是:添加教学引导不会使界面更直观。
    牢记这一点:
    用户界面就像一个笑话。如果你要解释它,就不好笑了。来源: Startup Vitamins
    首次操作的流程可以用一些可能更有用的方式展示给用户。例如,Slack,在第一屏介绍了一些使用环境。他们简单地自我介绍,注重效益,而不是界面和功能。

    渐进式引导是一种更具交互性的方式来吸引用户第一次使用。Duoling没有介绍应用如何操作:鼓励用户跳跃并快速测试所选择的语言(即使用户没有注册),因为在操作中用户可以学到更多。这也是一种更加吸引人的方式来显示应用程序的价值。

    还记得滑动手势在Mailbox和Apple Mail里的不同吗?这是它们的渐进式引导如何工作的:用户会看到一个演示,在实际使用应用前,他们要试着操作每一个手势。

    在设计一个半透明覆盖的教学引导前,停下来并想一下用户首次使用的体验是什么样的。要重视环境。在大多数情况下,会有更好的方式展示你的欢迎界面。

    5、有创意、不直观的空状态

    空状态很容易被经验不足的设计师忽略,但是,当涉及到一个应用程序的整体用户体验时,它们可能是一个重要的因素。

    有时候,设计师把错误的消息和空状态当作有机会发挥创意的画布。

    例如Google Photos的这个空白状态界面:


    Google Photos中的空状态界面

    第一眼看到时,觉得它也出色,对吗?遵循规范,层次分明,上面还有漂亮的插画。

    但再看一眼,这里有一些奇怪的东西:

    • 如果没有收藏集,为什么会出现一个突出的搜索按钮?为什么你要在什么都没有的位置查找?
    • 第二个突出的元素,图片显然是不能点击的(虽然很多人会尝试)
    • 提示说,我应该寻找顶部的“+”号,这很别扭。为什么提示本身不包含添加按钮?这就像是在说“点击继续按钮继续”。

    上面的空白状态界面并不能帮助用户了解情况:

    • 收藏集是什么?他们有什么用?
    • 为什么我没什么也没有?
    • 使用它我能做什么(如果我想做的话)?

    当谈到创意时,少有时是更多。下面的空白状态很好的起到了它应有的作用。(让我们暂时忽略“Now tap the button below”的按钮)

    Lootsy的空状态界面
    不要忘记空状态(类似于网页的404页面)不仅仅和视觉美感与品牌个性有关。而且它们在可用性方面具有更重要的作用。要确保它们直观易懂。

    质疑一切

    不要误解我的意思:设计模式和最佳实践仍然是你的伙伴。但请记住应用程序和用户是不同的:一种解决方案可能会在一个应用程序上工作良好,但不一定适合你的应用。这不是普适规律。而且,你永远都不会知道一个应用为什么要这样设计。

    独立思考。独立设计。独立研究。

    权衡、测试、验证——别害怕违背准则,如果那样做更有意义。

    原文链接:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570

    作者:Zoltan Kollin

    备注:本人首次翻译并发布,如有不足之处,欢迎大家指正。推荐大家去阅读英文原文,加深对文章主旨的理解。

    相关文章

      网友评论

          本文标题:移动端UX模式的错用

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