Bloody Sunshine

Just too damn hot

随处可见的交互设计灾难 之一

仅代表个人观点,与供职公司无关,一毛钱关系都没有

因为一些原因,我安装了一个某视频聚合App,Android版,简直是勾起了我的倾诉欲,满眼的交互灾难。说实话,这些灾难在数据上可能屁都看不出来。但是如果只要看数据就能设计出好产品的话,iPhone早就被Android赶到海里去了吧 :D

同样的,这些设计都会有人说:我觉得挺好用的啊。嗯,没有一个设计能满足所有人,我们做设计的[通常]会希望做符合普通人直觉的设计。

1. 横划切换底部Tab


请问上图哪些地方可以横划切换?

底部Tab,并且横划切换是微信Android版用了并发(liu)扬(du)光(shen)大(guang)的设计,底部Tab本来是iOS的交互范式之一。

  • 好处:是一级导航在单手操作的范围内,方便点击。
  • 缺点:主要是语义上略有不足,不符合从上到下的阅读顺序。

Android发布的时候采用一级导航放在顶部Tab的方式,优缺点正好和上面倒过来,随着大屏手机的普及,在Android 4.0中,Google引入了横划切换一级Tab的交互模式,降低了单手操作的门槛,好,这是背景。

在Android设备上使用底部Tab有什么问题呢?主要是两个

  • 在多数手机厂商选择跟随Android交互规范的今天,底部Tab的学习成本可能稍高
  • 安卓手机底部通常有3个操作键,越来越多的手机才用屏幕按键的方式,如果底部还有3-5个Tab,操作特别拥挤

不过上面这个不是今天要吐的槽,虽然用iOS的交互范式有缺点,但是通常不至于导致用户困惑,不过引入横划切换Tab这个,槽点就多了。

  1. 没必要:Tab在底部就是为了方便点击,引入这个手势没有太大好处
  2. 对后续产品设计不利:占用了在Tab内横划切换的手势,如果引入滚动banner/横向列表/二级Tab都会让用户迷惑
  3. 对于截图中又有滚动banner + 看起来可以滑动切换的tab的,真是交互灾难啊。

之前面试的时候问过微信某设计师,为什么会这样,当时好像是说因为曾经符合Android Design的微信支持横划切换Tab,为了适应用户的习惯就没有去掉。

这可真的不是什么好理由。另,我相信微信是可以做出符合Android Design的好的设计的,用户也能很快上手,但是微信的角度讲,可能再也没有什么动力做这件事了。

补充阅读:Designing Effective Carousels

2. 糟糕的新功能介绍

产品设计业界三大毒瘤:启动新功能介绍/Hamburger/弹窗求好评。
把产品内的功能介绍做的这么烂的,我还是第一次见。。。

首先,产品设计最好不要依赖用户看你的说明,一旦这个功能需要用户看说明才会用,就意味着交互不符合直觉。能没有,就没有。其次,部分高级功能给用户合理的引导是好的,但是应该在合适的时间给合适的人看。如果所有用户都要看,通常证明这个设计有问题。


如图所示,这个产品里有3个几乎一定会看到的新功能介绍/引导。

  1. 左图首次启动就会出现,这张图充分证明横划切换Tab这个设计就是有问题的好么,然!后!此时按Back键是没反应的,必须点击屏幕才能继续。
  2. 右上图播放新闻类内容的时候,首次把手机横过来,进入全屏播放就会出现,特别神奇的是:读起来很难,因为三句话结构差不多,但是这个时候后面的视频还在继续放,我他妈到底要不要看你这鬼玩意,同样的,按Back键是没反应的,必须点击屏幕才能继续。
  3. 右下图更神奇,我试了几次也没搞这玩意的出现逻辑,看着看着突然就出现了一个问我要不要开始GPU加速?同样的,这个时候后面的视频还在继续放。什么是GPU加速,如果这么好为什么默认不开,我开了会不会出问题?出了问题怎么办?Don't Make Me FUCKING Think啊!!
  4. 额外槽A:第二点提到的,如果你把手机横过来,进入了全屏播放模式,此时竖起手机,是不会回到窗口播放的,需要自己点击Back。这是典型的反直觉和inconsistency。
  5. 额外槽B:右上图的功能虽然几乎成为国内在线播放器标配(对于有需要的人是否仍需要这么强烈的介绍?),同时引入了误触的问题(是否需要默认开启?然后又有了屏幕锁的功能....),简直是feature复feature,feature何其多的感觉,只YY功能,不做设计的人,是不叫产品经理的。

(此处删除了一段黑)

先写到这,回头继续写写

  • 基本的Consistency
  • 新功能引导设计的基本原则
  • 过于密集的操作
  • Hamburger sucks