2004年12月27日
kh0d



kh0d

link: http://www.kh0d.com
designer name: kh0d

很久没看到这样优秀的设计了,只能这样形容,精致。

忍不住去点它,内容似乎已不重要了 :)

只是全用图片,如果用FLASH应该会更有质感和动感。



 

2004年12月26日

最近去了假日酒店就餐,发现那里不会有拿错餐巾的尴尬了!^^


白色为餐巾

点击浏览该文件
 

一个Web系统的界面设计和开发

早在中国IT业方兴未艾之时,计算机应用系统主要以功能实现为主,几乎没有界面设计这个概念。时至今日,随着计算机和网络的不断普及,社会信息化程度日益加深,用户和市场的不断成熟,人们已经不仅仅满足于“够用”,而是更加强调“好用”“易用”;因此,不论是普通最终用户的个人软件,还是企业应用的大型系统,界面设计在系统构建中都成为了一个非常重要的方面。

但是,(至少在中国)由于IT业发展滞后、市场还不够成熟等原因,在绝大多数企业中,界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地,并且在企业运作和协调中也没有形成成熟的模式和解决方案,如何做好界面设计和开发,仍然是大家不断研究探讨的一个问题。

这篇文章,主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程,包括其间的一些构思和想法;其目的就是希望能和大家一起探讨一下这个问题,希望能供大家参考,起到抛砖引玉的作用。

另外,我同时承担了系统开发和界面设计工作,所以,虽然这是一篇讨论界面设计的文章,我也尽量把文章限制在界面设计范围内,但也有可能包含一些开发和系统设计的内容,请大家辨析清楚,欢迎指正。

1.工作流程

下图,是整个开发过程中与界面设计相关的主要流程工作。

 
此主题相关图片如下:
按此在新窗口浏览图片

从最初需求分析开始,我就加入项目,自始自终参加整个开发过程。

在需求分析阶段,参与了对客户的访问和调研;
在概要设计阶段,参与了部分系统设计分析工作;
在详细设计阶段,完成了整个系统界面设计和Demo制作,并提交用户反馈;
在代码开发阶段,参与了系统表现层的设计开发。

2.需求分析

在需求分析阶段,主要针对界面交互相关问题,对用户进行若干调研。

主要包括以下内容

·受众用户群调查
·系统使用环境调查
·受众用户使用习惯调查
·用户对旧版本软件使用情况调查

这一阶段,由于成本原因,我并没有直接访问客户进行调查。工作主要是提出某些具体问题,由需求调研人员,以问卷或口头问答方式,对客户进行调研。另外,公司经验丰富的客服人员和市场人员,也是非常重要的需求来源之一。

本系统的客户群主要为国家省市下属质检单位,最终受众年龄从年轻到较高龄都有。对于普通国家机关人员,一般对计算机系统和网络不够熟悉,计算机环境一般,甚至比较差,少有配置优良的环境。在这种环境下,用户对计算机使用一般没有使用倾向,大多更适应手工操作。对本系统的前代使用,最主要意见是使用困难,不方便。

还有其他具体调查反馈,如用户基本不使用鼠标右键,年龄较大的用户难以看清密集的较小文字等等。


3.界面设计原则

在概要设计阶段,根据需求阶段的调研结果,我整理了系统界面设计的基本原则。因为在代码开发阶段,很多时候界面的具体制作是由开发人员直接写代码,因此必须确定一定的原则和规范,以保证系统界面的统一。

一般适用原则

·简单明了原则:用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口,直接点击高于右键操作,文字表示高于图标示意,尽可能的符合用户对类似系统的识别习惯。

·方便使用原则:符合用户习惯为方便使用的第一原则。其它还包括,实现目标功能的最少操作数原则,鼠标最短距离移动原则等。

·用户导向原则:为了方便用户尽快熟悉系统,简化操作,应该尽可能的提供向导性质的操作流程。

·实时帮助原则:用户需要能随时响应问题的用户帮助。

·提供高级自定义功能:为熟悉计算机及软件系统的高级用户设置自定义功能,可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。

