同時(shí)也方便用戶再次消費(fèi)某個(gè)內(nèi)容時(shí)，減少再次記憶和查找的成本。比如我喜歡做菜，但是年紀(jì)大了記性不好，每次做一道菜我都會(huì)打開我的某音收藏夾里找到視頻教程，這個(gè)老小子的視頻教出來的菜味道真不錯(cuò)。

收藏夾要解決用戶什么問題

兩個(gè)關(guān)鍵詞：1.管理 2.分類

管理，就是我們所說的增刪改查?！霸觥?，我們需要在用戶瀏覽信息時(shí)給該信息提供收藏功能，這里要注意的是收藏信息的顆粒度，什么信息可以收藏，一段話？一篇文章？一個(gè)用戶發(fā)布的完整內(nèi)容？還是一張圖片？產(chǎn)品對(duì)收藏最小單位的定義要明確，因?yàn)闀?huì)影響到對(duì)收藏內(nèi)容的分類。例如微信可收藏的最小單位很多，有鏈接（包含文章）、文件、圖片/視頻、音樂、語音、聊天記錄、筆記、位置，而像餓了么只能關(guān)注店鋪，對(duì)任何菜品、用戶評(píng)論等等都無法進(jìn)行收藏。b站你可以收藏視頻、漫畫、商品，但是不能他人的動(dòng)態(tài)。

刪沒什么好說的，再來說一下改和查。因?yàn)樗麄z會(huì)涉及到收藏的流程。我們知道不同產(chǎn)品的收藏流程是不同的，例如馬蜂窩、閑魚等產(chǎn)品，用戶收藏內(nèi)容后只給出收藏成功的toast/提示欄提示，并告知收藏到了哪里；

而騰訊視頻、抖音、攜程則是當(dāng)用戶進(jìn)行收藏后除了給出成功提示還會(huì)給出收藏列表的入口；

最后，像知乎、豆瓣在點(diǎn)擊收藏后直接給出滑出操作框讓用戶選擇收藏夾或創(chuàng)建收藏夾以及是否要轉(zhuǎn)發(fā)。

3種流程的區(qū)別

前兩種我認(rèn)為區(qū)別并不大，是否要在提示框里給用戶進(jìn)入收藏列表的入口，更多還是取決于產(chǎn)品是否想讓用戶離開這個(gè)場(chǎng)景，還是讓用戶繼續(xù)瀏覽。之前我們提到過閉環(huán)，但是閉環(huán)一般針對(duì)任務(wù)而言，但是收藏嚴(yán)格來說不算是“任務(wù)”，而是用戶的一種“行為”，感知起來區(qū)別還是很大的，因?yàn)槿蝿?wù)是有明確目標(biāo)的，比如給用戶安排一個(gè)任務(wù)，讓他對(duì)某個(gè)商品進(jìn)行分類收藏，那么用戶會(huì)根據(jù)這個(gè)分類收藏的目標(biāo)去進(jìn)行操作，任務(wù)結(jié)束后給用戶相關(guān)的引導(dǎo)和出口。但是在用戶自然的瀏覽場(chǎng)景中，對(duì)內(nèi)容的收藏并沒有具體目標(biāo)，所以要不要給用戶在點(diǎn)擊收藏后引導(dǎo)進(jìn)入收藏列表要具體情況具體分析。

其次是知乎、豆瓣，在用戶點(diǎn)擊收藏后給予是否要?jiǎng)?chuàng)建收藏夾的功能，相比于前兩種，對(duì)信息內(nèi)容的管理，更加明顯了。首先為什么他們和前兩種不同呢，像知乎用戶是有KOL效應(yīng)的，個(gè)人的收藏夾可以公開，他人可以查看他人的收藏夾，有點(diǎn)類似于花瓣的畫板，同時(shí)對(duì)于這類知識(shí)、內(nèi)容類的應(yīng)用，對(duì)于分類的要求和需求更高更多，本身知識(shí)的維度就很多，顆粒度很小，所以在用戶進(jìn)行收藏行為時(shí)主動(dòng)提醒用戶可以創(chuàng)建收藏夾。

那淘寶是怎么做的，它在用戶收藏的時(shí)候也給出一個(gè)菜單，用戶可以選擇收入到某個(gè)收藏夾，也可以默認(rèn)不放入，還可以去創(chuàng)建并放入，這就是更個(gè)性化了。

但是咱們說前兩種沒有給在收藏時(shí)給創(chuàng)建功能的就不個(gè)性化了嗎？也不是，個(gè)性化也要根據(jù)產(chǎn)品定位和用戶需求來的，比如馬蜂窩的一些機(jī)票車票、旅游產(chǎn)品，做一個(gè)收藏夾創(chuàng)建，好像沒必要，因?yàn)榭墒詹氐念愋筒欢?，個(gè)性化標(biāo)簽也不明顯，顯然是沒必要的。騰訊視頻、閑魚顯然也是。那我們?cè)賮砹囊粋€(gè)細(xì)節(jié)。

知乎在點(diǎn)擊收藏某個(gè)回答的時(shí)候，頁(yè)面會(huì)喚起收藏模塊，讓用戶選擇你要收藏到哪里，但這里的體驗(yàn)不是很好，因?yàn)橛脩粝胍詹啬硞€(gè)內(nèi)容必須先選擇收藏夾，如果不選擇則無法收藏成功？

無論你當(dāng)前是否創(chuàng)建了收藏夾，都必須選擇或點(diǎn)擊完成，如果有創(chuàng)建過，那就需要經(jīng)歷：1.點(diǎn)擊收藏圖標(biāo)  2.點(diǎn)擊要收入的收藏夾 3.點(diǎn)擊完成，如果沒有創(chuàng)建過那么默認(rèn)會(huì)創(chuàng)建一個(gè)收藏夾。而淘寶則不是，無論你是否創(chuàng)建收藏夾，只要點(diǎn)擊收藏圖表那就已經(jīng)收藏成功，在這個(gè)前提下，你可以選擇是否要收入到某個(gè)收藏夾還是新創(chuàng)建一個(gè)。

所以知乎、豆瓣的收藏單位大多以回答、帖子為主，這樣的內(nèi)容系統(tǒng)無法幫助生成標(biāo)簽，所以需要用戶自己創(chuàng)建分類，在收藏時(shí)給予創(chuàng)建功能是合理的，但我認(rèn)為知乎這樣的設(shè)計(jì)還是不夠人性化，但是站在業(yè)務(wù)角度看，就是想引導(dǎo)用戶去創(chuàng)建分類，也是能理解的，雖然在體驗(yàn)和效率上并不是最優(yōu)。

創(chuàng)建、分類、搜索都是幫助用戶再次進(jìn)入收藏空間時(shí)能夠更好的查找想要的內(nèi)容。同時(shí)不同產(chǎn)品會(huì)有不同的篩選標(biāo)簽，比如微信閱讀，收藏其實(shí)就是書架，哦，應(yīng)該說，書架就是收藏。篩選維度分為：更新、進(jìn)度、購(gòu)買、分類。所以我們?cè)谠O(shè)計(jì)收藏功能的時(shí)候，要根據(jù)用戶的篩選場(chǎng)景和內(nèi)容來制定合理的篩選維度。

