打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
被误用的移动UX模式


如果你是一个资深设计师,你可能认同在UI设计上,由别人启发而来的方案不是剽窃。因为那是极佳的实践研究。它使用了相应的设计模式并遵循设计准则。遵循那些用户所熟悉的设计准则,能确保创作出来的界面是可用的。


有些人可能会说这样循规蹈矩并跟从他人会丧失创造性,以至于最后,所有的app看起来都一样。从UX的角度,我却有不一样的看法。习惯于适应最佳的实践经验会让你对Google、Facebook、Instagram或任何你喜欢的App,深信不疑,你认为他们的设计目标和你的一样,因此没有任何质疑。这里有一小部分模式,被认为(或曾经被认为)提供了最优的体验,而实际却未必如你第一次所见时想得那般完美。



1.隐藏导航


现在网上至少有五十多万关于汉堡包菜单的报告,大部分是由设计师所写,他们激烈争辩这种设计。如果你恰巧错过了所有那些文章,可以读个一两篇,但简而言之,他们争论的倒不是关于icon的本身,而是关于将导航隐藏在图标背后。



灵活而易用的侧边栏


这种解决方案对于设计师来说,非常地诱人且便于设计:你不需要担心屏幕空间的限制,只要把你整个导航挤进一个默认隐藏的、可滚动的覆盖层就好。


然而实验证明,暴露的菜单选项是可以更有效地增加互动,提高用户满意度甚至是收入。这就是为什么现在所有大公司的菜单都发生了变化,从汉堡包式的菜单转变成最相关导航选项一直可见的菜单。



YouTube的导航变化,由Luke Wroblewski注释


如果你的导航很复杂,隐藏它并不会使app在移动端上更友好。反倒是确定优先顺序效果会更好。



2.图标,无处不在的图标


因为有限的屏幕空间,在各处用图标替代文字去节省空间,这同样看起来不是一个特别明智的做法。象形图标占据更少的空间,也不一定要被翻译,人们本身就对它们很熟悉,对吧?所有其他的app也都这样做。


带着以上这个假设,有时app设计师把功能隐藏在icon背后,而实际上这很难让用户去辨认。比如,你能猜到Instagram的这个icon背后,可以直接发信息吗?





又比如,假设你之前从未用过谷歌翻译(Google Translate),你觉得点击下面这个形象会出现什么?





一般来说,假设你的用户要么熟悉抽象的图形,要么愿意去花额外的时间来探索和学习它们,是错误的。



Bloom.fm里神秘的Tab bar



如果你觉得在你设计的icon上加上一个浮层解释就能使图标变得有用,那你就全错了。纵然你是Foursquare,而且相信你的用户无论如何都会学着去适应它,这仍然是个错误的做法。



Swarm 里的icon提示



但这些并不意味着你完全不要用icon。这里同样有很多icon已经是你的用户非常熟知的了。它们大部分代表很基础的功能,比如搜索、视频播放、Email、设置等等。(但是用户仍然会有疑惑,比如,这个icon按下去之后到底会发生什么)



有些icon可以被大部分用户所认识,且具有通用性



复杂而抽象的功能,需要配合用恰当的文案展示。在那样的情况下,icon还是很有用的。它们加强了菜单选项的可发现性,同时也给你的app增添了很好的点缀与个性。



Pixelmatr的导航


基本功能可以有效地被icon表达出来,但是复杂的特性应该有一个合适的文案解释。如果你总是坚持只用icon,那么icon真正表达的意思总是在人们的猜测中。



3.基于手势的导航


自从2007年苹果的iPhone面世以来,多点触控技术得到了极大的关注,用户发现他们不仅可以触碰和轻点界面,同时还可以缩放、捏合和滑动。


手势渐渐开始在设计师中流行,有很多app是尝试用手势控制而设计的。



Clear 里的手势导航



就像隐藏导航和用icon替代文字一样,手势看起来也可以帮设计师节省一些屏幕空间。(“这里应该有一个删除按钮,但人们可以左滑或者右滑删除就好”)


关于手势,第一件需要注意到的事情是,它们常常是被隐藏的。人们需要主动去记住这些手势。就好像汉堡包菜单这个案例一样:如果你隐藏了一个选项,很少人会主动去使用它。


另外,手势跟icon有一样的问题:有一些常规手势是大部分用户都理解的,比如:点击,缩放和滑动。其他的一些就需要从各种app上才找寻和学习到。


