• 
• 
• 
• 
• 
• 
• 

知識普及 ? 反饋表單的輸入優(yōu)化

反饋表單的輸入優(yōu)化

網(wǎng)頁設(shè)計師 于2021-11-06 20:08發(fā)表 閱讀次數(shù) 1895次

在網(wǎng)站設(shè)計’的詳細(xì)內(nèi)容'>青島網(wǎng)站設(shè)計中，經(jīng)常會用單反饋表單，而優(yōu)化表單的輸入，對網(wǎng)站的用戶體驗提高越來越重要，網(wǎng)站設(shè)計的頁面布局、邏輯組織、視覺樣式等都是值得關(guān)注的細(xì)節(jié)，其中簡化輸入是最近常被提及的，在這里我分享下自己工作中的心得。大部分人不喜歡填表單，因為人們來到網(wǎng)站，主要目的不是填表，而是瀏覽或者購買。精心設(shè)計的表單，使輸入變得流暢讓人心情愉悅，而糟糕的設(shè)計讓人扶墻吐血。那怎樣才是優(yōu)秀的表單呢？ 　　1.預(yù)置文字。 　　采用預(yù)置文字來簡化輸入經(jīng)常在手機(jī)上看到，現(xiàn)在在網(wǎng)頁上也常使用。比如微博上發(fā)言的輸入框，會保留你上一次未發(fā)出的內(nèi)容，可以重新編輯。 　　在網(wǎng)上也會看到把“輸入提示”與“預(yù)置文字”混用。當(dāng)然，你怎樣稱呼他們都是可以的，但要明白這是兩種交互方式。輸入提示的目的是指導(dǎo)填寫的，聚焦輸入框后文本消失；而預(yù)置文字是屬于待修改的正式內(nèi)容，字體樣式應(yīng)與正式輸入的樣式相同，聚焦后文本是不會消失的。 　　當(dāng)表單輸入遇到選填與必填難以抉擇時，考慮預(yù)置文字會是一個不錯的折中方案。比如在一個申請付款的表單中，對用戶來說主要需填寫的是“對方賬號”和“付款金額”，付款說明是一個選填項。但對系統(tǒng)來說，又必須采集付款說明，作為交易憑據(jù)之一，這個付款說明怎樣處理呢？比較下面3個方式，顯然復(fù)選框的方式不適合，因為用戶若不填寫我們就無法收集到數(shù)據(jù)，而輸入提示的方式還是需要用戶去填寫，所以意義也不大。折中了業(yè)務(wù)和用戶兩方面，預(yù)置“轉(zhuǎn)賬”兩字還是不錯的，不想填寫的人完全可以跳過它。 　　2.更高大的輸入框 　　增加輸入框高度，加粗字體，可以讓網(wǎng)頁上的輸入框看起來更容易填寫和閱讀。隨著電腦顯示器尺寸變大，這樣的輸入框也顯得更大氣。 　　3.添加選取器 　　與其讓人輸入不如提供選擇，選取內(nèi)容只要點(diǎn)幾下，就自動填充進(jìn)輸入框，不但可以減少輸入障礙，還能預(yù)防出錯?？梢园讶魏蜗Ｍ臄?shù)據(jù)做成選取器，比如日期、顏色、地址或者歷史記錄等等。 　　舉個例子：前面的“對方開戶姓名”輸入框，需要填寫對方的姓名，如果對方名字里有漢字不認(rèn)識該怎么辦呢？于是我們可以加上一個生僻字的選取器，如圖： 　　打開字庫，可以根據(jù)模糊讀音選取漢字填入輸入框。另外，姓名輸入框有校驗，選取完成后不要忘記對輸入框內(nèi)容進(jìn)行再一次校驗。 　　4.設(shè)備讀取。 　　攝像頭讀取、語音輸入……最近，各種智能錄入方式在手機(jī)上甚是流行，網(wǎng)頁上也不甘心示弱，紛紛添加了這些功能~還有人臉識別，不知道不久后會不會流行起來呢？ 　　5.額外輸入漸進(jìn)展開 　　當(dāng)遇到需要增加高級或額外的選項時，可以采用即時添加刪除的方式。不需要填寫時，可以完全忽略，需要填寫時點(diǎn)擊一下就會顯示。 　　6.利用輸入反饋。 　　除了校驗填寫是否正確，輸入反饋也可以幫助簡化用戶填寫，其中有不少竅門。 　　比如在手機(jī)充值表單里，需要重復(fù)輸入一遍號碼才能確認(rèn)提交。再重復(fù)輸入一次，好像認(rèn)定你肯定會出錯。增加了號碼歸屬地的反饋（配合歷史記錄）可以避免這種讓人有點(diǎn)煩躁的方式。 　　下面這個例子將校驗獲得的推薦郵政編碼填寫到輸入框中，讓電腦變得更聰明一些。推薦的內(nèi)容減少了思考和填寫過程。 　　在反饋的顯示方式上，也值得挑剔一下。比如數(shù)值輸入框里被輸入了字母，格式錯誤。如果對最簡單的提供錯誤提示不滿意，可以試試讓輸入的字母先顯示1秒，然后即被刪除，這樣比單純的限制輸入類型要更容易理解。另外，還可以自動修改顯示格式：號碼輸入完成后，自動增加空格，可以方便閱讀。在需要強(qiáng)調(diào)時這樣使用還可以提示用戶進(jìn)行檢查，但是在普通的輸入框中就不需要那么復(fù)雜了。 　　給金額自動補(bǔ)全小數(shù)，比如下面的例子服務(wù)費(fèi)是有小數(shù)的，自動補(bǔ)全金額的小數(shù)，可以消減顧慮，而且挺有趣。 　　7.設(shè)置輸入屬性。 　　現(xiàn)在比較靠譜的還是Html5提供的一些表單類型屬性。除了限制輸入類型之外還有一些有意思的設(shè)置。拖放屬性，可以從桌面上直接拖進(jìn)相應(yīng)的輸入框里。在郵箱中拖入附件，若主題為空還可自動填寫主題。而range和number屬性，可以直接替換掉輸入框，對數(shù)值輸入很有用，在chrome里顯示如圖： 　　隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，人性化的反饋表單在青島網(wǎng)站設(shè)計和青島網(wǎng)站制作中將越來越普及，網(wǎng)頁訪問的效果也將越來越往人性化和訪問體驗方面靠攏。

