亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO建站 > 建站百科表單設(shè)計(jì)是什么意思?詳解表單設(shè)計(jì)方法、技巧及注意事項(xiàng)

表單設(shè)計(jì)是什么意思?詳解表單設(shè)計(jì)方法、技巧及注意事項(xiàng)

2023-08-30 09:29:24

表單設(shè)計(jì)是什么意思

一、表單設(shè)計(jì)是什么意思

UI設(shè)計(jì)中會(huì)經(jīng)常碰到表單設(shè)計(jì),表單設(shè)計(jì)是指通過對(duì)表單的文字、布局、排版與操作進(jìn)行設(shè)計(jì),從而提高用戶的整體效率與完成度,并且在用戶端也有好的體驗(yàn)。在表單設(shè)計(jì)中,不同的應(yīng)用場(chǎng)景所對(duì)應(yīng)的表單也有所不同。

二、表單的釋義

表單的核心功能是采集數(shù)據(jù)信息,可以看成是采集、傳遞、提交數(shù)據(jù)的中間媒介。其作為獲取用戶輸入的重要交互方式,也承擔(dān)著將問題和答案進(jìn)行配對(duì)的角色。

表單通常由標(biāo)簽、輸入域、填寫提示、操作按鈕等幾部分組成。

1、標(biāo)簽

告訴用戶該表單需要填寫什么類型的信息,通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會(huì)放置于文本輸入框內(nèi),激活輸入框,則消失。

標(biāo)簽一般為每個(gè)輸入項(xiàng)的名稱(eg:賬號(hào)、身份證號(hào)、服務(wù)器名稱)。按所要填寫信息的必要性又可分為必填項(xiàng)和非必填項(xiàng)。顧名思義,必填項(xiàng)是指用戶必須要輸入有效的文本信息,否則,該表單就不能正常提交、保存等操作;非必填項(xiàng)是指該項(xiàng)信息用戶可填可不填,根據(jù)用戶的意愿和需求度來自愿選擇填亦或不填。

2、輸入域

用來收集用戶操作的信息,每個(gè)輸入域字段包含一類型信息。

輸入域不僅僅是文本輸入框,從交互組件的角度來看,其包括文本輸入框、單選框、復(fù)選框、開關(guān)、選擇器、步驟條、上傳、Tab切換(主要指按鈕型)、滑塊、步驟條等多種。

3、填寫提示

幫助用戶有效正確填寫信息的引導(dǎo)內(nèi)容或反饋內(nèi)容。提示一般可分為引導(dǎo)提示和反饋提示兩類。引導(dǎo)提示發(fā)生在用戶輸入前,引導(dǎo)用戶正確輸入信息或?qū)斎胄畔⒌囊筮M(jìn)行說明。反饋提示發(fā)生在輸入中或輸入后,界面根據(jù)用戶的輸入而顯示的提示信息。

4、操作按鈕

操作按鈕是指填寫完表單各項(xiàng)內(nèi)容后,所要進(jìn)行的操作動(dòng)作來結(jié)束當(dāng)前操作流程或在流程之中或之后開啟新的功能操作。操作按鈕包括提交按鈕、保存按鈕、復(fù)位按鈕和一般按鈕;用于將表單數(shù)據(jù)傳送到服務(wù)器上。

表單的組成

表單的組成

根據(jù)輸入流程,可將用戶的輸入過程分為輸入前、輸入中、輸入后。

三、表單設(shè)計(jì)原則與目標(biāo)

1、表單設(shè)計(jì)目標(biāo)

幫助用戶高效、準(zhǔn)確、一致、安全的完成數(shù)據(jù)錄入與數(shù)據(jù)編輯。

2、表單設(shè)計(jì)原則

(1)、高效性

通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務(wù)。

(2)、準(zhǔn)確性

表單的準(zhǔn)確性表現(xiàn)有很多,主要指不要讓你傳達(dá)的信息產(chǎn)生歧義,讓所有的用戶看到這個(gè)信息后的用戶行為保持一致,規(guī)避用戶犯錯(cuò)。

(3)、一致性

針對(duì)同一產(chǎn)品下的頁面風(fēng)格/字號(hào)/組件使用都要保持一致,避免給用戶造成混淆增加理解成本。

(4)、安全感

要有一定的危險(xiǎn)操作保護(hù)措施,例如,返回不保存表單的危險(xiǎn)提示或即時(shí)保存表單的安全操作防止數(shù)據(jù)丟失;同時(shí)針對(duì)不同的使用場(chǎng)景增加返回上一步、重置填寫、撤銷填寫等幫助用戶修改錯(cuò)誤的后悔藥功能。

