編輯導(dǎo)語：在 B 端界面中，按鈕作為每張頁面都會出現(xiàn)的最基礎(chǔ)，最常見的元素，是用戶任務(wù)流程的開端，時時刻刻影響著用戶的體驗和產(chǎn)品所在企業(yè)及產(chǎn)品本身的口碑。由此可見，有章可循的按鈕設(shè)計的重要性不言而喻。本文將與你一同分享B端組件設(shè)計中按鈕的設(shè)計原則、類型、細節(jié)以及交互方式等干貨內(nèi)容，感興趣的小伙伴們就一起來讀讀看吧！

一、按鈕的概述

在 B 端界面中，按鈕是每張頁面都會出現(xiàn)的最基礎(chǔ)，最常見的元素，用戶的任務(wù)流程皆從按鈕開始，按鈕設(shè)計有理有據(jù)，可以為界面及產(chǎn)品專業(yè)度加分不少。

如果一個產(chǎn)品的界面，按鈕的設(shè)計規(guī)則無規(guī)律可循，隨意設(shè)計，不僅產(chǎn)品用戶體驗會直線下降，產(chǎn)品所在企業(yè)及產(chǎn)品本身的口碑也會受到質(zhì)疑。同時，按鈕作為產(chǎn)品設(shè)計規(guī)范中的一個部分，如果不加以約束，每種場景都會出現(xiàn)過多的組合方式，導(dǎo)致界面體驗無章可循，體驗很差。

按鈕是用戶觸發(fā)操作的關(guān)鍵操作，用于提示用戶按下按鈕后將進行的操作，主要由文字和圖標(biāo)組成，可理解為一個操作的觸發(fā)器。

所以設(shè)計師在對于按鈕的設(shè)計時需要注意多種細節(jié)和規(guī)范，確保用戶體驗，按鈕的功能類型往往決定了一個按鈕的設(shè)計方式，是需要強調(diào)還是需要弱化；文案是需要強引導(dǎo)，還是直接闡述功能；按鈕上是放圖標(biāo)還是不放圖標(biāo)等。

接下來就分享關(guān)于B端組件設(shè)計中的按鈕，我們一起來了解一下。

工作中會遇到的問題：

對于每個設(shè)計師來說按鈕并不陌生，在每天的設(shè)計中，都會使用按鈕進行頁面設(shè)計；但又不是每一個設(shè)計師都能夠?qū)粹o設(shè)計好，因為它存在三個方面的復(fù)雜性：

要想解決這些問題，我們需要了解按鈕的主要類型和設(shè)計細節(jié)，以便在各類情況下靈活運用。

接下來就分享關(guān)于B端組件設(shè)計中的按鈕，我們一起來了解一下設(shè)計原則。

二、設(shè)計原則

1. 按鈕的適用范圍

我們在設(shè)計產(chǎn)品的按鈕時，要遵循或者制定設(shè)計規(guī)范，設(shè)計規(guī)范就等同于產(chǎn)品的使用說明書，可以幫助設(shè)計師規(guī)范的設(shè)計，提高工作的效率，在整體的頁面設(shè)計中有更好的體驗，同時也幫助開發(fā)測試小哥哥們可以更高效工作，使用者也能更加高效的操作，降低學(xué)習(xí)成本。

現(xiàn)在市面上有很多的大廠設(shè)計規(guī)范，都非常非常的全面和完善，可以學(xué)習(xí)和進行參考，每個企業(yè)對于規(guī)范都有不同的使用范圍，我們在做設(shè)計的時候也要根據(jù)不同的范圍進行調(diào)整和重新定義。

而企業(yè)的規(guī)范也會有不同的適用范圍，我們做設(shè)計時也要根據(jù)不同的范圍去定義設(shè)計。

對于大廠企業(yè)級的設(shè)計規(guī)范，都是針對企業(yè)整體的品牌調(diào)性，這是所有產(chǎn)品的設(shè)計規(guī)范的基礎(chǔ)，其次是產(chǎn)品的設(shè)計規(guī)范，在依據(jù)企業(yè)級設(shè)計規(guī)范的基礎(chǔ)上，開始制定產(chǎn)品專屬設(shè)計語言規(guī)范，品牌色，設(shè)計語言，交互規(guī)范，用戶體驗等等，具體的產(chǎn)品規(guī)范根據(jù)產(chǎn)品的特性定制設(shè)計語言。

