本文將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設計師，對錶單能有一個更好的了解，從而避免在工作中進入誤區。

本文共計11000個字，閱讀大約需要30分鐘

前言

每個人生活中，都在和表單打交道，各種表格，表單需要填寫，而表單在產品中主要負責數據採集功能。作用和現在一樣——信息錄入。表單也是最常用的信息錄入的工具，隨着互聯網興起，很多表單被放到了电子屏上填寫，特別是最近幾年，隨着 B 端的興起，和表單打交道的人越來越多，那麼作為設計師，我們如果設計出一個糟糕的表單，會極大影響用戶信息的錄入的效率。

我們先看看錶單的結構，一個表單有三個組成部分：

• 表單標籤（標題）
• 表單域（輸入框），包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
• 表單按鈕：包括提交按鈕、保存按鈕、複位按鈕和一般按鈕；用於將表單數據傳送到服務器上

本文主要針對錶單域——輸入框部分的設計，進行講解，會涉及一點代碼知識，建議查資料閱讀。

初識輸入框

常見的表單類別：文本輸入框、密碼輸入框、其中文本輸入框又包含中文輸入框、英文輸入框、数字輸入框等。

其中我們接觸最多的就是需要錄入信息的輸入框。

在內容開始之前，先來了解一下輸入框在前端開發中的模樣。

如圖所示，輸入框分為標籤，文本輸入框，和佔位符三個最基本結構。根據特殊場景，會加上幫助信息，提示信息，反饋信息等等。

輸入框如何設計

在文章開篇我們說到，表單結構為：表單標籤（標題）、表單域（輸入框）、表單按鈕。三部分組成，但我們作為設計師在設計時，考慮的遠遠多於這三部分，我們更多是去做交互上的思考。

從交互層面上思考，表單在設計上的結構有：

• 表單標籤
• 輸入限制
• 佔位符
• input 輸入框大小
• 輸入框焦點
• 多行文字規則
• 報錯提醒
• 喚起鍵盤樣式（移動端專屬）
• 幫助性信息
• 表單屬性（是否必填）
• 結果反饋
• 微文案

1. 標籤

此處所講的標籤，更多的是講表單的布局結構，合理的表單結構，能提高用戶閱讀效率，同時還能降低信息填寫時的錯誤率。

我們常見的布局結構：左右、上下、內部。

左右和上下結構，左右結構常用在 pc 端，左右結構在用戶體驗上，視覺路徑相對較長，特別是在多行信息錄入時，尤其明顯。

但在網頁端我們大多看到的都是左右結構，這是因為有空間佔比的元素，在 pc 端，橫向空間很大，需要考慮到協調的關係，如果採用上下結構，在內容過多的情況下，就會出現重心偏左的視覺效果。

而且，在 pc 端，視線距離屏幕較遠，視覺聚焦面積更大，因此視覺路徑較長的這一點就被中和掉了。

因此在 pc 端，如果展示內容較多，可以選擇左右結構。

而內容較少，在五個或以內，就可以選擇上下結構。

而我們在移動端很少見到左右結構，這是因為移動端的限制——屏幕太小，一個橫屏展示不開，特別是在標籤名字很長的時候，弊端更加明顯，因此在移動端更多的是使用上下結構。當然缺點除了識別度會降低，視覺路徑增長之外，縱向空間佔比也會增加，本身一屏就能 展示完，現在需要兩屏甚至更多。

而我們在 pc 端，如果標籤名字太長，也是可以選擇上下結構。根據不同的使用場景，選擇相對最合適的方案。

除了常見的左右，和上下結構，還有內部結構——將標籤放在輸入框內部，這種也常用在移動端，它的空間佔比很小，對移動端的小屏來說，是非常友好的，但如果在交互上處理不好，會有很大的缺陷。

內部標籤結構，只有提示性文字，用作提示用戶應該輸入什麼內容，但用戶在輸入的時候，內部的標籤/提示性文字就會消失，這時候，用戶會失去它是否輸入準確的唯一判別標準。

而用戶如果需要判別自己是否輸入準確，需要刪掉自己剛剛輸入的文字，看一眼提示信息，再次輸入。如果碰巧遇到有懷疑心的用戶，這種設計會讓用戶抓狂。