不幸的是,大部分手势在不同应用中是不标准且不相干的——这仍是触屏界面设计中一个很新的领域。即使是一个简单的手势如滑动邮件列表,在不同的邮件app里也是不一样的。




在Apple Email里,把Email向右滑动可以唤出“标为未读”




同样的手势在Mailbox则是标记已读



又例如,摇你的设备在iOS上代表“未完成”而在Google Maps上代表发送反馈。


永远不要忘记手势是隐藏操作,它需要用户侧花费很多心力去记得。如果你是Tinder,你或许可以让全世界都听你的:向右滑代表什么——但前提是这是你app概念里最基本的要素。



4.首次使用的引导浮层


首次登录,最近很火的UX话题,指的是用户和这个app第一次接触的体验。很多情况下,这只是指给用户一些引导浮层来告诉用户这个界面的意思:



Dcovery里的引导说明


为什么这是一个很不好的解决方案?因为很多用户会跳过你的介绍;他们只想赶紧用上这个app。即使他们注意到你的引导,通常也是在关掉浮层的同时也把上面的信息都忘光了。(尤其是整个屏幕都是各种信息的时候)最后:在你的界面上加上各种引导说明并没有更直观地引导到用户。记住:



用户界面就好像一个笑话,如果你需要解释你的笑话,那这个笑话实际上并不好笑。来源:Startup Vitamins



登录的整个流程可以在别的很多地方加以设计,那会让用户觉得更有用。举Slack做例子,它的登录就是用第一个界面来创建一些内容。它们一般只是介绍这个产品本身,主要展示应用的优势而不是界面或者某个功能。




去鼓励新用户的另一个更具交互性的办法是渐进式登录。多邻国(Duolingo)没有解释这个应用是怎么使用的:在用户所选择的语言里(即便没有登录),他们被鼓励去做一个快速的测试,因为用户最快的学习是通过动手去做。同时,这是一个更具说服力的方法去展示这个app的价值。




还记得滑动操作在Mailbox和Apple Mail里的不同吗?这就是渐进式登录怎样操作的案例:在用户真正开始用这个app之前,需要进行一次演练,来接触和学习每个手势的意义:




在把你的引导说明放在一个半透明浮层上设计之前,先停下来想一想,新用户接触到这个应用的体验应该是怎么样的。多聚焦在内容上。在大多数情况下,总有更好的方式去欢迎你的用户。



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


空状态是很容易被新人设计师忽视的部分,然而,相对于app的整个用户体验来说,它们可以是非常重要的元素。


有时设计师把错误信息和空状态当成一块可以施展创意的空画布。拿Google Photos这个空状态页做例子:



Google Photos里的空状态页



第一眼看上去很棒是吧?这个页面结构良好,一个引导语附带一副漂亮的配图。


但是再看第二眼,就觉得有些地方有点奇怪了:

  • 既然没有收藏的话,为什么这里会有这么显眼的搜索按钮?为什么你会愿意在没东西的情况下去搜索?

  • 第二显眼的元素就是配图,这是明显不可点的(虽然很多人会试着去点)

  • 灰色说明告诉我,我应该去找顶上的“+”号,这就非常奇怪。为什么这个说明里面不就自带一个“添加”的按钮?就像是说“点击’继续’按钮以继续”


上面说的这个空界面并没有帮助用户理解这个页面的内容:

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

  • 为什么我什么收藏都没有?

  • 那我该怎么做才能有收藏呢(还是我什么都不需做)?


当提到创意,少即是多。下面这个空状态就做得很好了,它使这个页面变得有用。(我们暂时无视“现在点击下面的按钮”这句话。)


Lootsy的空状态页

别忘了空状态(类似网页上的404页面)不仅仅是关于视觉美感和品牌个性。它们同时也在可用性上有很大的用处。



质疑一切


别误解我:设计模式和良好的实例仍然是你的朋友,为你所用。记住应用和用户是不同的:某个app里能很好解决问题的模式,在你的应用里却不一定适用。这不是一个可以以一敌百的事情。同时,你永远不知道为什么一个应用要以某种特定的方式去设计。


独立地思考,独立地设计,独立地探索。


权衡、测验、求证——如果不遵循规则能做得更好,那就不要害怕“离经叛道”。




本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
那些应该杜绝滥用的UI设计 – 学ui网
干货速递!Apple Watch人机交互指南之UI设计基础(1)
被误用的移动体验设计模式 | 人人都是产品经理
如何在新用户引导流程中用好空状态界面?
这些 App 小动画,看着就觉得爽 | 灵感早读
语玩APP中怎么拉黑其他用户
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服