中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

表單是一個(gè)非常常見的模塊，設(shè)計(jì)不易出彩卻很容易出錯(cuò)。

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

今天就聊一聊表單的設(shè)計(jì)。

01表單的基本元素

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

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

在表單設(shè)計(jì)中，每個(gè)元素都有其存在的意義。有時(shí)候?yàn)榱松钊肜斫馄渲心骋辉卦陧?yè)面中的意義，我會(huì)特意上除掉這個(gè)元素研究頁(yè)面發(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í)上做過很多表單頁(yè)面之后慢慢知道了，在很多社交網(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)文字的空間。

02 表單中標(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ì)頁(yè)面寬度的要求。如果你的頁(yè)面沒有富裕的空間用于標(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ì)問題標(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ì)頁(yè)面高度的要求。但與標(biāo)簽垂直頂對(duì)齊相比，由于標(biāo)簽文字左側(cè)參差不齊，對(duì)問題的認(rèn)知和掃描時(shí)間變的更長(zhǎng)。

眼動(dòng)軌跡表明，用戶花了更多時(shí)間在看問題，輸入框?qū)λ麄儊碚f很簡(jiǎn)單。

《Web 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)頁(yè)高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長(zhǎng)的，但是，這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀，仔細(xì)考慮的輸入信息（如一些重要的輸入）。

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

作者：jasmine3162

來源：http://www.ui.cn/detail/167539.html

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645