所以我們在建立規(guī)范的時候既要有約束，也要有包容性，可能公司會有很多的產(chǎn)品線，一套規(guī)范可以同時用在不同的產(chǎn)品線上，滿足的范圍大，同時滿足跨場景的設(shè)計需要。

2. 按鈕設(shè)計要解決的問題

在頁面設(shè)計中，按鈕該如何設(shè)計，位置，順序，方式，視覺的重心強調(diào)程度是用戶需要快速找到按鈕的核心要素，通過按鈕的顏色，準(zhǔn)確的文案能夠快速告訴用戶執(zhí)行的結(jié)果，按鈕本身的價值目標(biāo)就是指導(dǎo)用戶進行下一步的操作，所以我們需要幫助用戶能夠快速的找到需要操作的按鈕，并且文案告訴用戶執(zhí)行后的結(jié)果，同事要避免用戶的誤操作。

那么我們就來好好的了解按鈕吧。

三、按鈕類型

依據(jù)按鈕呈現(xiàn)的視覺重量差異，我們可以通過改變樣式將按鈕分為主按鈕、次按鈕、虛線按鈕、文字按鈕、圖標(biāo)按鈕、按鈕菜單、按鈕中加圖標(biāo)。

1. 主按鈕

主按鈕顧名思義承載當(dāng)前頁面的核心功能，在日常場景中，通常為新建、保存、確定這一類的正向操作。通過使用主題色填充容器吸引用戶視線聚焦，引導(dǎo)用戶去關(guān)注，操作主流程，強調(diào)性較高。

由于重要性高，要讓用戶一眼就能看見，往往設(shè)計的比較醒目。另外主按鈕在頁面中不宜安排的過多，否則容易相互干擾；而且只有最重要的功能才適合設(shè)計為主按鈕，因此并非所有頁面都需要有主按鈕。

2. 次按鈕

次按鈕是在日常場景中運用最廣泛的的一種按鈕，也稱之為次要按鈕，視覺呈現(xiàn)上相較于主按鈕較“弱”。通常有描邊和文字組成的字線型、背景填充（中性色或較淺的主題色）和文字組成的字面型兩種，用于按鈕區(qū)沒有主次之分的平級按鈕，強調(diào)性中等。

如果我們有許多具有相似重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠是最安全的選擇。

3. 虛線按鈕

虛線按鈕在日常場景中屬于低頻操作按鈕，容器內(nèi)只有簡單的虛線邊框，視覺上弱于次按鈕，常用于場景中的添加操作，強調(diào)性較低。

4. 文字按鈕

類似次按鈕也是頁面中大量出現(xiàn)的按鈕類型。由于只以文字形式出現(xiàn)，視覺上層級較弱，可以和次按鈕區(qū)分一定的層級關(guān)系，通常在列表設(shè)計中被大量使用。

文字按鈕常見也分為兩種：一種是各種狀態(tài)下容器邊界都是隱藏的，一種是在hover、press、active狀態(tài)下容器有背景色填充（較淺中性色）的。

不管哪一種形式視覺感受都較弱，通常用于不太明顯的操作，強調(diào)性較低。

5. 鏈接按鈕

文字按鈕和鏈接的在默認外觀上基本一致，甚至在有的項目中各種交互狀態(tài)也一致，比較難區(qū)分文字按鈕和鏈接。

所以在設(shè)計是需要進行區(qū)分，文字按鈕和鏈接做了不同的定義，鏈接在hover，press，active狀態(tài)下都有顯示下劃線，來告知用戶這是一個外部的鏈接；文字按鈕則在hover，press，active狀態(tài)下容器都會填充背景色。

6. 圖標(biāo)按鈕

圖標(biāo)按鈕在日常場景中的使用頻次較高，圖標(biāo)按鈕相較其他按鈕體積較小，因此布局的靈活性很高。且圖標(biāo)形式給了設(shè)計師更多表現(xiàn)的空間，是B端設(shè)計中最容易出彩的部分，許多B端產(chǎn)品都通過精心設(shè)計的圖標(biāo)按鈕傳遞產(chǎn)品調(diào)性和品牌感。

由于沒有文字元素，圖標(biāo)按鈕容易出現(xiàn)用戶理解上的偏差。為避免這一情況，需要在設(shè)計時做好用戶測試，測試該圖標(biāo)是否符合用戶視覺預(yù)期?；蛘弋?dāng)用戶Hover時顯示Tooltips提示按鈕含義，幫助用戶理解。

四、特殊按鈕類型

1. 危險按鈕

