守望者

全国联网排列五走势图浙江风采:横滑or竖滑?教你如何选择正确的交互方式

守望者 APP设计 1042浏览

体彩排列五和值走势图 www.tztre.tw 只谈实操过的真实案例,不谈道听途说的点子。

 

如何在移动端有限的屏幕内向用户有效的展示传达更多的信息内容,是UI/UE设计师们的重点研究方向。在实际工作与生活中,我们见到了太多左右横向滑动交互设计,基本上第一感觉都是“哇,好酷!交互方式多样性好灵活!”然后纷纷相仿,却很少去考虑这种交互设计的科学性与实用性。

设计是理性的科学,而非感性的艺术。

用户行为和用户喜好是可以通过用户行为数据进行推演。能客观,绝不主观;能简单,绝不过于复杂;能理性,绝不过于表达感性。

 

常见的内容拓展方式

在有限的屏幕内将大量的资讯内容进行合理的依次展示,我们称之为内容拓展设计。常见的内容拓展样式有X轴横向滑动、Y轴纵向滑动、Z轴的垂直长按交互三种。

 

1、X轴横向滑动

即在X轴水平方向扩展内容,英文名叫“Horizontal Scrolling Lists”,直译为水平滚动列表。这种交互方式适用于单页多维度内容聚合的展示。

如上图淘票票案例,将 Banner、热映影片、即将上映等不同维度的内容整合在一个页面,每个维度单独占一个卡片并列展现内容。

 

2、Y轴纵向滑动

即我们最常见的传统的下滑式List,英文名叫“Vertically?Scrolling Lists”,直译为垂直滚动列表。只需要不断往下滑动屏幕,就能加载展示更多的内容,用户学习成本几乎为0。主要适用于单维度内容,如抖音、知乎、朋友圈、微博等,【刷】是个重复上下滑动的动作,即所谓的【刷】抖音、【刷】知乎、【刷】朋友圈,【刷】微博,刷的都是同属性内容。

 

3、Z轴方向的内容拓展设计

即我们说的长按操作,如iOS系统的3D Touch,根据不同力度反馈和不同时长反馈来判断具体的交互内容。Z轴交互方式较为隐蔽,有一定学习成本,主要适用于以下场景:1.方便用户快速打开某个高频次功能;2.对于入口较深的功能可以用3Dtouch来作为快捷入口;3.针对某些涉及到个人隐私的产品或功能可以用3Dtouch实现入口替代。

本篇文章主要讲横滑和竖滑的优缺点以及项目中如何抉择的问题。

 

X轴滑动优缺点分析

如果一个app全是纵滑或全是横滑,是没有什么问题的,用户只要习惯一种交互方式即可,如漫画软件与阅读软件,通常都会提供横滑与竖滑两种交互方式??拥氖呛峄街纸换ゴ┎逶谝黄?,这就有些不够优雅了。

前面说过,X轴横滑交互适用于一个页面有多种维度信息的场景,Y轴适用于一个页面都是单维度信息的场景。

如上图所示,无论是小米应用商店还是淘票票,页面的核心内容都是由一个个的“泳道”构成,竖滑切换泳道(不同维度的内容),横滑切换同一泳道的不同内容。而微博、朋友圈、抖音、快手等国民级应用,都是通过竖滑在一条泳道上一滑到底。

 

1、如何划分泳道

这么多的泳道怎么区分不同内容呢?标题。所以我们会看到上图所示的小米应用商店、淘票票、Tumblr,都给不同的泳道的左上角设置了一个大大的标题,通过标题文字来直接传达给用户不同泳道的内容概要。早些年间还有给泳道做氛围图的方式,即下图的图片+文字方式,这样处理有利有弊,好处是图搭配的到位可以更好的强调主题,缺点则是浪费空间和展示效率。

左图是应用汇15年的版本效果图,用的是底图强调分氛围的方式。右图为现行版本改版后类似??榈拇矸绞?,取消了氛围图,增加了可见展位,原来一行只能展示出两个应用,改版后一行可展示4个。

 

