相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

页面转场(APP页面切换效果) 忽略它可能会使设计师犯错

小风筝发布于:2019-10-31 09:00 |原作者: 和出此严| |来自:和出此严公众号
小风筝
河北省 衡水市 
发私信 + 关注
简介: 本文着重讲解页面转场有哪些类型和制作页面专场效果的时候该注意哪些细节两方面内容


3.返回逻辑的不同

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

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

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

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

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

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

页面转场(APP页面切换效果) 忽略它可能会使设计师犯错 飞特网 设计理论

4.更高效的返回方式

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

页面转场(APP页面切换效果) 忽略它可能会使设计师犯错 飞特网 设计理论

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

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

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

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

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

页面转场(APP页面切换效果) 忽略它可能会使设计师犯错 飞特网 设计理论

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

页面转场(APP页面切换效果) 忽略它可能会使设计师犯错 飞特网 设计理论

结尾:

好了,关于'页面转场'的话题就先写到这,各位根据自己的产品特性、想要传达的交互理念等选择合适的方式即可。下面是总结笔记(公众号可领取):

页面转场(APP页面切换效果) 忽略它可能会使设计师犯错 飞特网 设计理论

FEVTE编注:更多UI设计教程,和UI设计理论知识请访问飞特网UI设计教程栏目:https://www.fevte.com/plan/UIdesign/

1234
20

好评
23

差评

刚表态过的朋友 (43 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

小风筝
河北省 衡水市 
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计