滥用的移动设计模式
(介绍了五种被过度使用的设计模式,以及在相同情境下如何思考和替换这些模式。)
如果你在设计上经验丰富,你可能会同意,做用户界面设计时从他人的设计中获取灵感并不是偷窃。这是最佳实践者的研究结果,这是在应用设计模式,是在遵循指导方针,是确保相似的用户可以使用相同的模式从而提高可用性。
可能有人会说坚持指导方针、模仿他人会扼杀创造性,并且到最后所有的APP看起来都一样。从用户体验的角度,我看到了另一个不同的问题。习惯于适应最佳实践者使你确信谷歌/Facebook/Instagram(任何你最喜欢的APP)——这些应用永远是对的,他们的设计目标与你的相同,从而使你无法去质疑他们。这里有一些被认为(或过去被认为)是最佳实践的模式,但可能不如你初看时所想的那么优秀。
1、隐藏式导航
至少已经有50万个关于反对汉堡菜单的帖子,作者主要是设计师。如果你都没读过,建议读一到两篇;但简而言之,并不是关于图标的,而是关于隐藏于图标之后的导航。
滑动式菜单用起来灵活而便利
对设计师来说这种解决方案相当诱人和便利:不需要担心屏幕空间的限制,只需把整个导航挤入默认隐藏的滚动式叠加页。
然而实验表明,更为可视化的暴露式导航能够提高参与感、用户满意度,甚至收益。这就是为什么现在所有的“顶级明星”们都把汉堡菜单改成一直可见的高关联性导航。
如果你的导航很复杂,隐藏起来并不能提高友好性,但优化次序可以。
2、图标,到处都是图标
因为屏幕空间有限,为了节省空间把每处可以用图标去替换文字标签的地方都用图标,然而这看起来也很无脑。象形图占据更少的空间且无需翻译,用户最终会对图标熟悉起来,对么?而且其他的APP都是这么做。
有了这个结论存在脑中,APP设计师们有时候会把功能隐藏在图标之下,导致用户很难察觉到。例如,你能想象到你可以直接通过下面这个图标发送信息么?
或者,设想你从未使用过谷歌翻译,点击下图的图形后你预期得到什么功能?
存在普遍的错误,即设想你的用户同你一样熟悉这些抽象的图形或者愿意花额外的时间去学习了解这些图形。
Bloom.fm上的神秘标签栏
如果你已经设计了一个图标,并且觉得需要一个弹出式标签去解释它,那你的设计就错了。即便你是Foursquare设计师而你的用户无论如何都得学会使用。
Swarm APP上的图标提示
但这并不意味着你完全不能使用图标。仍有许多用户熟知的图标,大多都是表示通用功能的图标,像搜索、视频播放、邮件、设置等等。(但用户仍不能十分肯定,比如,当他们点击一个心形图标时会发生什么。)
一些图标已被大多数用户熟知,可认为是通用的
然而,复杂而抽象的特性应该随着适当的文字标签一起展示。在这样的案例中,图标仍很有用,因为它们可以提高菜单项的可发现性并增加了APP的个性化和趣味性。
Pixelmator的导航
基本功能通过图标展示会很有效,但相对复杂和抽象的功能,文字标签更有用。(如果你使用了图标,请带上有用的文字。)
3、基于手势的导航
2007年苹果向世界介绍iPhone时,多点触控技术进入了主流视线,用户了解到他们不仅可以在手机界面上点击,还可以扩大、缩小和滑动。
当时手势在设计师中很受欢迎,并有许多APP专门设计用来实验手势控制。
Clear APP上的手势导航(滑动结束,收缩改变列表)
正如隐藏式导航和用图标取代文字标签,手势似乎对设计师期望节省屏幕空间充满了诱惑力。(并不需要一个删除按钮,用户只需左滑或右滑,手势由我们定。)
关于手势我们必须了解的第一件事是:它们总是不可见的,用户需要花时间去记住它们。就像汉堡菜单的案例一样:如果你把一个功能藏起来,越少有人去使用。
另外,手势和图标有相同的问题:存在大多数用户都了解的通用手势,像点击、缩放和滚动;同时也存在那些在每个APP中都需要发现和学习的特定手势。
不幸的是,在APP中大多数手势都不是标准和一致的——触屏设计仍是一个很新的领域。即使是一个简单的手势,例如在滑动邮件,在许多邮件APP中都会产生不同的效果。
在APP Mail上右滑表示标记为未读相同的手势
在Mailbox中表示邮件存档
或者,想象一下摇动设备同时代表了撤销(在iOS上)和发送反馈(在谷歌地图上)。
不要忘记手势是隐藏式控制,且需要用户花费大量的努力去记忆。如果你是Tinder(国外一款交友软件),你或许能够教育全世界右滑的用意——但这只是你的APP概念的重要组成部分。
4、登入时的引导页
登入——最近热议的用户体验主题——指用户初次进入一个APP。在许多案例中,这仅仅指向用户展示几个引导页来解释界面:
Dcovery上的指导层
为什么这是不好的解决方案?因为许多用户会略过你的引导;他们只想马上开始使用APP。而且即使他们注意到你的引导,在他们关闭了引导层之后通常会都忘光。(特别是当屏幕充满了信息。)最后但同样重要的是:在你的界面增加引导层并不会更直观。记住:
用户界面就像笑话,如果你一定要对它进行解释,它就没那么好了。来源 : Startup Vitamins
登入流程可以用其他更有用的方式设计。例如,Slack利用第一个屏幕创造一些语境。他们只是简单地自我介绍,聚焦点在利益上而不是屏幕和功能。
第一时间吸引用户的更有效方式是渐进式登入。Duolingo没有解释APP如何工作:他们鼓励用户进入APP中做一个快速的语言测试(甚至不需要登录),因为用户在使用时学得更快。另外,展示APP的价值也是增加参与度的方式。
还记得滑动手势在Mailbox和Apple Mail中的不同么?下面是他们的渐进式登入方式:用户在真正开始使用APP前,需要对每一个手势进行演练。
在你开始在半透明层上设计引导页前,停下来想一想用户初次接触APP的体验应该是什么。把注意力放在情境上。大多数情况下都有更好的方式来欢迎你的用户。
5、有创意却不直观的空状态
空状态很容易被缺乏经验的设计师所忽视,然而对APP的整体用户体验来说,它是很重要的组成部分。
有时候设计师会把错误信息和空状态当做发挥创意机会的空白画布。
下面是从Google photos得到的空状态页面:
第一眼看起来很棒,对不对?一张漂亮的图片,底下接着指导文字,形成很好的设计。
但第二眼看时,这里有些奇怪的东西:
- 如果没有收藏任何内容,为什么有个突出的搜索按钮?为什么你会想要在空无一物中搜索?
- 第二突出的元素——图片显然是不可点击的(虽然许多人会试着去点一下)。
- 提示信息告诉我应该去找顶部的“+”按钮,这看起来非常尴尬。为什么提示信息不直接包含一个添加按钮?这就像是在说“点击下一步按钮进入下一步”。
上面的空状态页没有帮助用户理解下文:
- 收藏内容是什么?为什么它们有用处?
- 为什么我没有任何收藏?
- 关于这个我能做什么(如果我应该要做点什么的话)?
提到创意,有时候少即使多。下图的空状态页做得很好且有用。(让我们忽略“现在请点击下面的按钮”指示。)
Lootsy上的空状态页
别忘了空状态(类似于网页上的404页)不仅仅关乎视觉美感和品牌个性,它们在可用性上也起了重要作用。让他们更直观。
质疑所有
别误解我:设计模式和最佳实践者仍是你的朋友。但是请记住APP、用户是不同的:某个解决方案在其他APP上发挥效用,但在你的APP上却可能失败。这并不是放之四海皆准的东西。另外,你永远不会知道为什么要以特定的方式设计一个APP。
做自己的思考,做自己的设计,做自己的研究。
预估、测试、验证——如果你的设计更有意义,那么不要害怕没有遵从指导方针。