·界面色彩要求:计算机屏幕的发光成像和普通视觉成像有很大的不同,应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统,应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色,灰色系为主配色等等。切忌色彩过多,花哨艳丽,严重妨碍用户视觉交互。

·界面平面版式要求:系统样式排版整齐划一,尽可能划分不同的功能区域于固定位置,方便用户导航使用;排版不宜过于密集,避免产生疲劳感。

B/S构架适用原则

·页面最小:由于Web的网络特性,尽可能减小单页面加载量,降低图片文件大小和数量,加快加载速度,方便用户体验。

·屏幕适应:Web界面需要适应不同用户屏幕大小。

·浏览器兼容:需要适应不同浏览器浏览效果,虽然目前可不考虑不同浏览器差别,但仍需考虑IE浏览器版本差异带来的客户端不同效果。

·最少垂直滚动:尽可能减少垂直方向滚动,尽可能不超过两屏。

·禁止水平滚动:由于将导致非常恶劣的客户体验,尽可能禁止浏览器水平滚动操作。

·避免隐藏(右键)操作:浏览器的右键操作不符合用户体验习惯,尽可能避免。

本系统应用原则

·瘦客户端要求:由于客户应用环境配置大多较低,除服务器可单独配置较灵活外,应该保证瘦客户端,使用户容易使用。例如尽量不要使用复杂的JS脚本和HTC组件,不要在客户端使用IE整合XML/XSLT等等。

·大数据量表格的水平扩展要求:本系统中存在大数据量的列表,需要较大的交互界面支持,为避免水平滚动,应尽可能获取大的屏幕水平空间。

·桌面面板导航简化操作:为了实现方便简捷的用户操作,应该保证用户绝大多数操作可通过首页桌面面板的导航来实现。

·用户自适应定义:提供较多的可订制功能,尤其对桌面面板提供强大的定制功能;使用户能够将最常用的功能定义到桌面面板,每次登录即可直接使用,简化用户操作。

·用户常用操作记录定义:对某些需定义操作的功能如查询、搜索等,提供系统自动记忆和客户定制功能,系统可自动记忆用户前1~3次操作,或者用户可自定义操作记录,方便以后使用。

·大数据量表格的水平扩展要求:本系统中存在大数据量的列表,需要较大的交互界面支持,为避免水平滚动,应尽可能获取大的屏幕水平空间。

4.系统分析

在概要设计过程中,界面设计人员需要浏览需求分析报告,了解用户的工作流程,和整个系统功能,再根据这些原始需求功能,归纳整理分析,并针对用户交互设计需要,提出意见,参与系统设计。

其中包括对原始功能的分类归纳,提出系统交互需要的新功能,对用户功能实现的优先级进行定义等等。

例如,提出用户自定义快捷面板功能,常用操作自动记录功能等,需要在概要设计时尽早提出,以方便作好系统规划。

另外,需要对整个系统中的常见功能有比较清晰的了解,归纳整个系统界面交互中常见的交互形式,例如在本系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等等;只有清晰的了解整个系统需求,才能较好的把握整个界面设计的统一性。当然,这也和界面设计人员的经验有很大关系。

4.主界面设计

设计主界面,确定系统基本风格,是概要设计中的工作之一。首页主界面的主要实现功能是导航,它要达到的目的,是尽可能使用户仅通过首页面板就可以完成所有常规任务。

该主界面包含以下部分

用户信息区域 显示当前用户信息




用户导航区域
用户页面导航,收藏功能可以将当前功能页面收藏到快捷功能面板




用户导航功能树
用户页面导航,收藏功能可以将当前功能页面收藏到快捷功能面板




功能树隐藏
可水平扩展页面空间

  


桌面面板用户帮助导航
用户登录时可根据用户类型,自动加载相关使用帮助或导航。




主任务通知区域
通知用户系统业务流程中的待办事宜;通知用户办公系统相关信息。




用户快捷面板
为了能方便快捷的访问系统功能,避免每次访问树形菜单较深级次的繁琐操作,用户可将通过导航栏中的收藏按钮,将当前页面收藏到该面板中;该面板出现在所有业务页面,用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现,在其他页面以下拉菜单形式出现。