收藏和點(diǎn)贊還有加入購(gòu)物車的區(qū)別

收藏的屬性就是收納、管理和分類，但是和點(diǎn)贊、購(gòu)物車不同，點(diǎn)贊意味著認(rèn)同，具有社交屬性，同時(shí)也為了幫助產(chǎn)品記錄用戶個(gè)偏好用作研究，而收藏則是用戶想對(duì)該內(nèi)容進(jìn)行收集，比如我正在準(zhǔn)備一個(gè)辯論賽，我抽了一個(gè)反方觀點(diǎn)，雖然我本身并不喜歡這個(gè)觀點(diǎn)，但是為了準(zhǔn)備辯論的素材和題目我會(huì)對(duì)這個(gè)內(nèi)容進(jìn)行收藏，但不會(huì)點(diǎn)贊，雖然收藏大部分時(shí)候也有對(duì)內(nèi)容的認(rèn)可，但不完全是。所以收藏更多的是用戶個(gè)人對(duì)信息的單方面管理，點(diǎn)贊則一個(gè)即時(shí)互動(dòng)。

收藏和購(gòu)物車也是一樣的，購(gòu)物車承載的是更多消費(fèi)、商品營(yíng)銷的表達(dá)、算價(jià)以及湊單活動(dòng)，購(gòu)物車和直接消費(fèi)強(qiáng)關(guān)聯(lián)，而收藏夾多關(guān)注與對(duì)商品的存儲(chǔ)管理、搜索查找，雖然也有一部分需求重合，但用處、和場(chǎng)景還是有很大區(qū)別的。

最后，總結(jié)一下，設(shè)計(jì)收藏夾時(shí)，我們首先得根據(jù)產(chǎn)品定位和用戶需求以及內(nèi)容的維度來選擇好收藏夾的顆粒度或最小單位，其次，根據(jù)業(yè)務(wù)或用戶需求設(shè)定好收藏夾的收藏邏輯和流程，最后，做好用戶對(duì)收藏內(nèi)容的查找以及分類篩選的體驗(yàn)。

可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們?cè)O(shè)計(jì)師在設(shè)計(jì)圖表的過程中，如果沒有系統(tǒng)的可視化知識(shí)，會(huì)出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表，如何在好看的同時(shí)提升信息傳達(dá)效率，看完這篇文章希望對(duì)你的設(shè)計(jì)過程有所幫助。

// 為什么要數(shù)據(jù)可視化

數(shù)據(jù)可視化就是用圖表來表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡(jiǎn)潔明了的獲取更多的信息，是我們可視化的最終目的。

舉個(gè)例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律

關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個(gè)步驟：選擇適合的圖表，強(qiáng)化視覺層次，圖表響應(yīng)式適配。

一、選擇適合的圖表

數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開始作圖，往往會(huì)遇到一個(gè)困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過分析數(shù)據(jù)關(guān)系來選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。

1. 分析數(shù)據(jù)關(guān)系

根據(jù)數(shù)據(jù)分析的方式來看，每一種圖表都對(duì)應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見的還有流轉(zhuǎn)關(guān)系。

構(gòu)成關(guān)系

構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來為總數(shù)。如果只是想對(duì)比個(gè)別組成部分的大小，也可以使用比較關(guān)系的圖表。

常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級(jí)結(jié)構(gòu)，還會(huì)用矩形樹圖或旭日?qǐng)D等特殊結(jié)構(gòu)圖表。

關(guān)鍵詞：“占比、比例、百分比”

比較關(guān)系

比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過對(duì)兩個(gè)或兩個(gè)以上的指標(biāo)分析，可以直觀的看到變化和差距。對(duì)比分析包括趨勢(shì)對(duì)比和分類對(duì)比兩種形式，趨勢(shì)對(duì)比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化，分類對(duì)比用于比較數(shù)據(jù)規(guī)模。

常用圖表：趨勢(shì)對(duì)比常用圖表有折線圖、散點(diǎn)圖等；分類對(duì)比常用條形圖、柱狀圖、氣泡圖等。

關(guān)鍵詞：“增減、升降、漲跌、波動(dòng)”

分布關(guān)系

利用空間分區(qū)來展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。

常用圖表：散點(diǎn)圖、熱力圖、雷達(dá)圖等

關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等

關(guān)聯(lián)與流轉(zhuǎn)

流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動(dòng)態(tài)的體現(xiàn)相關(guān)路徑下對(duì)象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動(dòng)量或流動(dòng)強(qiáng)度。

常用圖表：關(guān)系圖、?；鶊D、漏斗圖、進(jìn)度圖等

關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”

2. 分析數(shù)據(jù)特征

按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見數(shù)據(jù)特征有：變量特征、維度特征、層級(jí)特征、流程特征。

變量特征

分辨一個(gè)指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會(huì)統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢(shì)，離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。

• 連續(xù)型數(shù)據(jù)：指在一定區(qū)間內(nèi)可以任意取值的數(shù)據(jù)叫連續(xù)數(shù)據(jù)，其數(shù)值是連續(xù)不斷的。如身高、體重等帶有時(shí)間因素變量的數(shù)據(jù)等，通常用折線圖體現(xiàn)變化趨勢(shì)。
• 離散型數(shù)據(jù)：指其數(shù)值只能用自然數(shù)或整數(shù)單位計(jì)算的數(shù)據(jù)。如當(dāng)天銷量、進(jìn)店人數(shù)等表示分類類型的數(shù)據(jù)，用柱圖表現(xiàn)更加體現(xiàn)變量的特征。

維度特征

多維度分析需要將多個(gè)變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對(duì)比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類

• 根據(jù)分析視角選擇圖表：對(duì)于多維度變量的數(shù)據(jù)我們需要明確分析的視角，去找準(zhǔn)對(duì)應(yīng)的數(shù)據(jù)映射。如案例中多個(gè)班級(jí)的科目成績(jī)的這組數(shù)據(jù)，如需要全局視角查看個(gè)班的綜合素質(zhì)，推薦使用雷達(dá)圖；對(duì)比單科成績(jī)的變化分布，則推薦使用堆積圖。

層級(jí)特征

多層級(jí)數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體，又稱樹形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：

• 矩形樹圖：突出子層級(jí)占比大小。最初是用來顯示計(jì)算機(jī)硬盤驅(qū)動(dòng)器上文件的結(jié)構(gòu)和大小，它以面積的形式突出展現(xiàn)各個(gè)子層級(jí)節(jié)點(diǎn)的占比，可幫助用戶看到數(shù)據(jù)的層次結(jié)構(gòu)以及各層級(jí)之間的關(guān)系。

例如：上圖顯示了市場(chǎng)銷售額的來源結(jié)構(gòu)。長(zhǎng)方形的大小取決于各國(guó)家的平均銷售額，通過色調(diào)來區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對(duì)比一般結(jié)構(gòu)樹圖表，它的優(yōu)勢(shì)在于可以有效利用空間。

