横滑or竖滑?

摘:体验设计中选择什么形式,是横滑还是竖滑,大致分为3个层次:目标、效率、然后是易用。我们设计产品时考虑是否满足了这3个层级后,再考虑什么交互方式更好就会明确了。

设计说很酷,产品说No

去年,我们在一个福卡的项目上,因为产品数量的增加,需要在原来资源位增加展示多个产品,我们给出的优化方案是通过横滑交互操作展示3~5个的理财产品,结果产品经理说不行,他说用户只能看到一个产品,后面的几个产品可见性太低,他们希望用户能同时看到更多产品的展示,这样增加提升转化的机会,用户可能对第一个不感兴趣,但可能会对第2 个、第3个产品感兴趣。

横滑or竖滑?

那究竟该如何选择呢?什么情况下用横滑?什么情况下竖滑呢?

qtgcxhm02r1.jpg插图

横滑:以为水平方向为轴,通过左右移动形式展示内容,这种交互方式用于在同一纬度下的多内容展示。

竖滑:以纵向为轴,通过上下移动形式展现内容,对用户来说只要不断往下滑动屏幕,就能加载展示更多的内容。

横滑竖滑两者之间的优缺点

优点:

(1)横滑,交互形式很酷,层级关系简单,视觉上比较突出,这几点是设计师喜欢用这样形式的原因。

(2)竖滑,是业务方喜欢用的方式,因为屏效展示率好,在有限的区域可展现内容更多,用户操作起来简单方便。

缺点:

(1)横滑:

① 内容可见性差,通常越往后,后面的内容点击量就越低。

② 用户习惯:用户对横滑的操作具有一定的学习成本,需要通过识别一些信号来操作,而竖滑就不同了,用户无意识的操作手机的习惯。

(2)竖滑:

① 增加用户操作频率,内容过多容易分散用户注意力。

如何合理使用这两个交互形式呢?

1、以内容维度为切入点

同一维度内容展示适合“左右横滑”,比如一个专题下的不同内容。尤其是曝光率不高,信息重要程度不那么高的内容。

sc0eajrd1rd.jpg插图(1)

多维度的内容适合纵向滑动,尤其对于首页多种通常业务的内容聚合,通常会采用大标题进行不同模块的内容区分,

ra4mojrf33t.jpg插图(2)

2、从数量判断

一般来说,横滑展示5-8个内容为佳,过少会导致一滑就见底,过多还不如引导用户去下一级更多主题页面,看到更多内容。

aulfj13ugoa.jpg插图(3)

在重要的区域或流量地方未来展示更多内容,比如feed流适合用纵滑方式展现。

oqhsibb0rzi.jpg插图(4)

3、展示可见性效率

自动展示:banner 一般在头部,用户横滑的操作带来不够便捷,通常会在几秒后自动横切过来,这个自动展示的效果就提升了内容可见性。

f4pvhynyk3d.jpg插图(5)

部分隐藏:通过露出遮挡部分文字和图片,来提升后面更多内容。

bka03oskuc1.jpg插图(6)

引导箭头、底部加载:当滑动到卡片最后一张时才露出“查看全部”,为那些看到最后还意犹未尽的用户一个出口。

otbc3qylk1i.jpg插图(7)

4、 内容主次

纵向和横向优先级常常导致主次判断失误,在首页聚合页中,头部位置很少建议用横滑卡片,会干饶下一层内容重要性,一般,在页面底部不重要的内容,卡片采用横滑展示会比较合适。

dgwji0y3zl2.jpg插图(8)

小结

最后,体验设计中选择什么形式,是横滑还是竖滑,大致分为3个层次:目标效率、然后是易用

我们设计产品时考虑是否满足了这3个层级后,再考虑什么交互方式更好就会明确了。

总的来说,横滑看起来很酷,但需要慎用,过多使用导致可见效率不高,其次,交互操作一横一纵导致用户操作路线乱。

原文地址:咏舍(公众号)作者:咏舍u2oorvvawer.png插图(9)

人已赞赏
UI设计

Material Design Product icons 产品图标

2020-10-13 18:06:14

UI设计

电话调研没想象中那么深奥

2020-10-13 20:05:04

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索