产品需求-设计中关于“左”和“右”的思考

设计中关于“左”和“右”的思考
由于手机尺寸的限制，我们在拆装进行内容浏览若是进行一些滑
动操作，不同特性的内容操作也各不相同，比如图片会选择左右滑动
操作，文字会选择上下滑动；本文就介绍了在设计中会的“左”和“右”的操作，我们一起看一下。

最近经常在人人音频上看电视剧，截图发现人人视频在设计上有
个很有意思的点。

它的电影页中才有很多推荐电影片单，每个片单里有5-12部电影；碍于手机尺寸，用户只能看到3部电影；如果你对这个片单里的电影
比较感兴趣，可以转轴查看更多的电影——这样横向滑动的设计又侧
向被称之为“泳道”。

那么问题来了，究竟向哪个方向旋转呢？
分题或许你能觉得这是一个送分题，肯定是左滑啊；没错，你去
查看100个APP，这种水平横滑的泳道，99个都是左滑的；但是人人
视频就是那唯一的特例，它是左滑和左方滑相互组合的。

前一个片单是左滑，后一个就是右滑；反之，前一个片单是右上滑，后一个就是左滑。

第一次碰到这种设计，我很奇怪：为什么要做出这种挑战劲敌用户固有认知的调整？后来思考了一下，开始理解他们的做法。

当用户左滑查看电影时，浏览完最末一部电影，用户左方的视线是停驻在在屏幕右侧；如果下所一个片单依然采用左滑，那么用户的视线需要先移动到屏幕左侧，再移动到右侧——这个路线就是Z型浏览模式；而人人视频紧接着的是右滑，第一个视频直接从右侧开始，避免了用户视线的转移。

人人视频的这种方案，让我想起夸克浏览器——用户在夸克客户端里观看里边视频，如果点击屏幕的位置靠左，那么菜单就须要出现在左边；如果点击的位置靠右，工具栏就会出现在右边；这样的处理方式，可以缩短用户手指的移动距离。

一个是缩短视线移动距离，一个是缩短手指移动距离。

我无法给出一个结论，这种左右横跳的交互方式是否合理；从我
个人的角度来说，第一次使用不是很习惯，学习成本还是比较高的。

设计中有很多这样“左、右”的争论。

最经典的就是：的确定按
钮到底是在左边还是右边？这个话题被讨论了无数次。

那么不管是左还是右，我们至于在争论什么？左和右代表了什么？
我们习惯的浏览方向是由左至右，那么左代表了用户视线的起点。

我们经常说用户的浏览模式是Z型的，但是在移动端界面中，左
边为信息区，右边为操作区。

用户在快速浏览页面的模式下，根据左边的区判断自己是否对这
条内容感兴趣，如果感兴趣才或进行操作；所以当更多的情况下，用
户的下载模式不是Z型，而是L型的。

iOS11与iOS10相比，我们可以发现网页标题、搜索框文案和内容都是改成放在左边。

整体的视觉动线由中间美学改成了前面，快速广告主在快速浏览过程中视线不需要发生偏移。

右上代表着更好的易用性。

因为在移动端，用户更习惯单手极枪套手机进行操作；而都我们大部份人都是右撇子。

谷歌的MD设计中的减缩按钮，是位于界面右侧；微信的浮窗也是位于界面右侧，就是为了方便用户操作。

看到这里或许你会理解为什么“对话框的定出确定按钮在右方还是右边？”这个热点话题经久不衰了吧。

因为左边和右边背后都有理论支撑——左领袖人物着离你的眼睛更近，右代表着离你的手更近。

我们再来设想一个场景，针对左撇子用户，界面设计应该怎么调整；用户的第二种手是左手，那是不是要做镜面反转，把操作区移动到左边呢？读者中肯定有左撇子用户，你们会喜欢这种布局吗？
当然也会有不会一些设计方案在“左/右”的可以选择上没这么纠结，例如在微博、抖音这类社交产品中，其主页的“推荐”栏目永远在“关注”栏目的左边。

以微博为例，“关注”和“推荐”在内部信息架构上是类似的，下面都有一些细分类亚门：“关注”里有不同的分组，“推荐”里也有不同内容类别，例如热门、同城、榜单等。

但是“关注”用户需要点击下拉框才能鉴别，而“推荐”里用户直接右滑就可以切换不同的内容类别；如果把“关注”里的分组也改成滑动滑动的样式，那么必然会降低“推荐”栏目的流量。

抖音也是类似的道理，因为用户主页左滑可以查看的页面，如果把极力推荐栏目放在左边，那么用户左滑就会进入关注栏目。

引导用户进入已经高度关注的主页，相对来说意义不是很大；抖音的想法是——用户在刷推荐视频的时候，觉得这个视频很爱玩，对这个视频的片段产生兴趣；用户可以直接滑动进入的主页，而不算需要点击头像进入才能进入主页。

微博和抖音的“左关注，右推荐”的模式短果都是为了往推荐栏目引流。

社交产品追求的是用户可以在这个产品里建立更多关系链，关系链是网路产品设计产品的护城河；既然这个人你已经关注了，说明关系链已经形成，那就没有必要赤眼鳟了。

从这里我们也能看出，在考虑方案的时候，不仅仅要需要考虑交互易用性，更要着眼于流量编配——哪个方案的流量分配更符合数据量你的诉求，哪个就是好的方案。

甚至在很多时候，当交互易用性跟流量分配相冲突时，交互易用性是被牺牲敌我的己方，因为总经理流量代表了产品经理的KPI。

最典型的例子就是知乎为了给答案底部的广告引流把左右滑动切换答弊案改成了上下滑动；当然，反动我们也不能批判天涯社区的这种行为。

还是回到对话框的话题，“确定按钮到底在左边还是右边？”，最好的办法就是A/B测试；如果是一个引导用户安装APP的对话框，你就看“确定”提供支援按钮放在哪边可以提供更多更多的转化率。

这个A/B测试，搜狗输入法曾经做过，结果显示：确定放满按钮摆放在左边转化率更高，误操作率更低，操作平均时长也更短；那么我们是否可以说，以后“确定”按钮就放在左边了？
当然不可以，因为这个测试是在安卓4.0时期进行的；安卓4.0之前的系统对话框的确定旋钮是在左边的，4.0才改成右边——用户之前的操作习惯会阻碍测试结果。

还有一个因素就是设备尺寸，手机尺寸现在越来越大，用户可能需要双手握持手机；那么在双手操作方式的模式下，手指可以全系列覆盖屏幕，那么较高右边的精确性就没那么高了。

总之，同一个交互问题，在不同的设备，系统，时间和场景下，会有不同的答案。

#专栏作家#。