用户自定义功能区域 用户可将相关查询搜索等功能定义到首页面板,例如:最新完成报告察看、报告搜索、检验流程察看等等

5.典型界面

以下是系统中几个比较典型的界面模型。



在整个系统界面的设计过程中,需要注意整个系统的统一,设计风格要一致,界面中的交互元素,从色彩、样式到排版方式、具体位置都要具备延续性,这样才能使用户尽快习惯整个系统操作。

6.典型交互模式

界面交互中,根据功能不同,有不同的交互方式。应该尽量提取抽象,尽可能减少交互模式的种类,或者把交互方式尽可能设计的类似,以方便用户快速熟悉系统。

下面列举3个系统中比较典型的交互模式,供大家参考。


单项选择




多项选择




项目分解(GIF动画 4桢)

7.Demo开发

Demo是详细设计阶段的重要成果之一,在对系统进行详细的分析设计之后,开发出界面Demo原型,主要作用是提供给合作客户,在基本功能、系统组成和易用性上进行测试。

本系统的Demo主要包括界面的设计制作,和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用,Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范,并在以后的代码编写工作中严格执行。

本系统整个Demo包括大约50个页面,耗时月3周。

在后续的开发过程中,仍然要严格控制整个开发过程,保证整个系统界面的统一,并随时维护更新系统界面的设计。

Macromedia提供的usability tips on Flash site

Based on recommendations from top Macromedia Flash designers, developers, and usability experts we’ve collected the top ten tips for creating usable Macromedia Flash sites.

These tips are just a start and we will continue to provide more usability research, studies and articles.

1. Remember User Goals
Users typically come to a site with a goal in mind. Each link and click should meet their expectations and lead them toward their goal. When streaming your site, have key navigation links appear first, in case the user wants to get to another area in the site. Emulating common GUI elements will increase usability.
2. Remember Site Goals
Site design should reflect business or client needs, effectively communicating the main message and promoting the brand. Yet site goals are best achieved by respecting the user experience, so site structure should reflect user needs, quickly leading the user to their goal and avoiding company or regional jargon.
3. Avoid Unnecessary Intros
While intro animations are exciting, they often delay the user’s access to the information they seek. Always offer users either a Skip Intro command or alternative access to your home page. On their second visit to your home page, skip the intro animation altogether (use a client-side JavaScript cookie to accomplish this) then on the destination page give the option of returning to the animation.
4. Provide Logical Navigation and Interactivity
· Keep the user oriented: Display the previous location and guide users to their next one. Remind users where they’ve been by programming links to change color after being visited.
· Give users an easy exit from each major section of the site and an easy return to their starting point.
· Clearly indicate each link’s destination. Keep navigation structures and nomenclature visible, rather than hiding them until the user has triggered an event (such as a mouse over).
· Make sure your buttons have well-defined hit areas.
· Display primary site navigational elements first by using the streaming capabilities of Macromedia Flash.
· Support back button navigation. To do this using built-in browser forward and back navigation, separate Flash movies into logical chunks and place them on individual HTML pages. Alternatively, set up the movie to include a Flash-based Back Button that the user can use to return to a frame or scene that represents a logical previous page.
5. Design for Consistency
Consistency in user interface is the best way to improve your site’s performance. Reusing architecture elements, design elements, and naming conventions frees the user’s attention for your message while they navigate to their goal, and it also aids site maintenance. You can use Smart Clips to reuse interactive elements throughout the site, and have words and images from initial navigation links reappear on destination pages.
6. Don’t Overuse Animation
Avoid unnecessary animations. The best animations reinforce the site’s goals, tell a story, or aid in navigation. Repeated animations on text-heavy pages distract the eye from the message of the page.
7. Use Sound Sparingly
Sound should enhance your site but not be indispensable. For example, use sound to indicate that the user has just triggered an event. Always provide on, off, and volume control on screen, and remember that sound significantly increases file size. When you do use sound, Macromedia Flash will compress music into small MP3 files and even stream it.
8. Target Low-Bandwidth Users
The smaller the download, the better. The initial screen download should be no more than 40k, including all Macromedia Flash files, HTML, and images. To reduce download time, use smaller vector-based images (unless the image is a complex bitmap, in which case it’s better left as a bitmap file), and use the Load Movie action only when the user specifically requests a file. If a wait is unavoidable, provide a load time sequence with a progress indicator, and have navigation load in the first 5 seconds whenever possible.
9. Design for Accessibility
Make your content available to all users, including those with disabilities. Highly descriptive Alternate Tags allow your content to be interpreted by assistive technology. The magnifying Smart Clip for zoom is another easy-to-use Macromedia Flash feature that allows more users to see your content. For an in-depth discussion about making Macromedia Flash content accessible, see the Macromedia Flash Accessibility site.
10. Test for Usability
Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals. Even compact Macromedia Flash animations can delay users from reaching their goal, so use Macromedia Flash’s built-in Bandwidth Profiler (located in the View menu in Test Movie mode)to analyze how well your site will perform over various bandwidths. Re-test the site each time you make even small changes. Make sure your site testers match the demographic of your site’s anticipated audience—especially if the anticipated audience includes users at various levels of comfort with site navigation.
2004年12月25日

 [转帖]专访2Advanced[推荐]
