萬(wàn)字長(zhǎng)文!六大章節(jié)幫你掌握B端產(chǎn)品的按鈕設(shè)計(jì)體系
提到按鈕,大部分人印象就是文字加個(gè)背景框,并沒(méi)有太多需要設(shè)計(jì)的空間。但是作為 B 端設(shè)計(jì)師,相信很多同學(xué)在工作過(guò)程中都產(chǎn)生過(guò)以下問(wèn)題:
按鈕作為最基本的交互單位之一,幾乎在每個(gè)頁(yè)面中我們都會(huì)使用到。由于不同行業(yè)下業(yè)務(wù)場(chǎng)景的復(fù)雜性,很多時(shí)候很難直接參照其他產(chǎn)品的按鈕進(jìn)行復(fù)用,也無(wú)法用一套布置方案復(fù)用所有場(chǎng)景,所以作為 B 端設(shè)計(jì)師需要對(duì)按鈕控件具備足夠的認(rèn)知,理解其背后的使用邏輯和規(guī)范,才能滿(mǎn)足多層級(jí)跨場(chǎng)景的設(shè)計(jì)需要。
本文結(jié)合自身的工作經(jīng)驗(yàn),對(duì)按鈕進(jìn)行了系統(tǒng)性的整理和總結(jié),希望對(duì)各位 B 端設(shè)計(jì)師同學(xué)的日常工作和學(xué)習(xí)有所幫助。
一、按鈕的發(fā)展歷史
在詳細(xì)介紹按鈕前,我們先簡(jiǎn)單了解下按鈕的發(fā)展歷史。按鈕的概念起初是源自現(xiàn)實(shí)物理世界的實(shí)體按鈕,在日常生活中如電源開(kāi)關(guān)、計(jì)算器、電話(huà)等都是通過(guò)實(shí)體按鈕進(jìn)行控制,由于其簡(jiǎn)單直觀(guān)易操作的特性,即使如今各種電子產(chǎn)品都逐漸發(fā)展為觸控屏操作,實(shí)體按鈕依舊被保留了下來(lái)。
當(dāng)數(shù)字屏誕生后,人機(jī)交互設(shè)計(jì)開(kāi)始走向數(shù)字屏幕后,為方便用戶(hù)理解,在很長(zhǎng)一段時(shí)間內(nèi)設(shè)計(jì)師都是采用擬物風(fēng)按鈕來(lái)暗示用戶(hù)可執(zhí)行的操作。伴隨著客戶(hù)端設(shè)備升級(jí)和開(kāi)發(fā)方式的變更,至 2013 年 Apple 在 iOS7 上第一次采用了扁平化設(shè)計(jì),至此按鈕樣式開(kāi)始往扁平化發(fā)展。隨后歷經(jīng)了多年發(fā)展,按鈕的樣式開(kāi)始層出不窮,但是無(wú)論樣式如何變更,其背后的體驗(yàn)交互邏輯依舊是物理世界按鈕的映射。
二、什么是 B 端中的按鈕
1. 按鈕的定義
在 B 端設(shè)計(jì)中什么樣的組件可以定義為按鈕?我們先來(lái)看看國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)中對(duì)按鈕組件的定義:
總結(jié)來(lái)說(shuō),按鈕可以理解為用于承載即時(shí)操作和命令的組件。由于 B 端產(chǎn)品業(yè)務(wù)邏輯復(fù)雜、頁(yè)面流程多,相較于傳統(tǒng)意義上的按鈕,B 端中的按鈕被設(shè)定為可復(fù)用、規(guī)范化的組件,通過(guò)對(duì)組件元素進(jìn)行拆解、歸納、重組,將其劃分為特定類(lèi)型的組件方便管理和使用。
按鈕相較于輸入框、選擇器、單選框等控件無(wú)法進(jìn)行數(shù)據(jù)輸入,相較于標(biāo)簽、文字提示等控件也無(wú)法進(jìn)行信息瀏覽,其關(guān)鍵在于「即時(shí)性」和「承載操作」,既可單獨(dú)完成操作,也可與其他控件聯(lián)動(dòng),作為觸發(fā)操作的行動(dòng)點(diǎn)。
2. 容易與按鈕混淆的控件
① 標(biāo)簽 Tag
雖然同樣翻譯為標(biāo)簽,但是此處指的是 Tag 標(biāo)簽,而非 Tabs 標(biāo)簽頁(yè)。標(biāo)簽在樣式上與按鈕幾乎相同,且同樣可以添加圖標(biāo)標(biāo)識(shí)和觸發(fā)操作。兩者的區(qū)別在于,標(biāo)簽側(cè)重于信息的選擇、篩選和分類(lèi),而按鈕則只是單純用于觸發(fā)即時(shí)操作,因此很多時(shí)候標(biāo)簽會(huì)設(shè)置不同顏色樣式以便信息區(qū)分。
② 開(kāi)關(guān) Switch
和其他錄入控件相比,開(kāi)關(guān) Switch 最顯著的特點(diǎn)便是和按鈕一樣觸發(fā)后立即生效,因此很多初級(jí)設(shè)計(jì)師很容易將其與按鈕歸為一類(lèi)。
其區(qū)別是,開(kāi)關(guān)承載的是兩種互斥狀態(tài)的切換,如打開(kāi)/關(guān)閉、顯示/隱藏、啟用/禁用等,此外由于在視覺(jué)上符合用戶(hù)對(duì)現(xiàn)實(shí)世界中開(kāi)關(guān)的認(rèn)知,所以可以直接展示當(dāng)前項(xiàng)的狀態(tài)。
③ 單選/多選框 Radio/Checkbox
單選框和多選框一般用于狀態(tài)標(biāo)記,但是無(wú)法直接觸發(fā)操作,所以通常會(huì)和按鈕配合進(jìn)行使用。最常見(jiàn)的搭配場(chǎng)景便是在登錄頁(yè),用戶(hù)勾選「記住密碼」或「自動(dòng)登錄」后標(biāo)記其狀態(tài),再點(diǎn)擊按鈕進(jìn)行登錄。
三、按鈕的原子拆解
相較于其他組件,按鈕的元素構(gòu)成較為簡(jiǎn)單,分為內(nèi)容層和容器層,通過(guò)將不同元素進(jìn)行搭配組合,即可設(shè)計(jì)出不同類(lèi)型的按鈕類(lèi)型和按鈕狀態(tài)。
- 內(nèi)容層:圖標(biāo)和文字自由組合。內(nèi)容層作為操作引導(dǎo)的核心必須存在。
- 容器層:控制顏色、圓角、描邊、投影等樣式,有些設(shè)計(jì)系統(tǒng)下還會(huì)加上交互動(dòng)效,提升用戶(hù)體驗(yàn)感。
四、如何區(qū)分按鈕類(lèi)型
在查閱大廠(chǎng)的設(shè)計(jì)規(guī)范時(shí),相信以下按鈕名稱(chēng)大家應(yīng)該都不陌生:主按鈕、懸浮按鈕、圖標(biāo)按鈕、危險(xiǎn)按鈕、下拉按鈕、文字按鈕、CTA 按鈕……很多新手設(shè)計(jì)師會(huì)產(chǎn)生疑惑:
- 為什么要?jiǎng)澐秩绱硕嗟陌粹o類(lèi)型?
- 這些按鈕間的區(qū)別是什么?
- 為什么各家設(shè)計(jì)系統(tǒng)下按鈕分類(lèi)都不相同,我應(yīng)該選擇哪種作為參考?
為了區(qū)分好按鈕類(lèi)型,關(guān)鍵要先明確類(lèi)目劃分的邊界。這里為了方便大家學(xué)習(xí),我從按鈕的強(qiáng)調(diào)程度和使用場(chǎng)景 2 個(gè)維度將按鈕進(jìn)行劃分,基本涵蓋了常見(jiàn)的按鈕類(lèi)型:
1. 依據(jù)強(qiáng)調(diào)程度劃分
在同一個(gè)頁(yè)面中往往會(huì)存在多個(gè)行動(dòng)點(diǎn),因此需要將按鈕依據(jù)強(qiáng)調(diào)程度進(jìn)行劃分,確保用戶(hù)可以依據(jù)設(shè)計(jì)的按鈕層級(jí)快速找到最需要操作的按鈕。常見(jiàn)的按鈕強(qiáng)調(diào)程度可以分為 3 個(gè)層級(jí):
- 高度強(qiáng)調(diào):承載頁(yè)面上最重要和突出的行動(dòng)點(diǎn)。為了保證視覺(jué)層級(jí)最高,通常會(huì)采用大面積主色填充或投影增加空間層級(jí)的方式進(jìn)行區(qū)分,例如主按鈕和 FAB 按鈕(懸浮按鈕)
- 中度強(qiáng)調(diào):承載僅次于最重要行動(dòng)點(diǎn)的常規(guī)操作。為了避免太過(guò)吸引用戶(hù)注意,通常采用中性色進(jìn)行描邊或填充,也被稱(chēng)之為次按鈕。
- 輕度強(qiáng)調(diào):對(duì)頁(yè)面中其他操作補(bǔ)充或可選操作。為了確保視覺(jué)上不凸顯,通常不會(huì)填充背景色,常見(jiàn)于文字按鈕和圖標(biāo)按鈕。在輕度強(qiáng)調(diào)中還可以劃分為弱強(qiáng)調(diào)(內(nèi)容填充主色)和不強(qiáng)調(diào)(內(nèi)容填充中性色),由于文字按鈕填充中性色難以和正常文本進(jìn)行區(qū)分,所以一般內(nèi)容填充中性色只會(huì)用在圖標(biāo)上。
由此我們得到了依據(jù)強(qiáng)調(diào)程度劃分的幾個(gè)常見(jiàn)按鈕類(lèi)型:主按鈕 > 次按鈕 > 文字按鈕 > 圖標(biāo)按鈕。接下來(lái)針對(duì)每種類(lèi)型我們來(lái)展開(kāi)說(shuō)明。(FAB 按鈕在 B 端頁(yè)面中屬于特定場(chǎng)景下使用的按鈕,不具有通用性,故劃分到使用場(chǎng)景中進(jìn)行討論)
① 主按鈕 Primary
主按鈕代表著頁(yè)面中的核心操作項(xiàng),是視覺(jué)權(quán)重最高的按鈕,常用于突出提交、完成、確定等操作。為吸引用戶(hù)注意,常使用品牌色填充背景引導(dǎo)用戶(hù)視覺(jué)焦點(diǎn)。關(guān)于主按鈕的使用需要遵循以下 2 個(gè)原則:
在一個(gè)焦點(diǎn)任務(wù)中最多只使用一個(gè)主按鈕。同時(shí)存在多個(gè)主按鈕會(huì)讓用戶(hù)失去操作焦點(diǎn),造成信息干擾。
主按鈕并非必須使用。如果沒(méi)有必須突出的操作項(xiàng),強(qiáng)行添加主按鈕反而會(huì)打破按鈕間的層級(jí)關(guān)系。
② 次按鈕 Secondary
次按鈕是使用最頻繁的按鈕,當(dāng)在頁(yè)面中不確定選擇哪種按鈕時(shí),使用它往往是最安全的。次按鈕通常使用中性色,其樣式可以分為描邊型和填充型:描邊型使用最為廣泛,是次按鈕首選的樣式,而填充型相對(duì)特殊,在不同設(shè)計(jì)系體下會(huì)根據(jù)業(yè)務(wù)場(chǎng)景選擇是否使用。
關(guān)于填充型次按鈕
相較于描邊型,早年在 B 端產(chǎn)品中很少會(huì)見(jiàn)到使用填充型樣式作為次按鈕使用的,但是可以發(fā)現(xiàn)近幾年國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)如 Arco Design、Marterial 等,開(kāi)始陸續(xù)將填充型次按鈕納入到按鈕組件庫(kù)中。
填充型次按鈕更多的使用場(chǎng)景是在移動(dòng)端上,其視覺(jué)強(qiáng)調(diào)程度弱于主按鈕但又高于描邊型,可以更好的表達(dá)組件的整體性和吸引用戶(hù)注意。
伴隨著硬件設(shè)備的發(fā)展,桌面端和移動(dòng)端的操作邊界開(kāi)始逐漸模糊,各產(chǎn)品開(kāi)始追求全生態(tài)環(huán)境下的統(tǒng)一性。為降低用戶(hù)在設(shè)備切換時(shí)的體驗(yàn)隔閡,一套設(shè)計(jì)系統(tǒng)需要能同時(shí)滿(mǎn)足多端設(shè)備的兼容,而填充型樣式更符合其場(chǎng)景需求。最典型的便是 iPadOS 連接鼠標(biāo)操作時(shí),懸停態(tài)下填充型按鈕明顯比描邊型更容易被識(shí)別。
如何選擇次按鈕的樣式
基于以上考慮,在工作中選擇次按鈕樣式時(shí)可以參考以下建議:
- 如果當(dāng)前項(xiàng)目上已經(jīng)有在使用的開(kāi)源庫(kù),盡量以原有組件庫(kù)為主。除非自身產(chǎn)品有設(shè)備互通的場(chǎng)景或需要同一套設(shè)計(jì)語(yǔ)言兼顧不同端,否則增加多余的次按鈕樣式只會(huì)更加復(fù)雜且影響用戶(hù)的體驗(yàn)一致性。
- 如果是項(xiàng)目是 0~1 搭建組件庫(kù),根據(jù)自身業(yè)務(wù)場(chǎng)景選擇其中一種樣式使用即可。一般桌面端產(chǎn)品使用描邊型,如果產(chǎn)品生態(tài)中有移動(dòng)端,為了保持設(shè)計(jì)語(yǔ)言的統(tǒng)一更建議采用填充型。
- 此外還需考慮前端修改組件庫(kù)樣式時(shí)的開(kāi)發(fā)成本。
③ 文字按鈕 Text
文字按鈕適合承載如取消、還原等無(wú)需特意強(qiáng)調(diào)的操作,通常使用在表格操作欄、表單頁(yè)等場(chǎng)景。為了和普通文本做區(qū)分,提示當(dāng)前內(nèi)容可交互,需要加上鏈接色(一般是藍(lán)色)提醒用戶(hù)。
文字按鈕和鏈接的區(qū)別
文字按鈕和鏈接(link)的默認(rèn)樣式一致,在搭建組件庫(kù)時(shí)很容易發(fā)生混淆。其區(qū)別在于按鈕用于發(fā)起動(dòng)作,觸發(fā)相應(yīng)的業(yè)務(wù)邏輯,而鏈接的作用是導(dǎo)航,作為頁(yè)面跳轉(zhuǎn)或錨點(diǎn)定位的觸點(diǎn)。為了更好地區(qū)分,可以在交互樣式上進(jìn)行處理:
- 文字按鈕:指針懸停時(shí)容器添加背景色。
- 鏈接:指針懸停時(shí)文本添加下劃線(xiàn)。
④ 圖標(biāo)按鈕 Icon
圖標(biāo)按鈕的視覺(jué)層級(jí)最弱,但是由于占據(jù)空間小,常用于同時(shí)展示多個(gè)操作項(xiàng)時(shí)使用。由于缺少文字解釋?zhuān)瑔渭兊膱D標(biāo)可能會(huì)造成用戶(hù)的理解偏差,故建議在指針懸停時(shí)加上 Tooltip 的文字提示進(jìn)行輔助說(shuō)明,對(duì)于特定操作還可加上快捷鍵指引。
2. 依據(jù)使用場(chǎng)景劃分
在依據(jù)強(qiáng)調(diào)程度劃分的基礎(chǔ)上,還有部分按鈕只應(yīng)用于在特定的業(yè)務(wù)場(chǎng)景中,所以各設(shè)計(jì)系統(tǒng)下的按鈕分類(lèi)會(huì)有所不同。以下按鈕的應(yīng)用場(chǎng)景較為頻繁,故被單獨(dú)劃分為一類(lèi)方便交流和管理。
① 功能按鈕 Function
功能按鈕順應(yīng)用戶(hù)心智,采用綠色、橙黃色、紅色代表了成功、警告、危險(xiǎn)三種功能按鈕,用戶(hù)無(wú)需瀏覽按鈕內(nèi)容,直接通過(guò)色彩即可識(shí)別當(dāng)前操作可能導(dǎo)致的后果。
由于功能按鈕的視覺(jué)權(quán)重往往比主按鈕還高,在頁(yè)面中需謹(jǐn)慎使用,避免對(duì)其他頁(yè)面信息造成干擾。
② 虛線(xiàn)按鈕 Dashed
相較于普通的描邊型按鈕,虛線(xiàn)按鈕只承載傳輸文件或新增配置項(xiàng)等操作,為方便用戶(hù)感知,將其描邊設(shè)計(jì)為虛線(xiàn)樣式。
上傳 Upload
由于虛線(xiàn)按鈕只能支持單純的觸發(fā)操作,在很多上傳情景下不能滿(mǎn)足其業(yè)務(wù)需求,故逐漸衍生出單獨(dú)的上傳組件,相較于虛線(xiàn)按鈕:
- 上傳組件支持批量上傳
- 通常有更大的交互區(qū)域且允許支持拖拽上傳,以降低用戶(hù)的操作門(mén)檻
- 搭配展示文件列表,用于對(duì)已上傳文件進(jìn)行預(yù)覽、重新上傳、刪除等操作
③ 幽靈按鈕 Ghost
顧名思義,幽靈按鈕不具備實(shí)體性,一般底色為透明,其按鈕的內(nèi)容反色,通常使用在復(fù)雜或顏色較深的背景中,例如 banner 圖、官網(wǎng)首圖等,避免按鈕突兀地破壞背景的整體性。由于幽靈按鈕使用的場(chǎng)景不固定,因此無(wú)須嚴(yán)格遵循現(xiàn)有規(guī)范,只要滿(mǎn)足其特定場(chǎng)景下的業(yè)務(wù)需求即可。
④ 行為召喚按鈕 CTA
CTA,即"Call to Action"的縮寫(xiě),意思是行為召喚。該詞原本是營(yíng)銷(xiāo)領(lǐng)域的術(shù)語(yǔ),后來(lái)逐漸引用至互聯(lián)網(wǎng)領(lǐng)域中,即目的在于給用戶(hù)一個(gè)明確的反饋:當(dāng)前事件的操作流程已經(jīng)完成或即將發(fā)起一個(gè)新的流程。
CTA 按鈕之所以會(huì)被單獨(dú)歸類(lèi),因?yàn)楫?dāng)按鈕作為吸引用戶(hù)采取點(diǎn)擊行為的載體時(shí),時(shí)常在事件操作的最后一步出現(xiàn),作為產(chǎn)品的關(guān)鍵觸點(diǎn)之一,可以有效提高頁(yè)面或屏幕的轉(zhuǎn)化。也因此當(dāng)頁(yè)面中存在多個(gè)按鈕時(shí),CTA 按鈕的優(yōu)先級(jí)往往是最高的,可以通過(guò)色彩對(duì)比、元素點(diǎn)綴等方式引導(dǎo)用戶(hù)點(diǎn)擊。
⑤ 懸浮按鈕 FAB
懸浮按鈕 FAB,即 Floating Action Buttons 的縮寫(xiě),其特點(diǎn)是會(huì)始終懸浮在頁(yè)面的固定位置,不會(huì)隨著頁(yè)面滾動(dòng)而消失。
在 B 端產(chǎn)品中,F(xiàn)AB 按鈕更多的使用場(chǎng)景是承載全局性的附屬功能,常見(jiàn)操作包括咨詢(xún)、客服、快捷鍵、點(diǎn)贊、收藏、分享、回到頂部等。在設(shè)計(jì) FAB 按鈕時(shí)需注意以下要點(diǎn):
- 不能干擾用戶(hù)在當(dāng)前頁(yè)的正常操作和瀏覽。盡量放置在頁(yè)面的固定位置,當(dāng)操作數(shù)過(guò)多時(shí)可將其他操作下鉆至更多按鈕中。
- 承載操作須是當(dāng)前頁(yè)的全局操作,無(wú)須與其他頁(yè)面元素發(fā)生聯(lián)動(dòng)即可觸發(fā)。如不能承載保存、刪除、清空等操作。
⑥ 下拉菜單 Dropdown
按鈕組不是單獨(dú)的按鈕類(lèi)目,而是按鈕組的集合體,當(dāng)多個(gè)同級(jí)操作項(xiàng)同時(shí)出現(xiàn),但不想占有太多頁(yè)面空間時(shí)使用。通常按鈕組會(huì)將最關(guān)鍵的主操作露出,其他操作收入更多操作項(xiàng)中。
嚴(yán)格來(lái)說(shuō) 下拉菜單 Dropdown 并不屬于按鈕類(lèi)型,但因?yàn)槠涫褂脠?chǎng)景較為頻繁且時(shí)常用來(lái)承載多個(gè)按鈕操作,故在此處作為單獨(dú)類(lèi)型進(jìn)行講解。下拉菜單作為操作命令集合使用時(shí),可以簡(jiǎn)單理解成按鈕組:將多個(gè)操作按鈕收納到同一菜單下。在使用時(shí)有兩點(diǎn)需要額外注意:
和選擇器 Select 的區(qū)別
選擇器 Select 屬于錄入控件,在基本形態(tài)上和 下拉菜單 Dropdown 高度相似,都是通過(guò)下拉浮層來(lái)容納更多信息,在實(shí)際應(yīng)用時(shí)經(jīng)常容易被混淆。要區(qū)分兩種組件,最關(guān)鍵是理解其使用場(chǎng)景:
- 下拉菜單:當(dāng)頁(yè)面上的操作命令過(guò)多時(shí),用此組件可以收納操作元素。核心是菜單導(dǎo)航和命令集合
- 選擇器:用于一組選項(xiàng)中選擇一個(gè)或多個(gè)數(shù)值。核心表單填寫(xiě)和數(shù)據(jù)篩選
樣式與操作項(xiàng)的關(guān)系
當(dāng)下拉菜單用來(lái)承載操作項(xiàng)時(shí),各操作項(xiàng)關(guān)聯(lián)性也會(huì)引起下拉菜單樣式上的區(qū)別,這里用實(shí)際的案例輔助大家理解:
乍一看似乎都是差不多的樣式,在工作中很多設(shè)計(jì)師也是隨機(jī)選擇其中一種進(jìn)行使用,但是作為設(shè)計(jì)師,就是應(yīng)該從細(xì)節(jié)之處見(jiàn)真章,每一處設(shè)計(jì)都應(yīng)有理有據(jù)。
簡(jiǎn)單來(lái)說(shuō),以上三種組合按鈕中的操作關(guān)聯(lián)性是逐漸疏遠(yuǎn)的,這一點(diǎn)從按鈕樣式上也可以看出。
- 新建一:合并同類(lèi)項(xiàng)。突出新建操作本身,更多操作項(xiàng)是新增的數(shù)據(jù)類(lèi)型進(jìn)行區(qū)分,減少重復(fù)文案的出現(xiàn)。
- 新建二:操作延展。強(qiáng)調(diào)的是數(shù)據(jù)導(dǎo)入的形式,提供更多操作渠道供用戶(hù)選擇。
- 新建三:信息收納。各操作項(xiàng)之間并沒(méi)有關(guān)聯(lián)性,只是緩解空間壓力或突出使用最頻繁的操作。
五、按鈕的交互狀態(tài)
在了解了以上按鈕類(lèi)型,我們來(lái)看看按鈕的交互狀態(tài)。不管哪種按鈕類(lèi)型都會(huì)存在相應(yīng)的交互狀態(tài),設(shè)計(jì)師在交付設(shè)計(jì)稿時(shí)需要將不同狀態(tài)下的按鈕樣式進(jìn)行標(biāo)注,方便前端開(kāi)發(fā)。
在剛開(kāi)始接觸按鈕時(shí)也曾被一堆狀態(tài)給亂花了眼,光是理解不同狀態(tài)的區(qū)別已經(jīng)頭大。其實(shí)回頭來(lái)看,開(kāi)始只要記住 4 種最關(guān)鍵的按鈕狀態(tài)便可滿(mǎn)足大部分的使用場(chǎng)景,即按鈕的正常態(tài)、懸停態(tài)、點(diǎn)擊態(tài)和禁用態(tài)。
在日常工作中,沒(méi)有設(shè)置聚焦態(tài)和加載態(tài)并不會(huì)影響用戶(hù)的正常使用,但是加上后可提升用戶(hù)的產(chǎn)品使用體驗(yàn),大家可以根據(jù)開(kāi)發(fā)成本和實(shí)際的業(yè)務(wù)情況考慮是否加上。
1. 正常 Normal/Default
按鈕的初始狀態(tài),即默認(rèn)情況下的基礎(chǔ)樣式,此處不多做介紹。
2. 懸停 Hover
當(dāng)鼠標(biāo)指針移入按鈕時(shí)的狀態(tài)。為了暗示用戶(hù)鼠標(biāo)指針已進(jìn)入按鈕的可交互區(qū)域,按鈕相較于正常狀態(tài)在背景色彩等樣式上會(huì)有明顯的區(qū)別。懸停態(tài)通常還會(huì)配合鼠標(biāo)指針變化輔助用戶(hù)理解,在前端 CSS 樣式表中常用 cursor:pointer,指針變化為伸出食指的手。
由于懸停態(tài)是由鼠標(biāo)指針移動(dòng)引起,故只有設(shè)計(jì)桌面端產(chǎn)品時(shí)需要考慮到,而在移動(dòng)設(shè)備上通過(guò)手指操作故按鈕不存在懸停的狀態(tài)。(在 iPadOS 更新至 13.4 版本后開(kāi)始支持連接鍵鼠操作,但是在日常工作中很少會(huì)出現(xiàn),此處不予以討論)
3. 激活/點(diǎn)擊 Active/Press
鼠標(biāo)點(diǎn)擊即按下按鈕時(shí)的狀態(tài)。激活態(tài)是在懸停態(tài)基礎(chǔ)上發(fā)生變化,鼠標(biāo)指針樣式和懸停態(tài)保持一致,按鈕背景色發(fā)生變化,提示用戶(hù)已觸發(fā)點(diǎn)擊操作。
4. 禁用 Disabled
按鈕無(wú)法操作被鎖定時(shí)的狀態(tài)。該狀態(tài)是為避免用戶(hù)誤操作而設(shè)立,如在登錄頁(yè)未完成信息填寫(xiě)時(shí)將提交按鈕禁用,提示用戶(hù)無(wú)法點(diǎn)擊,只有填寫(xiě)完必填字段后才可以點(diǎn)擊提交。在鼠標(biāo)懸停時(shí)指針變化為禁用狀態(tài),在前端 CSS 樣式表中常用 cursor: not-allowed,通常會(huì)配合 tooltip 文字解釋說(shuō)明行動(dòng)點(diǎn)不可用的原因,避免用戶(hù)疑惑。
值得一提的是,禁用按鈕并非只有置灰一種樣式,只降低色彩飽和度和明度也是禁用按鈕的表現(xiàn)手法之一,且相較于置灰更方便用戶(hù)識(shí)別主次按鈕。
以上是針對(duì)不同按鈕狀態(tài)的說(shuō)明,這里并沒(méi)有針對(duì)不同狀態(tài)的樣式進(jìn)行詳細(xì)說(shuō)明,因?yàn)椴煌脑O(shè)計(jì)體系下可能會(huì)采用不同狀態(tài)樣式進(jìn)行展示。為方便對(duì)比,這里將常見(jiàn)組件庫(kù)中的按鈕狀態(tài)進(jìn)行了整理:
可以發(fā)現(xiàn),除了 TDesign 中描邊按鈕激活態(tài)下增加了中性色填充外,基本按鈕狀態(tài)都是保持著一致的梯度變化。這里以正常態(tài)的按鈕樣式為基準(zhǔn),將懸停和激活狀態(tài)下的色彩變化進(jìn)行整理:
總結(jié)來(lái)看,在不同色彩的按鈕上按鈕狀態(tài)會(huì)按照不同梯度分布:
- 主色(品牌色)按鈕色彩梯度從淺到深:激活 〉正常 〉懸停
- 中性色按鈕色彩梯度從淺到深:激活 〉懸停 〉正常
之所以出現(xiàn)這種情況,主要是因?yàn)樵诖罱óa(chǎn)品色彩體系時(shí),品牌色一般會(huì)采用色板中間色作為主色(通常是第六個(gè)顏色),故不管往淺往深都有更多靈活調(diào)整的空間。而背景使用的中性色為了避免干擾視覺(jué)層級(jí),通常選擇色彩較淺的中性色,因此沒(méi)有再往下延伸色彩梯度的空間。
以上介紹的四種狀態(tài)建議采用色彩組件庫(kù)中色卡進(jìn)行配色,上圖標(biāo)注了不同按鈕狀態(tài)的配色選擇,下面是 AntD 和 ArcoD 的色板生成工具地址(關(guān)于產(chǎn)品取色未來(lái)會(huì)專(zhuān)門(mén)出一期文章進(jìn)行講解)。
ArcoDesign Palette 色彩工具: https://arco.design/palette/list
Ant Design 色板生成工具:
https://ant.design/docs/spec/colors-cn#色板生成工具
5. 聚焦 Focus
該狀態(tài)用于指示電腦光標(biāo)的位置。在有些場(chǎng)景下不操控鼠標(biāo),只通過(guò)鍵盤(pán)方向或 Tab 切換選擇頁(yè)面元素進(jìn)行操作,反而是更高效的操作方式。常見(jiàn)的聚焦態(tài)按鈕樣式為增加描邊,有的設(shè)計(jì)系統(tǒng)下會(huì)采用和懸停態(tài)一樣的樣式。鍵盤(pán)操控快捷鍵推薦:
- 「Tab」前進(jìn)
- 「Shift + Tab」后移
- 「Enter」激活
6. 加載 Loading
表明用戶(hù)操作后系統(tǒng)正在處理的狀態(tài)。由于服務(wù)器響應(yīng)或網(wǎng)絡(luò)延遲等問(wèn)題,有時(shí)候用戶(hù)操作完需要間隔一段時(shí)間才能響應(yīng),加載態(tài)可緩解用戶(hù)的焦慮情緒,避免用戶(hù)由于未收到反饋而反復(fù)操作的情況。
六、按鈕設(shè)計(jì)需考慮的因素
接下來(lái)便到了本文的最關(guān)鍵部分,也是按鈕設(shè)計(jì)中出現(xiàn)最頻繁和令人頭痛的問(wèn)題:我的按鈕究竟應(yīng)該放在哪里?
在此之前先要理解按鈕設(shè)計(jì)的目標(biāo)是引導(dǎo)用戶(hù)采取我們希望用戶(hù)采取的行動(dòng)。這就需要盡量幫助用戶(hù)快速找到需要操作的按鈕并了解執(zhí)行該操作的結(jié)果,同時(shí)盡可能避免誤操作?;谝陨夏繕?biāo),我們從用戶(hù)實(shí)際操作路徑的視角來(lái)梳理按鈕設(shè)計(jì)時(shí)應(yīng)考慮的問(wèn)題:
- 按鈕區(qū)在頁(yè)面中的什么位置——空間位置
- 有多個(gè)按鈕時(shí)采用怎樣的閱讀順序更合適——排列順序
- 按鈕采用怎樣的樣式更合適——視覺(jué)樣式
1. 按鈕區(qū)的空間位置
當(dāng)用戶(hù)進(jìn)入頁(yè)面時(shí),除了瀏覽當(dāng)前頁(yè)的信息內(nèi)容還需要尋找接下來(lái)可執(zhí)行操作的可交互區(qū)域,即按鈕區(qū)。除了單純通過(guò)視覺(jué)差異區(qū)分按鈕和頁(yè)面其他元素外,還需考慮到用戶(hù)在信息瀏覽過(guò)程中的視覺(jué)動(dòng)線(xiàn)。結(jié)合古騰堡法則和格式塔原理,給出以下設(shè)計(jì)建議:
① 放置在用戶(hù)的瀏覽路徑中
在沒(méi)有其他視覺(jué)效果引導(dǎo)時(shí),F(xiàn) 型和 Z 型網(wǎng)頁(yè)瀏覽模式可以作為用戶(hù)視覺(jué)動(dòng)線(xiàn)的基礎(chǔ)指導(dǎo),關(guān)于以上 2 種瀏覽模式網(wǎng)上有太多相關(guān)介紹,此處就不再贅述。
② 盡可能靠近其所控制或聯(lián)動(dòng)的對(duì)象
將關(guān)聯(lián)性強(qiáng)的信息放在一起,可以降低閱讀成本,提高用戶(hù)的感知效率。
2. 多按鈕的排列順序
① 保持用戶(hù)的操作慣性
這里先討論一下開(kāi)頭提到的問(wèn)題:主操作項(xiàng)放在左邊合適還是右邊合適?我們先來(lái)看看一些案例:
可以發(fā)現(xiàn),即使是業(yè)內(nèi)頂尖的互聯(lián)網(wǎng)公司也并沒(méi)有遵從同一套確定方案。對(duì)于新用戶(hù)而言,確定按鈕的位置對(duì)操作時(shí)間和錯(cuò)誤率影響并沒(méi)有太大差別。并由此得出更關(guān)鍵的結(jié)論:不要輕易改變當(dāng)前產(chǎn)品中用戶(hù)已經(jīng)習(xí)慣的按鈕位置。
在此基礎(chǔ)上對(duì)于操作項(xiàng)不固定的頁(yè)面,給大家整理了以下建議:
② 同類(lèi)操作項(xiàng)按組分類(lèi)
最典型的案例便是編輯器類(lèi)產(chǎn)品的操作項(xiàng),將同類(lèi)操作區(qū)整理分組,方便用戶(hù)查找。
③ 閱讀順序符合操作預(yù)期
此處的閱讀順序并非特指從左往右、從上往下,而是依據(jù)用戶(hù)當(dāng)前視覺(jué)動(dòng)線(xiàn),優(yōu)先滿(mǎn)足用戶(hù)預(yù)期或操作可能性最大的按鈕需要最先被用戶(hù)發(fā)現(xiàn)。
考慮到人體工程學(xué)操作習(xí)慣和操作后果的影響,還需注意一些特定的場(chǎng)景:
④ 流程操作遵循方向認(rèn)知習(xí)慣
流程屬性的按鈕如上一步、返回、后退等操作用戶(hù)習(xí)慣在左邊,而下一步、前進(jìn)、更多等操作在右邊。
⑤ 破壞性操作提升操作門(mén)檻
如刪除或清空按鈕,盡可能放置在遠(yuǎn)離主按鈕的位置,甚至可以下鉆至更多按鈕中,避免誤觸。
3. 按鈕的視覺(jué)樣式
在文章開(kāi)始基于強(qiáng)調(diào)程度劃分按鈕類(lèi)型時(shí),按鈕的視覺(jué)樣式便是基于其強(qiáng)調(diào)程度劃分的,頁(yè)面中越是需要強(qiáng)調(diào)的按鈕其視覺(jué)權(quán)重越高。前文中只劃分了主按鈕、次按鈕、文字按鈕、圖標(biāo)按鈕這 4 種基本類(lèi)型,此外還可以通過(guò)文本粗細(xì)、內(nèi)容量等方式進(jìn)一步細(xì)分。
七、關(guān)于按鈕的其他問(wèn)題
1. 按鈕的尺寸
按鈕的尺寸優(yōu)先體現(xiàn)在其高度上,而寬度一般根據(jù)內(nèi)容區(qū)大小自動(dòng)適配。通常會(huì)將按鈕分為大、中、小這三種規(guī)格,以滿(mǎn)足不同場(chǎng)景下的使用需求。
高度
- 大尺寸:通常使用在企業(yè)官網(wǎng)、賬號(hào)登錄、導(dǎo)航菜單等場(chǎng)景中。一般高度設(shè)置為 40~64px。
- 中尺寸:按鈕的默認(rèn)尺寸,適用在 B 端頁(yè)面的大部分場(chǎng)景。一般高度設(shè)置為 28~40px。
- 小尺寸:常用于氣泡彈窗等小型控件中。一般高度設(shè)置為 12~28px。
寬度
關(guān)于按鈕寬度需要注意的是,由于按鈕內(nèi)容的不固定,同規(guī)格按鈕可能因?yàn)閮?nèi)容量差異引起視覺(jué)上的層級(jí)誤判。故為了減少按鈕錯(cuò)綜不齊的情況,建議設(shè)置按鈕最小寬度的界限,一般為 4 個(gè)文字+左右內(nèi)邊距。
2. 按鈕的文案
相較于其他方面,似乎大家對(duì)產(chǎn)品文案總是保持著"點(diǎn)到為止"的態(tài)度,但是并不意味著文案不重要,錯(cuò)誤的文案會(huì)讓用戶(hù)產(chǎn)生疑惑,嚴(yán)重影響用戶(hù)體驗(yàn)。相反好的按鈕文字甚至可以做到即使不去閱讀上下文,單憑按鈕文案即可做出正確的判斷。在一些關(guān)鍵節(jié)點(diǎn)的 CTA 按鈕,文案的優(yōu)化可以帶來(lái)轉(zhuǎn)化率大幅度的提升。因此關(guān)注文案細(xì)節(jié)也是設(shè)計(jì)師平時(shí)需要考慮的問(wèn)題。優(yōu)秀的按鈕文案包含以下幾個(gè)要點(diǎn):
① 內(nèi)容簡(jiǎn)潔,刪除贅詞
按鈕區(qū)域寸土寸金,每一個(gè)字都要有其存在的意義,如果刪除也不影響信息表達(dá)即沒(méi)必要存在。
② 表達(dá)清晰,避免產(chǎn)生歧義
文字表達(dá)清晰,避免使用用戶(hù)難以理解的專(zhuān)業(yè)術(shù)語(yǔ)。
③ 規(guī)范用詞,不要出現(xiàn)錯(cuò)別字
常見(jiàn)的"登陸&登錄"、"收獲&收貨"、"即時(shí)和及時(shí)"都是容易打錯(cuò)的詞。
下方給大家整理了 常見(jiàn)易錯(cuò)的按鈕文案表,建議保存收藏。
④ 一致的語(yǔ)法表達(dá)
如統(tǒng)一采用動(dòng)賓結(jié)構(gòu):修改價(jià)格、提交工單、查看更多等。
⑤ 適當(dāng)?shù)那楦谢磉_(dá)
結(jié)合自身品牌特性,在按鈕中融入適當(dāng)?shù)那楦谢陌?,也是塑造品牌心智的觸點(diǎn)之一。
3. 按鈕的圓角
當(dāng)前市面上主流的互聯(lián)網(wǎng)產(chǎn)品大多都采用了圓角設(shè)計(jì),因?yàn)閳A角矩形相較于直角更具安全感和親和力、在相似內(nèi)容中識(shí)別度更高,且圓角對(duì)信息的聚焦性更強(qiáng)。同樣 B 端設(shè)計(jì)中通常也會(huì)在按鈕中加入圓角,方便用戶(hù)更高效的辨別和獲取信息,但是需要注意的是圓角并非越大越好,過(guò)大的圓角會(huì)導(dǎo)致按鈕操作熱區(qū)的縮窄,更不易被點(diǎn)擊觸發(fā)。如在移動(dòng)端產(chǎn)品上都是采用手指按壓,而桌面端采用鼠標(biāo)指針單擊,相較之下后者對(duì)點(diǎn)擊按鈕的觸發(fā)精度要求更高,也因此全圓角按鈕(也被稱(chēng)為膠囊按鈕)更適合在移動(dòng)端產(chǎn)品上使用。
此外按鈕的圓角設(shè)置還需考慮到產(chǎn)品整體的視覺(jué)一致性,在不同場(chǎng)景下都要保證統(tǒng)一的感官體驗(yàn),如在大尺寸的按鈕上圓角的曲率也應(yīng)設(shè)置更大。
參考鏈接
- https://mp.weixin.qq.com/s/81Xbb2zEHqJS2bABY32ztQ
- https://www.zcool.com.cn/article/ZMTI3MzkzMg==.Html
- https://www.uisdc.com/button-application
- https://www.zcool.com.cn/article/ZMTI2MzUwMA==.html
- https://www.yuque.com/yovar/bq79sy/ufeuex
- https://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/
- https://www.woshipm.com/pd/3104897.html
作者:蝦米
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/19102.html