页面转场: 忽略它可能会使设计师犯错 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


页面转场: 忽略它可能会使设计师犯错

2019-10-31 分享达人 手机及小程序界面设计文章及欣赏


页面转场有哪些类型?该注意什么细节呢?



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


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

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



Part1:页面转场的作用


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


1.加深用户印象


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


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


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


3.突出重点用户


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


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



Part2:页面转场类型


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


1.翻书/页、折叠


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


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


2.3D翻转、立体旋转


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


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



3.拉伸、上下合并


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


上下合并:将即将进场的页面分为上下两部分进场,使页面更有层次感。适合给用户营造一种“打开新世界/新天地”的交互认知。


4.扭曲、页面融合


扭曲:根据水平或者垂直线为中心点,将整个页面进行旋转、压缩等处理,适合给用户传达一种’异次元、空间传送‘的效果。


页面融合:根据页面的某个视觉元素,通过变形、变色、缩放、位移等方式过渡到另外一个页面中去。这种转场是最能体现两个页面之间的‘关联性’,也是过渡效果最和谐的方式之一。


5.弹出、缩放


弹出:根据页面的某个视觉元素,将其弹入到下一个页面中去。适合突出某视觉元素,将其重点弹出展示。


缩放:将整个页面自大而小或者自小而大进行缩放过渡,很适合大封面的转场。


6.移入、淡化


这是我们最常见、最普通的转场方式了,大部分的产品使用这两种转场方式。移入有’上下左右‘4个进入方向,而一直使用’左移进入、右移退出‘的转场,最能体现产品功能的使用流程。




Part3:转场时应该考虑的细节


各种效果只是提供一种选择而已,根据自己的产品特性、想要传达的交互理念等选择合适的方式即可。而在一些转场过程中的细节点,是交互设计师不能忽略的事项。


1.页面间的关联性


页面之间都是通过’入口信息‘和’页面标题‘建立关联的,为了增加用户转场后的代入感、避免产生认知错误(觉得进错页面),可以考虑用相同的背景色、视觉元素等加强页面间的关联。


比如之前QQ游戏中心,将前页的背景图沿用到后页中,让后页的游戏描述更有代入感,用户第一时间就觉得'来对地方了~'


2.进退方向


页面的进入和退出尽量是成反方向的,即页面从右加载边移入,退出时则从左边移出。否则混乱无序地进退方向,会使用户的操作流和视觉流感到不适。




3.返回逻辑的不同


用户习以为常的页面返回习惯,一是点击左上角‘返回/关闭’图标、二是屏幕扣边(叫法不同,即按住屏幕最左边位置向右滑到,iOS与Android均可实现该方式)。因“返回/关闭”图标在视觉上带有明确的指向性,用户知道点击后到底是“返回”还是“关闭”。


但不同页面类型的屏幕抠边,对应的含义和逻辑却是各不相同的:


原生页面:屏幕抠边是返回上一级页面

就如朋友朋友圈一样,原生页面在屏幕抠边后是可以回到退出前的页面位置、状态,亦可以重新加载页面。


H5页面:屏幕抠边是关闭整个链接

无论在H5里操作了多少内容/页面,屏幕抠边都会关闭整个H5链接,再次进入时只能重新加载页面,操作记录都会被清空。


4.更高效的返回方式


除了点击“返回/关闭”图标、屏幕抠边外,可以根据自己产品的页面形态,考虑是否有更高效的退出形式。比如《下厨房》的食物详情页里,采取“下滑“的形式返回上级页面。



原因在于:该详情页是以大图+文字的结构描述食物,而大图的展示区域很接近于手指的“黄金操作区”。相对于将手指移动到屏幕左上角点击返回、或者移到最左边抠边返回,“下滑”可以在最短距离内、最快速地让用户返回帝皇彩票浏览其他内容。



5.是否保存/清除用户操作


页面间的跳转和退出,势必会对当前页面内容和状态产生影响。当用户想要离开时,不同的产品都会选择不同的退出策略。举个特别典型的例子:微信朋友圈。


当退出朋友圈再重新进入时,是会停留在退出前的页面位置,方便继续浏览好友内容。


而退出朋友圈后,入口处提示有好友新动态时,再次进入朋友圈则回到顶部初始位置,以保证可以第一时间获取好友动态,满足用户日常的社交需求。



每日故宫在这一方面的处理也很用心:无论用户在详情页里进行了什么操作(屏幕伸缩或滑动位置),退出页面时都会清除用户的操作痕迹,还原到文物的初始状态,给人带来一种“保护文物、细心严谨”的心理感受。

转自:站酷-



标签: 页面转场 « 帝皇彩票官网交互设计师常用的设计理论与心理学 | 干货|尼尔森十大可用性原则案例解析»


蓝蓝 http://www.bjhbys.com

  1. 帝皇彩票官网2019年11月(1)
  2. 2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 帝皇彩票官网2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 2018年10月(29)
  15. 2018年9月(40)
  16. 2018年8月(87)
  17. 帝皇彩票官网2018年7月(107)
  18. 2018年6月(86)
  19. 2018年5月(110)
  20. 2018年4月(40)
  21. 2018年3月(35)
  22. 2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 2017年3月(70)
  28. 帝皇彩票官网2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 帝皇彩票官网2016年3月(19)
  38. 2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 帝皇彩票官网2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 帝皇彩票官网2014年6月(66)
  59. 2014年5月(99)
  60. 帝皇彩票官网2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 2013年9月(20)
  68. 2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 2013年1月(31)
  75. 2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
海南4+1走势图 桔子彩票官网 桔子彩票登陆 桔子彩票登陆 帝皇彩票登陆 大象彩票登入 桔子彩票开奖 桔子彩票登陆 吉利彩票计划 红牛彩票开户