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ě)項(xiàng)位置離開(kāi)太遠(yuǎn),可能會(huì)讓用戶搞不清楚到底哪個(gè)標(biāo)簽對(duì)應(yīng)哪個(gè)文本框,因此此類(lèi)標(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è)谔顚?xiě)完成時(shí)才意識(shí)到哪些是必填哪些非必填。
標(biāo)簽頂對(duì)齊,此類(lèi)方式,經(jīng)常出現(xiàn)在寬度有限制的時(shí)候,也是目前經(jīng)?吹降谋憩F(xiàn)方式。按照之前的理論來(lái)說(shuō)此類(lèi)方式為了視線流更好的展示,個(gè)人認(rèn)為標(biāo)簽前面帶*會(huì)比較好,這樣使得*、標(biāo)簽、文本框位置最近,也使得*能成直線展示。
當(dāng)然還有一類(lèi)特例,就是表單一行有多個(gè)填寫(xiě)項(xiàng),這種方式*如果位置不當(dāng),很容易讓人誤解*的位置,如下圖:
此圖中,姓名前的*很容易讓人誤解為是下拉框出的*。因此這時(shí)候*位置如果在標(biāo)簽和文本框當(dāng)中可以很好的規(guī)避此類(lèi)誤解。
雖然目前,我們認(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ì)如下圖:
總結(jié):必選項(xiàng)是一個(gè)很小的展示方式,但其中還是存在很多很多的特殊問(wèn)題,交互就是讓我們思考頁(yè)面中每個(gè)細(xì)小的環(huán)節(jié),這樣才能使用戶在整體頁(yè)面體驗(yàn)中獲得最優(yōu)最快捷的操作方式。當(dāng)然具體情況還有很多很多,需要我們思考和考慮的地方也有很多,如果大家有很多的想法可以聯(lián)系我們,讓我們更好的充實(shí)我們每個(gè)blog文章。
原文:http://ued.ctrip.com/blog/?p=2493
本文鏈接:http://m.95time.cn/design/doc/2011/8634.asp
出處:攜程UED菁華
責(zé)任編輯:bluehearts
上一頁(yè) 表單交互設(shè)計(jì)之必選項(xiàng)思考 [4] 下一頁(yè)
|