如何實(shí)現(xiàn)網(wǎng)站W(wǎng)eb端表單的交互式設(shè)計(jì)

這篇文章主要介紹“如何實(shí)現(xiàn)網(wǎng)站W(wǎng)eb端表單的交互式設(shè)計(jì)”，在日常操作中，相信很多人在如何實(shí)現(xiàn)網(wǎng)站W(wǎng)eb端表單的交互式設(shè)計(jì)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何實(shí)現(xiàn)網(wǎng)站W(wǎng)eb端表單的交互式設(shè)計(jì)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

每當(dāng)頁(yè)面中出現(xiàn)洋洋灑灑的表單，用戶就會(huì)開(kāi)始感到頭疼，有些用戶就會(huì)直接選擇放棄，而我想討論的是，如何面對(duì)表單時(shí)讓用戶直接注意他們需要填寫的必填項(xiàng)，減少不需要的信息的干擾。
必選項(xiàng)是以什么形式出現(xiàn)在現(xiàn)如今的表單中的呢？

1、 表單信息的表現(xiàn)類別
下面是一個(gè)關(guān)于web表單設(shè)計(jì)的調(diào)查報(bào)告，這個(gè)結(jié)果來(lái)源于100個(gè)令人矚目的網(wǎng)站。
41%的網(wǎng)站使用標(biāo)簽右對(duì)齊 （YouTube, Facebook, Metacafe）
30%的注冊(cè)表單使用頂端對(duì)齊（Behance.net, Wufoo, Tickspot, Mixx, DZone）
29%使用的是標(biāo)簽左對(duì)齊（(Digg, Ning, Wykop.pl, 43things, StudiVZ）

2、 表單的應(yīng)用范圍
1） 注冊(cè)
2） 登陸
3） 填寫信息（支付，訂單填寫，個(gè)人信息填寫等）
4） 發(fā)布

3、 必選項(xiàng)顯示形式
1）以*展現(xiàn)形式
a）*在信息標(biāo)簽的左側(cè)

b）*在信息標(biāo)簽和填寫信息的右側(cè)

c）*在信息標(biāo)簽和填寫信息的當(dāng)中位置

d）*在信息標(biāo)簽右側(cè)

2）非*必選標(biāo)志
a）非*icon表現(xiàn)形式

b）無(wú)必選項(xiàng)標(biāo)志（都是必選項(xiàng)）

c）標(biāo)注非必選項(xiàng)

d）暗提示

4、 必選項(xiàng)的深入思考
1）*和非*思考
a）*作為一個(gè)用戶習(xí)慣已經(jīng)存在了很多年，現(xiàn)在用戶只需要看到文本框前面的*就基本知曉其為必選項(xiàng)，有些網(wǎng)站已經(jīng)將“*為必填項(xiàng)”之類說(shuō)明文字也直接隱藏了。那么對(duì)于這個(gè)用戶基本不需要太多思考就知曉的圖標(biāo)，對(duì)于需要簡(jiǎn)化用戶思考的表單來(lái)說(shuō)確實(shí)要優(yōu)于一些其他的非“*”icon的出現(xiàn)了。
b）有人會(huì)疑問(wèn)一個(gè)表單，如果都是必填項(xiàng)，還有必要用*去標(biāo)志出每個(gè)必填項(xiàng)嗎？在沒(méi)有必填項(xiàng)標(biāo)志的時(shí)候，大部分人會(huì)有兩種不同的理解，一類人會(huì)認(rèn)為，這些均為必填項(xiàng)，而另一類人則會(huì)理解為此處均為非必填項(xiàng)，那么在這種情況下，如果標(biāo)記了必填項(xiàng)可以滿足不同人群的思考。
還有人，會(huì)疑問(wèn)在一個(gè)表單中大部分項(xiàng)為必填項(xiàng)只有少部分為非必填項(xiàng)時(shí)，我們是否可以直接在非必填項(xiàng)旁標(biāo)志出非必填的標(biāo)志呢？當(dāng)一個(gè)頁(yè)面大部分為必填項(xiàng)時(shí)，而只有少量非必填項(xiàng)時(shí)，非必填項(xiàng)如果做的太弱化會(huì)導(dǎo)致整頁(yè)無(wú)法區(qū)分必填還是非必填；而如果非必填項(xiàng)做的太過(guò)突出的話又反過(guò)來(lái)突出了頁(yè)面中需要弱化的信息項(xiàng)，用戶反而會(huì)去焦點(diǎn)關(guān)注在他們可填可不填的項(xiàng)中，有點(diǎn)適得其反。
因此，我還是認(rèn)為當(dāng)頁(yè)面中的表單，無(wú)論是全部都是必填項(xiàng)還是大部分必填項(xiàng)，我們還是以“*”標(biāo)出，這樣也能使各類用戶都不產(chǎn)生理解性的錯(cuò)誤。
當(dāng)然了，不同情況下的運(yùn)用當(dāng)然也有所不同，例如：用戶在登陸時(shí)的認(rèn)知，通常用戶在登陸時(shí)輸入項(xiàng)如用戶名，密碼等信息，而且此些項(xiàng)也基本是必填項(xiàng)，在這種認(rèn)知的基礎(chǔ)上，即使不出現(xiàn)*也不會(huì)造成任何理解性問(wèn)題，那么作為精簡(jiǎn)原則來(lái)說(shuō)，通?？梢匀サ?。
c）文本框內(nèi)必填項(xiàng)暗提示，也是一個(gè)比較清晰標(biāo)志必填項(xiàng)的方式，并且還很節(jié)省空間。
但是現(xiàn)在很多網(wǎng)站都在文本框中對(duì)文本框填寫方式做其他暗提示，這個(gè)時(shí)候必填項(xiàng)暗提示就相對(duì)會(huì)被限制使用的范圍了。作為必填項(xiàng)暗提示標(biāo)志，還有兩個(gè)致命的缺陷就是，當(dāng)我填寫完成時(shí)，我并不了解哪些是必填項(xiàng)哪些為非必填項(xiàng)，還有就是對(duì)于radiobox、checkbox、下拉框的必填來(lái)說(shuō)也沒(méi)有很好的解決方案。因此，在使用必填項(xiàng)暗提示時(shí)，在表單形式為文本框，并且文本框內(nèi)無(wú)其他暗提示語(yǔ)句的時(shí)候也可以使用。
2） *思考
a）用戶對(duì)于表單的視覺(jué)走向

從這張熱點(diǎn)圖中可以看出，對(duì)于表單類別的視覺(jué)走向是以左邊標(biāo)簽為主向右延展。大部分用戶集中在標(biāo)簽位置，通常用戶填寫順序也是從上至下的，從左至右，較少用戶會(huì)選擇跳躍式的填寫模式。
b）*位置
從上述用戶視線流可以看出，*的位置應(yīng)該在標(biāo)簽附近，并且能夠整齊排列（這個(gè)可能還需研究）會(huì)更一目了然的展示出必填項(xiàng)。
這個(gè)時(shí)候作為：
標(biāo)簽左對(duì)齊的時(shí)候，*直接出現(xiàn)在標(biāo)簽前面，明顯比較優(yōu)，但是由于標(biāo)簽左對(duì)齊對(duì)于表單來(lái)說(shuō)，標(biāo)簽項(xiàng)和填寫項(xiàng)位置離開(kāi)太遠(yuǎn)，可能會(huì)讓用戶搞不清楚到底哪個(gè)標(biāo)簽對(duì)應(yīng)哪個(gè)文本框，因此此類標(biāo)簽方式不太贊成出現(xiàn)。

那么標(biāo)簽右對(duì)齊的時(shí)候，*出現(xiàn)在標(biāo)簽與文本框當(dāng)中，個(gè)人認(rèn)為相對(duì)前一種來(lái)說(shuō)要舒服很多了。不僅使得標(biāo)簽項(xiàng)和*標(biāo)志和文本框等都離得很近，而且*的位置還可以成一直線對(duì)齊。如果*出現(xiàn)在文本框或者其他項(xiàng)的后方，會(huì)使得用戶不得不跳躍視線，并且他們?cè)谔顚懲瓿蓵r(shí)才意識(shí)到哪些是必填哪些非必填。

