一、彈窗、對(duì)話框、窗口，你分清了嗎？

1、彈窗（popup）

不知道你們有沒有思考過“對(duì)話框”和“彈窗”的區(qū)別，我們平常所稱呼的“彈窗”主要著眼于動(dòng)作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對(duì)象都可以稱之為“彈窗”。

在常用的兩個(gè)前端網(wǎng)頁開發(fā)組件Ant Design和ElementUI中，沒有單獨(dú)命名為“彈窗”的組件，都是細(xì)分在各個(gè)功能分類中。比如Ant Design中相關(guān)的細(xì)分就有警告提示、全局提示、對(duì)話框、通知提醒框、氣泡確認(rèn)框等，而ElementUI中則又是不一樣的細(xì)分法，除了分類方法和命名不一樣，歸根結(jié)底達(dá)到的目的是一樣的，以上我們都可稱之為“彈窗”，當(dāng)然在工作中用細(xì)分的稱呼會(huì)更專業(yè)更明確。

2、窗口（window）

這里的“窗口”對(duì)標(biāo)“對(duì)話框”和“彈窗”的概念，窗口是承載應(yīng)用程序的區(qū)域，應(yīng)用程序的窗口被打開，則表示該應(yīng)用程序正在運(yùn)行中。窗口可以移動(dòng)、可以放大縮小，主要有二種姿態(tài)，一種是“獨(dú)占式”，一種是“暫時(shí)式”。顧名思義，“獨(dú)占式”就是需要占據(jù)大部分屏幕的應(yīng)用，ps、ai的窗口就是“獨(dú)占式”窗口，而“暫時(shí)式”則大部分時(shí)間在后臺(tái)運(yùn)行，比如音樂播放器、殺毒軟件等，只需在必要時(shí)打開即可。

一個(gè)應(yīng)用通常由一個(gè)主窗口和若干輔助窗口構(gòu)成，彈窗就是典型的輔助窗口之一。

3、對(duì)話框（dialog）

對(duì)話框強(qiáng)調(diào)了用戶與計(jì)算機(jī)進(jìn)行對(duì)話的過程，是疊加在應(yīng)用主窗口上的彈出框，一般在對(duì)話中它會(huì)給出消息或要求輸入。當(dāng)對(duì)話完成后，即可關(guān)閉對(duì)話框。說人話就是，對(duì)話框一般需要用戶進(jìn)行操作，當(dāng)用戶輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會(huì)根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對(duì)話”的過程，因此稱之為“對(duì)話框”。

無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對(duì)話被打斷，所以對(duì)話框通常是模態(tài)的（下文會(huì)解釋模態(tài)和非模態(tài)的定義）。

梳理完三個(gè)容易混淆的概念之后，接下來主要從彈窗的二個(gè)角度展開討論：彈窗的分類和應(yīng)用場(chǎng)景；彈窗的設(shè)計(jì)細(xì)節(jié)和技巧。

二、彈窗的分類和應(yīng)用場(chǎng)景

1、彈窗的分類

彈窗可分為兩大類型：“模態(tài)彈窗”和“非模態(tài)彈窗”。

模態(tài)彈窗：用戶必須給予彈窗反饋，除非點(diǎn)擊關(guān)閉或者操作完成，否則彈窗會(huì)一直在。形式上來說就是給當(dāng)前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對(duì)話被打斷，模態(tài)彈窗不會(huì)輕易被打斷，所以對(duì)話框通常也都是模態(tài)彈窗。

模態(tài)彈窗的常見場(chǎng)景：你打開了一個(gè)應(yīng)用的模態(tài)彈窗后沒有管它，然后切換到其他應(yīng)用程序中去，等你忙完回到原來的應(yīng)用時(shí)，那個(gè)當(dāng)初的模態(tài)彈窗仍舊在那兒等你。這就是模態(tài)彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。

非模態(tài)彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。

