在B端行業(yè)，一個高效的表單解決方案對于提升用戶體驗至關(guān)重要。本文將帶您一探阿里云在表單設(shè)計上的巧妙構(gòu)思，看看它是如何通過簡化流程、優(yōu)化布局、增強(qiáng)數(shù)據(jù)錄入與確認(rèn)的交互，以及處理中斷、復(fù)用與分享場景的獨(dú)到方法，來提升用戶在購買云服務(wù)器過程中的體驗。

表單的設(shè)計，其實(shí)是一個比較頭疼的問題，因為行業(yè)出現(xiàn)了如此之久，但也很難有一個較為明確且通用的表單解決方案，甚至行業(yè)中關(guān)于表單的創(chuàng)新，也寥寥無幾。

最初大家都在討論標(biāo)簽對齊方式、討論不同字段的輸入框長度、再到整理字段輸出具體表單，大家所關(guān)注的內(nèi)容也在一點(diǎn)點(diǎn)的發(fā)生改變。

最近也在阿里云購買了一些服務(wù)器，發(fā)現(xiàn)在它的云服務(wù)購買頁面當(dāng)中，有著一個非常有意思的表單設(shè)計方案，想把它拿出來和大家一起分享分享。

一、好表單的標(biāo)準(zhǔn)

首先來問大家一個問題：什么樣的表單設(shè)計才是一個好的表單？

我認(rèn)為對于設(shè)計師而言，我們在回答這個問題的時候往往需要有一個標(biāo)準(zhǔn)化的定義，總結(jié)下來一共有三點(diǎn)：

1. 填寫數(shù)據(jù)

首先使用表單的用戶，本質(zhì)上就是去填寫對應(yīng)的數(shù)據(jù)因此在數(shù)據(jù)錄入層面，如何讓用戶填寫的效率提高，會尤為重要。

這里我需要稍微說明，很多時候效率提高并不是使用 “步驟條將整個表單進(jìn)行分割”，我非常不贊同一個觀點(diǎn)。因為很多會覺得“用戶看到了這么多表單信息過后，他不愿意填寫”

那如果是一個 C 端用戶，我覺得他可能會存在這個情況，但這是 B 端，使用這個產(chǎn)品的目的其實(shí)是為了自己的工作，因此如果我能看清楚整個表單所需要的信息，那我一定想要了解完整信息，因為這樣才能讓我做好充足的準(zhǔn)備。

所以很多設(shè)計思維并不能進(jìn)行混用。

再回到錄入效率問題上，因為數(shù)據(jù)錄入的本質(zhì)就是：輸入、選擇、上傳，因此我們只需要做到：降低用戶輸入的難度、讓用戶能夠快速選擇、考慮情況上傳的斷點(diǎn)我就會覺得這是一個合格的表單，剩下的部分則是結(jié)合你的實(shí)際經(jīng)驗，進(jìn)行相關(guān)的分析即可。

2. 檢查與確認(rèn)

其次使用表單，需要對表單的內(nèi)容進(jìn)行檢查與確認(rèn)如果表單的信息過長，那檢查與確認(rèn)一定是一個非常重要的步驟；因為錄入本質(zhì)上就是在系統(tǒng)當(dāng)中有著非常大的不確定性，因此使用表單來錄入數(shù)據(jù)，我們就需要進(jìn)行反復(fù)的確認(rèn)。

而行業(yè)中大量的長表單，我們只能做到上下滾動，來一點(diǎn)點(diǎn)確認(rèn)信息，但并不會有所謂的信息預(yù)覽，來對所有的表單進(jìn)行查看。

因此對于信息確認(rèn)需求較強(qiáng)的表單配置頁，經(jīng)常就會使用預(yù)覽的方式進(jìn)行呈現(xiàn)。

3. 中斷、復(fù)用與分享

在表單當(dāng)中，一定會存在大量的“中斷與復(fù)用”場景，因此需要針對這部分的內(nèi)容進(jìn)行考慮。比如中斷可以采取草稿箱、前端保存的方式將表單內(nèi)容進(jìn)行留存。

