移动端设计模式的误用

如果你是一名经验丰富的设计师,你一定会认同一点,受他人启发并不是在抄袭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

相关推荐

  • 88个IXDC国际体验大会的PPT干货

    88个IXDC国际体验大会的PPT干货 毫无水分的PPT资料,快来下吧。   下载地址:http://pan.baidu.com/s/1gekWpJd 密码:请在 【艾欧交互设计】公众号里回复:【ixdc】获得密码 ​微信二维码见页面底部

    交互设计 2015-12-16
  • UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31
  • 听Google设计团队讲述新logo是如何被设计出来的

    [核心提示] Google 为什么要换 logo,这个新 logo 是以什么样的理念和思路设计出来的?来听听 Google 设计团队自己的解释吧~

    2017-06-04
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 【CIO说】花椒直播韩三普:用户体验与核心技术才是硬实力

    本期推荐韩  三  普花 椒 直 播 CTO社交直播作为一个年轻的行业,”高富帅”表现出的强大增长和吸金实力虽让业外人士倍感羡慕,然而作为一个严重依赖技术、用户体验要求极高的行业,流量等时代红利已经不能称其为门槛。如何打造平台差异化的竞争力?近日,花椒直播CTO韩三普接受了ENI经济和信息化网的采访,分享了花椒直播快速增长背后技术所提供的强大支持。并结合当下创新趋势,分享了直播在其中可发挥的作用。亮点提炼如何打造平台差异化的竞争力,以核...

    2018-04-26
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 如何让设计效果可量化

    前言: 做搜搜这些年一直沉浸于重点工作中的项目,除了定时写项目总结与培训。都快忘记写文章很抱歉。这次终于有了重新学习机会,应该多写。 长久一来也是思考如何让我们每天面对的工作内容更直观价值体现与量化。 …

    2015-04-13
  • 交互设计如何影响公司的发展

    在我的工作体验里,交互设计在公司,尤其是软件公司、互联网、智能家居/硬件公司里是非常非常重要的。好的交互设计师在公司里不仅会得到其他人的尊重和肯定,也会影响公司的重大决策。1.交互设计帮助留住用户交互设计的出发点是满足目标用户的需求、解决他们遇到的问题。它可以增加产品的易学性和易用性,提高效率。它使产品架构更合理,减少用户操作步骤,提高效率。同时,好的交互设计可以增强产品的趣味性,强化体验,帮助树立品牌形象。交互设计对于留住用户、增强用...

    2018-03-09
  • Axure-小红书APP登陆界面划屏效果制作

    有一款叫做小红书的APP(不是小黄书)登陆界面做的非常清新脱俗,教他家用Axure模仿练习一下他的登陆界面划屏效果,这个内容虽然有些多,但是制作方法并不难,耐心跟着做的话肯定没问题哒!点击观看效果 效果分析 …

    2016-01-06
  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08