下圖紅框中就是典型的非模態(tài)彈窗，它們可以同時(shí)開啟且互不影響，不會(huì)影響主程序的進(jìn)程。

非模態(tài)彈窗的另一個(gè)特點(diǎn)就是：實(shí)時(shí)生效。點(diǎn)開非模態(tài)彈窗的同時(shí)仍然可以看見主界面，主界面會(huì)根據(jù)你的操作實(shí)時(shí)變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態(tài)彈窗則無法在你點(diǎn)擊其中一個(gè)表單的當(dāng)下立即做出改變。

下圖例子就是非模態(tài)的屬性配置彈窗。

2、模態(tài)彈窗的應(yīng)用場(chǎng)景

1）通知公告類彈窗（通常是重要的信息，需要加強(qiáng)用戶關(guān)注度）

營(yíng)銷彈窗

出于營(yíng)銷目的，這類彈窗都會(huì)第一時(shí)間出現(xiàn)在你面前，直到手動(dòng)關(guān)閉，它的特點(diǎn)就是不用登錄也會(huì)出現(xiàn)，提高曝光率，便于拉新和轉(zhuǎn)化。

公告通知彈窗

主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發(fā)的事件，要么來自應(yīng)用開發(fā)者的信息，一般在用戶登錄后第一時(shí)間彈出，確保用戶不會(huì)錯(cuò)過。需要注意的是，在應(yīng)用的通知中心一般也需要保留這類重要或者高級(jí)別的通知，以便用戶可以隨時(shí)查看回顧。

提示類消息彈窗

提示類彈窗是由應(yīng)用程序主動(dòng)彈出的消息，主要有三種狀態(tài)：錯(cuò)誤、警告、確認(rèn)。通常是用戶進(jìn)行某項(xiàng)操作后給出的反饋信息，會(huì)中斷當(dāng)前工作流，屬于阻塞型提示。

以上都屬于通知公告類的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶具體操作，用戶將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。

2）操作配置（B端應(yīng)用中大部分的模態(tài)彈窗都為這種類型）

簡(jiǎn)單配置（表單少，操作清晰）

“簡(jiǎn)單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、分享鏈接、更改名稱等操作。

標(biāo)簽頁彈窗

有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，簡(jiǎn)單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀(jì)90年代開始出現(xiàn)了選項(xiàng)卡/標(biāo)簽頁彈窗。它的優(yōu)點(diǎn)是合理利用了空間，也能讓用戶更好的理解信息層級(jí)。

mac os 8.5系統(tǒng)的彈窗（發(fā)布于1998年10月）

monday.com的配置彈窗（簡(jiǎn)潔的標(biāo)簽頁）

標(biāo)簽頁彈窗的設(shè)計(jì)必須合理且適度，找到信息之間的因果關(guān)系，仔細(xì)斟酌并加以連接整理。同時(shí)，單個(gè)彈窗中的標(biāo)簽頁不宜過多，一般不超過五個(gè)（動(dòng)態(tài)可增減的標(biāo)簽頁除外）。

如果你的標(biāo)簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標(biāo)簽頁的深度，將能夠歸納在一起的內(nèi)容盡量整合，放置在單個(gè)標(biāo)簽頁中；另一種辦法是拆分信息，分成多個(gè)簡(jiǎn)單的彈窗。

下圖中的例子就是第一種辦法，整個(gè)彈窗有三個(gè)標(biāo)簽頁，但是單個(gè)標(biāo)簽頁中又劃分了更詳細(xì)的結(jié)構(gòu)化信息，是一個(gè)典型的標(biāo)簽頁少但信息量大的彈窗。

流程步驟彈窗

流程步驟彈窗與標(biāo)簽頁彈窗接近，區(qū)別就是步驟彈窗需按順序進(jìn)行，一般上一步未完成之前無法進(jìn)入下一步，用戶注冊(cè)常用這種方式。