如圖下所示，當字段大於三個的時候，用戶再看到這個表單，會對自己填寫表單進行思考，思考自己填的是什麼，甚至會對自己填寫信息的正確性進行懷疑，這種現象從心理學角度來看，是因為人的瞬間記憶局限所造成的。

人在短時間內只能記住 5～9 個單位，即「7 加減 2」法則，這是大部分用戶的極限，但設計不是要去挑戰極限，而是要思考，還有一部分用戶是遠遠達不到「7 加減 2」這個範疇，因此，在設計的時候，就需要降低用戶的記憶門檻，採用更加適用的「2 加減 1」原則，當用戶需要輸入的字段多餘三個的時候，就必須給表單留下標籤，用來提示用戶。

當內容過多，你根本不知道自己填寫的是什麼。

尼爾森·諾曼集團的凱蒂·舍溫（Katie Sherwin）在她上傳的文章中提到將標籤替換為佔位符的七個不好的原因

1. 消失的佔位符文本會使用戶的短期記憶緊張
2. 沒有標籤，用戶無法在提交表單之前檢查所填寫的內容
3. 出現錯誤消息時，人們不知道如何解決問題
4. 當將光標放在表單字段中，佔位符文本消失時，使用鍵盤導航的用戶來說很不友好。
5. 其中包含的字段不太明顯。
6. 用戶可能會將佔位符誤認為是自動填寫的數據
7. 有時用戶必須手動刪除佔位符文本。

對於上述觀點，我贊同部分，對於第六條，無論有沒有標籤，佔位符都存在，除非刪掉佔位符，當然，在佔位符的文案闡述有歧義的時候，會出現這種情況。

第七條完全就是一個 js 觸發條件的配置問題，而且在 html 中 input 標籤中的 placeholder 佔位符的默認屬性，在獲取焦點后，輸入時，佔位符會自動消失。因此一般情況下，是不存在需要手動刪除佔位符的（當然，也許是我翻譯有誤。）文末有鏈接，感興趣的可以去看看。

在有些場景，因為空間佔比或視覺等因素，需要刪掉標籤，可以採用下面兩種方案：

第一種，在內部加入 icon，用作信息提醒，缺點是 icon 屬於圖畫，是一種很抽象的東西，相比文字，它的表達能力就太弱了，碰到同類信息時，識別度不是很高。比如有兩欄信息，一欄是籍貫、一欄是現在居住地址，很難用 icon 去區分兩者。

第二種，是谷歌的一種設計方式，用戶在輸入時內部標題（提示信息）進行浮動位移，即節省了空間，提示性信息依舊在；缺點是，相比普通左右或上下結構需要一定的開發成本。

2. 輸入限制

為什麼要做輸入限制，一是為了陳列這些數據時，可以根據長度來確定它的一種展現方式，二是為了減輕數據庫的壓力。

輸入限制有兩種，第一種是對錶單域輸入的信息進行字數限制，比如發表 QQ 個性簽名時的字數限制。

在用戶輸入的時候，右下角會告訴用戶已經輸入了多少字，如果超過 80 字後會變紅色，用來警示用戶，並且此時的表單域也無法輸入新的內容

微信在朋友圈發表時，做了字數限制，但沒有在輸入過程中明確地告訴用戶，等到輸入過長提交時，彈窗提醒用戶，內容過長提交不了，用戶精心編輯長文，到了提交的時候，卻發現字數過長，又不得不刪掉一些自己已經寫好的東西。因此我們在做了限制的情況下，需提醒用戶還剩多少字。

第二種是做屬性限制，比如在数字文本框時，輸入漢字，或者字母，這就極大地增加了用戶的錯誤率。一般情況下，開發小哥都會寫上這個限制條件，但有些時候可能會因為一些原因，比較着急，直接使用「input」框默認的「text」類別，沒有加限制，這個時候我們如果在測試過程中發現了該問題，就需要去提醒開發小哥。

而且，根據不同的信息類型，要給相應的屬性限制，比如身份證的 18 位，手機號的 11 位等。

3. 佔位符

在前邊，也講過佔位符的一些問題，在設計中我們要注意文字清晰明了、簡短一致，在顏色選擇上，作為提示性信息，視覺層級較弱，不宜用太過突出的顏色。

