web交互中若何区分弹窗、抽屉、跳转新页面？

B端设计的体验升级不是打磨优质交互体验,而是统一体验。

B端产品业务繁芜用户体验看重效率，除了主页面外还有很多赞助页面帮助用户完成功能操作，此时这些赞助页面以什么样的形式呈现显得尤为主要。

目前有弹窗、侧滑、跳转新页面三种展现办法供设计师与产品选择，每每在有些时候认为三种展示办法选择哪种都没太大问题，但是基于Nielsen可用性十原则中“同等性和标准”我们非常有必要将这三种展示办法清楚知道其定义及适用场景等各方面，以便于更好地做事于我们的页面。

分享内容

弹窗抽屉跳转页面需求内容合理方案总结

一、弹窗1. 定义

弹框是一种交互办法，用作提醒，做决定或者办理某个任务。
弹框一样平常包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。
其好处是让用户更聚焦，且不用离开当前页面，更快更随意马虎完成任务。

弹窗分为模态与非模态两种，非模态用于提醒用户内容，在这里我们针对打断用户操作的模态弹窗来研究。

2. 尺寸怎么定？及何时利用？

在谈论弹窗尺寸如何确定之前，我们先对市情主流电脑分辨率统计进行调研。

定义弹窗高度：

我们以最小屏幕尺寸来定义，屏幕高度减去导航栏，菜单栏，内容区域有620px的高度。
弹窗的高度必须小于620px，对付页面自适应情形将高下安全间隔固定，个中央区域自适应。

定义弹窗宽度：

我们以1440屏幕宽度为例，定义栅格系统，在自定义内容区，弹窗的宽度以栅格的数量来确定即n列宽+（n-1)间距宽度。

利用场景：

对话框是用于在不离开主路径的情形下，供应用户快速实行大略的操作、确认用户信息或反馈提示的赞助窗口。
（摘自fusion design）

总结归纳便是：

页面内容较轻，可快速回上级页面页面相对独立，可不参照上级页面内容适宜办理较为大略一次性操作内容

3. 不可被忽略的几个弹框细节只管即便避免弹窗上叠加弹窗弹出弹窗时锁定背景页面禁止跟随弹窗滚动原路返回，由哪个页面弹出弹窗，关闭弹窗后显示哪个页面新的交互办法有待我们共同探索

二、抽屉1. 定义

抽屉是一种交互办法，当须要一个附加面板来掌握父级页面内容，这个抽屉在须要时呼出。

抽屉一样平常包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。
可自定义高下旁边四个方向，一样平常右侧最为常见。

侧滑抽屉有较强的连贯性，适宜与原页面具有连贯构造的内容的展示。

2. 利用场景？

抽屉弹出的交互办法的操作本钱和用户利用生理包袱则小很多，比如「iOS人际交互指南」中的「Action Sheets」，「MaterialDesign」中的「BackDrop」，包括网页端，Chrome浏览器中的添加标签的交互办法，还有Antdesign中AntdesignPro预览改换颜色和主题，他们利用弹窗是完备可以的，但是出于上述目的，利用了类似侧边弹出的交互办法。

场景一：Dialog 组件并不知足我们的需求,表单很长, 或是你须要临时展示一些文档, Drawer 拥有和 Dialog 险些相同的 API, 在 UI 上带来不一样的体验。
场景二：须要附加面板来掌握父窗体，这个面板须要时呼出。
场景三：在当前任务流中插入临时任务，创建或预览附加内容，例如协议条款。

3. 利用把稳抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉弹出弹窗时锁定背景页面禁止跟随弹窗滚动原路返回，由哪个页面弹出弹窗，关闭弹窗后显示哪个页面避免中间弹窗跳转抽屉弹窗的交互办法

三、页面跳转1. 定义

常见的页面跳转办法有直接跳转、旁边跳转、高下跳转等，再设计时须要考虑好个中的关联性，给出最符合用户生理预期的过渡办法，从而做出最得当的设计。
页面跳转有两种办法，调用转发时页面浏览器地址栏中的url不发生改变，重定向时页面上浏览器地址栏中的url发生改变。

2. 利用场景？

场景一：当页面承载内容过多或须要打开新一个网址链接

场景二：当前页面与即将操作的页面毫无关联

web页面跳转的办法

跳转办法分这么几种，直接跳转、旁边切换跳转、高下跳转、翻转跳转、联动性跳转、放大缩小跳转（iOS微信公众年夜众号浮窗）、搜索框跳转。
个中直接跳转是最原始最直接的跳转办法，在web端很常见，实现难度和掩护本钱都很低。

3. 利用把稳跳转新页面时须要有较为明显的返回上级页面的按钮把稳区分像弹窗的页面，和像页面的弹窗

四、需求内容合理方案1. 谦逊踏实地学好业务

设计B端产品须要有细腻严谨的效率思维，要想设计出好用得当的页面首先要吃透自己手中的设计事情的业务细节，向产品和研发同事详细理解产品需求，理清每个功能的业务逻辑，乃至有必要时须要理解开拓实现办法。

在确认需求的环节，能够想象页面展现办法能够知足需求方的业务逻辑又能同时兼顾用户对页面的理解。

2. 对页面进行归纳分类

拿到原型后针对新增、编辑、详情等页面进行统揽，做到心中有数，若页面很多且内容较为繁芜，可对页面布局进行定义，根据事前定义好布局进行设计。

例如安防类的产品舆图利用频次较多，因加载数据韶光等问题，根据需求与前端职员谈论采取何种办法进行设计既有较好的体验又可便于开拓职员设计布局。

3. 统一已有的交互规范

B端产品逻辑繁芜，功能浩瀚，迭代频繁，对付新加的功能考虑之前的类似页面处理办法将可复用的组件规范复用，增强产品体验同等性同时减少开拓职员不必要的事情量，快速相应需求完成迭代。

五、内容小结1. 心腹 知彼己：须要对每种样式利用办法与把稳事变有所理解彼：对产品的业务需求有所认知，对研发实现办法有一定理解综合考虑设计出好用又统一的页面，避免不必要的重复性事情。

2. 体验统一

对付页面的展示采纳哪种样式有科学说服性阐明，把稳交互体验的同等性，也把稳不要为了同等而同等，效率至上，知足业务需求为第一位。

考虑好之间的关联性，给出最符合用户生理预期的过渡办法，就可以帮助我们找到最得当的设计。

3. 未来趋势

网络技能不断在影响我们的事情生活，移动端也在引领着设计趋势，多端追求体验同等性，早已衍生出自适应网页设计(Responsive Web Design)的布局办理方案，因此网页设计也日趋移动化。

可以想像将会有一大波移动上的体验会搬到网页设计上，如弹框中包含多个层级，透过左上角返回的交互体验，更灵动及细腻的动画效果等，相信还会涌现更好用且易掩护的展现办法。

视觉体验上大屏的遍及，全屏的页面展示，都在追求简约的设计，ui界面也变得越来越轻盈，我们拭目以待。

本文由@宋佳 原创发布于大家都是产品经理，未经容许，禁止转载

题图来自Unsplash， 基于CC0协议