3、非模態(tài)彈窗的應(yīng)用場(chǎng)景

1）屬性配置彈窗

屬性配置彈窗主要為了讓用戶改變某一對(duì)象的屬性，可以是局部屬性也可以是全局屬性。

屬性配置也可以用模態(tài)彈窗，如何選擇用“模態(tài)”還是“非模態(tài)”？當(dāng)你需要讓用戶實(shí)時(shí)看到界面的變化或者表單項(xiàng)簡(jiǎn)單的時(shí)候可以選擇“非模態(tài)”，如果操作復(fù)雜或者信息加載比較耗時(shí)，則采用“模態(tài)”更合理。

下圖為實(shí)時(shí)生效的日期選擇彈窗

2）下拉菜單

下拉菜單幾乎都是非模態(tài)，它的優(yōu)勢(shì)明顯，沒有復(fù)雜操作和各種表單，只需要鼠標(biāo)劃過點(diǎn)擊即可，快速高效。

3）消息提示

上文中應(yīng)用級(jí)的消息提示通常是模態(tài)彈窗，而非模態(tài)的消息提示彈窗則通常從頁面的頂部或者右側(cè)彈出，這類彈窗可以長(zhǎng)時(shí)間駐留在屏幕邊緣，也可以一段時(shí)間后自動(dòng)消失。

4）氣泡框

點(diǎn)擊按鈕時(shí)，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對(duì)元素進(jìn)行簡(jiǎn)單的操作，尺寸也會(huì)根據(jù)內(nèi)容大小不一。

5）Tooltips

Tooltips跟上圖的氣泡框很類似，區(qū)別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。

三、彈窗的設(shè)計(jì)細(xì)節(jié)和技巧

1、標(biāo)題

一般來說，如果是明確的屬性配置彈窗都應(yīng)該有一個(gè)標(biāo)題來說明用途或功能，以及關(guān)聯(lián)的動(dòng)詞來方便理解。比如“創(chuàng)建列表”、“刪除列表”、“修改配置”、“配置參數(shù)”等，不同標(biāo)題對(duì)應(yīng)不同的功能場(chǎng)景，前提是方便理解。另外，動(dòng)詞在名詞前面或者后面都可以，注意統(tǒng)一規(guī)范即可，不要一會(huì)兒在前一會(huì)兒在后。

標(biāo)題字號(hào)一般比默認(rèn)文本字號(hào)大2px或4px，也有應(yīng)用為了突出標(biāo)題，選擇使用更大的字號(hào)，但大的字號(hào)也應(yīng)該符合文字規(guī)范，而不是隨意使用。

2、關(guān)閉

模態(tài)彈窗應(yīng)至少包含一個(gè)以上的關(guān)閉方式，常見的彈窗關(guān)閉方式有4種：（1）、右上角的關(guān)閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區(qū)域；（4）、一段時(shí)間后自動(dòng)消失。

1）關(guān)閉按鈕（彈窗外、彈窗內(nèi)、彈窗上）

“關(guān)閉”按鈕在彈窗外：常見于營(yíng)銷彈窗，一方面按鈕遠(yuǎn)離彈窗，比較隱蔽，拖延用戶關(guān)閉彈窗的時(shí)間，提高信息的曝光率。

“關(guān)閉”按鈕在彈窗上：版式設(shè)計(jì)中有一個(gè)“破型”的概念，是一種打破規(guī)矩的設(shè)計(jì)技巧，能讓畫面快速吸引眼球，所以營(yíng)銷類彈窗經(jīng)常采用這種設(shè)計(jì)方法。這種概念可以理解為，我們希望用戶關(guān)注于被強(qiáng)調(diào)的部分，常見的場(chǎng)景就是ios系統(tǒng)批量刪除App的時(shí)候，應(yīng)用圖標(biāo)左上角會(huì)出現(xiàn)“移除”按鈕。這種方式強(qiáng)調(diào)了“關(guān)閉”按鈕，視覺上增加層次外，用戶的關(guān)閉體驗(yàn)也更佳，減輕干擾性彈窗對(duì)用戶的負(fù)面情緒。

