InfoQ 大会组织部祝您开工大吉!点击查看节中内容进度 >>> 了解详情
写点什么

B 端产品设计中,弹窗可以做哪些事情?(二)

  • 2019-12-31
  • 本文字数:1262 字

    阅读完需:约 4 分钟

B端产品设计中,弹窗可以做哪些事情?(二)

信息展示

1、解释或说明

一般由用户主动触发的,包含图文信息,少数会有简单的操作按钮,如“确认”、“知道了”等等。典型场景有:欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图……


这种弹窗一般用来对页面内容作补充,用户通过点击图标或文字按钮,可以在当前页面展开弹窗。比如业务介绍、图表的取数说明、操作说明和引导等,这类信息往往与当前页面紧密相关,且从属于当前语境,所以并不适合用跳转页面、并列 tab 其或二级页面的形式来表达,因为这样无疑会加深页面层级,增加用户的认知负担。尤其是对一些很重要的操作说明或引导,甚至可以在弹窗中使用翻页或 tab 页签的形式来扩充弹窗的显示空间。



需要说明的是,很多产品喜欢对那些普通的字段解释和说明也使用带遮罩的模态弹窗,并需要用户点击才显示。这是一种很糟糕的设计。这种解释说明,完全可以用一般的非模态浮层来代替,用户只需要悬停就可以快速浏览,并且快速离开(移开触发区按钮或点击空白区域)(当然,如果内容太多,可能你要考虑设计跳转到新的页面而不是使用浮层或弹窗)。



类似这种页面的补充说明,使用悬停浮层体验会更好。

2、内容拓展

这种类型常见于一些图表统计页面、列表页面。由于页面布局的限制,以及突出核心需求的原则,我们只会给用户展示最关心的统计结果和字段,不会也不可能把统计图表的所有详细数据和说明展示在当前页面。而这些内容往往又并未多到需要一个新的页面来容纳(同样会增加页面层级),所以这时候就可以用弹窗来呈现。


内容扩展型的弹窗,主要有以下场景:查看详情、预览图片、数据透视、历史记录……



对于这种弹窗,模态和非模态并没有很大的差别。一般来说,如果是内容较少,并不会占用较大的屏幕面积,使用非模态的会更合适。因为用户只需要扫一眼内容就行,模态的可能会给用户一种“被打断”的感觉。而且,使用非模态的可以直接展现在目标旁边,关联性更好,同时可允许用户快速切换查看其它同类弹窗,且不会影响对其他的模块的操作和浏览。


3、弹窗的扩展样式——侧滑面板

还有一种比较常见的“弹窗”,会以侧滑的形式出新,而不是加遮罩层的模态弹窗。这样做的好处是,用户在查看弹窗内容的同时,不会失去当前页面的信息,方便用户进行对比、参照和检阅;同时并不会影响用户对界面其他区域的操作。这种形式一般在表格中出现较多。当然,这里的弹窗并不局限于一般的对话框样式,我们也可以使用侧滑浮层。



而对于那些信息量较大(可能有滚动条、拖拽操作等),甚至会有一些可选的支线任务或扩展操作时,建议最好使用模态的弹窗。这样可以让用户的注意力更为聚焦,且可减少可能产生的误操作(一些非模态的弹窗允许用户点击弹窗范围外区域关闭弹窗)。

4、渐进式的展示

除了弹窗和二级页面,还有一种信息展示方式——渐进式的策略值得借鉴:即在页面只展示结构式信息和核心元素,更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响,但你能得到一个更清爽更简洁的用户界面。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/pRvR6B2qK7nraKxCESdc3A


2019-12-31 14:44691

评论

发布
暂无评论
发现更多内容

爬虫入门经典(十五) | 邪恶想法之爬取百度妹子图

不温卜火

python 爬虫

C 语言性能优化:循环展开

1

编程 程序员 性能优化 C语言 循环展开

飞桨刷新分子性质预测榜单,助力AI药物研发

百度大脑

AI 药物研发 百度飞桨

Three.js杂记(三)—— 物体运动

空城机

JavaScript 大前端 WebGL 3D可视化 three.js

如何巧妙的去除数组中的空格?

程序媛观澜

c++ 字符串

爬虫入门经典(七) | 一文带你爬取淘宝电场

不温卜火

python 爬虫

寻找被遗忘的勇气(二十二)

Changing Lin

3月日更

想当程序员,如何判断自己是否适合当前端程序员?

孙叫兽

程序员 大前端 引航计划

2.4 Go语言从入门到精通:条件和循环

xcbeyond

3月日更 Go 语言

首席AI架构师进阶之旅开启!第4期60位AICA学员硬核开学

百度大脑

AI 百度飞桨

初来乍到,请多关照

空城机

杂记

爬虫入门经典(四) | 如何爬取豆瓣电影Top250

不温卜火

python 爬虫

加入即可服务1.83亿个家!海尔智家让开发者面向亿万家庭

DT极客

python 爬虫之selenium可视化爬虫

诡途

Python 爬虫 selenium

大前端工程师进阶之路,Node全栈为前端带来更多可能

孙叫兽

大前端 全栈 Node

助力香港成为全球寿命最长的城市,我们如何看医管局的数字化转型?

有只小耳朵

数字化转型 人才培养

在这里,每一行代码都需要被认真对待

DT极客

2021年ONNX开发者大会即将召开

百度大脑

百度飞桨 ONNX

数据分析实战项目-蛋壳公寓投诉分析

诡途

Python 数据分析 蛋壳公寓

爬虫入门经典(十二) | 一文带你快速爬取豆瓣电影

不温卜火

python 爬虫

实时 摔倒识别 /运动分析/打架等异常行为识别/控制手势识别等所有行为识别全家桶 原理 + 代码 + 数据+ 模型 开源!

cv君

AI 目标检测 视频理解 引航计划

飞桨中国行首站重庆 解读产业 智造

百度大脑

百度 飞桨 中关村智酷

【实战问题】-- 缓存穿透,缓存击穿和缓存雪崩的区别以及解决方案

秦怀杂货店

Java redis 缓存 架构 分布式

Three.Js杂记(一)——起步

空城机

大前端 WebGL 3D可视化 three.js

Three.js杂记(二)——绘制点、线、面

空城机

JavaScript 大前端 WebGL 3D可视化 three.js

爬虫入门经典(十八) | 滑动验证码识别

不温卜火

python 爬虫

一套亿级用户的IM架构技术干货(下篇):可靠性、有序性、弱网优化等

JackJiang

智能家居操作系统谁最强?海尔智家独有“智家大脑”行业最领先

DT极客

手把手教学基于深度学习的遥感影像倾斜框算法训练与分析

cv君

人工智能 深度学习 AI 智能 视觉

一气之下开发了个群聊机器人

诡途

Python 办公自动化 群聊机器人

波卡生态DeFi系统开发方案

薇電13242772558

区块链 defi

B端产品设计中,弹窗可以做哪些事情?(二)_语言 & 开发_Think体验设计_InfoQ精选文章