恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
墙外干货:那些年你膜拜过的设计范例也许都是错的
0.0°
2016-10-18 自译外文 经验/观点 原作者: 未知 举报 7329 103 92 9

如果你是位有经验的设计师,你可能会同意,在 UI 设计的领域中,受到他人的启发并不能与窃取创意画上等号,而是共同研究什麽才是最佳实践、使用设计模板(Design Patterns)、遵守设计准则、透过模板确保你的用户可以熟悉如何操作你所设计出的使用者介面。


有人说,一味遵守设计准则、以及跟随他人脚步,是在扼杀创意,而且到最后,所有的 App 看起来都一样。从 UX 的角度,我则看到不一样的问题。当你开始导入某些设计模式之后,可能会让你觉得 Google/Facebook/Instagram/其他你喜欢的 App 就是对的,他们的设计目标就是你的目标,你也从未质疑。以下我们就会列出一些你可能会觉得是最佳的设计模式,而其实并没有你所想得那麽好。


隐藏的导览(Navigation)


我猜至少有五十几万篇讨论过汉堡选单(hamburger menu)的文章,绝大多数都是设计师写的,为此争论不休。如果你都没有读过,不妨读个其中一两篇,但简言之,问题不是在这个汉堡选单的图示本身,而是关于这个设计把导览行为隐藏到图标之后。

Image title


具有弹性而且方便使用的侧边选单


对设计师而言,汉堡选单这套解决方案既诱人且便利:你再也不用担心萤幕尺寸的限制,只要把整个导览行为都塞到一个可以卷动、预设隐藏的选单中即可。

不过,实验显示,把各种功能选项直接显示出来,是更能够增加使用者互动、让用户满意、以及获得营收的做法。因此,现在所有 App 市场的大玩家都从原本的汉堡选单设计,转往让功能更直接可视的方向移动。


Image title


Luke Wroblewski 重新设计的 YouTube 导览方式


如果你的 App 的导览行为很复杂,把导览隐藏起来,并不会让你的设计对移动端用户更友善。反之,你应该挑选最重要的功能,显示出来。


图标,没完没了的图标


因为萤幕尺寸限制,造成很多人不经大脑思考,就尽可能的使用图标(icon)代替文字以节省空间。在画面中使用图像既可使用较少的空间,也不需要多国语文翻译,而且人们都习惯图标了,对吧?此外,其他所有 App,也都这麽做。


因为心中有这样的假设,不少 App 设计师便把许多功能隐藏在其实难以理解的图标之后。比方说,在头几次用 Instagram 的时候,你有办法看懂,其实你可以使用这个图标传送讯息给其他用户吗?


Image title


或,假如你从来没有用过 Google 翻译,你觉得按下这个按钮,会出现怎样的功能?


Image title


假设用户都很熟悉这些抽象的符号,或假设他们愿意花时间探索、了解这些抽象符号的功能,都是常见的错误。


Image title


Bloom.fm App 中的迷之 Tab Bar


如果你设计了一个图标,还觉得用户看不懂,得加上一个浮动的文字说明,就代表你的设计真的有问题。就算你是 Foursquare,然后用户一定得学会这个功能,一样是个问题。


Image title

Swarm App 中的图示提示文字


这不代表你就不应该使用图标。毕竟,也有不少用户已经清楚理解的图标,这些图标绝大多数代表各种常用功能,包括搜寻、播放影片、email、设定…等等。(但其实用户也可能不太能确定这些图标的功能,比方说,当他按下爱心图标的时候,就不见得知道到底会发生什麽事情。)

Image title


一些绝大多数用户都可以轻易辨识的图示


在设计复杂并且抽象的功能时,便应该要搭配适当的文字说明。在这类的状况中,图标仍然有其用途,图标可以加强用户在选单中辨识这些功能,并且呈现出你的 App 的独特风格。

Image title


Pixelmator 的导览选单


用图标可以有效代表不少基本功能,但是当功能複杂时,使用文字说明会更有用。(而且,当你用了图标,一定要做过使用性测试才行。)


手势操作


苹果 2007 年推出 iPhone 之后,主流便开始注意多点触控,用户也学会除了单点屏幕之外,还可以使用多指缩放、及横画等手势。


于是手势操作在设计师之间便流行起来,不少 App 中也做了手势操作的设计实验。


Image title


Clear app 裡头的手势操作


就像把导览行为隐藏起来、或是用图标取代文字一样,设计中加上手势操作相当诱人,因为可以节省画面空间。(在画面上就不需要放置删除按钮了,只要用户用手指向左、或向右滑动即可。)


首先,我们知道各种手势其实都是被隐藏起来的行为。人们需要费力额外记忆。就像汉堡选单的例子:愈是把功能被隐藏起来,愈少人就会使用这些功能。

此外,手势操作跟滥用图标有一样的问题:有些手势比较常用,像单指点选、缩放以及卷动等等,反之,有些複杂的手势,用户便必须就不同的 App 额外学习。


很不幸地,绝大多数的手势操作,并没有在不同 App 之间统一 ——在触控介面的设计中,这还是一块很新的领域。就算是单指横画,在不同的邮件 App 中,也有不同的行为。

Image title


Apple Mail 中,往右横画,会出现「标记成未读」选项

Image title


在 Mailbox app 中,向右横画,则会变成封存(archive)邮件


