Web表單設(shè)計(jì)目錄一. 前言Why? 3二．原理 6三．原則 7四．問題與幫助 74.1原則：保留刪減延遲解釋，就是說： 74.2最佳實(shí)踐： 84.2.1提供一個(gè)貼切說明表單的標(biāo)題 84.2.2提問時(shí)機(jī) 84.2.3解釋提問的原因 104.2.4提供用戶所需, 104.2.5問題越少越好 114.2.6避免敏感問題 124.2.7提問詞語(yǔ) 124.2.8主動(dòng)語(yǔ)態(tài)的簡(jiǎn)單句 134.2.9注冊(cè)幫助 134.2.10.采用友好的語(yǔ)言詢問問題 14五．輸入 155.1必填與選填 155.2表單非常短，可使用輸入框內(nèi)標(biāo)簽 165.3暗示 165.4組合服務(wù)條款和主動(dòng)作的機(jī)會(huì) 175.5輸入框的高度，高高的寬度，提高用戶的注冊(cè)率。 175.6輸入框之間的間距，為輸入框高度的50-70% 185.7其他選項(xiàng) 195.8個(gè)性化表單 19六．動(dòng)作/驗(yàn)證/錯(cuò)誤/成功 206.1主動(dòng)作與此動(dòng)作 206.2動(dòng)態(tài)幫助,動(dòng)態(tài)隱私解釋 216.3動(dòng)態(tài)建議 216.4動(dòng)態(tài)提示（輸入用戶名，歡迎登錄）。 226.5動(dòng)態(tài)驗(yàn)證 226.6處理表單時(shí)，應(yīng)當(dāng)明確表達(dá)，避免重復(fù)提交 236.7即時(shí)質(zhì)量指示條引導(dǎo)人們更好的回答復(fù)雜問題 236.8鼠標(biāo)放在主按鈕上顯示提示，按鈕樣式發(fā)生變化 246.9頂部錯(cuò)誤信息，雙重視覺來進(jìn)行提醒 246.10錯(cuò)誤提示文字要仔細(xì)斟酌（哪個(gè)提示更友好？） 256.11成功頁(yè)面 26七．外觀布局 287.1使用進(jìn)度指示器 287.2避免雙欄表單 287.3對(duì)齊方式 317.3.1頂部 317.3.2左對(duì)齊 317.3.3右對(duì)齊 317.3.4如何選擇 317.4冒號(hào)，可有可無。 31前言Why?《WebFormDesign:FillingtheBlanks》中經(jīng)過重新設(shè)計(jì)，表單完成率往往能提高10%-40%，如果表單完成意味著完成新銷售或者獲得新客戶，那么就意味著大幅提高利潤(rùn)或者節(jié)約大量的資金。比如在搜索引擎或者各類網(wǎng)站投放廣告。例1：一般的電子商務(wù)網(wǎng)站中，在進(jìn)入訂單流程的時(shí)候都需要注冊(cè)，為什么？增加注冊(cè)量？給客戶帶來了方便？某一電子商務(wù)公司，在訂單流程中去掉了注冊(cè)按鈕，購(gòu)買量提高了45%來看國(guó)內(nèi)三個(gè)關(guān)于購(gòu)物注冊(cè)例子：當(dāng)當(dāng)：進(jìn)入訂單流程后必須注冊(cè)或者登錄、京東：進(jìn)入訂單流程，在當(dāng)頁(yè)注冊(cè)或者登錄樂淘：不需注冊(cè)即可購(gòu)買例2：ebay注冊(cè)表單的重新設(shè)計(jì)案例《aprocessforcreatingthebusinesscaseforuserexperienceprojects》二．原理根據(jù)眼動(dòng)原理，用戶填寫表單時(shí)，視線集中在標(biāo)簽和輸入框。三．原則減少痛苦，保持簡(jiǎn)潔容易。說明填寫路徑，指導(dǎo)用戶完成填寫?？紤]情景，不同的應(yīng)用情景，表單設(shè)計(jì)有所區(qū)別。確保一致溝通，制定各個(gè)部門要形成一致。四．問題與幫助4.1原則：保留刪減延遲解釋，就是說：必須的問題保留；不一定需要的刪減；必須是不是可以延遲；隱私問題要進(jìn)行解釋；4.2最佳實(shí)踐：4.2.1提供一個(gè)貼切說明表單的標(biāo)題W4.2.2提問時(shí)機(jī)選擇恰當(dāng)?shù)臅r(shí)機(jī)提問，對(duì)問題提問時(shí)機(jī)進(jìn)行延時(shí)第一個(gè)頁(yè)面：第二個(gè)頁(yè)面：4.2.3解釋提問的原因4.2.4提供用戶所需,考慮用戶如何獲取答案,CanIhelpyou?18004.2.5問題越少越好4.2.6避免敏感問題如信用卡卡號(hào)，手機(jī)號(hào)碼等，如必須，希望能解釋原因4.2.7提問詞語(yǔ)以用戶能夠理解的詞語(yǔ)對(duì)他們熟悉的概念提問，使用目標(biāo)用戶熟知的詞匯。根據(jù)表單所處行業(yè)不同，術(shù)語(yǔ)有可能也不一樣4.2.8主動(dòng)語(yǔ)態(tài)的簡(jiǎn)單句4.2.9注冊(cè)幫助用戶為什么要在你的網(wǎng)站上注冊(cè)？能夠享受的服務(wù)是什么？//4.2.10.采用友好的語(yǔ)言詢問問題Tellusaboutyourselft五．輸入5.1必填與選填考慮必填項(xiàng)和可選項(xiàng)的比例，每項(xiàng)必填，可只標(biāo)注選填標(biāo)簽，反之亦然。目的，減少表單信息量。 K （都為必填，無需標(biāo)記）所有都為必填，沒有必填標(biāo)示5.2表單非常短，可使用輸入框內(nèi)標(biāo)簽5.3暗示如有可能，輸入框的長(zhǎng)度應(yīng)提供有意義的暗示，否則，應(yīng)保持輸入框的長(zhǎng)度一致。W5.4組合服務(wù)條款和主動(dòng)作的機(jī)會(huì)5.5輸入框的高度，高高的寬度，提高用戶的注冊(cè)率。5.6輸入框之間的間距，為輸入框高度的50-70%5.7其他選項(xiàng)考慮推動(dòng)用戶使用你的預(yù)設(shè)選項(xiàng)。能否為沒有考慮得到的潛在答案提供一個(gè)“其他”選項(xiàng)？5.8個(gè)性化表單設(shè)置個(gè)性化的默認(rèn)選擇，客戶能更快的完成表單六．動(dòng)作/驗(yàn)證/錯(cuò)誤/成功6.1主動(dòng)作與此動(dòng)作盡量避免表單中的次動(dòng)作，如無法避免則保持視覺差異3606.2動(dòng)態(tài)幫助,動(dòng)態(tài)隱私解釋6.3動(dòng)態(tài)建議6.4動(dòng)態(tài)提示（輸入用戶名，歡迎登錄）。6.5動(dòng)態(tài)驗(yàn)證動(dòng)態(tài)驗(yàn)證，輸入限制要采用實(shí)時(shí)、動(dòng)態(tài)更新的方法傳遞輸入限制（富文本框）。6.6處理表單時(shí)，應(yīng)當(dāng)明確表達(dá)，避免重復(fù)提交6.7即時(shí)質(zhì)量指示條引導(dǎo)人們更好的回答復(fù)雜問題6.8鼠標(biāo)放在主按鈕上顯示提示，按鈕樣式發(fā)生變化6.9頂部錯(cuò)誤信息，雙重視覺來進(jìn)行提醒6.10錯(cuò)誤提示文字要仔細(xì)斟酌（哪個(gè)提示更友好？）WTSR6.11成功頁(yè)面表單成功后的頁(yè)面,成功信息必須出現(xiàn)，不要出現(xiàn)死胡同,結(jié)束對(duì)話時(shí)說“謝謝”，及時(shí)跟進(jìn)下一步，要有合適的跳轉(zhuǎn)點(diǎn),并且要有幫助信息。 www.R 七．外觀布局7.1使用進(jìn)度指示器7.2避免雙欄表單(京東原來是雙欄，后來變?yōu)閱螜诒韱?