作者:Translated by pzf@SMTH
byron@gpbrand.com

自称为“革命性设计技术”之主的2Advanced向Ultrashock的Craig Grannell阐述了动画理念和Flash设计技术。

在上个世界90年代末,人们对糟糕、丑陋的web商业作品变得越来越厌倦,糟糕的作品处处皆是。那么你该怎么办?当然,成立自己的设计机构。无论如何,不象那些转瞬即逝的小公司消失的甚至连一些痕迹都找不到,2Advanced经历了从小到大的发展过程,现在已经成为了公认的Flash设计技术的一支领先力量。

尽管如今拥有了一批高端的客户,包括Bacardi,福特汽车,AOL,NHL的匹兹堡企鹅队以及华纳兄弟等等,作为现今的主席和首席执行官的Eric Jordan的个人作品展示平台,2Advanced的开端是相当的不起眼。而在2000年之后发生了一些历史性的事件,促成了公司的成长和正规化。

“我们现在拥有着一批独具才能、但却非常均衡的人员组合”,首席运营官Tony Novak说道,“我们团队有着非常宽广的知识面,使得我们在各种各样的情况面前可以应付自如。由此导致了在Flash、交互性、视频、动画、3D以及传统应用方案的2Advanced风暴。事实上,团结协作在这个团队中变得越来越流行。

或许令人惊奇的是,传统的应用解决方案经常会转换为高级的Flash工程,象Eric Jordan介绍的那样:“一个公司往往通过一台个人计算机的操作界面来进行物理上的机械控制,而我们则通过Flash技术来创造这些界面,发送、收取并对这些界面进行监视。”Flash使得团队可以传造出一个能让用户直观使用的界面,以次来对他们所居住的建筑或使用的机
器进行操作和控制。

2Advanced大力拥护Macromedia的得意应用程序的真正精粹在于:“它对感觉、融合的动作、艺术、声音和交互性有着吸引力,制造一种体验大大多于完成一个工程。”Eric解释到,“你可以抓住一个人的想象力,以他们在网上从未敢想象过的方式,一种你不能用静态设计来达到的方式。它同时也是自我包含的,HTML会产生不可避免的终端和暂停,Flash则要优雅许多。”2Advanced的艺术总监Shane Mielke(Pixelranger的owner)补充说:“利用Flash,你可以把电视里的运动法则照搬到web上去,Flash会在同一个市场层上胜出,利用它显而易见的交互性。”他认为Flash为web的远景充满了燃料,它将是一个媒体的敛合体。

交互性是2Advanced作品的一个重要因素。因为Flash,HTML重重束缚的拘谨被去除,公司也发现它可以制造经久不衰的组件来加强用户的体验。Eric告诉我们:“因为声音和动作可以组合为一体,因此我们可以创造交互性的环境,仿效一切我们所能想象到的。”Tony插话:“这同样使我们在作品中添加情感,这使得人们可以从千千万万个URL中区别出我们的作品。”

盘子里的Flash?