• 旭日?qǐng)D：突出細(xì)分層級(jí)關(guān)系。由多個(gè)圓環(huán)圖嵌套而成，也稱為徑向樹圖，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級(jí)關(guān)系。常用于細(xì)分分析方法，將事物從大到小進(jìn)行拆解。每個(gè)級(jí)別的數(shù)據(jù)通過1個(gè)圓環(huán)表示，離原點(diǎn)越近代表圓環(huán)級(jí)別越高。 旭日?qǐng)D在顯示一個(gè)環(huán)如何被劃分為多個(gè)層級(jí)時(shí)最有效，而矩形樹圖適合比較相對(duì)大小。

流程特征

流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和，同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達(dá)路徑中流量的變化，不同的是?；鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達(dá)目的選用。

二、強(qiáng)化視覺層次

選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。

1. 強(qiáng)化數(shù)據(jù)特性

使用圖表正確的表達(dá)信息，需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差

• 趨勢(shì)易感知：折線圖數(shù)值如過于平均導(dǎo)致趨勢(shì)平緩，有時(shí)候無法體現(xiàn)偏差；在強(qiáng)調(diào)數(shù)據(jù)趨勢(shì)的場(chǎng)景下，推薦用動(dòng)態(tài)取值范圍讓波動(dòng)保持在一定范圍內(nèi)，放大波動(dòng)占比更突出趨勢(shì)。

• 展示更準(zhǔn)確：柱狀圖依靠柱體面積體現(xiàn)最終數(shù)值，使用動(dòng)態(tài)范圍截?cái)鄬?huì)導(dǎo)致數(shù)據(jù)解讀不完整；始終將 y 軸從 0 開始，才能更準(zhǔn)確的反映柱圖中的值。

2. 色彩視覺傳達(dá)

除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會(huì)影響我們對(duì)數(shù)據(jù)的感知，錯(cuò)誤的取色會(huì)讓信息讀取產(chǎn)生誤解。我們可以通過不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。

我們?cè)谥暗奈恼吕镉薪榻B過圖表的取色模型，通過調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：

• 定性型-分類色板：用于區(qū)分不同的類型，又稱為無序色板。適合區(qū)分沒有內(nèi)在順序的類別
• 定量分歧型-發(fā)散色板：通過兩邊互補(bǔ)色來體現(xiàn)，具有明亮的中間值，然后以不同的色調(diào)在刻度的兩端變暗。通常用于可視化負(fù)值和正值
• 定量順序型-順序色板：從亮到暗或相反的漸變。適合可視化從低到高的數(shù)字。

那么我們要怎么樣去使用這些色板呢？下面幾個(gè)案例將帶你了解其中的差異。

定性型：使用色調(diào)來進(jìn)行分類

數(shù)據(jù)內(nèi)在沒有順序差別時(shí)，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國(guó)家、行業(yè)等類型。如果希望圖表看起來更加專業(yè)，以下有幾項(xiàng)分類色板的小建議：

• 選取盡量少的色調(diào)：取色時(shí)無需使用整個(gè)色環(huán)，使用鄰近色或互補(bǔ)色的取色方式顯得更加專業(yè)。

• 色板適度明暗交替：一些視障人士無法區(qū)分色相，主要靠顏色的明暗差異來識(shí)別，通過飽和度和暗度的調(diào)整，創(chuàng)造明暗交替的色板。

定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序

如果在同一個(gè)分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來突出他們內(nèi)在的順序，使圖表更加易讀。

• 順序色板-選擇合適的插值：根據(jù)數(shù)據(jù)的分布情況選擇不同的的插值斷點(diǎn)，突出數(shù)據(jù)的差異。如以下案例中，根據(jù)統(tǒng)計(jì)學(xué)概念設(shè)定不同的取值區(qū)間，左側(cè)示例使用的是平均線性差值，反映的是數(shù)據(jù)的集中趨勢(shì)；右側(cè)示例使用的是中位數(shù)插值，能更好的體現(xiàn)數(shù)據(jù)分布的形態(tài)。

• 發(fā)散色板-關(guān)注對(duì)比色的識(shí)別性：盡量避免紅綠配色，如需使用綠色，偏黃或偏藍(lán)的綠色更易分辨，對(duì)視障人士也更加友好。

三、圖表中的響應(yīng)式設(shè)計(jì)

B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁(yè)或移動(dòng)端上動(dòng)態(tài)顯示。不同于平面展示或匯報(bào)，在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動(dòng)態(tài)顯示帶來的交互特性也讓數(shù)據(jù)展示有了更多的可能性。

1. 布局框架適配

在網(wǎng)頁(yè)端顯示時(shí)，有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。

如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。

2. 圖表元素適配

要適配移動(dòng)端，網(wǎng)頁(yè)端橫向延展的顯示方式需要適應(yīng)移動(dòng)端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。

• 信息浮層：在圖表中，信息卡元素是傳達(dá)信息內(nèi)容的重要組件，在網(wǎng)頁(yè)端中懸浮展示，通常會(huì)占據(jù)很大空間；圖表適配移動(dòng)端后，信息浮層改動(dòng)到圖表上方常駐顯示，并跟隨手指的滑動(dòng)變化響應(yīng)數(shù)值，完整展示信息的同時(shí)也避免了頁(yè)面抖動(dòng)。

• 坐標(biāo)軸標(biāo)簽：過長(zhǎng)的坐標(biāo)標(biāo)簽在適配過程中會(huì)產(chǎn)生重疊，而省略也會(huì)造成信息展示的不完整。我們需要針對(duì)不同的坐標(biāo)軸類型給出響應(yīng)的規(guī)范。如文本類軸標(biāo)簽我們可以采用省略、換行、旋轉(zhuǎn)等方式適配，避免信息的缺失。針對(duì)有連續(xù)型的數(shù)據(jù)類坐標(biāo)軸我們可以使用抽樣、轉(zhuǎn)化單位等方式適配，精簡(jiǎn)空間避免堆疊。

3. 極值適配

因B端平臺(tái)的特性，我們無法預(yù)知客戶傳入的數(shù)據(jù)量，可能會(huì)遇到因數(shù)據(jù)量過多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問題。這種情況下，提前考慮數(shù)據(jù)極限場(chǎng)景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時(shí)信息展示更靈活。

• 縮放和平移：在數(shù)據(jù)范圍過多時(shí)增加取值范圍的縮略軸組件，通過限制展示范圍讓數(shù)據(jù)量顯示可控。

• 互動(dòng)切換視圖：如果折線的類別過多且無法省略的，建議分組查看。默認(rèn)狀態(tài)僅當(dāng)前組折線高亮，其他數(shù)據(jù)以淺色顯示，通過切換的方式查看其他組別的信息。

• 懸浮鼠標(biāo)高亮：在分類過多不好分辨時(shí)，可使用懸浮高亮的交互方式突出相關(guān)聯(lián)的數(shù)據(jù)組。

還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動(dòng)圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。

// 結(jié)語

數(shù)據(jù)可視化在B端設(shè)計(jì)場(chǎng)景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵

