范文為教學(xué)中作為模范的文章，也常常用來指寫作的模板。常常用于文秘寫作的參考，也可以作為演講材料編寫前的參考。范文書寫有哪些要求呢？我們怎樣才能寫好一篇范文呢？以下是我為大家搜集的優(yōu)質(zhì)范文，僅供參考，一起來看看吧
表單設(shè)計原則篇一
每天我們都使用表單進(jìn)行基本的網(wǎng)上操作。那么大家知道表單設(shè)計的新規(guī)則是什么呢?下面一起來看看!
網(wǎng)上購物、注冊郵箱、社交網(wǎng)絡(luò)甚至參與討論、描述美味的午餐等等都需要我們填好表單。不夸張地說，表單是數(shù)字信息分享的生命根基。然而多年以來，表單的體驗鮮有提升，僅僅停留在功能足夠好卻達(dá)不到體驗上的優(yōu)秀。然而現(xiàn)在，在使用恰當(dāng)技術(shù)的幫助下，我們可以設(shè)計出更快、更簡單、更有成效的表單體驗。
在表單體驗中一條經(jīng)典的原則是“越短越好”。耗費(fèi)用戶更少的精力可以帶來更高的轉(zhuǎn)化率，這當(dāng)然看起來符合邏輯，但是這條原則沒有考慮到很多因素，比如應(yīng)用場景，設(shè)計方式、表單體驗的吸引力等等。
舉個例子，我發(fā)現(xiàn)一個被引用的次數(shù)遠(yuǎn)超其它的報告，它的測試成果被多篇文章和言說提及并被當(dāng)做“真理”，而可怕的是這個研究成果其實(shí)是相當(dāng)有局限性的。這個報告是imaginary landscape(一個開源的網(wǎng)絡(luò)開發(fā)機(jī)構(gòu))近十年前的一次實(shí)驗，試驗中當(dāng)表單從11個字段減少到4個字段，轉(zhuǎn)化率增加了160%。但這只是一個頁面，一次測試，兩個變量得到的實(shí)驗結(jié)果，假設(shè)他們進(jìn)行了多組4個字段的實(shí)驗，或者做10個字段與11個字段的表單作對比，4個與5個字段表單做對比，也會令實(shí)驗更加值得信服。然而他們沒有，這只能說明僅在這一個特定的情況下，確實(shí)減少表單64%的字段能使表格更容易填寫。
在call to action 2015的演講上,來自unbounce 的michael aagaard分享了類似的案例。以提高一個特定表單的商業(yè)轉(zhuǎn)化率作為任務(wù)，他首先將表單的字段數(shù)從9削減到6，轉(zhuǎn)化率下降了14%。深入研究后他發(fā)現(xiàn)，表單中那些被刪除的字段構(gòu)成了一個不太引人注目的體驗，而這恰恰是最吸引用戶的部分。在第二次實(shí)驗，他調(diào)整了原始表單的組織結(jié)構(gòu)和清晰度，并保持9個字段不變，轉(zhuǎn)化率增加了19%。事實(shí)證明，短的表單不總是更好。
所以如果不是通過簡單的使表單更短，我們怎樣用現(xiàn)代技術(shù)來設(shè)計最好的表單呢?讓我們來考慮一些新原則：
-優(yōu)先保證表單的可瀏覽性
-提供更易填寫的表單格式
-給予恰當(dāng)?shù)妮斎胂拗?/p>
-利用定位
很早之前jakob nielsen的研究告訴我們，用戶通常只是快速瀏覽網(wǎng)頁而不是細(xì)致地從上到下閱讀。在填寫表單的時候也是這樣，盡管設(shè)計者希望填寫者全心全意，用戶也未必如你所愿。讓用戶能夠高效的瀏覽表單，對避免錯填漏填至關(guān)重要，尤其是當(dāng)表單是用戶只能填寫一次的時候(比如電子商務(wù)地址表單，注冊表單等等)。
-標(biāo)簽位置
關(guān)于標(biāo)簽的位置已經(jīng)有了很多研究，然而這場辯論還在繼續(xù)。表單大師luke wroblewski在研究中確定，用戶對標(biāo)簽頂部對齊的表單完成時間最短，因為此種方式減少了眼球運(yùn)動的需要量。在通常意義的表單標(biāo)簽中，右對齊的方式能讓用戶第二快的完成表單，尤其建議在當(dāng)頁面高度有限時使用這種方式。雖然左對齊標(biāo)簽的表單用戶完成的最慢，但是當(dāng)表單需填寫的數(shù)據(jù)不太常見時，這種方式能提高理解。
-提示文字
如果將標(biāo)簽作為框內(nèi)提示文字，幫助性也不大。一旦表單獲取點(diǎn)擊焦點(diǎn)，提示文字就消失了，用戶不再能看見它。這會讓用戶產(chǎn)生短期記憶的壓力而增加錯誤的機(jī)率。
即使把標(biāo)簽分開，另外增加框內(nèi)提示文字，用戶乍一看上去也會覺得像已經(jīng)填寫了的樣子。舉個例子，nielsen norman group曾做過的一項眼球追蹤研究就說明，空的輸入框比有提示文字的輸入框更能引起用戶的關(guān)注，而且與空的輸入框相比，用戶更容易忽略有提示文字的輸入框。換句話說，被認(rèn)為是有用的表單提示文本其實(shí)弊大于利，尤其是對習(xí)慣大致瀏覽的用戶。
在某些情況下，提示文字比普通文本的顏色較輕，這可能緩解上述問題。然而這種技術(shù)產(chǎn)生了一個對比度的問題，在白色背景下配淺灰色文本通常不符合被普遍接受的網(wǎng)絡(luò)可訪問性指南(正常文本對比4.5:1)。此外，根據(jù)w3c，提示文字也不支持殘疾人的輔助設(shè)計，這使得這些殘疾人用戶更難準(zhǔn)確填寫表單。
-浮動的標(biāo)簽
浮動標(biāo)簽是一個迅速獲得普及的新的交互設(shè)計方式。在它的設(shè)計中，標(biāo)簽文字開始作為提示文字，然后一旦用戶開始填寫，標(biāo)簽將升到上面，解決了上述提示文字消失的問題。
雖然這種方式還可以幫助減少頁面長度，在移動端特別有幫助。但是它不能解決上述文本框看上去已經(jīng)被填補(bǔ)的問題。因此，nielsen norman group不建議這種做法，還是應(yīng)該保持標(biāo)簽在上面，除非頁面長度是最重要的設(shè)計關(guān)注點(diǎn)。
以前，在填寫表格時用戶有很多的猜測?！拔业碾娫捥柎a應(yīng)該是哪種格式?我的信用卡有沒有少輸一位?這個鍵盤上的符號“@”在哪里?” 新技術(shù)使我們能夠不讓用戶被這些疑慮困擾，提供更清爽的體驗。
-輸入掩碼
幫助用戶格式化輸入文本的輸入掩碼，雖然在外觀上與提示文字類似，其實(shí)有明顯的不同。首先，掩碼只出現(xiàn)在用戶點(diǎn)擊輸入框的時候，避免了上述瀏覽障礙的問題。其次，輸入的.文字自動應(yīng)用正確的文本格式，讓用戶將填充字段時的焦點(diǎn)放在所需的數(shù)據(jù)上，這樣更容易注意到錯誤。在下面的例子中，填寫電話號碼時括號和破折號自動填充。
在填寫手機(jī)號、信用卡、貨幣等等的時候，這種簡單的技術(shù)可以節(jié)省我們的時間和精力。
-輸入字段的html屬性
設(shè)計師知道對于輸入特定的數(shù)據(jù)需要展示正確的移動鍵盤，但是對究竟哪種才是正確的鍵盤類型有些疑慮。
舉個例子，對于最常用的“數(shù)字”類型屬性的輸入框，常常不會觸發(fā)數(shù)字小鍵盤，觸發(fā)的是普通的帶有數(shù)字區(qū)域的鍵盤，數(shù)字鍵的大小遠(yuǎn)小于小鍵盤。
對于只包括數(shù)字的字段，比如日期，郵編，信用卡等等。使用數(shù)字小鍵盤可以有更大的點(diǎn)擊目標(biāo)，從而使用戶用更小的精力輸入。(為了使其展示，前端中可用“tel”作為type值或者添加屬性“pattern=[0-9]* ”。)然而，為數(shù)字狀態(tài)設(shè)置全鍵盤，對如街道地址等以數(shù)字作為開始的混合字段依然有用。
這里有其他的幾種可以被加入輸入框的屬性，從而可以消除額外的點(diǎn)擊和錯誤。
自動填寫：利用瀏覽器可以保存并列舉用戶以前填寫過的值。對敏感數(shù)據(jù)應(yīng)關(guān)閉此功能。
自動更正：更正輸入的拼寫錯誤。對名稱，地址等特殊字段應(yīng)該關(guān)閉此功能。
自動首字母大寫：自動大寫輸入的第一個字母。這適用于填寫姓名，而不可用于電子郵件地址。
拼寫檢查：用紅色下劃線標(biāo)出拼寫錯誤的單詞。對名稱，地址等特殊字段應(yīng)該關(guān)閉此功能。
如今越來越多的人用小屏的移動設(shè)備，我們需要考慮到小屏的使用場景，避免用戶不必要的輸入，在提高用戶滿意度的同時還可以減少錯誤率。
-地址預(yù)填充
在網(wǎng)上注冊表單中地址的填寫常常是最麻煩的，因為包括多個字段，長長的地址名。通過把長地址拆解為單個字段，不僅有助于讓用戶聚焦在輸入上(是的他們總是會頻繁切換頁面)，也削減了大量的輸入。
在下面的例子中輸入谷歌總部的地址(街道，城市，州，郵編，國家)，完整的輸入過程只需鍵入10個字母，而如果不用自動填充的話，用戶需要手動輸入50多次。
雖然調(diào)用定位數(shù)據(jù)常用在移動應(yīng)用程序中，但是我們不能忘記在所有的平板電腦和臺式機(jī)上也可以使用。特別是當(dāng)在觸摸屏上打字很麻煩時，基于位置的信息預(yù)填充可以節(jié)省用戶寶貴的時間并提高轉(zhuǎn)化率。
諾德斯特龍百貨網(wǎng)站的產(chǎn)品詳情頁就是這種技術(shù)的一個很好的例子，產(chǎn)品利用定位完全跳過了表單填寫。頁面調(diào)用定位信息，并在最接近的商店自動查找項目的庫存，而不是要求用戶輸入郵政編碼來獲取地址。這樣不僅僅節(jié)省了用戶的時間，還可以讓用戶直接看到“最近店面地址”這個有用的信息。
s("content_relate");【表單設(shè)計的新規(guī)則】相關(guān)文章：
php中的表單處理
09-14
php 表單驗證方法
09-18
php防止表單重復(fù)提交的方法
09-30
dreamweaver如何檢查表單
09-26
form表單中屬性及功能應(yīng)用
09-26
php 表單驗證 e-mail 和 url
09-20
數(shù)字化時代廣域網(wǎng)的五大新規(guī)則
10-07
網(wǎng)頁設(shè)計中的設(shè)計
09-27
網(wǎng)頁設(shè)計的設(shè)計技巧
09-15
【本文地址：http://mlvmservice.com/zuowen/2791500.html】