為什麼說必不可少，我們不妨試一下，將佔位符刪掉，是不是看着有一點彆扭，因為長期的佔位符已經給用戶培養了使用習慣，沒有佔位符，用戶在輸入的時候會抱着試一試的心態去點擊，會疑惑是不是應該在這裏輸入，不夠直接清晰，對用戶來說是很不友好的。

而且，在 HTML5 中，input 標籤中有 placeholder 佔位符這個屬性是有一定原因的。而我們加入佔位符，用戶在填寫表單的時候，一眼看上去就知道應該在哪裡填寫，怎麼填寫，清晰明了。

圖中左側佔位符雖然簡短，但不明了，用戶在輸入時，視覺焦點是在輸入框，此時如果用戶忘記需要輸入什麼。會做視線偏移，去看標籤名字，再輸入，即使這個過程哪怕只需要 0.05 秒，但對用戶來說，依舊不夠友好，如果在提示性信息就明確表示輸入什麼，用戶可以一目瞭然。

而且，在某些場景中，一個輸入框可以輸入多種信息比如登錄界面，在用戶名可以輸入郵箱、手機號、用戶名，這個時候我們如果用標籤來提醒，顯然是不合理的，而佔位符可以起到很好的提示效果。

我們常用的社交產品 QQ 和微信，就採用了這種樣式，另外在這裏插一嘴，QQ 這個界面在按鈕處理上是不合格的，有心細的朋友嗎？

4. 輸入框大小

輸入框大小與邊距

本節涉及到一些代碼知識，建議細嚼慢咽。

我們在設計表單域（輸入框）時，我們所畫的輸入框，並不是前端在寫的時候真實的有效輸入框，而需要考慮的其實有兩個元素的大小，其中外部我們能看到的部分為可視大小（暫稱為 input 框），內部為有效輸入框大小（暫稱為有效輸入框）

圖中的紅色區域就是有效輸入範圍。

而前端在開發的時候，常常採用兩種方式。

第一種：因為 input 框屬性原因，為了布局方便，開發在寫的時候，不會給描邊（border）樣式屬性，而會把放在

或者標籤之中，給這兩個標籤添加樣式大小。我們所見到的外框可視描邊屬性也是加在

或者標籤之上。這個時候給一個外邊距（magin）。

代碼如下：

<div style="width: 512px; height: 32px; border: 1px solid#9195a3; ">

<input type="text" placeholder="請輸入"

style="width: 488px; font-size: 14px; line-height: 24px; border: 0; margin: 4px 12px;">

</div>

鑒於有些朋友沒有涉及代碼，做個講解：

有一個種類為 div，寬為 512px，高為 32px，描邊為 1px，且顏色為 #9195a3 的盒子。

裏面裝了一個寬為 488px，描邊為 0 的輸入框。這個輸入框距離 div 盒子的上下間距為 4px；左右間距為 12px，並且這個輸入框里文字的大小為 14px，行高為 24px。

第二種：就是下面這種，給加上寬（width）、高（hight）和描邊（border）屬性，同時寫上padding，內間距，來控制input有效輸入框的大小和位置。

代碼如下：

<input type="text" placeholder="請輸入"

style="width: 512px; height: 28px; border: 1px solid#9195a3; font-size: 14px; 

line-height: 24px; padding: 4px 12px;">

依舊講解：

有一個寬為 512px，高為 28px，描邊為 1px，且顏色為 9195a3 的輸入框，把他的文字輸入/显示位置，往裡面擠了上下間距為 4px，左右間距為 12px 的距離。並且這個輸入框里文字的大小為 14px，行高為 24px。

百度首頁採用的就是第二種方式

打開 F12 開發者模式（或右鍵——檢查）

第一張圖中可以看出，灰色部分的邊框，即設計師最常需要畫的。

第二張圖和第三張圖中，藍色部分為有效輸入框，也就是我們輸入文字並显示的地方，在這裏，開發給了框一個大小，然後給 padding 屬性，有效輸入框就會自動往裡縮，也就是圖中的藍色部分。

因此，我們在繪製設計圖的時候，需要給開發標有效輸入框的大小與間距。我這裏設置了紅色，為了不影響視覺，我們可以將不透明度降為零，在交接到藍湖或者像素大廚，開發都能看到 input 框的大小，可以看不見，但必須存在。

