| 页面转场容易被设计师忽略的那些事 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1144 回帖数 0 |
 |
lanlan123 等级 ☆ 楼主 发表于 2019/11/26 10:59:02 编 辑 |
|
|
什么要有页面转场？有哪些转场类型？要注意哪些细节？ 毕竟页面间的转场过渡，是用户体验我们产品最直接的感知形式，也是人机交互中最重要的传达要素。另外市面上还没有系统性介绍''页面转场''的文章，所以今天就写下这方面的干货，希望能给你带来一些收获。 1页面转场的作用： 加深用户印象，一些新奇独特、区别于竞品的转场效果，完全可以加深用户对自己产品的印象，留下特定的产品记忆点。如《红板报》的‘折页’效果就很让人记忆尤新，进一步提升了产品的竞争力。 更有仪式感、增加代入感：营造一种‘神秘感、即将探索’的氛围，很符合该产品独有的特色。 突出重点用户：产品里的重点用户都是需要特别照顾的对象。界面设计时除了在背景色、视觉元素不同于普通用户外，特殊的页面转场也能给带来一种‘专门定制’的感知。 2：页面转场类型 翻书/页：指模仿现实生活中书本和纸张的切换效果，是一种拟物化的转场方式。常用于杂志、小说、日记等产品中。 折叠：根据水平或者垂直线为中心点，将页面的另一部分进行翻折。适合各种带有“日历”功能的转场。 3D翻转：将二维的页面以3D形式（类似魔方）进行切换。适合体现产品功能的“空间感”。 立体旋转：根据水平或者垂直线为中心点，将整个页面进行立体旋转。适合体现另一个“页面空间”的效果，用于容纳更多的信息内容。 拉伸：根据水平或者垂直线为中心点，将页面进行拉长消失处理，可分为‘内拉’与‘外拉’两种方式。 上下合并：将即将进场的页面分为上下两部分进场，使页面更有层次感。适合给用户营造一种“打开新世界/新天地”的交互认知。 扭曲：根据水平或者垂直线为中心点，将整个页面进行旋转、压缩等处理，适合给用户传达一种‘异次元、空间传送’的效果。 页面融合：根据页面的某个视觉元素，通过变形、变色、缩放、位移等方式过渡到另外一个页面中去。这种转场是最能体现两个页面之间的‘关联性’，也是过渡效果最和谐的方式之一。 弹出：根据页面的某个视觉元素，将其弹入到下一个页面中去。适合突出某视觉元素，将其重点弹出展示。 缩放：将整个页面自大而小或者自小而大进行缩放过渡，很适合大封面的转场。 移入、淡化这是我们最常见、最普通的转场方式了，大部分的产品使用这两种转场方式。移入有‘上下左右’4个进入方向，而一直使用‘左移进入、右移退出’的转场，最能体现产品功能的使用流程。 3：转场时应该考虑的细节 页面间的关联性，页面之间都是通过‘入口信息’和‘页面标题’建立关联的，为了增加用户转场后的代入感、避免产生认知错误（觉得进错页面），可以考虑用相同的背景色、视觉元素等加强页面间的关联。 进退方向页面的进入和退出尽量是成反方向的，即页面从右加载边移入，退出时则从左边移出。否则混乱无序地进退方向，会使用户的操作流和视觉流感到不适。 返回逻辑的不同，用户习以为常的页面返回习惯，一是点击左上角‘返回/关闭’图标、二是屏幕扣边。因“返回/关闭”图标在视觉上带有明确的指向性，用户知道点击后到底是“返回”还是“关闭”。 更高效的返回方式除了点击“返回/关闭”图标、屏幕抠边外，可以根据自己产品的页面形态，考虑是否有更高效的退出形式。比如采取“下滑”的形式返回上级页面，“下滑”可以在最短距离内、最快速地让用户返回首页浏览其他内容。 是否保存/清除用户操作页面间的跳转和退出，势必会对当前页面内容和状态产生影响。当用户想要离开时，不同的产品都会选择不同的退出策略。更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。 欢迎访问,开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com |
||
| 1 |