設(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)化空間是很誘人的。這導(dǎo)致了許多可用性問題，這些問題由尼爾森諾曼集團的凱蒂謝爾溫總結(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)該包括次要選項還有更大的哲學(xué)爭論。</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>
