您現在的位置是:電腦技術吧?>? 組裝維修 ??>??web表單,表單大師??>??正文詳情

web表單,表單大師

覃凝心2019-11-18 01:50:37 人圍觀
簡介css表單這篇文章是作者交上來的一本筆記。我和客戶關系管理系統打交道很久了。我每天都看到表格。如果形式有感覺,我想它不想再看到我了。此外,老板推薦了一本書“網頁形式設

這篇文章算是筆者交的一份讀書筆記,與 CRM 系統打交道了這么久,表單天天見。

如果表單有感情的話,我猜它應該都不想再看見我了。

也是有緣,老板推薦了一本表單設計的書Web Form Design Filling the blanksby Luke Wroblewski,得此書如獲至寶。

該書對表單描述詳盡,案例充分,解決了許多筆者多年未解決的問題。

接下來進入正題,我們來聊一聊如何打造優質 Web 表單。

黑喂狗!  1. 標簽推薦使用右對齊方式

  (圖示1:淘寶網注冊頁面)  馬泰奧彭佐在2006年7月的眼動研究發現,標簽如果采用頂對齊方式,用戶的視線從標簽移動到輸入框只需要50毫秒,右對齊方式需要240毫秒,左對齊方式需要500毫秒。

如果從高效上講,應該是優先考慮標簽頂部對齊。

  我們再看淘寶注冊頁的表單采用了右對齊方式,是考慮到頂部對齊會占用過多的垂直空間,一旦表單項過多,對表單頁的操作也會造成不便,所以采用了右對齊方式。

  所以筆者在此建議,如果表單項不多,有限考慮標簽頂部對齊;而同時要兼顧高效和頁面的垂直空間,則選擇右對齊方式吧。

那是不是左對齊標簽無用呢?其實并不是,研究也有表明,在涉及到專業性過強,用戶不熟悉的表單,需要更長時間理解的標簽項時,則可以考慮左對齊方式。

  2. 必填和選填

  (圖示2:必填VS選填)  本書里提出一個觀點,如果必填字段比較多,把選填項標記出來則足夠;如果選填字段比較多,則標記必填字段。

  這的確能最高效率區分出來必填字段和選填字段,然而現在大部分互聯網用戶對于「*」就代表必填這都已領會,所以筆者還是推薦在表單中盡可能用「*」去區分必填和選填,畢竟這屬于最通用的方案。

不過登錄表單可以不遵循這個規則,大家都知道登錄表單中的標簽項都為必填,同時也可以根據標簽項是否輸入的狀態來激活「登錄」按鈕。

  3. 即時反饋  早期的表單里面對標簽項的說明文字都直接放置在標簽旁邊,但很多用戶不會去看這些文字,或者直接忽略掉。

其實可以結合用戶操作表單行為來動態顯示幫助信息,例如用戶聚焦在哪一個標簽項,則顯示哪一項對應的解釋文案。

騰訊微博注冊頁有一個細節做的比較好:

  (圖示3:騰訊微博注冊頁面)  當用戶輸入郵箱已經被注冊過,則會即時給出相應的提示,節省用戶輸入額外注冊信息的成本,而不是讓用戶填寫完再點擊「提交」按鈕交給服務器去做一次判斷。

  當然除了這條,還有密碼強度和密碼要求的即時校驗,旨在節省用戶輸入時的思考時間,讓用戶更高效率地填寫表單。

  4. 錯誤消息  表單中的錯誤提示信息,或者一些不合規的提示信息展示也是表單設計中影響比較大的元素。

  (圖示4:Error Message)  上圖中的表單項就比較多,可能在小尺寸屏幕中需要滾動頁面才能看到完整表單信息,而因為采用了點擊「提交」按鈕之后交給服務器校驗數據,所以在多個表單項出現錯誤的情況下,則需要統一在表單頭部提示出來錯誤信息,并且最好要有錨點,點擊之后能夠直接到錯誤的位置,節省用戶尋找的時間。

  然而如之前所說,如果能夠在前臺即時校驗的信息,就盡量交給前臺校驗,除了可以節省用戶的表單操作時間,可以保證體驗的一致。

  5. 智能默認

  (圖示5:淘寶/天貓購物車頁面,圖中敏感數據已經抹去)  表單設計中可以通過智能默認的方式幫助用戶填寫一些需要重復填寫的表單,這樣可以節省大量的時間。

例如圖中的淘寶/天貓購物車頁面,用戶在每次購買之后都需要經過收貨地址填寫環節,如果說將填寫過的地址幫助用戶保存起來并設置成默認,在后來的每次購買過程,可以直接進入到下一個環節,省去了這一步的時間。

  6. 設置 Tab 鍵跳轉  筆者認為 Tab 鍵跳轉也是一個能夠提高用戶操作表單效率的一個方式,也是設計師在表單設計中必須要考慮到的一個細節,Tab 鍵的跳轉和表單項視覺先后順序保持一致。

  這個細節很小,但是影響面卻很大。

