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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
设计模式|语句填空:如何将表单信息录入变为自然沟通语言?
0.0°
2021-06-24 原创文章 经验/观点 举报 648 1 0 0

作者:梓美,蚂蚁集团设计师

本文是《设计模式周周看·Ant Design 为你讲透设计模式》周刊第三期内容,上期内容,我们介绍了一种应对用户的多元输入需求的设计模式:结构化模式

这一期,我们继续介绍一种跟输入相关的设计模式:语句填空


What 是什么

简介:「语句填空」使用一组短语字段将用户需要录入的信息,如文本、数字等串联为一句有指示意义的沟通语句。

例子: Visualeyes Design 网站的用户信息录入


Why 为什么

「语句填空」可以让界面不言自明。把一组看似无关联的数据,串联成一段有意义的句子,看到句子中的“填空”可以帮助用户了解此情境下需要做什么以及发生了什么。

这很像我们读书时都做过的填空题,比如下面这道题,题干语言的描述可以让做题人很清晰的判断出需要填写的内容性质和形式:


When 什么时候使用

「语句填空」需要用户输入文本、数字或从下拉列表中选择信息,通过将一组表单信息用日常沟通语言串联起来,以解决要录入的信息之间关联性弱、用户不容易理解录入该信息的预期后果等问题。该模式的使用条件是:

  • ① 录入表单信息时对于信息描述不清晰;

  • ② 希望用户快速明白表单信息操作的预期后果;


How 如何使用

「语句填空」将看似无关联的各个信息输入操作,变成一句合理的句子,然后使用输入组件代替其中的关键单词。

注意事项:该模式有一个很大的“陷阱”,即翻译成其他语言可能造成句子不通顺,因为不同语言的词语顺序不同,可能反而会导致糟糕的用户体验。 所以,如果存在语言切换的情境,需要根据语言情况重新排列元素顺序。


Example 案例

案例一:macOS 电脑系统设置

用户需求:Mac电脑系统的安全性和隐私设置

苹果电脑系统大量采用了这种模式,将系统的设置变为一句可以描述当前设置情况的语句,接近于日常的生活语言:进入睡眠或开始屏幕保护程序何时要求输入密码。


案例二:Excel 的条件格式规则

用户需求:为 Excel 表格添加图标集的条件格式规则

该案例里,在显示模块的数据录入项下,将录入的信息串联组成了一组命令规则的语句,描述如下:

显示绿点 ,当值 >=67 百分比;

显示黄点,当值 <33 百分比 ;

显示红点,当 <33


更多案例

你可以在下方查看「语句填空」更多的案例:

https://airtable.com/shrULE0L5aWK4rRAD/tblXEEC6HykKOL3Ef


共建计划

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

https://airtable.com/shrO2j7G4BKXObRRn


为了便于查阅,本文将同步沉淀到 Ant Design 的知识库《设计模式》中,欢迎关注:

https://www.yuque.com/ant-design/design-pattern

注:本模式来源《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-06-24

收藏

1人已收藏

Ant Design

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

  • 59

    作品

  • 568

    粉丝

  • 1

    关注

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

    猜你喜欢

      2021-06-24 原创文章 经验/观点 举报 648 1 0 0

      设计模式|语句填空:如何将表单信息录入变为自然沟通语言?

      0.0°

      你确定要举报设计模式|语句填空:如何将表单信息录入变为自然沟通语言?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      1
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录