首頁?>?知識(shí)?資訊?>?讓網(wǎng)站設(shè)計(jì)表單更親切!?>?正文

讓網(wǎng)站設(shè)計(jì)表單更親切!

2012/2/22 0:00:00 · 稿源:傳誠信

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

怎樣才是優(yōu)秀的表單呢?頁面的布局、邏輯組織、視覺樣式等都是值得關(guān)注的細(xì)節(jié),其中簡(jiǎn)化輸入是最近常被提及的,在這里我分享下自己工作中的心得…

1、?更高大的輸入框

增加輸入框高度,加粗字體,可以讓網(wǎng)頁上的輸入框看起來更容易填寫和閱讀。隨著電腦顯示器尺寸變大,這樣的輸入框也顯得更大氣。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

2、?添加選取器。

與其讓人輸入不如提供選擇,選取內(nèi)容只要點(diǎn)幾下,就自動(dòng)填充進(jìn)輸入框,不但可以減少輸入障礙,還能預(yù)防出錯(cuò)??梢园讶魏蜗M臄?shù)據(jù)做成選取器,比如日期、顏色、地址或者歷史記錄等等。

舉個(gè)例子:前面的“對(duì)方開戶姓名”輸入框,需要填寫對(duì)方的姓名,如果對(duì)方名字里有漢字不認(rèn)識(shí)該怎么辦呢?于是我們可以加上一個(gè)生僻字的選取器,如圖:

打開字庫,可以根據(jù)模糊讀音選取漢字填入輸入框。另外,姓名輸入框有校驗(yàn),選取完成后不要忘記對(duì)輸入框內(nèi)容進(jìn)行再一次校驗(yàn)。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

3、?預(yù)置文字。

采用預(yù)置文字來簡(jiǎn)化輸入經(jīng)常在手機(jī)上看到,現(xiàn)在在網(wǎng)頁上也常使用。比如微博上發(fā)言的輸入框,會(huì)保留你上一次未發(fā)出的內(nèi)容,可以重新編輯。

在網(wǎng)上也會(huì)看到把“輸入提示”與“預(yù)置文字”混用。當(dāng)然,你怎樣稱呼他們都是可以的,但要明白這是兩種交互方式。輸入提示的目的是指導(dǎo)填寫的,聚焦輸入框后文本消失;而預(yù)置文字是屬于待修改的正式內(nèi)容,字體樣式應(yīng)與正式輸入的樣式相同,聚焦后文本是不會(huì)消失的。

當(dāng)表單輸入遇到選填與必填難以抉擇時(shí),考慮預(yù)置文字會(huì)是一個(gè)不錯(cuò)的折中方案。比如在一個(gè)申請(qǐng)付款的表單中,對(duì)用戶來說主要需填寫的是“對(duì)方賬號(hào)”和“付款金額”,付款說明是一個(gè)選填項(xiàng)。但對(duì)系統(tǒng)來說,又必須采集付款說明,作為交易憑據(jù)之一,這個(gè)付款說明怎樣處理呢?比較下面3個(gè)方式,顯然復(fù)選框的方式不適合,因?yàn)橛脩羧舨惶顚懳覀兙蜔o法收集到數(shù)據(jù),而輸入提示的方式還是需要用戶去填寫,所以意義也不大。折中了業(yè)務(wù)和用戶兩方面,預(yù)置“轉(zhuǎn)賬”兩字還是不錯(cuò)的,不想填寫的人完全可以跳過它。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

4、?設(shè)備讀取。

攝像頭讀取、語音輸入……最近,各種智能錄入方式在手機(jī)上甚是流行,網(wǎng)頁上也不甘心示弱,紛紛添加了這些功能~還有人臉識(shí)別,不知道不久后會(huì)不會(huì)流行起來呢?

5、?設(shè)置輸入屬性。

現(xiàn)在比較靠譜的還是Html5提供的一些表單類型屬性。除了限制輸入類型之外還有一些有意思的設(shè)置。拖放屬性,可以從桌面上直接拖進(jìn)相應(yīng)的輸入框里。在郵箱中拖入附件,若主題為空還可自動(dòng)填寫主題。而range和number屬性,可以直接替換掉輸入框,對(duì)數(shù)值輸入很有用,在chrome里顯示如圖:

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

