win禁止在电脑上安装一些字体 (win禁止在电脑上安装一些字体怎么办)

编者按:弹出窗口不仅仅是一个弹出广告。它是一把双刃剑。如果用得好,用户可以更加关注。如果用得不好,用户可能会不快,甚至会击退潜在用户。那么,如何设计弹?本文作者详细分析了弹出窗口。让我们看看。

说到弹出窗口,很多人对弹出窗口的印象还停留在弹出广告上: 为了盈利,广告商为了提高点击率,当时的广告就像枪林弹雨,用户无处可藏,然后恼羞成怒,甚至想砸电脑。

2010年,广告弹窗被《时代》杂志评为最糟糕的发明之一。

我们现在熟悉的淘宝,为了在电子商务领域生存,不得不使用大量的流氓广告。虽然这确实让用户生气,但不得不说,淘宝经常刷脸,让大家更熟悉。

弹出窗口是一把双刃剑,使用得当确实让用户更加关注,如果使用不当,可能会使用户不快,甚至击退潜在用户。你在设计弹窗时遇到过以下困惑吗?

什么时候选择弹出窗口,什么时候使用页面?弹出窗口的标题是怎来的?最多可以叠几个弹窗?

可以说,弹出窗口的设计可以极大地反映设计师的基本技能是否扎实。虽然设计一个小弹出窗口似乎很容易,但面对不同的用户场景和业务背景,弹出窗口背后的思维从未停止过。今天,让我们全面了解弹出窗口。

01 弹窗的定义

在正式了解弹窗之前,我们不妨想象以下场景: 你在家做事,但这时电话铃响了, 你要放下手中的东西接电话, 但如果在智能家居环境中,你可以通过人工智能自动接听电话,而你手中的东西还在继续。

如果把前者比作跳转页面,那么后者就是弹出窗口,它可以吸引你当前的注意力,而不离开当前的场景。

目前设计界对弹窗的定义多种多样, 从外观布局从上面看,弹出窗口是页面上层弹出的容器,它承载着文本、按钮、选项、标签或表设计目的弹出窗口是用户与产品之间对话的一种方式,是用户注意力的一种引导形式,根据用户注意力的数量,可以具体定义为Dialogue、Actionbar、Popover、Toast、Snackbar等等特定形式。

从广义上讲,弹出窗口并不像它的定义那样死亡。有时弹出窗口不一定有容器。例如,追逐戏剧时常见的弹幕也是一种新型弹出窗口; 比如新手引导也是弹窗。

从广义上讲,弹出窗口并不像它的定义那样死亡。有时弹出窗口不一定有容器。例如,追逐戏剧时常见的弹幕也是一种新型弹出窗口; 例如,新手指导也是一种弹出窗口。然而,我们在这里讨论的是狭义上常见的弹出窗口,这些非典型的弹出窗口不在今天的讨论范围内。

02 弹窗的组成

弹出窗的基本组成可拆解为:

屏蔽弹窗主体(容器、标题、内容、动作按钮)关闭入口(不必要/没有模态弹窗)

1. 遮罩

为了让用户更加关注弹出窗口,我们将在弹出窗口容器下方的页面上添加一层遮罩, 通常这种遮罩是半透明的黑色,如果遮罩颜色越深,用户就越能专注于当前页面; 遮罩颜色越浅,用户跳出感越小,产品越贴近百姓。

当页面上出现多个弹出窗口时,这意味着多个遮罩层。此时如何确定遮罩层的颜色?

当页面上出现多个弹出窗口时,这意味着多个遮罩层。此时如何确定遮罩层的颜色?

根据主要规范,不建议弹出窗折叠弹出窗口超过三个。当弹出窗口大于或等于3个时,盖子的颜色将不再改变。这里再补充一点, 当弹出窗口数量过多时,用户很容易迷失方向

位置错层的方法。

2. 弹窗主体

弹窗主体可拆解为

标题、内容、动作按钮

弹出窗口的标题和内容的写作规则在后面有详细的描述,这里就不赘述了。

弹出窗口的动作按钮一般不超过3个:

1个按钮: 那一定是可以关闭弹窗的操作,比如信息公告弹窗的我知道。

2个按钮:

这是最常见的情况。一个是推进任务进程一是取消。

3个按钮:这种情况比较少见,比如多了解,但是会让用户离开弹窗,导致弹窗任务未完成,不建议使用。 如果需要向用户显示更多内容,可以嵌入信息扩展,点击图标在弹出窗口下方显示更多信息,以便在不离开弹出窗口的情况下了解更多信息。

至于弹出窗口按钮的位置,有两种常见的放置规则:

等分居中摆放一侧摆放(右侧居多),

不同的平台有不同的摆法,下一个例子说明:

1)Material design中右对齐

2)IOS中等分居摆放

3)在Fiori在规范中,手机按钮等分居,但在计算机端使用右对齐

3. 关闭弹窗入口

从根本上说,模态和非模态的关闭方式是非常不同的。对于模态弹窗,其关闭方式只有在选择后才会消失, 包括取消选项。

对于模态弹窗,其关闭方式只有在选择后才会消失, 包括取消选项。 关闭模态弹窗的方法有很多,总结有四种方法:

1)关闭按钮(叉)

通常位于右上角,只要保持一致,几个标准就把关闭按钮放在左上角。

2)取消按钮

通常与确认或其他推进任务完成的动作按钮放在一起,成对出现。

3)ESC键

敲击ESC还可以退出非模态弹窗。 Esc键是英文单词escape的缩写, 在1960年由IBM由程序员创建,其功能是撤销、退出。

尽管现在绝大多数人使用鼠标进行交互,但出于无障碍设计(包容性设计)的需要, 通过键盘完成交互至关重要,所以ESC按钮也是必要的。

