B端按鈕交互規(guī)范設計

2 評論 17260 瀏覽 155 收藏 9 分鐘

編輯導語:B端產(chǎn)品的按鈕應該如何設計?本文作者從按鈕的位置、對齊方式、順序、視覺強度還有大小這幾個方面,通過實際操作為我們進行了分析,希望這篇文章能對你的按鈕設計有所啟發(fā)。

一、定義

1. 內(nèi)容塊

可以將整個頁面視為一個內(nèi)容塊,也將一張卡片視為一個內(nèi)容塊,或者僅僅是界面中的一個小小的內(nèi)容單元也可以視為一個內(nèi)容塊。

界面中,一個內(nèi)容塊的基本構(gòu)成有三部分:Header、Body、Footer。

常規(guī)來說,一個內(nèi)容塊通常闡述一個主題:Header 申明主題,Body 放置該主題的具體內(nèi)容,F(xiàn)ooter 主題的延伸信息和操作。

二、按鈕的位置

按鈕的位置有三種:Header、Body、Footer

1. Header

放置影響全局變更的操作,比如復選后的操作,新建、編輯……

2. Body

放置跟隨內(nèi)容生效的操作,比如表單中的上傳圖片,添加條目……

3. Footer

放置完結(jié)類含義的操作,比如確定和取消。

三、按鈕對齊方式

按鈕的對齊方式取決于用戶的瀏覽方式,對于用戶瀏覽方式的研究常見的方法為眼動測試,基本結(jié)論有:

  • 對于大量同質(zhì)信息平衡分布的情況(表單即屬于這種情況),視覺都趨向于從上到下,從左到右的眼動規(guī)律;
  • 左上角是視覺的第一落點區(qū),而右下角是視覺最終落點區(qū);
  • 設計的元素的會影響視線的變動,比如顏色、圖片。

Header區(qū)域:左上角作為第一視覺落點,一般用來放置標題,其次是按鈕。

Body區(qū)域:做主任務流程,整體布局需要指明一條清晰的路徑。將輸入和操作強制垂直對齊,可以清楚地傳達如何完成表單填寫。

Footer區(qū)域:右下角作為視覺最終落點,主按鈕采用右對齊。

1. 左對齊

左對齊意味著越重要的按鈕越靠左,順序為:一級按鈕——二級按鈕——三級按鈕。

Header區(qū)域,如果沒有標題,就采用按鈕做對齊;body區(qū)域與表單對齊,也就意味著左對齊。

對于控住單行輸入的表單的按鈕,一般將按鈕放在輸入組件旁邊,有時候會為了布局的美觀放在輸入組件的下方。

2. 右對齊

左對齊意味著越重要的按鈕越靠左,順序為:三級按鈕——二級按鈕——一級按鈕。

一般情況下,彈窗內(nèi)的按鈕區(qū)域默認右對齊。

對于整個網(wǎng)頁場景,Header區(qū)域,如果有標題,標題左對齊,按鈕右對齊;Footer區(qū)域,右下角作為視覺最終落點,主按鈕采用右對齊。

四、按鈕順序

主按鈕放左邊還是右邊?

各頭部的互聯(lián)網(wǎng)公司的處理都不盡相同,可見放左邊還是右邊都是可以被接受的,只要在系統(tǒng)中保持交互的一致。

一般上認為大部分人作為右撇子,主按鈕放在右邊更容易被點擊,但在不同場景中還是有差異的,見按鈕的對齊方式。

1. 風險操作

可能造成損失的操作,特別是破壞性操作,如果不是用戶期望點擊的按鈕,應該盡量遠離常用按鈕。

如果此時主按鈕放在左對齊,風險按鈕就放右邊,反之亦然。

2. 方向性含義

一般認為,具有返回意義的按鈕,應該放在左側(cè),暗示其方向是回到之前。

3. 對話習慣

按照對話習慣排列按鈕。

界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程,按照日常對話的順序設計按鈕閱讀順序更自然。

當用戶修改了一項設置,用戶最有可能的行為是保存這項變更,我們會有優(yōu)先問是否保存,然后才是是否要離開——這個思路常用于確認按鈕的主次(正面性的問題優(yōu)先)。

4. 易操作性

對于一組按鈕來說(常見于工具欄),一般最左邊和最右邊放主按鈕/高頻操作,較低頻操作放中間。原因在于用戶的瀏覽模式從左到右,會更容易注意到視覺的起點和終點,其次對于操作鼠標來說對邊角的按鈕更容易被定位到。

拿導航欄右側(cè)的菜單來說:有四個工具,其中發(fā)布作為主,按鈕放在最左側(cè),并使用實心icon+主題色高亮;個人信息屬于信息層級最高,靠近邊緣能夠幫助用戶進行快速選擇。

五、按鈕的視覺強度

視覺層面

1. 一級按鈕

一級按鈕通常是主按鈕,突出“完成”、“推薦”的操作,一個按鈕區(qū)最多一個主按鈕,也可以沒有主按鈕。

2. 二級按鈕

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

3. 三級按鈕

沒有外邊框,用鏈接色突出,例如文字按鈕。

4. 其他

并不是非常規(guī)范的按鈕,用于滿足復雜的個性化需求。這類圖標需要保證用戶易于識別,比如純圖標有必須要hover顯示提醒。

六、按鈕大小

1. 高度

視覺層面,根據(jù)按鈕區(qū)域大小限制按鈕高度。

2. 寬度

視覺層面,限制最小寬度和最大寬度,當文字長度超出按鈕最大長度,超出部分使用省略號表示,其次也可以通過縮小字號的方式。

 

本文由 @阿偉ND 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝整理,正在做B端系統(tǒng),這篇很適用

    來自江蘇 回復
  2. 錯別字我也是醉了

    回復