所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

横滑or竖滑?

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

设计说很酷,产品说No

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

 

横滑or竖滑?

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

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

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

 

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

优点:

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

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

 

缺点:

(1)横滑:

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

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

(2)竖滑:

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

 

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

1、以内容维度为切入点

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

 

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

 

2、从数量判断

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

 

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

 

3、展示可见性效率

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

 

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

 

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

 

4、 内容主次

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

 

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

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

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

 

原文地址:咏舍(公众号)
作者:咏舍


 

本页地址:https://www.uime.cn/29236.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?