移动端设计模式的误用

如果你是一名经验丰富的设计师,你一定会认同一点,受他人启发并不是在抄袭UI设计。这是一种最佳的研究实践。它也要运用各种设计模式,也要遵循设计规范,也需要确保选择用户熟悉的模式来建立可用的界面。

如果你是一名经验丰富的设计师,你一定会认同一点,受他人启发并不是在抄袭UI设计。这是一种最佳的研究实践。它也要运用各种设计模式,也要遵循设计规范,也需要确保选择用户熟悉的模式来建立可用的界面。

有些人可能会说,死守规范和模仿他人会扼杀创造力,终将有一天,所有应用都长一个样。但从用户体验的角度我注意到另一个问题。习惯于最佳实例可能会让你盲从Google/Facebook/Instagram/还有你最喜欢的应用,误以为他们的设计目标与你的相同,你却未对此产生质疑。下面是一些被认为(或是曾经被认为)是最佳实例的模式,但未必如你初见时所认为的那么好。

1. 隐藏式导航

至少有五十万篇关于汉堡菜单的文章,多数都是设计师写的,为此展开激烈争辩。如果你对此一无所知,可以读读这篇或者这篇。但简而言之,讨论点并不是这个图标本身,而是将导航隐藏在一个图标中。

移动端设计模式的误用

侧滑菜单非常灵活,使用也方便。

这个解决方案对于设计师很有诱惑力,方便快捷:你不用操心有限的屏幕空间,把整个导航塞进默认隐藏的滚动层里就可以了。

但是,实验显示,用一种更加可见的方式展示菜单项,能够提升活跃度、用户满意度、甚至收入。这就是为何所有大公司都在舍弃汉堡菜单,让最重要的导航项持续可见。

移动端设计模式的误用

YouTube导航的变革,Luke Wroblewski注

如果你的导航很复杂,将其隐藏并不是友好的移动端做法。为它排个主次才是。

2. 图标,到处都是图标

由于屏幕空间有限,另一个看似无需动脑的节省空间的方法,就是把文字尽可能都换成图标。象形图标占用更少空间,也不需要翻译,毕竟人们对这些都很熟悉,对吧?而且其他应用都在这么做

脑中带着这样的假定,应用的设计师有时就会把功能藏在一些难以辨识的图标里面。例如这个,在Instagram中你可以通过这个图标直接发送消息,你能猜到吗?

移动端设计模式的误用

或者假设你从没用过Google Translate,点下面这个图标你觉得会是什么功能?

移动端设计模式的误用

有个常见的错误,就是假定用户都熟悉这些象形图,或者愿意花时间探索和学习它们的含义。

移动端设计模式的误用

Bloom.fm难以理解的标签栏。

如果你认为在图标上加上悬浮气泡会让它更易用,那你就错了。即使你是Foursquare,用户无论如何都需要学习使用。

移动端设计模式的误用

Swarm中的图标提示。

这不是说根本不应该用图标。 有许多人们相当熟悉的图标,其中多数都表现一些常用功能,例如搜索、播放视频、邮件、设置等等。(但用户仍然会感到不确定,例如,点击心型图标时究竟会发生什么。)

移动端设计模式的误用

有些图标多数用户都认识,这些可以作为通用图标。

但是,复杂且抽象的功能总是应该带有适当的文字标签。在这种情况下,图标仍然有用,因为它们提升了菜单项的显著性,也为应用增加了一丝亲切与个性。

移动端设计模式的误用

Pixelmator的导航

基础功能用图标可以很有效地展现,但对于复杂的功能,应该带上文字标签。(如果要用图标,一定要做可用性测试。)

3. 基于手势的导航

苹果在2007年推出iPhone时,多点触控技术成为主流焦点,用户了解到他们不仅能够在界面上点击,还可以放大、捏合和滑动。

手势在设计师群体中盛行起来,有许多应用都带有实验性的手势控制。

移动端设计模式的误用

Clear应用中的手势导航。

