B端按钮设计指南
?
近兩年互聯(lián)網(wǎng)人口紅利殆盡，獲客成本明顯提高，C端整體突飛猛進式的增長基本結(jié)束。與此同時，互聯(lián)網(wǎng)開始賦能傳統(tǒng)行業(yè)，企業(yè)對互聯(lián)網(wǎng)服務(wù)需求逐年提升。今年疫情沖擊之下，“新基建”迅速成為坊間熱詞，B端產(chǎn)品借勢迎來了井噴式增長，也讓許多設(shè)計師小伙伴有了入局B端的機會 。
然而對許多初級或者沒有B端經(jīng)驗的設(shè)計師來說，B端產(chǎn)品設(shè)計總是讓人感到頭疼：功能太多，規(guī)范太多，產(chǎn)品和設(shè)計的爭議也非常大，而且網(wǎng)上的參考資料相較C端也是少得可憐。設(shè)計師只能在工作中自己總結(jié)經(jīng)驗。這里筆者就分享有關(guān)B端設(shè)計中按鈕設(shè)計的經(jīng)驗，希望能給大家?guī)硪恍椭?/p>
?
?
什么是B端產(chǎn)品？
?
談到按鈕設(shè)計前，先簡單說說B端產(chǎn)品。
B端產(chǎn)品主要面向的是企業(yè)客戶以及內(nèi)部員工使用，比如OA、ERP、CRM等，一般除了目標用戶，其他用戶很難接觸到。B端產(chǎn)品的設(shè)計通常需要結(jié)合具體的業(yè)務(wù)場景，功能和邏輯往往比較復(fù)雜，且用戶通常需要長時間沉浸使用，因此要求界面設(shè)計層級清晰，布局簡潔高效。
B端按鈕設(shè)計通常存在三方面的復(fù)雜性：
按鈕數(shù)量多：B端產(chǎn)品幾乎所有頁面都會有按鈕，甚至同時有多個按鈕。對層級感和美觀度的要求都很高；
應(yīng)用場景多：按鈕需要適應(yīng)B端產(chǎn)品的多種業(yè)務(wù)場景，包括登錄界面、表單、彈窗、信息提示框等；且每個場景出現(xiàn)的形式都不盡相同，需要對每種場景嚴格規(guī)范才不至于使用混亂；
出現(xiàn)形式多：按鈕通常具有正常、聚焦、懸停等多種狀態(tài)，需要保證用戶能夠及時發(fā)現(xiàn)并獲得準確的反饋效果。
要想解決這些問題，我們需要了解按鈕的主要類型和設(shè)計細節(jié)，以便在各類情況下靈活運用。
?
?
按鈕類型
按鈕主要包括主按鈕、次按鈕、文字按鈕、圖標按鈕、菜單按鈕、圖標+文字按鈕6大類。
?
主按鈕（Primary Button）
主按鈕顧名思義承載當前頁面的核心功能，通常為新建、保存、確定這一類的正向操作。由于重要性高，要讓用戶一眼就能看見，往往設(shè)計的比較醒目。另外主按鈕在頁面中不宜安排的過多，否則容易相互干擾；而且只有最重要的功能才適合設(shè)計為主按鈕，因此并非所有頁面都需要有主按鈕。
?
次按鈕/標準按鈕（Default Button）
次按鈕也叫標準按鈕，是頁面中出現(xiàn)頻率最高的按鈕類型。一般來說，只要不是需要被強調(diào)的核心功能，都可以作為次按鈕的形式出現(xiàn)。由于出現(xiàn)的次數(shù)較多，次按鈕往往不宜設(shè)計的過于搶眼，通常采用文字+邊框或者文字+淺色背景的形式。
?
文字按鈕/鏈接（Text Button/Link)
文字按鈕類似次按鈕，也是頁面中大量出現(xiàn)的按鈕類型。由于只以文字形式出現(xiàn)，視覺上層級較弱，可以和次按鈕區(qū)分一定的層級關(guān)系，通常在列表設(shè)計中被大量使用。
?
圖標按鈕（Icon Button）
圖標按鈕相較其他按鈕體積較小，因此布局的靈活性很高。且圖標形式給了設(shè)計師更多表現(xiàn)的空間，是B端設(shè)計中最容易出彩的部分，許多B端產(chǎn)品都通過精心設(shè)計的圖標按鈕傳遞產(chǎn)品調(diào)性和品牌感。
由于沒有文字元素，圖標按鈕容易出現(xiàn)用戶理解上的偏差。為避免這一情況，需要在設(shè)計時做好用戶測試，測試該圖標是否符合用戶視覺預(yù)期。或者當用戶Hover時顯示Tooltips提示按鈕含義，幫助用戶理解。
菜單按鈕（Menu Button）
菜單按鈕可以理解為一般按鈕的集合，即將多個相關(guān)功能合并在一起，通過點擊按鈕以下拉菜單的形式出現(xiàn)。菜單按鈕可以有效減少界面按鈕冗雜的問題，提高界面使用效率。
?
圖標+文字按鈕（Icon add Button）
一般指主按鈕中加入圖標，為了進一步突出主按鈕的視覺層級，也有增加美觀度提高用戶點擊欲望的作用。
?
除了以上介紹的6種主要按鈕類型外，還可以依據(jù)功能類型將按鈕分為行為召喚按鈕、懸浮按鈕、標簽按鈕、危險按鈕和開關(guān)按鈕。
?
-
行為召喚（Call To action，CTA）按鈕的目的是通過設(shè)計誘導(dǎo)或激勵用戶點擊，從而實現(xiàn)產(chǎn)品的訴求。此類按鈕的設(shè)計在顏色、形狀、樣式上都需要突出，讓人擁有點擊的欲望。行為召喚按鈕一般不會出現(xiàn)在B端產(chǎn)品的內(nèi)部，但在官網(wǎng)或活動頁面被廣泛運用。
-
懸浮按鈕是Android規(guī)范中的一個控件，隨著各平臺規(guī)范的相互融合借鑒，iOS甚至網(wǎng)頁端也經(jīng)常回看到各種各樣的懸浮按鈕。在B端項目中，懸浮按鈕有時會承擔主按鈕的功能，如創(chuàng)建、搜索等功能；同時也會作為輔助功能，如幫助或返回頂部等。
-
危險按鈕可以是主按鈕之外的任意按鈕類型，用來警告用戶審慎考慮，且點擊后通常需要二次確認，避免誤操作。
-
開關(guān)（Switch）按鈕是兩種相互對立狀態(tài)間的切換，多用于功能的開啟和關(guān)閉，一般操作后會即刻生效，多用于設(shè)置界面中。
?
?
設(shè)計細節(jié)
?
除了上面總結(jié)的6種主要按鈕類型，要設(shè)計出一個好用的按鈕，還需要重視一些細節(jié)，例如顏色、形狀、狀態(tài)、位置等。
?
顏色
顏色是最容易感知到的對比方式，不同的顏色會給用戶不一樣的心理預(yù)期。B端產(chǎn)品的用色一般以理性、嚴肅的基調(diào)為主，其中藍色最為常見。如選用其他色彩可適當調(diào)低飽和度，以降低長時間使用造成的視覺疲勞感。
在設(shè)計時，還要將顏色分為主題色、強調(diào)色和輔助色，以適應(yīng)不同按鈕層級。主題色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對外的形象。主題色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。主題色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標等；強調(diào)色多用于需要拉開主次關(guān)系的次按鈕中，一般采用主題色的對比色彩或者鄰近色；輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
?
形狀
在設(shè)計按鈕時，需要根據(jù)整個界面風格設(shè)計適合的形狀，主要有直角、小圓角、全圓角、異形四種樣式。
直角的含義：嚴謹、力量、高端。屬于B端產(chǎn)品最常用的類型，給人嚴謹、安全、高端的感覺。
小圓角的含義：穩(wěn)定、中性。在B端產(chǎn)品中也經(jīng)常出現(xiàn)。
全圓角的含義：活潑、年輕、安全。適用于兒童類、年輕類、娛樂類、購物類產(chǎn)品中，提升親和力，拉近用戶的距離。
異形按鈕的含義：不穩(wěn)定、活潑、另類。適用于需要用戶做出選擇的場景中。
?
狀態(tài)
在部分界面設(shè)計中需要考慮按鈕的狀態(tài)設(shè)計，從而讓用戶獲得清晰流暢的操作反饋。B端完整的系統(tǒng)按鈕可以分為：正常狀態(tài)（Normal）、聚焦狀態(tài)（Focus）、懸停狀態(tài)（Hover）、點擊狀態(tài)（Active）、加載狀態(tài)（Loading）、禁用狀態(tài)（Disabled）。
一般來說，正常狀態(tài)（包括加載狀態(tài)）展示的是產(chǎn)品的主色；聚焦狀態(tài)僅限桌面端，代表系統(tǒng)光標所在位置，一般用背景色或添加醒目的描邊表示；懸停狀態(tài)通常疊加20%左右的白色或添加陰影，表現(xiàn)按鈕向用戶方向靠近的效果；點擊狀態(tài)在正常狀態(tài)的基礎(chǔ)上疊加15%的黑色，產(chǎn)生被按下的感覺；禁用狀態(tài)則一般用灰色或者將正常狀態(tài)的透明度降低至30%左右。
?
位置
位置的選擇一般對主按鈕較為重要，在設(shè)計時要以引導(dǎo)用戶、方便用戶點擊為目的。
根據(jù)尼爾森團隊眼動追蹤研究結(jié)果發(fā)現(xiàn)，用戶通常以F型和Z型模式瀏覽頁面，其中Z型瀏覽模式較為普遍，F型瀏覽模式通常為新聞平臺、博客等以文字為主的頁面。
由此可知頁面的左上方通常為用戶視覺的起點，右上方次之。我們可以將主功能按鈕放置于用戶最容易注意到的位置，相反較為低頻的按鈕則可以安排在其他位置，符合用戶的閱讀習慣。
?
?
需要注意的點
?
在了解了按鈕的常見類型和設(shè)計細節(jié)后，已經(jīng)可以設(shè)計出符合規(guī)范的按鈕了。除此之外，還有以下幾點需要注意：
?
盡量使用常見的按鈕設(shè)計
B端產(chǎn)品的功能較多，意味著會有大量按鈕同時出現(xiàn)在頁面中，用戶在使用時需要立即知道什么是可點擊的。如果按鈕因樣式特殊而無法被用戶第一時間看到，就是失敗的按鈕設(shè)計。
?
不要忘記間距
不僅按鈕本身的樣式很重要，其附近的間距大小也會影響用戶發(fā)現(xiàn)和理解按鈕的成本。所以留足間距才是明智的選擇。
?
使用合理的文案
按鈕文案需要清楚的說明其功能，減少用戶操作時的困惑。有時還能通過對用戶行為的預(yù)測，為其提供意想不到的驚喜效果。
避免太多按鈕
正如前文提到的，按鈕太多是B端產(chǎn)品常見的問題。滿屏的按鈕會讓用戶感到困惑，使用效率低下。我們可以嘗試將同類型功能折疊為菜單按鈕，或者根據(jù)重要程度以不同形式的按鈕展示，盡量降低視覺的疲勞感。
?
提供互動的視覺或聽覺反饋
當用戶點擊按鈕時，給予適當?shù)囊曈X或聽覺反饋會極大地提升用戶的使用體驗，提升產(chǎn)品的品質(zhì)感。
?
總結(jié)
以上就是關(guān)于B端按鈕設(shè)計的全部分享了，不管是做 C 端產(chǎn)品還是 B 端產(chǎn)品，都是為了實現(xiàn)用戶的需求、幫用戶解決問題。剛接觸B端產(chǎn)品的時候，最希望能把產(chǎn)品做的炫酷、美觀，工作中慢慢地發(fā)現(xiàn)項目的背后思考更為重要，產(chǎn)出的設(shè)計成果也應(yīng)該有理有據(jù)、支撐整個設(shè)計體系。
此外，B端設(shè)計師可以把更多的精力投入到沉淀行業(yè)知識、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上，輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨有的閃光點，從而切實解決問題和實現(xiàn)價值。
?
文末福利
最后給大家贈送摹客專業(yè)版激活碼【cyrenecsdn】
領(lǐng)取即可全方位體驗這款強大的高保真設(shè)計利器，同時支持在線交付Sketch/PS/XD/Axure/Figma設(shè)計稿，還可以享受7*12小時在線客服支持
點擊兌換激活碼?或 復(fù)制鏈接領(lǐng)取??https://www.mockplus.cn/get-idoc?hmsr=cyrenecsdn
?
?
?
總結(jié)
- 上一篇： Fast-MVSNet解读
- 下一篇： 世纪华通回复深交所问询函：盛大游戏310