危險按鈕在刪除操作中最為常見，通常是為了警告用戶，這個數(shù)據(jù)刪除不可恢復(fù)，讓用戶謹慎考慮。

在常見的刪除操作中，都需要用戶進行二次確認，避免用戶誤操作當(dāng)然，在實際業(yè)務(wù)中，危險按鈕不宜過多，如果業(yè)務(wù)當(dāng)中無法避免，需要展示多個刪除按鈕時，推薦采取圖標(biāo)按鈕進行展示或者Hover過后將其呼出。

按鈕的危險狀態(tài)一般是指刪除/移動/修改權(quán)限等危險操作，大部分都需要二次確認。

二次確認主要分為兩種交互方式，一種是全屏彈窗，一種是氣泡卡片。在強調(diào)程度上全屏彈窗更強，大家可以看情況使用。

2. 懸浮按鈕

懸浮按鈕在B端場景中，主要是幫助用戶進行輔助咨詢的功能，例如在一些用戶需要得到幫助的頁面中，可以通過懸浮按鈕，使用戶在有疑問的頁面進行快速提問，幫助用戶能夠進行快速的跳轉(zhuǎn)，在飛書的應(yīng)用列表中，其實用戶剛開始理解應(yīng)用列表其實存在一個理解成本，就可以通過懸浮按鈕進行展示。

綜上所述就是在B端項目中十分常見的幾種按鈕，不同團隊、不同項目都會根據(jù)自身的實際項目去定義和使用不同按鈕。

我們在設(shè)計的時候就要依據(jù)按鈕視覺重量的不同，將按鈕分為主按鈕、次按鈕、虛線按鈕、文字按鈕、圖標(biāo)按鈕，在強調(diào)屬性的重要程度上隨級別增加遞減。

在實際的項目場景中，根據(jù)不同需求的強調(diào)程度去選擇相應(yīng)級別的按鈕，有了這個準(zhǔn)則作為指導(dǎo)參考，大大降低了團隊在選擇按鈕時的時間成本。

3. 禁用按鈕

禁用狀態(tài)與其他狀態(tài)有些不同的地方在于，禁用既是一種狀態(tài)也是一種操作，雖然是不可點擊，而危險、加載表達的都是狀態(tài)。

禁用常用在登錄、注冊等頁面，當(dāng)用戶沒填寫完必填項時，按鈕是禁用狀態(tài)的，這就涉及到禁用與正常狀態(tài)的切換。

4. 加載按鈕

在B端后臺場景中按鈕的loading狀態(tài)是很常用的，比如在導(dǎo)出數(shù)據(jù)的按鈕上由于后臺數(shù)據(jù)量較大等待時間往往超過3秒，此時加載動畫可以減緩用戶等待的焦慮感。

需要注意的是，操作成功或失敗都需要有及時的消息提示。

但在后臺龐大的數(shù)據(jù)中，等待時間甚至?xí)^1分鐘，僅僅有一個加載動畫還不夠，還需要加上進度條，體驗進一步提升。

有了進度條體驗明顯提高了，但用戶在頁面等待數(shù)分鐘依舊是焦慮的，那我們還可以告訴用戶，你可以去做其他操作。

5. 幽靈按鈕

幽靈按鈕主要出現(xiàn)在官網(wǎng)首頁，在復(fù)雜的背景圖片中按鈕和邊框反白。完美的融入背景，明顯但又不突兀。

但現(xiàn)在線框的幽靈按鈕越來越少了，更多的實心按鈕。

6. 開關(guān)按鈕

常見的開/關(guān)、暫停/播放是最典型的切換按鈕。按鈕的狀態(tài)為兩種：默認狀態(tài)和按下狀態(tài)。鼠標(biāo)單擊按鈕后按鈕處于按下狀態(tài)。所以切換按鈕也可以稱為兩態(tài)按鈕。

與單態(tài)按鈕不同的是切換按鈕點擊后依舊停留在本頁面，如果是暫停/播放按鈕可以通過畫面感知到狀態(tài)，因此不需要在按鈕上額外的表示當(dāng)前狀態(tài)， 只需要提供預(yù)期操作即可。

但如果是開關(guān)按鈕，當(dāng)前頁面是無法感知到狀態(tài)的，那么在按鈕上表示當(dāng)前狀態(tài)就非常重要了。如果我們僅通過按鈕中圓的位置作為區(qū)分，是無法分清當(dāng)前狀態(tài)的。

