• 习近平:构建中国特色哲学社会科学 2019-10-09
  • 巴基斯坦学者:坚持走和平发展道路 中国为世界做更大贡献 2019-10-06
  • 【沙湾风光】百花盛开 迎六月 2019-10-06
  • 鄞州院士公园再次成为网红 3万余株马鞭草迎风怒放 2019-09-23
  • 《杭州运河历史建筑》:一方水土历史的纪念 2019-09-21
  • 因滑门存隐患 现代汽车召回2339辆起亚嘉华汽车 2019-09-19
  • 五个时尚小心机,为你打造完美身形 2019-09-16
  • 联合国:叙利亚新增92万无家可归者另有560万难民逃亡邻国 2019-09-09
  • 问题是现在人民是受这个社会的迫害者,没理由参与在其中。 2019-09-09
  • 《中国道路的成功密码》首发研讨会在京举行 2019-08-28
  • 湖北治理违规提取公积金 防止用公积金炒房 2019-08-28
  • (Dos sesiones) Enfoque de China Dos sesiones históricas fijan el rumbo para nueva época Spanish.xinhuanet.com 2019-08-27
  • 马航客机在乌坠毁现场尸体散落 民兵正守护现场 2019-08-27
  • 对毒跑道不能一铲了之 2019-08-13
  • 西咸新区四天18宗土地成交 土拍市场活跃三桥板块成焦点 2019-08-12
  • 页面跳转方式,如何设计更合理? - 优设网 - UISDC

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

    2019/03/13 12170评论 5

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

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

    视觉顺序

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

    直接跳转

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

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

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

    左右跳转

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

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

    常用场景:

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

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

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

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

    上下跳转

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

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

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

    运用场景:

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

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

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

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

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

    翻转

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

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

    联动性

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

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

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

    搜索页面打开

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

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

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

    其它方式

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

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

    结语

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

    欢迎添加作者微信:

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

    发表评论 加载中....

    评论加载中....

    uisdc

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

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

    您还没有登录

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

    微信扫码

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

    把好文章收藏到微信

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

  • 习近平:构建中国特色哲学社会科学 2019-10-09
  • 巴基斯坦学者:坚持走和平发展道路 中国为世界做更大贡献 2019-10-06
  • 【沙湾风光】百花盛开 迎六月 2019-10-06
  • 鄞州院士公园再次成为网红 3万余株马鞭草迎风怒放 2019-09-23
  • 《杭州运河历史建筑》:一方水土历史的纪念 2019-09-21
  • 因滑门存隐患 现代汽车召回2339辆起亚嘉华汽车 2019-09-19
  • 五个时尚小心机,为你打造完美身形 2019-09-16
  • 联合国:叙利亚新增92万无家可归者另有560万难民逃亡邻国 2019-09-09
  • 问题是现在人民是受这个社会的迫害者,没理由参与在其中。 2019-09-09
  • 《中国道路的成功密码》首发研讨会在京举行 2019-08-28
  • 湖北治理违规提取公积金 防止用公积金炒房 2019-08-28
  • (Dos sesiones) Enfoque de China Dos sesiones históricas fijan el rumbo para nueva época Spanish.xinhuanet.com 2019-08-27
  • 马航客机在乌坠毁现场尸体散落 民兵正守护现场 2019-08-27
  • 对毒跑道不能一铲了之 2019-08-13
  • 西咸新区四天18宗土地成交 土拍市场活跃三桥板块成焦点 2019-08-12
  • 狗屁加拿大28都是假的 赛车北京pk10技巧 五分快三破解器下载 五星做号软件 时时彩五星毒胆稳赚 棋牌注册秒送18元 北京pk赛车官网直播 彩坛的达人三胆 通比牛牛口诀 重庆时时三星基本走势图