就像把导航藏在图标中替代文字标签,手势有时候对于需要节省屏幕空间的设计师而言也极具诱惑力。(“不应该有删除按钮,人们左滑就行了。或者右滑也行,这个我们来决定。”)

关于手势要知道的第一件事情,就是它们总是隐藏的。人们需要记住它们。就像汉堡菜单那样:如果将某个选项隐藏起来,使用它的人就会减少。

而且,手势与图标有同样的问题:有些通用手势大家都掌握了,例如点按、缩放、滚动。还有一些手势每个应用都不同,需要探索和学习。

但不幸的是,多数手势在不同应用中,都是非标准且不统一的——这仍然是触屏界面设计相当新的一个领域。甚至简单如滑动手势,在不同邮件应用中也不一样。

移动端设计模式的误用

在苹果的邮件应用中右滑,会显示出标为未读选项。

移动端设计模式的误用

同样的手势在Mailbox里却是归档邮件。

还有,想一想,摇晃手机可能既是撤销(iOS)又是发送反馈(Google Maps)。

不要忘了手势是隐藏式的控制,你的用户需要付出大量的精力才能记住。除非你是Tinder,那你或许可以为全世界定义右滑的意义——但也仅限于你应用中至关重要的某个概念。

4. 首次使用的教学引导

首次使用,最近一个火热的用户体验议题,指的是用户与应用的第一次接触。在许多例子中,这就是指显示一些教学引导层,向用户说明应用界面:

移动端设计模式的误用

dcovery中的教学引导。

为什么这是个糟糕的方案?因为多数用户会跳过你的介绍;他们只想立刻上手。即使他们注意到你的教程,通常也转瞬即忘。(尤其当界面信息太多时。)最后这点也很重要:加入教学引导并不会使界面更直观。牢记这一条:

移动端设计模式的误用

用户界面就像一则笑话,如果你非要解释它,就不好笑了。来源:Startup Vitamins

首次使用的流程还可以用许多其他方式来设计,或许对用户更加有用。例如Slack,用了主界面来营造环境氛围。他们做了自我介绍,重点阐述了它的好处,而非界面与功能。

移动端设计模式的误用

有一种更加有互动性的方式欢迎新用户,渐进式。Duolingo没有解释应用的功能:它鼓励用户打开,在选定的语言中做一套快速测试(甚至都不用注册),因为人们在实际操作中学习最快。而且它也是一种更吸引人的方式来展现应用的价值

移动端设计模式的误用

还记得滑动手势在Mailbox中与Apple Mail里不同么?这就是它如何渐进式引导的:用户会看到一系列引导页,在实际使用应用之前,他们要在其中试着操作每一个手势。

移动端设计模式的误用

在设计半透明层上的教学引导之前,停一停,思考一下用户首次打开的体验会是怎样。要重视环境。多数情况下,总有更好的方式来欢迎用户。

5. 有创意但不直观的空状态

空状态非常容易被经验不足的设计师忽略,但是,它是应用整体用户体验的重要因素。

有时候设计师把错误信息和空状态当作挥洒创意的画布。

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

移动端设计模式的误用

Google Photos中的空状态。

第一眼看觉得很棒,对吧?遵循规范,层次分明,还有漂亮的插画。

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

  • 如果都没有相片集,为什么还要一个如此突出的搜索按钮?为什么要在空无一物中搜索?
  • 第二明显的元素——插画,却显然是不可点击的(尽管许多人会试着去点)。
  • 提示说我应该寻找顶部的“+”按钮,这太尴尬了。为什么提示本身不带有添加按钮?这就像是在说“点击继续按钮继续”。

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

  • 相片集是什么?它们有什么用?
  • 为什么我没有相片集?
  • 我该怎么办(我该做点什么吗)?

说到创造力,有时候少即是多。下面的空状态在实用性方面表现就非常好。(我们暂且忽略“现在点击下方按钮”的说明。)

移动端设计模式的误用

Lootsy的空状态。

