前端設計師如何寫一個交互好轉化率高的表單

表單在網站、app或者軟件界面當中被普遍的使用，於是表單設計是個比較重要的工做。前端設計師們要寫好一個表單，不只僅是界面設計上的體現，表單的交互和體驗也尤其重要。本文結合我給別人作的網站的經驗，總結了表單設計的八大技巧，但願對你們有所幫助。

一、表單標籤需採用合適的展示形式

根據表單的運用場景，標籤應採用對應的展示形式，常見的展示形式有如下三種：左標籤、頂部標籤、行內標籤。

 

A. 左標籤

在一些網頁表單當中，標籤局左是最多見的一種形式。左標籤的展現形式給人一種秩序感，也便於用戶在填寫表單的過程當中快速的辨別標籤內容。左標籤的這種形式通常用於網頁當中，不適合在手機端或者小屏下的移動端出現，由於小屏幕的尺寸有限，標籤居左會佔用較大的空間，輸入框就會受限。

 

B. 頂部標籤
頂部標籤指的是標籤位於輸入框上方，這種形式通常出如今一些移動端當中。頂部標籤可使輸入框的寬度變大，用戶在填寫信息也能夠比較獲得完整的展現。但這種佈局方式也有一個缺很差的點，就是這個表單可能須要滾屏，用戶才能夠看完。

 

C. 行內標籤
行內標籤經常出如今手機端的註冊界面當中，這樣的設計能夠節省頁面空間，因此大部分app的界面設計都採用這樣的設計。固然，部分網站pc端的表單設計中也會用到這種設計。

二、英文標籤避免所有大寫

一些英文界面的表單設計，咱們要避免標籤的全大寫。所有大寫的標籤容易形成閱讀和瀏覽上的困難。

三、特殊標籤需使用合適的輸入框長度

對於特定的標籤，像驗證碼、郵編這樣的標籤，在設計的時候須要採用合適的輸入框長度。畢竟這樣的輸入框是用戶可預見的，因此輸入框的長度能夠不須要太長。

四、複選框排列需注意

在表單中常出現複選框的設計，這樣的狀況前端設計師們須要特殊處理。好比在註冊的過程當中，會有性別的選擇，因此一般設計該表單的時候咱們會將男女橫排在一行。可是對於內容多的狀況下，就建議採用豎排的排序方式。

五、主按鈕和輔按鈕須要明確的區分

在表單提交的時候，出現多個按鈕的狀況下，須要作明確的區分，這樣有利於用戶在操做過程當中方便辨別操做步驟。

六、提醒文本設計須要明確

用戶在填寫表單的過程當中，對於輸入的錯誤信息須要有幫助的提醒文本，對於較爲複雜的提示文本須要作一個隱藏圖標。

七、必填項需用*號作好標示

有些表單內容較多，能夠採用*號標註幾個必填項來讓用戶縮短表單的填寫時間。

八、特殊標籤的可選項設計

對於出生年月日、地區等特殊標籤，最好設計成可選項，減小用戶的使用成本。

 

 

一個好的表單設計，需考慮到用戶的方方面面。而好的用戶體驗還要儘量的簡化操做步驟，所有手動輸入的模式費時費力，對用戶來講也不是一種友好的體驗。因此表單的設計，須要知足界面上美感的同時還須要考慮到用戶體驗。

 

 

表單雖然在整個網站或者app中佔比不高，可是表達足能夠體驗交互的一些細節體驗。一個很差的表達設計可能會讓使用者放棄該站點。本文提供的幾點設計表單的技巧，但願能夠幫助你們提高表單的用戶體驗和轉化率。