成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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

2022-06-03    分類: 網(wǎng)站建設(shè)

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

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

表單的基本元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

標(biāo)簽左對(duì)齊和輸入?yún)^(qū)水平排列,同樣降低了對(duì)頁面高度的要求。標(biāo)簽左對(duì)齊有利于用戶對(duì)問題標(biāo)簽的掃描,但不利于填寫答案,因?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ì)頁面高度的要求。但與標(biāo)簽垂直頂對(duì)齊相比,由于標(biāo)簽文字左側(cè)參差不齊,對(duì)問題的認(rèn)知和掃描時(shí)間變的更長(zhǎng)。

眼動(dòng)軌跡表明,用戶花了更多時(shí)間在看問題,輸入框?qū)λ麄儊碚f很簡(jiǎn)單?!禬eb Form Design》一書中對(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)頁高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長(zhǎng)的,但是,這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀,仔細(xì)考慮的輸入信息(如一些重要的輸入)。

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

新聞標(biāo)題:如何規(guī)避網(wǎng)頁表單設(shè)計(jì)錯(cuò)誤
分享鏈接:http://jinyejixie.com/news/162942.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、關(guān)鍵詞優(yōu)化、做網(wǎng)站、電子商務(wù)、網(wǎng)站策劃、響應(yīng)式網(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í)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作
盐源县| 杂多县| 宿松县| 青田县| 庆云县| 巴南区| 滦平县| 博野县| 姜堰市| 太和县| 盱眙县| 棋牌| 巩义市| 迭部县| 南昌市| 牡丹江市| 余姚市| 泾川县| 景德镇市| 山阴县| 古浪县| 抚远县| 明溪县| 招远市| 横峰县| 鱼台县| 萨迦县| 扶风县| 右玉县| 辽源市| 侯马市| 永宁县| 肇源县| 长治县| 读书| 合川市| 浪卡子县| 合作市| 永丰县| 托克逊县| 汶川县|