泛滥的移动产品设计模式

如果你是一名移动产品设计师,你可能会同意这样的观点:参考借鉴别人的设计不算抄袭。这不仅是最佳的练习方法,也是一种设计模式,而且还符合业界主流的设计趋势,同时还能确保在用户熟悉的模式下来创建可用性的界面。

有人可能会说,坚持设计规范和跟随其他人的步伐会扼杀创造力,而且时至今日,所有的APP看起来都是大同小异。从用户体验的角度来看,我看到了一个不一样的问题。你相信Google、Facebook、Instagram永远是正确的,所以习惯于采用他们的做法,因为他们的设计目标与你的设计目标相同,所以你不会对此产生质疑。

1476771019-4776-f7c00004a5dbf95d183

我还总结了一些设计模式,在过去可能被认为是最佳的实践方法,但结果可能不如你想象的那么美好。

1、隐藏导航

在业内各大热门设计社区,至少有50万篇的相关文章分析汉堡包菜单(是指把菜单折叠隐藏在抽屉,因菜单图标像汉堡包得名),但现在反对这种设计模式的人也越来越多了,我想这并不是因为大家都审美疲劳了。简单来说,我们要讨论的不是关于图标本身,而是隐藏在图标后面的导航。

1476770991-9477-f7c00004a5c80716b69

幻灯片菜单灵活,方便使用

汉堡包导航非常易于设计,你不必担心屏幕空间放不下那么多内容,只需将整个导航藏到左侧,导航内容超出一屏的时候滚动叠加。

然而,实验表明,以更可见的方式露出菜单选项,可以提高用户的参与度和满意度,甚至能提升整体的转化率。 这就是为什么现在大家都从汉堡菜单转向易于发现的标签菜单。

1476770990-5971-f79000696aec2008fee

YouTube将菜单露出

2、无处不在的图标

由于屏幕空间有限,在大部分情况下,尽量使用图标代替文本标签,这样会节省一些空间。 图标有丰富的隐喻性,大部分图标所代表的含义都能被用户识别,不需要更多的理解,而且用户大多也接受了这样的方式。

但图标又有它本身的限制所在,假设你从未使用过Google翻译,你能知道这个图标它所代表的功能是什么吗?

1476770990-9183-f770000c8c6b95dcb17

谷歌翻译

只有当用户点击图标并弹出这个手写输入界面之后,才知道原来这个图标的含义是手写功能。当用户不能明确功能入口指向的时候,用户通常不会主动去使用这个功能,阻碍了功能的曝光。

1476770990-5944-f7c00004a5e70d1259f

这是一个非常常见的误区,因为我们会自然的认为,用户熟悉抽象图形,或者他们愿意花更多的时间探索和学习怎么使用你的应用,包括下面这个神秘的标签栏,如果没有文字,单看图标你能理解这个圆圈和六边形代表什么吗?

1476770990-7666-f74000168bc0d90fc2c

如果你设计了一个识别性不强的图标,希望通过弹框的方式来提示用户,让其变得可理解,这其实并不是一个很好的解决方案,因为弹框提示的方式并不适合在移动端使用。

1476770992-6625-f770000c8c7d86f3d08

Foursquare应用

虽然有种种限制,这并不意味着你不应该使用图标,同样也有大量的图标用户非常熟悉,但那些大多是表示常见功能,例如搜索、视频播放、电子邮件、设置等等。不过有些图标用户可能仍然不确定是什么意思,比如当他们点击一个爱心图标的时候会发生什么?

1476770992-6637-f79000696b06279bf91

大部分图标能被用户识别,而且表意明确,但是有些相对复杂和抽象的图标,应该在其下方添加文字说明。 这样能让图标在菜单中更容易被发现,而且能提高点击率,同时也让界面更富美感和个性。

像下方的绘画应用,如果没有图标的装饰,界面就会变得十分呆板,且不方便用户快速识别功能,可用性会大打折扣;如果没有文字说明,用户又无法快速理解图标所以代表正确含义。

