南京口碑在前列學(xué)UI的設(shè)計(jì)學(xué)校

南京口碑在前列學(xué)UI的設(shè)計(jì)學(xué)校，南京科迅教育是一家專業(yè)專注于設(shè)計(jì)培訓(xùn)的教育機(jī)構(gòu)，擁有完善科學(xué)的課程體系、雄厚的師資力量、實(shí)戰(zhàn)的教學(xué)方式、優(yōu)質(zhì)的教學(xué)服務(wù)。

南京科迅UI課程研發(fā)團(tuán)隊(duì)調(diào)研發(fā)現(xiàn)，當(dāng)前同類培訓(xùn)課程幾乎都設(shè)置了4個(gè)月的學(xué)習(xí)內(nèi)容,為滿足企業(yè)用人需求我們的團(tuán)隊(duì)把課程研發(fā)更深入，讓您學(xué)完本課程就業(yè)起薪更高，發(fā)展?jié)摿Ω?。UI課程涵蓋平面、網(wǎng)頁、電商、UI、AE動(dòng)效、產(chǎn)品交互等多種方向，同時(shí)重點(diǎn)培養(yǎng)UI界面與產(chǎn)品交互設(shè)計(jì)能力，讓學(xué)員成為全能設(shè)計(jì)師，實(shí)現(xiàn)全行業(yè)就業(yè)。

表單設(shè)計(jì)中，各種設(shè)計(jì)模式和技巧已經(jīng)越來越成熟了。在諸多設(shè)計(jì)技巧當(dāng)中，懸浮標(biāo)簽這一設(shè)計(jì)手法，應(yīng)該是對(duì)于用戶體驗(yàn)提升zui明顯的一種。今天小編主要給大家分享ui界面表單設(shè)計(jì)內(nèi)容，希望對(duì)你們有幫助!

1.固定標(biāo)簽允許用戶瀏覽更多內(nèi)容

雖然只有四個(gè)字段，但是當(dāng)你采用頂部固定標(biāo)簽時(shí)，用戶實(shí)際上需要瀏覽更多的內(nèi)容，因?yàn)橛?個(gè)元素要查看。

要輸入的標(biāo)簽和空白字段是完全分開的8個(gè)元素，當(dāng)用戶的視覺在處理信息時(shí)，會(huì)自然感到信息相對(duì)密集，并且要處理的內(nèi)容相對(duì)多。

2.提交數(shù)據(jù)前的zui終檢查

表單填寫完成后，用戶通常會(huì)在提交前檢查其內(nèi)容的正確性。用戶必須上下掃描輸入內(nèi)容和相應(yīng)的標(biāo)簽來匹配，以確保填寫的字段是正確的。這時(shí)，輸入框的邊界會(huì)擋住視線，即使空間關(guān)系是根據(jù)相關(guān)元素的鄰近原則設(shè)計(jì)的，在這個(gè)過程中也不會(huì)顯得如此清晰和明顯，所有這些都將使zui終的檢查工作變得不那么迅速。

此外，還有一種設(shè)計(jì)模式，是讓標(biāo)簽作為占位符放置在輸入框中，當(dāng)用戶單擊輸入時(shí)，標(biāo)簽會(huì)自動(dòng)消失。這種設(shè)計(jì)很簡單，但是用戶在輸入時(shí)很容易忘記需要輸入哪些字段，也會(huì)導(dǎo)致問題。

第三種解決方案是我們現(xiàn)在所說的懸掛標(biāo)簽，它結(jié)合了前兩種方法的優(yōu)點(diǎn)，并成功地避免了兩種方法的缺點(diǎn)，減少了模式的視覺障礙，并且保持了簡約的設(shè)計(jì)。同時(shí)，當(dāng)用戶輸入時(shí)，標(biāo)簽將自動(dòng)浮動(dòng)不會(huì)消失，不會(huì)讓用戶迷茫。

3.字段和焦點(diǎn)

在表單設(shè)計(jì)中，視覺焦點(diǎn)控制也是一個(gè)非常重要的因素。當(dāng)用戶在輸入過程中連續(xù)在輸入框和鍵盤之間切換時(shí)，在輸入完成后檢查輸入內(nèi)容，以確保正確填寫所有字段。

在這種情況下，我們可以比較前面提到的三種模式下的視覺識(shí)別程度:

一種是頂部固定標(biāo)簽設(shè)計(jì)，字段突出，標(biāo)簽的識(shí)別度不足;

第二種是當(dāng)用戶輸入時(shí)，字段消失。在這種模式下，字段足夠突出，但文字標(biāo)簽完全不見，用戶無法判斷輸入內(nèi)容是否滿足要求;

第三種是浮動(dòng)標(biāo)簽，標(biāo)簽和字段內(nèi)容有顏色和大小的區(qū)別，而邊框和標(biāo)簽圍繞著字段，主次分明。

4.提交時(shí)報(bào)告信息出錯(cuò)

在這三種模式下，當(dāng)用戶輸入錯(cuò)誤時(shí)，表單需要立即報(bào)告錯(cuò)誤，并讓用戶調(diào)整內(nèi)容進(jìn)行填寫。然而，在這種要求下，頂部固定標(biāo)簽和浮動(dòng)標(biāo)簽的設(shè)計(jì)模式可以更清晰地傳遞錯(cuò)誤報(bào)告信息，而隱藏標(biāo)簽的設(shè)計(jì)只能**輸入框的顏色來識(shí)別，相對(duì)識(shí)別性較差。