按此在新窗口浏览图片
但是Flash真的能在网上设计中体现出如此大的优势吗?或者它现在已经达到如此的高度会不会已经开始变得过时?Eric回答道:“不一定。Flash仍然很令人兴奋,目前仍是唯一一种激发人们对web兴趣的方法。”他不能预见2Advanced停止使用Flash的日期:“当宽带普及后,Internet就像电视那么快时,会有新的东西诞生,但在这之前,Flash是一个好的跳板。”

尽管2Advanced把Flash作为一个每天必须进行的项目,这个团队仍然希望有更新的发展。Eric希望早日摆脱整合视频和播放质量效果等问题的厌烦。“目前,你仍然需要额外的程序来创造特殊效果,输出图片序列并且把它们导回Flash中。”而Pixelanger希望增加可用性,就像可以直接编写HTML那样简单易行;Tony则希望ActionScript变得更加强大:“当我们为Flash电影添加高级效果时,我们需要更多的控制方法、运行库和底层的控制手段。”这样一个公司对抄袭、盗版头疼不已,Tony同时希望能看到对SWF文件更强的保护手段,让源文件代码远离那些爱Copy的手。

所有这些技术如果没有专家解释的话都会是无用的,2Advanced在他们的动画中包含了各种各样的魔术式的小技巧–他们任何一个工程的重要组成因素。Eric解释说:“对于运动图形你需要掌握的最大的技巧就是要有很强的节奏感,去感觉一下科幻电影中物体的运动方式,你会发现什么的。”

他继续解释说你必须仔细检查每一帧,保证每个物体的动作形成一个完美的流程。“你必须明白物体运动的物理原理,当一个物体远离视野的时候会慢慢的减速,这给人一个活生生的运动的感觉。”

Pixelranger认为创造动画时速度是一个有用的因素。“眼睛可以被心理和深度感觉所欺骗,如果事情发生的相当慢,眼睛可以慢慢地去分解整个的过程。如果速度相当的快,会使人们不禁再看一遍去看究竟发生了什么。”

如此的高速同样可以帮助提高带宽,Eric补充说:“高速度动画的图像可以拥有较低的质量,因为运动中的图形总会有些模糊,所以图形的细节往往会被人忽视。这样动画的大小就会减小。”

充分准备

按此在新窗口浏览图片
你必须小心,避免让老的PC,或者MAC机因为迟缓的Flash插件而停顿。Eric说:“我们优化一切,无论在何种媒介上演示。不同的平台和图形芯片是影响动画流畅度的因素,你不会预见可能发生的差别。因此你必须对最坏的情景做好充分的准备。”

选择一个中等的帧速率是2Advanced的主要解决办法,另外他们在创建符号(Symbol)时也会非常小心,目的是让符号在Flash电影中得到重复的使用。另外避免大的图形、在同一时刻避免作太多的事情也是其他很明显、但是经常被忽略的细节。

那么2Advanced的未来是怎样的?“我们决定永远做交互性的锋刃,因为我们相信新媒体技术仍然会继续下去,”Tony说,“我们努力的研究视频和3D,以期在Flash中应用。”他同时声明2Advanced并不在乎数量的增长:“作为一个规模不断增长的公司,未来将会更难以维持,这已被许多这个行业内的失败所证明。你最终只会为收益率而接受项目。”同时驱使公司进步的更多的是创造,而不是钱。Eric说:“2Advanced给了人们吸收Flash潜能和交互性设计的机会,我们一直承担着风险,但是这样做刺激着我们设计者的创造性,使我们沉浸在motion-rich的环境而不是普通、静态的网站。”


例子

