“表单设计”目录存档
2009年09月23日，星期三
我写《表单设计常见问题》 的目的有两点：
对以前工作的一点自我总结；
之前因工作的需要，却一直没有找到单个表单控件的使用禁忌。写些东西作为这方面不完全的一点补充;
从今年春节开始后到辞职离开公司这段时间，我负责公司网站的产品表单提交、反馈表单&反馈信息管理的设计。刚开始做的时候以为只是个简单的工作，毕竟表单总共就只有那几种，但随着项目进行中，发觉表单设计中所蕴藏的东西远超过自己最初表面上的理解。也就在那时，把雅虎著名交互设计师LukeW 的《Web Form Design》 认真的过了几遍，加上《Designing interfaces》 ，《GUI设计禁忌2.0》 、《网站优化》 等与表单设计有关的书。在边看边理解边实践的过程中，渐渐的对表单设计有了全新的认识，貌似简单的表单背后竟然挖出了许多隐藏的东西。以至于现在，每每用到设计的不好的表单，心里都会不爽。
在不断的摸索中，我发觉：好的交互不仅要可用，易用，提高用户使用效率的时候。更要尊重用户在之前使用过程中已养成的习惯（不管是好的还是坏的都要予以足够的尊重） 。对给用户已养成的好习惯应予以保留；而坏习惯，不是立即将其纠正，而是给用户足够的时间与引导，使其转变过来。这是设计师必做的功课，设计出：既能满足新用户的好习惯，又要引导老用户改变坏习惯的交付物出来。
在上面看的几本书中，《Web Form Design 》对我的帮助最大，给我许多的启发。我写的《表单设计常见问题》 与它侧重点略有差别：它重点侧重于表单控件之间组合使用的讨论，我写的《表单设计常见问题》 则侧重于单个表单控件的使用。我相信，熟悉了表单各个控件的使用再去做设计才能得心应手。这就好比组装机器：只有每个零部件都没问题，最终装好的机器才能正常工作。
最后，欢迎大家对我总结的东西提出意见，并也欢迎与大家讨论。
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：button design , button vs textlink design , checkbox design , list menu design , menu design , radio button design , textbox design , 下拉框设计 , 互联网表单设计 , 列表框 , 单选框设计 , 命令按钮设计 , 复选框设计 , 文本框设计 , 表单设计 交互设计 , 表单设计 | 8 条评论 »
2009年09月20日，星期日
5、什么情况使用下拉框更合适？
下拉框只有一种样式，使用其有下面2种情况：
在有限空间有大量的选项；
选项数目不确定，且可能超过有限的空间；
如，该下拉框由于全国的省份有很多，所以使用下拉框要比选择框要更合适。
6. 列表框/下拉框的选项如何排序？
由于列表框/下拉框在有限的空间内容纳大量的选项，对选项进行逻辑排序可提高用户的效率。
可增加的额外的手段提高用户高的效率。
如，该下拉框由于按照省份排列仍旧满足不了需求，使用开头字的第一个拼音作为序，当用户按下键盘时，滚动到相应的位置不为是一个好方法：
7、何时用推荐选项作为默认选项？
当默认选项比其他的选项要重要的多，或不希望用户对选项有修改。
8、下拉框的不选择如何表示？
使用无好过空白。
比较下面两种情况：
选项a
选项b
选项c
选项d
用文字表示无（好）：
无
选项a
选项b
选项c
选项d
9、带预览功能的下拉框
如前所说，当文字表述不清楚时可采用更直观的方式：
10、下拉框的宽度
使用常用数值的宽度即可，如年份；
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：list menu design , menu design , 下拉框 , 下拉框设计 , 列表框 , 列表框设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年09月19日，星期六
1、什么是列表框？
列表框： 选中一项，出现一列列表。
来自百度百科
2、常见的几种列表框样式：
分：单选列表、多选列表两种。单选列表： 从控件的多个选项中最多选择一个选项。
选项a
选项b
选项c
选项d
选项e
选项f
选项g
选项h
选项i
多选列表： 从控件内的多个选项内可以选择多个选项，并可使用contrl与shit键对列表进行快速选择。
选项a
选项b
选项c
选项d
选项e
选项f
选项g
选项h
选项i
由于二者在外观上无差别，使得多选列表会被用户误认为是单选列表。建议在使用多选列表时有注释，以提示用户。
3、列表框与下拉框、单选框区别？
列表框与下拉框均可作为在多个选项中选择一项，但二者还是稍微区别的：
4、多选框与复选框的区别？
多选框更节省空间且易让人误解为单选框，复选框则更鼓励用户修改默认选项。
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：list menu design , menu design , 下拉框 , 下拉框设计 , 列表框 , 列表框设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年09月11日，星期五
7、横竖排版那种更好？
有两种排版方式：横排与竖排
其有各自的优缺点：
横排：空间不够，排版需保证每列的上下项目对齐；
竖排：空间足够，或有子选项时使用；
参考文章
8、同组单选框应有相应的排序规则
当同组有许多单选框时，特别是在竖直排版情况下。选项遵循一定的排序规律，可提高用户效率。
9、保持标签文字简洁
与多选框标签 同理，罗唆的废话会让用户产生反感。
10、使用label标签
与多选框标签 同理，使用lable可以增加点击区域，便于用户点击。
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：radio button design , 单选框 , 单选框设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年09月8日，星期二
1、什么是单选框？
单选框：只能选中一项命令。
使用单选框用户可以在互斥的选项中选择一个。用户仅仅能选择组中的一个选项。一组单选框像是一个控件。
2、单选框与复选框的区别是什么？
二者的差别取决于选项的目的：
在同组单选框里，各个选项处于互斥的关系。即：选择了a，就不能选择b或c
在同组复选框里，各个选项处于并列关系。即：选择了a，仍旧可以选择b或c
如果信息需要足够重视，使用单选框否则可以使用复选框代替：
3、同组内的单选框相互之间的关系？
由于在同组单选框之内只能选择一个，所以在同组内单选框的关系是互斥的。
同时，要保证选项之间的词性应一致，如同时是名词或是动词。
4、使用更直观的方式表述单选框含义？
如果存在更好的表达方式，可考虑使用更直观的方式：
如，使用的颜色，字体的大小等等(可参考之前的复选框表单设计):
5、单选框与多选菜单的区别？
复选框： 占用的空间更多，如有足够的空间，或是需要用户对该选项产生足够的重视考虑使用此表现形式；
单选菜单： 可在有限的空间展示出更多的选项，如果下拉选项数量未知或可能会很多则考虑使用多选下拉框，或是减少用户对该选项的重视程度使用该样式。
选项一
选项二
选项三
选项四
6、至少需选一项的单选框？
如果至少需要选择一个选项，应在标题处标明清楚。不应默认帮助用户选择一选项，除非这个选项是非常重要的。并当用户一个未选时，给出提示信息;
请选择你的性别（必须选其一）：
男
女
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：radio button design , 单选框 , 单选框设计 , 表单设计 交互设计 , 表单设计 | 2 条评论 »
2009年09月1日，星期二
11、保持选项描述文字整洁
如果每个文本标签都包含了相同的文字部分，可将其放置在复选框标题处
12、使用label标签
使用label标签可将复选框与其标签包含在一起，增加可点击区域.
<label>带label的选项：<input type=”checkbox” /></label>不带label的选项：<input type=”checkbox” />
13、不可更改复选框
即使用户无法更改某个选项，仍旧需要向用户展示出来，用来提示用户。
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：checkbox design , 复选框 , 复选框设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年08月30日，星期日
6、如何设计至少选一项的复选框？
如果至少需要选择一个选项，应在标题处标明清楚。不应默认帮助用户选择一选项，除非这个选项是非常重要的。并当用户一个未选时，给出提示信息
选择下列一项（至少选择一个）：
7、设计复选框子控件应注意的几点
在排版上展示主次的从属关系
当主选项未被选择时，子选项均为关闭状态；
由于其关系的复杂性，子选项应控制在两级，并确保其关系的明确
8、横竖排版那种更好？
复选框可有两种排版方式：横排与竖排
横排：空间不够，排版需保证每列的上下项目对齐；
竖排：空间足够，或有子选项时使用；
在下面的例子中：适合的送礼场景排版整齐，方便用户查找点击。而是和的送礼人物类型则出现了上下错位情况，不整齐不便于阅读。
当同组有许多复选框时，特别是在竖直排版情况下。如果选项遵循一定的排序规律，则更便于用户找到内容。
10、复选框何时默认为选中状态
如果内容对用户是重要的，可事先帮用户选中该选项。
如下：
盛大通行证申请默认将同意条款选中；
而这点谷歌做得更好，点击命令按钮即表示已经同意协议并提交；
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：checkbox design , 复选框 , 复选框设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年08月28日，星期五
1、什么是复选框？
复选框：可同时选中多项。
复选框提供一个制造单一选择开关的方法；它包括一个小框和一个标签 。典型的复选框有一个小的“X”（或者它设置的其它类型）或是空的，这依靠项目是否被选择来决定的。（来自百度知道 ）
使用复选框，用户可以对选项做是与非的选择。复选框的标签表明选择的状态。因此，选项的含义必须有明显的是与非的关系。通常，复选框是被用来显示某个选项的开与关功能的。
2、同组内的复选框相互之间的关系？
在同组的各不同选项应注意：
使用的选项文字词性应是相同的，如同时使用动词或名词。避免词性混用。
使用的选项文字应属于彼此独立关系，而不是包涵关系的。
该图是截自淘宝，每组复选框的选项均保持彼此独立且不互相包涵。从词义上也保持了很好的一致性.
3、除了文本亦可用更直观的方式表述选项含义？
除了常见的文字表达，对于一些描述不清楚的可考虑使用更直观的表达方式：
如，表示颜色时，使用红色色块要比直接说红色要更直观。
或表示字符大小时，使用实际的字号要比只显示字号要更好。
下图是WordPress的文章编辑工具栏，里面的格式、文字颜色均使用比文本描述更直观的方式。亦可进行扩展思考：如产品的材质用、产品的颜色…总之，那些文字可能表达不清楚的都可以采取类似方式。
4、复选框与多选菜单的区别？
下面是单选框与多选菜单的样式：
复选框： 占用的空间更多，如有足够的空间，或是需要用户对该选项产生足够的重视考虑使用此表现形式；
多选菜单： 可在有限的空间展示出更多的选项，如果下拉选项数量未知或可能会很多则考虑使用多选下拉框，或是减少用户对该选项的重视程度使用该样式。
选项一
选项二
选项三
选项四
5、单个复选框与单选框组的区别？
与一组复选框不同，单个复选框，用来表示是与非的概念：
我同意以上条款。
而单选框组则表示在一组中选择几个选项：
宅型
小资型
探索创新型
文艺型
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：checkbox design , 复选框 , 复选框设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年08月22日，星期六
1、什么是命令按钮？
button n. 按钮
1、对话框中的一种图形元素。当激活它时，能执行指定的功能。用户可以采用以下方法来激活按钮：用鼠标在其上单击，或者当按钮获得聚焦时按下 “Return”或“Enter”键。
2、鼠标上的一个活动片，用于激活一些功能。旧式的鼠标模型只有一个按钮；新式一般有两个或更多个按钮。来源于百度知道 ）
多用来提交当前内容的信息，且点击该按钮后做页面的不可撤销动作，到达的也没无法使用浏览器上的后退按钮回到之前页面。其在设计上人让人感觉是可点的；
下面是常见的一些命令按钮，包括系统默认的按钮与网站自己设计的按钮。
2、页面主次按钮的区别？
每个网页都有多个可点击的链接出口，如当前页面的导航、帮助、版权信息等各种链接：
主按钮： 当前页面首要完成的任务，如：注册页面的提交注册按钮是主按钮。在视觉上会设计的更加明显；次按钮 ：除了上述的完成首要任务的按钮或链接就是次要按钮，如页面的帮助、版权信息等。视觉上更加弱化；
主次按钮在页面中使用应该注意的事项： 在一个页面中，主要按钮自然越突出越好，且数量不易过多。如果是像注册，登录等界面，应保持整体画面的简洁以方便用户找到主要按钮。
如图中的按钮，下部的两个按钮：Submit与Cancel。Submit按钮在视觉上就更突出。
3、点击按钮后应有信息提示
尽管现在的网速已经有大幅度的提升，但用户仍旧会遇到这样的情况：当网速过慢的时候，用户会反复点击刚提交的信息而导致所填写的数据被重复提交。
因此，仍旧有必要在用户点击按钮提交信息后，给予用户足够的的提示信息。
当网页提交结束后，也应有相应的信息提示。
下图是Gmail的几个界面，在几个关键的界面：登入、点击发信、信件发送完毕。均有相应的信息提示。
4、命令按钮的文本标签需注意的事项？
受到按钮视觉设计的限制，其文本标签一般不超过10个汉字。按钮的文本标签也需在表述清晰前提下保持简洁。
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：button design , 命令按钮 , 命令按钮设计 , 表单设计 交互设计 , 表单设计 | 没有评论 »
2009年08月19日，星期三
命令按钮：
多用来提交当前内容的信息，且点击该按钮后做页面的不可撤销动作，到达的也没无法使用浏览器上的后退按钮回到之前页面。其在设计上人让人感觉是可点的；
广义上的命令按钮除了浏览器默认的按钮之外，还包括许多网站自己设计的按钮：
用于页面导航之用，用户点击文字链接后亦可通过浏览器上面的后退按钮返回到之前的页面；
两者之间的区别：
单独的文本链接，借用某些特定的空间位置，再加上某些设计方式。仍旧可以很好的突出出来；
在文本中的超链接是用户通过以往经验的积累知道是可以点击的，并且有些样式只有鼠标划过才知道是可以点击的，所以视觉上是最弱的。
以下是使用文本链接的几种特殊情况：
如在文字段落里有链接，则使用文字链接；
当文字过长的时候，则使用文字连接而不是命令按钮；
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
标签：button vs textlink design , 命令按钮与文字链接 , 命令按钮设计 , 文字链接 , 表单设计 交互设计 , 表单设计 | 2 条评论 »
