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

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

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

一、步驟條的拆解

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

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

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

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

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

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

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

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

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

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

但我們?cè)卺槍?duì)一些復(fù)雜情況時(shí)，會(huì)考慮將輔助信息的內(nèi)容用于操作的替換。

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

二、步驟條的布局

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

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

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

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

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

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

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

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

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

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

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

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

1. 箭頭步驟條

2. 精簡(jiǎn)步驟條

3. 復(fù)雜步驟條

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

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

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