恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI表单设计终极指南
4.8°
自译外文 / 经验/观点 / / 原作者: 未知 / 举报
706 7 7 1

2021-08-18

了解如何改进数字表单的设计。

这些最佳实践有助于在设计表单时提供速记。确保始终牢记您的上下文,以确定最佳演示文稿。与设计中的大多数事情一样,最佳实践通常也有例外。

使用标题标题对于可访问性是必不可少的。屏幕阅读器将每个标签传达给用户。如果没有适当的标签,许多人无法访问表格。


避免使用占位符作为标题使用占位符作为标题会给短期记忆带来负担。一旦用户开始输入,标题就会消失,用户必须清除输入文本才能再次显示占位符标题。

当占位符太亮或太暗时,它们会产生额外的问题。当太暗时,占位符可能会被误认为是填充输入。太亮时,某些用户可能看不到占位符。


保持标题简短尽可能避免使用长标题,以便表单易于阅读和扫描。


将字段长度和结构与预期输入匹配

字段的长度提供了答案的范围。 将此用于具有定义字符数的字段,如电话号码、邮政编码等。


表单域应该看起来像表单域在设计表单时,创造力通?;岬贾虏焕慕峁???此拼葱碌南敕ㄉ踔量梢晕澜缟献畲蟮淖橹?,并降低数百甚至数十亿人的可用性。在发现许多用户不知道他们可以与输入进行交互后,谷歌在 2017 年悄悄改变了它的Material设计文本字段。

当涉及到输入字段时,请坚持标准设计约定。如果您决定重新发明轮子,请确保进行彻底的可用性测试。


将表单域与其他元素区分开来

表单域应该在视觉上传达其功能。确保在其他 UI 元素之间添加足够的差异,以便用户无需猜测。


使用适当的输入类型和标签

输入类型使表单更易于访问并增强用户体验。例如,使用正确的输入类型会调用移动设备上的相应键盘(数字与字母)。

设计人员和开发人员通?;岷雎砸恍┘虻サ氖虑?,例如使用收音机而不是复选框来回答有多种选择但只有一个答案的问题。


表格应该是一列一栏表格更易于扫描并且更适合移动显示。多列会使用户紧张并导致他们意外跳过字段。

与大多数最佳实践一样,此规则也有例外(例如此列表中的下一个)。确保始终牢记您正在设计的上下文以确定最佳演示文稿。


逻辑上一起的字段应该是内联的堆叠姓名、地址和付款信息等相关字段会导致不必要的摩擦,并可能中断用户流程。


省略不需要的字段省略可选字段并考虑其他收集数据的方法。总是问自己这个问题是否可以推断、推迟或完全排除。


使操作按钮定义任务指向提交按钮的文本应该清楚简洁地描述它将调用的操作。用户永远不应该对按下后会发生什么感到困惑。


将标题与其输入分组显示带有相应输入的标签,以便用户清楚他们正在填写哪个字段。错误通常发生在用户上下滚动页面并进行错误关联时。


避免全部大写

这是句子大小写和标题大小写之间的风格问题,但全部大写从来都不是一个好主意。所有的大写字母都很难阅读、扫描,而且看起来很讨厌。


垂直显示复选框和单选项垂直显示时,可以更轻松地扫描复选框和单选选项。但是,展示带有相关图形的选项可以为设计增加额外的维度,从而无需垂直展示。


如果 < 6,则显示所有选择选项将选项放置在下拉选择器中会隐藏选项,并且需要单击两次才能选择一个选项。当有超过 5 个选项时使用下拉选择器,当超过 25 个选项时在下拉列表中合并搜索。

但是,如果空间有限,例如在某些内联编辑情况下,可以为 6 个以下的选项使用下拉选择器。


内联显示错误尽量通过简洁明了的方式避免错误。当用户出错时,向用户展示错误发生的位置,提供原因,并说明如何修复它。


按属性分组创建逻辑组,以便用户可以更快地解释表单中询问的内容并批量管理请求。


区分主要动作和次要动作

使表单的主要操作(例如提交)比次要选项更突出,以避免错误。并始终问问自己是否需要采取次要行动。


包含多步骤表单的进度指示多步骤表单,又名表单向导,应该指示进度,以便用户知道他们在哪里以及将要发生什么。


避免在模态框上使用模态框

需要多个模态的交互可能会导致用户错误??悸窃谀L诮心诹嗉?。


始终考虑可访问性

很多时候,设计师不会检查他们的设计的实现,以确保他们满足可访问性基准。

Powered by Froala Editor

创建于:2021-08-18
收藏

7人已收藏

Talon

前迅雷高级UI设计师

  • 26

    作品

  • 71

    粉丝

  • 10

    关注

  • UI网格最佳实践
  • 使UI图片素材更有设计感的技巧
  • 5 种方法让手机号召性用语按钮变得直观
  • 如何为你的网站选择颜色

猜你喜欢

    Talon

    Talon

    前迅雷高级UI设计师

    老马识途一鸣惊人原创达人勤学标兵lv.1收藏家lv.2
    • 71

      粉丝

    • 54.5

      人气

    • 1100

      颜值

    作品

      最新推荐

      UI网格最佳实践

      50 0 0

      相关佳作
      换一换

        Talon

        点赞:7

        收藏:7

        评论:1

        UI表单设计终极指南

        你确定要举报UI表单设计终极指南?

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年08月18日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码