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

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

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

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

我認為對于設計師而言，我們在回答這個問題的時候往往需要有一個標準化的定義，總結下來一共有三點：

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

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

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

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

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

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

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

我就會覺得這是一個合格的表單，剩下的部分則是結合你的實際經驗，進行相關的分析即可。

2. 檢查與確認

其次使用表單，需要對表單的內容進行檢查與確認

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

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

因此對于信息確認需求較強的表單配置頁，經常就會使用預覽的方式進行呈現(xiàn)。

3. 中斷、復用與分享

在表單當中，一定會存在大量的"中斷與復用"場景，因此需要針對這部分的內容進行考慮。

比如中斷可以采取草稿箱、前端保存的方式將表單內容進行留存。

復用則使用模板、復制對表單重復的部分進行的反復使用。

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

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

阿里云的更新內容

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

1. 流程優(yōu)化

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

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

2. 布局調整

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

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

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

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

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

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

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

4. 果斷隱藏

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

5. 輸入方式

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

外露選項按鈕，YYDS～

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

作者： CE青年Youthce