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

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

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

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

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

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

首先使用表單的用戶，本質(zhì)上就是去填寫對應(yīng)的數(shù)據(jù)

因此在數(shù)據(jù)錄入層面，如何讓用戶填寫的效率提高，會(huì)尤為重要。

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

那如果是一個(gè) C 端用戶，我覺得他可能會(huì)存在這個(gè)情況，但這是 B 端，使用這個(gè)產(chǎn)品的目的其實(shí)是為了自己的工作，因此如果我能看清楚整個(gè)表單所需要的信息，那我一定想要了解完整信息，因?yàn)檫@樣才能讓我做好充足的準(zhǔn)備。所以很多設(shè)計(jì)思維并不能進(jìn)行混用。

在回到錄入效率問題上，因?yàn)閿?shù)據(jù)錄入的本質(zhì)就是：輸入、選擇、上傳，因此我們只需要做到：

降低用戶輸入的難度、讓用戶能夠快速選擇、考慮情況上傳的斷點(diǎn)

我就會(huì)覺得這是一個(gè)合格的表單，剩下的部分則是結(jié)合你的實(shí)際經(jīng)驗(yàn)，進(jìn)行相關(guān)的分析即可。

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

其次使用表單，需要對表單的內(nèi)容進(jìn)行檢查與確認(rèn)

如果表單的信息過長，那檢查與確認(rèn)一定是一個(gè)非常重要的步驟，因?yàn)殇浫氡举|(zhì)上就是在系統(tǒng)當(dāng)中有著非常大的不確定性，因此使用表單來錄入數(shù)據(jù)，我們就需要進(jìn)行反復(fù)的確認(rèn)。

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

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

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

在表單當(dāng)中，一定會(huì)存在大量的"中斷與復(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è)計(jì)做出了那些優(yōu)化：

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

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

1. 流程優(yōu)化

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

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

2. 布局調(diào)整

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

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

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

1. 錨點(diǎn)定位：在預(yù)覽區(qū)域當(dāng)中，可以點(diǎn)擊對應(yīng)文本，就能進(jìn)行快速跳轉(zhuǎn)，找到相應(yīng)配置項(xiàng)，這對于本身云服務(wù)器復(fù)雜的配置而言，是一個(gè)莫大的提升。
2. 錯(cuò)誤提示：能夠在預(yù)覽區(qū)域展示 未填寫、錯(cuò)誤 信息，并且點(diǎn)擊過后可以直接跳轉(zhuǎn)表單
3. 信息確認(rèn)：由于布局調(diào)整，將提交訂單的操作放置在預(yù)覽區(qū)域之上，整個(gè)交互變得更為合理。先配置、再總覽、最后操作提交

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

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

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

4. 果斷隱藏

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

5. 輸入方式

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

外露選項(xiàng)按鈕，YYDS～

最后大家也可以訪問新版本地址（https://ecsbuy.aliyun.com/），可以自己試試。

作者： CE青年Youthce