四、表單頁面呈現(xiàn)樣式

表單頁面的展示形式有三種頁面跳轉(zhuǎn)、彈窗輸入、就地編輯。影響頁面形式的因素包括表單輸入容量及操作流程主次關(guān)系(即親密度)。

表單頁面呈現(xiàn)樣式

(1)、頁面跳轉(zhuǎn)

一個(gè)功能的主要操作流程在一個(gè)頁面中展示,保證主要功能的操作的流暢度。同時(shí),若輸入內(nèi)容較多,建議采用頁面跳轉(zhuǎn)。頁面跳轉(zhuǎn)的信息承載能力強(qiáng),對(duì)反饋的及時(shí)性要求不高;體量感比較重,給人感覺穩(wěn)定性更高一些,特別重要的功能表單填寫確認(rèn)建議用頁面跳轉(zhuǎn)。

頁面跳轉(zhuǎn)包含兩種:新頁面打開和當(dāng)前頁面跳轉(zhuǎn)。

新頁面打開為主要流程步驟中的分支流程,不會(huì)影響用戶對(duì)主流程的繼續(xù)操作,頁面功能具有一定的獨(dú)立性。

當(dāng)前頁面跳轉(zhuǎn)則為流程步驟中的關(guān)鍵步驟,提示用戶已進(jìn)入下一步驟。頁面間的跳轉(zhuǎn)體現(xiàn)了產(chǎn)品的基本使用流程,關(guān)鍵流程關(guān)鍵路徑建議在當(dāng)前頁面打開,讓產(chǎn)品流程更加清晰,更少的打開頁減少多余信息對(duì)用戶注意力的分散,讓用戶聚焦在當(dāng)前頁面的信息中。

(2)、輸入彈窗

彈窗樣式的輸入表單詩當(dāng)前頁面的分支操作,體現(xiàn)了頁面間的層級(jí)關(guān)系。輸入彈窗樣式的表單,輸入內(nèi)容的多少處于頁面跳轉(zhuǎn)和就地編輯兩種樣式之間。內(nèi)容稍多,交互頁面流程不適合就地編輯,同樣也尚未達(dá)到新頁面的程度,建議選擇輸入彈窗。

用戶在不離開當(dāng)前頁的情況下繼續(xù)插入性操作,為流程步驟中的分支行為,可由用戶選擇是否進(jìn)行,不覆蓋用戶已閱讀內(nèi)容。輸入彈窗輕量化,信息承載較頁面跳轉(zhuǎn)弱、較就地編輯強(qiáng),輸入內(nèi)容數(shù)量有較大的彈性空間。

該類型的表單會(huì)打斷當(dāng)前的主操作流程需要及時(shí)響應(yīng),帶給人的感受更局促一些,因此輸入內(nèi)容不宜過多,且不能過多地帶離用戶的注意力,否則會(huì)給用戶的主操作流程造成較強(qiáng)的割裂,降低輸入的流暢度。

(3)、就地編輯

就地編輯是輕量型信息采集表單,適用于輸入內(nèi)容較少,適用頻率較低,同時(shí)屬于主功能分支的場(chǎng)景。其優(yōu)點(diǎn)在于操作便捷,隨時(shí)啟用與退出,能夠保證用戶對(duì)主要功能的操作流暢度。

就地編輯一般為嵌入在列表內(nèi)、卡片中,信息展示區(qū)域通過雙擊或點(diǎn)擊特定的操作按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。其存在的意義在于完善或者增強(qiáng)主功能的操作,而不是打斷。

就地編輯

五、表單設(shè)計(jì)方法

1、標(biāo)簽樣式

根據(jù)標(biāo)簽與輸入域的位置關(guān)系,其對(duì)齊方式可分為:右對(duì)齊、左對(duì)齊、頂對(duì)齊三種。每一種對(duì)齊方式都有一定的優(yōu)點(diǎn)與局現(xiàn)性,因此在合適的場(chǎng)景下選擇合適的標(biāo)簽樣式,可以提升用戶的輸入效率。

標(biāo)簽樣式

標(biāo)簽樣式

標(biāo)簽樣式對(duì)比說明

標(biāo)簽樣式對(duì)比說明

(1)、右對(duì)齊

