• 搭载骁龙660 360 N6 Pro 4GB+64GB版降至1099元 2019-04-17
  • 杨幂自曝教阮经天撩妹 称是合作男演员里最不会撩的 2019-04-14
  • 你问对了,但没有说到点子上。我告诉你吧,最根本的问题是私有制。私有制不除,腐败问题就不会消灭。懂了吧,哈哈。 2019-04-14
  • 海南青训足球在差距中找方向 省足协欲广撒“英雄帖”高水平教头来相聚 2019-04-09
  • 正确看待我国社会主要矛盾转化 2019-04-09
  • 中美贸易战,让更多的中国人醒悟过来:美国是靠不住的。 2019-04-08
  • 十九大精神在基层--宁夏频道--人民网 2019-03-26
  • 长治县国税局打造“税收政策定制专属包” 2019-03-25
  • 香江直通车之专访香港义工联盟常务副主席马浩文 2019-03-25
  • 《今天我学习》第一集:如何理解党的十九大的鲜明主题 2019-03-25
  • 党的政治建设是根本性建设 2019-03-23
  • 麻辣财经:大咖热议全面绩效管理,“全”体现在哪儿? 2019-03-22
  • 汲取立志智慧 坚定理想信念 2019-03-21
  • 省旅游集团党委召开“讲忠诚、严纪律、立政德”专题警示教育部署动员大会 2019-03-21
  • “奶茶”婚事与社会心态 2019-03-19
  • 页面跳转方式,如何设计更合理? - 优设网 - UISDC

    页面跳转方式,如何设计更合理?

    2019/03/13 8924评论区

    页面跳转在 APP 中属于最常见,也是最基础的一个交互细节点。我们常见的跳转方式有直接跳转、左右跳转、上下跳转、翻转、联动。

    其它酷炫的效果我们看过很多,但是现实中能做到的又有几个呢?在设计时需要考虑好其中的关联性,给出最符合用户心理预期的过渡方式,从而做出最合适的设计。

    视觉顺序

    首先看一下,我们的视觉「阅读顺序」是:左→右,上→下。因此延伸出目前 APP 最常见的两种页面跳转方式:左右跳转,上下跳转。

    直接跳转

    直接跳转是最原始、最简单的跳转方式,web端常见,在APP中出现较少,标签切换常见。

    常用于快速开发,Android中常用。

    • 实现难度:无;
    • 维护成本:无。

    左右跳转

    最常见的跳转方式。(ios原生效果)

    • 实现难度:简单;
    • 维护成本:低;
    • 运用场景:父级→子级→子子级,依次类推。

    常用场景:

    • 对应功能的展开:常以导航形式存在,如美团首页的美食、电影、住店等分流入口。
    • 对于内容的展开:如聊天列表>聊天窗;文章列表>到文章详情。
    • 对于活动广告的展开:banner图广告、弹窗广告等,比较常见。

    这里有个细节要注意,就是我们的返回键在左上角,也就养成了用户一种习惯,左上角的键,与点击之后的效果,往往就应该是页面从右侧退出,与进入时反向的效果。

    这也是为什么大部分 APP 不会把入口按钮放在左上角的原因。

    那么左上角这个位置,除了给返回键当做固有的位置外?;钩3S糜诔樘胧降己?,因为抽屉式导航的方向,与返回时的移动方向是一致的。常见抽屉式导航的 APP 如:滴滴打车、摩拜单车等。

    上下跳转

    相对于左右跳转,上下跳转就比较难理解了。

    • 实现难度:简单;
    • 维护成本:低。

    这种跳转方式也很常见,但是大部分人不清楚什么时候用,这里我们简单分析下。

    运用场景:

    • 对当前页面创建新的条目时;
    • 独立启动的一个子内容。(如微信/支付宝小程序等)

    比如我们在微信聊天页,发起一个聊天的时候:

    还有新添加群人员,新建笔记本,新建地址时等。

    我们用微信聊天页面举例:点击+号离的内容时,图片、拍照、位置、红包、收藏等,都是采用下到上的方式呈现,因为这些创建都是对当前聊天窗口一次性产生内容。

    下面我们看下百度的设置>地址管理>添加地址:左右>左右>上下。

    翻转

    • 实现难度:中等;
    • 维护成本:低;
    • 运用场景:完全切换内容,换到一个全新的内容集合里。

    常见的有平安好医生中间的按钮,大姨妈APP中间的商城。

    联动性

    • 实现难度:高;
    • 维护成本:高;
    • 运用场景:元素之间从上级到下级关联性强。

    如 APP store 每日推荐到介绍页。类似的还有 Behance APP 的作品展示。国内APP 很少有这种联动效果,因为一旦页面结构改变,整个效果基本无法复用。

    类似于这种强联动,我们会在很多概念设计稿中看到,但是在实际的 APP 是很少见到的。因为开发成本/维护成本都很高。

    搜索页面打开

    这里强调一下搜索页面。搜索页面的进入往往有两种形式。一种是 icon 做入口,另一种是搜索框做入口。

    icon做入口:更像是上下级关系,常用左右跳转来实现。比如:抖音。

    搜索框做入口:点击就获取光标的感知,是一个简单的联动过渡效果。比如:微信、云音乐。

    其它方式

    关于其它方式,基本上只有极个别的 APP 中可以看到。

    其它的方式,要结合实际的情况来考究。一定要注意关联性。比如微信新出的浮动展开效果,因为元素要浮动,为了更加贴合所以有了收缩的效果。

    结语

    页面跳转形式上其实就是上下左右内外??悸呛弥涞墓亓?,给出最符合用户心理预期的过渡方式,就可以帮助我们找到最合适的设计。

    欢迎添加作者微信:

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址://www.vrfys.com/page-jump-mode-design

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    转场动效 设计师 扁平化设计 优设专访 交互设计师 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立至今,一直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

  • 搭载骁龙660 360 N6 Pro 4GB+64GB版降至1099元 2019-04-17
  • 杨幂自曝教阮经天撩妹 称是合作男演员里最不会撩的 2019-04-14
  • 你问对了,但没有说到点子上。我告诉你吧,最根本的问题是私有制。私有制不除,腐败问题就不会消灭。懂了吧,哈哈。 2019-04-14
  • 海南青训足球在差距中找方向 省足协欲广撒“英雄帖”高水平教头来相聚 2019-04-09
  • 正确看待我国社会主要矛盾转化 2019-04-09
  • 中美贸易战,让更多的中国人醒悟过来:美国是靠不住的。 2019-04-08
  • 十九大精神在基层--宁夏频道--人民网 2019-03-26
  • 长治县国税局打造“税收政策定制专属包” 2019-03-25
  • 香江直通车之专访香港义工联盟常务副主席马浩文 2019-03-25
  • 《今天我学习》第一集:如何理解党的十九大的鲜明主题 2019-03-25
  • 党的政治建设是根本性建设 2019-03-23
  • 麻辣财经:大咖热议全面绩效管理,“全”体现在哪儿? 2019-03-22
  • 汲取立志智慧 坚定理想信念 2019-03-21
  • 省旅游集团党委召开“讲忠诚、严纪律、立政德”专题警示教育部署动员大会 2019-03-21
  • “奶茶”婚事与社会心态 2019-03-19