編輯導語：B端產品專案是十分常見的設計內容，而對產品設計的規範和設計拆解，對專案的設計效率提升有很大的價值和意義。本篇文章中，作者分享了自己在做 Ant Design 設計與運營工作中的經驗沉澱和總結，感興趣的小夥伴不妨來看看。
本文源於讀者和粉絲的相關提問，以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉澱和總結，希望對你有幫助。
一、主要操作按鈕應該放在哪邊
有細心的使用者發現，AntDesign按鈕組的裡按鈕的排列順序似乎並沒有什麼規範可言。
主操作 button 在官方給出的應用案例中，一會兒放在次要 button 的左邊，一會兒又放在次要 button的右邊，如下圖：
△ 主button 放在次button的右邊
△ 主button 放在次button的左邊
其實 AntD 的按鈕擺放是有規律的。主按鈕設計規律依據的是
“費茲定律”
：任意一點移動到目標中心位置所需要的時間，與目標距離正相關，與目標大小負相關。
你可以簡單的理解為：
目標越大、距離越短，越容易被點選到
。
所以按鈕等可點選區域在合理的範圍之內越大越容易點選，反之，可點選區域越小，越不容易操作。
因此，螢幕的邊和角很適合放置像選單欄和按鈕這樣的主元素，因為不管你移動了多遠，滑鼠最終會停在螢幕的邊緣，並更容易定位到按鈕或選單的上面。
Ant Design 的主按鈕佈局上就應用了這條原則，在特定的場景中將主按鈕佈局在
邊緣的位置
，而並不是以左右來做位置上的規範。
二、抽屜和彈窗的區別是什麼
在做頁面的過程中，你是不是也會有這樣的疑問：抽屜和彈窗基本上是一樣的功能，在設計過程中應該如何區分和使用它們？
可以肯定的是彈窗和抽屜的功能基本上一致，我們從兩個角度來區分二者：
1. 從內容承載量進行判斷
這是很簡單基礎的判斷邏輯，內容較多的時候用抽屜，內容較少的時候用彈窗。
但是這種方式
無法
清晰的
化分邊界
，同時會對
使用者預期
造成一定的困擾。
比如，如果規定多於5項的表單都用抽屜，少於5 項的表單都用彈窗。
由於使用者在擊發彈窗或抽屜時對於要填寫的表單數量沒有預期，所以很有可能會存在在同一個頁面中。
點選相同型別的功能時，一會兒彈出來的是彈窗，一會兒彈出來的又是抽屜。
當彈窗或抽屜的表單中包含二級彈窗或抽屜時，也是同樣的問題。其主要原因是使用者無法對將要填寫的內容做出預判。
2. 從觸發方式進行判斷
這是從使用者操作行為的角度對二者進行區分。當反饋內容由
系統觸發
（對於使用者來說屬於被動接受），推薦使用
彈
窗
；
當反饋內容由
使用者觸發
（對於使用者來說屬於主動喚起），則推薦使用
抽屜
。
這個判斷標準會使二者的邊界更清晰，對於使用者來說也更容易形成穩定的預期。
三、瀏覽記錄的標籤頁該如何使用
有使用者問我，他在另一款產品中看到了瀏覽記錄標籤頁（見下圖），而 Ant Design 裡面卻沒有，所以想了解一下關於標籤頁的具體使用場景：
我認為這種標籤頁的作用，相當於
操作和瀏覽歷史
，可以
快速定位
到曾經瀏覽或使用過的功能頁面，它的使用場景具備以下特點：
產品
功能模組較多
，且大部分情況下各個功能模組之間
沒有強烈的邏輯關係
，較為獨立；
使用者需要在產品中
同時進行幾個功能
的操作；
產品單一功能模組的
內容較為複雜
，並在一個頁面中需要使用者進行較多的操作。
如果功能模組之間
邏輯關係較為緊密
，我們通常推薦使用
“麵包屑”
元件：
麵包屑同樣可以
顯示使用者的操作路徑
，以及當前頁面在系統層級結構中的
位置
，並能引導使用者
向前返回
。麵包屑的使用場景為：
當系統擁有超過
兩級以上的層級結構
；
當需要告知使用者
“你在哪裡”
時，並引導使用者
向上返回
。因此設計師可以根據產品的功能特點需要，來進行最佳化和調整。
本文由@ 元堯 原創釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。