“關(guān)閉”按鈕在彈窗內(nèi)：這是應(yīng)用最廣泛最不容易出錯(cuò)的方式，對(duì)用戶來說，固定在彈窗右上角的“關(guān)閉”按鈕代表了安全感，在誤操作或者想中斷操作時(shí)我們會(huì)自然而然地去右上角點(diǎn)擊“關(guān)閉”。

2）彈窗底部的“取消”等指令性按鈕

彈窗底部的按鈕一般有2種功能:（1）、取消或者確認(rèn)；（2）、進(jìn)入下一步流程。基于大多數(shù)用戶右手掌握鼠標(biāo)的習(xí)慣，一般按鈕居右下角的設(shè)計(jì)方式更廣泛。這些按鈕上的文字大不相同，代表了對(duì)計(jì)算機(jī)的不同指令，但相同的結(jié)果都是關(guān)閉了當(dāng)前彈窗。

有些應(yīng)用也會(huì)采取按鈕居左的設(shè)計(jì)，這種方式有一個(gè)優(yōu)點(diǎn)就是減少誤操作，讓按鈕遠(yuǎn)離鼠標(biāo)點(diǎn)擊熱區(qū)。

3）、彈窗外的任意區(qū)域

這種方式一般用于模態(tài)彈窗，除了彈窗中的關(guān)閉按鈕外，點(diǎn)擊彈窗外的任意區(qū)域關(guān)閉體驗(yàn)更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導(dǎo)致正在配置中的彈窗被關(guān)閉。

3、字號(hào)

B端彈窗的標(biāo)題字號(hào)通常比內(nèi)容文本大2px或4px，常用字號(hào)為12px、14px、16px，14px為默認(rèn)文本字號(hào)，12px為輔助說明字號(hào)，也有緊湊型頁面將12px作為常規(guī)字號(hào)。無論選用何種字號(hào)，都應(yīng)跟主界面的字體規(guī)范保持一致。

4、排版

左對(duì)齊：彈窗中應(yīng)用最多的對(duì)齊方式，適合表單較多的配置類彈窗。

居中對(duì)齊：常見于消息提示類彈窗，適合圖文結(jié)合或者信息較少時(shí)的排版方式。

兩邊對(duì)齊：兩邊對(duì)齊的方式讓彈窗看起來更規(guī)整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對(duì)齊的方式，一方面左對(duì)齊比兩邊對(duì)齊看起來更有層次，另一方面多表單時(shí)兩邊對(duì)齊會(huì)使彈窗看起來冗長(zhǎng)。

除了對(duì)齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內(nèi)容了，在一些復(fù)雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項(xiàng)，很容易讓表單看起來凌亂，也影響了交互操作。

單行一個(gè)表單項(xiàng)：常見的表單排列，適用于表單較少的排版方式。

單行多表單并排：在復(fù)雜場(chǎng)景中，單行只排列一個(gè)表單項(xiàng)會(huì)讓彈窗超長(zhǎng)，因此會(huì)采用多個(gè)表單并列分布的方式。這種方式存在2個(gè)問題：（1）、如果表單的標(biāo)題長(zhǎng)短不一，看起來參差不齊，下圖中的表單標(biāo)題一樣長(zhǎng)是最理想的場(chǎng)景；（2）、橫向距離長(zhǎng)，導(dǎo)致彈窗過大。

標(biāo)題與表單分行排列：越來越多的應(yīng)用采用這種表單排版方法，這種方法可以兼顧更多場(chǎng)景，可拓展性也更高。這種方法會(huì)增加縱向空間的占用，不過眼睛焦點(diǎn)的縱向?yàn)g覽比橫向?yàn)g覽獲取信息效率更高，所以在表單復(fù)雜的情況下，相比于上一種方法也是一種更優(yōu)解。

