發(fā)布時(shí)間:2024-03-10 20:39:21 瀏覽量:147次
通過(guò)項(xiàng)目實(shí)戰(zhàn),帶你全面了解在UI設(shè)計(jì)中設(shè)計(jì)表單時(shí)碰到的問(wèn)題,避免因表單設(shè)計(jì)的問(wèn)題而造成用戶的流失。
表單是提升用戶體驗(yàn)的一個(gè)核心點(diǎn),但在視覺呈現(xiàn)的時(shí)候,大部分都忽視了它的體驗(yàn)。對(duì)于一個(gè)設(shè)計(jì)師來(lái)說(shuō),就需要根據(jù)實(shí)際情況在設(shè)計(jì)中進(jìn)行靈活調(diào)整,設(shè)計(jì)出符合用戶預(yù)期的表單,不僅能帶給用戶操作效率上的提升,節(jié)約時(shí)間成本,還能避免錯(cuò)誤出現(xiàn),在體驗(yàn)過(guò)程中心情更加的愉悅。
上期我們分享了在實(shí)際的項(xiàng)目中如何選擇合適的表單以及表單的結(jié)構(gòu)介紹,本期將分享在表單設(shè)計(jì)過(guò)程需要注意的細(xì)節(jié)以及容易碰到問(wèn)題點(diǎn)。
[m]前言[/m] 不管是APP還是Web端界面設(shè)計(jì),我們最常見的元素應(yīng)該就是表單了,表單幾乎是每一款數(shù)字產(chǎn)品都不可或缺的組成部分,也是設(shè)計(jì)師必須要親身經(jīng)歷的設(shè)計(jì)組件之一,它的作用無(wú)可替代。
閱讀文章 >>
用戶在完成表單進(jìn)行文本輸入時(shí),當(dāng)然希望填寫的信息越少越好,所以我們盡可能提供合適的輸入格式、適當(dāng)?shù)淖詣?dòng)輸入、合理的輸入順序以及避免重復(fù)輸入來(lái)提升用戶完成表單的效率。
輸入格式: 通過(guò)合理的格式約束,能夠方便用戶更快的完成填寫,而減少錯(cuò)誤出現(xiàn)。自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶開始進(jìn)行輸入。
自動(dòng)輸入:根據(jù)已知信息,幫助用戶預(yù)判內(nèi)容并自動(dòng)錄入。如:用戶在輸入電話號(hào)碼前,需要先輸入國(guó)家的代碼,我們可以根據(jù)產(chǎn)品的運(yùn)營(yíng)市場(chǎng)所在的國(guó)家自動(dòng)錄入。
輸入順序:先易后難;先必填后選填;先公開信息后隱私信息;有關(guān)聯(lián)性的合成一組,特殊問(wèn)題后置,用戶輸入時(shí)、不會(huì)覺得突兀、門檻太高 。
避免多次詢問(wèn)相同信息,重復(fù)輸入的內(nèi)容盡量減少。比如:用戶可以顯示和隱藏所設(shè)置的密碼,不是讓用戶輸入2次來(lái)進(jìn)行驗(yàn)證,這對(duì)于生成有效的密碼更重要。
在用戶完成表單的過(guò)程中,為了應(yīng)對(duì)不同的信息,除了文本輸入之外,還會(huì)有選擇的方式。通常會(huì)包含有至少2個(gè)或以上的選項(xiàng),用戶可以選擇其中的一個(gè)或多個(gè)。選擇的類型最常見的有單選、復(fù)選(多選);選擇樣式有彈窗、下拉菜單、跳轉(zhuǎn)新頁(yè)面。它們看起來(lái)不復(fù)雜,但是在實(shí)際使用的時(shí)候講究非常之多,不僅關(guān)乎用戶體驗(yàn),而且涉及到一些界面邏輯問(wèn)題,每種選擇方式也都有各自不同的狀態(tài)顯示。
單選
單選項(xiàng)是界面中非常常見的表單元素。它通常被用來(lái)從一組互斥的相關(guān)選項(xiàng)中選擇一個(gè)單獨(dú)的選項(xiàng)。當(dāng)點(diǎn)擊一個(gè)未選中的單選項(xiàng)時(shí),它會(huì)被選中,其他按鈕則會(huì)變成未選中狀態(tài)。
單選可根據(jù)用戶最可能會(huì)選中或者數(shù)據(jù)統(tǒng)計(jì)選擇最多的一個(gè)標(biāo)簽作為默認(rèn)選項(xiàng),如果此字段屬于非必填,需要有一個(gè)「無(wú)」的標(biāo)簽選項(xiàng),以方便用戶在選擇之后又不想做出選擇時(shí)能夠更改。單選的樣式有單選框、按鈕、波動(dòng)開關(guān),請(qǐng)根據(jù)不同需求選擇不同的樣式:
單選框:存在兩個(gè)以上的選項(xiàng)且標(biāo)簽是一句/多句話組成,需要選擇一個(gè)正確的選項(xiàng)。使用單選框時(shí),靠左對(duì)齊的選框+標(biāo)簽的樣式是效果最好的,單選框有選中、未選中、不可選狀態(tài)。
按鈕:存在2~6個(gè)選項(xiàng)時(shí)且選項(xiàng)信息是一個(gè)詞語(yǔ),文本一般不超過(guò)4個(gè)字,需要選擇一個(gè)正確的選項(xiàng),使用按鈕樣式。有選中、未選中、不可選狀態(tài);
波動(dòng)開關(guān):只存在兩個(gè)選項(xiàng)且選項(xiàng)具有判斷性質(zhì),需要選擇一個(gè)正確的信息,觸發(fā)之后能夠立即生效,使用波動(dòng)開關(guān),有開啟、關(guān)閉兩種樣式。
復(fù)選:
復(fù)選也是界面中很常見的表單元素,通常會(huì)有一個(gè)或多選項(xiàng)供用戶選擇,同時(shí)選項(xiàng)的內(nèi)容是不互斥的,可以選擇一個(gè)或多個(gè)正確的選項(xiàng)。
復(fù)選無(wú)需提供默認(rèn)選項(xiàng),也不需要提供「無(wú)」的標(biāo)簽,用戶可在同一選項(xiàng)上重復(fù)點(diǎn)擊進(jìn)行選中/未選中操作。復(fù)選最常見的樣式就只有復(fù)選框、按鈕兩種:
復(fù)選框:一個(gè)具有判斷性質(zhì)(用戶協(xié)議)的選項(xiàng)或者有兩個(gè)正確答案以上的多個(gè)選項(xiàng)組成。復(fù)選框有選中、未選中兩種常用狀態(tài),另外當(dāng)選項(xiàng)存在子父級(jí)關(guān)系時(shí),還有一種未定狀態(tài),常用于Web端管理后臺(tái)。
按鈕:存在2~6個(gè)選項(xiàng)時(shí)且選項(xiàng)信息是一個(gè)詞語(yǔ),文本最好不超過(guò)4個(gè)字,有兩個(gè)以上的正確選項(xiàng),使用按鈕樣式。有選中、未選中、不可選狀態(tài);
選擇方式
不管是單選還是復(fù)選、按鈕還是框選的形式,都需要結(jié)合表單當(dāng)前選項(xiàng)的實(shí)際需求,以對(duì)應(yīng)不同選擇方式。最為常見的選擇方式有彈窗、下拉、新頁(yè)面跳轉(zhuǎn)…等,不同的選擇方式有各自的優(yōu)勢(shì)和劣勢(shì),選擇不當(dāng)可能會(huì)造成用戶體驗(yàn)差而導(dǎo)致轉(zhuǎn)化率低或用戶流失。
1. 手動(dòng)保存
手動(dòng)保存即依賴用戶做額外操作才可以達(dá)成的保存行為。此類保存,我們往往依賴保存按鈕。這種保存方式大多用于網(wǎng)頁(yè),如:個(gè)人信息、簡(jiǎn)歷…等,大多用于表單內(nèi)容較多的頁(yè)面,根據(jù)表單信息將內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組,組的下方提供一個(gè)保存按鈕。
2. 自動(dòng)保存
自動(dòng)保存的目的是記住用戶已經(jīng)填寫的內(nèi)容,從而避免用戶需要再次輸入而放棄??梢栽O(shè)定間隔時(shí)間或者用戶未操作后的一段時(shí)間進(jìn)行自動(dòng)保存,比如:每隔30秒或者用戶在10秒內(nèi)未操作,系統(tǒng)進(jìn)行自動(dòng)保存一次,比較適合需要大量編輯功能的表單。(這種保存方式屬后臺(tái)發(fā)送請(qǐng)求,視覺無(wú)任何變化)
3. 兜底保存
其實(shí)前面兩種保存方式在移動(dòng)端都有局限性,手動(dòng)保存不利于用戶體驗(yàn),自動(dòng)保存比較占資源和影響用戶操作,那么我們就需要有一個(gè)更好的方案。類似信息較多的表單,系統(tǒng)檢測(cè)到用戶填寫了部分內(nèi)容但沒有完成表單就要離開時(shí),以彈窗的形式給用戶一個(gè)溫馨提示,讓用戶自行選擇保存還是直接離開。另外在用戶使用網(wǎng)絡(luò)問(wèn)題或應(yīng)用意外退出,都應(yīng)自動(dòng)保存用戶已完成的信息,以便用戶再次使用時(shí)不會(huì)因?yàn)橹匦绿顚懴勇闊┒艞墶?/p>
設(shè)計(jì)表單時(shí),對(duì)于一些專業(yè)詞匯或較難理解的概念,要給予明確的解釋,有較高要求的表單信息也要給予明確的示例供用戶參考。復(fù)雜的流程,還可以提供在線咨詢幫助,協(xié)助用戶完成整個(gè)表單的填寫。當(dāng)用戶填寫內(nèi)容出錯(cuò)的時(shí)候,應(yīng)當(dāng)指明發(fā)生錯(cuò)誤的條目,以及錯(cuò)誤的原因,最好將反饋定位到具體位置。反饋的前提是不打擾用戶,但在用戶需要的時(shí)候及時(shí)出現(xiàn)。
1. 提示反饋(輸入前)
2. 驗(yàn)證反饋(輸入后)
行內(nèi)提示:行內(nèi)提示不需要服務(wù)器上傳驗(yàn)證的數(shù)據(jù),就可以判斷,例如手機(jī)格式,當(dāng)光標(biāo)離開時(shí)理解為用戶輸入完成,通過(guò)前端對(duì)格式進(jìn)行驗(yàn)證;
toast提示:屬于后臺(tái)驗(yàn)證,需要服務(wù)器上傳驗(yàn)證數(shù)據(jù),或者其他類型的突發(fā)事件。如果是表單問(wèn)題,需要有清晰的定位提示位置,就近原則,方便用戶發(fā)現(xiàn)并修改操作。請(qǐng)注意錯(cuò)誤的字段,請(qǐng)勿在鍵入后直接清除,請(qǐng)給用戶在此基礎(chǔ)上修改的機(jī)會(huì),記住用戶才是決定者。
彈窗提示:彈窗提示是直接打斷當(dāng)前的操作,同時(shí)會(huì)引導(dǎo)用戶進(jìn)行新的操作。比如成功提示,是對(duì)用戶完成信息輸入的提示和感謝;失敗提示則會(huì)通過(guò)彈窗引導(dǎo)用戶返回或者重新提交。
操作按鈕是在表單的結(jié)尾,有個(gè)確認(rèn)提交的動(dòng)作控件,是專門為觸控而設(shè)計(jì),不僅可點(diǎn)擊,更需要容易點(diǎn)擊,還需要根據(jù)表單的不同條件反饋不同的按鈕狀態(tài),清晰可預(yù)測(cè),應(yīng)該準(zhǔn)確地描述用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么,比如提交。復(fù)位、下一步…等。按鈕是關(guān)系到頁(yè)面的最終轉(zhuǎn)化的重要元素,在按鈕的設(shè)計(jì)上要更加費(fèi)心。
顏色是影響按鈕隔離效果的首要因素,多個(gè)按鈕基本都是通過(guò)顏色來(lái)區(qū)分主次。其次才是樣式,設(shè)計(jì)師利用同理心來(lái)理解用戶「心理模型」,利用設(shè)計(jì)手段,將「實(shí)現(xiàn)模型」改變成用戶可以接受和理解的「心理模型」,給用戶提供最常用樣式,如果設(shè)計(jì)和常規(guī)樣式差異過(guò)大的按鈕,容易帶來(lái)額外的認(rèn)知負(fù)擔(dān)。
1. 按鈕位置
△ 綜合實(shí)例,Bee Express項(xiàng)目為了適配中文/英文/泰文狀態(tài),綜合了每個(gè)位置的利弊得出:當(dāng)表單內(nèi)容+按鈕少于一屏內(nèi)容時(shí),操作按鈕置于表單底部;超過(guò)一屏則在設(shè)備底部懸浮。
2. 交互狀態(tài)
3. 多按鈕樣式
以上只是對(duì)表單設(shè)計(jì)的一些總結(jié),視覺體驗(yàn)只占了整體體驗(yàn)一部分 。一個(gè)表單是否真的好用,還需要深入研究表單設(shè)計(jì),從結(jié)構(gòu)化的思維分析表單的設(shè)計(jì)問(wèn)題,從而能夠全面的認(rèn)識(shí)一個(gè)事物并進(jìn)行了解掌握。通過(guò)優(yōu)化視覺表現(xiàn)提升表單體驗(yàn)只是表象,更多是要考慮到表單最終要幫用戶解決什么問(wèn)題,先想好為什么,再想怎么做。
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來(lái)如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過(guò)介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁(yè)、引導(dǎo)頁(yè)、浮層引導(dǎo)頁(yè)、空白頁(yè)和首頁(yè)等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁(yè)和表單頁(yè)設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁(yè)和表單頁(yè)是不可或缺的部分。一個(gè)好的列表頁(yè)和表單頁(yè)設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來(lái)說(shuō),這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過(guò)程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過(guò)多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過(guò)對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!