當(dāng)既要減少垂直空間,又要加快填寫速度的場(chǎng)景,使用右對(duì)齊。采用右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間,比頂部對(duì)齊標(biāo)簽的表單的時(shí)間長(zhǎng),但比左對(duì)齊方式所需的瀏覽時(shí)間短。頁面高度有限的話有限公司推薦這種對(duì)齊方式。

優(yōu)點(diǎn):節(jié)約垂直空間。

缺點(diǎn):降低可讀性,標(biāo)簽長(zhǎng)度和輸入框彈性小。

舉個(gè)栗子:騰訊藍(lán)鯨的故障自愈平臺(tái)的告警收斂的新建收斂規(guī)則表單頁面,采用了左對(duì)齊的布局,方便用戶快速操作,完成新建收斂規(guī)則表單的填寫。

右對(duì)齊案例

右對(duì)齊案例

(2)、頂對(duì)齊

希望用戶快速填寫表單,完成任務(wù)的場(chǎng)景使用頂部對(duì)齊。頂對(duì)齊方式對(duì)眼球移動(dòng)的需求比其他對(duì)齊方式要更少。移動(dòng)端表單頁面多使用此種形式,手機(jī)為下拉式交互,垂直高度不受限制。

優(yōu)點(diǎn):有最快的瀏覽和處理速度;標(biāo)簽長(zhǎng)度彈性大。

缺點(diǎn):非常占垂直空間。

(3)、左對(duì)齊

希望用戶放慢速度,仔細(xì)思考表單中的每個(gè)輸入框的場(chǎng)景使用左對(duì)齊類型。采用左對(duì)齊標(biāo)簽方式的表單是三者之中所需瀏覽時(shí)間最長(zhǎng)的,但這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀,仔細(xì)考慮的時(shí)候使用(如一些重要的輸入)。

優(yōu)點(diǎn):文字開頭按閱讀視線對(duì)齊,方便閱讀,節(jié)約垂直空間。

缺點(diǎn):填寫速度慢,標(biāo)簽長(zhǎng)度和輸入框彈性小。

舉個(gè)栗子:騰訊云,購買云產(chǎn)品的表單界面,讓用戶細(xì)看、謹(jǐn)慎選擇,采用了左對(duì)齊的方式。

左對(duì)齊案例

左對(duì)齊案例

2、輸入域樣式

輸入域是表單的主題與核心。

(1)、組件樣式

表單常見的組價(jià)樣式包括文本框、文本域、選擇器、開關(guān)、Checkbox、Radio、步驟條、滑塊、上傳、標(biāo)簽頁等。對(duì)于組建的選用,在下文中將會(huì)做詳細(xì)探討。

輸入組件間距不宜窄,較大的文字輸入框、適度的留白空間會(huì)讓人更有填寫的欲望。在表單間距處理上,各區(qū)塊之前的間距,如單列中一組字段輸入框與另一組的間距,雙列中左一列及右一列的間距需要尤其注意。

(2)、單例與多列布局

在web頁面中,由于頁面的關(guān)系,導(dǎo)致跳轉(zhuǎn)頁面與彈窗的橫向空間較大,縱向空間不足,若出現(xiàn)較多的輸入內(nèi)容時(shí),且不能采用分模塊、分步驟、高級(jí)等交互布局時(shí),有的設(shè)計(jì)師會(huì)采用雙列或多列表單,以提高橫向空間的利用,這也是可以接受的。此時(shí),要注意列與列間距的合理性以及遵守用戶的視覺流,可以參照菲茲定律。

單例與多列布局

但是作為表單,單列表單的瀏覽及填寫效率是最高的。用戶的視覺流較為順暢,可以提升填寫效率,同時(shí)能夠減少用戶的疲勞度。因此,建議表單多采用單列布局。

(3)、分模塊

對(duì)于內(nèi)容過多的表單輸入組件,分類、分模塊的排版方式讓用戶感覺更好,不是密密麻麻一大片,有條理。用戶可以在填寫好一段內(nèi)容后進(jìn)行心理上停頓休息,減少視覺疲勞和心理壓力。

舉個(gè)栗子:網(wǎng)易七魚客服平臺(tái)的基礎(chǔ)設(shè)置表單頁面,分為歡迎語設(shè)置、未選擇分類提示、在線會(huì)話關(guān)閉二次確認(rèn)、重復(fù)咨詢識(shí)別、會(huì)話計(jì)時(shí)設(shè)置、服務(wù)時(shí)間設(shè)置、轉(zhuǎn)接確認(rèn)設(shè)置、會(huì)話接入提示等多個(gè)小模塊。層次清晰、分明。

分模塊案例

分模塊案例

(4)、分步驟