别忘了空状态(类似于网页的404页面)不仅仅关乎视觉美学与品牌个性。它们在可用性方面还扮演着更重要的角色。要让它们直观易懂。

质疑一切

不要误会我的意思:设计模式与最佳实例仍然是你的良师益友。但要牢记应用和用户是不同的,某种解决方案可能在一个应用中大放异彩,在你的应用中却一败涂地。这不是普适规律。而且,你永远都不会知道一个应用为什么要这样设计。

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

权衡、测试、验证——别怕违背规范,只要那样做更有意义。

 

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

作者信息:Zoltan Kollin.Thinking about experiences as UX director at Ustream, co-organizer of Amuse UX Conference and co-author of http://uxmyths.com/

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

本文原创发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31457/

(0)
CatherineCatherine
上一篇 2017-06-01 13:50
下一篇 2017-06-01 15:58

相关推荐

  • 在无线产品中,一些普适的交互设计原则及实践(上)

    本文作者将逐条列出其总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。

    2017-05-04
  • Axure RP 7.0安装教程

    Axure RP 7.0Win版/64位下载地址:https://pan.baidu.com/s/1qN-SzT5g9U-O9OSzCMEnEw密码:8b6sAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

    2018-04-21
  • 让视觉设计变得高效+有说服力的4个步骤

    确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证

    2017-05-26
  • 腾讯高级交互设计师:什么是优秀的设计思维与方法?

    在年轻设计师里普遍存在工作方式和思维方式问题。 编者按:本文系腾讯高级交互设计师秦银(微信公众号“G思维”,ID:DesignG),在Boss直聘主办的直聘学院「对话UI&UX设计」活动上的分享整理,介绍如何把握设计…

    2017-07-28
  • 设计师们全都疯了!出Ps的Adobe公司又出新神器!

    图文来源:新设技 这次Microsoft 与 Adobe 强强联手退出了神器一样的应用,让现场设计师为之疯狂~~,不多说了,看视频吧... 设计师们,这到底是什么节奏啊~~?你们都懂的... 随著 Microsoft CEO Satya Nadella 近日…

    2014-10-12
  • UED中国最美民宿大奖十强榜单揭晓

    你的内心是否有一种渴望,在纷杂忙乱的都市生活之后,去放松身心,亲近自然?你会向往自由的空气与水,向往与有趣的人们相遇,你会需要一个有温度的空间,让你做回真正的自己。从山间居所到林中小屋,从海边美宿到都市一隅,最美民宿,它们的美只为打动你。它们或许承载着美丽的风景,或许被美好的人们所赋予的生活填满,又或者发生着许多奇妙的故事;它们也许出自专业的设计师之手,又或许是来自对生活有理想的人们坚韧而温柔的初心;它们在江南、在大理、在北京........

    2018-02-01
  • 感恩之家与河马教育签订人才需求战略合作协议

    2018年2月24日,河南感恩之家实业有限公司(以下简称感恩之家)与河南河马教育科技有限公司(以下简称河马教育)签订人才需求战略合作协议。感恩之家人力资源经理朱昌林与河马教育创始人陈滨感恩之家惠民工程是实体企业+互联网+实体店铺+分享经济的大惠民工程。在即将上线的电商平台部分,我们精心筛选了上百款来自全国各地的特色产品。在展示产品安全、原产、优质的同时,我们充分挖掘地域风土人情、历史人文,围绕产品特色讲述一个个中国物产的故事。这些都需要...

    2018-03-03
  • 【用户体验.春节特辑】我的记事(总第265期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第265期“我的记事”——家庭、个人故事随时记录,方便存储。直接点击主页面“我的记事”按钮,即可进入“我的记事”页面,随时随地添加、修改、记录个人及家庭资料和故事。同时点击方框内加号键,可以添加照片,点击完成上传。上传后可根据提示选“分享”键转发至微信、朋友圈、微博、QQ好友、QQ空间;选“删除”键进行删除记事内容;选...

    2018-02-16