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

設計用戶友好的表單對于用戶體驗設計師來說是一項挑戰(zhàn)。表單越長，難度就越大。在移動端上，這種難度會更高。

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

接下來，我會展示我所總結梳理的5個步驟，用好它們能使移動端上的長表單更加用戶友好，以便用戶可以輕松地與它們交互。

步驟 1：跳過可選/不必要的字段

首先仔細檢查表單中的所有字段。

識別并刪除可選的或無法收集有用信息的字段內容。

只關注所需和必要的輸入字段。

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

「盡可能少地向用戶提問?！?/p>

不要為「名字」和「姓氏」提供單獨的字段，而是提供一個「全名」的字段。

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

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

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

使用漸進式呈現(xiàn)的方法來動態(tài)地展示字段。

不要一次顯示所有內容和字段，而只顯示與用戶之前的輸入或選擇相關的字段內容。

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

「僅顯示與用戶之前的選擇相關的字段。」

以緊湊形式顯示字段，僅顯示相關和必填字段。

步驟 3：使用移動端的原生控件

桌面控件通常會占用更多的屏幕空間，從而導致表單變得冗長。

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

避免使用傳統(tǒng)的長下拉菜單，因為它們在移動設備上會顯得繁瑣。

「使用原生控件優(yōu)化你的移動端表單。」

不要在移動表單中使用步進控件。而是使用優(yōu)化后的移動端控件來選擇數(shù)字。

使用有助于對表單更友好的移動端控件。

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

步驟 4：對相關字段進行分組顯示

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

不要將表單拆分為多個步驟，而是將相關字段在視覺上分組在一起。

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

「清晰的分組使表單更有條理，并減少用戶的認知負荷。」

將相關字段組合在一個表單中，使其更有條理且更易于理解。

步驟 5：將表單分為幾個步驟

如果你的表格看起來仍然很長，可以考慮將其分成多個步驟。

將字段組織成邏輯步驟，清晰標記每個步驟并使用數(shù)字或描述性標題來指導用戶。

包括一個進度指示器，顯示當前步驟以及剩余步驟數(shù)。

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

使用多步驟表格來管理大量信息。

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

這些步驟將幫助你簡化長移動表單的設計并提高整體用戶滿意度。

陳子木