因此，我們通常會運用顏色、圖形、文字、提示信息等多種方法來達到表達按鈕狀態(tài)的目的。

7. 組合按鈕

在一個會議視頻的專業(yè)會控項目里，我遇到了更為復(fù)雜的按鈕，需要同時展示狀態(tài)、預(yù)示動作以及按鈕菜單。我將其稱為組合按鈕。

在全體靜音功能按鈕中，鼠標(biāo)移入話筒icon出現(xiàn)音量調(diào)節(jié)桿，單擊后變?yōu)椤耙讶w靜音”，通過文字和icon表示當(dāng)前狀態(tài)，下拉菜單中可切換為全體強制靜音。

全體靜音功能的文字和icon都是展示狀態(tài)，但在錄制功能中，icon是預(yù)示動作。

由于每個人對圖形的理解不同，為了將風(fēng)險降為最低在整個產(chǎn)品設(shè)計體系中，組合按鈕中的文字都是描述狀態(tài)。

在組合按鈕中需要注意的有兩點：

1. 梳理清楚有哪些動作、幾種狀態(tài)。在不通用常見的功能里一定要加上文字描述。
2. 在一個功能中有多個按鈕的情況下， 文字描述狀態(tài)而不能是動作，因為有多個按鈕只有一個動作描述，會產(chǎn)生歧義。

五、按鈕的細節(jié)

1. 按鈕拆解

通過對一個按鈕的拆解，可以將按鈕分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本元素，每種元素的視覺呈現(xiàn)都會反過來影響按鈕的外觀。不同風(fēng)格、不同氣質(zhì)的產(chǎn)品，需要相應(yīng)的處理的影響按鈕視覺呈現(xiàn)的各個元素。

2. 按鈕圓角

根據(jù)產(chǎn)品的調(diào)性，按鈕的圓角不僅僅體驗的整個產(chǎn)品調(diào)性認知，同時也是用戶在使用產(chǎn)品過程的體驗感受，那么合理的科學(xué)的，適合產(chǎn)品氣質(zhì)特征調(diào)性，符合用戶預(yù)期和認知的圓角元素，對整個產(chǎn)品的使用體驗的提升有很大的關(guān)聯(lián)。

圓角按鈕所帶來的不僅僅是圓角大小的視覺表現(xiàn)，這里的圓角不僅僅局限于按鈕，圓角適用產(chǎn)品中的每個元素，提前合理的規(guī)劃各種元素圓角，更會對整個產(chǎn)品的一致性大有裨益更多是影響著用戶對整個產(chǎn)品整體認知，以及用戶在使用產(chǎn)品過程中的具體感受。

合理科學(xué)、適合產(chǎn)品氣質(zhì)特征、符合用戶預(yù)期和認知的圓角元素，對整個產(chǎn)品使用體驗的提升是有很大的幫助的。

• 直角按鈕：四角垂直過度，有棱有角，給人以尖銳，強烈，不易接近，在大多產(chǎn)品中很少遇見。多個直角按鈕近距離排列，由于直接張力的存在，相鄰的按鈕在視覺感受上會被弱化，同時也給你不敢點擊的感覺。
• 圓角按鈕：四角圓滑，過度柔和，多給人親近，舒適，好接近，這是大多數(shù)產(chǎn)品使用的，會存在圓角大小之分。圓角按鈕更加的好區(qū)分，再滿足產(chǎn)品需求的時候，適當(dāng)?shù)膱A角會更加的合適。

當(dāng)然圓角也不是越大越好，相同尺寸的按鈕，圓角越大對在頁面中的視覺占比越小，操作的容易性越低。尤其在B端與下拉菜單進行聯(lián)動時，也會受到大圓角（全圓角）的局限，使下拉菜單和按鈕的組合適配顯得比較突兀。

3. 按鈕寬度尺寸

在實際項目中應(yīng)用中，雖然web端沒有像移動端一樣需要考慮手指點擊的大小，但是設(shè)計合理的尺寸，以及適合的間距也是非常重要的。

我們發(fā)現(xiàn)按鈕中的文本字數(shù)≤4能夠滿足大多數(shù)場景。為保證大多數(shù)按鈕的長度一致，就需要在定制按鈕組件時給按鈕中的文字區(qū)域一個基準(zhǔn)寬度，當(dāng)文字的實際寬度大于基準(zhǔn)寬度時，按鈕的寬度隨著文字的實際寬度增加而增加；當(dāng)文字的實際寬度不大于基準(zhǔn)寬度時，按鈕的寬度就是文字的基準(zhǔn)寬度+左右padding值。

