专栏首页无原型不设计绝无仅有!2019年最全的UI设计之输入字段剖析

绝无仅有!2019年最全的UI设计之输入字段剖析

以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器

今天,我想谈谈UI设计中最常用的一个设计元素 - 输入字段。输入字段允许用户在UI中输入文本。它们通常出现在表单和对话框中。

本文将为大家揭秘最佳的输入字段设计技巧以及元素,一起来看看吧。

输入字段包含以下6个部分:

1. 容器字段

2. 前导图标(可选元素)

3. 标签文本

4. 占位符 / 输入文本

5. 关闭图标(可选元素)

6. 帮助文本 / 错误文本(可选元素)

1. 容器字段

容器的大小应与用户预期输入成正比

在单行字段中,当光标到达右侧字段边缘时,比输入行长的文本会自动向左滚动。用户眼睛隐藏的文本越多,他们验证输入的难度就越大。理想情况下,用户应该看到所有输入内容,而无需滚动输入字段。

左:容器太紧。右:适当大小的容器

字段宽度也需要符合用户期望 - 它传达需要输入多少字段。例如,如果表单中有ZIP输入字段,并且你知道ZIP应该有5位数字,那么最好不要使字段太宽。

容器应易于被发现

输入字段应该突出并指示用户可以输入信息。容器和周围区域之间应该有足够的对比度。

用户应该一目了然地了解该字段的状态

输入文本字段可以具有以下某个状态:默认,聚焦,错误和禁用。应明确区分所有状态。

输入字段的默认与禁用状态

不要将文本字段设计为与按钮类似

UI元素的视觉外观在解释其含义的过程中起着关键作用。一个物品的外观可以使用户了解他们如何与之交互。这就是为什么让输入字段看起来像输入字段,而不是按钮或任何其他UI元素,这个是至关重要的。

不要让搜索看起来像按钮的输入字段

根据应用程序的UI设计,为容器选择对应的视觉样式

应该为容器使用圆角或方角吗?这个问题没有一个标准的答案。应该选择最适合你应用程序的视觉风格的产品。

2. 前导图标

虽然在某些情况下,前导图标是可选元素,但可以通过在输入框旁边引入相关图标来创建更好的用户体验。好的图标可帮助用户一目了然地了解该字段的含义(用户无需阅读标签)。

此输入字段要求输入用户ID

3. 标签文本

标签文本用于通知用户文本字段请求的信息。每个文本字段都应该有一个标签。

清晰标签

标签的最终目的是帮助用户一目了然地了解所需的信息。因此,编写清晰明了的标签总是对的。

字数

标签不是帮助文本。避免长标签;使用简洁,简短和描述性标签(一两个字),以便用户可以快速扫描你的表单。

标签文本应始终可见

标签文本有两种常用的方法:

顶部对齐标签 - 位于容器顶部附近的标签。

浮动标签。当用户与字段交互时,标签位于容器的顶部。

这两种方法在用户体验方面都很好,你应该选择最符合你风格的方法。

标签文本不应被截断

用户需要花费额外的时间来解码截断标签的含义。

标签文本不应占用多行

如果你需要在字段的上下文中提供其他信息,请考虑使用帮助文本。

4. 占位符/输入文本

占位符是用户在与字段交互之前看到的文本。输入文本是用户在文本字段中输入的文本。

注意占位符文本的使用

为占位符选择正确的文本非常重要。例如,如果你要求用户提供城市,请不要将城市名称用作占位符。它会误导用户认为占位符文本是一个条目。

必要时提供输入格式

不要让用户猜测他们应该使用哪种格式的字段。预先说明这些信息。

左:不清楚这个字段的格式是什么。右:占位符中提供了正确的格式

在某些情况下,最好使用自动格式化 - 该字段会自动调整用户提供的信息(根据格式)。它使得在表单中验证信息变得更加容易。

聚焦状态

你需要使用视觉效果突出显示活动字段。

当字段处于活动状态时,始终显示光标。光标应指示当前用户在该字段中的位置。它可以防止用户进行不必要的操作。

提供前缀/后缀

当字段具有某种度量时,前缀和后缀很有效。例如,金额的输入字段(前缀或后缀可以表示货币)或权重(后缀可以表示质量单位)。

设置默认值