1476770993-2573-f7c00004a5fd91d076b

总而言之,基本功能可以用通识性较强的图标来表示,但对于复杂功能且无法直观理解的,应该配合对应的文字说明。 如果你需要使用到某些不常见的图标,可以先进行可用性测试,多问一些同事和朋友,确保其辨识性。

3、基于手势的导航

当苹果在2007年推出iPhone时,多点触摸技术第一次进入到大众视野,所有人为这个新奇的功能感到震撼,这是以往设备所从来没有的。我们可以用手指在屏幕上直接操作,点按、捏合、缩放、下拉、滑动、旋转,等等。

在设计师眼里,手势是一个很受欢迎设计模式,有许多APP就是是围绕手势控件来进行设计的。

1476770993-3932-f770000c8c80d201db9

clear的手势导航

像隐藏导航与没有文字说明的图标一样,使用手势操作的设计可以让界面变的更简洁。但是和前两者的隐藏内容不同,手势导航是永远隐藏的,如果用户忘记了这个手势,他就会在导航上花费很多时间,十分致命。

“应不应该有一个删除按钮,用户可以向左或向右滑动,这个由产品设计师决定的。”

此外,手势与图标具有相同的问题,像点按、缩放和滚动这样常见的手势操作,用户是熟悉并且理解的;但有一些操作,像侧滑、双击和双指缩放这样的操作,如果需要用户主动去发现,那是有难度的。

而且不同的APP之间,其所运用的手势并不是统一和标准的,它仍然是一个新兴的界面设计领域。 即使是像左滑这么简单的一个手势,在不同的邮件客户端里它们所代表的都是不同的功能。

1476770993-3181-f74000168be79d1bb7b

Apple Mail向右滑动邮件列表是未读取选项

1476770994-5373-f7800004be7586420de

Mailbox中相同的手势是邮件存档

仔细分析了下,当我们摇动设备的时候,在iOS中它代表的是撤销,但在谷歌地图中,它则是发送反馈的意思。

手势设计的难点在于,它是隐藏的控件,这需要在用户端做大量的努力,向所有的用户去教育手势的应用。 如果你是产品负责人,你会怎么教会用户向右滑动?

4、用户帮助和提示

当用户第一次使用APP的时候,大部分时候我们是通过新手引导一步一步教育用户使用新功能,告诉用户这些功能的含义。但是我并不认可这样的方式,用户进入APP后首先是想激动的使用新功能,而不是先花几分钟来学习。

1476770994-5596-f79000696b1c320585d

搜索应用程序中的教练标记

1476770996-7420-f74000168bf6e83be70

“一个用户界面就像是一个笑话,如果需要解释笑点在哪里,那说明还不够好笑。”

渐进式引导是指以一种更加互动的方式来吸引首次注册的用户, Duolingo不解释APP的工作原理,鼓励用户跳过,并用所选择的语言进行快速测试,也不需要用户注册,因为让用户最快熟悉的方法就是实际的体验。 此外,这也是一个更快速展现APP价值的一个途径。

1476770997-5243-f7b000081f8725063cb

还记得Mailbox中的滑动手势与Apple Mail的不同之处吗?这是Mailbox的渐进式引导,每一个手势都会有对应的说明,用户必须尝试每个手势,然后才真正开始使用APP。

1476770998-3077-f7800004be8a3fdf89d

当我们在半透明黑色蒙版上添加引导之前,先停下来好好思考一下,什么才是用户使用时真正需要的。 用户需要专注于内容, 你应该花时间想出一个更好的方式来迎接第一次使用的用户。

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

空状态是一个容易被新手设计师忽略的东西,以为无足轻重。但是,当它涉及到APP的整体体验时,空状态可能是一个重要的构成因素。

设计师往往在错误消息和空状态页面发挥视觉创造力,通过情感化的设计舒缓用户的情绪并指引他们。但,这不一定正确,过渡的设计可能适得其反。

