app中的交互手势和意符设计

角度一、首先从功能属性上进行分析：

第一层：NavigationBar上的意符为『消息』、『搜索框』、『历史』和『下载』，本质上是以功能名字命名的意符，其意符的表现形式为图片+文字。没啥好说的，每一项映射到自己的功能详情。

第二层：Tab的分类共有『热门』、『分类』、『康永来了』、『直播』和『广播』，其意符的表现形式为文字，这里大家看到『热门』标签本身变成橘黄色且下面有一个橘黄色细线，这是两个符号是通过这么多年的用户教育之后形成的意义共识，意义为：当前页面状态。这里我有一个小问题，大家猜如果这时候我右滑界面（采取的交互手势是单指向左轻滑），会发生什么事情？提供两个选项：

A、到『分类』页面。
B、到『订阅』页面。

详细绝大多数人都能答对，这里的正确答案是A，滑动到下一个tab『分类』。大家只知其所以然，感觉这里的tab本身就是靠滑动手势来控制的，但是更深层次的原因呢？为什么？

这里涉及到一个滑动切换tab的遍历解构，关于这个，我的网友@HoZiN老法师（大雾）的《浅议滑动Flick切换Tab导航 - 知乎专栏》这篇文章写得很棒，大家可以去看看。在这里我做粗浅的解释，在喜马拉雅这个app中，『首页』UI中的TabBar上的『热门』、『分类』、『康永来了』、『直播』和『广播』都是归属于当前BottomBar『首页』的，所以我们在滑动操作的时候应从当前深度的最近层开始交互。

如@HoZiN的下图所示：

如果用户滑动这个页面只能在首页的5个tab之间切换，我们认为他是下图的第一种，也即是在单一Bottom模块下切换（Hozin将其命名为独立Sub Navi切换，Sub Navi的意思其实也就是底部的Bottom navigation bar的意思，我上文中就直接简称BottomBar了，个人命名习惯而已大家能懂是这个意思就行），而另一种情况是有些app当滑动到最后一个tab，再右滑屏幕会进入到第二个Bottom模块，既是下图第二种的b-C和f-G的过程。虽然现在这种设计方式已经鲜有app在继续使用了，但是我在2017年的今天仍然是遇到了一些。并且有个特别而精彩的地方在于，一般情况下，b-C和f-G的滑动切换Bottom模块的这个交互往往是不可逆的。这点就比较有趣了，关于这个更深层次的原因可能是开发的原因，可能是产品没法做到每一个Bottom都有tab，也可能是因为别的app信息架构方面的原因，在这里就不展开了。

我们再继续单独看这个第二层：

是不是发现有一个奇怪的格格不入的叫做『康永来了』的东西混了进来？这里我就必须吐槽一下喜马拉雅的产品设计团队了，作为一个普通用户，我本能的以为这个tab下一定是和康永来了有关的内容整合，放在这里是因为运营需要，这个其实在内容平台上很常见，大家看QQ视频和爱奇艺他们不也经常这么干，本身是一件无可厚非的产品推广的入口常态，然后我滑过去了发现其实他是『每日优选』的一个频道，只不过最近主推蔡康永的这挡音频节目：

如上图所示，这个奇怪的『康永来了』的tab归属到的不是康永来了的音频详情页，而是一个『每日优选』的列表页，那我就认为这个设计是欠妥的。

我为什么说这样的设计欠妥，其原因如下：

因为我确实是有几个月没有使用过喜马拉雅了，我不记得『康永来了』这个位置之前是不是叫『每日优选』，还是之前首页只有四个tag，这个希望有关注的读者下方给我留言确认一下。

那既然我不确定，我们不妨分两种情况去分析：

第一种情况：之前首页只有四个tag，而新加了一个以具体内容ip产品名（比如康永来了也好，或者明天老罗来了也罢）作为显示，实则是每日优选的一个强视觉tag，为的是引导用户点击具体ip产品之后看到每日优选的这个列表，从而为别的每日优选这个列表页导流。（我认为对于一个成熟的产品团队，不太可能是这种情况）

