建站常识

UI设计范式之二：造句填空Fill In The Blanks

2007-12-18 12:35:00

问题综述
需要用户填写内容但又表示不清填为何故。

举例

适用范围
当你发现即使为某个输入框增加一个标题依然无法说清该输入框的详细用处的时候
当你不得不用很长的一段描述来解释你的输入框用途的时候
当你发现这个输入框所填的内容正好可以成为某个句子的一部分的时候
当这个是必填项的时候。因为把他放在句子中能更引起用户的注意。
不要在句子中加入太多的输入框。因为太多的填空题会让用户怒
对于非必填项尽量少用

解决方案
整理好你的必填项(文本输入框 text field、单选框 radio button、ꦿ多选框 checkbox、下拉框combo-box)并把他们造句(回忆一下小学老师是怎么教我们的)。这样用户就能边读你的句子边把填空给填了。

如果该输入框不位于句首或句末的话你得注意这些输入框可能会破坏句子的连贯性(译者：因为HTML里面某些输入框格式会占去很多页面空间，或把句子强制换行等)，尽量不要用高度超过句子高度的输入框类型。简单的文本输入框或下拉选择框是最好的选择。

该范式经常被用于复杂的筛选功能里。🎃比如Apple iTune在定制高级播放列表(Smart Playlist)的歌曲筛选界面中使用了该范式。

Apple iTune的高级播放列表定制界面

该范式的最大缺点在于面对多语言网站的时候句子会有不同的翻译，那么由于语法的不同，输入框的位置就会发生改变。这样该范式就会阻碍网站向其他语言版本的翻译工作。(译者：尤其对于使用内容管理系统CMS的网站来说这就面临着要重新设计一个表单的模板)

更多例子

Google高级搜索

原理总结

通过把一个输入框放到句子中，可以借助句子的上下文来帮助用户更好的理解。有时候你也会遇到很难为输入框造句的时候。怎么不让用户面对冷冰冰的计算机术语呢？看一下这个例子：

Ruby On Rails wiki

例子中的递交按钮“Save”和输入框之作者名字连同取消按钮“Cancel”一起🎀放入了一个句子里面。用传统的方法这个三个操作需要分别用三行单独的描述。但这里巧妙的运用来本范式，不但把三行变成了一行使这三个操作的作用表达𝓡清楚得一清二楚。而且还用到了“Input Prompt”范式来鼓励用户填写自己的名字。

本范式让用户界面变得自己会说话了。我想人类的语言能力和表达天性会让我们很乐意去把句子填写完整的。

上一篇：加拿大预测网-在线预测:活动网站设计之北美故事

下一篇：我们为什么改版？