表单元件在说什么?—分析表单元件的语义

十一月 28th, 2005 1 Comment »

在文章的开头有必要先定义一下,什么是“表单元件”。本文所说的表单元件是指form(表单)中的文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框以及表单按钮(包括提交按钮、复位按钮和一般按钮)等的统称。

每一种元件都能实现一种特定的功能,这自不必说,本文要探讨的是,一个表单元件作为界面上的一个元素,能传达给使用者什么信息。

表单元件在实现一种特定数据采集功能的同时,元件本身也向使用者传达着语义。以单选框为例,界面中如果出现若干条选项,每一条选项由一个单选框引导,此时,不需要任何文字说明,使用者便可以很清楚的理解:“选择其中一条”。这个道理似乎是显而易见的,然而在实际的应用中却不是总能被正确的理解和运用。下面来看两个实例:

实例一:当当网(www.dangdang.com)首页“搜索商品”部分的下拉选择框。
uploads/200603/06_215409_dangdang.gif
如图中所示,下拉选择框的选项表述为“在所有XX中”,这样的表述是多于的,选项只需逐行显示“所有产品;图书;影视;音乐……”即可。重复的表述“在所有…中”表面上看是更清楚的表述,而实际上却事得其反,当打开这个下拉选择框时,使用者需要先从每行6个字共8行的文字矩阵中提炼出每一行的关键词(即:所有产品;图书;影视;音乐……),然后,在进行选择的时候只关注关键词所在的列,并选择符合自己要求的选项行。“在所有…中”这4个字成了视觉上的干扰,这无疑降低了使用的效率。实际上,下拉选择框本身已经表达了“在所有…中”这个含义。

在卓越网(www.joyo.com)的首页上也有一个类似的下拉选择框,
uploads/200603/06_215613_joyo.gif
对比两者,不难发现,卓越网的下拉选择框更易用。显然两个设计者在“如何理解下拉选择框这个表单元件”这个问题上理解不尽相同。

实例二:买麦网(www.mymai.com)某一栏目内复选框。
uploads/200603/06_215652_mymai.gif
显然,无论内容有多么重要,也没有必要在此处的复选框后面写一篇小作文来加以说明,何况这些说明并不必要。实际上,此处只要写:“保留过期信息”6个字就够了。复选框传达的含义是:如果复选框被勾选,表示当前使用者同意复选框后面的命题;如果不勾选,则表示不同意。在设计此处复选框时,如果设计者能确实理解复选框所传达的含义,那么就不必担心用户可能会误解此处选项了,自然用不着费如此多的笔墨了。

每个表格元件都有与其功能相匹配的语义,这个特点是图形用户界面的一大优势,用户在使用图形用户界面的最初一段时间里,逐渐的了解并记住了每一类图形元素的定义,这是所谓的学习图形用户界面的过程,这个学习过程要比命令行用户界面容易的多。网页中所使用的表单元件是整个图形用户界面中的一部分,本文中所说的表单元件的语义正是用户对图形用户界面中各个元素的理解,把这些“理解”翻译成文字就成了这里所说的“语义”。在实际的使用中,由于用户已经有了相当的经验,可以熟练的运用图形用户界面中的元素,所以,往往并不需要“识别—理解—翻译成语义—使用”,而是“识别—理解—使用”。

不过,对于一个设计师来说,能正确的理解、翻译并使用表单元件的语义是有意义的,至少可以让你的网页不那么罗嗦。

有1条对“表单元件在说什么?—分析表单元件的语义”的评论

  1. Jonalyn 说:

    This is way better than a brick & mortar establshiment.

发表评论

您的大名: