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）Pop

電腦知識