超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

表單設(shè)計(jì)系列一:設(shè)計(jì)好用表單的10個(gè)技巧

2017-7-27    藍(lán)藍(lán)設(shè)計(jì)的小編


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

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


在今天的文章中,你會(huì)看到許多關(guān)于表單設(shè)計(jì)的切實(shí)可行的建議,它們涉及到可用性測試、現(xiàn)場測試、眼動(dòng)追蹤以及用戶反饋等多個(gè)不同的環(huán)節(jié)。

1、梳理邏輯,保留必需

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

  • 讓問題保持直觀的順序。你應(yīng)當(dāng)站在用戶的角度按照邏輯提問題,而非按照程序或者數(shù)據(jù)庫的邏輯。如果問題之間沒有邏輯存在,那么可以按照字母順序來排布。
  • 以直覺的順序組織選項(xiàng)。比如選項(xiàng)為日期的時(shí)候,按照周一周二周三這樣的順序來排布,而非亂序。
  • 時(shí)刻反思從用戶那里獲得的信息是否必要,如何使用。這樣做是為了消除不必要的選項(xiàng),提升完成率。

2、使用單列列表布局

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

1-KwupoEtR6CY1TrDmby6cFw

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

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

1-lPS7U0KQDjFYO8GjQfvQLQ

單純減少輸入的字段數(shù)當(dāng)然是不夠的,你還要注意用戶填寫表單的方式、內(nèi)容和工作量。通過打字錄入內(nèi)容是一種高交互性的輸入方式,出錯(cuò)率高,時(shí)間成本高,所以,應(yīng)當(dāng)盡量減少用戶打字輸入的情況,多用復(fù)選框、單選按鈕、下拉菜單等選項(xiàng)來降低用戶犯錯(cuò)的概率。

1-kQPANzxcL0ms2qaaxVtMlw

4、匹配輸入框和內(nèi)容的尺寸

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

1-Lk-88CuA0hctoaYA1UnpvQ

為了保持良好的可用性,你應(yīng)當(dāng)那個(gè)輸入框的寬度,讓它盡量和輸入內(nèi)容的長度保持匹配,適當(dāng)?shù)谋A艨臻g,能讓用戶更加安心。

5、標(biāo)簽置于相應(yīng)輸入框的上方

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

1-RH8cGgjGgWuR-Xvz0Ox9ig

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

6、支持靈活多樣的格式

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

1-qboV3vtzb0v7s4YPqaVdJA

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

7、不要混用占位符和字段標(biāo)簽

設(shè)計(jì)師通常會(huì)將文本占位符放到表單內(nèi),作為額外的提醒,作為示例告知用戶如何填寫。當(dāng)用戶開始在其中輸入的時(shí)候,占位符文本會(huì)消失。

1-z7C6dXs_GMug-FWuiQUkXA

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

  • 一旦用戶點(diǎn)擊輸入框,標(biāo)簽會(huì)消失,用戶容易忘記談需要輸入的內(nèi)容以及形式
  • 當(dāng)用戶看到輸入框中有內(nèi)容填充的時(shí)候,會(huì)誤解為這個(gè)字段已經(jīng)被填寫而無需輸入了

如果你仍然需要在你的表單中使用占位符,不妨讓占位符以浮動(dòng)標(biāo)簽的形式而存在。默認(rèn)顯示占位符,當(dāng)用戶輸入的時(shí)候,向上浮動(dòng)作為標(biāo)簽提醒用戶。

1-ElzQy7UV9hwgK2xf7O31WQ

8、混淆可選和必填字段

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

1-sTpmsD4WONAE9JjrI8CJww

9、別用“重置”按鈕

“重置”很容易讓用戶刪除表單上所有內(nèi)容并且從頭開始,這樣的風(fēng)險(xiǎn)太大了,在現(xiàn)實(shí)生活中這個(gè)按鈕實(shí)際從來沒有給用戶以幫助,相反因?yàn)檎`觸帶來的傷害更多一些。

1-vk0uJY0D_7l6DPqgmEpPdw

10、提供高可見度和特定的報(bào)錯(cuò)信息

理想狀況下,用戶完成表單的填寫,上傳就可以完成任務(wù)。但是實(shí)際的狀況下,錯(cuò)誤不可避免。所以,當(dāng)錯(cuò)誤發(fā)生的時(shí)候,要以高度可用、可見的形式告知用戶,有問題發(fā)生了,所以,你所提供的報(bào)錯(cuò)信息應(yīng)當(dāng)符合下面的規(guī)則:

1)當(dāng)用戶輸入字段之后,應(yīng)該實(shí)時(shí)告知用戶他們填寫的信息是對的還是錯(cuò)的,而不是等他們完成全部信息填寫之后再告訴他們出錯(cuò)了。

1-hwtem6mCBFr-ebuwD7mjGw

2)報(bào)錯(cuò)信息應(yīng)當(dāng)一目了然,從用色、圖標(biāo)到文本都應(yīng)當(dāng)起到高亮的效果,而且報(bào)錯(cuò)信息應(yīng)當(dāng)靠近輸入框,而非表單的底部或者頂部或者按鍵旁邊。

1-XVZetm1skdL5b5csfWCVkg

3)如果輸入格式特定,那么應(yīng)當(dāng)事先聲明。

1-KwupoEtR6CY1TrDmby6cFw

4)出現(xiàn)錯(cuò)誤之后之后,不要將已經(jīng)填寫的表單清空。

結(jié)語

填寫表單的時(shí)候,用戶的猶豫是不可避免的,我們應(yīng)當(dāng)盡量讓這個(gè)過程變的便捷而輕松。我們應(yīng)當(dāng)讓表單設(shè)計(jì)成為優(yōu)勢,而非弱點(diǎn)。一個(gè)高度有針對性的表單設(shè)計(jì),貼心細(xì)致的細(xì)節(jié)和體驗(yàn),堅(jiān)持不懈的改良和調(diào)整,快速的提交,順暢的流程,這些才是優(yōu)秀表單應(yīng)有的樣子。


藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