對(duì)于內(nèi)容過多的表單輸入組件,又有著明確的操作先后關(guān)系,可以選用分步驟,每屏僅展示該步驟下的表單輸入組件,同時(shí)校驗(yàn)反饋也可分步進(jìn)行。

舉個(gè)栗子:一般注冊(cè)表單被分為賬號(hào)設(shè)置、完善資料、注冊(cè)完成3個(gè)步,讓用戶分步填寫。每屏僅展示當(dāng)前步驟下的輸入組件,讓用戶分步進(jìn)行,明確用戶行為,減少用戶的心理負(fù)擔(dān)。反饋校驗(yàn)及時(shí),也避免了填寫完才發(fā)現(xiàn)其中某項(xiàng)輸入不正確。

(5)、高級(jí)(非重要必填項(xiàng)默認(rèn)收起,點(diǎn)擊展開)

對(duì)于表單內(nèi)容很多,且存在一些沒那么重要的非必填項(xiàng),可以選擇默認(rèn)隱藏,用戶有欲望填寫時(shí)點(diǎn)擊展開可進(jìn)行輸入填寫?;蛘咚阉鳁l件太多,默認(rèn)收起,展示更多的信息內(nèi)容;需要搜索時(shí),點(diǎn)擊展開。

舉個(gè)栗子:阿里云的云服務(wù)器 ECS購買表單頁面里的詳細(xì)價(jià)格總覽模塊,搜索表單內(nèi)容項(xiàng)很多,默認(rèn)收起;用戶點(diǎn)擊展開過濾器按鈕,則搜索表單展開。節(jié)約頁面空間,讓用戶在默認(rèn)情況下看到更多列表等其他重要信息。

高級(jí)示例(默認(rèn)收起)

高級(jí)示例(默認(rèn)收起)

高級(jí)示例(展開)

高級(jí)示例(展開)

4、提示樣式

從提示信息所處的位置和提示出現(xiàn)的時(shí)機(jī),提示可分為輸入框內(nèi)提示、輸入框外提示、激活輸入框提示、圖標(biāo)懸停提示及單獨(dú)區(qū)域提示等。根據(jù)前文的分類,提示樣式分為引導(dǎo)提示與反饋提示兩種。

(1)、引導(dǎo)提示

引導(dǎo)提示是對(duì)用戶輸入信息規(guī)則的注釋與說明,在用戶輸入前,輸入框內(nèi)提示、輸入框外提示、激活輸入框提示可歸為引導(dǎo)提示。

可細(xì)分為:全局性提示和定位提示。

● 全局提示:使用場(chǎng)景如下:在告知用戶填寫表單會(huì)帶來怎樣的益處,有利于用戶完善相關(guān)表單內(nèi)容(益處提示)。在登錄頁等字段內(nèi)容較少時(shí)或者提示的內(nèi)容項(xiàng)也不多,一般位于整個(gè)表單的上方(注釋說明)。告知用戶信息采集的用途以及使用保證(安全提示),解除用戶輸入顧慮。

● 定位提示:適用于表單內(nèi)容比較多,字段內(nèi)容較少時(shí),應(yīng)在相應(yīng)錯(cuò)誤位置進(jìn)行提示,幫助用戶快速定位到錯(cuò)誤內(nèi)容。

(2)、反饋提示

反饋提示是頁面系統(tǒng)對(duì)用戶的輸入給與校驗(yàn),并對(duì)校驗(yàn)結(jié)果予以展示的提示形式。反饋提示是根據(jù)用戶輸入而顯示的提示,出現(xiàn)在輸入中與輸入后,可細(xì)分為:即時(shí)校驗(yàn)反饋、局部校驗(yàn)反饋和全局校驗(yàn)反饋。

較為常見的即時(shí)校驗(yàn)反饋是根據(jù)輸入字符數(shù)量而顯示密碼強(qiáng)度,從而時(shí)刻提示用戶當(dāng)前密碼強(qiáng)度是否符合要求。該方式的校驗(yàn)條件多在本地,不需要實(shí)時(shí)向服務(wù)器發(fā)命令,以得到反饋。

● 局部校驗(yàn)反饋:在注冊(cè)賬號(hào)時(shí),輸入完整用戶名以后,提示用戶名是否可用,則為局部校驗(yàn)反饋。校驗(yàn)內(nèi)容存儲(chǔ)在遠(yuǎn)端,程序需要完整的輸入信息到遠(yuǎn)端進(jìn)行檢驗(yàn),并給出反饋。

