沐鸣平台开户腾讯出品!PC端弹窗设计五步决策法

www.pptschool.com 沐鸣平台注册 2021-09-20 89 次浏览 , 没有评论

此外,在设计师的日常工作中,也经常会遇到以下情况:

  1. 概念混淆

不论是在设计师之间,沐鸣平台注册还是和产品或开发沟通过程中,常出现有人在说弹窗,有人在说模态,有人在问 “你们说的是对话框还是 popover ” 的情况。

  1. 用法模糊

尽管 Apple HIG 等较为权威的设计指南已经对弹窗类型做出了梳理,但这些指南主要聚焦于移动端,在 PC 端仍然欠缺弹窗设计的完整决策标准。尤其是在一些业务流程复杂的 toB 产品中,这种决策问题更为明显。

针对以上问题,沐鸣平台开户本文阐述了弹窗的概念与分类,为 PC 端弹窗设计提供了一种决策路径,并给出了相应的设计建议。

本期提纲:

弹窗概念与分类
PC 弹窗设计:5 步决策法
总结与建议
弹窗概念与分类

  1. 弹窗 Popup
    从广义上讲,弹窗(popup)顾名思义泛指弹出的窗口,是一种信息容器。如图所示,从容器形态上划分,弹窗主要有以下几类:

腾讯出品!PC端弹窗设计五步决策法

弹窗的类型

对话框 Dialog

“Dialog” 的本义是指人与人之间的对话,引申到界面交互上,是指人与机器的互动。对话框是一种需要引起用户明确操作的弹窗。视觉上常居中于屏幕。虽然对话框可以是模态或非模态的,但由于本身视觉形式阻断感强,大多都是模态的。(关于模态的定义见下文)

App 设计系列之模态弹窗与非模态弹窗
在手机app应用中各种格式的弹窗效果相信大家都看过,也可能反感过某些弹窗,本文就来谈谈关于app弹窗设计以及弹窗的适用情景。 一. 弹窗的定义 1. 弹窗作用 弹窗是为了让用户回应,需要用户与之交互的窗口。

阅读文章 >>
腾讯出品!PC端弹窗设计五步决策法

腾讯文档:权限修改确认

Popover

Popover 是一种触发后出现在屏幕内容上方的瞬时视图,通常有一个箭头指向弹出位置。可以是模态或非模态的。Popover 指向性明确,更适用于较大屏幕,并且可以承载多种信息元素。

腾讯出品!PC端弹窗设计五步决策法

苹果日历:新建日程

抽屉 Drawer

抽屉是一种从屏幕边缘滑进来的面板。抽屉的滑动方向既可以是垂直的,也可以是水平的。可以是模态或非模态的。移动端常见的从屏幕底部滑出的半屏也是一种抽屉。

腾讯出品!PC端弹窗设计五步决策法

Dribbble:查看作品详情

腾讯出品!PC端弹窗设计五步决策法

Google analytics: 权限管理

腾讯出品!PC端弹窗设计五步决策法

微信小商店:新建地址

比起对话框和 popover,抽屉可以更大程度上利用屏幕空间,因此能够承载更多内容,且与主界面的亲密度较高。但缺点是灵活度较低,只能横向/纵向降低尺寸。因此使用范围更小,多用于承载较为复杂的表单及字段较多的详情页。

还有一些比较轻量的弹窗形式如 tooltip(信息提示)以及临时出现的 toast,通常都是非模态的。

腾讯出品!PC端弹窗设计五步决策法

回顶部