橫向與縱向步驟條,到底有何不同?
在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)重要的部分。
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】,微信公眾號:【CE青年Youthce】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
- 目前還沒評論,等你發(fā)揮!