威秀影城App如何在每个可以搞砸UX的地方全部搞砸

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

在正文开始前,我想先打个预防针,我认为,有待改进的设计分两种。

第一种是表面上有所不足,但可以「感觉」到设计者很努力地想把事情做好,有一种憨直可爱的笨拙感;第二种呢,就是摆明了在鬼混的类型。

我在以前非常喜欢取笑别人的差劲设计,尤其是第二种,而且是恶毒至极的取笑,什幺垃圾啊、狗屎、低能、ㄆㄨㄣ之类的字眼都会公开使用。不过我近年来已经很少做这种事了,一来是慢慢知道为人要谦虚,二来是浪费自己的时间,三是被取笑的对象根本不会听进去。

那幺今天我写这篇文章要做什幺?

很多人嘴上说设计很重要——尤其是创业者——但真的要拿钱出来的时候,又误用所谓的 MVP 精神,把设计摆第二。 我想藉由这个产品来跟大家分享,一个产品的设计没做好,能够把使用者体验搞砸到什幺地步。

威秀影城这个 App 有一些特点,让我觉得特别适合当负面教材:

好了,预防针打完,让我们来一步步探索这座垃圾山吧,在每个画面我都会说明哪里做错、以及适当做法,并附上参考资料,让大家一起从中学习。

威秀影城App如何在每个可以搞砸UX的地方全部搞砸
App store 截图

由于我本身几乎从来不看也不参考别人的设计,因此这是朋友要我去下载来看看的,来到了 App Store⋯⋯

狂,一颗半⋯⋯反正 FB 也才三颗星嘛,能差到哪里去呢——我对自己说着。

第一印象
威秀影城App如何在每个可以搞砸UX的地方全部搞砸

我们甚至可以说这 App 根本还没开启,就犯了第一个错—— 不要在 App Icon 上放文字 。

像这幺大的品牌,识别规範里一定有纯 Logo 的版本,正确示範:

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

好,那⋯⋯我要进去了喔⋯⋯ >///<

首先迎接我的是这个画面:

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

NG!根据 iOS 的设计规範,这个所谓的欢迎画面事实上叫做「Launch Screen」,它不是拿来放 Logo 的 ,而是应该準备一个假的、空有框架的 App 主画面来让使用者有「正在读取中、开启很快」的错觉。

好了,开启完成,接着立刻会看到:

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

NG!UX 要做好,其中一个要素就是应该要 让使用者有「掌控全局、了解状况」的感觉 。在要求授权时没有任何说明,而且一打开就要,就会让人在这个地方按下拒绝,进而损失后续的行销机会,甚至影响功能的运作。

我当然是按下拒绝了,然后⋯⋯

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

呃⋯⋯所以你不会放个 Loding 的小动画吗? 动不动就跳 Alert 来中断使用者操作是大忌啊 !这样子久了  使用者会养成看到 Alert 就按掉的习惯 ,万一有什幺重要的大事,就无法通知到,NG!

在打开 App 的头一秒就连续做错四个地方,真不简单,所以我们可以看到主画面了吧?

NO!

紧接着是一系列贴心的使用教学: 威秀影城App如何在每个可以搞砸UX的地方全部搞砸

 让我想到了. 威秀影城App如何在每个可以搞砸UX的地方全部搞砸

NG!一般人的工作记忆或短期记忆能力根本无法负荷这种资讯量,一个良好的设计应该  直觉、处处埋好视觉暗示和适时引导 ,而不是吐一本说明书出来,强迫使用者「学」这个烂设计。就算真的要教学,也应该  要有可跳过的按钮 。

主画面体验

好了,折腾了一番,终于来到了主画面:

威秀影城App如何在每个可以搞砸UX的地方全部搞砸
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

NG 1!如果有东西要下载或读取,就 应该让使用者知道现在状况如何 ,而不是 hang 在那里。我的网路速度高达 1 Gbps,但这个空无一物的状态还是持续了快一分钟,像这种状况不只设计差劲,连开发都该检讨。

NG 2!萤幕最上方显示时间、电量等资讯的 状态列 攸关使用者对整个系统的掌控感和安全感,以非游戏类型的 App 来说  无论如何都不该隐藏 ,威秀这个 App 根本就是以为这样画面会比较乾净而隐藏,这是超级愚蠢、严重、且不替使用者着想的不良设计。

好不容易读取完了,让我们欣赏一下:

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

我先不讲视觉设计的品质,反正也糟到无话可说。