局部校驗(yàn)主要適用于輸入項(xiàng)較多,且某個(gè)輸入項(xiàng)具有先決條件,同時(shí)決定了接下來的輸入。該方式可以避免不完整輸入的即時(shí)反饋給用戶造成的干擾,同時(shí)可以減少對(duì)服務(wù)器的壓力。一般注冊(cè)、登錄、web端頁面頁面會(huì)采用局部校驗(yàn)反饋。

● 全局校驗(yàn)反饋:多指在輸入完成或者階段性完成時(shí),界面給出的輸入反饋,用戶需要操作觸發(fā)。在用戶操作反饋動(dòng)作按鈕后,界面在相應(yīng)位置(一般為單個(gè)輸入框的下方或右側(cè))一次性給出不合乎要求的反饋提示。

5、操作按鈕形式

操作按鈕:填寫完表單各項(xiàng)內(nèi)容后,所要進(jìn)行的操作動(dòng)作(eg:保存、取消、提交、確定等)。

操作按鈕形式

表單輸入域完成后,必定要進(jìn)行最終的操作反饋,以便讓用戶明確自己所輸入的數(shù)據(jù)信息是否有效留存還是舍棄。操作按鈕無外乎保存、取消、提交、重置、上(下)一步、保存并提交等。

六、表單設(shè)計(jì)技巧

1、 明確告知要輸入的信息內(nèi)容

確保用戶了解要提供什么信息,以及為什么要提供這些信息。

為初級(jí)用戶/偶爾訪問的用戶提供白話作為『標(biāo)簽』,為領(lǐng)域?qū)<姨峁I(yè)術(shù)語作為『標(biāo)簽』。當(dāng)需要用戶提供敏感信息時(shí),通過『輸入提示』來說明系統(tǒng)為什么要這么做。

2、讓用戶能在上下文中獲取信息,幫助他完成輸入

使用『良好的默認(rèn)值』、『結(jié)構(gòu)化的格式』、『輸入提示』、『輸入提醒』等方式,避免讓用戶在空白中完成輸入。

3、標(biāo)簽簡(jiǎn)潔、精確

標(biāo)簽字段簡(jiǎn)潔,既利于標(biāo)簽排版的對(duì)齊,也減輕用戶的閱讀與理解難度。用詞精確可以避免讓用戶有其他的解讀,導(dǎo)致輸入有誤信息。另外,在輸入項(xiàng)較為明確的情況下,標(biāo)簽可省略,如登錄的用戶名和密碼。

4、必填項(xiàng)

必填項(xiàng)一般要有明確標(biāo)識(shí),除非全部是必填項(xiàng),且必填項(xiàng)數(shù)量在7個(gè)以內(nèi)。選填項(xiàng)比較少時(shí),互聯(lián)網(wǎng)產(chǎn)品一般必填項(xiàng)不做標(biāo)識(shí),非必填項(xiàng)后面則標(biāo)注選填字樣。

5、具有容錯(cuò)性

對(duì)錯(cuò)誤敏感,并盡可能寬容,具有容錯(cuò)性。

通過不同的『校驗(yàn)』規(guī)則和形式進(jìn)行反饋,避免用戶在點(diǎn)擊提交后才剛剛開始『校驗(yàn)』,讓用戶提前糾正錯(cuò)誤。依據(jù)『容錯(cuò)格式』,允許用戶以多種格式和語法輸入,例如:用戶在電話號(hào)碼輸入框中多輸入了一個(gè)空格,系統(tǒng)存儲(chǔ)時(shí)可以主動(dòng)刪掉空格,但是不需要告訴用戶這是一個(gè)錯(cuò)誤。

6、精簡(jiǎn)不必要的輸入項(xiàng)

在能完整獲取需要信息的前提下,輸入項(xiàng)越少越好,能夠?qū)τ脩舻妮斎胄畔⑦M(jìn)行充分的利用。例如:讓用戶輸入了身份證號(hào)后,就不要讓用戶再一次輸入生日,此時(shí)可以從用戶的身份證號(hào)中讀取用戶的生日,從而減少用戶的輸入。

7、合理分類

輸入信息的分類,是有效的減少用戶操作疲勞度的方法。分類的維度有多種,根據(jù)表單輸入內(nèi)容的相關(guān)性、內(nèi)容的所屬類別,可以將同類型的數(shù)據(jù)統(tǒng)一輸入,減少用戶輸入信息的跨度,提高輸入效率。