第二种情况：之前首页就有『每日优选』这个tag，只不过后来为了运营或者强视觉需求，改成了具体ip产品名。（我倾向于第二种假设）

我猜测喜马拉雅的团队本质上是希望借助类似于康永来了这样大的ip露出，通过从视觉上的突出（视觉突出这一点确实做得很好）从而博取用户流量，然后让用户通过查看『康永来了』这个具象的兴趣点tab，进入每日优选的这个列表，从而为别的每日优选产品导流。

从文案层面来说『康永来了』确实比『每日优选』更吸引人，但是如果是我来设计这个地方的话，我个人倾向还是放一个每日优选的tag，毕竟这是所有用户都能懂的语言，而康永是谁？这个问题毕竟不是所有人都知道的。

如果实在是通过数据或者产品运营需求表示，我们需要强调『每日优选』的话，那我会把每日优选的视觉也做得像现在康永来了一样突出，但是名字不能变，还得叫『每日优选』。

那如果康永来了这个ip市场运营那边吩咐了，确实需要持久强推怎么办？

办法有，比如banner位就可以直接推，而且banner位可以直接跳转到具体ip的详情页，路径更加简短，用户马上就可以购买，不像现在跳到的是一个每日优选的列表，用户还得通过一次点击才能进入详情。

还有另一种极端的情况，如果有一天运营同学告诉我，banner位不允许一直放康永来了，但是市场同学又告诉我康永来了这个ip很重要，需要长时间强推。那我的办法可能是有以下两种：

第一种办法是在第三层的最前面（必听榜的前面）加一个独立的康永来了tag，这样的做法是开发成本简单易行，但是不够优雅。但是你连『小雅音响』这种智能硬件购买页入口都放在上面了，多放一个运营强推ip也没毛病啊。_(:зゝ∠)_

第二种办法虽然比较decent一些，是在第四层和第无层的中间开辟一块很小的次banner位去放，如下图所示:

但是我个人是不推荐这种做法的，哪怕未来这个次banner可以扩展为多个次banner轮播我也不推荐，因为如果是这样的话，用户首页第一屏留给『猜你喜欢』的内容展示就很有限了。

总而言之吧，第二层tab的『康永来了』一定是一个待埋点考量的争议设计。我只是提出我个人的见解，不一定对，大家切勿偏听偏信。好了我们继续往下看。

第三层和第四层：图片banner和分类频道icon，其意符的表现形式为纯图片/图像+文字，banner嘛这个没啥好说的，通过自动左右切换的图片告知用户一些产品需要告诉用户的信息而已。分类频道icon我之前的几篇文章里面都有提到一些，记得在我的文章里我说到的格式塔原理么，大家打眼一看这个分类频道icon就知道右侧还有一些，是可以滑动的。

第五层和第六层：这个就更没啥好说的了，就是一个常规的带图片的宫格列表（我习惯这么叫他们，你们想怎么叫都行）页，其意符的表现形式为图片+文字，右上角有点击更多有一个向右的图标表明是可以点击跳页的（具体参看我写的分割线那篇文章）。到一个内容更丰富的item列表页。那么我问大家一个问题，为什么猜你喜欢的这个图片不也做成左右滑动的而要做成这样固定展示6张的呢？

这里主要是有两方面的原因，第一是做成左右滑的话，屏幕空间最多只能展现三张半，不如现在这个展示6张露出得多。第二是有一个很有趣的交互上需要注意的点，大家看如下图所示：

我标记蓝色线框的部分大家看到了没，这个banner也是可以滑动，分类频道icon也是可以滑动的，整个页面Tab也是可以点击跳转的。这也就意味着，如果要执行tab滑动跳转这个交互手势，我想能采用的滑动热如右图红色所示，区域本身就已经很小了。如果下面猜你喜欢也做成可以左右滑动的话，那么Tab的滑动手势热区面积更小了。如果真是那样的话，那这个Tab就不该设计成可以滑动加载的。