表单设计模式.doc
《表单设计模式.doc》由会员分享,可在线阅读,更多相关《表单设计模式.doc(6页珍藏版)》请在三一文库上搜索。
1、表单设计模式表单设计模式2011-03-03 16:24设计模式这个概念早在20世纪60年代就被建筑师Christopher Alexander提出,他注意到在我们生活中有很多东西都存在一定的模式。他把这些发现融入到工作当中,并以此为话题出版发表了很多实践成果。从那时起,设计模式就在我们生活中很多领域占据一席之地,当然也包括用户界面的设计和开发。简而言之,设计模式可以解决共性问题。推而广之,UI设计模式就可以解决一些共有的用户界面问题。本文列举了10个有趣的UI设计模式,你可以结合自己的项目使用。也许你已经在使用它们了,只是不知道而已。1、延迟注册要想完全意识到注册问题的严重性,我们可以参考下
2、导致注册表单必需灭亡这个观点的原因。这并不是意味着注册表单应该完全被砍掉,相反它们应该是把用户介绍给系统这个过程中唯一一个部分,而且应该介绍得迟一些。这就是和帐户注册模式有关的延迟注册。究竟该什么时候使用延迟注册呢?虽然看起来好像可以随时使用,不过以下是更为理想的情况:*当用户在浏览过你的网站产品或服务,并做出购买决定之前(虽然不是每个网站都允许这样)。*当用户注册之前就熟悉你的网站这步至关重要的时候,也就是说这将是决定他们是否注册的关键一步。Amazon让你在注册之前可以浏览商品并加入到你的购物车。这种模式意味着允许用户在注册之前使用你的系统。如果用户对你的服务挺满意,他们会把快速注册当成操
3、作流程中另一个小步骤而没有一丝抱怨,不会觉得是义务。购物车就是这种模式的一个好范例:用户可以浏览选择商品而只在他们要购买付钱的时候才需要注册。Picnik是延迟注册的另一个好范例。用户可以使用所有功能来在线编辑他们的相片。在保存这些编辑之前才被要求注册。Sign-up forms must die:heres how we killed ours!一篇关于为何90%的网站使用延迟注册的趣文Web Form Design Patterns:Sign-Up Forms,Part 1and Part 2Smashing Magazine去年做的有趣又有用的研究2、进阶展开这个模式用于只显示与用户当前
4、操作有关的信息或功能,把其它杂七杂八与当前无关的信息推迟到需要的时候才露出来。通过隐藏这些复杂或不常用的功能让用户界面变得清晰;在他们需要的时候就即时提供,帮助用户在一个个页面完成复杂而多步的操作。目的就是在第一步只显示重要的信息,再引导用户点击下一步。当用户完成一步后才显示下一个步的内容,保证所有已完成的步骤可见且允许用户对已输入内容进行修改。用户在当前这步输入的内容会影响下一步要填的内容。Digg在其评论部分使用了进阶展开。用户可以查看评论,通过点击Replies这个链接查看对该评论的所有回复。该链接还显示了回复条数。一旦显示了所有回复,用户不但可以查看而且可以回复、评价这些回复。文章下面
5、的所有评论只有在点击show的时候才显示出来。进阶展开的例子比比皆是。简单的更多链接显示更多信息就是一个最简单的例子。不过也有些用于复杂地方,比如在线填写表格。试着在Picnik上注册一个帐户(这也是我们所提到的懒惰注册模式)去见识一下进阶展开在复杂层面的一个应用。YouTube在用户自定义播放器外观的时候使用了进阶展开。当用户点击图一中注释过的小图标之后,就打开了下面图2的自定义参数。Progressive disclosure Jakob Nielsen的深刻见解Read moreabout progressive disclosure进阶展开的详尽说明,附带几个例子3、兼容格式搜索功能可
6、以给用户提供多种选项,有时就显得很复杂。比如搜索天气和街道,用户可以使用诸如城市名称、街道名称和邮政编码这样的搜索维度。为了引导用户告诉他们可以使用多个维度,界面就要显示多个选项,这就变得非常复杂。为了让界面干净利索,就可以使用兼容格式,它允许用户输入不同维度的信息,让系统去分析这些信息。Yahoo天气搜索允许用户以城市名称或邮编进行搜索。为了明确支持哪些格式,可以给些建议教用户如何搜索,可以把所有支持的格式列举出来,就像上面的例子,也可以提供帮助页面的一个链接,像下面的例子。Google地图搜索允许用户以城市名称,街道,邮编甚至经纬度进行搜索。兼容格式的模式出色地简化了用户界面。但可能就需要
7、程序开发人员付出很多劳动。用户选项越多,分解起来就越难。4、清晰的首要操作简单的网页表单常常只需要一个操作(提交保存发送)。因为他们只有一个选择,所以就很明确填写表单后的最后操作是什么。不过用户通常会面临几个选择而不得不去区分首要操作和次要操作。Clearleft以颜色来区别首要操作和次要操作。什么是首要操作和次要操作?首要操作引导用户完成一个表单;例如点击保存或者发送。而次要操作通常不引导用户完成表单;包括点击取消。不过也有例外,当你看到保存保存并继续和发布在一起的时候,谁是主要操作谁是次要操作呢?可以用2种方式加以区别:给首要操作和次要操作不同的颜色;例如给首要操作比较艳丽的颜色,给次要操
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 表单 设计 模式
链接地址:https://www.31doc.com/p-5097874.html