2023年Web表單設(shè)計-你不知道的冷知識_第1頁
2023年Web表單設(shè)計-你不知道的冷知識_第2頁
2023年Web表單設(shè)計-你不知道的冷知識_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

Web表單設(shè)計——你不知道的冷知識當我們設(shè)計Web表單時,往往用最直覺的設(shè)計閱歷本能驅(qū)動我們?nèi)ソ鉀Q一些看似在界面設(shè)計中最簡潔的問題,但每每到微小之處,又會有很多疑問從細節(jié)中冒出來給我們的設(shè)計造成困擾。

例如:在表單界面Label(標簽)和Input(輸入框)上下還是左右排列合理、Label要不要加冒號、輸入框究竟多寬合適等等

以上這類問題看起來并不影響用戶完成任務(wù),很久以來也少有人關(guān)懷這些微小之處會不會對用戶有什么影響。

以至于,我表達想寫一篇探究這些細節(jié)的文章時,同事會偷笑說:你都開頭討論標簽?zāi)┪惨灰用疤柫藛崽淞恕媸莻€冷學問!

的確如此,這些偏門、細碎的內(nèi)容,鮮少有人會去留意和思索。因此我在寫下這些共享內(nèi)容時期望可以達到目標是:“冷學問雖然冷,但有用”。用我了解的這些表單設(shè)計冷學問:啟發(fā)你的冷思維、引出你的熱思索。

話不閑聊,我們開頭爭論第一個問題。

聽起來似乎都有些道理,那究竟誰更對呢!

首先,我們追溯一下Web進展史,早期可訪問性核對清單中通常堅持要標簽帶冒號,由于屏幕閱讀器一度必需依靠各種技巧才能理解標記不明的表單。

而隨著技術(shù)進展,Web表單使用“l(fā)abel”標簽(tag)可以做正確的標記,那么屏幕閱讀器就能通過標記(markup)把標簽(label)和相應(yīng)的字段對應(yīng)起來則無需再借助冒號。

不過在客戶端又有些意外!曾經(jīng)WindowsVista指南中明確要求使用冒號,MacAqua也有此要求但規(guī)章會稍敏捷一些。

這種狀況是由于某些狀況下屏幕閱讀器在桌面環(huán)境與可閱讀源代碼的網(wǎng)頁標記相比會遇到一些困難,桌面環(huán)境不會直接顯示代碼。也是這個歷史緣由,造成Vista和Aqua各自都有大量其標簽包含冒號的歷史表單。由于實在沒有必要把它們?nèi)扛牡?,直到今日客戶端的表單照舊連續(xù)這一規(guī)章。

通過Web進展史我們明白表單標簽帶冒號的產(chǎn)生是為了解決早期屏幕閱讀器的識別,如今的屏幕閱讀器技術(shù)已轉(zhuǎn)變?yōu)樽R別標簽的底層代碼,無需借助這種形式了。所以從這點來看要求標簽帶冒號已經(jīng)站不住腳了。

那從情感角度分析標簽帶冒號的是否對用戶體驗有影響呢?

回到最開頭,我和同事們的爭辯……

先簡潔說下答案,無任何影響!

在《Web表單設(shè)計·創(chuàng)建高可用性的網(wǎng)頁表單》中,(卡羅琳·賈雷特)曾經(jīng)做過大量的表單測試,最終證明從未有一名用戶談?wù)撁疤柺欠裣В词故怯行┰谄渌h(huán)境中很介意標點符號的人好像在線上表單中也未曾留意到。

從以上兩個角度不難發(fā)覺,無論是從技術(shù)進展還是情感體驗,都證明可不必要求表單帶冒號;由于可用性訪問清單不再有這樣的要求,用戶討論也證明幾乎沒有人會留意表單冒號是否消失。

這樣的結(jié)論,看似表單帶冒號是失敗了……但這并不阻礙它作為一種習慣或傳統(tǒng)連續(xù)至今,無論在客戶端還是Web設(shè)計系統(tǒng)中仍舊常見。例如:蘋果電腦的Mac系統(tǒng),國內(nèi)阿里的AntDesignWeb設(shè)計系統(tǒng)。

因此,得到以下幾點建議:

假如你盼望自己的網(wǎng)頁表單與流行的桌面環(huán)境保持全都,請使用冒號。假如你已有大量使用冒號的表單,請保持連續(xù)使用下去。假如你在建立一個新的系統(tǒng),你也可以干脆拋硬幣打算,不過要嚴格遵循一種方法。

1)優(yōu)勢

最利于削減表單填寫時間(標簽和輸入框位置最為靠近);用戶視線固定,動線始終向下(清楚的完成路徑);節(jié)約大量橫向空間(可用于以多種方式組合的相關(guān)輸入框)。