而且这种快捷键的优化可以大大提高用户的使用效率,降低用户的运营成本。

特别是在B端产品中,调用键盘进行操作优化是用户不可忽视的酷点。

点击遮罩区域

屏蔽区域是弹出窗口背后的内容区域。通常,为了使用户更加关注,会添加一层深色屏蔽。当用户点击屏蔽区域时,非模态弹出窗口会自动消失。但是,为了避免用户误触,如果弹出窗口是表单和其他需要用户输入的内容,则应自动保存。

对于取消和关闭按钮,我想在这里更清楚地解释一下:

让我们举一个生活中常见的例子。假设你有一个孩子喜欢问10万个为什么,你在津津有味地追逐戏剧。结果,他跑过来问你问题。在他张开嘴之前,你捂住耳朵,不听。这相当于弹出窗口右上角的关闭按钮(叉),但关闭按钮仅存在于非模态弹出窗口中,用户可以在不做任何选择的情况下关闭弹出窗口,而模态弹出窗口要求用户做出选择,不要给用户逃避的机会,因此模态弹出窗口没有关闭按钮。

然后孩子问你是鸡蛋还是鸡蛋,你不知道如何解释这个问题,只能告诉孩子,我不知道如何回答这个问题,这相当于弹出窗口

取消”按钮。然后孩子问你是鸡蛋还是鸡蛋,你不知道如何解释这个问题,只能告诉孩子,我不知道如何回答这个问题,这相当于弹出窗口

取消”按钮。虽然取消按钮和关闭按钮(叉叉)最终会导致弹窗关闭,但逻辑上是不同的。

03 弹窗的类型

1. 模态&非模态

弹窗可分为

模态弹窗非模态弹窗

两种类型, 这两个概念来自开发人员的术语。

当打开模态弹出窗口时,其页面的过程被打断,必须等到用户处理完模态弹出窗口后才能返回正在进行的页面。

比如你要删除一个重要的文件,系统弹出一个弹出窗口,问你是否确认要删除?此时,您必须下一个明确的指令,选择删除或不删除,然后才能离开当前界面。我们可以简单地理解模态弹出窗口用户必须做出选择

再来看非模态弹窗

,非模态弹出窗口允许用户处理其他任务,而不打断当前页面。例如,设计师最熟悉它PS,您可以同时调用多个弹出窗口来更改图像参数,因为艺术创作是一个多线过程,艺术家可以改变他们想到的参数。

模式和非模式只是一个相对普遍的概念,不同的规范可能对某种类似的弹出窗口有完全不同或轻微的差异。接下来,我将分别遵循它 Microsoft-Fluent UI、Google- Material Design、IOS 在规范中,详细介绍一些有代表性的弹窗类型。

2. 典型弹窗

1)Actionsheet

类型:模态弹窗

参考规范:IOS Design

简介:Action sheet两个或两个以上与当前语境相关的动作,不要显示太多的动作选项,也不要在动作列表中使用滚动条。

关键点:动作按钮: 选择危险 (如清空、删除)放在上面, 底部放置取消按钮。

关键点:

动作按钮: 选择危险 (如清空、删除)放在上面, 将取消按钮放在底部。避免使用过多的动作按钮,使用取消按钮。Action Sheet列表产生滚动条。视觉上需要突出破坏性操作。

2)Modal

类型:模态弹窗

参考规范:Microsoft-fluent UI

简介:Modals它也是一种模式弹出窗口,它需要人们将注意力从当前页面转移到弹出窗口,并需要用户的互动。和Dialog不同的是, Modal 更适合长文本内容,如隐私条款、知情同意书等,或要求用户更改页面设置等复杂操作行为。

3)Dialog

类型:模态弹窗参考规范:Microsoft-fluent UI

简介:

Dialog它是一种模式弹出窗口,它需要人们将注意力从当前页面转移到弹出窗口,并需要用户的互动。它基本上用于相对简单的场景,如确认信息、删除文档和做出选择。

分类:

Alert Dialogue: 用户在关闭弹出窗口之前,必须做出选择,因为紧急信息、详细显示或动作中断用户。Simple Dialogue

: 无需动作按钮即可生效的列表选项。Confirmation Dialogue: 用户需要确认当前的选择,如果用户后悔,可以在这一步进行修改。

Full-screen Dialogue: 全屏弹出窗口将充满整个屏幕,包括需要完成一系列任务的动作,只适用于手机端。

使用场景:

阻止程序运行的错误需要向用户显示完成特定任务的关键信息, 如果需要决定和声明

最高程度抓住用户的注意力

关键点:

在当前强制输入区域完成之前,保存按钮处于置灰状态。一些简单的弹窗允许出现在全屏弹窗的上层。如果长度不确定或更长,过两行。如果长度不确定或更长,将其放置在内容区而不是标题区。尽量减少使用Dialogue,因为它们毫无征兆地出现,会打断用户的过程。大部分弹窗内容应尽量避免使用滚动条

, 如果必须使用(如选择时间日期),保持标题和底部的动作按钮区域固定,覆盖区域的背景不动。

4)Drawer

类型:

模态弹窗

参考规范:Material Design

简介:Drawer它是一种容器, 它的性质与生活中的抽屉非常相似, 通常用于放置一些与特定窗口相关的信息或选项。默认情况下, Drawer是隐藏的, 它通常通过按钮或菜单触发, 从父级界面的一侧滑出,因此它不能单独存在于父级界面之外。

关键点:避免使用drawer,现在流行的软件很少使用drawer而且不提倡使用。如果你想展示补充内容,不妨试试panel、popover、sidebars、split views。5)P op


电脑知识