您當前位置:網絡公司> 建站知識> 網站建設>
摳細節!設計高效好用表單的10個技巧_泰安網絡公司|企業網站建設推廣|山東SEO優化|百度關鍵詞優化排名_泰安祥奕互聯網絡公司

摳細節!設計高效好用表單的10個技巧

不論是網頁設計還是APP UI設計,表單都是界面中最常見、最重要的組件之一。它們的應用范疇非常廣,用戶注冊、訂閱服務、用戶反饋..

18553827618 立即咨詢

快速申請辦理

稱       呼 :
手機號碼 :
備       注:
分享:

摳細節!設計高效好用表單的10個技巧

發布時間:2017-10-26 熱度:

不論是網頁設計還是APP UI設計,表單都是界面中最常見、最重要的組件之一。它們的應用范疇非常廣,用戶注冊、訂閱服務、用戶反饋、問卷表單、買賣交易等等等等,從數據輸入到信息搜索,幾乎無處不在。對于設計師、前端和開發者而言,應當對于表單的設計盡量多上心,讓它們更加易用,細致的設計對于用戶的體驗、交互的效率有極大的加成。

  在今天的文章中,你會看到許多關于表單設計的切實可行的建議,它們涉及到可用性測試、現場測試、眼動追蹤以及用戶反饋等多個不同的環節。

  1、梳理邏輯,保留必需

  表單是同用戶進行溝通的語言。和任何對話一樣,它應當以符合邏輯的方式幫助雙方完成交流。所以,你需要這么做:

  ·讓問題保持直觀的順序。你應當站在用戶的角度按照邏輯提問題,而非按照程序或者數據庫的邏輯。如果問題之間沒有邏輯存在,那么可以按照字母順序來排布。

  ·以直覺的順序組織選項。比如選項為日期的時候,按照周一周二周三這樣的順序來排布,而非亂序。

  ·時刻反思從用戶那里獲得的信息是否必要,如何使用。這樣做是為了消除不必要的選項,提升完成率。

  2、使用單列列表布局

  待填寫的多列表單容易讓用戶漏填,并且打斷填寫體驗。用戶需要按照Z字形的軌跡來完成整個表單的填寫,這樣不僅影響整個書寫路徑,降低效率,而且具備一定的干擾性。但如果是使用單列的表單的話,這種填寫路徑是單一、直接而更為直覺高效的。

  

1-KwupoEtR6CY1TrDmby6cFw

  3、減少待輸入字段和工作量

  減少待輸入的字段能夠讓你的表單更精悍,減少加載時間,對于信息量較大的表單尤其重要。

  

1-lPS7U0KQDjFYO8GjQfvQLQ

  單純減少輸入的字段數當然是不夠的,你還要注意用戶填寫表單的方式、內容和工作量。通過打字錄入內容是一種高交互性的輸入方式,出錯率高,時間成本高,所以,網絡推廣,應當盡量減少用戶打字輸入的情況,多用復選框、單選按鈕、下拉菜單等選項來降低用戶犯錯的概率。

  

1-kQPANzxcL0ms2qaaxVtMlw

  4、匹配輸入框和內容的尺寸

  Baymard 研究所通過研究發現,如果一個字段和輸入框相比太長或者太短,都會讓用戶懷疑他們輸入的內容是否正確,而這種情況在CVV(信用卡驗證值)之類的字段輸入時,顯得尤其明顯。

  

 

  為了保持良好的可用性,你應當那個輸入框的寬度,讓它盡量和輸入內容的長度保持匹配,適當的保留空間,能讓用戶更加安心。

  5、標簽置于相應輸入框的上方

  用戶快速瀏覽表單是否足夠方便?如果表單很難為用戶快速掃視,那么填寫所需的時間就更長了。所以,好看好填才是好表單設計的準則。Matteo Penzo 的文章曾經研究過表單中的表單和輸入框應該如何布局才能讓用戶更好更快的瀏覽和填寫,結論是標簽應該置于輸入框上方。

  

 

  如果你想用戶盡快瀏覽,讓標簽和輸入框縱向排列,靠左對齊。請注意,這里說的是快速瀏覽。這樣的布局方式的優勢在于,它們不需要太多的橫向的空間,用戶無需左右掃視而只需要向下瀏覽就好了,并且這樣的布局更容易構成響應式的UI,兼容不同的屏幕和不同的應用場景。

  6、支持靈活多樣的格式

  有些字段的填寫需要用戶進行精準的填寫,網站建設,但是要求用戶輸入特別精準或者特定格式的內容可能會在易用性上存在那么一點問題。如果你要求用戶輸入數字內容(比如電話號碼),那么最好是靈活多樣的,支持多種不同輸入方式和顯示方法,讓人更容易查看(而不是機器),網站建設,防止出錯。

  

 

  比如座機電話的格式常常為(777)666 – 5544,這樣的格式更易于用戶查看、記錄和記憶。

  7、不要混用占位符和字段標簽

  設計師通常會將文本占位符放到表單內,作為額外的提醒,作為示例告知用戶如何填寫。當用戶開始在其中輸入的時候,占位符文本會消失。

  

 

  有一些設計師會將出于降低表單長度、降低視覺混亂度的原因,將標簽直接作為占位符置于輸入框內。對于簡單的表單設計,這種設計影響不大,當表單信息量大,內容類型多變的時候,這種方式就不合適了。這種設計的缺陷在于:

  ·一旦用戶點擊輸入框,標簽會消失,用戶容易忘記談需要輸入的內容以及形式

  ·當用戶看到輸入框中有內容填充的時候,會誤解為這個字段已經被填寫而無需輸入了

  如果你仍然需要在你的表單中使用占位符,不妨讓占位符以浮動標簽的形式而存在。默認顯示占位符,當用戶輸入的時候,向上浮動作為標簽提醒用戶。

  

 

  8、混淆可選和必填字段

  正如同我在之前說過的,盡量避免在表單中加入可選填的字段。但是如果你非得加入,那么至少該明確哪些字段是可選,哪些是必填的。將選填字段控制在1~2個之內,并明確告知用戶,這是可選的。

  

 

  9、別用“重置”按鈕

  “重置”很容易讓用戶刪除表單上所有內容并且從頭開始,這樣的風險太大了,在現實生活中這個按鈕實際從來沒有給用戶以幫助,相反因為誤觸帶來的傷害更多一些。

  

 

  10、提供高可見度和特定的報錯信息


關閉窗口
上一篇:這些響應式網頁測試工具確保你的設計萬無一失
下一篇:中小企業為什么要建設公司網站

相關閱讀

友情鏈接: 泰安網絡推廣 泰安網絡公司 山東噴泉公司 全能空間 吉塞拉大櫻桃苗 大連做網站公司 北京網站制作公司 南寧網站制作 九江網站建設 北京噴泉公司 軟文發稿 | 友鏈申請QQ:2412286760

官方微信公眾號

集團總部

北京分部

上海分部

nba十大篮球巨星座驾
极速快三辅助软件 三人斗地主 彩虹计划网 北京pk10怎么倍投合理 二十一点扑克游戏下载 直播app软件大全 pk10直播现场直播下载 pc蛋蛋哪个平台不错 百度北京赛pk10直播 大唐娱乐棋牌技巧 鹿岛鹿角 兴华彩票是真的假的 时时彩老玩家的经验 九五之乐线上娱乐 足球计算器胜平负玩法 快速时时计算方法