很多網站并沒有在這個細節上做的很好。

舉個反面例子:

  (圖示6:支付寶收銀臺界面,圖中敏感數據已經抹去)  上圖是支付寶收銀臺的頁面,分別來自于兩個不同的電商網站。

按照表單設計邏輯,在用戶輸入賬戶名按 Tab 鍵后,光標會自動聚焦到支付密碼輸入框中,然而左右兩個界面卻存在完全不一樣的邏輯。

左邊頁面在輸入賬戶名之后按 Tab 鍵會直接跳到「忘記賬戶名?」這個鏈接上,而右邊則一切正常。

  7. 同意提交  在很多注冊表單的最后一項表單項是讓用戶勾選同意***協議,很多情況下完全是廢話。

所以這一步與提交按鈕可以合并在一起,省去一步操作。

  (圖示7:網易郵箱的注冊頁面)  8. 正在進行的動作  表單填寫完成,最后一步就是提交了,這一步至關重要。

不僅僅是說在提交之后要將后面的結果反饋給用戶(上面說到的即時反饋),如果網絡條件比較慢,或者信息量比較大,導致等待時間過長(很多情況下會這樣),那么我們應該告訴用戶這一切,讓用戶并不會覺得等待時間很長。

同時也減少了用戶重復點擊「提交」按鈕的情況。

  (圖示8:提交按鈕小動畫)  9. 對話形式表單

  (圖示9:對話式表單)  這算是一些附加信息。

一個個表單項其實可以轉化成一條條問題,讓用戶覺得像是在和互聯網的另一邊聊天,從而以最輕松愉悅的心情來進行表單填寫。

  總結  互聯網在進化,表單也是如此,進化的同時,帶給用戶的是更高效的輸入方式,更加輕松愉悅的使用體驗。

而設計師在設計過程中,應當將效率放在第一位,然后才是在效率至上的基礎上去完善交互視覺的體驗細節。

  歡迎關注阿里37.2度體驗的微信公眾號:

版權聲明:本文由 覃凝心 整理編輯。

原標題:什么是表單,表單

轉載注明出處:http://www.dn9ww09s.icu/assemble/13352.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • morphvoxpro怎么用,morphvox pro好用嗎

    morphvoxpro怎么用,morphvox pro好用嗎 相關圖片morphvox怎么用到游戲里想要通過改變聲音來欺騙朋友的用戶不應該錯過MorphVOX pro。Morphox Pro是一款非常有趣的語音轉換軟件,它可以幫助您使用QQ、YY、Skype或morphvox筆記本怎么用...

  • cs3怎么用,cs3

    cs3怎么用,cs3 相關圖片gcs3猴子效應演示:討論:http://www.missyuan.com/viewthread.php?TID=417576真實效果的關鍵是陰影。這里也使用了同樣的2cs3是什么...

  • 任務欄到右邊了怎么辦,任務欄在右邊怎么弄到下面

    任務欄到右邊了怎么辦,任務欄在右邊怎么弄到下面 相關圖片電腦任務欄跑到左邊了通常,電腦上的任務欄就在窗口的正下方,但有些用戶不小心操作,導致任務欄在右邊。如何解決這種情況?如果操作不當,導致任務欄位于左側,可以先將任務...

  • word跨頁表格怎么銜接,word表格斷開怎樣連上

    word跨頁表格怎么銜接,word表格斷開怎樣連上 相關圖片word表格斷頁了怎么辦我相信大家在使用word的過程中都遇到過跨頁斷字的情況。現在,如何連接單詞表跨頁斷開連接?現在,超人軟件將介紹如何連接單詞表跨頁斷開連接word怎么把打斷...

  • Down,唧唧Down

    Down,唧唧Down 相關圖片Sit down病毒名稱(中文):病毒別名:威脅級別:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁木馬會利用名為rundll64.exe的木馬文件Put down...

  • 手機12306怎么兌換車票,12306積分兌換比例

    手機12306怎么兌換車票,12306積分兌換比例 相關圖片12306怎么總積分兌換車票12306應用是鐵道部推出的官方軟件。因此,用戶可以通過購買門票并將其兌換為門票來獲得積分。如何兌換12306點的車票?現在,超人軟件將帶給你123分12306上積分...

  • 無效,無效鏈接怎么解決

    無效,無效鏈接怎么解決 相關圖片句柄無效怎么處理很多朋友在使用deamweaver8時會遇到這樣的情況:他們將CSS文件鏈接到當前編輯的文檔,并將定義的CSS樣式應用到頁面元素,但在DW8中看不到任何效果。如mmi碼無效怎么解...

  • word段落間距太大,word2003行間距怎么調

    word段落間距太大,word2003行間距怎么調 相關圖片微型word行間距怎么調在word中,只有適當的行距才能使頁面看起來更舒適。所以你知道如何調整單詞的行距嗎?如果你不能調整單詞的行距,你能做什么?現在,超人軟件將為您介紹單詞...

  • 水波gif,水波的動態圖

    水波gif,水波的動態圖 相關圖片點動水波動態壁紙煙花動態水波標識教程動態水波效果js...

  • 應用程序錯誤是怎么回事,手機應用程序錯誤是怎么回事

    應用程序錯誤是怎么回事,手機應用程序錯誤是怎么回事 相關圖片應用程序錯誤是什么意思360的產品有很多用戶。其中一些在使用過程中出現360個應用錯誤,程序無法正常工作。怎么了?如何解決360個應用程序錯誤?360個應用程序錯誤的最高頻率是多...

