如何規(guī)避網(wǎng)頁(yè)表單設(shè)計(jì)錯(cuò)誤

生活中很多地方都會(huì)涉及到表單，經(jīng)常遇見(jiàn)的有登錄注冊(cè)、預(yù)訂車(chē)票、填寫(xiě)個(gè)人信息等等。表單是一個(gè)非常常見(jiàn)的模塊，設(shè)計(jì)不易出彩卻很容易出錯(cuò)，使用戶體驗(yàn)不好，產(chǎn)生厭惡的情緒，有很多用戶因?yàn)橐粋€(gè)注冊(cè)登錄氣急敗壞就放棄了一個(gè)產(chǎn)品。

今天就聊一聊如何規(guī)避網(wǎng)頁(yè)表單設(shè)計(jì)錯(cuò)誤，先說(shuō)一下網(wǎng)頁(yè)表單設(shè)計(jì)。

表單的基本元素

表單元素包括標(biāo)簽、占位符、輸入框、提示文本、操作。拿下圖的登錄界面舉例，

• 標(biāo)簽。告訴用戶需要回答什么問(wèn)題。
• 輸入域。供用戶回答問(wèn)題的控件，比如輸入框、選擇框、下拉框、滑塊等。
• 操作。供用戶執(zhí)行動(dòng)作的控件，比如提交、取消、返回、重置。
• 幫助。幫助用戶回答問(wèn)題的信息，比如幫助文字、圖文示例。

在表單設(shè)計(jì)中，每個(gè)元素都有其存在的意義。有時(shí)候?yàn)榱松钊肜斫馄渲心骋辉卦陧?yè)面中的意義，我會(huì)特意上除掉這個(gè)元素研究頁(yè)面發(fā)生了什么變化。 第一、表單中的標(biāo)簽和占位符都是提示用戶輸入框輸入字段內(nèi)容，有點(diǎn)啰嗦，所以將標(biāo)簽刪除掉，如下圖：

這樣畫(huà)面看上去對(duì)齊簡(jiǎn)潔了很多，似乎標(biāo)簽真的是多余的東西。事實(shí)上我個(gè)人輸入字段少于三個(gè)的時(shí)候才用這種設(shè)計(jì)方案，但是當(dāng)發(fā)現(xiàn)當(dāng)輸入字段多余三個(gè)之后，這種方案就出問(wèn)題了，例如下圖：

唉，發(fā)現(xiàn)問(wèn)題來(lái)了，例如上圖，當(dāng)我鼠標(biāo)點(diǎn)到第五個(gè)輸入框，輸入提示消失的時(shí)候，你真的不知道自己前面輸入的和即將填寫(xiě)的信息是什么了?這個(gè)時(shí)候我們會(huì)產(chǎn)生混亂，甚至不得不回去刪除已經(jīng)填寫(xiě)好的東西看看自己填寫(xiě)了什么。不要懷疑自己，這種現(xiàn)象從心理學(xué)角度來(lái)看，是因?yàn)槿藗兊亩虝r(shí)記憶局限。叫“五加減一”原則，人短時(shí)間內(nèi)只能記住4到6件東西，這是傳說(shuō)中的“五加減一”原則。但因?yàn)楸韱屋斎氲臅r(shí)候需要?jiǎng)佑玫接洃洐z索，占用了部分大腦耗能，“五加減一”將要大打折扣。所以表單設(shè)計(jì)上更加適用的是“二加減一”原則，既當(dāng)用戶需要輸入字段多余三個(gè)的時(shí)候，就有需要標(biāo)簽給用戶提示。所以標(biāo)簽留下是有必要的，因?yàn)闃?biāo)簽始終如一的說(shuō)明你輸入或即將輸入的是什么內(nèi)容。

第二占位符與標(biāo)簽重復(fù)的問(wèn)題怎么辦?那就簡(jiǎn)單粗暴一點(diǎn)將占位符去掉試試，如下圖：

如圖所示，這樣看上去也不是不行，內(nèi)容也能數(shù)清楚，還不會(huì)重復(fù)。

事實(shí)上做過(guò)很多表單頁(yè)面之后慢慢知道了，在很多社交網(wǎng)站中，用戶所擁有的不僅僅是用戶名，還有可以用手機(jī)號(hào)、郵箱、昵稱等信息登錄。如果沒(méi)有占位符的提示，那到底那個(gè)才可以用來(lái)登錄呢?要是讓用戶去猜，那就是一份失敗的設(shè)計(jì)，那這時(shí)候占位符就發(fā)揮作用了，如下圖：

