編輯導(dǎo)語：B端產(chǎn)品項目是十分常見的設(shè)計內(nèi)容，而對產(chǎn)品設(shè)計的規(guī)范和設(shè)計拆解，對項目的設(shè)計效率提升有很大的價值和意義。本篇文章中，作者分享了自己在做 Ant Design 設(shè)計與運營工作中的經(jīng)驗沉淀和總結(jié)，感興趣的小伙伴不妨來看看。

本文源于讀者和粉絲的相關(guān)提問，以及我前段時間在做 Ant Design 設(shè)計與運營工作中的經(jīng)驗沉淀和總結(jié)，希望對你有幫助。

一、主要操作按鈕應(yīng)該放在哪邊

有細(xì)心的用戶發(fā)現(xiàn)，AntDesign按鈕組的里按鈕的排列順序似乎并沒有什么規(guī)范可言。

主操作 button 在官方給出的應(yīng)用案例中，一會兒放在次要 button 的左邊，一會兒又放在次要 button的右邊，如下圖：

△ 主button 放在次button的右邊

△ 主button 放在次button的左邊

其實 AntD 的按鈕擺放是有規(guī)律的。主按鈕設(shè)計規(guī)律依據(jù)的是“費茲定律”：任意一點移動到目標(biāo)中心位置所需要的時間，與目標(biāo)距離正相關(guān)，與目標(biāo)大小負(fù)相關(guān)。

你可以簡單的理解為：目標(biāo)越大、距離越短，越容易被點擊到。

所以按鈕等可點擊區(qū)域在合理的范圍之內(nèi)越大越容易點擊，反之，可點擊區(qū)域越小，越不容易操作。

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

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

二、抽屜和彈窗的區(qū)別是什么

在做頁面的過程中，你是不是也會有這樣的疑問：抽屜和彈窗基本上是一樣的功能，在設(shè)計過程中應(yīng)該如何區(qū)分和使用它們？

可以肯定的是彈窗和抽屜的功能基本上一致，我們從兩個角度來區(qū)分二者：

1. 從內(nèi)容承載量進行判斷

這是很簡單基礎(chǔ)的判斷邏輯，內(nèi)容較多的時候用抽屜，內(nèi)容較少的時候用彈窗。

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

比如，如果規(guī)定多于5項的表單都用抽屜，少于5 項的表單都用彈窗。

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

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

當(dāng)彈窗或抽屜的表單中包含二級彈窗或抽屜時，也是同樣的問題。其主要原因是用戶無法對將要填寫的內(nèi)容做出預(yù)判。

2. 從觸發(fā)方式進行判斷

這是從用戶操作行為的角度對二者進行區(qū)分。當(dāng)反饋內(nèi)容由系統(tǒng)觸發(fā)（對于用戶來說屬于被動接受），推薦使用彈窗；

當(dāng)反饋內(nèi)容由用戶觸發(fā)（對于用戶來說屬于主動喚起），則推薦使用抽屜。

這個判斷標(biāo)準(zhǔn)會使二者的邊界更清晰，對于用戶來說也更容易形成穩(wěn)定的預(yù)期。

三、瀏覽記錄的標(biāo)簽頁該如何使用

有用戶問我，他在另一款產(chǎn)品中看到了瀏覽記錄標(biāo)簽頁（見下圖），而 Ant Design 里面卻沒有，所以想了解一下關(guān)于標(biāo)簽頁的具體使用場景：

我認(rèn)為這種標(biāo)簽頁的作用，相當(dāng)于操作和瀏覽歷史，可以快速定位到曾經(jīng)瀏覽或使用過的功能頁面，它的使用場景具備以下特點：

• 產(chǎn)品功能模塊較多，且大部分情況下各個功能模塊之間沒有強烈的邏輯關(guān)系，較為獨立；
• 用戶需要在產(chǎn)品中同時進行幾個功能的操作；
• 產(chǎn)品單一功能模塊的內(nèi)容較為復(fù)雜，并在一個頁面中需要用戶進行較多的操作。

如果功能模塊之間邏輯關(guān)系較為緊密，我們通常推薦使用“面包屑”組件：

面包屑同樣可以顯示用戶的操作路徑，以及當(dāng)前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能引導(dǎo)用戶向前返回。面包屑的使用場景為：

• 當(dāng)系統(tǒng)擁有超過兩級以上的層級結(jié)構(gòu)；
• 當(dāng)需要告知用戶“你在哪里”時，并引導(dǎo)用戶向上返回。因此設(shè)計師可以根據(jù)產(chǎn)品的功能特點需要，來進行優(yōu)化和調(diào)整。

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

題圖來自 Unsplash，基于CC0協(xié)議。