页面转场设计,有哪些类型和作用? - 微啦网

微啦网 首页 > 学霸

页面转场设计,有哪些类型和作用?

2019-10-29 22:30 weila

为什么要有页面转场?有哪些转场类型?要注意哪些细节?本文来一一给大家解答~

为什么要有页面转场?有哪些转场类型?要注意哪些细节?本文来一一给大家解答~

不知各位产品经理、UE/UI设计师在设计产品时,除了考虑交互说明、功能状态、页面逻辑等之外,是否会关注页面跳转间的“转场效果”???

可能有人会觉得:“不就普通的界面左移和右移,需要讲这个吗?” 但是如果我问:“为什么要有页面转场?有哪些转场类型?要注意哪些细节?” 你能一五一十地回答出来么?

毕竟页面间的转场过渡,是用户体验我们产品最直接的感知形式,也是人机交互中最重要的传达要素。另外市面上还没有系统性介绍’页面转场’的文章,所以今天就写下这方面的干货,希望能给你带来一些收获。

Part1:页面转场的作用

页面转场最基础的作用,无疑是拉通页面与页面间的使用流程,使产品的信息内容、功能交互等有一个承接点。但除了这个打底作用外,页面转场还可以体现出多个方面的作用。

展开全文

1. 加深用户印象

一些新奇独特、区别于竞品的转场效果,完全可以加深用户对自己产品的印象,留下特定的产品记忆点。如《红板报》的‘折页’效果就很让人记忆尤新,进一步提升了产品的竞争力。

2. 更有仪式感、增加代入感

就如《每日故宫》在查看文物时,会缓慢放大封面、退出局部元素。营造一种‘神秘感、即将探索’的氛围,很符合该产品独有的特色。另外一些日志产品,会利用“翻书”的转场效果来加强用户的代入感、趣味性。

3. 突出重点用户

产品里的重点用户(如vip用户、平台作家)都是需要特别照顾的对象。界面设计时除了在背景色、视觉元素不同于普通用户外,特殊的页面转场也能给带来一种‘专门定制’的感知。

像《人人都是产品经理》APP,在打开普通页面和专栏作家的文章时,前者是普通的‘左移’,后者则‘上下开启’,给读者一种‘开启知识宝库’的进场感受。

Part2:页面转场类型

说完页面转场的作用后,下面就是你可能感兴趣的内容:页面转场到底有哪些类型?(以移动端页面转场为例,PC端亦可复用该类型)

1。 翻书/页、折叠

翻书/页:指模仿现实生活中书本和纸张的切换效果,是一种拟物化的转场方式。常用于杂志、小说、日记等产品中。

折叠:根据水平或者垂直线为中心点,将页面的另一部分进行翻折,适合各种带有“日历”功能的转场。

2. 3D翻转、立体旋转

3D翻转:将二维的页面以3D形式(类似魔方)进行切换。适合体现产品功能的“空间感”。

立体旋转:根据水平或者垂直线为中心点,将整个页面进行立体旋转。适合体现另一个“页面空间”的效果,用于容纳更多的信息内容。

3。 拉伸、上下合并

拉伸:根据水平或者垂直线为中心点,将页面进行拉长消失处理,可分为’内拉‘与’外拉‘两种方式。



极速赛车开奖走势图 北京赛车怎么玩 秒速时时彩 极速赛车是不是假的 贵州快3 快赢彩票计划群 宏发彩票计划群 山东11选5走势 上海11选5走势 极速赛车中奖规则