先来看主选单好了, 导航系统 担负着在使用者脑里建立资讯架构的重责大任,按下右上角的汉堡选单,我们会看到⋯⋯

威秀影城App如何在每个可以搞砸UX的地方全部搞砸
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

⋯⋯我是真的如上图那样笑,这种设计就是标準的还不会走就想飞,连基本的逻辑都没顾好,风格语彙也没清晰定义、细节没做,就想玩这种特别效果,只会让 UI 有种 笨到不行 的感觉,这也是我在初学者身上最常看到的大头症。NG!

另外,一个好的设计应该低调直觉;使用者打开 App 的目的是「完成某件事」,而不是反而被产品的外观吸引过多的注意力而分心。老话一句:

切记,做设计之前,别逛太多 Dribbble,那真的只会把你害惨。

好了,刚刚打开出现的教学画面有说往上滑动可以看到电影资讯,那就滑滑看好了:

 威秀影城App如何在每个可以搞砸UX的地方全部搞砸
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

这一瞬间就出现两个严重设计失误:

虽然教学说往上滑可以看到资讯,但我用点的明明也可以,多加这鸡肋手势要干什幺呢?而我原本预期可以看到详细的电影资讯和介绍,结果两个画面的差别几乎只是多了一颗按钮:

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

然后猜猜看,你要撤掉电影资讯要怎幺做?应该是往下滑对吧?错。你只能点最左上角的返回箭头,这个地方有很多设计理论可以提,事实上这不叫画面,而叫「状态」,因此如何返回应该要有不同的设计。

威秀影城App如何在每个可以搞砸UX的地方全部搞砸

顺带一提,点左上角的「热售中」可以切换成「即将上映」,这画面展示了即将上映的电影,那「立即购票」的按钮当然是不能按的,结果也没趁机利用位置做个「提醒我」的功能,这产品的 PM 不晓得在混什幺。

OK,让我们点一下「电影介绍」,然后又会再一次看到笨拙的、为了做而做的动画:

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

老实说我当下真有种「这设计师是用 PowerPoint 在做设计吗?」的感觉,然后最好笑的是,当你按下「电影介绍」按钮的同时,那颗按钮就⋯⋯

消失了!

消失了!

消失了!

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

然后你要按左上角的箭头才能返回喔!而不是往下滑撤掉!

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸
其他体验 订票

接着来看看订票的流程:

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

视觉设计粗糙,像没做完也就算了,上面的三个 icon 感觉是想做出步骤感,但没有文字说明反而像选单,而且不能按,NG。

我在这个画面选完电影和场次后,接着下一步是要登入进行确认:

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

照理说点第一个 icon 是回上一步,最左上角则是退出订票流程,但 icon 不能点,要回上一步是按左上角,违反直觉和操作路线,NG。

票夹
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

一进入票夹,劈头又是不带说明的权限要求,NG。

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

由于我是初次使用,这个画面没东西很正常,但是这种「空状态」应该要有适当的解释 ,否则使用者易误以为坏掉了,NG。

讯息

在主选单上有个功能叫做「我的讯息」,进去后长这样:

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

我实在太傻眼了,这个讯息功能不知道是要传讯息给谁,也不知道要干嘛用的,还有个启人疑窦的定位 icon,只好点了左下角的问号,然后就出现⋯⋯

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸

最后是退票和会员设定,看到这里我已经不知道该说什幺了。

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸
  威秀影城App如何在每个可以搞砸UX的地方全部搞砸
结论 — — 我们能学到什幺 给初学者

UX 和 UI 的设计,除了外观,更和功能如何发挥有着紧密的关係,如果只从表面做图开始学习,罔顾背后的逻辑和互动,那幺你的设计将缺乏好理解、好操作的扎实感,建议参考我开设的课程

给有一定程度的设计师

你会发现,我上面提到的东西,全都是苹果一开始就有给出指引的简单观念,我并未提到任何艰深的视觉构成与 UX 理论;我们几乎可以说,99% 的设计工作,都是基本功所堆叠而成的。

基本功代表简单吗?一点也不,蛋炒饭啊,最简单也最困难。

 

现在就回头想想,你是否花了太多时间在阅读好像很营养的高阶理论,但却把最基本的东西给忽略了?

Bonus

以 Android 为例,就花 20 分钟做个画面简单示範一下,光用一些最基本的元件,就能够把上面提到的问题全解了:

  威秀影城App如何在每个可以搞砸UX的地方全部搞砸
   
 

上一篇: 下一篇: