web交互中,如何区分弹窗、抽屉、跳转新页面?

访客4年前黑客资讯1056

对于B端项目辅助页面设计, 使用哪种交互方式让产品页面更好用?整体交互更统一呢? 笔者将结合项目经验和相关知识进行整理总结,希望对你有所启发。

web交互中,如何区分弹窗、抽屉、跳转新页面?

B端设计的体验升级不是打磨优质交互体验,而是统一体验。B端产品业务复杂用户体验注重效率,除了主页面外还有很多辅助页面帮助用户完成功能操作,此时这些辅助页面以什么样的形式呈现显得尤为重要。

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

分享内容

弹窗

抽屉

跳转页面

需求内容合理规划

总结

一、弹窗 1. 定义

弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。

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

web交互中,如何区分弹窗、抽屉、跳转新页面?

2. 尺寸怎么定?及何时使用?

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

web交互中,如何区分弹窗、抽屉、跳转新页面?

定义弹窗高度

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

web交互中,如何区分弹窗、抽屉、跳转新页面?

定义弹窗宽度:

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

web交互中,如何区分弹窗、抽屉、跳转新页面?

使用场景:

对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。(摘自fusion design)

总结归纳就是:

页面内容较轻,可快速回上级页面

页面相对独立,可不参照上级页面内容

适合解决较为简单一次性操作内容

web交互中,如何区分弹窗、抽屉、跳转新页面?

3. 不可被忽视的几个弹框细节

尽量避免弹窗上叠加弹窗

弹出弹窗时锁定背景页面禁止跟随弹窗滚动

原路返回,由哪个页面弹出弹窗,关闭弹窗后显示哪个页面

新的交互方式有待我们共同探索

二、抽屉 1. 定义

抽屉是一种交互方式,当需要一个附加面板来控制父级页面内容,这个抽屉在需要时呼出。

抽屉一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。可自定义上下左右四个方向,一般右侧最为常见。

侧滑抽屉有较强的连贯性,适合与原页面具有连贯结构的内容的展示。

2. 使用场景?

抽屉弹出的交互方式的操作成本和用户使用心理负担则小很多,比如「iOS人际交互指南」中的「Action Sheets」,「MaterialDesign」中的「BackDrop」,包括网页端,Chrome浏览器中的添加标签的交互方式,还有Antdesign中AntdesignPro预览更换颜色和主题,他们使用弹窗是完全可以的,但是出于上述目的,使用了类似侧边弹出的交互方式。

场景一:Dialog 组件并不满足我们的需求, 表单很长, 或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

场景二:需要附加面板来控制父窗体,这个面板需要时呼出。

场景三:在当前任务流中插入临时任务,创建或预览附加内容,例如协议条款。

web交互中,如何区分弹窗、抽屉、跳转新页面?

3. 使用注意

抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉

弹出弹窗时锁定背景页面禁止跟随弹窗滚动

原路返回,由哪个页面弹出弹窗,关闭弹窗后显示哪个页面

避免中间弹窗跳转抽屉弹窗的交互方式

三、页面跳转 1. 定义

相关文章

价值5万的电商详情页转化技巧(1)

价值5万的电商详情页转化技巧(1)

当用户突破层层筛选,最后进到电商详情页时,这就说明了用户对你的产品有着强需求高意向。那么如何在这一步的时候,让用户确认他的选择,确认下单呢?这份电商详情页转化技巧推荐给你。 当用户走到详情页这一步的...

脑洞:评分系统应用到社交场景中的几个猜想

脑洞:评分系统应用到社交场景中的几个猜想

这是一篇脑洞文,评分系统在我们生活中比较常见,我们可以通过评分的高低判断一家餐馆好不好吃,一个滴滴司机靠不靠谱。如果把评分系统应用到生活中其他场景,比如租房,情况会怎样呢? 评分系统在我们生活中非常...

18个互联网消费金融风控术语介绍及实例展示

18个互联网消费金融风控术语介绍及实例展示

一、风险打点中常用术语 要想深入相识消费金融业务,对付业务中常提到的风险常用指标,必需深刻地领略和精确地利用。行业内常用的指标及表明说明如下: 1. 五级分类 按照内涵风险水平将贸易贷款分别为正常、...

产品需求文档:以校园配送产品“壹互”为例

产品需求文档:以校园配送产品“壹互”为例

本文是关于校园外卖配送社区APP的一份需求文档,该文档由几个板块构成:产品结构、全局说明、产品流程图、产品页面逻辑图和页面详细说明。 产品小白第一次写产品需求文档,一起来看看~~劳多指教。 一、 产...

如何打造电商商品主图,让业绩翻倍?

如何打造电商商品主图,让业绩翻倍?

作为在电商行业已有多年公司首席运营官,操盘的产物中多为标品和非标品的都有,也把一些产物做到第一名,通过爆品计谋及超等卖点以乐成碾压敌手,一直与竞品拉开很长的间隔,靠的是产物微创新和晋升转换率的相团结...

KANO模型:用户需求分类和优先级排序必备思维模型

KANO模型:用户需求分类和优先级排序必备思维模型

编辑导语:KANO模子是一个典范的定性阐明模子,是产物人必懂的需求阐明法。它一般不直接用来丈量用户的满足度,常用于识别用户对新成果的接管度。辅佐企业相识差异条理的用户需求,找出顾主和企业的打仗点,挖掘...