1.Bacardi Sound Stuidio(http:\\www.bacardidj.com

按此在新窗口浏览图片
这个正在进行中的独特的、革命性的工程仿效一个音序器,它使你从数打定制好的音乐片段中创造自己的音乐。这个基于Flash MX的产物包含着一大堆复杂的ActionScript,驱动着一个真实的音乐生产环境的功能。后台是由ASP.NET和Microsoft SQL Server构成的强大的管理和控制系统。

2.Josh Todd (http:\\www.joshtodd.com)

按此在新窗口浏览图片

这个全Flash工程是为音乐人Josh Todd所设计的,他希望借此网站来吸引注意力,与唱片的标签保持独立(?)。设想的感觉是黑暗、肮脏和交互性的,这使得2Advanced将之发展成了一种不同的视觉风格。他们使用了AfterEffects创造一些复杂的过渡和效果,比如燃烧的照片、滑动的生锈铁板和电线从导航菜单上掉下等等。这个导航效果使用ActionScript创建,给人一种真实的运动感觉。

3.Skyworks, Inc (http:\\www.skyworksinc.com)

按此在新窗口浏览图片

这个项目整合了Flash和HTML,针对Skyworks的新公布的商标和识别系统,创造了一个给人一种干净、有条理的感觉的网站。因为Skyworks出售电话相关的产品,2Advanced使用了曲线化的设计来象征最终的产品。一个电话被描述成一个面向世界的窗口,这被用来形容这个网站也像一个展示Skyworks做什么的窗口。独特的,被添加到收藏的页面可以通过Flash来传递变量。

2004年12月23日

苍蝇界面

I have seen one of the finest instances of user interface design ever, and I saw it in the men’s room at Schipol airport in Amsterdam.

我曾经看见过一个及其出色的用户界面设计,我记得我是在阿姆斯特丹(荷兰首都)的Schipol机场的男士洗手间看到它的。

In each of the urinals, there is a little printed blue fly. It looks a lot like a real fly, but it’s definitely iconic – you’re not supposed to believe it’s a real fly. It’s printed near the drain, and slightly to the left.

在每个小便池中,印着一个小绿头苍蝇。看上去它非常像一只真苍蝇,但事实上它只是个图案——当然,设计者并不需要你认识到这一点。它印在排水口附近,稍稍偏左一点的地方。

Fly

I asked a user interface designer I knew at Nortel about this, who happened to be Dutch and who was familiar with this particular piece of toilet technology. And he told me that washrooms are much cleaner when these flies are there. Presumably because they encourage, in a very subtle way, good aim.

就此事我问了一个用户界面设计师,他正好去过荷兰并且熟知洗手间里的情况,尤其是我感兴趣的这部分。他告诉我说,当印有这些苍蝇以后,洗手间里干净了许多。推测起来,设计人员以一种非常狡猾的方式,给了使用者一个绝妙的目标。

Fly

Now I love this kind of interface, because it’s so psychologically clever. If they had put big circular targets, and arrows with a little printed message pee here! (like it would probably be if anybody ever tried such a thing in America), it would backfire. A certain percentage of men would deliberately try to disobey this instruction.

现在,我非常喜欢这类交互界面,因为从心理学上看,它非常地聪明。如果给小便池的排水口设计为一个大而圆的标靶,并用带有印着往这撒文字的箭头作指示(如果你曾在美国上过厕所你很可能见过我所描述的小便池),那么势必会引起大家的逆反心理。将会有一部分人故意地不服从上面的指示。

But this innocuous little fly just invites being peed upon, if such a thing makes any sense, but in a non-insistent, gentle, and entirely effective way. If you’re the user interface specialist Donald Norman, I suppose you’d say the fly affords being peed on.

但是这只无伤大雅的小苍蝇却可以“邀请”大家这么做。如果这件事有什么意义的话,也是在以一种不经意的,温和的,并且非常生动的方式感染你。即使你是用户界面的专家Donald Norman,我想你也会毫不客气地说“这只苍蝇活该被淹死”。

I would love to know if Dutch toilet user interface designers (there’s a title for a business card!) tried focus groups with other icons – bees, smiley faces, eye icons, circles, letters? I would love to know what process they used to decide that it should be slightly to the left.

我很想知道荷兰洗手间设计者们是否尝试过别的图——比如蜜蜂,笑脸,眼睛,圆圈和文字?我也想知道什么使得他们决定苍蝇图标应该稍稍偏左一点。

My hat is off to the inventor of this design.

我向此设计的发明者脱帽致敬!


Update 更新:
Several prominent blogs linked to this article, which caused dozens of other blogs to link to it, which caused…

几个著名的站点链接了这篇文章,导致更多的其它站点链接到它,以至于…

So I’ve now had e-mails from some friendly Dutch industrial designers and other interface professionals, who are happier than one might normally predict to tell me the details of their nation’s clever solutions for pee-pee time.

 现在,我收到了一些友好的荷兰工艺设计师和一些界面专家寄过来的Email,他们都非常自豪地告诉我他们民族对小便问题的解决之道。

A Google search onvlieg urinoir turns up some interesting stuff. For those who don’t read Dutch (which includes me – I can make out the gist if I squint real hard and pretend it’s badly-spelled German), here are the interesting findings: (Thanks to correspondents Branko Collin and Inne ten Have)

用Google搜索vlieg urinoir(男用便池)会出现许多有趣的资料。对于那些不能理解荷兰语(包括我——只有将它看做拼写不正确的德文时我才能明白个大概),这里有一些有趣的新发现(感谢与我通信的Branko和Inne ten Have)。

A discussion about the question why the fly is on the left and not in the middle:

 关于苍蝇为什么在左边而不在中间的讨论:

  • Men are mostly righthanded, so they hold their little fella slightly aimed to the left. (Really? Wouldn’t the pull be more to the right?)
  • 1 人们大多习惯用右手,他们使用他们的小伙伴时目标将会稍稍偏左。(真的吗?难道不会由于拉力更偏右)
     
  • Pure physics: if the fly were in the middle, all the splatter would come back; now it splashes to the side
  • 2 纯物理角度:如果苍蝇在中间,所有液体都要弹回来;现在它们弹向另一边。

A new technology is being introduced: this is a plastic strip that will change color when peed upon. (This seems to me like a reasonable next step. User Interfaces typically benefit from immediate feedback, after all.)

一种技术被提出:有一种塑料条,当撒尿到上面时会改变颜色。(我认为这么做是合理的。毕竟,好的用户界面就在于用户对它的即时反馈。)

An alternate design shows a urinal with the image of a burning candle, right in the center this time. Apparently, it is special that in this case the image is part of the ceramic, which saves on cleaning. The flame is apparently an invention by scientists of a German university so that men can quench their boyhood desire to become a fire fighter. (!)

有一种与此相当的设计,在便池的中间显示一个燃烧着的蜡烛图形。显然,在这种情况下蜡烛图形是陶瓷的一部分,而有了它服务员可以减少清洁次数。这是德国大学的科学家们想到的,这样人们可以在洗手间实现他们儿时救火的理想。


Update 2 更新2
After the Dutch industrial designers weighed in, I started getting e-mail from British folks knowledgeable in Victorian toilet technology. They have been able to provide the most likely origin of the idea (thanks to correspondents Rupert Goodwins and Jez):

更新2
在荷兰工艺设计者参与后,我又收到了对维多利亚女王时代的洗手间技术有研究的英国专家的Email。他们提供的想法的起源极为相似(感谢与我通信的Rupert Goodwins 和 Jez):

British Victorian Urinals had various targets to aim for, some literally being a target like on an archery range.

英国维多利亚女王时代的便池中有多种多样的用于瞄准的目标,有一些差不多就像射箭场的靶子。

My favourite was that of a Bee to aim for, much like that of the fly used by the Dutch, but as an (British) English speaker it is worth noting that Latin for Bee is apis, so a rather erudite visual pun in a lavatorial setting is quite unexpected and amusing

我最喜欢的是将Bee作为目标,与荷兰用的苍蝇很类似。但是作为一个说英语的人你必须注意到拉丁文中Bee是蜜蜂,一个更为栩栩如生的双关语诞生在洗手间的便池中,这是当初意料不到的,也是挺有趣的一件事。

[ed: I wonder if the Dutch had English-language punnery in mind when they made the animal in their pissoirs a fly - 'cause you have to undo one to pee on one. Hee hee!]

【附:我感到惊讶的是,当荷兰人将苍蝇印在便池上的时候,他们头脑中是否想到了英语的双关-因为你不得不放飞一个而撒向另一个。呵呵

最近在研究FLASH的控件,发现个好地方可以载到一些MACROMEDIA的官方控件:

点击这里查看

FLASH越来越象DW了,不觉得是件好事.