整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家推薦一個(gè)超棒的Vue下拉式/移動(dòng)式/tooltips提示組件VTooltip。
v-tooltip 基于 vue.js 構(gòu)建的輕量級(jí) 工具提示條、彈出窗口、下拉式提示 組件。star高達(dá)1.6K。
安裝
$ npm i v-tooltip -S
# 瀏覽器/CDN
<script src="https://unpkg.com/v-tooltip"></script>引入插件
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)使用
<template>
<div class="example">
<!-- 通過(guò)指令 v-tooltip 使用 -->
<button v-tooltip.top-center="msg">Hover me</button>
<button v-tooltip="{
content: msg,
placement: 'bottom-center',
classes: ['info'],
targetClasses: ['it-has-a-tooltip'],
offset: 100,
delay: {
show: 500,
hide: 300,
},
}">Hover me</button>
<!-- 通過(guò)組件v-popover使用 -->
<v-popover offset="16" placement="bottom" autoHide="true">
<button class="tooltip-target">Click me</button>
<template slot="popover">
<input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
<p>{{ msg }}</p>
<ExampleComponent />
<a v-close-popover>Close</a>
<a v-close-popover.all>Close All</a>
</template>
</v-popover>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'This is a button.'
}
}
}
</script># 示例地址
https://akryum.github.io/v-tooltip/
# 倉(cāng)庫(kù)地址
https://github.com/Akryum/v-tooltipokay，就分享到這里。喜歡的話多支持下，希望對(duì)大家有些許幫助哈~~
到現(xiàn)如今最流行的瀏覽器，那么一定是chrome，無(wú)論是它的速度，還是它的穩(wěn)定性，還是它的簡(jiǎn)潔，都讓人愛不釋手，此外，更多的人選擇它的理由是它有著豐富的擴(kuò)展插件，這些擴(kuò)展插件讓你的瀏覽器變得異常強(qiáng)大，讓你的瀏覽器不僅僅是瀏覽器。
chrome的擴(kuò)展是以.crx結(jié)尾的安裝包，如果你把它下載下來(lái)，并把它重命名為.rar壓縮包文件，然后你就可以使用壓縮軟件對(duì)它進(jìn)行解壓，加壓之后，就會(huì)發(fā)現(xiàn)其實(shí)chrome的擴(kuò)展包里面就是一些js，css，html文件，可以說(shuō)你只要會(huì)寫前端，那么開發(fā)一個(gè)chrome擴(kuò)展插件將會(huì)非常容易。
在這些文件中，有一個(gè)manifest.json文件，它是擴(kuò)展的描述文件，定義了擴(kuò)展的名稱和版本號(hào)等信息。
{
"name": "BrowserActionExtension",
"version": "0.0.1"
"manifest_version": 2,
"browser_action": {
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
}在這個(gè)配置文件中，你還可以添加其它屬性，只要你的擴(kuò)展需要的屬性，你都可以在這里添加配置。
每一個(gè)擴(kuò)展都有一個(gè)被瀏覽器運(yùn)行的背景頁(yè)，此外還有事件頁(yè)面，背景頁(yè)面一直都是激活狀態(tài)，而事件頁(yè)面只是在觸發(fā)事件的時(shí)候才會(huì)激活，因此為了節(jié)省內(nèi)存和提高瀏覽器的性能，盡可能選擇事件頁(yè)面。兩者通過(guò)persistent屬性進(jìn)行區(qū)分。
"background": {
"scripts": ["background.js"],
"persistent": false/true
}當(dāng)我們的擴(kuò)展想要訪問瀏覽器當(dāng)前頁(yè)面的dom樹的時(shí)候，我們需要使用內(nèi)容腳本，這些腳本會(huì)在頁(yè)面刷新的時(shí)候執(zhí)行。
"content_scripts": [
{
"matches": ["https://*/*", "https://*/*"],
"js": ["content.js"]
}
]
對(duì)于擴(kuò)展的UI界面，我們可以通過(guò)browser_action屬性進(jìn)行配置，通過(guò)此屬性，我們可以設(shè)置擴(kuò)展的圖標(biāo)，設(shè)置點(diǎn)擊彈出的頁(yè)面。
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
除了browser_action可以配置擴(kuò)展圖標(biāo)之外，page_action可以配置圖標(biāo)，兩者的區(qū)別是，browser_action總是顯示在擴(kuò)展欄，而page_action則是滿足一定條件才會(huì)顯示，比如頁(yè)面有vue腳本時(shí)候才會(huì)顯示vue調(diào)試圖標(biāo)。
"page_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Google Mail",
"default_popup": "popup.html"
}chrome被開發(fā)人員所喜愛的另一個(gè)原因是它提供了非常強(qiáng)大的調(diào)試工具欄，而我們的擴(kuò)展也是可以加入到調(diào)試工具欄的。
通過(guò)使用devtools_page屬性，我們就可以將我們的擴(kuò)展加入到調(diào)試工具欄的一個(gè)tab中。
"devtools_page": "devtools.html"我們?cè)赿evtools.html中只需要添加一個(gè)js引入語(yǔ)句就可以。
<script src="devtools.js"></script>在devtools.js文件里，我可以可以放入我們實(shí)際的擴(kuò)展內(nèi)容。
chrome.devtools.panels.create(
"MyExtension",
"img/icon16.png",
"index.html",
function() {
}
);擴(kuò)展能夠做什么主要取決于瀏覽器為我們提供了哪些API，慶幸的是，chrome為我們提供了足夠多好用的API。
總之，chrome幾乎為我們提供了完整控制瀏覽器的擴(kuò)展api，正是有了這些api，才誕生了幾十萬(wàn)的擴(kuò)展插件。
在我們本地開發(fā)好擴(kuò)展之后，我們可以通過(guò)本地瀏覽器進(jìn)行調(diào)試。
首先，我們需要先進(jìn)入擴(kuò)展程序頁(yè)面，打開開發(fā)者模式
然后，我們可以通過(guò)選擇加載已解壓的擴(kuò)展程序加載我們的擴(kuò)展。
最后，我們通過(guò)在控制臺(tái)輸出調(diào)試信息來(lái)調(diào)試我們的擴(kuò)展。
manifest.json
{
"name": "BrowserExtension",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Description ...",
"icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
"omnibox": { "keyword" : "yeah" },
"browser_action": {
"default_icon": { "19": "icons/19x19.png", "38": "icons/38x38.png" },
"default_title": "That's the tool tip",
"default_popup": "browseraction/popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"chrome_url_overrides" : {
"newtab": "newtab/newtab.html"
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}],
"devtools_page": "devtools/devtools.html"
}
background.js
// omnibox
chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
suggest([
{content: "color-divs", description: "Make everything red"}
]);
});
chrome.omnibox.onInputEntered.addListener(function(text) {
if(text=="color-divs") colorDivs();
});
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
case "color-divs":
colorDivs();
break;
}
return true;
});
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
switch(port.name) {
case "color-divs-port":
colorDivs();
break;
}
});
});
// send a message to the content script
var colorDivs=function() {
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.sendMessage(tab.id, {type: "colors-div", color: "#F00"});
// setting a badge
chrome.browserAction.setBadgeText({text: "red!"});
});
}popup.html
<script type="text/javascript" src="popup.js"></script>
<div style="width:200px">
<button id="button">Color all the divs</button>
</div>popup.js
window.onload=function() {
document.getElementById("button").onclick=function() {
chrome.extension.sendMessage({
type: "color-divs"
});
}
}devtools.html
window.onload=function() {
var port=chrome.extension.connect({ name: "color-divs-port" });
document.getElementById("button").onclick=function() {
port.postMessage({ type: "color-divs"});
}
}content.js
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
switch(message.type) {
case "colors-div":
var divs=document.querySelectorAll("div");
if(divs.length===0) {
alert("There are no any divs in the page.");
} else {
for(var i=0; i<divs.length; i++) {
divs[i].style.backgroundColor=message.color;
}
}
break;
}
});chrome瀏覽器的擴(kuò)展開發(fā)其實(shí)并不難，用到的知識(shí)都是基礎(chǔ)的js，html，css，我們只需要知道一些和瀏覽器交互的屬性和操作的api，就可以開發(fā)出一個(gè)屬于自己的瀏覽器擴(kuò)展。
輯導(dǎo)語(yǔ)：彈窗，不只是“彈出式廣告”，它是一把雙刃劍，用得好能使用戶更加聚焦，用得不好則可能使用戶不快甚至擊退潛在用戶。那么，彈窗要怎么設(shè)計(jì)呢？本文作者對(duì)彈窗進(jìn)行了詳細(xì)的分析，一起來(lái)看一下吧。
說(shuō)到彈窗，很多人對(duì)彈窗的印象還停留在“彈出式廣告”: 網(wǎng)站為了獲利，廣告商為了增加點(diǎn)擊率，那時(shí)候的廣告就像槍林彈雨，用戶無(wú)處可躲，進(jìn)而惱羞成怒，甚至想要砸掉電腦。
廣告彈窗曾經(jīng)在2010年被《時(shí)代》雜志評(píng)為最糟糕的發(fā)明之一。
我們?nèi)缃裨偈煜げ贿^(guò)的淘寶曾經(jīng)為在電商領(lǐng)域存活下來(lái)，也不得已使用大量的“流氓廣告”，雖然這的確使得用戶惱怒，但是不得不說(shuō)，淘寶也因此刷臉頻繁而讓大家更熟悉它。
彈窗是一把雙刃劍，用的好確實(shí)使用戶更加聚焦，而如果使用的不恰當(dāng)，可能會(huì)使用戶不快甚至擊退潛在用戶。在設(shè)計(jì)彈窗時(shí)，你有沒有遇到過(guò)下面的困惑？
可以說(shuō)，彈窗設(shè)計(jì)的好不好，可以極大的體現(xiàn)一個(gè)設(shè)計(jì)師的基本功扎不扎實(shí)，別看一個(gè)小小的彈窗設(shè)計(jì)起來(lái)似乎非常容易，但面對(duì)不同的用戶場(chǎng)景、業(yè)務(wù)背景，彈窗背后的思考從未停止，今天就讓我們?nèi)轿坏亓私鈴棿啊?/p>
在正式認(rèn)識(shí)彈窗前，我們不妨設(shè)想以下的場(chǎng)景: 你正在家中做事情，但是這個(gè)時(shí)候電話鈴響了， 你不得不放下手中的事情去接電話， 但是假如在智能家居環(huán)境中，你可以通過(guò)人工智能自動(dòng)接電話，同時(shí)你手中的事情仍然在繼續(xù)中。
如果說(shuō)把前者比喻成跳轉(zhuǎn)的頁(yè)面，那么后者就是彈窗，它能夠在吸引你當(dāng)下注意力的同時(shí)，不離開當(dāng)前的場(chǎng)景。
目前設(shè)計(jì)界對(duì)于彈窗的定義多種多樣， 從外觀布局上看，彈窗是頁(yè)面上層彈出的容器，容器中承載著文本、按鈕、選項(xiàng)、標(biāo)簽或表單等組合內(nèi)容；從設(shè)計(jì)目的上看，彈窗是用戶與產(chǎn)品間對(duì)話的一種方式，是對(duì)用戶注意力的一種引導(dǎo)形式，根據(jù)抓取用戶注意力的多少，可具體定義為Dialogue、Actionbar、Popover、Toast、Snackbar等等特定形式。
從廣義上講，彈窗其實(shí)并沒有如它的定義那樣框的那么死，有時(shí)候彈窗不一定有容器，比如追劇時(shí)常見的彈幕，也是一種新型彈窗； 再比方說(shuō)新手引導(dǎo)，也是一種彈窗。不過(guò)，咱們?cè)谶@里談?wù)摰倪€是狹義上的大家在規(guī)范中所常見的彈窗，那些非典型的彈窗就不在今天討論的范圍之內(nèi)。
彈窗的基本組成可以拆解為：
為了使用戶更聚焦于彈窗，我們會(huì)在彈窗容器下方頁(yè)面上方加一層遮罩， 通常這種遮罩是半透明黑色，如果遮罩顏色越深，用戶越能夠?qū)Ｗ⒂诋?dāng)前頁(yè)面； 遮罩顏色越淺，用戶的跳出感越小，產(chǎn)品也更親民。
當(dāng)頁(yè)面中出現(xiàn)多個(gè)彈窗時(shí)，也就意味著多個(gè)遮罩層，這個(gè)時(shí)候遮罩層的顏色該怎么確定呢?
根據(jù)各大規(guī)范，彈窗疊彈窗不建議超過(guò)三個(gè)，當(dāng)彈窗大于等于3個(gè)時(shí)，遮罩的顏色就不再改變。這里再補(bǔ)充一點(diǎn)， 當(dāng)彈窗數(shù)量過(guò)多，一個(gè)疊一個(gè)，用戶容易迷失放向，這時(shí)候可以采用位置錯(cuò)層的方法。
彈窗主體可以拆解為標(biāo)題、內(nèi)容、動(dòng)作按鈕。
彈窗的標(biāo)題和內(nèi)容的書寫規(guī)則，在后文中有詳細(xì)描述，這里不再贅述。
彈窗的動(dòng)作按鈕一般不超過(guò)3個(gè):
1個(gè)按鈕: 那一定是可以關(guān)閉彈窗的操作，比如信息公告類的彈窗的“我知道了”。
2個(gè)按鈕:這是最常見的情況。一個(gè)是推進(jìn)任務(wù)進(jìn)程的動(dòng)作，一個(gè)是取消。
3個(gè)按鈕:這種情況比較少見，比如“了解更多”，但這會(huì)讓用戶離開彈窗，導(dǎo)致彈窗任務(wù)未完成，所以不推薦使用。 如果有更多內(nèi)容需要向用戶展示，可以內(nèi)嵌一個(gè)信息擴(kuò)展，點(diǎn)擊圖標(biāo)在彈窗下方展示更多信息，這樣了解更多信息的同時(shí)，也不用離開彈窗。
至于彈窗按鈕的位置擺放，有兩種常見的擺放規(guī)則:等分居中擺放和某一側(cè)擺放(右側(cè)居多)，不同平臺(tái)有不同的擺法，接下來(lái)舉例說(shuō)明:
1）Material design中右對(duì)齊
2）IOS中等分居中擺放
3）在Fiori規(guī)范中，手機(jī)端的按鈕是等分居中擺放，但是在電腦端采用右對(duì)齊
對(duì)于模態(tài)和非模態(tài)的關(guān)閉方式，從根本上說(shuō)是很不同的。
對(duì)于模態(tài)彈窗，它的關(guān)閉方式只有做出選項(xiàng)選擇后彈窗才會(huì)消失， 包括“取消”選項(xiàng)。 而非模態(tài)彈窗的關(guān)閉方式就很多了，總結(jié)下來(lái)有四種方式:
1)關(guān)閉按鈕(叉叉)
通常是位于右上角，少數(shù)規(guī)范把關(guān)閉按鈕放在左上角，只要保持一致即可。
2)取消按鈕
通常和“確認(rèn)”或者其他推進(jìn)任務(wù)完成的動(dòng)作按鈕放在一起，成對(duì)出現(xiàn)。
3)ESC鍵
敲擊ESC鍵，也可以退出非模態(tài)彈窗。 Esc鍵是英文單詞escape的縮寫， 在1960年由IBM的一位程序員創(chuàng)建，它的功能是“撤銷”、“退出”。
盡管如今使用鼠標(biāo)進(jìn)行交互的人占絕大多數(shù)，但是出于無(wú)障礙設(shè)計(jì)(包容性設(shè)計(jì))的需要， 通過(guò)鍵盤完成交互是必不可少的，所以ESC按鈕也是必需的。
而且這類快捷鍵上的優(yōu)化能夠大大提升用戶使用效率，減輕用戶的操作成本。
尤其在B端產(chǎn)品中，調(diào)用鍵盤進(jìn)行操作優(yōu)化，是一個(gè)不可忽視的用戶爽點(diǎn)。
4)點(diǎn)擊遮罩區(qū)域
遮罩區(qū)域就是彈窗背后的內(nèi)容區(qū)，通常為了使用戶更聚焦會(huì)加上一層暗色遮罩，當(dāng)用戶點(diǎn)擊遮罩區(qū)域后，非模態(tài)彈窗會(huì)自動(dòng)消失，不過(guò)為了避免用戶誤觸，如果彈窗是表單等需要用戶輸入的內(nèi)容時(shí)，這些內(nèi)容要自動(dòng)保存。
對(duì)于“取消”和“關(guān)閉”按鈕，這里想要再闡述更清楚一些:先舉個(gè)生活中常見的例子，假設(shè)你有一個(gè)愛問十萬(wàn)個(gè)為什么的小孩，你正在津津有味地追劇，結(jié)果他跑過(guò)來(lái)問你問題，他還沒張口呢，你就捂住耳朵不聽不聽，這個(gè)呢就相當(dāng)于彈窗右上角的關(guān)閉按鈕(叉叉)，不過(guò)關(guān)閉按鈕僅僅存在于非模態(tài)彈窗中，用戶可以不做任何選擇地關(guān)掉彈窗，而模態(tài)彈窗要求用戶必須做出某種選擇，不給用戶逃避的機(jī)會(huì)，所以模態(tài)彈窗是沒有關(guān)閉按鈕的。
然后小孩問你是雞生蛋還是蛋生雞，你聽了這個(gè)問題也不知道怎么解釋，只能和小孩說(shuō)，這個(gè)問題我也不知道怎么回答，這個(gè)就相當(dāng)于彈窗的“取消”按鈕。
雖然“取消”按鈕和關(guān)閉按鈕(叉叉)最終都會(huì)導(dǎo)致彈窗關(guān)閉，但是從邏輯上而言，是不同的。
彈窗可以分為模態(tài)彈窗和非模態(tài)彈窗兩種類型， 這兩個(gè)概念來(lái)源于開發(fā)人員的術(shù)語(yǔ)。
當(dāng)打開一個(gè)模態(tài)彈窗后，它所屬頁(yè)面的進(jìn)程被打斷了，必須等用戶處理完畢模態(tài)彈窗后，才能夠回到剛才正在進(jìn)行的頁(yè)面。
舉個(gè)例子，你準(zhǔn)備刪除一個(gè)重要的文件，系統(tǒng)彈出一個(gè)彈窗，問你確認(rèn)要?jiǎng)h除嗎?這個(gè)你時(shí)候你必須下一個(gè)明確的指令，選擇刪除或者不刪除，然后你才可以離開當(dāng)前界面，我們可以簡(jiǎn)單的把模態(tài)彈窗理解為用戶不得不做的選擇。
再來(lái)看非模態(tài)彈窗，非模態(tài)彈窗允許用戶在不打斷當(dāng)前頁(yè)面的同時(shí)，去處理其他任務(wù)，舉個(gè)例子，設(shè)計(jì)師們最熟悉不過(guò)的PS，你可以同時(shí)調(diào)用多個(gè)彈窗去更改畫面參數(shù)，因?yàn)樗囆g(shù)創(chuàng)作是一個(gè)多線過(guò)程，藝術(shù)家可以想到什么參數(shù)就改變什么參數(shù)。
模態(tài)和非模態(tài)只是一個(gè)比較概括性的概念，而且不同的規(guī)范里可能對(duì)相似的某一類彈窗的稱呼完全不同或者有輕微差異，接下來(lái)我分別根據(jù) Microsoft-Fluent UI、Google- Material Design、IOS 規(guī)范中拿出一些比較有代表性的彈窗類型詳細(xì)講一講。
1）Actionsheet
類型:模態(tài)彈窗
參考規(guī)范:IOS Design
簡(jiǎn)介:Action sheet一次展示和當(dāng)前語(yǔ)境相關(guān)的兩個(gè)或者更多的動(dòng)作，非必要不要展示太多的動(dòng)作選項(xiàng)，以及避免在動(dòng)作列表中使用滾動(dòng)條。
關(guān)鍵點(diǎn):
2）Modal
類型:模態(tài)彈窗
參考規(guī)范:Microsoft-fluent UI
簡(jiǎn)介:Modals也是一種模態(tài)彈窗，它需要人們把注意力從當(dāng)前頁(yè)面短暫轉(zhuǎn)移到彈窗上，并且需要用戶的交互動(dòng)作。和Dialog不同的是， Modal 更適合長(zhǎng)文本內(nèi)容，如隱私條款、知情同意書等等，抑或是要求用戶進(jìn)行較為復(fù)雜的操作行為如更改頁(yè)面設(shè)置。
3）Dialog
類型:模態(tài)彈窗
參考規(guī)范:Microsoft-fluent UI
簡(jiǎn)介:Dialog是一種模態(tài)彈窗，它需要人們把注意力從當(dāng)前頁(yè)面短暫轉(zhuǎn)移到彈窗上，并且需要用戶的交互動(dòng)作。它基本被用于較為簡(jiǎn)單的場(chǎng)景下，如確認(rèn)信息、刪除文檔、做出一個(gè)選擇。
分類:
使用場(chǎng)景:
關(guān)鍵點(diǎn):
4）Drawer
類型:模態(tài)彈窗
參考規(guī)范:Material Design
簡(jiǎn)介:Drawer是一種容器， 它的性質(zhì)和生活中的抽屜很像， 通常用來(lái)放置和某個(gè)特定窗口相關(guān)的一些信息或者選項(xiàng)。默認(rèn)情況下， Drawer是隱藏的， 它通常是通過(guò)一個(gè)按鈕或者菜單觸發(fā)， 從父級(jí)界面的一側(cè)滑出來(lái)，所以它不能夠脫離父級(jí)界面而單獨(dú)存在。
關(guān)鍵點(diǎn):避免使用drawer，現(xiàn)在流行的軟件已經(jīng)很少會(huì)使用drawer了，而且也不提倡使用。如果你想展示補(bǔ)充性的內(nèi)容的話，不妨嘗試一下panel、popover、sidebars、split views。
5）Popover
類型:模態(tài)、非模態(tài)
參考規(guī)范:IOS Design
簡(jiǎn)介:當(dāng)你輕觸一個(gè)區(qū)域時(shí)，Popover會(huì)短暫的出現(xiàn)在其他內(nèi)容的上層， 通常來(lái)說(shuō)，一個(gè)Popover包含一個(gè)箭頭，指向它彈出來(lái)的位置。當(dāng)你點(diǎn)擊屏幕中的其他區(qū)域或者Popover上的按鈕時(shí)，一個(gè)非模態(tài)的popover會(huì)取消顯示。而模態(tài)的popover只能通過(guò)點(diǎn)擊它上面的cancel或者其他按鈕而取消顯示。
Popover更最適合大屏幕的設(shè)備， 并且可以容納很多元素，包括導(dǎo)航欄、工具欄、tab欄、表格、圖片、地圖、傳統(tǒng)視圖等等。當(dāng)Popover可見時(shí)，在它消失前，當(dāng)前頁(yè)面的其他交互是不能進(jìn)行的。
關(guān)鍵點(diǎn):
6）Snackbar &； Toast
類型:非模態(tài)
參考規(guī)范:Material Design
簡(jiǎn)介:此處將Snackbar和Toast放在一起講，因?yàn)檫@兩者十分相似但是又有所差異。
Toast屬于一種輕量級(jí)的反饋，它比Snack bar的提示程度輕， 常常以小彈框的形式出現(xiàn)，一般出現(xiàn)1到2秒會(huì)自動(dòng)消失， 但為了保持一致性，同個(gè)產(chǎn)品盡量使用同一位置。 和Snack bar有所區(qū)別的是，Toast常常被用作系統(tǒng)提示消息，不包含動(dòng)作按鈕，可以出現(xiàn)在屏幕上中下任意位置， 并且只有安卓中有Toast。
Snack bar被用來(lái)通知用戶該程序正在發(fā)生或者即將發(fā)生的進(jìn)程，也就是說(shuō)Snack bar的內(nèi)容一定是和用戶當(dāng)前操作相關(guān)的，而Toast彈出的內(nèi)容和當(dāng)前操作沒有任何關(guān)系，只是一個(gè)系統(tǒng)提示，比如說(shuō)“你收到了一條消息”這種。
Snack bar同樣短暫的出現(xiàn)在屏幕的底部，不中斷用戶體驗(yàn)，也不需要用戶任何操作，自己就會(huì)消失。它繼承了Toast的所有基礎(chǔ)屬性，但是不同的是:
這里值得注意的一點(diǎn)，Material design中已經(jīng)不再推薦使用Toast而是更推薦Snack bar了，但是目前Toast在安卓應(yīng)用上仍然在被廣泛使用。
下面著重介紹一下Snack bar。
使用場(chǎng)景:既想要展示信息，又想最小程度地打斷用戶注意。
關(guān)鍵點(diǎn):
7）Tooltip
類型:非模態(tài)
參考規(guī)范:Material Design
簡(jiǎn)介:當(dāng)Tooltip通過(guò)鼠標(biāo)懸停、聚焦、或者觸摸后被激活，它會(huì)識(shí)別一個(gè)與之對(duì)應(yīng)的元素然后在該元素附近顯示簡(jiǎn)短、描述性的文案，通常是對(duì)該元素的功能解釋，在停留短暫的時(shí)長(zhǎng)后，Tooltip會(huì)自行消失。
關(guān)鍵點(diǎn):
8）Andriod Notification
類型:非模態(tài)
參考規(guī)范:Material Design
簡(jiǎn)介:在軟件不被使用期間，Notifications提供關(guān)于軟件簡(jiǎn)短、時(shí)不時(shí)的的相關(guān)資訊。這種資訊可以是來(lái)自其他用戶的交流信息或者提供任務(wù)提醒。
Notifications如何被用戶注意到:
9）Message bar
類型:非模態(tài)
參考規(guī)范:Microsoft Fluent UI react 8.65.1
簡(jiǎn)介:顯示軟件或者文件的錯(cuò)誤、警告、重要的信息。比如說(shuō)，一個(gè)文檔上傳失敗，那么錯(cuò)誤的messabe bar就會(huì)出現(xiàn)。
關(guān)鍵點(diǎn):
10）Coachmark &； Teaching bubble
類型:非模態(tài)
參考規(guī)范:Microsoft Fluent UI react 8.65.1
簡(jiǎn)介:Coachmark 是為了吸引用戶注意力并且增加用戶使用他們的機(jī)會(huì)，當(dāng)鼠標(biāo)懸停或者選擇Coachmark時(shí)，Teaching bubble就會(huì)顯示。
關(guān)鍵點(diǎn):
彈窗作為一種容器，在選用時(shí)常常和抽屜、頁(yè)面一起比較，那么在給定一個(gè)內(nèi)容時(shí)，我們?cè)摳鶕?jù)什么來(lái)選擇使用哪種類型的容器呢?
首先，我們先把這三個(gè)容器的定義搞清楚。
接著，在我們被給定一個(gè)需求時(shí)，要先分析這個(gè)需求，從一下幾個(gè)方面去判斷:
1）信息承載量
既然是容器，必然有容量這一說(shuō)，在這里用信息承載量可能更合適，信息承載量包括圖片、視頻、文本、表格等等各種形式的信息量，當(dāng)信息量非常大，密密麻麻十分惱人時(shí)，彈窗自然是不被推薦使用的了，通常來(lái)說(shuō)信息承載量大小有這么一個(gè)規(guī)律: 頁(yè)面 >； 抽屜 >； 彈窗。
不過(guò)信息承載量只是考慮的第一步，是一個(gè)比較宏觀的方面，不是決定性因素。
2）頁(yè)面獨(dú)立性
獨(dú)立性可以理解為與前一個(gè)或者當(dāng)前頁(yè)面的聯(lián)系是否緊密。 頁(yè)面的獨(dú)立性最高，當(dāng)你不斷打開一個(gè)又一個(gè)新的頁(yè)面，常常會(huì)記不得上一個(gè)頁(yè)面的內(nèi)容，這就是因?yàn)檫@些頁(yè)面的內(nèi)容相對(duì)獨(dú)立，關(guān)聯(lián)性不大。
而我們僅僅是從定義上不難看出，彈窗和抽屜的獨(dú)立性較低， 彈窗的前提是不離開當(dāng)前頁(yè)面內(nèi)容，甚至彈窗的主體不能夠遮住當(dāng)前頁(yè)面的重要內(nèi)容；抽屜是建立在父級(jí)頁(yè)面基礎(chǔ)上的，它是對(duì)父級(jí)頁(yè)面內(nèi)容的補(bǔ)充。
大多數(shù)彈窗是與當(dāng)前用戶正在執(zhí)行的操作內(nèi)容相關(guān)的，比如在表單錄入的場(chǎng)景下，選擇時(shí)間會(huì)彈出時(shí)間彈窗，選擇地址時(shí)會(huì)彈出地址簿彈窗。
抽屜比較適合內(nèi)容度較深、邏輯緊密、概括性簡(jiǎn)短的內(nèi)容但不是時(shí)時(shí)必須展示的內(nèi)容， 如購(gòu)物網(wǎng)站的目錄導(dǎo)航、safari收藏夾等等。
而頁(yè)面和頁(yè)面之間的邏輯性不強(qiáng)甚至可以毫無(wú)邏輯，比如跳轉(zhuǎn)到一個(gè)莫名其妙的廣告頁(yè)面。
3）頁(yè)面切換成本
當(dāng)用戶因?yàn)槟硞€(gè)業(yè)務(wù)需求需要頻繁在A和B頁(yè)面間切換時(shí)，這個(gè)時(shí)候我們就要考慮切換成本。
抽屜有一個(gè)固定位置的觸發(fā)按鈕，所以當(dāng)需要頻繁操作時(shí)，用戶能夠快速找到并彈出抽屜，減少學(xué)習(xí)成本。
彈窗回到頁(yè)面的速度也很快， 如果是非模態(tài)彈窗，它可能會(huì)自行消失、點(diǎn)擊遮罩區(qū)域消失或者點(diǎn)擊關(guān)閉按鈕消失，對(duì)于模態(tài)彈窗來(lái)說(shuō)，只要用戶做出了明確的操作后，彈窗就會(huì)消失，自然的回到當(dāng)前頁(yè)面。
頁(yè)面是切換成本最高的，一般需要點(diǎn)擊返回按鈕，返回上一級(jí)頁(yè)面，這個(gè)時(shí)候頁(yè)面加載需要一定的時(shí)間，用戶需要快速認(rèn)知一個(gè)全新的頁(yè)面需要一定的適應(yīng)時(shí)間，所以頁(yè)面的切換成本最高。
1）UX Writing規(guī)則
2）標(biāo)題
標(biāo)題是用戶第一眼注意到的內(nèi)容，用戶掃一眼標(biāo)題來(lái)快速了解這個(gè)彈窗是做什么的，所以標(biāo)題的重要性不言而喻。
3）內(nèi)容
4）如何優(yōu)化按鈕文案
操作清晰可預(yù)測(cè)。 減少使用中性詞， 從而避免用戶停頓思考，讓用戶看到文本的瞬間就明白按鈕時(shí)會(huì)發(fā)生什么。
優(yōu)先考慮“動(dòng)詞+名詞”的形式，如果不能夠這樣表達(dá)，再去考慮“確認(rèn)”“取消”“關(guān)閉”這些中性詞。
5）反饋
操作后的反饋對(duì)于用戶體驗(yàn)也很重要，正如你打游戲通關(guān)時(shí)，系統(tǒng)會(huì)發(fā)出喝彩的聲音，比如你提交了一個(gè)表單彈窗，當(dāng)你提交后，應(yīng)當(dāng)顯示提交成功的反饋。
首先要明確的一點(diǎn)，在各大規(guī)范中都不推薦使用滾動(dòng)條，因?yàn)槭紫葟棿暗膬?nèi)容承載量就不大，如果是業(yè)務(wù)場(chǎng)景復(fù)雜的彈窗，我們可以采用Tab或者分步彈窗，盡量去避免在彈窗中使用滾動(dòng)條。
那么，如果不得不使用滾動(dòng)條的情況下，有幾點(diǎn)要注意:
1) Web端
調(diào)查市面上的電腦分辨率， 從數(shù)據(jù)圖中可見，分辨率900 * 1080是主流，最小的分辨率是1024 * 768。
俗話說(shuō)“一個(gè)水桶，盛水量得看最短的那塊木板”， 所以理論上來(lái)說(shuō)， 只要彈窗能滿足1024*768的分辨率，就可以適配市面上所有的電腦。
各個(gè)平臺(tái)根據(jù)自身業(yè)務(wù)量和需求的差異性，可以根據(jù)內(nèi)容量再給彈窗的尺寸分類，常見的可以分為: 超級(jí)大、大、中、小尺寸，比如螞蟻中臺(tái)的Alert的幾種尺寸:
2) 手機(jī)端
手機(jī)端的彈窗一般都是全屏顯示，除了一些特殊的彈窗類型如Alert， Error， Notification會(huì)有固定的尺寸規(guī)范。
彈窗中有兩種生效模式: 即時(shí)提交模式(immediate commit model)和延遲提交模式(delayed commit model)
舉個(gè)例子，如mac的偏好設(shè)置中的桌面屏保，當(dāng)你選中后立即生效，這里沒有提交也沒有確認(rèn)按鈕，這種就是即時(shí)提交模式；而延遲提交模式更為常見，比如注冊(cè)網(wǎng)站會(huì)員時(shí)，你需要填好所有的信息，然后確認(rèn)一遍，最后提交。
即時(shí)提交模式更適合本身操作量不大，但是切換頻繁的操作，尤其對(duì)于視覺聽覺上的效果改變，即時(shí)提交是非常高效的，常見的比如更換手機(jī)鈴聲、選擇照片濾鏡、更換電腦壁紙等等。
延遲提交模式在B端中非常普遍，它需要用戶仔細(xì)斟酌輸入的內(nèi)容，用戶修改編輯滿意后再確認(rèn)提交，比起效率，它更重視質(zhì)量、減少出錯(cuò)率。
1) 彈窗內(nèi)的導(dǎo)航:
當(dāng)彈窗內(nèi)有次級(jí)彈窗(同一個(gè)容器，不同的內(nèi)容)時(shí)，在次級(jí)彈窗標(biāo)題部分，有一個(gè)返回按鈕，可以返回主彈窗。
2) 用戶改變彈窗的顯示大小
比如一些長(zhǎng)列表，里面的條目很多，有一些字段因?yàn)楸容^長(zhǎng)，被隱藏住了一部分，用戶需要滾動(dòng)滑動(dòng)條，來(lái)查看更多的條目，而當(dāng)彈窗的大小可以被改變時(shí)，用戶就可以增大彈窗，從而每滾動(dòng)一次，就能查看更多的條目，減少滾動(dòng)條的操作次數(shù)，更大的視野也讓用戶的體驗(yàn)感更好。
這里有兩個(gè)小細(xì)節(jié)值得注意:
3) 拖拽移動(dòng)彈窗
有時(shí)候一個(gè)彈窗彈出來(lái)正好遮擋住了底部頁(yè)面的重要內(nèi)容，所以彈窗需要有被移動(dòng)和拖拽的功能:
4) 彈窗的防錯(cuò)功能
在填寫表單場(chǎng)景下，比方說(shuō)用戶已經(jīng)花費(fèi)了二十分鐘填寫表單，但是他不小心碰到了鍵盤上的Esc鍵，彈窗自動(dòng)退出，那么他的內(nèi)容就消失了，這對(duì)用戶來(lái)說(shuō)是十分糟糕的，有如五雷轟頂!
所以對(duì)于一些彈窗而言，添加防錯(cuò)功能是很有必要的，在不小心誤觸后，彈窗不會(huì)立刻關(guān)閉，而是彈出一個(gè)確認(rèn)彈窗“你確定要離開嗎?你的內(nèi)容將會(huì)丟失”，這個(gè)確認(rèn)彈窗可以大大的降低誤觸帶來(lái)糟糕后果，畢竟很少人會(huì)連續(xù)誤觸兩次嘛。
確認(rèn)彈窗確實(shí)是防錯(cuò)的一個(gè)思路，還有一個(gè)思路是為彈窗添加自動(dòng)保存功能，當(dāng)彈窗不小心關(guān)閉后再打開時(shí)，剛才的內(nèi)容還在，不過(guò)新用戶的心情會(huì)經(jīng)歷一個(gè)跌宕起伏: “糟糕了!我的心血沒了!(哭泣)”–奧!!它們竟然還在，太驚喜了!”
需要明確的一點(diǎn)，在各大規(guī)范中，都不推薦彈窗疊彈窗，即使必要情況下，也會(huì)限制彈窗的數(shù)量，至于為什么這樣限制，打個(gè)比方你就懂了:大家小時(shí)候玩過(guò)俄羅斯套娃吧，每打開一個(gè)娃娃會(huì)發(fā)現(xiàn)里面還藏著一個(gè)娃娃，試想把娃娃換成彈窗，彈窗中還有彈窗。
但是在復(fù)雜的大型企業(yè)軟件中，不可避免的會(huì)出現(xiàn)多個(gè)彈窗的情況，我們又該怎么解決呢?
根據(jù)用戶的目標(biāo)和任務(wù)的對(duì)應(yīng)關(guān)系，彈窗和彈窗之間的關(guān)系可以分為線性和非線性關(guān)系。
1）非線形關(guān)系
比如Photoshop，里面的大量窗口都是非線形關(guān)系，我可以調(diào)一下這個(gè)參數(shù)，再跳到另一個(gè)窗口改變另一個(gè)參數(shù)，這些參數(shù)本身并不存在什么邏輯關(guān)系，所以Photoshop的工作臺(tái)可以將窗口隨意的打開、隱藏、關(guān)閉，可以根據(jù)設(shè)計(jì)師的使用頻率自定義工作臺(tái)的內(nèi)容窗口，而面對(duì)復(fù)雜大量的功能，PS給了諸如搜索的工具，讓用戶自主的快速找到自己需要的功能。
對(duì)于多個(gè)非線形彈窗，與其耗費(fèi)心機(jī)的建立一個(gè)復(fù)雜的結(jié)構(gòu)導(dǎo)航，不如給他們工具，讓用戶找到他們自己想要的東西。
2）線形關(guān)系
當(dāng)彈窗和彈窗之間存在緊密的邏輯關(guān)系時(shí)，常見的有三種形態(tài):
舉個(gè)例子，叮叮的“新建項(xiàng)目”:
假設(shè)用戶的目標(biāo)是想要從已有項(xiàng)目中復(fù)制一個(gè)模版: 點(diǎn)擊全部模版后，跳到模版界面，這一步就是“A容器中彈出B容器”。
進(jìn)入模版彈窗后，點(diǎn)擊新建模版，選擇“從已有項(xiàng)目中新建”，可以看出這一步的彈窗的容器沒有變化，只是將彈窗的內(nèi)容區(qū)域進(jìn)行改變，這就是“同一容器不同內(nèi)容”。
而“關(guān)閉A容器后，彈出B容器”，這個(gè)就不太常見，比如通常我們卸載一些流氓軟件時(shí)，會(huì)確認(rèn)卸載之后，再確認(rèn)一次，使得用戶十分惱怒，這些流氓軟件為了留下來(lái)真的費(fèi)盡心機(jī) ； 還有就是在填寫非常重要的信息時(shí)，系統(tǒng)為了提醒用戶“你一定要填寫正確，因?yàn)檫@是不可更改的哦”所以會(huì)確認(rèn)兩次。
這個(gè)場(chǎng)景不常見，所以絕大多數(shù)彈窗只要一個(gè)確認(rèn)彈窗就可以了。
我們從對(duì)話框傳遞的信息的性質(zhì)和來(lái)源， 可以將對(duì)話框分為系統(tǒng)彈窗、信息展示彈窗、操作彈窗。《About Face 4》一書中將彈窗更細(xì)致地分為屬性、功能、通知、公告、進(jìn)度彈窗，其實(shí)理解起來(lái)是一樣的: 進(jìn)度和公告是系統(tǒng)彈窗，通知屬于信息展示彈窗，功能彈窗就是操作彈窗。
系統(tǒng)彈窗:這是由應(yīng)用程序直接啟動(dòng)，而不是用戶請(qǐng)求發(fā)出的，比如“版本升級(jí)到2.0”“頁(yè)面崩潰了”。
信息展示彈窗:顧名思義，就是展示信息的彈窗，這個(gè)信息可以是來(lái)自其他用戶的消息、也可以是查看詳情等等。
操作彈窗:用戶需要對(duì)彈窗執(zhí)行具體的動(dòng)作，比如常見的表單錄入、確認(rèn)刪除、上傳信息等等。
一般的簡(jiǎn)單場(chǎng)景下，不需要再搭建額外的層級(jí)關(guān)系， 用常見的簡(jiǎn)單的方式就可以完成需求， 但是在復(fù)雜的業(yè)務(wù)場(chǎng)景下，我們可能會(huì)遇到各種各樣棘手的問題，如信息太多、信息太復(fù)雜.
于是我們將一些頁(yè)面中會(huì)用到的層級(jí)框架運(yùn)用到彈窗中，但是切記彈窗的承載量是很小的，不要濫用這些手段(比如說(shuō)彈窗中又有Tabbar，又有側(cè)邊欄，這樣是很忌諱的)，這里提供幾種解決思路:
Tab是一種導(dǎo)航控件，當(dāng)頁(yè)面的內(nèi)容眼花繚亂時(shí)，我們可以將內(nèi)容分類然后放入不同的Tab頁(yè)面中，如Mac中的系統(tǒng)偏好設(shè)置的顯示器設(shè)置。
Tab選項(xiàng)卡的形式是多樣化的， 包括僅文字、僅圖標(biāo)、圖標(biāo)+文字、帶有次級(jí)選項(xiàng)的Tab選項(xiàng)、帶數(shù)字/角標(biāo)等等，設(shè)計(jì)師根據(jù)業(yè)務(wù)場(chǎng)景選擇最合適的。
當(dāng)Tab和底部操作區(qū)同時(shí)存在時(shí)，操作區(qū)的層級(jí)永遠(yuǎn)是最高的，所以說(shuō)當(dāng)點(diǎn)擊操作區(qū)按鈕時(shí)，其生效的范圍是所有Tab，而不是當(dāng)前Tab。
如果用戶想在當(dāng)前tab頁(yè)面完成操作的話，這個(gè)時(shí)候可以刪掉底部的操作區(qū)，推薦使用選擇控件如單選框/復(fù)選框， 當(dāng)勾選選項(xiàng)的瞬間，這個(gè)行為生效。
在使用Tabbar時(shí)有幾個(gè)小細(xì)節(jié)要注意:
由于彈窗的寬度限制， Tabbar可承受的數(shù)量有限， 當(dāng)Tab數(shù)量太多時(shí)，不妨考慮用Sidebar，以騰訊會(huì)議的設(shè)置彈窗舉例。 Sidebar和Tabbar類似，都是導(dǎo)航控件， 所以同樣地，如果用戶想在當(dāng)前sidebar選項(xiàng)頁(yè)面完成操作的話，推薦使用選擇控件如單選框/復(fù)選框，它也是立刻生效。
在表單錄入場(chǎng)景中， 當(dāng)信息又多又亂的時(shí)候，往往會(huì)降低用戶的閱讀效率，增加用戶的認(rèn)知成本，分組就是一個(gè)很好的解決辦法。將同類的信息歸納成一組，可以給每個(gè)組加上一個(gè)標(biāo)題，也可以只是在組和組之間加上分割線，界面更加清晰，操作流程更加高效。
分步彈窗適用于有一定的先后邏輯的操作步驟，必須完成第一步才能進(jìn)行第二步，不可以像Tabbar或者Sidebar一樣隨心所欲地去任意位置，最常見的就是網(wǎng)站注冊(cè)。
這樣做有幾個(gè)好處:
彈窗使我們不得不聚焦于當(dāng)前任務(wù)中，但是在一些信息錄入場(chǎng)景中，我們錄入的信息并不像我們的身份信息一樣信手拈來(lái)，比如商品信息的錄入，這個(gè)時(shí)候可以采用側(cè)邊欄的形式將參考信息放在旁邊。
以叮叮的“新建工作待辦”——添加執(zhí)行人舉例子: 為了減輕用戶的記憶壓力，叮叮在右側(cè)提供一個(gè)常駐的側(cè)邊欄，用戶可以通過(guò)“最近聊天”“我的好友”“我的群組”等方式查詢到自己好友的姓名，這個(gè)側(cè)邊欄于左邊的頁(yè)面是相對(duì)獨(dú)立的。
彈窗規(guī)范雖然目前來(lái)說(shuō)已經(jīng)比較完善了，但是隨著業(yè)務(wù)場(chǎng)景的復(fù)雜化和多元化，我相信還會(huì)有更多新的規(guī)則產(chǎn)生， 這就要求設(shè)計(jì)師不僅僅要了解并合理運(yùn)用規(guī)范，更要勇于質(zhì)疑和思考，去不斷地完善規(guī)范。
以上是我對(duì)彈窗的一些思考和總結(jié)，如果你有不同的想法，歡迎與我交流! 期待聽到你的聲音!
本文由郝小七指導(dǎo)http：//www.woshipm.com/u/917803
作者：自來(lái)卷夏憶
本文由 @自來(lái)卷夏憶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