提到按鈕，大部分人印象就是文字加個(gè)背景框，并沒有太多需要設(shè)計(jì)的空間。但是作為B端設(shè)計(jì)師，相信很多同學(xué)在工作過程中都產(chǎn)生過以下問題：

按鈕作為最基本的交互單位之一，幾乎在每個(gè)頁(yè)面中我們都會(huì)使用到。由于不同行業(yè)下業(yè)務(wù)場(chǎng)景的復(fù)雜性，很多時(shí)候很難直接參照其他產(chǎn)品的按鈕進(jìn)行復(fù)用，也無法用一套布置方案復(fù)用所有場(chǎng)景，所以作為B端設(shè)計(jì)師需要對(duì)按鈕控件具備足夠的認(rèn)知，理解其背后的使用邏輯和規(guī)范，才能滿足多層級(jí)跨場(chǎng)景的設(shè)計(jì)需要。

本文結(jié)合自身的工作經(jīng)驗(yàn)，對(duì)按鈕進(jìn)行了系統(tǒng)性的整理和總結(jié)，希望對(duì)各位B端設(shè)計(jì)師同學(xué)的日常工作和學(xué)習(xí)有所幫助。

01 按鈕的發(fā)展歷史

在詳細(xì)介紹按鈕前，我們先簡(jiǎn)單了解下按鈕的發(fā)展歷史。按鈕的概念起初是源自現(xiàn)實(shí)物理世界的實(shí)體按鈕，在日常生活中如電源開關(guān)、計(jì)算器、電話等都是通過實(shí)體按鈕進(jìn)行控制，由于其簡(jiǎn)單直觀易操作的特性，即使如今各種電子產(chǎn)品都逐漸發(fā)展為觸控屏操作，實(shí)體按鈕依舊被保留了下來。

當(dāng)數(shù)字屏誕生后，人機(jī)交互設(shè)計(jì)開始走向數(shù)字屏幕后，為方便用戶理解，在很長(zhǎng)一段時(shí)間內(nèi)設(shè)計(jì)師都是采用擬物風(fēng)按鈕來暗示用戶可執(zhí)行的操作。伴隨著客戶端設(shè)備升級(jí)和開發(fā)方式的變更，至2013年 Apple 在iOS7上第一次采用了扁平化設(shè)計(jì)，至此按鈕樣式開始往扁平化發(fā)展。隨后歷經(jīng)了多年發(fā)展，按鈕的樣式開始層出不窮，但是無論樣式如何變更，其背后的體驗(yàn)交互邏輯依舊是物理世界按鈕的映射。

02 什么是B端中的按鈕

2.1 按鈕的定義

在B端設(shè)計(jì)中什么樣的組件可以定義為按鈕？我們先來看看國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)中對(duì)按鈕組件的定義：

總結(jié)來說，按鈕可以理解為用于承載即時(shí)操作和命令的組件。由于B端產(chǎn)品業(yè)務(wù)邏輯復(fù)雜、頁(yè)面流程多，相較于傳統(tǒng)意義上的按鈕，B端中的按鈕被設(shè)定為可復(fù)用、規(guī)范化的組件，通過對(duì)組件元素進(jìn)行拆解、歸納、重組，將其劃分為特定類型的組件方便管理和使用。

按鈕相較于輸入框、選擇器、單選框等控件無法進(jìn)行數(shù)據(jù)輸入，相較于標(biāo)簽、文字提示等控件也無法進(jìn)行信息瀏覽，其關(guān)鍵在于【即時(shí)性】和【承載操作】，既可單獨(dú)完成操作，也可與其他控件聯(lián)動(dòng)，作為觸發(fā)操作的行動(dòng)點(diǎn)。

2.2 容易與按鈕混淆的控件

1）標(biāo)簽 Tag

雖然同樣翻譯為標(biāo)簽，但是此處指的是 Tag 標(biāo)簽，而非 Tabs 標(biāo)簽頁(yè)。標(biāo)簽在樣式上與按鈕幾乎相同，且同樣可以添加圖標(biāo)標(biāo)識(shí)和觸發(fā)操作。兩者的區(qū)別在于，標(biāo)簽側(cè)重于信息的選擇、篩選和分類，而按鈕則只是單純用于觸發(fā)即時(shí)操作，因此很多時(shí)候標(biāo)簽會(huì)設(shè)置不同顏色樣式以便信息區(qū)分。

2）開關(guān) Switch

和其他錄入控件相比，開關(guān)Switch最顯著的特點(diǎn)便是和按鈕一樣觸發(fā)后立即生效，因此很多初級(jí)設(shè)計(jì)師很容易將其與按鈕歸為一類。

其區(qū)別是，開關(guān)承載的是兩種互斥狀態(tài)的切換，如打開/關(guān)閉、顯示/隱藏、啟用/禁用等，此外由于在視覺上符合用戶對(duì)現(xiàn)實(shí)世界中開關(guān)的認(rèn)知，所以可以直接展示當(dāng)前項(xiàng)的狀態(tài)。

3）單選/多選框 Radio/Checkbox

單選框和多選框一般用于狀態(tài)標(biāo)記，但是無法直接觸發(fā)操作，所以通常會(huì)和按鈕配合進(jìn)行使用。最常見的搭配場(chǎng)景便是在登錄頁(yè)，用戶勾選【記住密碼】或【自動(dòng)登錄】后標(biāo)記其狀態(tài)，再點(diǎn)擊按鈕進(jìn)行登錄。

03 按鈕的原子拆解

相較于其他組件，按鈕的元素構(gòu)成較為簡(jiǎn)單，分為內(nèi)容層和容器層，通過將不同元素進(jìn)行搭配組合，即可設(shè)計(jì)出不同類型的按鈕類型和按鈕狀態(tài)。

內(nèi)容層：圖標(biāo)和文字自由組合。內(nèi)容層作為操作引導(dǎo)的核心必須存在。

容器層：控制顏色、圓角、描邊、投影等樣式，有些設(shè)計(jì)系統(tǒng)下還會(huì)加上交互動(dòng)效，提升用戶體驗(yàn)感。

04 如何區(qū)分按鈕類型

在查閱大廠的設(shè)計(jì)規(guī)范時(shí)，相信以下按鈕名稱大家應(yīng)該都不陌生：主按鈕、懸浮按鈕、圖標(biāo)按鈕、危險(xiǎn)按鈕、下拉按鈕、文字按鈕、CTA按鈕……很多新手設(shè)計(jì)師會(huì)產(chǎn)生疑惑：

為什么要?jiǎng)澐秩绱硕嗟陌粹o類型？

這些按鈕間的區(qū)別是什么？

為什么各家設(shè)計(jì)系統(tǒng)下按鈕分類都不相同，我應(yīng)該選擇哪種作為參考？

為了區(qū)分好按鈕類型，關(guān)鍵要先明確類目劃分的邊界。這里為了方便大家學(xué)習(xí)，我從按鈕的強(qiáng)調(diào)程度和使用場(chǎng)景2個(gè)緯度將按鈕進(jìn)行劃分，基本涵蓋了常見的按鈕類型：

4.1 依據(jù)強(qiáng)調(diào)程度劃分

