UI设计范式之二:造句填空Fill In The Blanks_网页设计教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:我们为什么改版?
这次UCDChina书友会主要围绕着改版展开讨论,虽然后期扯得比较远了(设计师们的发散思维还是很恐怖的),但收获颇多,总结起来还是在前期功能未做足所导致。

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

举例

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

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

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

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


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

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

更多例子

Google高级搜索


basecamphq.com

原理总结

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

Ruby On Rails wiki

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

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

分享:信息架构的流程引入
对内对外讨论甚至争论了无数次,分享几条不成熟看法:交互能解决一个个功能,但用户的需求是一串串功能,这是我理解为什么交互算过得去,但网站还是那么烂的原

来源:yeeyan.com//所属分类:网页设计教程/更新时间:2007-12-18
相关网页设计教程