標(biāo)簽頂對(duì)齊，此類方式，經(jīng)常出現(xiàn)在寬度有限制的時(shí)候，也是目前經(jīng)?？吹降谋憩F(xiàn)方式。按照之前的理論來(lái)說(shuō)此類方式為了視線流更好的展示，個(gè)人認(rèn)為標(biāo)簽前面帶*會(huì)比較好，這樣使得*、標(biāo)簽、文本框位置最近，也使得*能成直線展示。
當(dāng)然還有一類特例，就是表單一行有多個(gè)填寫項(xiàng)，這種方式*如果位置不當(dāng)，很容易讓人誤解*的位置，如下圖：

此圖中，姓名前的*很容易讓人誤解為是下拉框出的*。因此這時(shí)候*位置如果在標(biāo)簽和文本框當(dāng)中可以很好的規(guī)避此類誤解。
雖然目前，我們認(rèn)為標(biāo)簽右對(duì)齊，*出現(xiàn)在標(biāo)簽與文本框當(dāng)中方式較優(yōu)，但是也會(huì)出現(xiàn)特例，比如當(dāng)出現(xiàn)radiobox的時(shí)候如果*出現(xiàn)在標(biāo)簽和radio當(dāng)中，那么就會(huì)如下圖：
  

到此，關(guān)于“如何實(shí)現(xiàn)網(wǎng)站W(wǎng)eb端表單的交互式設(shè)計(jì)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！