張經(jīng)理 / 18665606093
Email / service@2000new.com
掃一掃添加顧問
隨著互聯(lián)網(wǎng)時代的快速發(fā)展,設(shè)計師不再簡單地為互聯(lián)網(wǎng)創(chuàng)造美麗的畫面。作為一個WEB設(shè)計師,除了基本的設(shè)計技巧,還需要考慮其他問題,比如用戶體驗、算法、代碼等等。如今,用戶體驗設(shè)計變得越來越重要,尤其是對于網(wǎng)頁表單的設(shè)計。
WEB表單設(shè)計的目標是設(shè)計一套從填寫表單到單擊提交按鈕的最簡單的過程。從非常簡單直接的形式到花哨、豐富多彩、富有創(chuàng)意的形式,每個網(wǎng)站都呈現(xiàn)出一種形式風(fēng)格。無論是登錄/注冊表單、聯(lián)系人表單,還是其他類型的表單,設(shè)計人員都需要記住,這些表單的目標是贏得用戶的注意,并引導(dǎo)他們填寫信息。Mockplus根據(jù)多年的設(shè)計經(jīng)驗,總結(jié)出WEB表單設(shè)計的六大原則。
(一)保持醒目和簡潔
我們經(jīng)常遇到一個問題。許多用戶抱怨登記表需要太多信息。如果你設(shè)計的網(wǎng)站是想增加注冊用戶數(shù)量,那么你首先要保證設(shè)計出來的表單盡可能簡潔,容易填寫。同時,突出顯示的部分和信息可以在設(shè)計時以更引人注目的方式強調(diào)。
(二)合理組織信息
對于一個需要填寫多項的復(fù)雜表單,如果信息沒有組織起來,很容易出現(xiàn)復(fù)雜混亂的情況,讓用戶一開始就感到矛盾,甚至選擇放棄。為了合理、分層地組織信息,可以利用幀線、空間間隔和顏色的差異,根據(jù)不同信息的類別、屬性和相關(guān)性來劃分塊,并使用階梯條來表示當(dāng)前的過程。清晰的瀏覽線、合理的標簽排列、提示文字和按鈕可以避免不必要的信息,減輕用戶的視覺和身體負擔(dān)。
(3)較大的輸入框
根據(jù)實際用戶反饋,表單設(shè)計中較大的文本輸入框和適度的空格會讓人有更多的填充欲望,優(yōu)雅的動畫效果也能增加填充的興趣。在設(shè)計表單的過程中,設(shè)計師需要緩解不同輸入元素之間的沖突。粗體文本提示用戶哪些區(qū)域已經(jīng)填充,哪些區(qū)域仍然是空的。當(dāng)一個輸入框被激活時,它會變成淡藍色,指示光標現(xiàn)在的位置。
(4)為用戶節(jié)省時間
需要大量時間填寫的表單容易失去耐心,用戶又懶又忙。盡量刪除所有不必要的項目,考慮除了讓用戶機械地通過鍵盤在表單上輸入數(shù)據(jù)(比如后續(xù)調(diào)查),是否還有更好的方法收集所需信息。
一站式服務(wù)的設(shè)計理念
表單的終點不是提交,設(shè)計者在設(shè)計時需要抱著為用戶提供一站式服務(wù)的想法,形成流程的閉環(huán),避免用戶中途跳出。一個好的表單設(shè)計不僅要考慮填寫前用戶的指導(dǎo),填寫時及時檢查幫助,還要考慮填寫后的全過程體驗。想想用戶填表的初衷,讓他填表后最快速的得到自己想要的東西。即使暫時拿不到,也需要告訴他相應(yīng)的理由和可以進行的替代操作。(6)提供設(shè)計關(guān)懷
據(jù)不完全統(tǒng)計,網(wǎng)上約有12%的人患有輕度或重度色覺障礙。如果用顏色作為區(qū)分不可點擊文本和可點擊鏈接的唯一元素,可能會讓這些人很難使用。在設(shè)計表單的過程中,我們可以通過添加虛線、使用按鈕或其他形狀來區(qū)分鏈接文本,這樣用戶就可以更清楚地知道哪些區(qū)域是可點擊的。