江苏龙网

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

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

对于B端项目辅助页面设计, 使用哪种交互方式让产品页面更好用？整体交互更统一呢？ 笔者将结合项目经验和相关知识进行整理总结 ， 希望对你有所启发 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

B端设计的体验升级不是打磨优质交互体验,而是统一体验 。B端产品业务复杂用户体验注重效率 ， 除了主页面外还有很多辅助页面帮助用户完成功能操作 ， 此时这些辅助页面以什么样的形式呈现显得尤为重要 。
目前有弹窗、侧滑、跳转新页面三种展现方式供设计师与产品选择 ， 往往在有些时候认为三种展示方式选择哪种都没太大问题 ， 但是基于Nielsen可用性十原则中“一致性和标准”我们非常有必要将这三种展示方式清楚知道其定义及适用场景等各方面 ， 以便于更好地服务于我们的页面 。
分享内容弹窗抽屉跳转页面需求内容合理规划总结
一、弹窗1. 定义
弹框是一种交互方式 ， 用作提醒 ， 做决定或者解决某个任务 。弹框一般包含一个蒙版 ， 一个主体及一个关闭入口 ， 常见于网页及移动端 。其好处是让用户更聚焦 ， 且不用离开当前页面 ， 更快更容易完成任务 。
弹窗分为模态与非模态两种 ， 非模态用于提醒用户内容 ， 在这里我们针对打断用户操作的模态弹窗来研究 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

2. 尺寸怎么定？及何时使用？
在讨论弹窗尺寸如何确定之前 ， 我们先对市面主流电脑分辨率统计进行调研 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

定义弹窗高度：
我们以最小屏幕尺寸来定义 ， 屏幕高度减去导航栏 ， 菜单栏 ， 内容区域有620px的高度 。弹窗的高度必须小于620px ， 对于页面自适应情况将上下安全距离固定 ， 其中间区域自适应 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

定义弹窗宽度：
我们以1440屏幕宽度为例 ， 定义栅格系统 ， 在自定义内容区 ， 弹窗的宽度以栅格的数量来确定即n*列宽+（n-1)*间距宽度 。
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

使用场景：
对话框是用于在不离开主路径的情况下 ， 提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口 。（摘自fusion design）
总结归纳就是：页面内容较轻 ， 可快速回上级页面页面相对独立 ， 可不参照上级页面内容适合解决较为简单一次性操作内容
「」web交互中，如何区分弹窗、抽屉、跳转新页面？
文章图片

文章图片

3. 不可被忽视的几个弹框细节尽量避免弹窗上叠加弹窗弹出弹窗时锁定背景页面禁止跟随弹窗滚动原路返回 ， 由哪个页面弹出弹窗 ， 关闭弹窗后显示哪个页面新的交互方式有待我们共同探索
二、抽屉1. 定义
抽屉是一种交互方式 ， 当需要一个附加面板来控制父级页面内容 ， 这个抽屉在需要时呼出 。
抽屉一般包含一个蒙版 ， 一个主体及一个关闭入口 ， 常见于网页及移动端 。可自定义上下左右四个方向 ， 一般右侧最为常见 。


推荐阅读


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

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