工作經驗| B 端產品組件設計細節及經驗分享(二)

1 評論 2768 瀏覽 27 收藏 7 分鐘

編輯導語:B端產品項目是十分常見的設計內容,而對產品設計的規范和設計拆解,對項目的設計效率提升有很大的價值和意義。本篇文章中,作者分享了自己在做 Ant Design 設計與運營工作中的經驗沉淀和總結,感興趣的小伙伴不妨來看看。

本文源于讀者和粉絲的相關提問,以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉淀和總結,希望對你有幫助。

一、主要操作按鈕應該放在哪邊

有細心的用戶發現,AntDesign按鈕組的里按鈕的排列順序似乎并沒有什么規范可言。

主操作 button 在官方給出的應用案例中,一會兒放在次要 button 的左邊,一會兒又放在次要 button的右邊,如下圖:

工作經驗| B 端產品組件設計細節及經驗分享(二)

△ 主button 放在次button的右邊

工作經驗| B 端產品組件設計細節及經驗分享(二)

△ 主button 放在次button的左邊

其實 AntD 的按鈕擺放是有規律的。主按鈕設計規律依據的是“費茲定律”:任意一點移動到目標中心位置所需要的時間,與目標距離正相關,與目標大小負相關。

你可以簡單的理解為:目標越大、距離越短,越容易被點擊到。

所以按鈕等可點擊區域在合理的范圍之內越大越容易點擊,反之,可點擊區域越小,越不容易操作。

因此,屏幕的邊和角很適合放置像菜單欄和按鈕這樣的主元素,因為不管你移動了多遠,鼠標最終會停在屏幕的邊緣,并更容易定位到按鈕或菜單的上面。

Ant Design 的主按鈕布局上就應用了這條原則,在特定的場景中將主按鈕布局在邊緣的位置,而并不是以左右來做位置上的規范。

二、抽屜和彈窗的區別是什么

在做頁面的過程中,你是不是也會有這樣的疑問:抽屜和彈窗基本上是一樣的功能,在設計過程中應該如何區分和使用它們?

可以肯定的是彈窗和抽屜的功能基本上一致,我們從兩個角度來區分二者:

1. 從內容承載量進行判斷

這是很簡單基礎的判斷邏輯,內容較多的時候用抽屜,內容較少的時候用彈窗。

但是這種方式無法清晰的化分邊界,同時會對用戶預期造成一定的困擾。

比如,如果規定多于5項的表單都用抽屜,少于5 項的表單都用彈窗。

由于用戶在擊發彈窗或抽屜時對于要填寫的表單數量沒有預期,所以很有可能會存在在同一個頁面中。

點擊相同類型的功能時,一會兒彈出來的是彈窗,一會兒彈出來的又是抽屜。

工作經驗| B 端產品組件設計細節及經驗分享(二)

當彈窗或抽屜的表單中包含二級彈窗或抽屜時,也是同樣的問題。其主要原因是用戶無法對將要填寫的內容做出預判。

2. 從觸發方式進行判斷

這是從用戶操作行為的角度對二者進行區分。當反饋內容由系統觸發(對于用戶來說屬于被動接受),推薦使用;

當反饋內容由用戶觸發(對于用戶來說屬于主動喚起),則推薦使用抽屜。

這個判斷標準會使二者的邊界更清晰,對于用戶來說也更容易形成穩定的預期。

三、瀏覽記錄的標簽頁該如何使用

有用戶問我,他在另一款產品中看到了瀏覽記錄標簽頁(見下圖),而 Ant Design 里面卻沒有,所以想了解一下關于標簽頁的具體使用場景:

工作經驗| B 端產品組件設計細節及經驗分享(二)

我認為這種標簽頁的作用,相當于操作和瀏覽歷史,可以快速定位到曾經瀏覽或使用過的功能頁面,它的使用場景具備以下特點:

  • 產品功能模塊較多,且大部分情況下各個功能模塊之間沒有強烈的邏輯關系,較為獨立;
  • 用戶需要在產品中同時進行幾個功能的操作;
  • 產品單一功能模塊的內容較為復雜,并在一個頁面中需要用戶進行較多的操作。

如果功能模塊之間邏輯關系較為緊密,我們通常推薦使用“面包屑”組件:

工作經驗| B 端產品組件設計細節及經驗分享(二)

面包屑同樣可以顯示用戶的操作路徑,以及當前頁面在系統層級結構中的位置,并能引導用戶向前返回。面包屑的使用場景為:

  • 當系統擁有超過兩級以上的層級結構;
  • 當需要告知用戶“你在哪里”時,并引導用戶向上返回。因此設計師可以根據產品的功能特點需要,來進行優化和調整。

 

本文由@ 元堯 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目標越大、距離越短,越容易被點擊到。學到了學到了

    來自廣西 回復