激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI交互設(shè)計(jì):設(shè)計(jì)高效好用的表單

發(fā)布時(shí)間：2024-04-16 16:07:59 瀏覽量：140次

表單設(shè)計(jì)是我們在進(jìn)行UI交互設(shè)計(jì)時(shí)需要經(jīng)常面對的問題，設(shè)計(jì)的首要目標(biāo)是滿足我們和用戶想要的東西，并保證用戶可以輕松快速的完成填寫。重慶優(yōu)就業(yè)的老師今天就來和大家分享一下怎樣設(shè)計(jì)高效好用的表單。

選取合適的問題

只需要考慮兩個(gè)問題：

1.我們通過表單想得到用戶哪些信息?

2.用戶當(dāng)前操作需要哪些信息才能完成?

根據(jù)我們得到的問題，參考卡羅琳賈勒特提出的“保留，刪減，延遲，解釋”四大策略形成更好的問題。

保留：你問的就是用戶想要的，那么留下這些問題

　刪減：并不需要通過用戶填寫得到答案的，我們可以通過用戶其他信息推斷出來，或者不必要的問題刪掉，減少我們的工作量，減少用戶填表的時(shí)間

　延遲：并不需要馬上得到答案的，延遲到合適的時(shí)間在合適的位置填寫

解釋：涉及到敏感信息或者用戶個(gè)人隱私的，但我們必須要的信息，向用戶解釋為什么需要，對用戶有什么好處

理清問題之間的邏輯：

我們通過分析得到相對合理的問題后，就要考慮問題之間的邏輯性，保證填寫流暢

根據(jù)情境和問題數(shù)量將問題分組，思考放置這些問題合適的時(shí)間和位置。

已在蘋果官網(wǎng)購買產(chǎn)品為例，若用戶沒有賬號，依然可以購買產(chǎn)品，然后在付款結(jié)束時(shí)創(chuàng)建賬號，不會(huì)因?yàn)橛脩魶]有賬號而影響購買行為。

表單設(shè)計(jì)遵循的規(guī)則

合適的標(biāo)簽對齊方式

根據(jù)標(biāo)簽所處的位置可以分為左對齊標(biāo)簽，頂對齊標(biāo)簽、右對齊標(biāo)簽和輸入框內(nèi)標(biāo)簽。具體采用那種方式取決于我們希望用戶完成表單的速度，屏幕顯示的限制等因素。

　頂對齊標(biāo)簽

頂對齊標(biāo)簽有清晰的完成路徑，用戶可以順著標(biāo)簽可以很快的完成表單，在web端還可以增加橫向空間，以其它方式來組合相關(guān)輸入框;缺點(diǎn)是會(huì)占用額外的垂直空間，當(dāng)內(nèi)容較多時(shí)，慎重使用。需要注意的是頂對齊標(biāo)簽應(yīng)當(dāng)采用合適的垂直間距，一般使用輸入框50%-75%的高度作為相鄰輸入框的間距。

右對齊標(biāo)簽

右對齊標(biāo)簽和相關(guān)輸入框相鄰，填寫時(shí)間相對較快，占用的垂直空間減少;缺點(diǎn)是左側(cè)不齊，降低了可讀性。

左對齊標(biāo)簽

左對齊標(biāo)簽同樣減少了垂直空間的占用，由于標(biāo)簽是左對齊的，符合我們的閱讀習(xí)慣，所以用戶可以快速了解表單需要回答的問題;缺點(diǎn)是右側(cè)不齊，導(dǎo)致標(biāo)簽和相關(guān)輸入框相鄰間距增大，增加了用戶完成表單需要的時(shí)間。

如果希望用戶認(rèn)真填寫問題，采用左對齊標(biāo)簽是個(gè)不錯(cuò)的選擇。

輸入框內(nèi)標(biāo)簽

輸入框內(nèi)標(biāo)簽極大的節(jié)省了頁面空間，使界面看起來更加簡潔美觀，但是一旦用戶點(diǎn)擊切換到輸入狀態(tài)以后，用戶就會(huì)看不到這些標(biāo)簽了。如果同一頁面中表單項(xiàng)目很多(超過5個(gè))，用戶填寫過程中可能會(huì)忘記之前的填寫的項(xiàng)目是什么。為了解決這個(gè)問題，我們可以在行內(nèi)標(biāo)簽前加一個(gè)圖標(biāo)來標(biāo)識(shí)這個(gè)列表項(xiàng)，圖標(biāo)所占據(jù)的空間不會(huì)太大，而且會(huì)增加頁面的美觀性。

如果表單較長，輸入框內(nèi)標(biāo)簽并不適合，填完表格后標(biāo)簽不見了，用戶檢查填寫好的也非常困難，所以輸入框內(nèi)標(biāo)簽更適合用于只有一個(gè)問題(比如搜索框)或兩到三個(gè)輸入框的表單或者用戶非常熟悉的表單(比如登錄)

明確輸入框類型

常用的輸入框類型包括單選框、復(fù)選框、下拉列表、文本框。

文本框：可以加入文本框暗示，幫助用戶了解如何回答問題，無法防止輸入出錯(cuò)，效率低。

單選框、復(fù)選框：答案明顯，有效防止輸入出錯(cuò)，如果選項(xiàng)較多，會(huì)影響界面美觀，可以考慮使用下拉框。

下拉框：同單選框一樣，可以防止輸入出錯(cuò)，而且視覺效果好，缺點(diǎn)是犧牲了可用性和明確性，答案不明顯，用戶需要點(diǎn)擊才能看到答案然后進(jìn)行選擇。

突出主要?jiǎng)幼?/strong>

通過視覺設(shè)計(jì)突出主要?jiǎng)幼?，表明重要性，減少次要?jiǎng)幼鞯囊曈X干擾。

提供幫助的時(shí)機(jī)

幫助信息有直接展現(xiàn)形式和觸發(fā)展現(xiàn)形式。

直接展現(xiàn)形式是指用戶不需要進(jìn)行任何操作，提示信息自動(dòng)出現(xiàn)在相關(guān)的區(qū)域內(nèi)，目前最常見的就是出現(xiàn)在輸入框的內(nèi)部或右側(cè)。例如我們常用的登錄頁面，在為輸入用戶名時(shí)會(huì)提示你請輸入郵箱/用戶名/已驗(yàn)證手機(jī)的提示信息，幫助用戶盡快完成操作。

觸發(fā)展現(xiàn)形式是指用戶觸發(fā)操作后，展現(xiàn)出相關(guān)提示內(nèi)容，提示用戶該如何進(jìn)行下一步操作、判斷用戶當(dāng)前的操作是否正確。需要注意的是觸發(fā)展現(xiàn)應(yīng)該在用戶表明已填好并進(jìn)入下一個(gè)輸入框時(shí)再進(jìn)行驗(yàn)證，如果錯(cuò)誤應(yīng)告知用戶正確的做法或者直接給出建議的答案。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定