在 input 框中有 icon 時，也要注意 icon 與 input 框之間的間距。

如果有些朋友，因為某些因素跳過了代碼部分，不管開發採用哪種方式，作為設計的我們，都可以用一句話來總結上邊內容：給 input 框繪製一個有效輸入範圍。

input框尺寸大小

寬度：在做輸入框尺寸時，需要根據內容的長短，合理地設計輸入框大小

文本框的長度會給輸入信息的用戶心理暗示，他們會根據文本框的長度來判斷需要輸入內容的長度。

高度：在 Ant Design 上，對輸入框定義了三種尺寸大小(大、默認、小)，40px、32px、24px、這不是固定的數據，在做項目的時候，可以根據自己產品的特性來選擇適合自己產品的規範。

5. 輸入框焦點

輸入框焦點，對於輸入框，當用戶選中準備輸入的時候，應當提供清晰的視覺定位，比如外輸入框的樣式的變動，或者閃動的光標。一般情況下，選擇光標都默認存在，光標的大小取決於字體的大小，因此不用對光標進行二次設計。

在表單內容較多的時候，我們可以給輸入框的樣式做變動，可以更清晰地給用戶做目標視覺定位。

6. 多行文字規則

在表單當中，多行文字一般出現在兩個地方，一是表單標籤，二是行內信息。

在做標籤的時候，有時候會出現一個名字很長的標籤，我們給文字設定寬度和行高，我們給出規則，比如最多五個字，超出部分做換行處理，我們需要給標籤的行高和寬度統一。

因為開發在寫這個頁面的時候，是把每一個元素放在一個 class 統一的 div 或者 span 標籤內。因此我們在做設計稿的時候，需要把換行元素考慮進去，即使只有一個字，避免以後二次設計和開發。

在做表單域的行內信息換行時，我們需要給出橫向字數寬度，和上下左右的間距。也就是開始我們要畫出 input 框的原因，開發可以直接根據 input 框進行定位。

且當內容過多的時候，我們需要做隱藏處理

比如設定輸入 4 行文字以內，隨着文字每增加一行輸入框會自動向上撐開。文字超過 4 行，輸入框大小就不會變動了，4 行以上的文字會被遮擋住，但我們在給文字做遮擋的時候，要注意提醒用戶上方有文字被遮擋。一般採用的方式是對最上方一行文字遮擋一半。

上述情況只在輸入框空間佔比很小，同時多行文字出現較為頻繁的場景下才會使用。比如實時聊天界面。

而在一般情況下，只給輸入框做單行處理，同時給超出部分文字做隱藏。

而明確需要多行輸入的輸入框，會在大尺寸大小上做區別，正如我前邊所提的那樣，輸入框的大小或影響用戶對該輸入框內容輸入多少對判斷，輸入框尺寸大，在用戶潛意識里就會認為這是可以輸入很多字的。

而多行輸入框在 ant design 中被定義為文本域。

即：

超出部分是自適應高度，還是显示滾動條，需要標註出來，並且要指定最小行數，和最大行數。

否則開發會採用默認的以滾動條的形式來展示。

7. 報錯提醒

我們有時在填寫一個表單，全部信息填寫完成，在點擊提交后，突然彈出一個框，被告知信息填寫錯誤。自動返回填寫頁面，之前的填寫好的信息全部消失不見，這種行為對於用戶來說，其實是很抓狂的。脾氣暴躁一點的，可能會直接砸電腦。

因為用戶在填寫結束之後，大腦中分泌多巴胺，獲得愉悅感，但在這個時候一個報錯，把臨到腦門的多巴胺給硬生生逼了回去，是很影響用戶心情的，無論表單中所承載的信息有哪些，都應該讓用戶感受到引導感。用戶所需要的是引導他完成表單的填寫，而不是對他填寫表單做判斷。

因此我們在用戶輸入的時候，就應及時針對用戶錄入的信息進行判斷，有些前端自己就能做，有些需要掃一遍數據庫，做信息對比，然後 告知用戶信息重複，總之及時做判斷，並給出反饋，同時引導用戶完成正確填寫操作，不要等到用戶點提交按鈕后，才給用戶做出判斷。

