編者按：在表單設(shè)計(jì)中，長(zhǎng)表單一直都是比較難搞的一個(gè)門(mén)類(lèi)，尤其是在移動(dòng)端的使用場(chǎng)景之下，則更加難以平衡，尤其是要考慮到它的可用性和易用性。這篇文章出自資深設(shè)計(jì)師 Saadia Minhas 之手，她結(jié)合自己豐富的工作經(jīng)驗(yàn)總結(jié)了長(zhǎng)表單的設(shè)計(jì)當(dāng)中，最關(guān)鍵的 5 個(gè)步驟，如果你遵循這些注意事項(xiàng)，可以迅速地設(shè)計(jì)出頗為不錯(cuò)的長(zhǎng)表單。

設(shè)計(jì)用戶(hù)友好的表單對(duì)于用戶(hù)體驗(yàn)設(shè)計(jì)師來(lái)說(shuō)是一項(xiàng)挑戰(zhàn)。表單越長(zhǎng)，難度就越大。在移動(dòng)端上，這種難度會(huì)更高。

由于移動(dòng)設(shè)備的屏幕尺寸有限，因此平衡可用性和功能性至關(guān)重要，不能讓用戶(hù)感到不知所措。在小屏幕的單列布局上組織輸入內(nèi)容字段對(duì)于 UX 設(shè)計(jì)師來(lái)說(shuō)還是具有一定挑戰(zhàn)性的。

接下來(lái)，我會(huì)展示我所總結(jié)梳理的5個(gè)步驟，用好它們能使移動(dòng)端上的長(zhǎng)表單更加用戶(hù)友好，以便用戶(hù)可以輕松地與它們交互。

步驟 1：跳過(guò)可選/不必要的字段

首先仔細(xì)檢查表單中的所有字段。

識(shí)別并刪除可選的或無(wú)法收集有用信息的字段內(nèi)容。

只關(guān)注所需和必要的輸入字段。

如果你已經(jīng)設(shè)計(jì)了表單的桌面版本，那么這是一個(gè)很好的機(jī)會(huì)來(lái)減少不必要的字段并設(shè)計(jì)優(yōu)化版的表單。

「盡可能少地向用戶(hù)提問(wèn)?！?/p>

不要為「名字」和「姓氏」提供單獨(dú)的字段，而是提供一個(gè)「全名」的字段。

如果可選字段沒(méi)有收集有用的信息，可以直接去掉它們。

步驟 2：采用漸進(jìn)式呈現(xiàn)的策略

確定必要的字段后，然后以用戶(hù)友好的方式來(lái)呈現(xiàn)它們。

使用漸進(jìn)式呈現(xiàn)的方法來(lái)動(dòng)態(tài)地展示字段。

不要一次顯示所有內(nèi)容和字段，而只顯示與用戶(hù)之前的輸入或選擇相關(guān)的字段內(nèi)容。

此方法通過(guò)跳過(guò)禁用不相關(guān)的字段來(lái)防止出現(xiàn)混亂。

「僅顯示與用戶(hù)之前的選擇相關(guān)的字段?！?/p>

以緊湊形式顯示字段，僅顯示相關(guān)和必填字段。

步驟 3：使用移動(dòng)端的原生控件

桌面控件通常會(huì)占用更多的屏幕空間，從而導(dǎo)致表單變得冗長(zhǎng)。

另一方面，使用原生控件旨在充分利用小屏幕尺寸，提高可用性和交互的效率。

避免使用傳統(tǒng)的長(zhǎng)下拉菜單，因?yàn)樗鼈冊(cè)谝苿?dòng)設(shè)備上會(huì)顯得繁瑣。

「使用原生控件優(yōu)化你的移動(dòng)端表單?！?/p>

不要在移動(dòng)表單中使用步進(jìn)控件。而是使用優(yōu)化后的移動(dòng)端控件來(lái)選擇數(shù)字。

使用有助于對(duì)表單更友好的移動(dòng)端控件。

避免使用較長(zhǎng)的下拉菜單。使用系統(tǒng)原生的移動(dòng)端控件。

步驟 4：對(duì)相關(guān)字段進(jìn)行分組顯示

一旦確定了必要的內(nèi)容字段和控件類(lèi)型，下一步就是有效地安排它們的排版和位置。

不要將表單拆分為多個(gè)步驟，而是將相關(guān)字段在視覺(jué)上分組在一起。

這種方法優(yōu)化了屏幕空間，并幫助用戶(hù)更好地理解表單的結(jié)構(gòu)和流程。

「清晰的分組使表單更有條理，并減少用戶(hù)的認(rèn)知負(fù)荷?！?/p>

將相關(guān)字段組合在一個(gè)表單中，使其更有條理且更易于理解。

步驟 5：將表單分為幾個(gè)步驟

如果你的表格看起來(lái)仍然很長(zhǎng)，可以考慮將其分成多個(gè)步驟。

將字段組織成邏輯步驟，清晰標(biāo)記每個(gè)步驟并使用數(shù)字或描述性標(biāo)題來(lái)指導(dǎo)用戶(hù)。

包括一個(gè)進(jìn)度指示器，顯示當(dāng)前步驟以及剩余步驟數(shù)。

「多步驟表單讓管理大量信息變得更加容易。用戶(hù)可以一次關(guān)注一組表單的內(nèi)容?！?/p>

使用多步驟表格來(lái)管理大量信息。

創(chuàng)建用戶(hù)友好的長(zhǎng)移動(dòng)表單需要注重細(xì)節(jié)并采用用戶(hù)至上的方法。

這些步驟將幫助你簡(jiǎn)化長(zhǎng)移動(dòng)表單的設(shè)計(jì)并提高整體用戶(hù)滿(mǎn)意度。

陳子木