反饋表單的輸入優(yōu)化相關(guān)標(biāo)簽：企業(yè)網(wǎng)站制作，制作網(wǎng)站，設(shè)計網(wǎng)頁，制作網(wǎng)站

相關(guān)熱點(diǎn)推薦

寫給在職設(shè)計師們 分類目錄 一個好的網(wǎng)站應(yīng)該同時具 網(wǎng)頁設(shè)計制作應(yīng)注意的問 網(wǎng)頁界面設(shè)計教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計如何做好風(fēng)格統(tǒng) 網(wǎng)站重建怎么保護(hù)已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁被修改的辦 WEB設(shè)計經(jīng)驗 網(wǎng)站推廣技巧之鏈接策略 如何做出創(chuàng)意設(shè)計的網(wǎng)站 網(wǎng)頁的版式設(shè)計—文字的 平度網(wǎng)站設(shè)計公司哪家好 搜索引擎的算法 一個網(wǎng)站，5個目標(biāo) 軟件與網(wǎng)站設(shè)計的區(qū)別 如何挑選專業(yè)的網(wǎng)站建設(shè) 個人主頁作用 生動的設(shè)計 如何處理和把握網(wǎng)頁設(shè)計 中國中小企業(yè)網(wǎng)站建設(shè)規(guī) 網(wǎng)站建設(shè)時，設(shè)計首頁時 專業(yè)網(wǎng)站建設(shè)準(zhǔn)則 企業(yè)網(wǎng)站需要做哪些內(nèi)容 添加新網(wǎng)頁速度不要太快 企業(yè)網(wǎng)站建設(shè)的常見誤區(qū) 網(wǎng)站設(shè)計的前期溝通之重 行之有效的網(wǎng)絡(luò)推廣方式 細(xì)節(jié)決定成敗網(wǎng)站建設(shè)的 如何恢復(fù)百度權(quán)重(最新 青島企業(yè)網(wǎng)站建設(shè) 建站須知 企業(yè)自助建站的利與弊

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