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)系作者
  • 序言:七十年代末庐扫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子仗哨,更是在濱河造成了極大的恐慌形庭,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厌漂,死亡現(xiàn)場(chǎng)離奇詭異萨醒,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)苇倡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)富纸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人旨椒,你說(shuō)我怎么就攤上這事晓褪。” “怎么了综慎?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵涣仿,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我寥粹,道長(zhǎng)变过,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任涝涤,我火速辦了婚禮媚狰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘阔拳。我一直安慰自己崭孤,他們只是感情好类嗤,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著辨宠,像睡著了一般遗锣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嗤形,一...
    開(kāi)封第一講書(shū)人閱讀 51,624評(píng)論 1 305
  • 那天精偿,我揣著相機(jī)與錄音,去河邊找鬼赋兵。 笑死笔咽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的霹期。 我是一名探鬼主播叶组,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼历造!你這毒婦竟也來(lái)了甩十?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤吭产,失蹤者是張志新(化名)和其女友劉穎侣监,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體垮刹,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡达吞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年斤斧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了难衰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片交胚。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡潘悼,死狀恐怖独郎,靈堂內(nèi)的尸體忽然破棺而出壁查,到底是詐尸還是另有隱情猛遍,我是刑警寧澤育灸,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布遮咖,位于F島的核電站滩字,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏御吞。R本人自食惡果不足惜麦箍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望陶珠。 院中可真熱鬧挟裂,春花似錦、人聲如沸揍诽。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至渠啤,卻和暖如春狐肢,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沥曹。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工份名, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人架专。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓同窘,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親部脚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

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

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