文章关键字 ‘表单设计’

译文:如何精简用户界面

2010年01月2日,星期六

简洁、易用、友好、直观。这些词语经常被提及,但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果,减少复杂的操作过程并精简操作界面,那该软件的用户体验就大大的提升了。

去除无用的功能

研究发现:80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间,也使得软件更加难以使用(这些功能对用户的阻碍作用大于有用价值)。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的,可单独智能化的解决单个问题。

精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务,那么可以将其排除在外。删除功能是艰难的,当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

隐藏复杂部分

如果实在无法去除某个复杂功能,那么就将其隐藏。通常情况下,不常使用的功能要比经常使用的功能占据更多的屏幕空间。而优秀的界面应该确保最常用的功能在最显著的位置,将不常用的功能隐藏。

当我们重新设计CMS系统时,我们无法去除一个复杂的功能:批量编辑功能。在之前的版本里,在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域,但我们发觉很少有人会用到此功能。我们的解决方法是,放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的空间,也不会干扰用户使用那些最基本的功能。

最小化视觉干扰

我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是:空白与对比。

空白,是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一:如果可以使用空白就不要放置其他设计元素。如果用这种方式布局,你会很惊讶调整界面的空白就可以完成布局了。

虽然使用空白多多益善,但也要尽可能的保证有对比感。设计理论家“ddd”说:设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。

你可以看到修改过的版本有很重的黑线,与之前的边框不同。那个版本视觉干扰更小呢?(当然是原来的更好)大量的空白区域减少视觉干扰并让人觉得更舒适。

做减法、重复使用,循环利用

当软件成形后,问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处:减少开发所需时间;给人一致的使用体验,如果用户学会使用一个操作,他们就可以把相同的操作行为运用到进行其他操作中去。

在设计CMS过程中,我们在表单验证上花费了大量的时间。我们用红色框出无效的区域,甚至增加红色的提示框来说明每个填写表单的环节有多少错误。

在之后的开发过程中,我们在需求列表中增加了版本比较的功能。与其创建全新的框架,不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单,并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。

重复使用元素是另一种可以减少界面复杂的方法,因为用户可以迅速的熟悉软件。

空白状态不应空白

空白状态是指界面无数据时的样子,如用户初次使用软件。作为设计师,我们花费大部分精力用来设计如何最好的展示内容,但时常忘记如何展示无数据的样子。

如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象,用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径,帮助用户学会初次使用软件的基础操作。

Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候,程序突出了两大人们可能会用得到的功能。

再次重复:不要忘记空白状态!

相关展示

我们已经见过大量界面混乱,复杂的软件。然而,有效的减少程序的复杂性有点难度。

Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。
Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力,将例行任务变得有趣。
Image Spark黑白色的渐变。界面几乎没视觉干扰,易于使用。
Ballpark有简洁的界面,用色不跳。

Krop,其核心就两个表单:地址与关键词。

Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。
Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有,但其他类似软件有的功能它都没有。

Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台,它把功能隐藏在一个简洁的界面中。

总结

  • 减掉不必要的功能;
  • 然后隐藏那些不能减掉的功能;
  • 减少视觉噪音并重复利用元素;
  • 使用空白帮助用户;

(翻译略有删减)

原文地址:http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

后语,为什么我要写表单设计?

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]
Rating: 0 (from 0 votes)

表单设计之–下拉/列表框常见问题(2)

2009年09月20日,星期日

5、什么情况使用下拉框更合适?

下拉框只有一种样式,使用其有下面2种情况:

  • 在有限空间有大量的选项;
  • 选项数目不确定,且可能超过有限的空间;
如,该下拉框由于全国的省份有很多,所以使用下拉框要比选择框要更合适。
tb_menu

6. 列表框/下拉框的选项如何排序?

由于列表框/下拉框在有限的空间内容纳大量的选项,对选项进行逻辑排序可提高用户的效率。
如:按照字母排序,按照区域排序,按照推荐热度排序,按照范围大-》小排序

可增加的额外的手段提高用户高的效率。
如:根据用户访问的ip判断用户来源,在地区选项中默认选择为该地区。
在地区前加相应的字母,当用户按下键盘时,会自动跳转到相应的字母打头的选项中。

如,该下拉框由于按照省份排列仍旧满足不了需求,使用开头字的第一个拼音作为序,当用户按下键盘时,滚动到相应的位置不为是一个好方法:
tb_menu1

7、何时用推荐选项作为默认选项?

当默认选项比其他的选项要重要的多,或不希望用户对选项有修改。

8、下拉框的不选择如何表示?

使用无好过空白。

比较下面两种情况:
用空白表示无(不好):

用文字表示无(好):

9、带预览功能的下拉框

如前所说,当文字表述不清楚时可采用更直观的方式:

wp_menu2

10、下拉框的宽度

使用常用数值的宽度即可,如年份;
使用统一宽度,保持视觉上的统一。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

表单设计之–下拉/列表框常见问题(1)