這樣用戶一眼看上去就知道應(yīng)該怎樣填寫(xiě)，清晰明了。還有一種設(shè)計(jì)方式就是將標(biāo)簽設(shè)計(jì)成圖標(biāo)，這樣一來(lái)畫(huà)面就變得靈活而且簡(jiǎn)潔，如下圖：

另一種新穎輸入框設(shè)計(jì)，當(dāng)用戶點(diǎn)擊輸入框并輸入內(nèi)容之后，標(biāo)簽位移到輸入框上方并通過(guò)色彩變化提示當(dāng)前輸入狀態(tài)，這種表單交互做的更細(xì)膩，提升用戶體驗(yàn)。當(dāng)然這種設(shè)計(jì)方式需要預(yù)留浮動(dòng)文字的空間。

表單中標(biāo)簽與輸入框的對(duì)齊方式

當(dāng)遇見(jiàn)表單很長(zhǎng)，輸入的信息很多，標(biāo)簽與輸入框的對(duì)齊方式就會(huì)影響到用戶的表單體驗(yàn)，對(duì)齊方式有垂直頂部對(duì)齊、水平右對(duì)齊、水平左對(duì)齊。

標(biāo)簽垂直頂對(duì)齊

標(biāo)簽和輸入?yún)^(qū)垂直依次排列，從而降低了對(duì)頁(yè)面寬度的要求。如果你的頁(yè)面沒(méi)有富裕的空間用于標(biāo)簽和輸入?yún)^(qū)的橫向排列，這種組合是個(gè)不錯(cuò)的選擇。

眼動(dòng)軌跡表明，用戶自上而下的掃描表單，焦點(diǎn)多集中在左側(cè)一列，且跳動(dòng)較小。

標(biāo)簽水平左對(duì)齊

標(biāo)簽左對(duì)齊和輸入?yún)^(qū)水平排列，同樣降低了對(duì)頁(yè)面高度的要求。標(biāo)簽左對(duì)齊有利于用戶對(duì)問(wèn)題標(biāo)簽的掃描，但不利于填寫(xiě)答案，因?yàn)闃?biāo)簽距離輸入?yún)^(qū)較遠(yuǎn)，要重新定位到右側(cè)輸入框，確實(shí)要消耗一點(diǎn)時(shí)間。

眼動(dòng)軌跡表明，用戶花在定位輸入?yún)^(qū)上的時(shí)間比看清標(biāo)簽更長(zhǎng)，從而影響了整個(gè)表單的完成時(shí)間。

標(biāo)簽水平右對(duì)齊

標(biāo)簽右對(duì)齊和輸入?yún)^(qū)水平排列，從而降低了對(duì)頁(yè)面高度的要求。但與標(biāo)簽垂直頂對(duì)齊相比，由于標(biāo)簽文字左側(cè)參差不齊，對(duì)問(wèn)題的認(rèn)知和掃描時(shí)間變的更長(zhǎng)。

眼動(dòng)軌跡表明，用戶花了更多時(shí)間在看問(wèn)題，輸入框?qū)λ麄儊?lái)說(shuō)很簡(jiǎn)單?！禬eb Form Design》一書(shū)中對(duì)標(biāo)簽和輸入?yún)^(qū)組合數(shù)據(jù)比較的表格：

總結(jié)一下，標(biāo)簽采取頂部對(duì)齊的方式 能讓用戶更快的瀏覽完成，原因是這種對(duì)齊方式對(duì)眼球移動(dòng)的需求比其他對(duì)齊方式要更少。其中采用右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間僅次于頂部對(duì)齊標(biāo)簽的表單，如果你的網(wǎng)頁(yè)高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長(zhǎng)的，但是，這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀，仔細(xì)考慮的輸入信息(如一些重要的輸入)。

不知道到底怎么排版很更好，現(xiàn)在明白了。希望可以幫助大家更多的了解表單與輸入的設(shè)計(jì)。

名稱欄目：如何規(guī)避網(wǎng)頁(yè)表單設(shè)計(jì)錯(cuò)誤
鏈接地址：http://www.bm7419.com/news42/162942.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、微信公眾號(hào)、商城網(wǎng)站、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)