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

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

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

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

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

選取合適的問題

只需要考慮兩個問題：

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

2.用戶當前操作需要哪些信息才能完成?

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

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

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

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

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

理清問題之間的邏輯：

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

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

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

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

合適的標簽對齊方式

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

　頂對齊標簽

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

右對齊標簽

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

左對齊標簽

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

如果希望用戶認真填寫問題，采用左對齊標簽是個不錯的選擇。

輸入框內(nèi)標簽

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

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

明確輸入框類型

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

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

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

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

突出主要動作

通過視覺設(shè)計突出主要動作，表明重要性，減少次要動作的視覺干擾。

提供幫助的時機

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

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定