提升屏效可实施性最强的4大方法

小编:怎么样可以提高点击次数和转化率呢?相信很多朋友在设计UI界面时都有这两点的思考,但是往往我们可能会追求视觉效果而减少产品信息而显得页面空旷或希望一个页面可以尽量展示最多的产品而使得页面变得繁杂混乱,这样看来都不太好,那有什么办法呢?今天我们来讲讲屏效,这是提高点击次数和转化率的秘诀哦~一起来看看吧!

最前沿的交互设计实践趋势

一、什么是屏效?

或许我们曾听过这样一个词“坪效”,它常拿来计算商场经营效益的指标,指的是每平米可以产出多少营业额(营业额/专柜所占总坪数)。

类比下来,手机屏幕,也可以有这样类似的计算公式,只是没有专门定义过,通俗地讲,即“每一像素可以带来多少商业效益”。但确实在商业设计过程中,老板们越来越越来越关注这样内容的表达效率。他们也许不会说”你这个屏效有点太低了”等这样专业的术语,而是会说类似“你这个槽是不是太高了”等这样类似的话。

二、为什么要提高屏效?

通过数据统计,一般用户最有用的浏览区域为手机前3屏,如果更严格点来说是前2屏,在这个区域内,用户的点击次数和转化率是最高的。如果在此区域内能够表达更多的内容,对于产品来说,无非是最经济的设计模式。不信随便翻翻几个APP,如下案例。

咱们的某宝,基本上第1屏就表达完所有内容,第二屏绝大部分也是feeds了;

fmcxq1zfiqn.jpg插图

考拉海购,前2屏表达内容,2屏之后全是feeds;

bikipguayxa.jpg插图(1)

小红书更不用说了,第一屏就直接开始种草了;

cui343b4k5u.jpg插图(2)

用户在网络上的注意力时间是1-3秒,如果在这个时间内你没有吸引到用户的话,那么他就很有可能把你略过。可想而知,在这样争夺互联网用户注意力的背景下,信息的高效性是多么重要。

三、如何提高屏效?

1.用更小的面积表达同样的内容。

jlzy3vrhiva.jpg插图(3)

2.相同的屏幕内表达更多的内容。这同样可以细拆为几个方法。

①利用滑动或者翻滚的效果,在同一个区域内进行内容的转变;比如banner以及淘宝头条这样的表达方式;

2nawdojxjuh.jpg插图(4)

②巧用折叠与展开,进行非重点内容的隐藏;

00vpo0pripo.jpg插图(5)

rtxqlz3uot3.jpg插图(6)

③内容区域进行多层信息叠加,比方说Instagram的发布

xwoekzjw1i3.jpg插图(7)

④利用转移的手法,将复杂的内容用新页面进行承载,如下图豆瓣

vl1tslhae3w.jpg插图(8)

3.利用好导航结构,同样的屏幕可以表达相同等级的多种内容;

tpqd2pdrkj2.jpg插图(9)

4.做模式区分,在任务模式下隐藏不必要的信息。如美团外卖在滑动过程中会隐藏购物车。因为用户当前聚焦的是浏览内容

l5cgrywls1h.jpg插图(10)

四、总结下来方法论就是

时间、空间上的同时利用。时间上随着用户任务的进程进行当前任务的集中显示,隐藏当前任务不需要的信息;空间上将手机屏幕当做一个立体空间,由多层空间进行展示利用。

hnwl4qso2h1.jpg插图(11)

注意:切不可过度追求屏效,过度会导致信息冗余,造成画面混乱,缺少节奏感,用户阅读起来会有障碍,反而降低了信息的表达效率。其中的度在于,将页面放在手机上看,换成质量差的图片看起来是否觉得凌乱。

原文地址:站酷

作者:Sophia的玲珑阁

人已赞赏
UI设计

设计万花筒|进击的盈利模式之会员体系

2020-10-11 4:04:22

UI设计

点击率提升的case

2020-10-11 4:04:24

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