【译】这些移动ux模式你用对了吗

本文译自medium上的文章Misused mobile UX patterns

作为一个用户体验设计师,你可能会认为界面设计中,受到别人的启发并不能算抄袭。实践是最好的研究方法,你使用设计模式,遵循设计规范,这些能够确保用户可以熟练地使用你的界面。于是就有人担心说,一味地遵从设计规范,跟随大众,会扼杀创造力,到最后,所有的应用看起来都是一样的。而从一个交互设计师的角度来看,我觉得我们应该关心的是另一个问题,那就是我们学习大公司的规范,学习他们的设计模式,我们相信他们总是对的,他们的设计目标是跟我们一致的,最后我们便失去了质疑他们的能力。
下面就来讲一些被认为是很好的设计模式,因为实际上它们并没有你想象中的那么好。

1、隐藏式导航

至少有50万的帖子在讨论关于汉堡包菜单的问题,大部分讨论者是设计师,他们在争论是否要反对使用这种菜单。概括地说,这其实不是图标本身的问题,而是关于将导航隐藏在图标后面的问题。

隐藏式导航为设计师带来了方便,不用再担心有限的屏幕空间,只要将你的导航挤到一个滚动列表里然后隐藏起来就好了。但是有关的实验表明,显式的菜单因为更容易被看到,能有效地提高参与度,用户满意度,甚至是收益。这也是为什么现在一些应用开始改变的原因,从汉堡包菜单转化为让最相关的导航项保持可见。如下图:

总之,如果你的导航很复杂,隐藏起来并不会让其在移动端上更加友好,但是按照优先级排序可以。

2、图标,到处都是图标

同样是因为屏幕空间有限,任何可以替换成图标的文字都尽可能被替换以节省空间,而这看起来也非常简单。图像占用更少的空间并且不需要翻译,用户也会慢慢习惯,几乎所有的应用都这样做。但有时,设计师会用一个相当难辨认的图标去表示某一个功能,比如下面这个例子。你知道这个图标可以让你在Instagram中直接发送信息吗?或者,假如你从没用过谷歌翻译,你知道这个图标的意思吗?

有一个普遍的错误的想法认为,用户如果不熟悉你使用的抽象的图标,就会花时间去探索和学习。如果你设计了一个图标,然后觉得有必要加上一个标签对其进行说明,那你的设计就有问题,即使你的弹出框让用户明白了图标的意义。

当然,不是说不能使用图标了,还是有许多图标用户非常熟悉的,像搜索、播放、邮件、设置等,在这种情况下,避免将常用的图标对应在不常规的功能上。

在另外一种情况下,对于一些比较复杂和抽象的功能,可以同时使用图标和文字,这时候,图标作为一种补充的元素,能够增强菜单项的可视性,也可以增加触点的面积,同时也给应用添加了一些个性化的元素。


总结一下,一些基础的功能可以使用图标来提高效率,但是对于复杂的功能来说,应该使用文字标签。使用图标时,应该进行相应的可用性测试。

3、基于手势的导航

2007年苹果手机发布后,多点触控成为主流,用户知道他们不仅仅可以点击或者轻触屏幕,还可以缩放,捏,快速滑动等。手势同样得到设计师的欢迎,各种包含实验性手势控制的应用被开发出来。



与上面的隐藏导航和图标一样,手势同样可以节省屏幕空间,比如删除,再也不需要有一个删除按钮,用户只需要向左滑动即可。但手势同时也具有隐藏导航和图标的问题,手势是看不见的,用户需要记住它才能使用,就像菜单,如果人们看不见,可能就会很少去用它。就像图标,手势也有一些常用的和非常用的,点击,缩放,滚动等是常用的,用户不需要学习,但是其他较复杂的则需要用户去发现和学习。

更不幸的是,手势并没有什么标准,同一个手势在不同的应用中有不同的意义。就像简单的滑动,在不同的邮件应用中是不同的,如下图。

总结一下,设计手势时,不要忘记手势是看不见的,用户需要花费精力去学习和记住。而且,也要注意手势在不同应用中的区别,尽量不要让用户困惑,除非很重要,不然不要做出一些与别人差异太大的手势设计。

4、入门教程

入门教程是用户第一次使用软件时出现的,最简单的方法就是直接在上面显示一些关于页面的操作教程,如下图所示。



这是一个不好的解决方案,因为很多用户是直接跳过介绍的,他们只想快速开始使用应用。即使用户注意到了你的教程,关掉之后也会很快忘记,特别是教程内容很多的情况。最后一个是,增加教程并不会让你的界面更加直观,更加容易使用,记住下面这句话。


用户界面就像一个笑话,如果你需要去解释他,那就说明不够好

入门教程可以有其他的更好的设计方案,比如介绍一下你的应用,强调这个应用具有什么优点。或者采用渐进式的入门,不解释应用如何工作,而是通过一系列的操作让用户学习。另外,前面提到的手势问题,如果你使用的是一些不常见的手势,可以在入门教程中让用户尝试一下。

总之,在设计一个半透明的教程盖层的时候,停下来想一想用户对应用的第一印象应该是怎样的,关注上下文,在大多数情况下,会有更好的方式去欢迎你的用户。

5、有创造性但是不够直观的空状态

新手经常会忽略空状态的设计,这对应用的整体体验非常重要。有些设计师觉得错误信息或者空状态出现时页面太单调,所以发挥创意对其进行设计,比如下面这张图。谷歌图片的空状态。


第一眼看起来挺好的,遵从设计规范,较好的组合式布局,加上漂亮的图片。
但是继续看,就会发现不少问题:

  • 为什么会有一个突出显示的搜索按钮,既然都没有东西,还能搜索什么?
  • 第二个比较突出的是那个图片,很明显以致于会让用户误以为是可以点击的。
  • 文字上说,点击“+”按钮,但是要在上面找,为什么不可以放在旁边。

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

  • 什么是收集,为什么收集有用?
  • 为什么我没有任何收集?
  • 我可以做点什么?

下面是一个相对比较好的例子。

总之,要记住空状态不仅仅是关于视觉美学以及品牌特性,他们在可用性方面有很重要的作用,尽量让其更加直观。

怀疑一切

不要误会我的意思,设计模式和好的实践依然是你做设计时的好的参考。只要记得,每个应用和用户都是不一样的,一个方案可能在别的应用上用得很好,但在你的应用上并不适用。没有什么可以适用所有应用的。另外,你也不知道别的应用到底为什么要这样设计,盲目地借鉴没有意义。

做自己的思考,做自己的设计,做自己的调查。
估计、测试、验证--如果你的方案看起来更好,不要担心它不符合设计规范。

以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,544评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,596评论 4 59
  • javaScript
    强哥总司令阅读 173评论 0 0
  • 一年一度的运动会又要开始了,天气转冷的时候,总会有一群人出去跑步。这群人似乎穿的是军装的样子在操场上面整整齐齐的喊...
    不像话的故事阅读 104评论 0 0
  • 知道这个消息的时候是3月19号,下午四点零四分。我还在床上睡觉,突然的接到店里的电话,二丫同学打开的。 “你还在睡...
    韩梦娇Taylor阅读 265评论 7 0