根據(jù)輸入信息的優(yōu)先級(jí)或重要性,進(jìn)行分類,將優(yōu)先級(jí)高的放在前面,優(yōu)先級(jí)低的放到最后或者折疊起來,將較少用到或建議默認(rèn)值的輸入項(xiàng)放到里面,普通用戶可以忽略這部分的輸入。

8、合理分步驟

對(duì)輸入表單進(jìn)行分步驟的處理,可以降低用戶的操作頻率,給與用戶一定的休息空間,用戶會(huì)有階段性的成就感,同時(shí)分步驟的輸入還有利于減少信息的錯(cuò)誤率。

如果輸入表單的內(nèi)容較多,同時(shí)輸入內(nèi)容有邏輯上的先后順序,此時(shí)可以考慮將輸入表單進(jìn)行分步驟處理。

9、主按鈕的禁用原則

當(dāng)輸入框非常少時(shí)(一般少于 3 個(gè)),如果用戶沒有在必填項(xiàng)中輸入內(nèi)容,可禁用『提交』等主按鈕。當(dāng)輸入框非常多時(shí)(超過 5 項(xiàng)以上),不建議禁用主按鈕。

當(dāng)輸入框非常少時(shí),用戶一輸入就會(huì)有反饋,因而主按鈕的禁用規(guī)則非常清晰,容易被用戶理解。

當(dāng)輸入框非常多時(shí)(尤其是輸入項(xiàng)中交叉了必填項(xiàng)和非必填項(xiàng)),整個(gè)反饋鏈路冗長(zhǎng)又復(fù)雜,禁用規(guī)則難以被識(shí)別,容易引起困惑。

10、局部校驗(yàn)和全局校驗(yàn)

局部校驗(yàn)需明確平臺(tái)相關(guān)內(nèi)容不只一處是這種操作方式,要不就會(huì)造成用戶使用上的困擾。全局保存要明確相關(guān)按鈕的清晰程度,如果這個(gè)還需要用戶去尋找,那就是明顯的體驗(yàn)上的問題了。

七、表單設(shè)計(jì)注意事項(xiàng)

1、視覺動(dòng)線避免Z字形

視覺動(dòng)線避免Z字形

在表單中閱讀順序最好是從上到下的,如果是左右的,用戶閱讀體驗(yàn)就是,左右左右左右,用戶動(dòng)線就會(huì)變得比較復(fù)雜,容易產(chǎn)生閱讀疲勞。

2、標(biāo)題使用右對(duì)齊

標(biāo)題使用右對(duì)齊

標(biāo)題進(jìn)行右對(duì)齊可以讓用戶更輕松地瀏覽頁面并為你的表單創(chuàng)建對(duì)稱的視覺層次結(jié)構(gòu)。

3、提示文字顏色不要太重

提示文字顏色不要太重

提示文字不要太重,如果太重用戶潛意識(shí)會(huì)以為是已經(jīng)輸入好的文字。

4、使用單一CTA

CTA按鈕

如果你需要更多的CTA按鈕,建議把它作為輔助按鈕。比你的主CTA不突出。

5、選擇正確的輸入類型

選擇正確的輸入類型

不要什么都用文本字段!將字段的類型與其內(nèi)容相適應(yīng)。有許多內(nèi)容類型有特定的要求,需要特殊處理。

6、輸入字符提示

輸入字符提示

大多數(shù)領(lǐng)域都有某種限制。字符限制、號(hào)碼/日期范圍、電話號(hào)碼等。讓用戶事先了解限制,以防止他們感到困惑和懊惱。

總結(jié)

優(yōu)化猩SEO:表單設(shè)計(jì)是UI設(shè)計(jì)中經(jīng)常會(huì)碰到的,一個(gè)優(yōu)秀的表單設(shè)計(jì)可以提高用戶的整體效率與完成度,并且在用戶端也有好的體驗(yàn),從而幫助用戶將信息發(fā)送到網(wǎng)站或應(yīng)用,以實(shí)現(xiàn)最終目標(biāo)。

參考鏈接:

5個(gè)方面闡述:Web表單設(shè)計(jì) 人人都是產(chǎn)品經(jīng)理

http://www.woshipm.com/pd/1058591.html

如何設(shè)計(jì)一份體驗(yàn)好的表單?來看這篇超全總結(jié)! - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/form-design-5

表單設(shè)計(jì) - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/tag/%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1

修改于2023-08-31

想了解更多建站百科的內(nèi)容,請(qǐng)?jiān)L問:建站百科

本文來源:http://www.sonygallery.com.cn/seojianzhan/17763.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。