6、?額外輸入漸進(jìn)展開

當(dāng)遇到需要增加高級(jí)或額外的選項(xiàng)時(shí),可以采用即時(shí)添加刪除的方式。不需要填寫時(shí),可以完全忽略,需要填寫時(shí)點(diǎn)擊一下就會(huì)顯示。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

7、?利用輸入反饋。

除了校驗(yàn)填寫是否正確,輸入反饋也可以幫助簡(jiǎn)化用戶填寫,其中有不少竅門。

比如在手機(jī)充值表單里,需要重復(fù)輸入一遍號(hào)碼才能確認(rèn)提交。再重復(fù)輸入一次,好像認(rèn)定你肯定會(huì)出錯(cuò)。增加了號(hào)碼歸屬地的反饋(配合歷史記錄)可以避免這種讓人有點(diǎn)煩躁的方式。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

下面這個(gè)例子將校驗(yàn)獲得的推薦郵政編碼填寫到輸入框中,讓電腦變得更聰明一些。推薦的內(nèi)容減少了思考和填寫過程。

在反饋的顯示方式上,也值得挑剔一下。比如數(shù)值輸入框里被輸入了字母,格式錯(cuò)誤。如果對(duì)最簡(jiǎn)單的提供錯(cuò)誤提示不滿意,可以試試讓輸入的字母先顯示1秒,然后即被刪除,這樣比單純的限制輸入類型要更容易理解。另外,還可以自動(dòng)修改顯示格式:號(hào)碼輸入完成后,自動(dòng)增加空格,可以方便閱讀。在需要強(qiáng)調(diào)時(shí)這樣使用還可以提示用戶進(jìn)行檢查,但是在普通的輸入框中就不需要那么復(fù)雜了。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn

給金額自動(dòng)補(bǔ)全小數(shù),比如下面的例子服務(wù)費(fèi)是有小數(shù)的,自動(dòng)補(bǔ)全金額的小數(shù),可以消減顧慮,而且挺有趣。

讓網(wǎng)站設(shè)計(jì)表單更親切!北京傳誠信 jzztb.org.cn
? ??大部分人不喜歡填表單,因?yàn)槿藗儊淼骄W(wǎng)站,主要目的不是填表,而是瀏覽或者購買。精心設(shè)計(jì)的表單,使輸入變得流暢讓人心情愉悅,而糟糕的設(shè)計(jì)讓人扶墻吐血。

本文作者來自北京傳誠信,轉(zhuǎn)載請(qǐng)注明出處:北京傳誠信(jzztb.org.cn

選擇北京網(wǎng)站建設(shè)公司-傳誠信,優(yōu)質(zhì)服務(wù),絕對(duì)不容錯(cuò)過 !
1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證?
(配送雙線獨(dú)立ip空間,國際A級(jí)BGP機(jī)房,99.5% 的主機(jī)在線時(shí)間)?
2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心?
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。?
-----------------------------------------------------------------------------------------------------
我們的與眾不同之處:

免費(fèi)網(wǎng)絡(luò)營銷顧問:我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營銷顧問服務(wù),您需要了解關(guān)于如何開展網(wǎng)絡(luò)營銷,電子商務(wù),網(wǎng)站設(shè)計(jì)等的事宜,歡迎隨時(shí)聯(lián)系我們。

seo友好的網(wǎng)站管理系統(tǒng):除了優(yōu)質(zhì)的網(wǎng)站空間,網(wǎng)站管理系統(tǒng),和網(wǎng)站設(shè)計(jì)外,我們的網(wǎng)站管理系統(tǒng)更是seo友好的,包括:自定義欄目名,Google Sitemap自動(dòng)生成,靜態(tài)頁面生成等等,讓您的網(wǎng)站。

免費(fèi)網(wǎng)絡(luò)營銷培訓(xùn):如何更好的投放網(wǎng)絡(luò)廣告,如何提高網(wǎng)絡(luò)廣告的投資回報(bào),如何發(fā)帖子,
如何優(yōu)化網(wǎng)站,我們有豐富的經(jīng)驗(yàn)開放給您!祝君成功!
聯(lián)系我們:010-62199213 62122723-808 ?400-697-8610 ?徐小姐


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354