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

在B端產品的設計中，步驟條是一種常見的導航組件，它幫助用戶理解和導航復雜的任務流程。本文深入探討了步驟條的設計要點，希望能幫助大家更好地理解和應用這一重要的界面元素。

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

在表單頁、詳情頁、登錄模塊等界面中，步驟條常被用于處理頁面中的復雜關系。昨天在輔導同學進行作品集輸出時，我們聊到了步驟條橫向與縱向到底有何區別、以及它的使用方法。今天我們就來聊聊步驟條的設計要點。

一、步驟條的拆解

到底什么是步驟條？在我看來，它是將系統當中的復雜任務進行分解，通過導航的形式引導用戶按規定進行流程上操作，并會通過符號信息告知用戶當前進度。

在整個設計系統當中，步驟條屬于導航組件，其目的就是快速引導用戶。對于一個基本的步驟條，我們主要由三部分組成：

1.步驟狀態它是用于顯示步驟條的順序以及進度狀態的重要標識，通過不同的狀態將它的導航功能進行強化。

在常規狀態當中，它主要包含 已完成、進行中、未完成。并且在設計處理上，我們會考慮不同狀態的設計要點。

• 已完成通常為空心：因為已完成的內容并不想讓用戶過多注意，因此空心最為合適。并且在圖標選擇上會使用「正確」符號進行呈現。
• 進行中則是實心：它是頁面中最重要的關注信息，因此使用實心的方式會更為強調。
• 未完成則為置灰：因為沒完成的內容不需要用戶過多的關注，所以會將其弱化。

當然除了常規狀態之外，還會有很多特殊的狀態。

比如在很多審批業務當中，也會有：待審核、暫停、部分完成 等特殊狀態，這時候我們在設計時就會更加小心。具體如何表達，我們是需要在狀態中梳理出來，給出解決方案。

2.標題內容標題則是需要總結當前頁面當中所呈現的信息內容，我們通過標題的形式加以概括。

在字數上數量不宜過多，一般會限制在 10 個字以內，如果標題過長，會導致整個步驟條整體失衡，則需要考慮通過「步驟條樣式」進行優化。

3.輔助信息等其他操作輔助信息是在步驟條黨總進行輔助說明，在組件設置當中它不是一個必選項，很多時候系統當中并沒有輔助信息。

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

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

二、步驟條的布局

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

首先，幾乎所有的布局問題，都會與數量密切相關。在導航菜單當中，頂部導航與側邊導航 其中一個重要因素就是數量，同樣在步驟條當中也是如此～

在系統當中，步驟條的數量不宜過多。因為數量過多會導致適配異常麻煩， 甚至會存在單獨的橫向滾動的風險，所以在使用之前，盡量控制在 3-8 個步驟之間。上下布局步驟條位于頁面上方進行展示，它的邏輯與頂部導航類似，由于文本橫向排列，導致會出現諸多限制。

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

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

在設計風格上，由于上下布局的步驟條使用較為頻繁，因此在行業當中經常會有精美的設計風格。這部分我們在下個章節講到。左側布局步驟條位于頁面左側進行展示，縱向排列能夠保證在頁面當中可以呈現多個模塊。

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

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

例如在軟件安裝向導界面，相鄰的 “選擇安裝路徑” 和 “選擇安裝組件” 步驟橫向排列，用戶能輕易看出它們之間的銜接關系。

在風格上，左側就會更為呆板，通常會和時間線類似的設計形式進行表達，相對呈現會更弱一些。

三、風格與趨勢

在設計風格上，這里幫助到大家搜集了一些常見的風格形式，可以即插即用～

1. 箭頭步驟條

2. 精簡步驟條

3. 復雜步驟條

最后，行業中其實對步驟條的使用也在隨之減少。

因為最初的步驟條大多數是產品經理根據業務邏輯梳理出來的一個步驟設定，隨著設計師不斷加入話語權不斷提高，我們會將表單設計從產品視角轉變為用戶視角，真正的去分析表單里面的內容而不是業務邏輯本身。

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