表單的排版不只局限于一種，我們需要根據(jù)表單內(nèi)容來設(shè)計(jì)。但是需要注意3點(diǎn)：

(1)、當(dāng)表單標(biāo)題長(zhǎng)短不一，上下無法等距排列時(shí)，我們要盡量將標(biāo)題和表單分行排列；

(2)、一行不要出現(xiàn)太多的表單項(xiàng)，一般來說彈窗中最多一行排列三個(gè)；

(3)、表單的靈活性很強(qiáng)，哪些需要寬度固定，哪些需要根據(jù)內(nèi)容可擴(kuò)展可換行，我們都要在設(shè)計(jì)中加以規(guī)范說明，多考慮可能會(huì)出現(xiàn)的樣式問題，提前規(guī)避。

5、彈窗尺寸

彈窗是一個(gè)容器，容器的大小取決于放置其中的內(nèi)容物。這里主要討論場(chǎng)景復(fù)雜的對(duì)話框的尺寸規(guī)范，其他例如Tooltips之類可作為單獨(dú)的組件在需要的場(chǎng)景直接調(diào)用即可。

對(duì)話框的大小主要根據(jù)內(nèi)容而定，B端應(yīng)用中，一個(gè)尺寸無法滿足所有類型的彈窗需求，所以我們要設(shè)定幾種常規(guī)尺寸，一般可設(shè)定為4種：S（通知提示類）、M（配置簡(jiǎn)單）、L（配置復(fù)雜或者擴(kuò)展詳情）、特殊（根據(jù)實(shí)際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內(nèi)（除去導(dǎo)航欄、工具欄高度），寬度控制在1000px以內(nèi)，如果你所設(shè)計(jì)的B端產(chǎn)品在某個(gè)固定的場(chǎng)景中使用，也可以根據(jù)使用場(chǎng)景而定，原則就是要讓彈窗能夠一屏展示完全。

6、設(shè)計(jì)技巧：巧用sketch組件

這里主要分享一個(gè)小技巧，對(duì)于彈窗來說很實(shí)用。sketch右側(cè)屬性面板有一個(gè)“調(diào)整尺寸“功能，非常適合各種組件化的應(yīng)用。不同場(chǎng)景下我們會(huì)需要不同尺寸的彈窗，有了這個(gè)功能，我們不需要每個(gè)彈窗都畫一遍，只需要?jiǎng)?chuàng)建一組基本的彈窗規(guī)范，其他尺寸可以根據(jù)所需場(chǎng)景調(diào)整。

未調(diào)整過的組件不能隨意更改尺寸，否則將變形不可用。

創(chuàng)建彈窗組件時(shí)，把彈窗里需要固定不便的尺寸參數(shù)設(shè)置好。（設(shè)置方法：靠左的左邊固定，靠右的右邊固定，對(duì)角的靠?jī)蓚€(gè)邊固定，分割線高度固定，文字圖標(biāo)寬高都固定）。

設(shè)置好后的彈窗組件即可在設(shè)計(jì)稿中隨意調(diào)整大小，固定參數(shù)不會(huì)發(fā)生變化，因此我們?cè)谠O(shè)計(jì)規(guī)范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設(shè)計(jì)稿中的每種尺寸都放到設(shè)計(jì)規(guī)范中。

表單同理，在組件中設(shè)置好參數(shù)后，調(diào)用時(shí)可以根據(jù)情況替換圖標(biāo)、文字和寬高，非常方便。

結(jié)語

在B端設(shè)計(jì)中，隨著數(shù)據(jù)量的增加和業(yè)務(wù)線的擴(kuò)大，設(shè)計(jì)師在設(shè)計(jì)時(shí)，常常需要考慮到交互的可擴(kuò)展性，我們?cè)O(shè)計(jì)的交互至少要滿足未來半年到一年的產(chǎn)品應(yīng)用。因此作為使用頻率很高的彈窗，我們?cè)谠O(shè)計(jì)時(shí)尤其需要考慮全面，不只為了滿足當(dāng)前的場(chǎng)景，也要考慮未來可能應(yīng)用的場(chǎng)景。