2)劣勢

占用額外的垂直空間(假如可供應(yīng)使用的垂直屏幕空間較小,應(yīng)當謹慎使用頂對齊標簽);建議使用輸入框50%至75%的高度作為相鄰輸入框間距。

3)適用場景

盼望用戶快速填寫表單,完成任務(wù);同時,當輸入項存在主次之分時,對標簽擴展性要求高。

1)優(yōu)勢

標簽與輸入框相鄰(便利快速填寫)。

2)劣勢

右對齊布局造成左側(cè)不齊,影響了快速巡游表單的效率問題;若標簽文字寬度變寬,右對齊還存在敏捷度問題。

3)適用場景

既要削減垂直空間,又要加快填寫速度的場景。

1)優(yōu)勢

簡單巡游標簽;占用垂直空間較少。

2)劣勢

標簽和輸入框的相鄰間距增大;適合于用戶不熟識表單要收集的數(shù)據(jù)或問題無法分成易處理的內(nèi)容組,左對齊標簽巡游表單問題會更簡單。用戶只要上上下下閱讀標簽左欄,不會被輸入框打斷。

3)適用場景

表單中存在較多的簡單或敏感信息,盼望用戶放慢速度、認真思索(在一些注冊類表單中較多使用)。

單從效率角度看,頂對齊標簽右對齊左對齊,但是依據(jù)應(yīng)用場景,效率快并不是我們選擇標簽對齊方式的唯一的指標。

因此,得到以下幾點建議。

假如你盼望用戶放慢速度,認真思索表單中每個表單項,左對齊標簽是個好選擇,特殊是含有大量可選輸入框或高級設(shè)置的生疏數(shù)據(jù)時。

而頂對齊標簽在一些國際化產(chǎn)品的表單設(shè)計時,會有更好的延展性。

至于,右對齊標簽雖然與表單域聯(lián)系緊密,便于用戶填寫,但是要考慮好標簽的長短不齊如何解決。能否精簡標簽內(nèi)容,以及確定好表單與界面的邊距。

先簡潔回答:是確定的,用戶有時需要通過必填標記來評估工作量,了解輸入信息量的最低限度。我會在下面詳細解釋緣由。

你可能會問:默認值不是用戶想要的,誤導(dǎo)用戶怎么辦?

在設(shè)計有默認值的表單域時,你要思索默認值是否是大多數(shù)用戶可以接受的答案,假如不確信可以先去做一下用戶調(diào)研,了解用戶的心聲。

就算默認值真的不是用戶想要的,至少你也為他供應(yīng)了一個示例來告知用戶答案應(yīng)當是什么樣子的。這一點也可以節(jié)約用戶幾秒的思索時間——或避開一條錯誤信息。

但并不代表全部的表單域都要給出默認值,我們只是盡可能的讓用戶節(jié)約時間。

如何使用:

在第一次向用戶顯示表單時,用一個合理的默認值預(yù)先填寫文本框、組合框或者其他控件。也可以使用用戶之前供應(yīng)給應(yīng)用的信息來動態(tài)地給出默認值(例:通過身份證自動識別誕生日期;利用郵編,推導(dǎo)出對應(yīng)省/市)。

假如只是由于你覺得不應(yīng)當留下空白的輸入域,那么不要使用默認模式。只有當你有理由確信絕大部分用戶,在絕大多數(shù)狀況下,不會修改這個取值時才供應(yīng)默認值——否則,這將會給用戶帶來額外的工作!

表現(xiàn)形式要為用戶填寫供應(yīng)有用線索,采納不同長度的文本框供應(yīng)了示意;這種示意是一種有用線索,當輸入框長度長短不定時,用戶會很自然地思索為什么這樣;填寫輸入框時會自然考慮這些線索。

請留意!保證示意效果的同時,不要設(shè)定太多的寬度,反而會讓表單顯得凌亂;太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。

什么是模度值和數(shù)量呢!

落在詳細設(shè)計上要先梳理產(chǎn)品中常見的表單類型,然后設(shè)置一個默認寬度。以此為基礎(chǔ)來有規(guī)律的增加長度,并考慮清晰它們的適用場景;從而定義出不同的模度,最終制定出干凈有序的模度規(guī)范。這樣就可以讓一線的設(shè)計師們跳過部分繁瑣磨人的細節(jié)思索,快速搭建出合適的表單寬度并合理有效。

六、結(jié)語

本篇文章更多是從表單設(shè)計中的一些冷門內(nèi)容,即易忽視的一些設(shè)計點在綻開爭論,利用問題加案例的形式對表單設(shè)計進行剝離拆解,沒有系統(tǒng)地、成本成套的來分析表單的構(gòu)成和交互細節(jié)等等。由于這類內(nèi)容講的

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論