中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：在B類產品設計中，會涉及到一系列抽象/具象事物的流轉和變化。在不同的流程狀態中，對應著不同的角色和具體操作。作者分享了在B類產品設計中的細節，我們一起來看看流程狀態的具體細節吧。

一、什么是流程狀態

B 類產品通常涉及一系列抽象/具象事物的流轉、變化，如一個任務的執行、一家商家的入駐等等，這些過程均涉及規范的流程，流程的不同階段涉及不同的狀態，不同的狀態又對應不同的角色和具體操作（如下圖）。

因此流程狀態的設計必不可少，且必須清晰易懂、簡潔直接。

除了流程狀態之外，還有一種 B 類產品中常見的狀態，就是生命周期狀態，例如營銷推廣的推廣組狀態可分為「推廣中」、「已下線」等等。

在很多產品中，生命周期與關鍵流程有緊密的聯系，兩種類型的狀態會有一定交叉。本文主要討論的是流程狀態。

二、狀態的命名

流程狀態的設計原則與人機交互的最根本原則一致，即「以用戶為中心」，確保目標用戶在相應的使用場景下能夠快速理解并正確執行相關操作。

1. 按行業規則命名

專業工具或平臺的設計中，對于狀態的命名如果有行業約定俗成的術語，則遵照行業規則命名，即便在體驗設計師自己眼中可能不夠簡潔美好。

例如：以工程師為主要用戶群體的項目管理工具 Aone 中，bug 的狀態有 10 種（如下圖），且遵循了英文技術術語。對于設計師來說狀態種類復雜、語言不統一，但從用戶的角度來說這樣是必須的、規范的，因此設計師要尊重用戶的習慣和需求。

2. 圍繞核心操作命名

流程的名稱通常是描述對應操作的過程或結果，如「待付款」、「退款中」是操作的過程，「完成付款」、「退款失敗」是操作的結果。

3. 單個核心操作

最簡單、最常見的流程是：角色A 發起流程 – 角色B 進行操作 – 流程結束給出結果。

這種兩個角色三步走的流程，狀態命名通常分為如下兩種（框中是狀態命名）：

上圖里面的動詞可替換成其他動作；結果狀態也可用「已通過」、「未通過」等，根據實際情況而定。

圍繞一個核心的操作，也可能涉及多個角色。

例如：最常見的審批流程，過程中涉及多個角色的層層審批。如果不同角色審批時，用戶可執行的操作不同，或審批的詳細過程對用戶非常關鍵，這時審批單的狀態命名上需要注明具體角色。

如果通常不需要關注具體到哪個人審批了，則統一稱為「審批中」即可，用戶可以到詳情頁面查看具體進度。

4. 多個核心操作

涉及多個角色、一串核心操作的復雜流程。

在流程完成之前的中間過程中，告知用戶下一步待執行的操作，比上一步剛剛完成哪個更重要。

在角色多、極易混淆的情況下建議在狀態名上增加角色名。

例如：數字倉單的倉單質押流程中涉及三個角色（存貨人、倉儲方、資金方）多個步驟，過程中關鍵是引導用戶繼續后續操作、高效完成申請，所以狀態上展示當前要進行的操作。

同時流程中包含連續多個角色的接力審核確認，容易混淆，因此狀態標簽中顯示當前需要哪個角色進行操作；而放款、收款的角色很明顯是資金方和申請方來操作，所以對應的狀態沒有顯示角色名稱。如圖：

同一階段時，不建議區分不同用戶角色看到的狀態名，可以給他們不同的反饋或提醒。

狀態組間存在一對多的映射關系時，要注意區分邏輯關系，不建議將上下層狀態打平到一起。

接上面數字倉單的案例：系統中，貨物的所有者可以用倉單進行質押，這樣倉單就會有「未質押」、「質押申請中」和「質押中」狀態（不允許重復質押）。而質押申請是個復雜的流程，「質押申請中」這一倉單狀態，對應「質押申請單」的一系列流程狀態。

同理，在倉單解除質押、注銷等其它情況下，又會有「解質流程中」、「注銷中」等狀態，對應的「解除質押流程」、「注銷流程」有會一系列對應的狀態。如圖：

這種情況下要梳理好業務流程，如果將上下層狀態打平到一起，短期內可能看起來比較簡潔，但隨著產品復雜度的提升（B 類產品通常會越來越復雜），邏輯關系會越來越混亂。

三、狀態的視覺設計

1. 狀態的顏色

表示狀態的顏色不建議超過 5 種：紅色、橙色、綠色、藍色、灰色。

設計師需要結合色彩的功能特性、品牌色板、產品邏輯、用戶需求來選擇適合的顏色。常用配色舉例：

狀態的顏色不止會用在標簽上，對應的可視化圖表、圖標等視覺元素要用色一致。例如進度條：

2. 狀態標簽的樣式

不同狀態對應不同用戶的不同操作，因此狀態信息通常與普通文本在視覺上有所區分。常用的樣式包括彩色標簽、彩色圓點等等。例如：

注意列表、表單中狀態標簽的樣式統一。

四、總結

1. 原則

流程狀態的設計原則與人機交互的最根本原則一致：以用戶為中心。

2. 命名

1. 在流程完成之前的中間過程中，告知用戶下一步待執行的操作，比上一步剛剛完成哪個更重要；
2. 在角色多、極易混淆的情況下建議在狀態名上增加角色名；
3. 同一階段時，不建議區分不同用戶角色看到的狀態名，可以給他們不同的反饋或提醒。
4. 專業工具或平臺中，如果有行業約定俗成的術語來命名狀態，則遵照行業規則。

3. 關系

狀態組間存在一對多的映射關系時，不要將上下層狀態打平到一起。

4. 顏色

表示狀態的顏色不建議超過「紅色、橙色、綠色、藍色、灰色」這 5 種。

作者：林葉，螞蟻集團設計師

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

題圖來自Unsplash，基于 CC0 協議