恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
设计模式|输入线索:如何让用户清楚该输入什么?
0.0°
2021-07-08 原创文章 经验/观点 举报 499 0 1 0

作者:空谷,蚂蚁集团设计师

本文是《设计模式周周看·Ant Design 为你讲透设计模式》周刊第五期内容,上期内容,我们介绍了一种辅助用户输入的设计模式:输入说明

这一期,我们继续介绍一种辅助用户输入的设计模式:输入线索。


What 是什么

简介:「输入线索」是指用示例输入或说明文本以占位符(Placeholder)的形式显示在输入框中,以帮助用户理解需要输入的内容,或给出相关线索的一种设计方式。

例子:  在 Ant Design 输入框组件 的示例中(如下图),我们可以看到「输入线索」可以更好地帮助界面说明输入字段的内容或解释输入字段的功能。


Why 为什么

「输入线索」这种设计模式可以让界面不言自明。由于输入线索的内容位于用户输入的位置,因此用户往往不会忽略这个信息。

对比:「输入线索」VS「输入说明」

「输入说明」「输入线索」都是辅助用户输入的设计模式,这些模式可以帮助用户明确输入信息的内容形式。

那么这两种模式有什么差异性呢?

使用「输入说明」这种模式时,快速浏览用户界面的用户可能会轻易地忽略说明信息,因为用户的目标是尽可能快地完成表单,然后进入下一步操作(虽然有的场景下这也是其中一个设计目标,但在这里不讨论)。因此,过多的文本说明也会给用户带来较大的心智负担。

Google 注册账号页是结合使用「输入说明」「输入线索」的一个典型案例。通过使用「输入线索」告诉用户需要填写的内容,通过「输入说明」来补充填写信息的相应意图,进而使得用户可以清晰地意识到需要填写什么,并输入相应信息。


When 什么时候使用

用户可能不一定清楚需要在输入框中输入的内容。在设计上,你可能不希望在输入框附近上添加更多的字,造成视觉压迫。还有一种情况,如果界面空间有限,无法使用「输入说明」时,也可以考虑使用「输入线索」。当出现下拉菜单或者组合输入框时,往往需要配合该模式进行使用。

使用条件

  • 输入框要求输入的内容可能不容易让人马上理解;
  • 设计上不希望在其他地方补充新的内容;
  • 可以承载文本的输入空间可能没有太多;
  • 配合下拉菜单或者组合输入框使用;


How 如何使用

1. 选择适当的提示文本

  • 对于下拉列表,使用 “选择”、“选取”等单词,英文使用 Select Choose 或者 Pick 等;
  • 对于文本输入框,使用“输入”等单词,英文使用 Type 或 Enter;
  • 尽量使用祈使句,以动词短语开头;
  • 以描述输入内容的名词结尾,例如“选择状态”,“在此处输入消息”或“输入患者姓名”等;

2. 提示文本的位置

有关文本提示的位置应该和输入值的位置一致。 比如,提示本身不应该是下拉菜单中的可选值。


Example 案例

案例一:Ant Design Pro 登录功能预览

用户需求:用户登录功能的预览与体验

Ant Design Pro 是一个中后台开发的模板脚手架,其并不提供真实账号登录服务。因此 Ant Design Pro 的开发者为了模拟真实使用环境,提供了一个可正常登录的账号,账号密码分别 user 和 ant.design ,其余情况下用户输入的账号密码均会提示不正确。

在这个场景下,通过将正确的账号密码以输入线索的方式显示在占位符中,巧妙地告诉体验 Ant Design Pro 的用户正确的账号密码。


案例二:163邮箱登录页面

用户需求:登录账号

163邮箱登录页面的账号输入框中的输入线索非常有用。正常用户在看到后缀有 @163.com 时可能并不一定能意识到可以输入手机号码。而通过在占位符中 显示「邮箱账号或手机密码」,高效便捷地提示了用户可以直接输入手机号码进行登录。


案例三:小米账号登录页面

用户需求:输入账号密码

「输入线索」有一种设计上的变体,称为「浮动标签」。因为一般来说,当用户激活输入框时,占位符文本会消失。而「浮动标签」不会消失,通过移动位置和更改大小驻留在界面中。这种设计方式可以使得界面变得简洁、优雅。


更多案例

你可以在下方查看「输入线索」更多的案例:

https://airtable.com/shrA9ZFR8QW1Mngby


共建计划

当然,如果你觉得你也有好的「输入线索」案例想要提交给我们,欢迎在下方输入提交~

https://airtable.com/shrUf49lNTOxIGqjX

注:本模式来源《Designing Interfaces》,案例由 Ant Design 团队收集整理,如有侵权请联系删除。


2021 年期 Ant Design 设计周刊《设计模式周周看——Ant Design 为你讲透设计模式》,是由 Ant Design 的设计师编写的设计方法内容。欢迎大家关注 @AnT Designer 及 Ant Design 专栏,获取第一时间更新:

https://www.zhihu.com/column/c_1310524851418480640


我们怀着满腔热情,希望可以将这份周刊作为交互体验教案级别的内容呈现给大家,也欢迎大家向我们提出宝贵意见。


Powered by Froala Editor

更新:2021-07-08

收藏

0人已收藏

Ant Design

企业级产品设计体系,创造高效愉悦的工作体验

  • 59

    作品

  • 568

    粉丝

  • 1

    关注

  • 设计模式 | 宏 Macros:如何让用户快捷完成自定义操作
  • 设计模式丨历史记录:让用户的操作有迹可循
  • 设计模式 | 多级撤销 Multilevel Undo:让用
  • 设计模式 | 撤销按钮:让用户更有掌控感

    猜你喜欢

      2021-07-08 原创文章 经验/观点 举报 499 0 1 0

      设计模式|输入线索:如何让用户清楚该输入什么?

      0.0°

      你确定要举报设计模式|输入线索:如何让用户清楚该输入什么?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      0
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录