在B端產(chǎn)品的設(shè)計(jì)中，步驟條是一種常見的導(dǎo)航組件，它幫助用戶理解和導(dǎo)航復(fù)雜的任務(wù)流程。本文深入探討了步驟條的設(shè)計(jì)要點(diǎn)，希望能幫助大家更好地理解和應(yīng)用這一重要的界面元素。

步驟條是一個常見的導(dǎo)航形式，在 B 端產(chǎn)品中我們隨處可以見到步驟條的影子。

在表單頁、詳情頁、登錄模塊等界面中，步驟條常被用于處理頁面中的復(fù)雜關(guān)系。昨天在輔導(dǎo)同學(xué)進(jìn)行作品集輸出時，我們聊到了步驟條橫向與縱向到底有何區(qū)別、以及它的使用方法。今天我們就來聊聊步驟條的設(shè)計(jì)要點(diǎn)。

一、步驟條的拆解

到底什么是步驟條？在我看來，它是將系統(tǒng)當(dāng)中的復(fù)雜任務(wù)進(jìn)行分解，通過導(dǎo)航的形式引導(dǎo)用戶按規(guī)定進(jìn)行流程上操作，并會通過符號信息告知用戶當(dāng)前進(jìn)度。

在整個設(shè)計(jì)系統(tǒng)當(dāng)中，步驟條屬于導(dǎo)航組件，其目的就是快速引導(dǎo)用戶。對于一個基本的步驟條，我們主要由三部分組成：

1.步驟狀態(tài)它是用于顯示步驟條的順序以及進(jìn)度狀態(tài)的重要標(biāo)識，通過不同的狀態(tài)將它的導(dǎo)航功能進(jìn)行強(qiáng)化。

在常規(guī)狀態(tài)當(dāng)中，它主要包含 已完成、進(jìn)行中、未完成。并且在設(shè)計(jì)處理上，我們會考慮不同狀態(tài)的設(shè)計(jì)要點(diǎn)。

• 已完成通常為空心：因?yàn)橐淹瓿傻膬?nèi)容并不想讓用戶過多注意，因此空心最為合適。并且在圖標(biāo)選擇上會使用「正確」符號進(jìn)行呈現(xiàn)。
• 進(jìn)行中則是實(shí)心：它是頁面中最重要的關(guān)注信息，因此使用實(shí)心的方式會更為強(qiáng)調(diào)。
• 未完成則為置灰：因?yàn)闆]完成的內(nèi)容不需要用戶過多的關(guān)注，所以會將其弱化。

當(dāng)然除了常規(guī)狀態(tài)之外，還會有很多特殊的狀態(tài)。

比如在很多審批業(yè)務(wù)當(dāng)中，也會有：待審核、暫停、部分完成 等特殊狀態(tài)，這時候我們在設(shè)計(jì)時就會更加小心。具體如何表達(dá)，我們是需要在狀態(tài)中梳理出來，給出解決方案。

2.標(biāo)題內(nèi)容標(biāo)題則是需要總結(jié)當(dāng)前頁面當(dāng)中所呈現(xiàn)的信息內(nèi)容，我們通過標(biāo)題的形式加以概括。

在字?jǐn)?shù)上數(shù)量不宜過多，一般會限制在 10 個字以內(nèi)，如果標(biāo)題過長，會導(dǎo)致整個步驟條整體失衡，則需要考慮通過「步驟條樣式」進(jìn)行優(yōu)化。

3.輔助信息等其他操作輔助信息是在步驟條黨總進(jìn)行輔助說明，在組件設(shè)置當(dāng)中它不是一個必選項(xiàng)，很多時候系統(tǒng)當(dāng)中并沒有輔助信息。

但我們在針對一些復(fù)雜情況時，會考慮將輔助信息的內(nèi)容用于操作的替換。

舉一個之前的例子，比如在一個審批信息當(dāng)中，用戶沒有權(quán)限進(jìn)行審批信息的查看。因此下方的所有信息內(nèi)容都是禁用的狀態(tài)。但與此同時，需要有提醒通知的入口。那我們就會將這樣的一些小操作放置在步驟條的頂部，用戶的感知也會更強(qiáng)烈。