8. 喚起鍵盤樣式

在移動端，只要涉及到表單信息錄入，都會喚起鍵盤，根據不同的使用場景給用戶喚起不同的鍵盤樣式，可以很大程度上節省用戶的時間，用戶體驗也會得到顯著提升。

如果我們在交付設計稿的時候，沒有標註鍵盤類型，開發就會使用默認的中文鍵盤，用戶在使用的時候，就會造成不必要的困擾

有些金融類產品需要使用亂序的安全鍵盤，也需要額外標註。

在移動端輸入端時候，有時候喚起鍵盤，會遮擋掉關鍵性按鈕，我們在設計過程中，就需要充分考慮到這一點，並且規避掉。

具體做法可以參考以下兩種方式：

第一種，前端不給上邊元素定位，喚起鍵盤時，鍵盤自動頂上去。適用於內容簡單，且上方無重要內容的頁面。

第二種，界面字段少，可以在安全區域內設計相關內容。

9. 幫助性信息

有時候需要幫助性信息，來輔助用戶完成表單填寫，當文本簡短的時候，可以直接放在該輸入框的附近，當文案過長的時候，就需要做氣泡框，獲取鼠標焦點，則展開信息，失去焦點則消失，在氣泡展開時，切勿擋住 input 輸入框。

也有些產品是將幫助信息放在頁面頂部，如果是真對全局幫助性信息，則可以採用這種方式，如果只是真對某個元素提醒，則應將兩者放在一起，讓用戶知道當前處於什麼地方，在針對什麼進行引導、輔助。

10. 表單屬性

用戶在面對需要錄入信息比較多的表單時，內心是很抗拒的，而用戶所填寫的信息，又是產品所需要的。因此我們可以針對信息做一些篩選，將一些重要信息和非重要信息區分出來，減少用戶的錄入負擔，也減少用戶的時間成本。

11. 結果反饋

用戶在完成表單填寫，並提交后，需要及時給用戶反饋，比如完成提交時的祝賀，謝謝等，都能催發用戶體內的多巴胺，併產生愉悅的情緒，無論是祝賀還是提醒，用戶都會產生快樂的情感。

在某些時候因為其它因素，提交失敗，需要及時反饋用戶，並且要一定要將之前所填寫好的數據保留下來，不要讓用戶輸入第二次！

12. 微文案

最後插一句，無論是標籤、還是佔位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時需要消除用戶的疑慮，在整個流程中，做出更快更準確的抉擇。

比如這個地方，用戶手機號錄入錯誤，但需要詳細的提醒用戶，到底是哪裡錯誤，而不是含糊不清的去告訴他錯了，我在前邊依舊講過，用戶需要我們發現錯誤，並做出正確的引導，而不是一味的告訴用戶他錯了。

再比如，用戶在填完一個表單，突然要關閉，彈出彈窗，確定要取消，一個按鈕是確定，一個按鈕是取消，就很有歧義，會給用戶造成選擇困難。這個就是在提示文案中，產生了與按鈕會產生歧義的詞。

還有很多地方，能把微文案運用好，對用戶對操作流程能起到非常大的幫助，建議廣大設計師在做微文案處理對時候，謹慎而為。

閱讀文章 >>

不同類別的輸入框如何設計

講完表單基本結構設計，下面來針對輸入框來講講他們如何設計。

表單域包含以下內容有：

• 文本輸入框
• 数字輸入框
• 密碼輸入框
• 郵箱/網址輸入框

1. 中文文本框

中文文本框，需要注意的就是基本的結構，針對自己產品業務所需要的，對標籤、輸入限制、佔位符……等等做合適的設計。需要特別注意的是標籤、輸入限制、佔位符、多行文字規則。

其次就是對字體的屬性調整，比如字體大小、行高等。

2. 数字輸入框

数字輸入框

常見的数字輸入框有電話、身份證、銀行卡、價格、等。不同的類型在設計上也有區別。不過涉及到数字的，我們在設計中要考慮到，要秉承清晰、易讀的原則。

電話輸入框

電話輸入框有三個結構，國家/地區、區號、手機號。

不同國家地區區號不一樣，而國家區號存在的意義就是為了篩選不同的區號，因為不是所有用戶都能記住自己當地的區號。