甚至,当你摇晃手机的时候,也会有不一样的行为。在 iOS 上摇晃手机代表还原上一动(Undo),但是在 Google Map 中,则是发送意见反馈。

千万别忘了,手势是被隐藏的操作行为,而且用户要花上不少心力记忆。如果你是 Tinder 的话,你大概有办法可以教育全世界往右滑动是什么意思,但前提是:这个手势操作,是你的 App 的设计概念的核心。


使用覆盖提示当作首次使用说明


首次使用说明(Onboarding)是 UX 话题的热门,代表的是用户与你的 App 的第一次接触。在许多例子中,首次使用说明通常代表的是在你的原本的介面上,加上一层覆盖提示(overlay),解释每个功能的用途。

Image title


Discovery app 中的覆盖提示

为什么这是一种很糟糕的解决方案?因为绝大多数的用户都会略过这些介绍提示,他们只想马上开始使用你的 App。而且就算他们注意到了这些说明,他们只要一把这一层覆盖提示关掉,也就马上什么都忘记了(特别是画面中塞满一大堆资讯的状况下)。另外,加上各种标记,也不会让你的介面变得更直觉。

你要记得:


「 UI 就跟笑话一样:需要解释的笑话不是好笑话,需要解释的 UI 也不是好 UI。」

Image title


首次使用说明可以用很多种不同的方法,变得对用户而言更有用。比方说,打开 Slack 看到的第一个画面,就在建立情境:他们做了简单的自我简介,主要强调使用这个 App 可以带来什么好处,代替用来说明功能的画面。


Image title


另外一种更具互动、亲近用户的方式,则是使用渐进式的首次使用说明。在 Duolingo 裡并没有解释这套 App 如何运作,打开 App 之后,用户就马上就选好的语言进行一段简短的语言测验(甚至用户都还不需要注册帐号),因为让人们学习的最好的方法,就是从做中学。而且,直接揭露这套 App 的价值所在,也是更有效加深用户印象的方法。

Image title


还记得在 Mailbox 裡头,横画手势与 Apple Mail 不一样吗?他们也使用了渐进式的说明:用户在实际开始使用 App 之前,首先要实际操作过一遍这些手势。

Image title


在你开始在半透明的覆盖画面上,设计各种箭头标记之前,请先停下来思考用户在第一次使用你的 App 时,到底应该要有怎样的体验。我们要聚焦在情境上。在绝大多数状况下,一定会有比覆盖提示更好的方法,可以用来欢迎你的新用户。


充满创意但是违反直觉的空资料画面


缺少经验的设计师往往会忽视空资料画面,不过,空资料画面会是营造整体 App 的使用经验的重要一环。


有些设计师,会把错误讯息或是空资料的状态,当做是一张可以尽情发挥创意的空白画布。


我们来瞧瞧 Google 相簿的空资料画面:

Image title


Google 相簿的空资料画面


第一眼看下去,很不错,对吧?妥当安排的版面编排、加上说明文字,上面还有漂亮的图片。


我们再看一眼,就发现了一些奇怪的事情:

* 为何在没有照片收藏(collection)的时候,下方会有一个这么突出的搜寻按钮?你为什麽会想要在空无一物中搜寻?

* 第二突出的画面元素,则是上方一大张显然不能按的图片。(不过有些人可能会去按按看)

* 提示文字说,我应该去看看画面上方的 + 号,真是有够糟糕,为什么不把「加入」按钮就直接放在提示文字裡头呢?这段文字简直就像「请按继续按钮继续」一样荒唐。


这样的空资料画面,显然无法让用户了解当下的情境:

* 什么是收藏(collection)?收藏为什么有用?

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

* 我该对此做些什么?(如果我一定得做些什麽的话)


当我们讲到创意的时候,少即是多。下面这个空资料画面的范例则在有用这个面向表现非常出色。(我们姑且先忽略「请按下方按钮」这段话)

Image title


请别忘了,空资料画面(或网站的 404 页面)并不只是一个发挥视觉美感或品牌个性的地方。空资料画面在 App 的可用性上也扮演了重要的角色。请让他们变得更直觉。


质问一切


请不要误解:各种设计模式与最佳实践,仍然是你的好朋友。但你记住每个 App 的用户都是不同的,某套设计在某个 App 可能成功,但是在你的 App 中可能会失败。没有什么设计可以放诸四海皆准。而且,你始终无法搞清楚为什么某个 App 之前会用那种方式设计。


你要自己思考,你要做自己的设计,你要做自己的研究。


测量、测试、检验。而且,当你发现你的想法有道理的话,也不需要畏惧违反既有的准则。


End


译者:zonble

声明:本文由设计夹翻译小组成员zonble翻译,设计夹校对发布,如需转载,请申请授权并保留译者全部信息,转载合作请添加微信:sezign01.更多精彩内容请关注设计夹。

Image title


更新:2016-10-18

收藏

103人已收藏

  • 41

    作品

  • 1140

    粉丝

  • 9

    关注

  • UX设计师面试时,最常被问到的7个问题
  • Web design trend 2017/2018
  • UI Color trend 2017/2018
  • 【译文】如何学习构建设计思维

    猜你喜欢

      2016-10-18 自译外文 经验/观点 原作者: 未知 举报 7329 103 92 9

      墙外干货:那些年你膜拜过的设计范例也许都是错的

      0.0°

      你确定要举报墙外干货:那些年你膜拜过的设计范例也许都是错的

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      92
      103
      9

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录