設(shè)計更好的形式
設(shè)計師常犯的錯誤以及如何解決這些錯誤
無論是注冊流程昧旨，多視圖步驟還是單調(diào)數(shù)據(jù)輸入界面骤肛，表單都是數(shù)字產(chǎn)品設(shè)計的重要組成部分之一俗慈。本文重點介紹了表單設(shè)計的常見做法和注意事項扮惦。請記住艇搀，這些是一般準則尿扯，每條規(guī)則都有例外。
表格應(yīng)該是一列
多列破壞用戶垂直勢頭中符。
頂部對齊標簽
用戶以比左對齊標簽更高的速率完成頂部對齊的標簽形式姜胖。頂部對齊的標簽在移動設(shè)備上也可以很好地翻譯 但是，考慮將左對齊標簽用于具有可變選項的大型數(shù)據(jù)集條目淀散，因為它們更容易一起掃描右莱，它們會降低高度，并提示比頂部對齊標簽更多的考慮档插。
用他們的輸入組標簽
將標簽和輸入緊密地放在一起慢蜓，確保字段之間有足夠的高度，以便用戶不會感到困惑郭膛。
避免全部大寫
所有上限更難以閱讀和掃描晨抡。
如果在6以下顯示所有選項
將選項放置在選擇器下拉菜單中需要兩次點擊，并隱藏選項。如果有超過5個選項耘柱，請使用輸入選擇器如捅。如果有超過25個選項，則在下拉菜單中加入上下文搜索调煎。
抵制使用占位符文本作為標簽
<figure name="4bf8" id="4bf8" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">通過使用占位符文本作為標簽來優(yōu)化空間是很誘人的镜遣。這導致了許多可用性問題，這些問題由尼爾森諾曼集團的凱蒂謝爾溫總結(jié)士袄。</figcaption>
</figure>
為了便于掃描悲关，將復(fù)選框（和收音機）置于彼此之下
將復(fù)選框放在下面可以輕松掃描。
使CTA具有描述性
行動呼吁應(yīng)說明意圖娄柳。
內(nèi)聯(lián)指定錯誤
向用戶顯示發(fā)生錯誤的位置并提供原因寓辱。
在用戶填寫該字段后使用內(nèi)聯(lián)驗證（除非在過程中幫助他們）
<figure name="265b" id="265b" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">不要在用戶輸入時使用內(nèi)聯(lián)驗證 - 除非它幫助他們 - 例如創(chuàng)建密碼，用戶名或帶字符數(shù)的消息赤拒。</figcaption>
</figure>
不要隱藏基本幫手文本
<figure name="007c" id="007c" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="26" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 363px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[圖片上傳失敗...(image-2de964-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">盡可能暴露基本幫助文本秫筏。對于復(fù)雜的輔助文本，請考慮將其放在焦點狀態(tài)的輸入旁邊挎挖。</figcaption>
</figure>
區(qū)分主要和次要行動
<figure name="2396" id="2396" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="26" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 363px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[圖片上傳失敗...(image-9a5e21-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">關(guān)于是否應(yīng)該包括次要選項還有更大的哲學爭論跳昼。</figcaption>
</figure>
使用字段長度作為可供件
<figure name="22f6" id="22f6" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="16" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 218px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[圖片上傳失敗...(image-b43f07-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">領(lǐng)域的長度提供了答案的長度。對于具有定義的字符數(shù)的字段肋乍，如電話號碼，郵政編碼等</figcaption>
</figure>
溝*和表示可選字段
<figure name="7cd1" id="7cd1" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="31" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 429px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[圖片上傳失敗...(image-67b397-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">用戶并不總是知道所需字段標記（*）的含義敷存。相反墓造，最好是表示可選字段。</figcaption>
</figure>
集團相關(guān)信息
<figure name="ea7e" id="ea7e" class="graf graf--figure graf-after--h3 graf--trailing" style="display: block; margin: 44px 0px 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="70" height="75" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 700px; height: 752.5px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[圖片上傳失敗...(image-a8376d-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 700px; top: 0px; margin-top: 10px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">用戶分批思考锚烦，長時間的形式會感到壓倒性的觅闽。通過創(chuàng)建邏輯組，用戶可以更快地理解表單涮俄。</figcaption>
</figure>
為什么這么問蛉拙？
省略可選字段并考慮其他收集數(shù)據(jù)的方式〕骨祝總是問問自己孕锄，問題可以推斷，推遲或完全排除苞尝。
數(shù)據(jù)輸入越來越自動化畸肆。例如，移動設(shè)備和可穿戴設(shè)備在沒有用戶意識的情況下收集大量數(shù)據(jù)宙址。想想你可以利用社交轴脐，對話用戶界面，短信，電子郵件大咱，語音恬涧，OCR，位置碴巾，指紋溯捆，生物識別等方式。
讓它變得有趣
生命短暫餐抢。沒有人想填寫表格现使。會話。好笑旷痕。逐漸參與碳锈。做到意外。設(shè)計師的角色是表達他們公司的品牌以引發(fā)情緒反應(yīng)欺抗。如果做得對售碳，它會提高完成率。只要確保你沒有違反上面列出的規(guī)則绞呈。
我希望這篇文章能幫助你設(shè)計更好的表格贸人。如果您正在設(shè)計一個您希望得到我的反饋的設(shè)計，請加入這個評論平臺佃声，并與我一起在andrewcoyle55 [@] gmail上分享您的設(shè)計艺智。
期待您的設(shè)計。我希望我能幫上忙圾亏。
<figure name="276d" id="276d" class="graf graf--figure graf-after--p" style="display: block; margin: 43px 0px 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="42" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 600px; height: 349px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[圖片上傳失敗...(image-55c38-1526630337322)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 700px; top: 0px; margin-top: 10px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">分享您的工作并通過https://ohapollo.com/sign-up/獲取反饋意見</figcaption>
</figure>