美團的設計中，就很好地詮釋了這一點。

沒有直接的國家地區選擇，而是在區號下拉框當中，給了每個區號國家地區作為用戶區分。

我們接着聊一聊電話號碼的輸入問題

在移動端，手機充值輸入框內，電話號碼需要自動填充，避免用戶二次操作，但常見的手機充值業務，基本上已經是大廠佔據，用戶常用的也就那麼幾個產品，而這些產品也獲取到了用戶極高的信任。

但即使是這樣，他們依舊沒有採用直接填充的方式，而是在你輸入過後會有歷史記錄，用歷史記錄填充，當你清除歷史記錄后，再次進入，依舊需要手動輸入。

在這個信息透明的互聯網時代，用戶對自己的私人信息很看重。一個產品需要輸入電話號碼，不能直接做自動填充，即使你已經抓取到了用戶的信息，也不要告訴用戶你有他的信息，這一點很重要，如果你直接使用自動填充手機號，用戶會覺得隱私泄露，用戶對這個產品信任感本就不足，這種做法會讓用戶信任感再一次降低。

但讓用戶手動輸入，安全感得到了滿足，卻會增加用戶的操作負擔。

魚與熊掌不可兼得，我曾與一個 B 端行業的產品設計師「朱進」探討過這個問題，最後得出的方案是，讓用戶數手動輸入，但在輸入前三位的時候，彈出氣泡，显示為完整的手機號，點擊該氣泡，就會自動填充完整的手機號。

這樣做的好處是，用戶在輸入的時候，心理的懶惰，會讓用戶抗拒這種行為，產生負面情緒，點擊氣泡，填充了完整的手機號，用戶會認為這個功能解決了他當下不想輸入的痛點。

而在有些場景，需要輸入其他人的手機號，比如旅遊類產品，酒店類產品。

需要加入訪問通訊錄的權限。

而輸入手機號之後的狀態記得標註出來，按照之前所說的 7 加減二法則，根據用戶的記憶結構 xxx xxxx xxxx 來優化用戶的閱讀體驗。

身份證/銀行卡輸入框

身份證、銀行卡輸入框，跟上邊一樣，根據用戶閱讀習慣，增加可讀性，加入掃描和圖片識別，減少用戶操作。

我使用過一些產品，只有掃描功能，但沒有從圖片中識別，導致用起來很憋屈，因為銀行卡不可能隨時在身上，有時需要綁定的時候，卻告訴我只能掃描，這個時候我只能 回到最原始的，記幾個数字，輸入幾個。來來回回折騰好幾遍，才能輸入銀行卡。

金額輸入框

在做價格輸入框的時候，有些設計師喜歡在前面加上「¥」或者「$」符號，而且還放在了同一段文字當中，這樣做在設計上沒問題，但對開發不是很友好，因為開發在寫頁面過程中，前面的「¥」或者「$」符號，是一個定量，也就是寫死了，不會變動，而後邊的價格是一個變量，無論是從後台獲取的數據，還是你新錄入的信息，都是變量，往往是按照兩個元素進行分別設置屬性。

舉個例子吧，支付寶的充值界面，在你輸入價格之前，這個「¥」符號就是存在的，因此它是一個定量，不能和價格放在一個圖層，是需要單獨拿出來的。

更何況有些設計師，會將前面的符號設計得比價格要小，甚至小數位，也是樣式和整數位樣式也不一樣，比如京東的詳情頁。

因此，我們在設計過程中，需要把兩個元素拆開，符號一個圖層，價格一個圖層。如果碰到後邊小數位樣式和整數位不同時，都需要單獨分離圖層。

設計金額輸入時，很多 app 沿用了國際標準的千分位分隔符，比如我們輸入 1,345,543 金額，除了長期與千分位打交道的人，大部分人是很難第一眼看出金額具體是多少，還得從「個、十、百、千、萬」開始讀。

前邊有講過，雖然要遵循「7 加減 2」法則，提高內容的可讀性，但同時也要遵循不同数字，用戶的閱讀習慣，而價格，國內的閱讀習慣都是 「個、十、百、千、萬」。至於為什麼採用「千分位」，是因為與國際對標，國際統一的是千分位，而西方沒有「萬、億」只有「千、百萬、十億」，這三個記數單位是千進制，因此是千分位，而中國是萬進制，所以千分位，在中國，使用起來並不是那麼友好。