在同一個(gè)頁(yè)面中往往會(huì)存在多個(gè)行動(dòng)點(diǎn)，因此需要將按鈕依據(jù)強(qiáng)調(diào)程度進(jìn)行劃分，確保用戶可以依據(jù)設(shè)計(jì)的按鈕層級(jí)快速找到最需要操作的按鈕。常見的按鈕強(qiáng)調(diào)程度可以分為3個(gè)層級(jí)：

高度強(qiáng)調(diào)：承載頁(yè)面上最重要和突出的行動(dòng)點(diǎn)。為了保證視覺層級(jí)最高，通常會(huì)采用大面積主色填充或投影增加空間層級(jí)的方式進(jìn)行區(qū)分，例如主按鈕和FAB按鈕（懸浮按鈕）

中度強(qiáng)調(diào)：承載僅次于最重要行動(dòng)點(diǎn)的常規(guī)操作。為了避免太過吸引用戶注意，通常采用中性色進(jìn)行描邊或填充，也被稱之為次按鈕。

輕度強(qiáng)調(diào)：對(duì)頁(yè)面中其他操作補(bǔ)充或可選操作。為了確保視覺上不凸顯，通常不會(huì)填充背景色，常見于文字按鈕和圖標(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è)常見按鈕類型：主按鈕 > 次按鈕 > 文字按鈕 > 圖標(biāo)按鈕。接下來針對(duì)每種類型我們來展開說明。（FAB按鈕在B端頁(yè)面中屬于特定場(chǎng)景下使用的按鈕，不具有通用性，故劃分到使用場(chǎng)景中進(jìn)行討論）

1）主按鈕 Primary

主按鈕代表著頁(yè)面中的核心操作項(xiàng)，是視覺權(quán)重最高的按鈕，常用于突出提交、完成、確定等操作。為吸引用戶注意，常使用品牌色填充背景引導(dǎo)用戶視覺焦點(diǎn)。關(guān)于主按鈕的使用需要遵循以下2個(gè)原則：

• 在一個(gè)焦點(diǎn)任務(wù)中最多只使用一個(gè)主按鈕。同時(shí)存在多個(gè)主按鈕會(huì)讓用戶失去操作焦點(diǎn)，造成信息干擾。

• 主按鈕并非必須使用。如果沒有必須突出的操作項(xiàng)，強(qiáng)行添加主按鈕反而會(huì)打破按鈕間的層級(jí)關(guān)系。

2）次按鈕 Secondary

次按鈕是使用最頻繁的按鈕，當(dāng)在頁(yè)面中不確定選擇哪種按鈕時(shí)，使用它往往是最安全的。次按鈕通常使用中性色，其樣式可以分為描邊型和填充型：描邊型使用最為廣泛，是次按鈕首選的樣式，而填充型相對(duì)特殊，在不同設(shè)計(jì)系體下會(huì)根據(jù)業(yè)務(wù)場(chǎng)景選擇是否使用。

關(guān)于填充型次按鈕

相較于描邊型，早年在B端產(chǎn)品中很少會(huì)見到使用填充型樣式作為次按鈕使用的，但是可以發(fā)現(xiàn)近幾年國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)如Arco Design、Marterial等，開始陸續(xù)將填充型次按鈕納入到按鈕組件庫(kù)中。

填充型次按鈕更多的使用場(chǎng)景是在移動(dòng)端上，其視覺強(qiáng)調(diào)程度弱于主按鈕但又高于描邊型，可以更好的表達(dá)組件的整體性和吸引用戶注意。

伴隨著硬件設(shè)備的發(fā)展，桌面端和移動(dòng)端的操作邊界開始逐漸模糊，各產(chǎn)品開始追求全生態(tài)環(huán)境下的統(tǒng)一性。為降低用戶在設(shè)備切換時(shí)的體驗(yàn)隔閡，一套設(shè)計(jì)系統(tǒng)需要能同時(shí)滿足多端設(shè)備的兼容，而填充型樣式更符合其場(chǎng)景需求。最典型的便是iPadOS連接鼠標(biāo)操作時(shí)，懸停態(tài)下填充型按鈕明顯比描邊型更容易被識(shí)別。

如何選擇次按鈕的樣式

基于以上考慮，在工作中選擇次按鈕樣式時(shí)可以參考以下建議：

如果當(dāng)前項(xiàng)目上已經(jīng)有在使用的開源庫(kù)，盡量以原有組件庫(kù)為主。除非自身產(chǎn)品有設(shè)備互通的場(chǎng)景或需要同一套設(shè)計(jì)語言兼顧不同端，否則增加多余的次按鈕樣式只會(huì)更加復(fù)雜且影響用戶的體驗(yàn)一致性。

如果是項(xiàng)目是0～1搭建組件庫(kù)，根據(jù)自身業(yè)務(wù)場(chǎng)景選擇其中一種樣式使用即可。一般桌面端產(chǎn)品使用描邊型，如果產(chǎn)品生態(tài)中有移動(dòng)端，為了保持設(shè)計(jì)語言的統(tǒng)一更建議采用填充型。

此外還需考慮前端修改組件庫(kù)樣式時(shí)的開發(fā)成本。

3）文字按鈕 Text

文字按鈕適合承載如取消、還原等無需特意強(qiáng)調(diào)的操作，通常使用在表格操作欄、表單頁(yè)等場(chǎng)景。為了和普通文本做區(qū)分，提示當(dāng)前內(nèi)容可交互，需要加上鏈接色（一般是藍(lán)色）提醒用戶。

文字按鈕和鏈接的區(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í)文本添加下劃線。

4）圖標(biāo)按鈕 Icon

圖標(biāo)按鈕的視覺層級(jí)最弱，但是由于占據(jù)空間小，常用于同時(shí)展示多個(gè)操作項(xiàng)時(shí)使用。由于缺少文字解釋，單純的圖標(biāo)可能會(huì)造成用戶的理解偏差，故建議在指針懸停時(shí)加上Tooltip的文字提示進(jìn)行輔助說明，對(duì)于特定操作還可加上快捷鍵指引。

4.2 依據(jù)使用場(chǎng)景劃分

在依據(jù)強(qiáng)調(diào)程度劃分的基礎(chǔ)上，還有部分按鈕只應(yīng)用于在特定的業(yè)務(wù)場(chǎng)景中，所以各設(shè)計(jì)系統(tǒng)下的按鈕分類會(huì)有所不同。以下按鈕的應(yīng)用場(chǎng)景較為頻繁，故被單獨(dú)劃分為一類方便交流和管理。

1）功能按鈕 Function 

功能按鈕順應(yīng)用戶心智，采用綠色、橙黃色、紅色代表了成功、警告、危險(xiǎn)三種功能按鈕，用戶無需瀏覽按鈕內(nèi)容，直接通過色彩即可識(shí)別當(dāng)前操作可能導(dǎo)致的后果。
由于功能按鈕的視覺權(quán)重往往比主按鈕還高，在頁(yè)面中需謹(jǐn)慎使用，避免對(duì)其他頁(yè)面信息造成干擾。