熱評文章

  • 360怎么開無痕瀏覽,360無痕瀏覽怎么取消

    360怎么開無痕瀏覽,360無痕瀏覽怎么取消 相關圖片360極速無痕瀏覽不想讓人們知道他們瀏覽了什么網頁,清除緩存和cookies太麻煩了。那么360無痕瀏覽就可以很好地滿足你的需求無痕瀏覽,又稱私密瀏覽模式和隱形窗口,指的是不留任...

  • html繪制到canvas,html5canvas繪制效率

    html繪制到canvas,html5canvas繪制效率 相關圖片html2canvas行星變量名為mercury87.70×a69697×5c3e40 Venus 224.701.70×c4bbac×1f1315 earth 365.2422×7canvas html5...

  • 手機怎么看eml格式,eml是什么格式文件怎么打開

    手機怎么看eml格式,eml是什么格式文件怎么打開 相關圖片手機打不開eml文件最近,很多小伙伴都說他們在工作過程中收到了重要的EML文件,但是他們不知道EML是什么格式的?如何打開EML文件?然后,超人軟件會給你帶來EML文件的相關教程,蘋...

  • 副本不是正版有影響嗎,win7正版永久激活密鑰

    副本不是正版有影響嗎,win7正版永久激活密鑰 相關圖片win7盜版黑屏如何修復近日,不少小伙伴反映,安裝win7系統后,系統提示此windows拷貝不是正版。如果此windows副本不是正版,如何解決此問題?這個不是正版windows的拷內部版本7601有影響...

  • 水晶質感圖標,水晶之痕圖標

    水晶質感圖標,水晶之痕圖標 相關圖片寶石圖標效果圖:用路徑畫出這樣的圖形,然后用漸變復制一個,稍微偏移,如漸變用濾鏡和高亮:也用刀復制一個,用刀切一半,做筆:復制筆尖和筆桿之間的骨線,用刀切一半,然...

  • 安卓sync什么意思,radkfz是什么病毒

    安卓sync什么意思,radkfz是什么病毒 相關圖片locationemAndroid同步服務是Android系統的同步服務,可以同步通訊錄、電子郵件、日歷等設置。一些用戶對Android同步服務停止等錯誤感到困擾proxyhandler...

  • 如何設置自動換行,exel怎么設置自動換行

    如何設置自動換行,exel怎么設置自動換行 相關圖片自動換行在哪我沒想到Dreamweaver的菜單排放這么糟糕。經過兩天的搜索,我找到了這個選項。。。選中代碼視圖選項,自動換行上方的操作需要處于代碼源文件狀態怎樣自動換行...

  • 半透明頭像生成器,微信半透明頭像生成器

    半透明頭像生成器,微信半透明頭像生成器 相關圖片半透明頭像上傳軟件當你通過微信或QQ與朋友聊天時,你會發現一些朋友的頭像是半透明的,獨一無二的。那么,如何制作他們半透明的化身呢?如何制作半透明的化身?首先,半透明的...

  • 設計師容易嗎,設計師

    設計師容易嗎,設計師 相關圖片千圖設計師我見過這么多這樣的設計師,他們從來沒有想過“如果這樣交設計稿,工程師就做不出來”的問題,他們不愿意理解什么是“限制”和“規則”。如果你想從一個平面設計師...

  • 比鄰,比鄰現在叫什么

    比鄰,比鄰現在叫什么 相關圖片比鄰的意思比鄰是一款非常受到歡迎的即時通訊軟件,最近有不少朋友表示想取消關注舊好友,重新關注新朋友。那么比鄰怎么取消關注?比鄰怎么加好友?下面,就跟著超人軟件小編一起...

關注微信

变脸官网查询