01. 按鈕設(shè)計(jì)強(qiáng)弱表現(xiàn)

在整個(gè)產(chǎn)品設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級(jí)對(duì)按鈕設(shè)計(jì)進(jìn)行主次區(qū)分，設(shè)計(jì)表達(dá)要有強(qiáng)弱差異。按鈕設(shè)計(jì)可以通過大小、填充、描邊、色相、飽和度等的不同來進(jìn)行強(qiáng)弱差異，不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級(jí)：行動(dòng)觸發(fā)、主要、次要、輔助、禁用等。

02. 圓角設(shè)置要合理

對(duì)于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對(duì)較少，會(huì)顯得按鈕不方不圓的，設(shè)計(jì)表現(xiàn)顯得不夠成熟。

全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通常控制在 1/4H（高度值的四分之一）以內(nèi)（僅為個(gè)人參考，并非絕對(duì)值）。

03. 投影設(shè)置要用對(duì)色彩關(guān)系

給一個(gè)有彩色系按鈕設(shè)置投影時(shí)，選擇無彩色系（比如黑色）也能達(dá)到效果，只是為了得到更好的視覺效果，提高用戶感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會(huì)顯得更加干凈清爽。

04. 投影的使用勿過度泛濫

雖然投影的運(yùn)用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用。比如對(duì)于一些淺色按鈕來說也許投影反而會(huì)降低按鈕的識(shí)別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。

05. 給按鈕文字一點(diǎn)呼吸感

按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗(yàn)，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，也許會(huì)讓你的設(shè)計(jì)顯得更加成熟穩(wěn)重。

06. 按鈕設(shè)計(jì)別讓用戶思考

按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作，而不是讓用戶對(duì)其產(chǎn)生困惑。按鈕設(shè)計(jì)別讓用戶思考這是啥，是否可以點(diǎn)擊，需要簡(jiǎn)潔明了的對(duì)此操作進(jìn)行指引。用戶已經(jīng)養(yǎng)成對(duì)按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶就會(huì)產(chǎn)生疑惑，影響使用體驗(yàn)。

07. 樣式表達(dá)的一致性

當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí)，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會(huì)使得我們的設(shè)計(jì)可用性更強(qiáng)。

08. 箭頭運(yùn)用不是字符輸入

一些初入職場(chǎng)的設(shè)計(jì)師會(huì)偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達(dá)方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來進(jìn)行設(shè)計(jì)，控制好箭頭的粗細(xì)和文字筆畫的粗細(xì)值接近，這樣顯得更有細(xì)節(jié)和態(tài)度。

09. 按鈕設(shè)計(jì)主次分明

通過信息對(duì)比才能形成主次之分，按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分，達(dá)到層次結(jié)構(gòu)的視覺提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。

10. 按鈕設(shè)計(jì)不要讓用戶誤解

在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判。在確定好按鈕樣式特征之后，不要在其它場(chǎng)景運(yùn)用其樣式特征或者類似的風(fēng)格特征，這樣會(huì)讓用戶產(chǎn)生錯(cuò)誤的認(rèn)知，因而進(jìn)行無用的操作。

11. 按鈕文本表達(dá)要言簡(jiǎn)意賅

在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達(dá)言簡(jiǎn)意賅，只要能夠準(zhǔn)確傳達(dá)信息識(shí)別度即可。有時(shí)候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強(qiáng)。

12. 按鈕文本設(shè)置切勿換行

單行文字的可讀性更高，如果出現(xiàn)換行就會(huì)降低可讀性。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，確保文本內(nèi)容在一行之內(nèi)顯示，如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡(jiǎn)。