2）虛線按鈕 Dashed

相較于普通的描邊型按鈕，虛線按鈕只承載傳輸文件或新增配置項(xiàng)等操作，為方便用戶感知，將其描邊設(shè)計(jì)為虛線樣式。

上傳 Upload

由于虛線按鈕只能支持單純的觸發(fā)操作，在很多上傳情景下不能滿足其業(yè)務(wù)需求，故逐漸衍生出單獨(dú)的上傳組件，相較于虛線按鈕：

上傳組件支持批量上傳

通常有更大的交互區(qū)域且允許支持拖拽上傳，以降低用戶的操作門檻

搭配展示文件列表，用于對(duì)已上傳文件進(jìn)行預(yù)覽、重新上傳、刪除等操作

3）幽靈按鈕 Ghost

顧名思義，幽靈按鈕不具備實(shí)體性，一般底色為透明，其按鈕的內(nèi)容反色，通常使用在復(fù)雜或顏色較深的背景中，例如 banner 圖、官網(wǎng)首圖等，避免按鈕突兀地破壞背景的整體性。由于幽靈按鈕使用的場(chǎng)景不固定，因此無須嚴(yán)格遵循現(xiàn)有規(guī)范，只要滿足其特定場(chǎng)景下的業(yè)務(wù)需求即可。

4）行為召喚按鈕 CTA

CTA，即“Call to Action”的縮寫，意思是行為召喚。該詞原本是營(yíng)銷領(lǐng)域的術(shù)語，后來逐漸引用至互聯(lián)網(wǎng)領(lǐng)域中，即目的在于給用戶一個(gè)明確的反饋：當(dāng)前事件的操作流程已經(jīng)完成或即將發(fā)起一個(gè)新的流程。

CTA按鈕之所以會(huì)被單獨(dú)歸類，因?yàn)楫?dāng)按鈕作為吸引用戶采取點(diǎn)擊行為的載體時(shí)，時(shí)常在事件操作的最后一步出現(xiàn)，作為產(chǎn)品的關(guān)鍵觸點(diǎn)之一，可以有效提高頁(yè)面或屏幕的轉(zhuǎn)化。也因此當(dāng)頁(yè)面中存在多個(gè)按鈕時(shí)，CTA按鈕的優(yōu)先級(jí)往往是最高的，可以通過色彩對(duì)比、元素點(diǎn)綴等方式引導(dǎo)用戶點(diǎn)擊。

5）懸浮按鈕 FAB

懸浮按鈕FAB，即Floating Action Buttons的縮寫，其特點(diǎn)是會(huì)始終懸浮在頁(yè)面的固定位置，不會(huì)隨著頁(yè)面滾動(dòng)而消失。

在B端產(chǎn)品中，F(xiàn)AB按鈕更多的使用場(chǎng)景是承載全局性的附屬功能，常見操作包括咨詢、客服、快捷鍵、點(diǎn)贊、收藏、分享、回到頂部等。在設(shè)計(jì)FAB按鈕時(shí)需注意以下要點(diǎn)：

不能干擾用戶在當(dāng)前頁(yè)的正常操作和瀏覽。盡量放置在頁(yè)面的固定位置，當(dāng)操作數(shù)過多時(shí)可將其他操作下鉆至更多按鈕中。

承載操作須是當(dāng)前頁(yè)的全局操作，無須與其他頁(yè)面元素發(fā)生聯(lián)動(dòng)即可觸發(fā)。如不能承載保存、刪除、清空等操作。

6）下拉菜單 Dropdown

按鈕組不是單獨(dú)的按鈕類目，而是按鈕組的集合體，當(dāng)多個(gè)同級(jí)操作項(xiàng)同時(shí)出現(xiàn)，但不想占有太多頁(yè)面空間時(shí)使用。通常按鈕組會(huì)將最關(guān)鍵的主操作露出，其他操作收入更多操作項(xiàng)中。

嚴(yán)格來說 下拉菜單Dropdown 并不屬于按鈕類型，但因?yàn)槠涫褂脠?chǎng)景較為頻繁且時(shí)常用來承載多個(gè)按鈕操作，故在此處作為單獨(dú)類型進(jìn)行講解。下拉菜單作為操作命令集合使用時(shí)，可以簡(jiǎn)單理解成按鈕組：將多個(gè)操作按鈕收納到同一菜單下。在使用時(shí)有兩點(diǎn)需要額外注意：

和選擇器Select的區(qū)別

選擇器Select 屬于錄入控件，在基本形態(tài)上和 下拉菜單Dropdown 高度相似，都是通過下拉浮層來容納更多信息，在實(shí)際應(yīng)用時(shí)經(jīng)常容易被混淆。要區(qū)分兩種組件，最關(guān)鍵是理解其使用場(chǎng)景：

下拉菜單：當(dāng)頁(yè)面上的操作命令過多時(shí)，用此組件可以收納操作元素。核心是菜單導(dǎo)航和命令集合

選擇器：用于一組選項(xiàng)中選擇一個(gè)或多個(gè)數(shù)值。核心表單填寫和數(shù)據(jù)篩選

樣式與操作項(xiàng)的關(guān)系

當(dāng)下拉菜單用來承載操作項(xiàng)時(shí)，各操作項(xiàng)關(guān)聯(lián)性也會(huì)引起下拉菜單樣式上的區(qū)別，這里用實(shí)際的案例輔助大家理解：

乍一看似乎都是差不多的樣式，在工作中很多設(shè)計(jì)師也是隨機(jī)選擇其中一種進(jìn)行使用，但是作為設(shè)計(jì)師，就是應(yīng)該從細(xì)節(jié)之處見真章，每一處設(shè)計(jì)都應(yīng)有理有據(jù)。
簡(jiǎn)單來說，以上三種組合按鈕中的操作關(guān)聯(lián)性是逐漸疏遠(yuǎn)的，這一點(diǎn)從按鈕樣式上也可以看出。

新建一：合并同類項(xiàng)。突出新建操作本身，更多操作項(xiàng)是新增的數(shù)據(jù)類型進(jìn)行區(qū)分，減少重復(fù)文案的出現(xiàn)。

新建二：操作延展。強(qiáng)調(diào)的是數(shù)據(jù)導(dǎo)入的形式，提供更多操作渠道供用戶選擇。

新建三：信息收納。各操作項(xiàng)之間并沒有關(guān)聯(lián)性，只是緩解空間壓力或突出使用最頻繁的操作。

05 按鈕的交互狀態(tài)

在了解了以上按鈕類型，我們來看看按鈕的交互狀態(tài)。不管哪種按鈕類型都會(huì)存在相應(yīng)的交互狀態(tài)，設(shè)計(jì)師在交付設(shè)計(jì)稿時(shí)需要將不同狀態(tài)下的按鈕樣式進(jìn)行標(biāo)注，方便前端開發(fā)。

在剛開始接觸按鈕時(shí)也曾被一堆狀態(tài)給亂花了眼，光是理解不同狀態(tài)的區(qū)別已經(jīng)頭大。其實(shí)回頭來看，開始只要記住4種最關(guān)鍵的按鈕狀態(tài)便可滿足大部分的使用場(chǎng)景，即按鈕的正常態(tài)、懸停態(tài)、點(diǎn)擊態(tài)和禁用態(tài)。