二、步驟條的布局

「我們回到文章開頭所提出的那個問題，步驟條究竟是上下布局和左右布局，它們到底有什么差別？」

首先，幾乎所有的布局問題，都會與數(shù)量密切相關(guān)。在導(dǎo)航菜單當(dāng)中，頂部導(dǎo)航與側(cè)邊導(dǎo)航 其中一個重要因素就是數(shù)量，同樣在步驟條當(dāng)中也是如此～

在系統(tǒng)當(dāng)中，步驟條的數(shù)量不宜過多。因?yàn)閿?shù)量過多會導(dǎo)致適配異常麻煩， 甚至?xí)嬖趩为?dú)的橫向滾動的風(fēng)險，所以在使用之前，盡量控制在 3-8 個步驟之間。上下布局步驟條位于頁面上方進(jìn)行展示，它的邏輯與頂部導(dǎo)航類似，由于文本橫向排列，導(dǎo)致會出現(xiàn)諸多限制。

在步驟數(shù)量上，我們需要控制在 3-5 個之間，少于 3 個可以完全不使用步驟條；數(shù)量過多步驟條也無法呈現(xiàn)。

在閱讀連貫性上，用戶需要上下掃視來構(gòu)建流程的先后順序認(rèn)知，相比較左側(cè)布局，相對沒那么便捷直觀，對于較復(fù)雜、步驟較多的流程，用戶較難一眼看清全貌。

在設(shè)計(jì)風(fēng)格上，由于上下布局的步驟條使用較為頻繁，因此在行業(yè)當(dāng)中經(jīng)常會有精美的設(shè)計(jì)風(fēng)格。這部分我們在下個章節(jié)講到。左側(cè)布局步驟條位于頁面左側(cè)進(jìn)行展示，縱向排列能夠保證在頁面當(dāng)中可以呈現(xiàn)多個模塊。

在數(shù)量上，就可以將它的限制擴(kuò)大至 4-8 個之間，這里由于 3 個太少，并不需要占用如此多的面積，因此將其進(jìn)行擴(kuò)大。

在閱讀的連續(xù)性上，縱向可以直觀地展示流程的連貫性，相鄰步驟連接更為緊密，方便用戶快速對比相鄰步驟間的差異、關(guān)聯(lián)性等，對整個流程的線性推進(jìn)過程體現(xiàn)得更清晰。

例如在軟件安裝向?qū)Ы缑?，相鄰?“選擇安裝路徑” 和 “選擇安裝組件” 步驟橫向排列，用戶能輕易看出它們之間的銜接關(guān)系。

在風(fēng)格上，左側(cè)就會更為呆板，通常會和時間線類似的設(shè)計(jì)形式進(jìn)行表達(dá)，相對呈現(xiàn)會更弱一些。

三、風(fēng)格與趨勢

在設(shè)計(jì)風(fēng)格上，這里幫助到大家搜集了一些常見的風(fēng)格形式，可以即插即用～

1. 箭頭步驟條

2. 精簡步驟條

3. 復(fù)雜步驟條

最后，行業(yè)中其實(shí)對步驟條的使用也在隨之減少。

因?yàn)樽畛醯牟襟E條大多數(shù)是產(chǎn)品經(jīng)理根據(jù)業(yè)務(wù)邏輯梳理出來的一個步驟設(shè)定，隨著設(shè)計(jì)師不斷加入話語權(quán)不斷提高，我們會將表單設(shè)計(jì)從產(chǎn)品視角轉(zhuǎn)變?yōu)橛脩粢暯?，真正的去分析表單里面的?nèi)容而不是業(yè)務(wù)邏輯本身。

比如 阿里云的表單優(yōu)化、小紅書的商家后臺，都對表單步驟進(jìn)行了優(yōu)化，在我看來這些才是至關(guān)重要的部分。