2009年09月19日,星期六

1、什么是列表框?

列表框:选中一项,出现一列列表。
列表框(ListBox)控件表示一个选项清单,用户可能用鼠标选择其中一个或者几个选项。

来自百度百科

2、常见的几种列表框样式:

分:单选列表、多选列表两种。
单选列表:从控件的多个选项中最多选择一个选项。

多选列表:从控件内的多个选项内可以选择多个选项,并可使用contrl与shit键对列表进行快速选择。

由于二者在外观上无差别,使得多选列表会被用户误认为是单选列表。建议在使用多选列表时有注释,以提示用户。

3、列表框与下拉框、单选框区别?

列表框与下拉框均可作为在多个选项中选择一项,但二者还是稍微区别的:

如示例所显示,列表框显示的项目要比下拉框更多,列表框比下拉框更鼓励用户修改默认选项。

列表框:

下拉框:

单选框:









4、多选框与复选框的区别?

多选框更节省空间且易让人误解为单选框,复选框则更鼓励用户修改默认选项。

多选框:

复选框:








VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

表单设计之–单选框常见问题(2)

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]
Rating: 0 (from 0 votes)

表单设计之–单选框常见问题(1)

2009年09月8日,星期二

1、什么是单选框?

单选框:只能选中一项命令。

使用单选框用户可以在互斥的选项中选择一个。用户仅仅能选择组中的一个选项。一组单选框像是一个控件。

2、单选框与复选框的区别是什么?

二者的差别取决于选项的目的:

在同组单选框里,各个选项处于互斥的关系。即:选择了a,就不能选择b或c

在同组复选框里,各个选项处于并列关系。即:选择了a,仍旧可以选择b或c

如果信息需要足够重视,使用单选框否则可以使用复选框代替:

不正确:

继续显示该信息

不再显示该信息

正确:

不再显示该信息

3、同组内的单选框相互之间的关系?

由于在同组单选框之内只能选择一个,所以在同组内单选框的关系是互斥的。

同时,要保证选项之间的词性应一致,如同时是名词或是动词。

4、使用更直观的方式表述单选框含义?

如果存在更好的表达方式,可考虑使用更直观的方式:

如,使用的颜色,字体的大小等等(可参考之前的复选框表单设计):

5、单选框与多选菜单的区别?

复选框:占用的空间更多,如有足够的空间,或是需要用户对该选项产生足够的重视考虑使用此表现形式;

A.选项一

B.选项二

C.选项三

D.选项四

单选菜单:可在有限的空间展示出更多的选项,如果下拉选项数量未知或可能会很多则考虑使用多选下拉框,或是减少用户对该选项的重视程度使用该样式。

6、至少需选一项的单选框?

如果至少需要选择一个选项,应在标题处标明清楚。不应默认帮助用户选择一选项,除非这个选项是非常重要的。并当用户一个未选时,给出提示信息;

请选择你的性别(必须选其一):

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

表单设计之–复选框常见问题(3)

2009年09月1日,星期二

11、保持选项描述文字整洁

如果每个文本标签都包含了相同的文字部分,可将其放置在复选框标题处

我计划的活动:

去游泳、

登山、

去旅游、

更改为:

我计划去的活动:

游泳、

登山、

旅游、

12、使用label标签

使用label标签可将复选框与其标签包含在一起,增加可点击区域.

<label>带label的选项:<input type=”checkbox” /></label>不带label的选项:<input type=”checkbox” />

labelset

13、不可更改复选框

即使用户无法更改某个选项,仍旧需要向用户展示出来,用来提示用户。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

表单设计之–复选框常见问题(2)

2009年08月30日,星期日

6、如何设计至少选一项的复选框?

如果至少需要选择一个选项,应在标题处标明清楚。不应默认帮助用户选择一选项,除非这个选项是非常重要的。并当用户一个未选时,给出提示信息

选择下列一项(至少选择一个):

山川、

河流、

森林、

天空、