復(fù)用則使用模板、復(fù)制 對表單重復(fù)的部分進(jìn)行的反復(fù)使用。

分享則是對之前的表單內(nèi)容進(jìn)行進(jìn)一步的深挖，通過分享的方式，將表單內(nèi)容發(fā)送給其他人進(jìn)行使用。

理解了過后，我們再來看看阿里云這次的表單設(shè)計做出了那些優(yōu)化：

二、阿里云的更新內(nèi)容

阿里云云服務(wù)器的更新已經(jīng)很久，因此很多舊版本頁面都已經(jīng)獲取不到。我也是尋找了很多資源最終給大家總結(jié)起來，我相信這值得大家一個點(diǎn)贊～

1. 流程優(yōu)化

在表單當(dāng)中，我們不會一味的追求步驟條，因此這一次將下單的流程頁面由 5 步變?yōu)?1 步，不用再去區(qū)分各項操作，將用戶購買云服務(wù)器的流程在一個頁面當(dāng)中呈現(xiàn)，這樣就能縮短用戶下單路徑，會有更多人購買。

在細(xì)節(jié)上，我們也會發(fā)現(xiàn)之前的分步驟，其實(shí)有點(diǎn)強(qiáng)行為之，比如還會有 2 個選填的步驟，因此會顯得整個購買流程異常復(fù)雜。

2. 布局調(diào)整

將頁面布局內(nèi)容重新劃分，整理為配置區(qū)域與預(yù)覽區(qū)域。

配置區(qū)域負(fù)責(zé)對云服務(wù)器的屬性項進(jìn)行調(diào)整，而預(yù)覽區(qū)域會將所配置的數(shù)據(jù)放置在右側(cè)進(jìn)行呈現(xiàn)。

這種方式其實(shí)和餐飲的 POS 系統(tǒng)有異曲同工之意，不過在這里的很多設(shè)計細(xì)節(jié)還是值得大家學(xué)習(xí)。

a.錨點(diǎn)定位：在預(yù)覽區(qū)域當(dāng)中，可以點(diǎn)擊對應(yīng)文本，就能進(jìn)行快速跳轉(zhuǎn)，找到相應(yīng)配置項，這對于本身云服務(wù)器復(fù)雜的配置而言，是一個莫大的提升。

b.錯誤提示：能夠在預(yù)覽區(qū)域展示 未填寫、錯誤 信息，并且點(diǎn)擊過后可以直接跳轉(zhuǎn)表單。

c.信息確認(rèn)：由于布局調(diào)整，將提交訂單的操作放置在預(yù)覽區(qū)域之上，整個交互變得更為合理。先配置、再總覽、最后操作提交

3. 常用數(shù)據(jù)選擇優(yōu)化

在配置時，需要經(jīng)常使用地域、實(shí)例、鏡像，其實(shí)都會根據(jù)用戶自己常用的選擇，進(jìn)行快捷的選擇。

同時對于網(wǎng)絡(luò)、可用區(qū)域，因為它們是有業(yè)務(wù)當(dāng)中的關(guān)聯(lián)，因此由之前的區(qū)分開，變?yōu)楝F(xiàn)在的合并關(guān)聯(lián)選擇。

4. 果斷隱藏

對于很多用戶不常用的高級選項，選擇了折疊，因為確實(shí)小眾的配置，所以折疊減少對用戶的干擾，我也不用一個一個百度搜他的含義，因為常規(guī)就選默認(rèn)就行，這就會比使用 選填 步驟好多了～

5. 輸入方式

數(shù)據(jù)滑動，其實(shí)在 B 端系統(tǒng)當(dāng)中用的頻率本身較低，而在這個迭代當(dāng)中，就會考慮將傳統(tǒng)的滑動變?yōu)榘粹o選擇，明顯能夠發(fā)現(xiàn)，選擇的顆粒度變多，同時增加自定義輸入數(shù)據(jù)也不會顯得突兀。

外露選項按鈕，YYDS～

最后給大家總結(jié)了舊版本的頁面，大家也可以訪問新版本地址(https://ecs-buy.aliyun.com/)，可以自己試試，反復(fù)對比