江苏龙网

  1. 首页 > 资讯 > 科技 > >

「」web交互中，如何区分弹窗、抽屉、跳转新页面？( 二 )


侧滑抽屉有较强的连贯性 ， 适合与原页面具有连贯结构的内容的展示 。
2. 使用场景？
抽屉弹出的交互方式的操作成本和用户使用心理负担则小很多 ， 比如「iOS人际交互指南」中的「Action Sheets」 ， 「MaterialDesign」中的「BackDrop」 ， 包括网页端 ， Chrome浏览器中的添加标签的交互方式 ， 还有Antdesign中AntdesignPro预览更换颜色和主题 ， 他们使用弹窗是完全可以的 ， 但是出于上述目的 ， 使用了类似侧边弹出的交互方式 。场景一：Dialog 组件并不满足我们的需求,表单很长, 或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验 。场景二：需要附加面板来控制父窗体 ， 这个面板需要时呼出 。场景三：在当前任务流中插入临时任务 ， 创建或预览附加内容 ， 例如协议条款 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

3. 使用注意抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉弹出弹窗时锁定背景页面禁止跟随弹窗滚动原路返回 ， 由哪个页面弹出弹窗 ， 关闭弹窗后显示哪个页面避免中间弹窗跳转抽屉弹窗的交互方式
三、页面跳转1. 定义
常见的页面跳转方式有直接跳转、左右跳转、上下跳转等 ， 再设计时需要考虑好其中的关联性 ， 给出最符合用户心理预期的过渡方式 ， 从而做出最合适的设计 。页面跳转有两种方式 ， 调用转发时页面浏览器地址栏中的url不发生改变 ， 重定向时页面上浏览器地址栏中的url发生改变 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

2. 使用场景？
场景一：当页面承载内容过多或需要打开新一个网址链接
场景二：当前页面与即将操作的页面毫无关联
web页面跳转的方式
跳转方式分这么几种 ， 直接跳转、左右切换跳转、上下跳转、翻转跳转、联动性跳转、放大缩小跳转（iOS微信公众号浮窗）、搜索框跳转 。其中直接跳转是最原始最直接的跳转方式 ， 在web端很常见 ， 实现难度和维护成本都很低 。
3. 使用注意跳转新页面时需要有较为明显的返回上级页面的按钮注意区分像弹窗的页面 ， 和像页面的弹窗
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

四、需求内容合理规划1. 谦虚踏实地学好业务
设计B端产品需要有细腻严谨的效率思维 ， 要想设计出好用合适的页面首先要吃透自己手中的设计工作的业务细节 ， 向产品和研发同事详细了解产品需求 ， 理清每个功能的业务逻辑 ， 甚至有必要时需要了解开发实现方式 。
在确认需求的环节 ， 能够想象页面展现方式能够满足需求方的业务逻辑又能同时兼顾用户对页面的理解 。
2. 对页面进行归纳分类
【「」web交互中，如何区分弹窗、抽屉、跳转新页面？】拿到原型后针对新增、编辑、详情等页面进行统揽 ， 做到心中有数 ， 若页面很多且内容较为复杂 ， 可对页面布局进行定义 ， 根据事前定义好布局进行设计 。
例如安防类的产品地图使用频次较多 ， 因加载数据时间等问题 ， 根据需求与前端人员讨论采用何种方式进行设计既有较好的体验又可便于开发人员设计布局 。
3. 统一已有的交互规范
B端产品逻辑复杂 ， 功能众多 ， 迭代频繁 ， 对于新加的功能考虑之前的类似页面处理方式将可复用的组件规范复用 ， 增强产品体验一致性同时减少开发人员不必要的工作量 ， 快速响应需求完成迭代 。


推荐阅读


上一篇：『』拯救者电竞手机散热效果如何？这张图足以说明问题

下一篇：■vivo Z6线下正式开售 5G手机8+128GB版到手价2598元！