7、设计复选框子控件应注意的几点

  • 在排版上展示主次的从属关系
  • 当主选项未被选择时,子选项均为关闭状态;
  • 由于其关系的复杂性,子选项应控制在两级,并确保其关系的明确
  • wordpress_select

    8、横竖排版那种更好?

    复选框可有两种排版方式:横排与竖排

    横排:空间不够,排版需保证每列的上下项目对齐;

    竖排:空间足够,或有子选项时使用;

    在下面的例子中:适合的送礼场景排版整齐,方便用户查找点击。而是和的送礼人物类型则出现了上下错位情况,不整齐不便于阅读。

    复选框的排版
    9、同组复选框的排序

    当同组有许多复选框时,特别是在竖直排版情况下。如果选项遵循一定的排序规律,则更便于用户找到内容。

    10、复选框何时默认为选中状态

    如果内容对用户是重要的,可事先帮用户选中该选项。

    如下:

    盛大通行证申请默认将同意条款选中;

    而这点谷歌做得更好,点击命令按钮即表示已经同意协议并提交;

    enabledselect

    VN:F [1.9.17_1161]
    Rating: 0.0/10 (0 votes cast)
    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

    表单设计之–复选框常见问题(1)

    2009年08月28日,星期五

    1、什么是复选框?

    复选框:可同时选中多项。

    复选框提供一个制造单一选择开关的方法;它包括一个小框和一个标签。典型的复选框有一个小的“X”(或者它设置的其它类型)或是空的,这依靠项目是否被选择来决定的。(来自百度知道

    使用复选框,用户可以对选项做是与非的选择。复选框的标签表明选择的状态。因此,选项的含义必须有明显的是与非的关系。通常,复选框是被用来显示某个选项的开与关功能的。

    2、同组内的复选框相互之间的关系?

    在同组的各不同选项应注意:

    使用的选项文字词性应是相同的,如同时使用动词或名词。避免词性混用。

    使用的选项文字应属于彼此独立关系,而不是包涵关系的。

    该图是截自淘宝,每组复选框的选项均保持彼此独立且不互相包涵。从词义上也保持了很好的一致性.

    复选框选项之间的关系

    3、除了文本亦可用更直观的方式表述选项含义?

    除了常见的文字表达,对于一些描述不清楚的可考虑使用更直观的表达方式:

    如,表示颜色时,使用红色色块要比直接说红色要更直观。

    或表示字符大小时,使用实际的字号要比只显示字号要更好。

    下图是WordPress的文章编辑工具栏,里面的格式、文字颜色均使用比文本描述更直观的方式。亦可进行扩展思考:如产品的材质用、产品的颜色…总之,那些文字可能表达不清楚的都可以采取类似方式。

    wordpress的预览功能

    4、复选框与多选菜单的区别?

    下面是单选框与多选菜单的样式:

    复选框:占用的空间更多,如有足够的空间,或是需要用户对该选项产生足够的重视考虑使用此表现形式;

    A.选项一

    B.选项二

    C.选项三

    D.选项四

    多选菜单:可在有限的空间展示出更多的选项,如果下拉选项数量未知或可能会很多则考虑使用多选下拉框,或是减少用户对该选项的重视程度使用该样式。

    5、单个复选框与单选框组的区别?

    与一组复选框不同,单个复选框,用来表示是与非的概念:

    我同意以上条款。

    单选框组则表示在一组中选择几个选项:

    VN:F [1.9.17_1161]
    Rating: 0.0/10 (0 votes cast)
    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

    表单设计之–命令按钮常见问题(1)

    2009年08月22日,星期六

    1、什么是命令按钮?

    button n. 按钮

    • 1、对话框中的一种图形元素。当激活它时,能执行指定的功能。用户可以采用以下方法来激活按钮:用鼠标在其上单击,或者当按钮获得聚焦时按下 “Return”或“Enter”键。
    • 2、鼠标上的一个活动片,用于激活一些功能。旧式的鼠标模型只有一个按钮;新式一般有两个或更多个按钮。
      来源于百度知道

    多用来提交当前内容的信息,且点击该按钮后做页面的不可撤销动作,到达的也没无法使用浏览器上的后退按钮回到之前页面。其在设计上人让人感觉是可点的;

    下面是常见的一些命令按钮,包括系统默认的按钮与网站自己设计的按钮。

    buttons

    2、页面主次按钮的区别?

    每个网页都有多个可点击的链接出口,如当前页面的导航、帮助、版权信息等各种链接:

    • 主按钮:当前页面首要完成的任务,如:注册页面的提交注册按钮是主按钮。在视觉上会设计的更加明显;
    • 次按钮:除了上述的完成首要任务的按钮或链接就是次要按钮,如页面的帮助、版权信息等。视觉上更加弱化;

    主次按钮在页面中使用应该注意的事项:在一个页面中,主要按钮自然越突出越好,且数量不易过多。如果是像注册,登录等界面,应保持整体画面的简洁以方便用户找到主要按钮。

    如图中的按钮,下部的两个按钮:Submit与Cancel。Submit按钮在视觉上就更突出。

    buttonsub
    3、点击按钮后应有信息提示

    尽管现在的网速已经有大幅度的提升,但用户仍旧会遇到这样的情况:当网速过慢的时候,用户会反复点击刚提交的信息而导致所填写的数据被重复提交。

    因此,仍旧有必要在用户点击按钮提交信息后,给予用户足够的的提示信息。

    当网页提交结束后,也应有相应的信息提示。

    下图是Gmail的几个界面,在几个关键的界面:登入、点击发信、信件发送完毕。均有相应的信息提示。

    gmail

    4、命令按钮的文本标签需注意的事项?

    受到按钮视觉设计的限制,其文本标签一般不超过10个汉字。按钮的文本标签也需在表述清晰前提下保持简洁。

    VN:F [1.9.17_1161]
    Rating: 0.0/10 (0 votes cast)
    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)