WEB表單設(shè)計(jì)-1表單的組織

表單設(shè)計(jì)的首要目標(biāo):讓人們迅速并且輕松地完成填寫(xiě)。

一、內(nèi)容的組織

為了保證對(duì)話(huà)流程,可以將問(wèn)題分成有意義的組。根據(jù)問(wèn)題數(shù)量和情境,可以將這些組分到多個(gè)網(wǎng)頁(yè)或者單個(gè)網(wǎng)頁(yè)的不同部分。

例如 yahoo!注冊(cè)表單將個(gè)人信息、正在創(chuàng)建的賬號(hào)、訪(fǎng)問(wèn)賬號(hào)的方式和若干信任及安全條目問(wèn)題分成四個(gè)不同部分。這些部分用標(biāo)題區(qū)別于網(wǎng)頁(yè)中的其余元素。紫色粗體標(biāo)題比其他的表單標(biāo)簽承載了更多視覺(jué)分量,你能瀏覽掃描表單,明白需要提供哪些信息

圖1.1? yahoo! 注冊(cè)表單采用對(duì)話(huà)語(yǔ)氣來(lái)吸引新成員

二、歸納區(qū)別

內(nèi)容組之間的差異不需要大量視覺(jué)差異。事實(shí)上,內(nèi)容組之間對(duì)比太多往往會(huì)造成過(guò)多視覺(jué)污染,會(huì)阻礙人們?yōu)g覽表單。以圖1.1為例,每個(gè)內(nèi)容組都從視覺(jué)上區(qū)別于表單其余部分(紫色粗體)。

請(qǐng)考慮下圖1.2和圖1.3表單之間的區(qū)別。一個(gè)表單是黃色邊界,黃色背景色,紅色欄目標(biāo)題,表格框合并歸納相關(guān)內(nèi)容。而另一個(gè)表單只用一種弱背景色變化來(lái)區(qū)分表單中有意義的部分。使用最少的視覺(jué)信息有助于保持焦點(diǎn)在表單內(nèi)容而不是表現(xiàn)形式。

圖1.2? 表單中多個(gè)不同視覺(jué)元素阻礙人們看見(jiàn)表單所提問(wèn)題
圖1.3? 背景柔和變化或者細(xì)線(xiàn)條常常足以有效組織表單中的相關(guān)內(nèi)容

但即使內(nèi)容組之間的細(xì)微區(qū)別也會(huì)被濫用。有些設(shè)計(jì)師考慮到他們所認(rèn)為的標(biāo)簽左對(duì)齊的缺點(diǎn),會(huì)選擇使用交替背景顏色來(lái)組織左對(duì)齊標(biāo)簽與右對(duì)齊輸入框,如圖1.4。但標(biāo)簽定位眼動(dòng)跟蹤研究表明,在標(biāo)簽左對(duì)齊布局中,人們一般能順利將輸入框和標(biāo)簽聯(lián)系在一起,只是花費(fèi)時(shí)間會(huì)更長(zhǎng)。因此,這種做法并沒(méi)有真正解決問(wèn)題,事實(shí)上還會(huì)引發(fā)另一個(gè)問(wèn)題。

圖1.4? 采用交替背景色來(lái)組織左對(duì)齊標(biāo)簽和相應(yīng)輸入框,這種做法具有誘惑力,但這些視覺(jué)元素給表單帶來(lái)大量視覺(jué)噪音

兩種不同背景顏色用來(lái)區(qū)分標(biāo)簽和輸入框,水平線(xiàn)用來(lái)分隔每一對(duì)標(biāo)簽和輸入框。這種做法增加了15種額外的頁(yè)面布局元素:中心線(xiàn)、背景區(qū)和水平線(xiàn)。這些元素分散了注意力,焦點(diǎn)更難集中到布局的最重要元素:標(biāo)簽和輸入框。信息由產(chǎn)生作用的差異構(gòu)成,任何無(wú)助于布局的視覺(jué)元素都會(huì)損害布局。掃描左欄標(biāo)簽時(shí)說(shuō)明了這一點(diǎn)。眼睛需要一再停頓,因?yàn)橐紤]水平線(xiàn)和背景顏色組合構(gòu)成的每對(duì)水平線(xiàn)和文本框。

圖1.5? 過(guò)多視覺(jué)元素分散了對(duì)表單主要內(nèi)容的注意力,還會(huì)中斷表單掃描線(xiàn)

當(dāng)然,這并不是說(shuō)表單布局絕對(duì)不能使用背景色和線(xiàn)條。考慮區(qū)分內(nèi)容組時(shí),應(yīng)當(dāng)考慮采用最少的視覺(jué)信息圖1.6。? 過(guò)多的視覺(jué)信息可能會(huì)導(dǎo)致注意力分散,弄巧成拙。

圖1.6? eBay express付款表單采用細(xì)線(xiàn)條分隔有意義的內(nèi)容組。只需要通過(guò)最少的視覺(jué)元素來(lái)形成清晰的區(qū)別

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,362評(píng)論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,013評(píng)論 3 423
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 177,346評(píng)論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 63,421評(píng)論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,146評(píng)論 6 410
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,534評(píng)論 1 325
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,585評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,767評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,318評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,074評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,258評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,828評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,486評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,916評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,156評(píng)論 1 290
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,993評(píng)論 3 395
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,234評(píng)論 2 375

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,777評(píng)論 1 92
  • 一. 表單設(shè)計(jì)的影響與原則 1.1 表單的產(chǎn)生 由內(nèi)而外,網(wǎng)站根據(jù)自身信息存儲(chǔ)格式要求,從數(shù)據(jù)庫(kù)映射成表單。 由外...
    曉夢(mèng)蟬君閱讀 12,127評(píng)論 1 30
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類(lèi)型定義(D...
    米塔塔閱讀 3,294評(píng)論 1 41
  • 一、表單結(jié)構(gòu) 1、表單的設(shè)計(jì) -設(shè)計(jì)原則 盡量減少痛苦 說(shuō)明填寫(xiě)完成途徑 考慮情境 確保一致溝通 2、表單...
    ba帝兒閱讀 639評(píng)論 0 0
  • 昨天是母親的生日,也是我平生第一次給母親過(guò)生辰,突然好想描繪母親對(duì)我們子女至深無(wú)私的愛(ài),即使語(yǔ)不及情深,也想...
    漂泊007206閱讀 463評(píng)論 0 0