把表单体验做到极致!11个表单设计的高效技巧。

表单是产品设计中常见且重要的组成部分,对 UX/UI 设计师来说,构建有效的表单至关重要。

经过思考的表单设计,能够为用户带来更好的实用性、包容性,让填写体验更流畅。

交互设计 表单 表单细节 表单设计

让我们一起来看看在表单设计过程中需要注意的技巧和问题点,创建更合理的表单!

1. 最小化字段数量

通常表单中的字段越多,用户完成的可能性就越小。

在表单设计过程中我们要尽可能避免展示非必填的字段,尤其是想引导用户注册或者留资的场景中,避免表单中的某个字段为选填,保证用户最大程度的留资转化。

交互设计 表单 表单细节 表单设计

2. 明确标记可选字段

在同一个表单中,要确保用户清楚哪些字段是必填、哪些是选填的。

用星号标记必填字段是设计师最常用的方法,但用户仍有可能无法很好地理解星号的含义。

因此,简单地用文本(选填)标记某些字段通常不会在视觉上造成负担,并且更清晰。

交互设计 表单 表单细节 表单设计

3. 使用单列布局

尽管单列布局在视觉上可能不太优雅,但可以提高用户理解、减少输入错误,提高整体的转化率。

在单列布局中,用户“遗漏”输入的可能性会更小,因为在填写单列布局的表单时,视线只需要从上至下垂直移动。

交互设计 表单 表单细节 表单设计

当用户错过某个字段时,会破坏用户不断填写表单取得进展的节奏,因为他们需要被迫倒退并填写更早的字段,产生负面体验。

4. 将标签放在表单上方

在单列布局中,难经常看到表单标签放在输入框左侧的情况。

这意味着用户的浏览视线仍然是 Z 字型,而不是简单的垂直向下,这样会增加填写的复杂性,填写过程更缓慢。

交互设计 表单 表单细节 表单设计

5. 对标签和字段进行分组

在表单设计过程中,要确保表单的字段、相关的标签有着清晰的层级分组和间距,并与周围的元素充分分离。

交互设计 表单 表单细节 表单设计

6. 避免将数字拆分为多个输入字段

当填写电话号码、身份证、银行卡、订单号等较长的数字时只需要一个输入字段,避免将数字拆分为多个输入字段。分成多个字段虽然看起来清楚,但需要用户多次点击输入,操作更繁琐。

交互设计 表单 表单细节 表单设计

7. 在移动端中使用默认控件

AndROId 和 iOS 都有用于特定类型数据输入的默认组件,例如日期选择器。

在移动端设计中,尽可能使用这些内置的元素,这样用户会更熟悉原生的选项,表现可能会更好。

交互设计 表单 表单细节 表单设计

8. 保证字段简洁

在设计表单的标签时,目标是最少的字段和最大的清晰度。

如果考虑到某个字段有不确定性,可以使用一些简短的提示文本,明确说明如何填写这个字段。

交互设计 表单 表单细节 表单设计

9. 在按钮上使用准确的描述

在按钮中使用点击后将进行的操作,让用户能更明确知道点击之后的操作。按钮上最常见的描述是“提交”或者“取消”,代表的含义太不够具体。可以考虑使用“注册”、“发送信息”、“创建帐户”等文案。

交互设计 表单 表单细节 表单设计

10. 不要使用占位符作为标签

占位符是指点击输入前在输入框中显示的提示文本。

使用占位符文本作为标签看起来虽然很简洁,但占位符文本的颜色往往是浅灰色,访问性和识别度弱,不够明显。

另外一旦在输入框内填写信息后,占位符标签就会消失,用户可能会忘记这个表单的标签或者输入的具体要求。

交互设计 表单 表单细节 表单设计

11. 使用内联验证来确认进度

使用内联验证来确认用户输入的进度以及输入的内容是否正确。

例如用户填写完成一个字段后,在字段旁出现正确的提示,即时反馈给用户。

交互设计 表单 表单细节 表单设计

最后

以上是在表单设计中高效且实用的设计技巧,希望通过这些内容能让你对表单设计有更多的学习。

慢慢来比较快,如觉得有帮助,

作者:Clip设计夹

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/237313.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月2日 12:03
下一篇 2023年3月2日 12:03

相关推荐

  • UX、UI和网页设计师有什么区别。

    你知道你对设计感兴趣,但你仍然不知道它对你未来的职业意味着什么。你已经开始了你的研究,但你可能仍然不确定这一切意味着什么。您应该是 UX、UI 还是网页设计师?你不知道吗?不用担心!从揭开首字母缩略词的神…

    2023年3月7日
    01
  • 2018年正在流行的UI设计流行趋势

    随着移动端的日益发达,UI设计变得越来越重要,它既能直观地塑造企业形象,同时也成为留住用户的关键。此外,UI设计风格每年都在发生变化,总让设计师有种难以应对的感觉。下面,Inspirr Creation将为大家整理「201…

    2022年6月25日 建站资讯
    0268
  • 韩国UI设计案例借鉴:NAVER的UI设计厉害在哪

    说到韩国UI设计案例借鉴,相信很多人第一时间会想到NAVER(네이버)。 NAVER是着名社交软件平台Line的母公司,也是世界第五大的搜索引擎平台,仅次於Google、Yahoo、Baidu和Bing。 NAVER作为韩国顶级互联网巨头(韩国…

    2022年6月20日 建站资讯
    0367
  • 5000字干货!深度解析B端产品的「美即适用」效应。

    在打造一个产品时,不仅仅需要考虑它的好用与功能价值,同时也应当考虑产品在美感方面的设计,一个美观的设计会影响用户观感。本文将探索美即适用效应以及对产品的影响,希望对你有所启发。为什么会有设计师的存在…

    2023年3月2日 SEO操作
    00
  • 10分钟学会Figma 组件库的搭建和使用。

    背景1. 为什么需要 Figma 组件库当我们在做设计稿的时候,例如做一个按钮,如果没有做成可复用的组件,那后面在其他模块要用到按钮的地方可能又需要重新画,会有很多的重复劳动。又或是另一种场景,我们需要把按钮…

    2023年3月2日 SEO操作
    033
  • 腾讯7000字干货!超详细的全局交互规范制定指南。

    一、如何「理解」交互规范说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:产品设计:保障产品内不同模块的设计一致性,同时提高不同设计师间的设计、…

    2023年3月7日 SEO操作
    06
  • 如何设计B端色彩体系?3个步骤帮你掌握起来。

    编者按:B端设计的色彩体系如何构建?本文从色彩分类、色彩体系、色彩应用3个方面,帮你掌握B端色彩体系的设计基础。中后台管理系统是一种管理工具,用来帮助企业高效、稳定的管理、运营、协作,从而实现降本增效。…

    2023年3月2日 SEO操作
    01
  • 想把表单的用户体验做到极致?这5个细节不容忽视。

    我们每天都在填写各种表单,例如发帖、填单、登录等等。然而,在填写时经常容易出错,例如可能会输错密码。从用户体验角度看,帮助用户尽可能顺利地处理这些错误至关重要。对于我们设计师来说,尤其是现在 B 端设计…

    2023年3月2日 SEO操作
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息