2、如何强化泳道可见性

X轴的交互设计还需要做额外的引导来强化可见性,常见的引导方式有指示器、部分遮挡两种。

尤其是Banner位和金刚区,如果没有指示器,大多数小白用户根本不知道该页面是可以滑动的。同样,部分遮挡也是较为常用的有效方式,通过遮挡部分文字和图片,来强化【后面还有内容哦,来滑滑看】的效果。

但实际效果中,指示器的作用几乎微乎其微,用户主动触发率很低。因为绝大部分用户只在乎眼前能看到的内容,至于隐藏起来的内容,用户去主动发现的意愿很弱。而部分遮挡的设计方式,则存在一个转化递减的问题,即越往后,CTR(点击率)和CVR(转化率)越低,所以绝大多数应用一行最多也就放8-12个内容,太少的话一滑到底,不符合预期,太多滑不到头,用户很快就会厌倦,排后面的内容就完全不会有曝光机会。

 

3、位置对转化率的影响

图为某app单个推荐??榈牡慊髀视胱是咄?。从曲线可以看到,位置越靠后,点击与转化效果越差,几乎是递减的趋势。至于0号位和1号位为什么不如2号位3号位的点击高呢?这个跟0号位和1号位推荐的产品也有一定的关系,同样的曝光率,优质的产品点击率自然更高。这也从侧面说明一个问题,X轴横向的排列资源位,无法适用于竞价排位。对于盈利性的软件来讲,资源位很重要,是对接商户的筹码,有效的资源位才能让金主爸爸掏钱掏的干脆痛快啊。

对于Y轴垂直的交互方式来说,一个位置一个价码,明码标价童叟无欺,毕竟排位非常明确的有先后顺序,先看到谁后看到谁完全可以预期。而X轴横向交互呢?到底哪个才是第一资源位呢?是0号位?1号位?还是第一排显露出来的都是?优先级很混乱,通常连商务都难以合理给横向位置定价,因为横向交互的触发率太低了。

 

最后,横滑or竖滑?怎么???

·横滑

1.横滑很酷,滑动过程中会有一种特殊的纵深感。

2.适用于多维度的信息整合,即专题归纳展示,一个专题卡片相当于多个信息也的合集。

3.固定的空间内可展示更多的商品。

4.有一定学习成本,优先级不清晰,曝光率与转化率整体呈递减趋势,不适合用在竞价排位的场景下。

 

·竖滑

1. 几乎没有学习成本,优先级明确,适合用于竞价排位的场景。

2. 适合单维度信息展示,最常见的形式是feed流的信息展示。

 

会选了吗?

如有疑问或不同见解,欢迎各位朋友在评论区留言讨论哦~

 

原文地址:站酷

作者:MoeDesigner

 

转载请注明:体彩排列五和值走势图 » 横滑or竖滑?教你如何选择正确的交互方式

登录收藏
 
你可能喜欢的:
引导设计里被忽略的,那些你所不知道的细节引导设计里被忽略的,那些你所不知道的细节
关于「微信 7.0.9 for iOS 改版」的一点思考关于「微信 7.0.9 for iOS 改版」的一点思考
为什么我们会情不自禁地陷入设计的套路?为什么我们会情不自禁地陷入设计的套路?
10个小时挣10000元?如何用UI组件提高工作效率10个小时挣10000元?如何用UI组件提高工作效率
关于动效落地,我们可以做的更多关于动效落地,我们可以做的更多
表单为什么总是看起来简单,做起来很难?表单为什么总是看起来简单,做起来很难?
手把手教你打造交互作品集手把手教你打造交互作品集
一看就会一做就废,产品列表样式试试这样思考!一看就会一做就废,产品列表样式试试这样思考!
看看你的手机键盘,隐藏了多少设计细节?看看你的手机键盘,隐藏了多少设计细节?
原来折叠屏是这样设计适配的(附案例实战)原来折叠屏是这样设计适配的(附案例实战)
?