MENU 服務(wù) 案例
網(wǎng)站建設(shè)-網(wǎng)站設(shè)計-北京網(wǎng)站建設(shè)-高端網(wǎng)站制作公司-尚品中國
我們通過擁抱變化創(chuàng)造
360°的品牌價值__
簡體
簡體中文 English

尚品簽約辰欣藥業(yè)股份有限公司官網(wǎng)建設(shè)

類型:尚品動態(tài) 了解更多

北京網(wǎng)站制作公司分享用好表單進(jìn)行設(shè)計的10個技巧

來源:尚品中國| 類型:網(wǎng)站制作| 時間:2022-07-05
  無論是網(wǎng)站制作還是APP UI設(shè)計,表單都是界面中最常見也是最重要的組件之一。它們的應(yīng)用范圍很廣,比如用戶注冊、訂閱服務(wù)、用戶反饋、問卷表格、商業(yè)交易等等,從數(shù)據(jù)輸入到信息搜索,幾乎無處不在。對于設(shè)計師、前端、開發(fā)者來說,要盡可能的重視表單的設(shè)計,讓表單更容易使用。精心的設(shè)計會大大增加用戶的體驗(yàn)和交互效率。

北京網(wǎng)站制作公司分享用好表單進(jìn)行設(shè)計的10個技巧

  在今天的文章中,你會看到許多關(guān)于表單設(shè)計的實(shí)用建議,這些建議涉及可用性測試、現(xiàn)場測試、用戶追蹤和用戶反饋。

  1.理清邏輯,保留必要的

  表單是與用戶交流的語言。像任何對話一樣,它應(yīng)該幫助雙方以符合邏輯的方式完成溝通。所以,你需要這樣做:

  保持問題的直觀順序。你應(yīng)該站在用戶的角度邏輯地提問,而不是按照程序或者數(shù)據(jù)庫的邏輯。如果問題之間沒有邏輯,可以按字母順序排列。

  以直觀的順序組織選項(xiàng)。例如,當(dāng)選項(xiàng)是日期時,它們按照周一、周二和周三的順序排列,而不是亂序。

  時刻反思從用戶那里獲取的信息是否有必要,如何使用。這樣做是為了消除不必要的選項(xiàng),提高完成率。

  2.使用單列列表布局

  要填寫的多列表表單很容易讓用戶錯過,打斷填寫體驗(yàn)。用戶需要按照之字形軌跡填寫整個表格,不僅影響了整個書寫路徑,降低了效率,還會產(chǎn)生一定的干擾。但是如果使用單欄形式,這種填充路徑是單一的,直接的,更加直觀高效。

  3.減少需要輸入的字段和工作量

  減少要輸入的字段數(shù)量可以使您的表單更加簡潔,減少加載時間,尤其是對于信息量大的表單。

  當(dāng)然,僅僅減少輸入字段的數(shù)量是不夠的。你也要注意用戶填表的方式、內(nèi)容和工作量。鍵入內(nèi)容是一種高交互性的輸入方式,錯誤率高,時間成本高。所以要盡量減少用戶打字的情況,使用復(fù)選框、單選按鈕、下拉菜單等選項(xiàng),減少用戶出錯的概率。

  4.匹配輸入框和內(nèi)容的大小

  MARD研究所的研究發(fā)現(xiàn),如果一個字段與輸入框相比過長或過短,會讓用戶懷疑自己輸入的內(nèi)容是否正確,這種情況在輸入CVV(信用卡驗(yàn)證值)等字段時尤為明顯。

  為了保持良好的可用性,您應(yīng)該使輸入框的寬度盡可能與輸入內(nèi)容的長度相匹配。適當(dāng)?shù)念A(yù)留空間可以讓用戶更安心。

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

  是否足夠方便用戶快速瀏覽表單?如果用戶很難快速瀏覽表單,則需要更長時間來填寫。所以,好看和填充是好的表單設(shè)計的準(zhǔn)則。Matteo Penzo的文章曾經(jīng)研究過表單和表單中的輸入框應(yīng)該如何布局,以便用戶可以更好更快地瀏覽和填寫。結(jié)論是標(biāo)簽應(yīng)該放在輸入框的上方。

  如果你想讓用戶盡快瀏覽,把標(biāo)簽和輸入框垂直排列,靠左對齊。請注意,這是關(guān)于快速瀏覽。這種布局的好處是不需要太多的橫向空間,用戶只需要向下瀏覽,不需要左右掃描,這種布局更容易形成響應(yīng)式UI,兼容不同屏幕和不同應(yīng)用場景。

  6.支持靈活多樣的格式

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

  比如座機(jī)電話的格式往往是(777)666–5544,更便于用戶查看、記錄和記憶。

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

  設(shè)計者通常在表單中放置文本占位符,作為額外的提醒,告訴用戶如何填寫示例。當(dāng)用戶開始輸入時,占位符文本將會消失。

  有些設(shè)計者會將標(biāo)簽直接作為占位符放在輸入框中,以減少表單的長度和視覺混亂。對于簡單的表單設(shè)計,這種設(shè)計影響不大。當(dāng)表單信息量大,內(nèi)容類型多樣時,這種設(shè)計就不適合了。這種設(shè)計的缺點(diǎn)是:

  一旦用戶點(diǎn)擊輸入框,標(biāo)簽就會消失,用戶很容易忘記談需要輸入的內(nèi)容和形式。當(dāng)用戶看到輸入框填充了內(nèi)容,會誤以為這個字段是沒有輸入就被填充的。

  如果您仍然需要在表單中使用占位符,您也可以讓它們作為浮動標(biāo)簽存在。顯示默認(rèn)的占位符,當(dāng)用戶輸入時,它作為標(biāo)簽向上浮動以提醒用戶。

  8.混淆可選和必填字段

  正如我之前所說,盡量避免在表單中添加可選字段。但如果非要加入,至少要知道哪些字段是可選的,哪些是必填的??蛇x字段數(shù)量控制在1~2個以內(nèi),明確告知用戶是可選的。

  9.不要使用重置按鈕

  “重置”使用戶可以很容易地刪除表單上的所有內(nèi)容并從頭開始。這個風(fēng)險太大了。在現(xiàn)實(shí)生活中,這個按鈕從來不會幫助用戶。反而因?yàn)椴恍⌒挠|碰而更疼。

  10.提供高可見性和特定的錯誤信息

  理想情況下,用戶可以通過填寫表單并上傳來完成任務(wù)。但現(xiàn)實(shí)中,錯誤是不可避免的。因此,當(dāng)錯誤發(fā)生時,您應(yīng)該以高度可用和可見的形式通知用戶發(fā)生了什么。因此,您提供的錯誤信息應(yīng)符合以下規(guī)則:

  當(dāng)用戶輸入字段時,應(yīng)該實(shí)時告訴他們所填寫的信息是對還是錯,而不是等他們填寫完所有信息后才告訴他們出錯了。

  錯誤信息應(yīng)該一目了然,突出顯示顏色、圖標(biāo)和文本,錯誤信息應(yīng)該靠近輸入框,而不是表單的底部或頂部或鍵的旁邊。

  如果輸入格式是特定的,應(yīng)該提前聲明。

  出現(xiàn)錯誤后,不要清空已完成的表單。

  總結(jié)

  在填寫表單時,用戶的猶豫是不可避免的。我們應(yīng)該盡力使這個過程變得方便和容易。我們應(yīng)該讓形式設(shè)計成為優(yōu)勢,而不是劣勢。極具針對性的表單設(shè)計、周到的細(xì)節(jié)和體驗(yàn)、持續(xù)的改進(jìn)和調(diào)整、高效快捷的提交、流暢的流程是一份優(yōu)秀表單的特征。

來源聲明:本文章系尚品中國編輯原創(chuàng)或采編整理,如需轉(zhuǎn)載請注明來自尚品中國。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò),如有侵權(quán),請及時與本站聯(lián)系(010-60259772)。
TAG標(biāo)簽:

網(wǎng)站制作

如果您的網(wǎng)站可以增加轉(zhuǎn)化次數(shù)并提高客戶滿意度,該怎么辦?

預(yù)約專業(yè)咨詢顧問溝通!

*尚品專業(yè)顧問將盡快與您聯(lián)系

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!

聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com

現(xiàn)在就與專業(yè)咨詢顧問溝通!

  • 全國服務(wù)熱線

    400-700-4979

  • 北京服務(wù)熱線

    010-60259772

信息保護(hù)中請放心填寫
在線咨詢

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!

聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com