13. 特殊場(chǎng)景要靈活轉(zhuǎn)變

底部按鈕的運(yùn)用并非固定不變，不同機(jī)型或者特殊場(chǎng)景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類型的機(jī)型，由于底部需要預(yù)留主頁控制器的位置，所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗(yàn)。

14. 按鈕大小要便于點(diǎn)擊

按鈕需要方便用戶進(jìn)行點(diǎn)擊操作，如果用戶點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì)帶給用戶不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現(xiàn)出來的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求。

如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。

15. 同屬板塊按鈕大小一致

在同屬板塊內(nèi)的按鈕設(shè)計(jì)，我們可以通過按鈕的強(qiáng)弱來體現(xiàn)層級(jí)關(guān)系，不要讓按鈕大小不一，這樣視覺平衡會(huì)受到影響。

16. 按鈕設(shè)計(jì)考慮文本最大值

稍微注意細(xì)節(jié)的設(shè)計(jì)師也不會(huì)讓文本的長(zhǎng)度超過按鈕寬度，這是一個(gè)非常明顯的錯(cuò)誤。但是按鈕文本變得很長(zhǎng)卻是遇見過的，幾個(gè)字即可表達(dá)的意思卻使用了過多修飾詞。在進(jìn)行按鈕文本思考的時(shí)候，要根據(jù)最佳的視覺效果設(shè)定一個(gè)最大值，不要任其無限制發(fā)揮，這樣會(huì)使得最終的視覺效果大打折扣，甚至影響用戶感官體驗(yàn)。

17. 保持按鈕可讀性

按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶可以一目了然的發(fā)現(xiàn)它。現(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運(yùn)用，需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時(shí)候，始終保持按鈕與背景的高對(duì)比度和可讀性。

18. 按鈕去文本是否合理

關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識(shí)別性和準(zhǔn)確性，雖然純圖標(biāo)顯得設(shè)計(jì)簡(jiǎn)潔大方，但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義，不會(huì)讓用戶出現(xiàn)誤解或者錯(cuò)誤的認(rèn)知。所以，按鈕去文本需要根據(jù)文案代表的含義來判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡(jiǎn)潔的設(shè)計(jì)表達(dá)效果更佳。

19. 正確判斷按鈕顏色選擇

色彩在設(shè)計(jì)中是最直觀的體現(xiàn)，不同的顏色會(huì)傳遞不同的性格，帶給用戶認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結(jié)合品牌色和輔助色作出判斷。

通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會(huì)選擇輔助色來表達(dá)，紅色或者橙色多為行動(dòng)刺激作用，不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用、失效等屬性，需要酌情選擇。

20. 按鈕位置結(jié)合用戶體驗(yàn)

引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設(shè)計(jì)師們的爭(zhēng)議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊，而蘋果系統(tǒng)卻選擇了放在右邊，用戶運(yùn)用系統(tǒng)的習(xí)慣會(huì)影響其行為的適應(yīng)度。不過要是在移動(dòng)端個(gè)人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊，更有利于用戶點(diǎn)擊（特殊人群這里需要除外）。

有時(shí)候?yàn)榱朔乐褂脩粽`操作，我們會(huì)將確認(rèn)操作的按鈕放在左邊，通過助力設(shè)計(jì)讓用戶再次確認(rèn)。所以，一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣，另一方面也要結(jié)合用戶習(xí)慣，將按鈕放在最合適的位置，便于用戶操作。

小結(jié)

作為設(shè)計(jì)師來說，對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考和總結(jié)，才能讓我們?cè)O(shè)計(jì)出更好的解決方案。一枚小小的按鈕設(shè)計(jì)，其背后也有很多需要探索的東西，本文為大家總結(jié)了 20 條經(jīng)驗(yàn)，相信還有更多值得梳理的細(xì)節(jié)，期待更多設(shè)計(jì)伙伴去挖掘。