我从谷歌相册里面截取了一张空状态的图片,以这个为反例来分析一下。

1476770998-1208-f74000168c0639faca6

第一眼看上去给人感觉还不错,对吧? 井井有条的排版布局,再配上精致的插图。当我们仔细看这个页面的时候,就会发现有一些奇怪的问题:

- 这里没有任何内容,为什么右下角会有一个突出的搜索按钮? 用户要在一个空白页面搜索什么?

- 插画图形应该是不可点击的,既然不可点,为什么要做的这么突出?

- 提示说点击顶部的加号按钮制作专辑也是超尴尬,为什么提示本身不包含添加按钮?需要用户去到另一个地方点击,这就像是“点击继续按钮继续”一样。

这个空状态内容根本帮不了用户理解上下文:

- 什么是收藏? 收藏它们有什么用?

- 为什么我没有?

- 在这个页面,我能做什么?

当我们谈到创造力的时候,有时候会觉得少即是多, 下面Loots的空状态是一个很好的例子。

1476770998-1019-f79000696b3f6816b25

空状态不仅关系着视觉美学和品牌个性,在用户体验上也至关重要。

最后,优秀的设计师应该努力尝试不同的设计模式和实践,而不是一味的参考借鉴他人成功的经验,应该怀有一颗认真的心去质疑所有的权威,用实际行动去验证它们。

转载自微信 BAT

翻译:昌胜 蘑菇街设计师

原文:Misused mobile UX patterns

地址:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570?source=userActivityShare-74647ebfe8a-1474211032

 

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

(0)
iouedioued
上一篇 2016-10-18
下一篇 2016-10-18

相关推荐

  • 几个被滥用的移动端用户体验设计模式

    如果你是一名经验丰富的设计师,你大概会同意我的观点:受到别人作品的启发不算是在剽窃别人的设计。现在最好的方法是:利用一些现成的设计模式,在符合设计规范的条件下,确保你使用的模式是你的用户所熟悉的,以此创建可行的界面。

    2016-07-12
  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • 是不是该考虑加入动态交互了?

    本文转载自:阿西博客 原始链接:是不是该考虑加入动态交互了? 一个优秀的APP交互动画不仅仅是炫,而且要实用,有的还要考虑手机的性能等因素,所以想做一个好的交互不并容易,今天就带你来见识一下什么叫洋气范儿…

    2015-03-21
  • 克制的力量

    引言  两家茶餐厅         有一家茶餐厅A的位置很好,周围有不少人流,但只有这一家茶餐厅,有地理位置优势,原本一个人30元左右就能吃一顿饭,餐厅经常巧言推销,让顾客多点菜,让顾客消费到50元以上。还有一家茶…

    设计理论 2016-06-05
  • 快来感受一下美帝的体验创新之旅

    追逐着2014年最后一天的时光尾巴,MUX五位同学加入了IXDC美国体验创新之旅,从北京跨国太平洋来到旧金山(San Francisco),深入参访硅谷多家互联网创新企业,交流和感悟体验创新。 8 ▲先来张大合照,三十多人,我…

    2015-01-20
  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

    2016-02-22
  • 21个令人崩溃的反人类设计:我忍你们很久了!

    100%中枪,强迫症请绕行... 1、我不相信没有人把蚊香弄断过! 2、这个反人类的设计,我特么说几百遍都不嫌多! 3、全世界的衬衣都缝这里!也行,那你用点软布啊?他偏不,必须用能割破脖子的,能引起过敏的,能让你…

    2016-05-17
  • [译]UX设计之复选框和开关按钮

    当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记…

    2016-06-30
  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26
  • 设计效果评估及产品迭代-有理有据做设计

    近期关注了几篇关于考核产品效果的文章,话题都是围绕如何权衡“数据指标”和“用户体验”。本人更认可的是Facebook总监的说法“ 数据目标是很有用的,但它和用户体验不应陷入永久的竞争对立局面 ”。在我们评估设计效果…

    2017-03-08