有些 app 採用了大寫金額的提示，但這種繁體字，對於信息提取還是比較吃力。

之前有個交互設計師柴維英就提到了這種現狀，甚至提出了一個不錯的方案。

她的思考方案是：當用戶輸入的金額超過千時，出現最高分位提示，每多輸入一位，最高分位隨之增加。閱讀速度大大提升。

還可以採用萬分位分隔符，3,233,234 採用萬分位即 323,3234 一眼可以看出有 323 萬，但這個方法並沒有在國內推行，猜測是，目前所有產品都採用千分位，用戶已經形成了習慣，即使使用起來並不方便，如果改成萬分位，會給用戶增加一定的理解成本。

當然了，在少數場景中，用戶在使用轉賬這個功能時，並不會涉及到太大的金額。也就不會有金額認知困難的情況出現，比如支付寶、微信、日常所涉及到的轉賬最高也才幾萬。

3. 密碼輸入框

密碼輸入框，目前有兩種形式，第一種是 input 框——password 的默認狀態，輸入以「 * 」展示，從開始輸入密碼，到結束，都是以「 * 」展示，如果沒有查看密碼操作，很難知道自己輸入的到底準不準確。

因此還有一種方式，就是在輸入的時候，最新的字符，显示 1～2s，這樣，用戶可以看清楚自己輸入的內容，能減少部分用戶，進行點擊查看密碼操作。

一旦涉及到密碼，必須有確認密碼，為用戶輸入做校正，減少用戶輸入的錯誤率。

4. 郵箱網址輸入框

郵箱輸入

在做郵箱輸入的時候，適當加上主機名選擇，也就是我們所謂的後綴選擇。目的是為了減少用戶輸入。

但你可不要就認為只是加上幾個常用的郵箱選擇就萬事大吉了。

舉個例子，有些用戶的郵箱為 chetchan@aliyun.mou.com 怎麼去處理，還有些用戶的子域是經過自定義的，比如子域會換成公司名字：chetchan@taobao.com。

針對不同的場景不同的用戶去進一步考量，因此我們可以選擇這種設計方案

在用戶輸入時，自動彈出下拉列表，同時匹配常用郵箱，如果用戶使用的是 qq 郵箱，即可直接點擊選擇。如果用戶找不到自己想要輸入的郵箱，則會繼續輸入完整郵箱。

網址輸入

網址輸入在輸入框中使用頻率不是很高，但還是提一下。

在講網址輸入之前，我們先看網址的結構，網址由協議（http/https）、服務器類別（www 就是 web 服務器）、名稱、域名（com、cn、net……等等）四部分構成。

我們經常在輸入的時候，幾乎都是從 www 開始的，而瀏覽器又會自動補充協議。因此無需我們輸入協議。

而大多時候，我們在記憶網址的時候，是不會去記它前面的協議的，因為我們的瀏覽器默認是隱藏掉協議的，有些甚至會把服務器類別也隱藏掉。

有些產品在記錄網址/鏈接的時候，會在前面加上協議選擇，讓用戶選擇 http 或者 https。

但是，除了特定的網頁，比如百度、淘寶、京東，其它網頁我們是很難記住它的完整網址的，因此更多是在使用複製粘貼的操作，而你一旦複製，就會將網址前面的協議一同複製，也就不存在上述問題了。

後記

以上就是《設計師必不可少的表單設計（上篇）》全部內容，感謝大家百忙之中抽出時間看完，下一篇會繼續對錶單設計的其它模塊，如選擇器、步進器等模塊進行分享我的理解。

最後自我介紹一下:

我是一個熱衷於代碼的產品設計師——chetchan

更多知識點可以看這篇：

閱讀文章 >>

參考文獻：

• http://www.woshipm.com/pd/928596.html
• http://www.woshipm.com/pd/441549.html
• https://www.nngroup.com/articles/form-design-placeholders/
• http://www.woshipm.com/pd/201818.html
• https://www.zcool.com.cn/u/14393213

歡迎關注作者的微信公眾號； INDEX設計筆記

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5首頁_萬字乾貨！幫你徹底完整掌握表單設計方法（上）