7個(gè)設(shè)計(jì)秘訣

 　　7個(gè)設(shè)計(jì)秘訣

          表單是網(wǎng)頁設(shè)計(jì)中最常見的元素，幾乎每個(gè)網(wǎng)站都會(huì)包含一種甚至幾種不同類型的表單。從簡單的電子郵件搜集和訂閱，到注冊(cè)、下單、購買，表單一向伴隨著網(wǎng)頁而存在。所以，設(shè)計(jì)出悅目易用的表單是特別很是有需要的。

　　也正是由于表單一向伴隨這網(wǎng)頁存在，在曩昔的20多年間，表單的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)也一向在漸漸發(fā)展。雖然很多網(wǎng)頁中的表單涵蓋了大量的信息也數(shù)量可觀的欄目，但是絕大多數(shù)的良好設(shè)計(jì)和最佳實(shí)踐都是以簡單而著稱。好的表單一覽無余，用戶不必要輸入太多信息，條款標(biāo)識(shí)明確，格式清晰，讓用戶盡可能一次就能精確填寫。

　　今天稟享7個(gè)表單設(shè)計(jì)的秘訣，幫你設(shè)計(jì)出素質(zhì)過硬的網(wǎng)頁表單。

　　1、盡量讓表單一覽無余

　　用戶欣賞網(wǎng)站的時(shí)候，通常會(huì)快速掃視來獲取信息，看看網(wǎng)站內(nèi)容和設(shè)計(jì)是否對(duì)他們的胃口或者吻合需求，再?zèng)Q定要如何應(yīng)對(duì)、交互。表單也是一樣的道理。一覽無余的表單能讓用戶馬上知道他們必要填寫多少信息，以及如何提交表單。

　　一份一覽無余的表單具備下面的特性：

　　·對(duì)比度：文本和標(biāo)簽都簡短直觀，易于閱讀，避免使用大量的色彩，盡量采用傳統(tǒng)的詬誶式的文本/背景組合。

　　·分組和間距：像較長的表單那樣，將相近、相干的信息都分到統(tǒng)一組當(dāng)中。以付出為例，用戶的基本信息、付出信息和物流信息分成不同的組。三個(gè)較短的條款比一個(gè)較長的條款要更容易接受?？刂坪脴?biāo)簽文本和填寫表單之間的間距，根據(jù)相干靠近原則，讓條款之間的相互關(guān)系更明確。

　　·舉動(dòng)召喚：金蓮使用大且容易看清的按鈕。按鈕中的文本指向性明確，比如“提交”“立即付出”或者“下一步”，直觀不拖拉。

　　2、考慮使用浮動(dòng)的提醒文本

　　對(duì)于是否要在表單的輸入框中加入提醒文本有許多爭論，其中重要的爭論圍繞在一點(diǎn)上：當(dāng)用戶點(diǎn)擊輸入框，光標(biāo)出現(xiàn)預(yù)備輸入的時(shí)候，其中的提醒文本并沒有主動(dòng)消散，而必要手動(dòng)刪除之后再才能輸入。這就特別很是難堪了。

　　此外，Nielsen Norman Group 的研究發(fā)現(xiàn)，空白字段會(huì)更加吸引用戶細(xì)致，并且能夠幫助用戶更加清晰的輸入信息。

　　假如你覺得有需要給用戶以提醒，那么請(qǐng)考慮使用交互性更強(qiáng)的解決方案：浮動(dòng)的提醒文本。在輸入框內(nèi)加入提醒文本，讓它看起來是占位符，但是許可它動(dòng)效化，當(dāng)用戶的光標(biāo)懸?；蛘唿c(diǎn)擊輸入框的時(shí)候，提醒信息移動(dòng)到左上角的位置上，它永久不會(huì)消散，起到了提醒的作用，便于用戶輸入，動(dòng)效還能給用戶以驚喜，何樂而不為呢?

　　3、使用表單格式掩碼

　　格式掩碼能夠提示用戶輸入的內(nèi)容的格式，字段的長短大小，對(duì)于表單的可用性有顯明提拔。在用戶激活輸入框的時(shí)候，格式掩碼會(huì)出現(xiàn)，它會(huì)幫助用戶格式化輸入信息，避免提交的時(shí)候出錯(cuò)。格式掩碼常見于數(shù)字輸入的時(shí)候。

　　最典型的情況就是電話號(hào)碼的輸入，常見的格式掩碼如下：

　　·(000) 000-0000

　　·000-000-0000

　　·0000000000

　　用戶在輸入過程中，能夠通過格式掩碼實(shí)時(shí)地了解輸入信息的數(shù)位的精確性，節(jié)省了反復(fù)確認(rèn)的過程，或者在提交后報(bào)錯(cuò)再回頭調(diào)整的麻煩。

　　4、把表單設(shè)計(jì)得易于輸入

　　你無法確知用戶使用的是手機(jī)照舊電腦在欣賞你的網(wǎng)頁，輸入你的表單，但是它應(yīng)該對(duì)于各種輸入設(shè)備都充足友愛才行?？紤]到你的表單可能會(huì)是不同類型的鍵盤輸入的，所以你應(yīng)該根據(jù)表單字段屬性和檢測到的鍵盤類型，進(jìn)行適配。

　　在桌面端，用戶應(yīng)該可以只借助鍵盤完成整個(gè)輸入過程，而無需動(dòng)用鼠標(biāo)與觸控板。完成一個(gè)字段的填寫之后，主動(dòng)切換到下一個(gè)字段，或者使用Tab按鍵來切換。W3.org 有一套完備的表單輸入策略供你參考。

　　在移動(dòng)端設(shè)備上，鍵盤有多種不同的類型，不同的鍵盤匹配不同的輸入內(nèi)容。假如必要輸入的是字母，那么可以打開字母鍵盤;假如必要輸入的是數(shù)字，最好直接調(diào)用數(shù)字鍵盤。根據(jù)Google的研究，用戶特別很是喜好輸入數(shù)據(jù)和輸入鍵盤對(duì)應(yīng)起來，并且這種設(shè)定最好是貫穿整個(gè)APP，而不僅僅是某個(gè)義務(wù)。