表單設計（web表單設計）

本文目錄一覽：

• 1、提高用戶體驗的八種表單設計技巧
• 2、航天橋北大青鳥分享提高用戶體驗的八種表單設計技巧？
• 3、有哪些表單設計的注意事項?

提高用戶體驗的八種表單設計技巧

表單功能無論是在網頁設計還是app軟件開發領域都得到了大量的使用。今天昆明北大青鳥就一起來了解一下，符合用戶體驗的表單設計需要滿足哪些條件。

1、表單標簽需采用合適的展現形式根據表單的運用場景，標簽應采用對應的展現形式，常見的展現形式有以下三種：左標簽、頂部標簽、行內標簽。

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

B. 頂部標簽頂部標簽指的是標簽位于輸入框上方，這種形式一般出現在一些移動端當中。頂部標簽可以使輸入框的寬度變大，用戶在填寫信息也可以比較得到完整的展示。但這種布局方式也有一個缺不好的點，就是這個表單可能需要滾屏，用戶才可以看完。

C. 行內標簽行內標簽常常出現在手機端的注冊界面當中，這樣的設計可以節省頁面空間，所以大部分app的界面設計都采用這樣的設計。當然，部分網站pc端的表單設計中也會用到這種設計。

2、英文標簽避免全部大寫一些英文界面的表單設計，我們要避免標簽的全大寫。全部大寫的標簽容易造成閱讀和瀏覽上的困難。

3、特殊標簽需使用合適的輸入框長度對于特定的標簽，像驗證碼、郵編這樣的標簽，在設計的時候需要采用合適的輸入框長度。畢竟這樣的輸入框是用戶可預見的，所以輸入框的長度可以不需要太長。

4、復選框排列需注意在表單中常出現復選框的設計，這樣的情況需要特殊處理。比如在注冊的過程中，會有性別的選擇，所以通常設計該表單的時候我們會將男女橫排在一行。但是對于內容多的情況下，就建議采用豎排的排序方式。

5、主按鈕和輔按鈕需要明確的區分在表單提交的時候，出現多個按鈕的情況下，需要做明確的區分，這樣有利于用戶在操作過程中方便辨別操作步驟。

航天橋北大青鳥分享提高用戶體驗的八種表單設計技巧？

表單功能無論是在網頁設計還是app軟件開發領域都得到了大量的使用。

今天航天橋北大青鳥就一起來了解一下，符合用戶體驗的表單設計需要滿足哪些條件。

1、表單標簽需采用合適的展現形式根據表單的運用場景，標簽應采用對應的展現形式，常見的展現形式有以下三種：左標簽、頂部標簽、行內標簽。

A.左標簽在一些網頁表單當中，標簽局左是常見的一種形式。

左標簽的展示形式給人一種秩序感，也便于用戶在填寫表單的過程中快速的辨別標簽內容。

左標簽的這種形式一般用于網頁當中，不適合在手機端或者小屏下的移動端出現，因為小屏幕的尺寸有限，標簽居左會占用較大的空間，輸入框就會受限。

B.頂部標簽頂部標簽指的是標簽位于輸入框上方，這種形式一般出現在一些移動端當中。

頂部標簽可以使輸入框的寬度變大，用戶在填寫信息也可以比較得到完整的展示。

但這種布局方式也有一個缺不好的點，就是這個表單可能需要滾屏，用戶才可以看完。

C.行內標簽行內標簽常常出現在手機端的注冊界面當中，這樣的設計可以節省頁面空間，所以大部分app的界面設計都采用這樣的設計。

當然，部分網站pc端的表單設計中也會用到這種設計。

2、英文標簽避免全部大寫一些英文界面的表單設計，我們要避免標簽的全大寫。

全部大寫的標簽容易造成閱讀和瀏覽上的困難。

3、特殊標簽需使用合適的輸入框長度對于特定的標簽，像驗證碼、郵編這樣的標簽，在設計的時候需要采用合適的輸入框長度。

畢竟這樣的輸入框是用戶可預見的，所以輸入框的長度可以不需要太長。

4、復選框排列需注意在表單中常出現復選框的設計，這樣的情況需要特殊處理。

比如在注冊的過程中，會有性別的選擇，所以通常設計該表單的時候我們會將男女橫排在一行。

但是對于內容多的情況下，就建議采用豎排的排序方式。

5、主按鈕和輔按鈕需要明確的區分在表單提交的時候，出現多個按鈕的情況下，需要做明確的區分，這樣有利于用戶在操作過程中方便辨別操作步驟。

有哪些表單設計的注意事項?

一、表單設計的注意事項——保持秩序

1. 單柱瀏覽

表單的主要功能是向用戶清楚地傳達信息。保持單列表單的順序更有利于用戶的瀏覽。它幫助用戶識別和填寫內容。但是，多列表單會破壞用戶填寫規則，影響效率。

2. 垂直布局

當表單中有多個選項供用戶選擇時，將每個選項垂直放置在每個選項下會使用戶更容易閱讀和瀏覽。

3.一致的操作

填寫表單時，避免在填寫過程中更改按鈕的樣式和顏色。一致的操作行為需要用戶的確認，可以有效減少用戶在操作時的困惑和猶豫，保證用戶在填寫表單過程中的順暢體驗，從而實現最終的業務交易結果。

二、表單設計的注意事項——描述很清楚

1. 標題不可替換

雖然使用占位符而不是標題擴展了表格的填充空間并減少了視覺干擾，但這種方法不利于用戶的短期記憶。一旦用戶觸發輸入并且占位符消失，用戶可能會對這里要填寫的內容感到困惑。您必須刪除所有輸入，然后才能再次顯示標題。顯然，這是違反人性的。

2. 輸入字段符合預期

輸入字段的長度與預期的輸入內容成比例，以保證輸入字段的長度符合用戶的心理期望，并能在形式上得到充分的體現。

3.不要隱藏基本的幫助信息

用戶在購買過程中有明確的需求確認和信息收集。因此，在設計過程中，應強調或顯示用戶填寫表單的基本幫助信息，避免因隱藏幫助信息而引起客戶投訴。

以上便是關于表單設計的注意事項介紹了，希望它能幫助我們開拓，并確定屬于我們自己的設計風格，這一點非常重要。如果您想了解更多關于ui設計的相關設計技巧及素材等，也可以點擊本站的其他文章進行學習。