在日常工作中，沒有設(shè)置聚焦態(tài)和加載態(tài)并不會(huì)影響用戶的正常使用，但是加上后可提升用戶的產(chǎn)品使用體驗(yàn)，大家可以根據(jù)開發(fā)成本和實(shí)際的業(yè)務(wù)情況考慮是否加上。 

1）正常 Normal/Default

按鈕的初始狀態(tài)，即默認(rèn)情況下的基礎(chǔ)樣式，此處不多做介紹。

2）懸停 Hover

當(dāng)鼠標(biāo)指針移入按鈕時(shí)的狀態(tài)。為了暗示用戶鼠標(biāo)指針已進(jìn)入按鈕的可交互區(qū)域，按鈕相較于正常狀態(tài)在背景色彩等樣式上會(huì)有明顯的區(qū)別。懸停態(tài)通常還會(huì)配合鼠標(biāo)指針變化輔助用戶理解，在前端CSS樣式表中常用 cursor:pointer ，指針變化為伸出食指的手。
由于懸停態(tài)是由鼠標(biāo)指針移動(dòng)引起，故只有設(shè)計(jì)桌面端產(chǎn)品時(shí)需要考慮到，而在移動(dòng)設(shè)備上通過手指操作故按鈕不存在懸停的狀態(tài)。（在iPadOS更新至13.4版本后開始支持連接鍵鼠操作，但是在日常工作中很少會(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ā)生變化，提示用戶已觸發(fā)點(diǎn)擊操作。

4）禁用 Disabled

按鈕無法操作被鎖定時(shí)的狀態(tài)。該狀態(tài)是為避免用戶誤操作而設(shè)立，如在登錄頁(yè)未完成信息填寫時(shí)將提交按鈕禁用，提示用戶無法點(diǎn)擊，只有填寫完必填字段后才可以點(diǎn)擊提交。在鼠標(biāo)懸停時(shí)指針變化為禁用狀態(tài)，在前端CSS樣式表中常用 cursor: not-allowed，通常會(huì)配合tooltip文字解釋說明行動(dòng)點(diǎn)不可用的原因，避免用戶疑惑。

值得一提的是，禁用按鈕并非只有置灰一種樣式，只降低色彩飽和度和明度也是禁用按鈕的表現(xiàn)手法之一，且相較于置灰更方便用戶識(shí)別主次按鈕。

以上是針對(duì)不同按鈕狀態(tài)的說明，這里并沒有針對(duì)不同狀態(tài)的樣式進(jìn)行詳細(xì)說明，因?yàn)椴煌脑O(shè)計(jì)體系下可能會(huì)采用不同狀態(tài)樣式進(jìn)行展示。為方便對(duì)比，這里將常見組件庫(kù)中的按鈕狀態(tài)進(jìn)行了整理：

可以發(fā)現(xiàn)，除了TDesign中描邊按鈕激活態(tài)下增加了中性色填充外，基本按鈕狀態(tài)都是保持著一致的梯度變化。這里以正常態(tài)的按鈕樣式為基準(zhǔn)，將懸停和激活狀態(tài)下的色彩變化進(jìn)行整理：

總結(jié)來看，在不同色彩的按鈕上按鈕狀態(tài)會(huì)按照不同梯度分布：

主色（品牌色）按鈕色彩梯度從淺到深：激活 〉正常 〉懸停

中性色按鈕色彩梯度從淺到深：激活 〉懸停 〉正常

之所以出現(xiàn)這種情況，主要是因?yàn)樵诖罱óa(chǎn)品色彩體系時(shí)，品牌色一般會(huì)采用色板中間色作為主色（通常是第六個(gè)顏色），故不管往淺往深都有更多靈活調(diào)整的空間。而背景使用的中性色為了避免干擾視覺層級(jí)，通常選擇色彩較淺的中性色，因此沒有再往下延伸色彩梯度的空間。

以上介紹的四種狀態(tài)建議采用色彩組件庫(kù)中色卡進(jìn)行配色，上圖標(biāo)注了不同按鈕狀態(tài)的配色選擇，下面是AntD和ArcoD的色板生成工具（關(guān)于產(chǎn)品取色未來會(huì)專門出一期文章進(jìn)行講解）。

ArcoDesign Palette 色彩工具
Ant Design 色板生成工具

5）聚焦 Focus

該狀態(tài)用于指示電腦光標(biāo)的位置。在有些場(chǎng)景下不操控鼠標(biāo)，只通過鍵盤方向或Tab切換選擇頁(yè)面元素進(jìn)行操作，反而是更高效的操作方式。常見的聚焦態(tài)按鈕樣式為增加描邊，有的設(shè)計(jì)系統(tǒng)下會(huì)采用和懸停態(tài)一樣的樣式。鍵盤操控快捷鍵推薦：

【Tab】前進(jìn)

【Shift + Tab】后移

【Enter】激活

6）加載 Loading

表明用戶操作后系統(tǒng)正在處理的狀態(tài)。由于服務(wù)器響應(yīng)或網(wǎng)絡(luò)延遲等問題，有時(shí)候用戶操作完需要間隔一段時(shí)間才能響應(yīng)，加載態(tài)可緩解用戶的焦慮情緒，避免用戶由于未收到反饋而反復(fù)操作的情況。

源自 Arco Design-組件按鈕

06 按鈕設(shè)計(jì)需考慮的因素

接下來便到了本文的最關(guān)鍵部分，也是按鈕設(shè)計(jì)中出現(xiàn)最頻繁和令人頭痛的問題：我的按鈕究竟應(yīng)該放在哪里？

在此之前先要理解按鈕設(shè)計(jì)的目標(biāo)是引導(dǎo)用戶采取我們希望用戶采取的行動(dòng)。這就需要盡量幫助用戶快速找到需要操作的按鈕并了解執(zhí)行該操作的結(jié)果，同時(shí)盡可能避免誤操作?；谝陨夏繕?biāo)，我們從用戶實(shí)際操作路徑的視角來梳理按鈕設(shè)計(jì)時(shí)應(yīng)考慮的問題：

按鈕區(qū)在頁(yè)面中的什么位置——空間位置

有多個(gè)按鈕時(shí)采用怎樣的閱讀順序更合適——排列順序

按鈕采用怎樣的樣式更合適——視覺樣式

6.1 按鈕區(qū)的空間位置

當(dāng)用戶進(jìn)入頁(yè)面時(shí)，除了瀏覽當(dāng)前頁(yè)的信息內(nèi)容還需要尋找接下來可執(zhí)行操作的可交互區(qū)域，即按鈕區(qū)。除了單純通過視覺差異區(qū)分按鈕和頁(yè)面其他元素外，還需考慮到用戶在信息瀏覽過程中的視覺動(dòng)線。結(jié)合古騰堡法則和格式塔原理，給出以下設(shè)計(jì)建議：

1）放置在用戶的瀏覽路徑中

