美文网首页产品交互设计
提升屏效可实施性最强的4大方法

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

作者: 阁主的叨叨 | 来源:发表于2020-08-03 16:40 被阅读0次

一、什么是屏效?

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

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

二、为什么要提高屏效?

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

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

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

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

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

三、如何提高屏效?

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

2.相同的屏幕内表达更多的内容。这同样可以细拆为几个方法。
①利用滑动或者翻滚的效果,在同一个区域内进行内容的转变;比如banner以及淘宝头条这样的表达方式;

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

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

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

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

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

四、总结下来方法论就是

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

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

相关文章

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

    一、什么是屏效? 或许我们曾听过这样一个词“坪效”,它常拿来计算商场经营效益的指标, 指的是每平米可以产出多少营业...

  • 提升人效方法

    提升人效简单来说就是做大分子(营收)和减小分母(成本),具体可以从市场、运营和人力三个方面来展开: 市场方面的举措...

  • 推荐提升列表页屏效

    绝大多数的应用,都采用了列表页和详情页两层结构设计。 用户打开应用,首先看到的是列表页,基于页面内卡片所呈现出的摘...

  • 重大消息!发改委:文化旅游项目建设最高补助100%!

    近日,发改委公布《“十三五”时期文化旅游提升工程实施方案》,方案中规定,公益性、基础性设施建设,将获得补助,最高可...

  • 机器与人的可效性

    在很长一段时间以来,比较多的机器人科幻电影中体现了这种不平等,机器人虽然出尽风头,终究只是力量和功能的载体(...

  • 常见面试题--js+css+vue

    1、变量提升、函数提升 2、数组的常用方法 3.优化首屏加载速度 4.Vue 首屏加载速度优化 5、Vue如何设置...

  • 可自定义动效的卡片切换视图

    InfiniteCards 可自定义动效的卡片切换视图 截屏 使用 xml布局 设置Adapter 直接继承Bas...

  • 免费的PC端思维导图软件推荐

    思维导图是一种将思维形象化的方法,是表达发散性思维的有效图形思维工具。 善用思维导图,能极大的提升你的学习、工作效...

  • ToB产品第一性原理的思考

    一、2B产品的第一性原理:提升效率 二、方法论 1.用户视角 (1)从客户处获取第一手需求 (2)关注用户使用(效...

  • 【视觉设计】UI动效的常见用法

    动效是UI设计中最强有力的工具之一,它强化了界面的互动性和生命力。动效让用户可以更快地从界面获取反馈,提供更快更有...

网友评论

    本文标题:提升屏效可实施性最强的4大方法

    本文链接:https://www.haomeiwen.com/subject/gscbrktx.html