最好避免静态默认值,除非你绝对确定你的大部分用户(比如说95%)会选择特定值。特别是如果来自该领域的信息对你很重要。为什么?因为人们快速扫描表单,许多人会忽略已经有值的字段。

此原则的唯一例外是智能默认值。智能默认设置可以使用户更快更准确地完成表单。例如,根据用户的地理位置数据预先选择用户的国家/地区。但是,你仍应谨慎使用这些,因为用户倾向于保留预先选择的字段。

5. 关闭图标

关闭图标是一个具有强大功能的小图标 - 它可以帮助降低交互成本。

'清晰'的关闭图标

显示此图标可帮助用户在一次点击中删除字段中的文本。

注意容器右侧的“交叉”图标。当用户点击此图标时,输入将被删除

'交叉'或'检查'图标

如果你使用内联验证,则可以使用关闭图标通知用户有效/无效输入。

当用户提供不正确的信息时,你还可以显示错误消息。应在容器下方显示错误消息。在修复错误之前,用户应该可以看到错误消息。

附注:良好的错误消息不应仅仅说明用户输入无效的事实;它应该提供有关如何解决问题的上下文说明。

眼睛图标

对于收集密码的输入字段,你可以显示“眼睛”图标,以允许用户查看他们键入的内容。

语音输入图标

麦克风图标表示可以为用户提供语音输入。

6. 帮助文本/错误文本

帮助文本充当辅助元素 - 它提供有关输入字段的其他信息,例如:

  • 如何使用用户提供的信息
  • 信息要求(即密码设置指南)

在某些情况下,帮助文本可以与引导用户的错误文本交换(即用户在提供错误输入时看到的错误消息)。

帮助文本可以是多行的

如果没有足够的空间来清楚地描述上下文,则长消息可以换到多行。

学习工具,但不受限于某种工具。摹客iDoc,高效协作,从产品到开发,只要一个文档,让你的团队高效协作!

相关阅读:

2019最佳弹窗/弹出框设计20例【附教程】 插图设计正流行,10大理由告诉你如何靠它增强用户体验 全栈设计师必须拥有的Mac软件推荐

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring原理:10个Spring&SpringBoot高阶用法,你是否清楚?

    通过ApplicationContextAware实现,在bean实例化后,经过Aware扫描时,发现实现了ApplicationContextAware接口,...

    lyb-geek
  • 让kong监听80和443端口

    使用kong的chart,在kubernetes集群默认安装出来kong的容器是监听8000和8443端口的,而为了让外部以80和443端口访问kong这个AP...

    jeremyxu
  • Springboot +redis 实现session共享

    用一个容器保存 session,就能共享了。容器可以是数据库,缓存,文件等。当然这里性能最高的还是

    斯文的程序
  • podman初试-和docker对比

    Docker 是一个开源的应用容器引擎,属于 Linux 容器的一种封装,Docker 提供简单易用的容器使用接口,让开发者可以打包他们的应用以及依赖包到一个可...

    张琳兮
  • CSS 基础系列:flex 布局

    1)初代:table 布局 在网页布局没有进入 CSS 的时代,排版几乎是通过 table 元素实现的。虽然它可以很方便地实现水平和垂直对齐,但是缺点也很明显:...

    Chor
  • Spring5 系统架构

    一,系统架构   Spring 总共大约有 20 个模块,由 1300 多个不同的文件构成。而这些组件被分别整合在核心容器 (Core Container...

    斯文的程序
  • 生成多平台docker镜像

    工作中需要在一台x86服务器从写好的golang程序源码生成linux/amd64、linux/arm64 docker镜像,查阅了下资料,这里记录一下操作过程...

    jeremyxu
  • 避免容器中运行的Java应用被杀掉

    今天测试环境遇到一个问题,一个Java的容器由于OOM频繁被Killed掉。这个问题还经常出现的,这里记录下解决过程。

    jeremyxu
  • JDK、J2EE、J2SE、J2ME的区别

    1.JDK是Javadevelopmenttoolkit,相当于是Java的库函数,是编译,运行java程序的工具包。

    斯文的程序
  • CSS 基础系列:从清除浮动和margin塌陷问题谈BFC

    浮动的元素会影响其兄弟元素的位置,并可能导致父元素的高度塌陷(假如父元素没设置高度),因此需要清除浮动(带来的影响)。

    Chor

扫码关注云+社区

领取腾讯云代金券