4.? 按鈕大小

在 B 端產(chǎn)品中，按鈕通常有 4 種尺寸。大按鈕主要使用在全局性操作的界面上；中按鈕通常為標(biāo)準(zhǔn)按鈕，其基本隨時隨地出現(xiàn)；小按鈕主要使用在下拉面板或一些需要使用到小按鈕的地方。

備注：計算標(biāo)準(zhǔn)按鈕高度的方法（僅供參考），文字字號 2.4 倍或 2.5 倍，計算出來的值取最靠近 4 的倍數(shù)的數(shù)字。例如 12 號字體在 2.4 倍數(shù)值為 28.8，距離 4 的倍數(shù)最近的為 28，因此標(biāo)準(zhǔn)按鈕高度為 28px；14 號字體在 2.5 倍數(shù)值為 35，距離 4 的倍數(shù)最近的為 36，因此標(biāo)準(zhǔn)按鈕高度為 36px。實際項目需求中，不同場景用到的按鈕大?。ò粹o的高度）也會有所不同。在我們的項目中我們將通用按鈕劃分為大（large）、正常（normal）、小（small）、超?。╡xtra small），按鈕高度分別對應(yīng)著36px、32px、24px、20px。

六、用戶習(xí)慣和潛在的順序原則

1. “F”和“Z”型的視覺瀏覽規(guī)律

• F模式：這主要在一些以文字為主的網(wǎng)站出現(xiàn)，例如博客。指用戶通常會沿著左側(cè)垂直瀏覽而下。按鈕跟隨內(nèi)容模式下進行閱讀。
• Z模式：由于從左到右自上而下的閱讀習(xí)慣，用戶首先關(guān)注的頁頭水平方向上的內(nèi)容，是相對重要的視覺落腳點。當(dāng)視線抵達底部時，又遵循著從左到右的習(xí)慣模式，關(guān)注最底部的內(nèi)容。

大框架上主按鈕和次按鈕順序為主按鈕靠右原則設(shè)計，符合“Z”型閱讀模式+費茨定律。當(dāng)頁面內(nèi)容主要為文本瀏覽時，若要同時出現(xiàn)主次按鈕，主按鈕在次按鈕左邊原則，符合用戶“F”型瀏覽模式。

所以按鈕的排版也有相對應(yīng)的規(guī)律和方法論可以驅(qū)動設(shè)計。

2. 展示數(shù)量

按鈕的數(shù)量展示是指在一個按鈕區(qū)中，按鈕數(shù)量的多少。B 端產(chǎn)品有三種按鈕數(shù)量放置的方式，以下只有第三種是推薦的。

第一種，能提供給用戶的按鈕都展示出來，唯恐用戶找不到。

第二種，適當(dāng)做了按鈕的收斂，但不清楚所以然，就是把一些按鈕象征性的放到了“更多”中。

第三種，對業(yè)務(wù)的目標(biāo)和用戶的界面操作場景非常熟悉，有條有理的將按鈕合理展示，既保證用戶能順利操作，又保證產(chǎn)品界面整理有序。

總體來說，建議一個按鈕區(qū)的按鈕數(shù)量盡量控制在 5 個以內(nèi)，多余 5 個置入“更多”中。

3. 歸類聚合

歸類聚合是指具有相同含義的按鈕需要歸類展示，例如新增、刪除、修改、查看通常在一起；啟動和停止、導(dǎo)入和導(dǎo)出、下載和上傳都會在一起，不宜距離太遠。

4. 按鈕位置

按鈕的位置是指按鈕或按鈕組位于內(nèi)容塊的哪個部位，在一定程度上，我們也可以將頁面視為內(nèi)容塊，即內(nèi)容塊是包含內(nèi)容的區(qū)塊。如果需要結(jié)構(gòu)性的將一個內(nèi)容塊進行有序化切分，通常由 Header、Body、Footer 三部分組成。

• Header：放置在 Header 的按鈕，通常是一些全局性質(zhì)的操作，例如編輯全部數(shù)據(jù)、切換視圖展示、批量刪除等。但是這些按鈕應(yīng)該放左側(cè)、中間、還是右側(cè)呢？
• Body：放置在 Body 的按鈕，通常是對跟隨的內(nèi)容直接操作，例如編輯單條表單項、編輯某部分表單區(qū)塊等。但是這些按鈕應(yīng)該放在哪里呢？
• Footer：放置在 Footer 的按鈕，通常是全局完成類的操作，例如取消、確定、保存等。但是這些按鈕應(yīng)該放在哪里呢？
• Header、Body、Footer 按鈕位置根據(jù)“F”和“Z”型的視覺瀏覽規(guī)律給出如下使用建議。圖中藍色為主按鈕，白色為次按鈕。

