行业关键字
UI设计UI理论和资料 → 正文
互联网表单设计 第五章 输入框(7)
作者: yummy 译 来源: 视觉同盟 时间: 2009年6月18日

弹性输入框
问题回答方式不止一种,但很多表单都缺乏弹性。由于技术、法律、或者商业约束原因,为了确保回答有效,人们总是需要以特定方式回答问题。

例如,“电话号码是多少?”,问题看似简单。输入框旁的简单帮助文字(第7章会提到)告诉人们如何回答:“用xxx-xxx-xxxx格式回答。”可以组织输入框结构,暗示人们只能按照特定格式输入答案:用适当的标点符号分隔开3个长度适中的文本框。

还可以采用弹性输入框,允许人们以希望的方式回答问题(图5.14)。以电话号码为例,基本有5种不同填写方式。简单脚本程序就可以检验答案是否属于其中一种方式,并以后台要求的格式提交信息。要求用户以特定格式填写答案会导致用户放弃填写,而小段代码就能解决问题。

图5.14 http://www.flickr.com/photos/rosenfeldmedia/2367265570
弹性化设计输入框以应付多种答案形式。

Renkoo网站邀请函是另一个弹性输入框例子,图5.15。输入框允许填写3种答案指定见面地点。如果人们仅仅希望输入地点,当然没问题。如果想包括地址或地图,点击即可展现子选项。如果要包括地图,但不知道地址,可以搜索该地点,地址会自动填入。3种选项都有效。信息量多少取决于填表人。

图5.15 http://www.flickr.com/photos/rosenfeldmedia/2366429699
Renkoo邀请表单的弹性输入框。

为了全部展现,本例没有告诉人们可以搜索地址。需要点击才展现选项。但是,这个例子说明了输入框能全面、有效考虑不同数量或格式的信息。

应当注意,虽然答案详细程度不同,但是这种交互行为让人们容易提供最简单的答案。如果只想在一个地方输入,没有问题。弹性化牺牲了人们能够以简单方式提供最常见答案,这是其弊大于利的地方。

(责任编辑: echo

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2026 视觉同盟 visionUnion.com)
Copyright © 2004-2026 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版