中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、按鈕的概述

在 B 端界面中，按鈕是每張頁面都會出現的最基礎，最常見的元素，用戶的任務流程皆從按鈕開始，按鈕設計有理有據，可以為界面及產品專業度加分不少。

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

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

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

接下來就分享關于B端組件設計中的按鈕，我們一起來了解一下。

工作中會遇到的問題：

對于每個設計師來說按鈕并不陌生，在每天的設計中，都會使用按鈕進行頁面設計；但又不是每一個設計師都能夠將按鈕設計好，因為它存在三個方面的復雜性：

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

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

二、設計原則

1. 按鈕的適用范圍

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

現在市面上有很多的大廠設計規范，都非常非常的全面和完善，可以學習和進行參考，每個企業對于規范都有不同的使用范圍，我們在做設計的時候也要根據不同的范圍進行調整和重新定義。

而企業的規范也會有不同的適用范圍，我們做設計時也要根據不同的范圍去定義設計。

對于大廠企業級的設計規范，都是針對企業整體的品牌調性，這是所有產品的設計規范的基礎，其次是產品的設計規范，在依據企業級設計規范的基礎上，開始制定產品專屬設計語言規范，品牌色，設計語言，交互規范，用戶體驗等等，具體的產品規范根據產品的特性定制設計語言。

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

2. 按鈕設計要解決的問題

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

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

三、按鈕類型

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

1. 主按鈕

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

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

2. 次按鈕

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

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

3. 虛線按鈕

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

4. 文字按鈕

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

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

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

5. 鏈接按鈕

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

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

6. 圖標按鈕

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

由于沒有文字元素，圖標按鈕容易出現用戶理解上的偏差。為避免這一情況，需要在設計時做好用戶測試，測試該圖標是否符合用戶視覺預期?；蛘弋斢脩鬑over時顯示Tooltips提示按鈕含義，幫助用戶理解。

四、特殊按鈕類型

1. 危險按鈕

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

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

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

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

2. 懸浮按鈕

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

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

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

在實際的項目場景中，根據不同需求的強調程度去選擇相應級別的按鈕，有了這個準則作為指導參考，大大降低了團隊在選擇按鈕時的時間成本。

3. 禁用按鈕

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

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

4. 加載按鈕

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

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

但在后臺龐大的數據中，等待時間甚至會超過1分鐘，僅僅有一個加載動畫還不夠，還需要加上進度條，體驗進一步提升。

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

5. 幽靈按鈕

幽靈按鈕主要出現在官網首頁，在復雜的背景圖片中按鈕和邊框反白。完美的融入背景，明顯但又不突兀。

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

6. 開關按鈕

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

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

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

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

7. 組合按鈕

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

在全體靜音功能按鈕中，鼠標移入話筒icon出現音量調節桿，單擊后變為“已全體靜音”，通過文字和icon表示當前狀態，下拉菜單中可切換為全體強制靜音。

全體靜音功能的文字和icon都是展示狀態，但在錄制功能中，icon是預示動作。

由于每個人對圖形的理解不同，為了將風險降為最低在整個產品設計體系中，組合按鈕中的文字都是描述狀態。

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

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

五、按鈕的細節

1. 按鈕拆解

通過對一個按鈕的拆解，可以將按鈕分為容器、背景、圖標、文本、描邊、圓角等基本元素，每種元素的視覺呈現都會反過來影響按鈕的外觀。不同風格、不同氣質的產品，需要相應的處理的影響按鈕視覺呈現的各個元素。

2. 按鈕圓角

根據產品的調性，按鈕的圓角不僅僅體驗的整個產品調性認知，同時也是用戶在使用產品過程的體驗感受，那么合理的科學的，適合產品氣質特征調性，符合用戶預期和認知的圓角元素，對整個產品的使用體驗的提升有很大的關聯。

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

合理科學、適合產品氣質特征、符合用戶預期和認知的圓角元素，對整個產品使用體驗的提升是有很大的幫助的。

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

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

3. 按鈕寬度尺寸

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

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

4.? 按鈕大小

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

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

六、用戶習慣和潛在的順序原則

1. “F”和“Z”型的視覺瀏覽規律

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

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

所以按鈕的排版也有相對應的規律和方法論可以驅動設計。

2. 展示數量

按鈕的數量展示是指在一個按鈕區中，按鈕數量的多少。B 端產品有三種按鈕數量放置的方式，以下只有第三種是推薦的。

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

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

第三種，對業務的目標和用戶的界面操作場景非常熟悉，有條有理的將按鈕合理展示，既保證用戶能順利操作，又保證產品界面整理有序。

總體來說，建議一個按鈕區的按鈕數量盡量控制在 5 個以內，多余 5 個置入“更多”中。

3. 歸類聚合

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

4. 按鈕位置

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

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

5. 按鈕順序

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

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

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

方向性原則

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

相關按鈕臨近原則

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

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

第一：制定自己所負責的產品設計規范的內容塊中按鈕組的設計位置，例如 Footer 區按鈕組的位置在哪里（可以區分場景也可以不區分，由產品覆蓋的業務范疇決定）。

第二：制定主次按鈕的位置（是否區分場景也看產品情況）。在阿里云平臺設計規范中，主按鈕都在左側；而在 antd 中，主次按鈕位置是分場景的。

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

七、按鈕的交互方式

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

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

2. 點擊按鈕后關閉、退出當前操作，例如保存對表單的操作

3. 點擊按鈕后關閉、退出當前操作，例如保存對表單的操作

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

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

6. 鼠標懸浮在按鈕觸發面板類反饋，例如用戶設置、換膚

八、總結

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

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

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

本文由 @斜杠南青年 原創發布于人人都是產品經理，未經許可，禁止轉載。

圖來自 Unsplash，基于CC0協議。