5. 按鈕順序

按鈕順序是指按鈕組中，不同按鈕的順序應(yīng)該如何放置，這里的順序包含兩層：第一是主按鈕與次按鈕的順序；第二是同類按鈕之間的順序，例如次按鈕和次按鈕的順序。同個產(chǎn)品中，按鈕順序保持一致，不僅利于提升用戶的操作效率，同時會減少用戶的操作出錯概率。

當(dāng)按鈕組位于 Header 和 Footer 區(qū)時，主按鈕和次按鈕順序為主按鈕靠右原則設(shè)計，符合“Z”型閱讀模式+費茨定律。當(dāng)按鈕組位于 Body 區(qū)時，若要同時出現(xiàn)主次按鈕，主按鈕在次按鈕左邊原則，符合用戶“F”型瀏覽模式。

除了以上基礎(chǔ)的設(shè)計建議外，還有以下三個設(shè)計原則需要遵守：

方向性原則

返回、前進、上一步、下一步、撤銷、重做等按鈕都是具有方向性的，假如按鈕的放置位置是符合其方向性的，用戶的認知成本就會很低。

相關(guān)按鈕臨近原則

讓相關(guān)的操作按鈕更相近，這樣不僅在視覺上增強用戶對他們的相關(guān)性認知，而且距離越近越容易操作。例如保存、保存并返回首頁；發(fā)布、定時發(fā)布。

大家在設(shè)計的時候，可以運用以下步驟去思考：

第一：制定自己所負責(zé)的產(chǎn)品設(shè)計規(guī)范的內(nèi)容塊中按鈕組的設(shè)計位置，例如 Footer 區(qū)按鈕組的位置在哪里（可以區(qū)分場景也可以不區(qū)分，由產(chǎn)品覆蓋的業(yè)務(wù)范疇決定）。

第二：制定主次按鈕的位置（是否區(qū)分場景也看產(chǎn)品情況）。在阿里云平臺設(shè)計規(guī)范中，主按鈕都在左側(cè)；而在 antd 中，主次按鈕位置是分場景的。

第三：制定按鈕組中每個按鈕的順序，建議參考 2.10 中的三個設(shè)計原則。

七、按鈕的交互方式

除了視覺樣式，按鈕還帶有交互方式。按鈕只有帶上了交互，才真正開始為用戶服務(wù)，它是用戶輸入信息的口子，是系統(tǒng)接收信息的口子，更是人機友好交互的口子。

1. 點擊按鈕后出彈窗，例如新增、刪除

2. 點擊按鈕后關(guān)閉、退出當(dāng)前操作，例如保存對表單的操作

3. 點擊按鈕后關(guān)閉、退出當(dāng)前操作，例如保存對表單的操作

4. 點擊按鈕后出現(xiàn)下拉等浮層反饋，例如下拉菜單、表格“更多項”操作、工具欄“更多項”操作

5. 點擊按鈕后跳轉(zhuǎn)頁面，例如步驟類操作中的下一步、頁面類新增表單

6. 鼠標(biāo)懸浮在按鈕觸發(fā)面板類反饋，例如用戶設(shè)置、換膚

八、總結(jié)

其實最快速的學(xué)習(xí)和熟悉方式，就是去看市面上已有的設(shè)計規(guī)范，了解最底層的規(guī)則，在學(xué)習(xí)和使用時盡可能的讓規(guī)則能夠符合習(xí)慣用法，讓用戶更容易的接受和學(xué)習(xí)。

按鈕雖然只是一個很基礎(chǔ)的設(shè)計元素，但是在整個的設(shè)計中卻扮演著很重要的角色，對每個組建進行拆解，無論是組件的狀態(tài)，類型，在實際工作中就要思考如何正確的使用，都是需要我們學(xué)習(xí)的，同時更多的體驗市面上的產(chǎn)品，只有多去體驗，才能更好的熟悉和完善自己的體系。

此外，B端設(shè)計師可以把更多的精力投入到沉淀行業(yè)知識、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上，輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨有的閃光點，從而切實解決問題和實現(xiàn)價值。

本文由 @斜杠南青年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

圖來自 Unsplash，基于CC0協(xié)議。