在沒有其他視覺效果引導(dǎo)時(shí)，F(xiàn)型和Z型網(wǎng)頁(yè)瀏覽模式可以作為用戶視覺動(dòng)線的基礎(chǔ)指導(dǎo)，關(guān)于以上2種瀏覽模式網(wǎng)上有太多相關(guān)介紹，此處就不再贅述。

2）盡可能靠近其所控制或聯(lián)動(dòng)的對(duì)象

將關(guān)聯(lián)性強(qiáng)的信息放在一起，可以降低閱讀成本，提高用戶的感知效率。

6.2 多按鈕的排列順序

1）保持用戶的操作慣性

這里先討論一下開頭提到的問題：主操作項(xiàng)放在左邊合適還是右邊合適？我們先來看看一些案例：
可以發(fā)現(xiàn)，即使是業(yè)內(nèi)頂尖的互聯(lián)網(wǎng)公司也并沒有遵從同一套確定方案。我們?cè)倏纯催@位在英國(guó)學(xué)人機(jī)交互的研究生所做的課題實(shí)驗(yàn)：https://www.woshipm.com/pd/3104897.html。具體的實(shí)驗(yàn)過程不再詳細(xì)贅述，直接來看結(jié)果：對(duì)于新用戶而言，確定按鈕的位置對(duì)操作時(shí)間和錯(cuò)誤率影響并沒有太大差別。并由此得出更關(guān)鍵的結(jié)論：不要輕易改變當(dāng)前產(chǎn)品中用戶已經(jīng)習(xí)慣的按鈕位置。
在此基礎(chǔ)上對(duì)于操作項(xiàng)不固定的頁(yè)面，給大家整理了以下建議：

2）同類操作項(xiàng)按組分類

最典型的案例便是編輯器類產(chǎn)品的操作項(xiàng)，將同類操作區(qū)整理分組，方便用戶查找。

3）閱讀順序符合操作預(yù)期

此處的閱讀順序并非特指從左往右、從上往下，而是依據(jù)用戶當(dāng)前視覺動(dòng)線，優(yōu)先滿足用戶預(yù)期或操作可能性最大的按鈕需要最先被用戶發(fā)現(xiàn)。

考慮到人體工程學(xué)操作習(xí)慣和操作后果的影響，還需注意一些特定的場(chǎng)景：

4）流程操作遵循方向認(rèn)知習(xí)慣

流程屬性的按鈕如上一步、返回、后退等操作用戶習(xí)慣在左邊，而下一步、前進(jìn)、更多等操作在右邊。

5）破壞性操作提升操作門檻

如刪除或清空按鈕，盡可能放置在遠(yuǎn)離主按鈕的位置，甚至可以下鉆至更多按鈕中，避免誤觸。

6.3 按鈕的視覺樣式

在文章開始基于強(qiáng)調(diào)程度劃分按鈕類型時(shí)，按鈕的視覺樣式便是基于其強(qiáng)調(diào)程度劃分的，頁(yè)面中越是需要強(qiáng)調(diào)的按鈕其視覺權(quán)重越高。前文中只劃分了主按鈕、次按鈕、文字按鈕、圖標(biāo)按鈕這4種基本類型，此外還可以通過文本粗細(xì)、內(nèi)容量等方式進(jìn)一步細(xì)分。

07 關(guān)于按鈕的其他問題

7.1 按鈕的尺寸

按鈕的尺寸優(yōu)先體現(xiàn)在其高度上，而寬度一般根據(jù)內(nèi)容區(qū)大小自動(dòng)適配。通常會(huì)將按鈕分為大、中、小三個(gè)規(guī)格，以滿足不同場(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)容量差異引起視覺上的層級(jí)誤判。故為了減少按鈕錯(cuò)綜不齊的情況，建議設(shè)置按鈕最小寬度的界限，一般為4個(gè)文字+左右內(nèi)邊距。

7.2 按鈕的文案

相較于其他方面，似乎大家對(duì)產(chǎn)品文案總是保持著“點(diǎn)到為止”的態(tài)度，但是并不意味著文案不重要，錯(cuò)誤的文案會(huì)讓用戶產(chǎn)生疑惑，嚴(yán)重影響用戶體驗(yàn)。相反好的按鈕文字甚至可以做到即使不去閱讀上下文，單憑按鈕文案即可做出正確的判斷。在一些關(guān)鍵節(jié)點(diǎn)的CTA按鈕，文案的優(yōu)化可以帶來轉(zhuǎn)化率大幅度的提升。因此關(guān)注文案細(xì)節(jié)也是設(shè)計(jì)師平時(shí)需要考慮的問題。優(yōu)秀的按鈕文案包含以下幾個(gè)要點(diǎn)：

1）內(nèi)容簡(jiǎn)潔，刪除贅詞

按鈕區(qū)域寸土寸金，每一個(gè)字都要有其存在的意義，如果刪除也不影響信息表達(dá)即沒必要存在。

2）表達(dá)清晰，避免產(chǎn)生歧義

文字表達(dá)清晰，避免使用用戶難以理解的專業(yè)術(shù)語。

3）規(guī)范用詞，不要出現(xiàn)錯(cuò)別字

常見的“登陸&登錄”、“收獲&收貨”、“即時(shí)和及時(shí)”都是容易打錯(cuò)的詞。

以下給大家整理了常見易錯(cuò)的按鈕文案表，建議保存收藏。

4）一致的語法表達(dá)

如統(tǒng)一采用動(dòng)賓結(jié)構(gòu)：修改價(jià)格、提交工單、查看更多等。

5）適當(dāng)?shù)那楦谢磉_(dá)

結(jié)合自身品牌特性，在按鈕中融入適當(dāng)?shù)那楦谢陌?，也是塑造品牌心智的觸點(diǎn)之一。

7.3 按鈕的圓角

當(dāng)前市面上主流的互聯(lián)網(wǎng)產(chǎn)品大多都采用了圓角設(shè)計(jì)，因?yàn)?strong>圓角矩形相較于直角更具安全感和親和力、在相似內(nèi)容中識(shí)別度更高，且圓角對(duì)信息的聚焦性更強(qiáng)。同樣B端設(shè)計(jì)中通常也會(huì)在按鈕中加入圓角，方便用戶更高效的辨別和獲取信息，但是需要注意的是圓角并非越大越好，過大的圓角會(huì)導(dǎo)致按鈕操作熱區(qū)的縮窄，更不易被點(diǎn)擊觸發(fā)。如在移動(dòng)端產(chǎn)品上都是采用手指按壓，而桌面端采用鼠標(biāo)指針單擊，相較之下后者對(duì)點(diǎn)擊按鈕的觸發(fā)精度要求更高，也因此全圓角按鈕（也被稱為膠囊按鈕）更適合在移動(dòng)端產(chǎn)品上使用。

此外按鈕的圓角設(shè)置還需考慮到產(chǎn)品整體的視覺一致性，在不同場(chǎng)景下都要保證統(tǒng)一的感官體驗(yàn)，如在大尺寸的按鈕上圓角的曲率也應(yīng)設(shè)置更大。