2007年03月20日

网站产品设计的背景

网站设计可以借鉴其他设计领域,我们不能以无知的涂鸦为起点来对待它。网站和互联网及相关设计实践均从现有的知识中吸取了养分。网站设计所借鉴的领域和技术通常具备很好的延展性。

  产品设计与软件设计都必须考虑到人的身体和心理方面的因素及局限性。其中身体因素体现在人类工程学的运用上。心理方面则体现在人类认知以及计算机领域中的人机交互(HIC)概念。例如,鼠标和键盘的设计属于人类工程学范畴,而人类认知专家则可以解答一个菜单中包括多少项目是人们可以接收的;或者一个网页页面的载入在多长时间以内可以保证用户不感到厌烦或疲惫。

  另外,建筑学知识也能为网站设计师提供帮助(注意“信息构架学”术语的采用),尤其是在需要确定某一“建筑”的功能时,比如三维菜单、导航菜单、对象交互及工作环境等结构的创建。与产品设计相同,建筑学也需要对材料和复杂程序的充分理解,并进一步将设计思路转变为可实现操作的方案。

  游戏设计对网络设计也具有从现实到想象空间的指导作用。在游戏中,交互的外形和质量是十分重要的,知识人机交互的方式不是图形,而是密码。游戏中的工具应该简单易学,操作可通过直觉意识控制,外部环境应合理而令人信服,叙述则明确而引人注目。游戏还可以遵循非线性的发展顺序,及用户可以在导航菜单目录中自由选择游戏阶段,甚至对其进行操控和改动。

   另一个由想象力领航的文化领域是电影及其他艺术媒体,他们的故事叙述和场景设置和变换、情节发展等方面的理解对网站设计也不无裨益。泰德。尼尔森认为“交互设计是电影制作的一个方面”。这些特点在网站设计中的重要性正逐步增强,因为互联网的使用已经远远超越了其最初的商业用途。

  回到对商业设计的世界中,对视觉交流和平面印刷知识的掌握也有益于网站设计,特别是对图文混排的网站来说。这些与信息设计相关的特殊技能对于创建精妙而实用的信息集成式网站产品也具有难以估量的价值。

  适当地学习其他学科的技能和知识有助于深化对网站设计的理解,并将最终有助于这个学科的发展。网站的开发是一个需要多学科信息输入的复杂的商业过程,在接触这些学科独特的产品方案过程中,我们就能了解它们各自发展成型的过程和途径,以及它们与其他学科结合并将自身的创造力转变为现实的方法。当然,网站设计并不是这些技术的简单重叠。互联网和数字计算的意义是如此深远,就长远来看,为了真正认识到网络可能带来的利益,我们必须超越从别的学科中吸取的技术基础,必须走得更远。

 

2007年02月13日

网站推荐机制是电子商务或内容网站的核心功能之一。例如你在一个网站买了一本书后,网站会推荐其他你可能会感兴趣的书。这被认为是亚马逊等电子商务巨头成功的关键。本文对几个出色的推荐系统进行了较透彻的分析。

2006年10月,Netflix搞了一次不寻常的有奖竞赛。这家网上DVD租赁公司开出奖金一百万美元,奖励给能把他们网站的产品推荐机制提高10%的人。Netflix 以富有创新精神和闯劲著称。而一百万美元的奖金对于这样一家公司来说,其实并不象听起来那么多。

有奖竞赛还在进行当中(“至少要进行到2011年10月2日”)。所以这是一场炒作活动还是希望花小钱进行研究,我们还不得而知。而对Netflix来说,更好的推荐机制是必不可少还是锦上添花?今天,Netflix正面对从沉睡中醒来的巨人BlockBuster的挑战(参见译言前文),因此它必然要寻找制胜的先机。出色的推荐机制会留住老用户,吸引新用户。比如当一个用户还DVD时,系统会推荐给他/她可能会喜欢的另一部电影。这就增加了这个用户回来再租DVD的可能。

浏览与推荐

一个出色的推荐机制不光对Netflix,对其他网络企业也非常重要。这是因为用户的网上活动分为两类:搜索和浏览。当消费者明确知道她想要什么的时候,她搜索。但当她不太清楚想要什么的时候,她浏览。浏览活动为推荐系统带来了绝好的机会。因为当用户没有集中注意力在找她想要的东西时,她对外来的建议是敞开的。

在浏览过程中,用户的注意力(和他们的钱),都等着你去抓住。通过向用户展示有吸引力的东西,网站可以使交易成功的可能最大化。所以如果网站能增加给用户提供好推荐的几率,就能赚更多钱。显然这不是一个容易解决的问题,但解决这个问题带来的好处是巨大的。推荐的几种方式如下:

个性化的推荐--根据用户过去在网站的行为进行推荐
社会化推荐--根据类似用户过去在网站的行为进行推荐
基于产品的推荐--基于产品本身的特性进行推荐
以上三者的混合

我们现在通过实例详述上述方式。包括老牌网站如亚马逊 Amazon,以及新秀如Pandora(译者:一个收听网上音乐的站点)和del.icio.us(译者:著名的社会化书签网站)。

亚马逊--推荐之王

亚马逊被广泛认为是网上购物行业的领袖,特别是推荐机制的使用。过去十几年间,该公司投入了大量金钱和脑力开发推荐机制,来促使用户更多地购物--包括对你浏览历史、购买历史,以及其他用户购买数据的分析。让我们看看亚马逊推荐机制的几个方面。下面是登陆到我的亚马逊帐户后网页显示的主要部分:

这部分是社会化推荐。注意,非常量化的分析,给我一个基于数据统计的理由为什么我应该买这套衬衣。而同时这又是个性化的推荐,因为它基于我刚刚点击查看的产品。

这一部分是“基于产品的推荐”,具体说是新书推荐。点击“为什么我们推荐这本书给你?”的链接会显示我的购买历史。因此这同时也是个性化推荐--基于我过去行为的推荐。

这一页上有其他四个部分采用上述推荐机制的结合。我们用下表概括:

亚马逊个性化推荐系统
你的浏览历史 你的购买历史
实际浏览商品 新产品(基于产品的推荐)
相关商品(基于产品的推荐) 相关商品(基于产品的推荐)
别人购买的(社会化推荐) 别人购买的(社会化推荐)

很自然,这个系统是对称和覆盖全面的。所有推荐都基于用户个人行为,加上商品本身,或者是其他用户在亚马逊的活动。不管是因为你以前购买过相关产品,还是因为其他很多用户都喜欢,亚马逊每推荐给你一件商品,都增大你把它放进你的购物筐的可能。

超越亚马逊
亚马逊的推荐系统是程序自动化和用户相关购物信息天才集合的经典之作。亚马逊花了十几年的时间建立和完善了这个系统。这个系统基于产品和相关用户的巨大数据库;记录的信息包括你在过去几年或几分钟内做过什么。其他新公司如何与之竞争呢?

出乎意料的是,有办法竞争。答案来自与网络购物没什么关系的学科--遗传学。如你所知,遗传学研究DNA片段--基因,如何承载影响人类特性和行为的密码。比如一家人因为他们有某些基因是相同的,因此长相和行为有类似之处。遗传学是一门有150年历史的学科,在医学和历史学的研究中都是一个重要工具。但遗传学一个出乎意料的应用于2000年1月6日出现--Time Westergren和他的朋友们决定把遗传学的概念引入到音乐中。

潘朵拉(Pandora)--基于遗传学的推荐系统
音乐染色体组项目的推出,目的在于把音乐解析成为最基本的基因组成。它的基本想法是:我们因为音乐的某些特性喜欢音乐--那么为什么不能根据音乐的某些相似之处设计出一套推荐系统呢?这类推荐系统应该属于基于产品的推荐。但具有深刻创新意义的是,产品(音乐产品)的相似性,通过“基因”组成来衡量。

(译者:上图是Pandora音乐播放器向用户解释为什么播放一首歌曲:“基于你告诉我们的信息,我们播放这段音乐。因为这段音乐微妙地使用人声合声,混合了声学和电子乐器,有以人声为核心的审美特点,音调以大调为主,以及其他音乐基因组项目中发现的相似性。”)

在奋斗了几年,分析了海量的音乐后,这个项目积累了足够的数据,并推出了名为Pandora的在网上收听音乐的服务。Pandora 由于准确的推荐和用户低成本进入(译者:指用户可以很容易地就试用Pandora的服务)取得巨大成功。用户只需选一名歌手,或一首歌,就可以建立一个用户自己的电台,播放类似的音乐。

这种“即刻满足感”是很难抗拒的。因为Pandora 了解音乐相似性背后的因素,它不需要了解用户的好恶,就可以把用户黏住。确实,Pandora 需要把握用户的口味或记忆--但这正是蕴藏在音乐本身的DNA中了。当然Pandora有时并不完美,会播放不对用户口味的音乐。但这很少发生。

很自然地我们会问:这个基于基因的推荐方式能不能应用于其他产品--如书籍、电影、酒、餐馆、或旅游点呢?对于每一类产品,它的基因又由什么因素组成呢?比如说,对葡萄酒来说,它的基因是否包括对酒的口味的描述呢:黑莓口味、土味、果香型、复合型、混合型,等等。而书籍的基因是否是描述故事情节的用语呢?如果基因真的是让某一个物体在我们头脑中产生独特形象的因素,对于不同的事物我们应该可以把他们的基因定义出来。其实在过去的几年间,我们已经在互联网上做这样的事了。这就是“标签(tagging)”。

Del.icio.us -标签会成为基因么?
Pandora 的初始投入是巨大的。因为成千上万的音乐需要人工来鉴定。社会化书签网站中首屈一指的 del.icio.us (见译言有关del.icio.us的译文)则采用不同的办法--让用户自己来鉴定、标识。这种自组织的方式相当成功,del.icio.us 很快在最初的使用者中流行起来。今天,del.icio.us 已经不仅仅是一个书签网站--它还是一个新闻网站和搜索引擎。但del.icio.us是否也是一个推荐系统呢?

答案是肯定的。这是一个非常简明的推荐系统,它指基于一个基因--那就是一个标签。例如在上图中,我们看到最受欢迎的加了“Linux”标签的网页链接,同时还看到相关链接如“Open source (开源软件)”和“ubuntu (Linux 操作系统的一个版本)”。而一个更令人兴奋的推荐系统是基于多个标签的吻合。然而由于算法还不完善,这一点的作用并不明显。但至少,这一功能对于Read/WriteWeb 的网页(译者:原文的站点)是有效的,在下图中,可以看到右侧显示的与 Read/WriteWeb 类似的其他博客。

因此,del.icio.us 的机制有可能发展成为一个有趣的自助分类、组织的推荐系统。如果有足够的用户并逐步调整系统,用群体的力量加标签的方式可以建立起一个对书、葡萄酒、音乐同样有效的推荐系统。前题是,标签要准确到能够成为被标签对象的基因!

结论
推荐引擎是网上电子商务系统和用户体验的一个重要组成部分。网上零售商们有强烈的意愿向那些正在浏览的用户提供推荐,以驱使他们购买。亚马逊有一套非常出色的个性化推荐系统,是这个领域的领先者。其他网上零售商面临的问题是缺乏用户信息和软件构架不完善。

最新的推荐引擎,如受遗传学启发的Pandora和基于群体社会化标签的del.icio.us都是非常有趣的新发展。这些系统的长处在于“即刻满意度”--不需要用户提供他们的偏好和过去的浏览或消费历史。不管未来如何发展,亚马逊、Pandora和del.icio.us目前展示了极其出色的推荐技术。我们向您推荐这几个系统,并对未来拭目以待。

2006年09月14日
刘韧
  1. 70%时间做产品经理=策划产品→讨论创意→细化产品→和UI、程序员讨论→画草图→UI设计界面+程序员编写代码→0.1版尽早上线听取用户反馈,让用户做产品测试和产品修改。我已经从6年时间完成从一个记者向一个互联网产品经理过渡,下一步是如何提高作为一个产品经理素质的问题。
  2. 20%时间做主持人=视频直播的总裁访谈=让总裁将过去的故事,而非现在的产品宣传和未来的理念宣讲。这样文字版可以出《知识英雄》系列,同时也为《中国信息产业史》做素材准备。我已经做了15年记者。主持人是记者的一种表现形式。主持人=将更多的经理用在采访现场。采访现场就作品本身。我主要将重心前移,就可以了。《5G评论》首先拓展到上海。老华已经答应出面组织。有老话这样的强人出面,对DoNews上海未可量也。其实深圳的笨狸、老康也都是强人,如果他们也愿意做,那DoNews的原创IT评论,就可以渐成规模了。
  3. 10%的时间做公益事业=斗牛士书店+介绍朋友认识朋友。创造价值一定会收获。做公益事业因为不受短期的商业利益限制创造的价值会更多,从长远看价值回报会更多。当两个有能力的朋友认识了,剩下的就是祝福他们共同发展。

一、LiveJournal发展历程

LiveJournal是99年始于校园中的项目,几个人出于爱好做了这样一个应用,以实现以下功能:

  • 博客,论坛
  • 社会性网络,找到朋友
  • 聚合,把朋友的文章聚合在一起

LiveJournal采用了大量的开源软件,甚至它本身也是一个开源软件。

在上线后,LiveJournal实现了非常快速的增长:

  • 2004年4月份:280万注册用户。
  • 2005年4月份:680万注册用户。
  • 2005年8月份:790万注册用户。
  • 达到了每秒钟上千次的页面请求及处理。
  • 使用了大量MySQL服务器。
  • 使用了大量通用组件。

二、LiveJournal架构现状概况

livejournal_backend.png

三、从LiveJournal发展中学习

 

LiveJournal从1台服务器发展到100台服务器,这其中经历了无数的伤痛,但同时也摸索出了解决这些问题的方法,通过对LiveJournal的学习,可以让我们避免LJ曾经犯过的错误,并且从一开始就对系统进行良好的设计,以避免后期的痛苦。

下面我们一步一步看LJ发展的脚步。

1、一台服务器

一台别人捐助的服务器,LJ最初就跑在上面,就像Google开始时候用的破服务器一样,值得我们尊敬。这个阶段,LJ的人以惊人的速度熟悉的Unix的操作管理,服务器性能出现过问题,不过还好,可以通过一些小修小改应付过去。在这个阶段里LJ把CGI升级到了FastCGI。

最终问题出现了,网站越来越慢,已经无法通过优过化来解决的地步,需要更多的服务器,这时LJ开始提供付费服务,可能是想通过这些钱来购买新的服务器,以解决当时的困境。
毫无疑问,当时LJ存在巨大的单点问题,所有的东西都在那台服务器的铁皮盒子里装着。

LJ-backend-7.png

2、两台服务器

用付费服务赚来的钱LJ买了两台服务器:一台叫做Kenny的Dell 6U机器用于提供Web服务,一台叫做Cartman的Dell 6U服务器用于提供数据库服务。

LJ-backend-8.png

LJ有了更大的磁盘,更多的计算资源。但同时网络结构还是非常简单,每台机器两块网卡,Cartman通过内网为Kenny提供MySQL数据库服务。

暂时解决了负载的问题,新的问题又出现了:

  • 原来的一个单点变成了两个单点。
  • 没有冷备份或热备份。
  • 网站速度慢的问题又开始出现了,没办法,增长太快了。
  • Web服务器上CPU达到上限,需要更多的Web服务器。

3、四台服务器

又买了两台,Kyle和Stan,这次都是1U的,都用于提供Web服务。目前LJ一共有3台Web服务器和一台数据库服务器。这时需要在3台Web服务器上进行负载均横。

LJ-backend-9.png

LJ把Kenny用于外部的网关,使用mod_backhand进行负载均横。

然后问题又出现了:

  • 单点故障。数据库和用于做网关的Web服务器都是单点,一旦任何一台机器出现问题将导致所有服务不可用。虽然用于做网关的Web服务器可以通过保持心跳同步迅速切换,但还是无法解决数据库的单点,LJ当时也没做这个。
  • 网站又变慢了,这次是因为IO和数据库的问题,问题是怎么往应用里面添加数据库呢?

4、五台服务器

又买了一台数据库服务器。在两台数据库服务器上使用了数据库同步(Mysql支持的Master-Slave模式),写操作全部针对主数据库(通过Binlog,主服务器上的写操作可以迅速同步到从服务器上),读操作在两个数据库上同时进行(也算是负载均横的一种吧)。

LJ-backend-10.png

实现同步时要注意几个事项:

  • 读操作数据库选择算法处理,要选一个当前负载轻一点的数据库。
  • 在从数据库服务器上只能进行读操作
  • 准备好应对同步过程中的延迟,处理不好可能会导致数据库同步的中断。只需要对写操作进行判断即可,读操作不存在同步问题。

5、更多服务器

有钱了,当然要多买些服务器。部署后快了没多久,又开始慢了。这次有更多的Web服务器,更多的数据库服务器,存在 IO与CPU争用。于是采用了BIG-IP作为负载均衡解决方案。

LJ-backend-11.png

6、现在我们在哪里:

LJ-backend-1.png

现在服务器基本上够了,但性能还是有问题,原因出在架构上。

数据库的架构是最大的问题。由于增加的数据库都是以Slave模式添加到应用内,这样唯一的好处就是将读操作分布到了多台机器,但这样带来的后果就是写操作被大量分发,每台机器都要执行,服务器越多,浪费就越大,随着写操作的增加,用于服务读操作的资源越来越少。

LJ-backend-2.png

由一台分布到两台

LJ-backend-3.png

最终效果

现在我们发现,我们并不需要把这些数据在如此多的服务器上都保留一份。服务器上已经做了RAID,数据库也进行了备份,这么多的备份完全是对资源的浪费,属于冗余极端过度。那为什么不把数据分布存储呢?

问题发现了,开始考虑如何解决。现在要做的就是把不同用户的数据分布到不同的服务器上进行存储,以实现数据的分布式存储,让每台机器只为相对固定的用户服务,以实现平行的架构和良好的可扩展性。

为了实现用户分组,我们需要为每一个用户分配一个组标记,用于标记此用户的数据存放在哪一组数据库服务器中。每组数据库由一个master及几个slave组成,并且slave的数量在2-3台,以实现系统资源的最合理分配,既保证数据读操作分布,又避免数据过度冗余以及同步操作对系统资源的过度消耗。

LJ-backend-4.png

由一台(一组)中心服务器提供用户分组控制。所有用户的分组信息都存储在这台机器上,所有针对用户的操作需要先查询这台机器得到用户的组号,然后再到相应的数据库组中获取数据。

这样的用户架构与目前LJ的架构已经很相像了。

在具体的实现时需要注意几个问题:

  • 在数据库组内不要使用自增ID,以便于以后在数据库组之间迁移用户,以实现更合理的I/O,磁盘空间及负载分布。
  • 将userid,postid存储在全局服务器上,可以使用自增,数据库组中的相应值必须以全局服务器上的值为准。全局服务器上使用事务型数据库InnoDB。
  • 在数据库组之间迁移用户时要万分小心,当迁移时用户不能有写操作。

7、现在我们在哪里

LJ-backend-5.png

问题:

  • 一个全局主服务器,挂掉的话所有用户注册及写操作就挂掉。
  • 每个数据库组一个主服务器,挂掉的话这组用户的写操作就挂掉。
  • 数据库组从服务器挂掉的话会导致其它服务器负载过大。

对于Master-Slave模式的单点问题,LJ采取了Master-Master模式来解决。所谓Master-Master实际上是人工实现的,并不是由MySQL直接提供的,实际上也就是两台机器同时是Master,也同时是Slave,互相同步。

Master-Master实现时需要注意:

  • 一个Master出错后恢复同步,最好由服务器自动完成。
  • 数字分配,由于同时在两台机器上写,有些ID可能会冲突。

解决方案:

  • 奇偶数分配ID,一台机器上写奇数,一台机器上写偶数
  • 通过全局服务器进行分配(LJ采用的做法)。

 

Master-Master模式还有一种用法,这种方法与前一种相比,仍然保持两台机器的同步,但只有一台机器提供服务(读和写),在每天晚上的时候进行轮换,或者出现问题的时候进行切换。

8、现在我们在哪里

LJ-backend-6.png

现在插播一条广告,MyISAM VS InnoDB。

使用InnoDB:

  • 支持事务
  • 需要做更多的配置,不过值得,可以更安全的存储数据,以及得到更快的速度。

使用MyISAM:

  • 记录日志(LJ用它来记网络访问日志)
  • 存储只读静态数据,足够快。
  • 并发性很差,无法同时读写数据(添加数据可以)
  • MySQL非正常关闭或死机时会导致索引错误,需要使用myisamchk修复,而且当访问量大时出现非常频繁。

9、缓存

去年我写过一篇文章介绍memcached,它就是由LJ的团队开发的一款缓存工具,以key-value的方式将数据存储到分布的内存中。LJ缓存的数据:

  • 12台独立服务器(不是捐赠的)
  • 28个实例
  • 30GB总容量
  • 90-93%的命中率(用过squid的人可能知道,squid内存加磁盘的命中率大概在70-80%)

如何建立缓存策略?

想缓存所有的东西?那是不可能的,我们只需要缓存已经或者可能导致系统瓶颈的地方,最大程度的提交系统运行效率。通过对MySQL的日志的分析我们可以找到缓存的对象。

缓存的缺点?

  • 没有完美的事物,缓存也有缺点:
  • 增大开发量,需要针对缓存处理编写特殊的代码。
  • 管理难度增加,需要更多人参与系统维护。
  • 当然大内存也需要钱。

10、Web访问负载均衡

在数据包级别使用BIG-IP,但BIG-IP并不知道我们内部的处理机制,无法判断由哪台服务器对这些请求进行处理。反向代理并不能很好的起到作用,不是已经够快了,就是达不到我们想要的效果。

所以,LJ又开发了Perlbal。特点:

  • 快,小,可管理的http web 服务器/代理
  • 可以在内部进行转发
  • 使用Perl开发
  • 单线程,异步,基于事件,使用epoll , kqueue
  • 支持Console管理与http远程管理,支持动态配置加载
  • 多种模式:web服务器,反向代理,插件
  • 支持插件:GIF/PNG互换?

11、MogileFS

LJ使用开源的MogileFS作为分布式文件存储系统。MogileFS使用非常简单,它的主要设计思想是:

  • 文件属于类(类是最小的复制单位)
  • 跟踪文件存储位置
  • 在不同主机上存储
  • 使用MySQL集群统一存储分布信息
  • 大容易廉价磁盘

到目前为止就这么多了,更多文档可以在http://www.danga.com/words/找到。Danga.comLiveJournal.com的同学们拿这个文档参加了两次MySQL Con,两次OS Con,以及众多的其它会议,无私的把他们的经验分享出来,值得我们学习。在web2.0时代快速开发得到大家越来越多的重视,但良好的设计仍是每一个应用的基础,希望web2.0们在成长为Top500网站的路上,不要因为架构阻碍了网站的发展。

参考资料:http://www.danga.com/words/2005_oscon/oscon-2005.pdf

2006年09月10日
Note that the conversions in this color codes chart are best described as "nominal". They will produce an invertible conversion between the RGB code and a subset of CMYK; that is, one can take an RGB color code and convert to certain CMYK colors, and from these CMYK colors obtain the matching, original RGB codes. However, conversion of CMYK colors to RGB cannot be reversed; this means, given a CMYK color code which is converted to RGB, performing the former conversion may not give the original CMYK color. In addition, CMYK colors may print differently from how the RGB colors display on a monitor. There is no single "good" conversion rule between RGB and CMYK, because neither RGB nor CMYK is an absolute color space.
The Pantone Matching System (PMS) allows users to mix percentages of base inks (like CMYK) to create new colors, either physically (spot colors) or on the printed document using screens to allow certain amounts of ink through and then overlaying the base colors.
(PMS)                        C   M   Y   K    RGB Hex

               100             0    0   51    0    #ffff7d
               101             0    0   79    0    #ffff36
               102             0    1   95    0    #fffc0d
               103             0    3  100   18    #d1cb00
               104             0    3  100   30    #b3ad00
               105             0    3  100   50    #807c00
               106             0    2   69    0    #fffa4f
               107             0    4   79    0    #fff536
               108             0    6   95    0    #fff00d
               109             0   10  100    0    #ffe600
               110             0   12  100    7    #edd100
               111             0   11  100   27    #baa600
               112             0   10  100   38    #9e8e00
               113             0    7   66    0    #ffed57
               114             0    8   73    0    #ffeb45
               115             0    9   80    0    #ffe833
               116             0   16  100    0    #ffd600
               117             0   18  100   15    #d9b200
               118             0   18  100   27    #ba9900
               119             0   12  100   49    #827200
               120             0    9   58    0    #ffe86b
               1205            0    5   31    0    #fff2b0
               121             0   11   69    0    #ffe34f
               1215            0    9   45    0    #ffe88c
               122             0   17   80    0    #ffd433
               1225            0   17   62    0    #ffd461
               123             0   24   94    0    #ffc20f
               1235            0   29   91    0    #ffb517
               124             0   28  100    6    #f0ad00
               1245            0   28  100   18    #d19700
               125             0   26  100   26    #bd8c00
               1255            0   27  100   34    #a87b00
               126             0   25  100   37    #a17800
               1265            0   27  100   51    #7d5b00
               127             0    7   50    0    #ffed80
               128             0   11   65    0    #ffe359
               129             0   16   77    0    #ffd63b
               130             0   30  100    0    #ffb300
               131             0   32  100    9    #e89e00
               132             0   28  100   30    #b38100
               133             0   20  100   56    #705a00
               134             0   11   45    0    #ffe38c
               1345            0   14   47    0    #ffdb87
               135             0   19   60    0    #ffcf66
               1355            0   20   56    0    #ffcc70
               136             0   27   76    0    #ffba3d
               1365            0   29   72    0    #ffb547
               137             0   35   90    0    #ffa61a
               1375            0   40   90    0    #ff991a
               138             0   42  100    1    #fc9200
               1385            0   44  100    7    #ed8500
               139             0   37  100   23    #c47c00
               1395            0   41  100   37    #a15f00
               140             0   27  100   54    #755600
               1405            0   36  100   63    #5e3c00
               141             0   19   51    0    #ffcf7d
               142             0   28   76    0    #ffb83d
               143             0   35   85    0    #ffa626
               144             0   48  100    0    #ff8500
               145             0   47  100    8    #eb7c00
               146             0   43  100   33    #ab6100
               147             0   28  100   56    #705100
               148             0   16   37    0    #ffd6a1
               1485            0   27   54    0    #ffba75
               149             0   23   47    0    #ffc487
               1495            0   33   67    0    #ffab54
               150             0   35   70    0    #ffa64d
               1505            0   42   77    0    #ff943b
               151             0   48   95    0    #ff850d
               152             0   51  100    1    #fc7c00
               1525            0   58  100   10    #e66000
               153             0   46  100   18    #d17100
               1535            0   53  100   38    #9e4a00
               154             0   46  100   34    #a85b00
               1545            0   53  100   72    #472200
               155             0   12   28    0    #ffe0b8
               1555            0   22   34    0    #ffc7a8
               156             0   22   42    0    #ffc794
               1565            0   34   49    0    #ffa882
               157             0   43   70    0    #ff914d
               1575            0   45   72    0    #ff8c47
               158             0   61   97    0    #ff6308
               1585            0   56   90    0    #ff701a
               159             0   66  100    7    #ed5100
               1595            0   59  100    5    #f26300
               160             0   62  100   32    #ad4200
               1605            0   56  100   30    #b34f00
               161             0   52  100   64    #5c2c00
               1615            0   56  100   43    #914000
               162             0   15   22    0    #ffd9c7
               1625            0   31   37    0    #ffb0a1
               163             0   31   44    0    #ffb08f
               1635            0   39   48    0    #ff9c85
               164             0   46   73    0    #ff8a45
               1645            0   49   66    0    #ff8257
               165             0   59   96    0    #ff690a
               1655            0   63   91    0    #ff5e17
               166             0   64  100    0    #ff5c00
               1665            0   68  100    0    #ff5200
               167             0   60  100   17    #d45500
               1675            0   67  100   28    #b83d00
               168             0   57  100   59    #692d00
               1685            0   68  100   44    #8f2e00
               169             0   20   20    0    #ffcccc
               170             0   40   44    0    #ff998f
               171             0   53   68    0    #ff7852
               172             0   66   88    0    #ff571f
               173             0   69  100    4    #f54c00
               174             0   70  100   36    #a33100
               175             0   65  100   60    #662400
               176             0   25   18    0    #ffbfd1
               1765            0   38   21    0    #ff9ec9
               1767            0   27   12    0    #ffbae0
               177             0   45   40    0    #ff8c99
               1775            0   47   29    0    #ff87b5
               1777            0   58   36    0    #ff6ba3
               178             0   59   56    0    #ff6970
               1785            0   67   50    0    #ff5480
               1787            0   76   60    0    #ff3d66
               1788            0   84   88    0    #ff291f
               179             0   79  100    0    #ff3600
               1795            0   94  100    0    #ff0f00
               1797            0  100   99    4    #f50002
               180             0   79  100   11    #e33000
               1805            0   91  100   23    #c41200
               1807            0  100   96   28    #b80007
               181             0   74  100   47    #872300
               1815            0   90  100   51    #7d0c00
               1817            0   90  100   66    #570900
               182             0   26   10    0    #ffbde6
               183             0   46   21    0    #ff8ac9
               184             0   68   41    0    #ff5296
               185             0   91   76    0    #ff173d
               186             0  100   81    4    #f5002f
               187             0  100   79   20    #cc002b
               188             0   97  100   50    #800400
               189             0   37   10    0    #ffa1e6
               1895            0   28    7    0    #ffb8ed
               190             0   55   22    0    #ff73c7
               1905            0   41    9    0    #ff96e8
               191             0   76   38    0    #ff3d9e
               1915            0   71   20    0    #ff4acc
               192             0  100   68    0    #ff0052
               1925            0  100   55    0    #ff0073
               193             0  100   66   13    #de004b
               1935            0  100   57    5    #f20068
               194             0  100   64   33    #ab003e
               1945            0  100   56   19    #cf005b
               195             0  100   60   55    #73002e
               1955            0  100   60   37    #a10040
               196             0   25    4    0    #ffbff5
               197             0   45   10    0    #ff8ce6
               198             0   78   33    0    #ff38ab
               199             0  100   62    0    #ff0061
               200             0  100   63   12    #e00053
               201             0  100   63   29    #b50043
               202             0  100   61   43    #910039
               203             0   34    3    0    #ffa8f7
               204             0   58    3    0    #ff6bf7
               205             0   84    9    0    #ff29e8
               206             0  100   38    3    #f70099
               207             0  100   43   19    #cf0076
               208             0  100   36   37    #a10067
               209             0  100   34   53    #78004f
               210             0   39    6    0    #ff9cf0
               211             0   55    8    0    #ff73eb
               212             0   72   11    0    #ff47e3
               213             0   95   27    0    #ff0dba
               214             0  100   34    8    #eb009b
               215             0  100   35   27    #ba0079
               216             0   95   40   49    #82074e
               217             0   28    0    0    #ffb8ff
               218             2   61    0    0    #fa63ff
               219             1   88    0    0    #fc1fff
               220             0  100   13   17    #d400b8
               221             0  100   15   30    #b30098
               222             0  100   10   59    #69005e
               223             0   46    0    0    #ff8aff
               224             1   63    0    0    #fc5eff
               225             1   83    0    0    #fc2bff
               226             0  100    0    0    #ff00ff
               227             0  100    7   19    #cf00c0
               228             0  100    4   41    #960090
               229             0  100   15   60    #660057
               230             0   34    0    0    #ffa8ff
               231             1   52    0    0    #fc7aff
               232             3   67    0    0    #f754ff
               233            11  100    0    0    #e300ff
               234             6  100    0   26    #b100bd
               235             5  100    0   40    #910099
               236             1   30    0    0    #fcb3ff
               2365            2   27    0    0    #fabaff
               237             3   49    0    0    #f782ff
               2375           10   57    0    0    #e66eff
               238             6   63    0    0    #f05eff
               2385           19   79    0    0    #cf36ff
               239            11   79    0    0    #e336ff
               2395           27   95    0    0    #ba0dff
               240            18   94    0    0    #d10fff
               2405           34  100    0    0    #a800ff
               241            27  100    0    2    #b600fa
               2415           33  100    0    8    #9d00eb
               242            10  100    0   49    #750082
               2425           37  100    0   26    #7700bd
               243             5   29    0    0    #f2b5ff
               244             9   38    0    0    #e89eff
               245            14   53    0    0    #db78ff
               246            29   90    0    0    #b51aff
               247            36  100    0    0    #a300ff
               248            40  100    0    2    #9600fa
               249            40  100    0   28    #6e00b8
               250             5   18    0    0    #f2d1ff
               251            13   39    0    0    #de9cff
               252            24   56    0    0    #c270ff
               253            43   95    0    0    #910dff
               254            50  100    0    0    #8000ff
               255            51  100    0   25    #5e00bf
               256             7   20    0    0    #edccff
               2562           19   35    0    0    #cfa6ff
               2563           22   33    0    0    #c7abff
               2567           29   36    0    0    #b5a3ff
               257            14   34    0    0    #dba8ff
               2572           30   47    0    0    #b387ff
               2573           30   43    0    0    #b391ff
               2577           40   45    0    0    #998cff
               258            43   76    0    0    #913dff
               2582           46   72    0    0    #8a47ff
               2583           46   63    0    0    #8a5eff
               2587           59   66    0    0    #6957ff
               259            56  100    0   15    #5f00d9
               2592           60   90    0    0    #661aff
               2593           61   89    0    0    #631cff
               2597           85  100    0    0    #2600ff
               260            52  100    0   26    #5b00bd
               2602           63  100    0    3    #5c00f7
               2603           69  100    0    2    #4d00fa
               2607           81  100    0    7    #2d00ed
               261            48  100    0   40    #500099
               2612           64  100    0   14    #4f00db
               2613           63  100    0   15    #5000d9
               2617           79  100    0   15    #2e00d9
               262            45  100    0   55    #3f0073
               2622           58  100    0   44    #3c008f
               2623           59  100    0   32    #4700ad
               2627           77  100    0   31    #2800b0
               263            10   14    0    0    #e6dbff
               2635           28   27    0    0    #b8baff
               264            26   28    0    0    #bdb8ff
               2645           40   36    0    0    #99a3ff
               265            54   56    0    0    #7570ff
               2655           54   49    0    0    #7582ff
               266            79   90    0    0    #361aff
               2665           62   60    0    0    #6166ff
               267            89  100    0    0    #1c00ff
               268            82  100    0   12    #2800e0
               2685           96  100    0   10    #0900e6
               269            78  100    0   33    #2600ab
               2695           91  100    0   49    #0c0082
               270            31   27    0    0    #b0baff
               2705           40   30    0    0    #99b3ff
               2706           19    9    0    0    #cfe8ff
               2707           17    6    0    0    #d4f0ff
               2708           26   10    0    0    #bde6ff
               271            43   37    0    0    #91a1ff
               2715           57   45    0    0    #6e8cff
               2716           45   29    0    0    #8cb5ff
               2717           29   12    0    0    #b5e0ff
               2718           67   41    0    0    #5496ff
               272            58   48    0    0    #6b85ff
               2725           77   68    0    0    #3b52ff
               2726           79   66    0    0    #3657ff
               2727           71   42    0    0    #4a94ff
               2728           96   69    0    0    #0a4fff
               273           100   96    0    8    #0009eb
               2735          100   95    0    0    #000dff
               2736          100   91    0    0    #0017ff
               2738          100   87    0    2    #0020fa
               274           100  100    0   28    #0000b8
               2745          100   95    0   15    #000bd9
               2746          100   92    0   10    #0012e6
               2747          100   86    0   15    #001ed9
               2748          100   88    0   15    #001ad9
               275            98  100    0   43    #030091
               2755          100   97    0   30    #0005b3
               2756          100   94    0   29    #000bb5
               2757          100   82    0   30    #0020b3
               2758          100   80    0   26    #0026bd
               276            98  100    0   55    #020073
               2765          100   97    0   45    #00048c
               2766          100   94    0   47    #000887
               2767          100   78    0   54    #001a75
               2768          100   78    0   44    #001f8f
               277            27    7    0    0    #baedff
               278            39   14    0    0    #9cdbff
               279            68   34    0    0    #52a8ff
               280           100   72    0   18    #003bd1
               281           100   72    0   32    #0031ad
               282           100   68    0   54    #002675
               283            35    9    0    0    #a6e8ff
               284            55   19    0    0    #73cfff
               285            89   43    0    0    #1c91ff
               286           100   66    0    2    #0055fa
               287           100   68    0   12    #0048e0
               288           100   67    0   23    #0041c4
               289           100   66    0   58    #00246b
               290            25    2    0    0    #bffaff
               2905           41    2    0    0    #96faff
               291            33    3    0    0    #abf7ff
               2915           59    7    0    0    #69edff
               292            49   11    0    0    #82e3ff
               2925           85   24    0    0    #26c2ff
               293           100   57    0    2    #006bfa
               2935          100   46    0    0    #008aff
               294           100   58    0   21    #0055c9
               2945          100   45    0   14    #0079db
               295           100   57    0   37    #0045a1
               2955          100   45    0   37    #0058a1
               296           100   46    0   70    #00294d
               2965          100   38    0   64    #00395c
               297            49    1    0    0    #82fcff
               2975           30    0    5    0    #b3fff2
               298            69    7    0    0    #4fedff
               2985           59    0    6    0    #69fff0
               299            85   19    0    0    #26cfff
               2995           90   11    0    0    #1ae3ff
               300           100   44    0    0    #008fff
               3005          100   36    0    2    #00a0fa
               301           100   45    0   18    #0073d1
               3015          100   33    0   20    #0089cc
               302           100   25    0   50    #006080
               3025          100   17    0   51    #00687d
               303           100   11    0   74    #003b42
               3035          100    0    5   72    #004744
               304            30    0    8    0    #b3ffeb
               305            51    0    9    0    #7dffe8
               306            75    0    7    0    #40ffed
               307           100   16    0   27    #009cba
               308           100    5    0   47    #008087
               309           100    0    9   72    #004741
               310            43    0   10    0    #91ffe6
               3105           43    0   12    0    #91ffe0
               311            63    0   12    0    #5effe0
               3115           63    0   18    0    #5effd1
               312            96    0   11    0    #0affe3
               3125           83    0   21    0    #2bffc9
               313           100    0    8   13    #00decc
               3135          100    0   16    9    #00e8c3
               314           100    0    9   30    #00b3a2
               3145          100    0   19   23    #00c49f
               315           100    0   12   43    #009180
               3155          100    0   24   38    #009e78
               316           100    0   27   68    #00523c
               3165          100    0   28   65    #005940
               317            18    0    8    0    #d1ffeb
               318            38    0   15    0    #9effd9
               319            52    0   19    0    #7affcf
               320           100    0   31    7    #00eda4
               321           100    0   31   23    #00c487
               322           100    0   33   35    #00a66f
               323           100    0   38   47    #008754
               324            28    0   12    0    #b8ffe0
               3242           37    0   18    0    #a1ffd1
               3245           34    0   19    0    #a8ffcf
               3248           43    0   24    0    #91ffc2
               325            56    0   26    0    #70ffbd
               3252           47    0   24    0    #87ffc2
               3255           49    0   28    0    #82ffb8
               3258           59    0   33    0    #69ffab
               326            87    0   38    0    #21ff9e
               3262           71    0   33    0    #4affab
               3265           69    0   37    0    #4fffa1
               3268           90    0   49    0    #1aff82
               327           100    0   44   17    #00d477
               3272          100    0   44    0    #00ff8f
               3275           95    0   47    0    #0dff87
               3278          100    0   55    5    #00f26d
               328           100    0   45   32    #00ad5f
               3282          100    0   46   15    #00d975
               3285          100    0   50    7    #00ed77
               3288          100    0   54   20    #00cc5e
               329           100    0   46   46    #008a4a
               3292          100    0   49   46    #008a46
               3295          100    0   53   21    #00c95f
               3298          100    0   57   42    #009440
               330           100    0   48   60    #006635
               3302          100    0   54   69    #004f24
               3305          100    0   61   61    #006327
               3308          100    0   60   72    #00471d
               331            24    0   16    0    #c2ffd6
               332            30    0   20    0    #b3ffcc
               333            43    0   27    0    #91ffba
               334           100    0   60    3    #00f763
               335           100    0   65   30    #00b33e
               336           100    0   67   47    #00872d
               337            31    0   20    0    #b0ffcc
               3375           35    0   25    0    #a6ffbf
               338            47    0   32    0    #87ffad
               3385           45    0   33    0    #8cffab
               339            84    0   56    0    #29ff70
               3395           61    0   45    0    #63ff8c
               340           100    0   66    9    #00e84f
               3405           85    0   65    0    #26ff59
               341           100    0   67   29    #00b53c
               3415          100    0   77   22    #00c72e
               342           100    0   71   43    #00912a
               3425          100    0   78   42    #009421
               343            98    0   72   61    #02631c
               3435          100    0   81   66    #005710
               344            27    0   23    0    #baffc4
               345            38    0   32    0    #9effad
               346            55    0   47    0    #73ff87
               347           100    0   86    3    #00f723
               348           100    0   85   24    #00c21d
               349           100    0   91   42    #00940d
               350            79    0  100   75    #0d4000
               351            17    0   16    0    #d4ffd6
               352            27    0   25    0    #baffbf
               353            38    0   36    0    #9effa3
               354            80    0   90    0    #33ff1a
               355            94    0  100    0    #0fff00
               356            95    0  100   27    #09ba00
               357            80    0  100   56    #167000
               358            27    0   38    0    #baff9e
               359            36    0   49    0    #a3ff82
               360            58    0   80    0    #6bff33
               361            69    0  100    0    #4fff00
               362            70    0  100    9    #46e800
               363            68    0  100   24    #3ec200
               364            65    0  100   42    #349400
               365            12    0   29    0    #e0ffb5
               366            20    0   44    0    #ccff8f
               367            32    0   59    0    #adff69
               368            57    0  100    0    #6eff00
               369            59    0  100    7    #61ed00
               370            56    0  100   27    #52ba00
               371            43    0  100   56    #407000
               372            10    0   33    0    #e6ffab
               373            16    0   46    0    #d6ff8a
               374            24    0   57    0    #c2ff6e
               375            41    0   78    0    #96ff38
               376            52    0  100    5    #74f200
               377            45    0  100   24    #6bc200
               378            34    0  100   60    #436600
               379             9    0   58    0    #e8ff6b
               380            13    0   72    0    #deff47
               381            20    0   91    0    #ccff17
               382            29    0  100    0    #b5ff00
               383            20    0  100   19    #a5cf00
               384            18    0  100   31    #90b000
               385             3    0  100   58    #686b00
               386             6    0   56    0    #f0ff70
               387            10    0   74    0    #e6ff42
               388            14    0   79    0    #dbff36
               389            20    0   85    0    #ccff26
               390            22    0  100    8    #b7eb00
               391            13    0  100   33    #95ab00
               392             7    0  100   49    #798200
               393             3    0   55    0    #f7ff73
               3935            1    0   68    0    #fcff52
               394             6    0   76    0    #f0ff3d
               3945            3    0   85    0    #f7ff26
               395             8    0   85    0    #ebff26
               3955            6    0  100    0    #f0ff00
               396            11    0   94    0    #e3ff0f
               3965            8    0  100    0    #ebff00
               397            10    0  100   11    #cce300
               3975            0    0  100   29    #b5b500
               398             7    0  100   28    #abb800
               3985            0    3  100   41    #969200
               399             0    0  100   43    #919100
               3995            0    3  100   64    #5c5900
               400             0    3    6   16    #d6d0c9
               401             0    5   11   23    #c4bbaf
               402             0    6   14   31    #b0a597
               403             0    7   17   43    #918779
               404             0    8   22   56    #706758
               405             0   10   33   72    #474030
               406             0    5    6   16    #d6cbc9
               407             0    8    9   26    #bdaeac
               408             0   10   11   34    #a89796
               409             0   13   15   45    #8c7a77
               410             0   18   21   56    #705c59
               411             0   27   36   72    #47342e
               412             0   30   66   98    #050402
               413             0    0    9   20    #ccccba
               414             0    0   10   30    #b3b3a1
               415             0    0   12   41    #969684
               416             0    0   16   50    #80806b
               417             1    0   25   65    #585943
               418             3    0   31   75    #3e402c
               419            29    0   36  100    #000000
               420             0    0    0   15    #d9d9d9
               421             0    0    0   26    #bdbdbd
               422             0    0    0   33    #ababab
               423             0    0    0   44    #8f8f8f
               424             0    0    0   61    #636363
               425             0    0    0   77    #3b3b3b
               426             0    0    0  100    #000000
               427             0    0    0   11    #e3e3e3
               428             2    0    0   18    #cdd1d1
               429             3    0    0   32    #a8adad
               430             5    0    0   45    #858c8c
               431            11    1    0   64    #525b5c
               432            23    2    0   77    #2d393b
               433            33    3    0   95    #090c0d
               434             7   10    9    0    #ede6e8
               435            13   16   14    0    #ded6db
               436            24   25   25    0    #c2bfbf
               437            46   45   46    0    #8a8c8a
               438            75   70  100   10    #394500
               439            80   75  100   20    #293300
               440            82   78  100   30    #202700
               441             6    0    7    9    #dae8d8
               442             8    0    9   19    #becfbc
               443            12    0   12   30    #9db39d
               444            15    0   15   42    #7e947e
               445            20    0   20   65    #475947
               446            21    0   23   75    #324031
               447            16    0   31   82    #272e20
               448            75   65  100   30    #2d3e00
               4485            0   26  100   69    #4f3a00
               449            70   60  100   20    #3d5200
               4495            0   20   95   46    #8a6e07
               450            65   55  100   10    #506700
               4505            0   15   78   36    #a38b24
               451            33   29   55    0    #abb573
               4515            0    9   50   24    #c2b061
               452            24   19   39    0    #c2cf9c
               4525            0    7   39   17    #d4c581
               453            14   11   25    0    #dbe3bf
               4535            0    4   30   11    #e3da9f
               454             9    7   16    0    #e8edd6
               4545            0    3   19    6    #f0e9c2
               455             0   17  100   65    #594a00
               456             0   15  100   43    #917c00
               457             0   15  100   28    #b89c00
               458            10   10   73    0    #e6e645
               459             6    7   55    0    #f0ed73
               460             4    5   44    0    #f5f28f
               461             3    3   35    0    #f7f7a6
               462            50   70  100   50    #402600
               4625            0   60  100   79    #361500
               463            30   60  100   40    #6b3d00
               4635            0   48   96   44    #8f4a06
               464            10   50  100   35    #955300
               4645            0   37   68   28    #b8743b
               465            20   32   58    0    #ccad6b
               4655            0   26   45   18    #d19b73
               466            12   22   43    0    #e0c791
               4665            0   18   32   10    #e6bc9c
               467             9   15   34    0    #e8d9a8
               4675            0   11   21    6    #f0d5bd
               468             6    9   23    0    #f0e8c4
               4685            0    7   14    4    #f5e4d3
               469             0   65  100   71    #4a1a00
               4695            0   81  100   74    #420d00
               470             0   58  100   33    #ab4800
               4705            0   62   71   49    #823126
               471             0   59  100   18    #d15600
               4715            0   42   45   34    #a8625d
               472             0   34   52    0    #ffa87a
               4725            0   32   35   25    #bf827c
               473             0   23   36    0    #ffc4a3
               4735            0   22   23   15    #d9a9a7
               474             0   15   26    0    #ffd9bd
               4745            0   17   18   10    #e6bebc
               475             0   11   20    0    #ffe3cc
               4755            0   10   12    6    #f0d8d3
               476            60   80  100   45    #381c00
               477            50   85  100   38    #4f1800
               478            40   90  100   30    #6b1200
               479            31   48   55    0    #b08573
               480            15   29   31    0    #d9b5b0
               481             9   19   21    0    #e8cfc9
               482             5   12   13    0    #f2e0de
               483             0   93  100   60    #660700
               484             0   95  100   29    #b50900
               485             0   95  100    0    #ff0d00
               486             0   47   41    0    #ff8796
               487             0   35   28    0    #ffa6b8
               488             0   26   19    0    #ffbdcf
               489             0   15   11    0    #ffd9e3
               490             0   74  100   72    #471300
               491             0   79  100   52    #7a1a00
               492             0   77  100   42    #942200
               493             0   46   23    5    #f283bb
               494             0   33   13    0    #ffabde
               495             0   24   11    0    #ffc2e3
               496             0   16    9    0    #ffd6e8
               497             0   70  100   78    #381100
               4975            0   73  100   80    #330e00
               498             0   64  100   60    #662500
               4985            0   62   51   48    #853241
               499             0   63  100   48    #853100
               4995            0   48   38   34    #a85868
               500             0   38   21   11    #e38db3
               5005            0   38   27   23    #c47a8f
               501             0   27   13    3    #f7b5d7
               5015            0   25   15   11    #e3aac1
               502             0   18   10    1    #fccfe3
               5025            0   18   12    7    #edc2d1
               503             0   11    8    0    #ffe3eb
               5035            0   10    9    3    #f7dfe1
               504            70  100  100   35    #320000
               505            50  100  100   25    #600000
               506            45  100  100   15    #770000
               507            13   49   23    0    #de82c4
               508             5   36   11    0    #f2a3e3
               509             0   24    7    0    #ffc2ed
               510             0   17    6    0    #ffd4f0
               511            70  100   50   20    #3d0066
               5115           80  100   70   15    #2b0041
               512            60  100   15    5    #6100ce
               5125           65   86   49    0    #592482
               513            46   88    0    0    #8a1fff
               5135           49   66   28    0    #8257b8
               514            15   50    0    0    #d980ff
               5145           30   45   12    0    #b38ce0
               515             7   38    0    0    #ed9eff
               5155           17   30    8    0    #d4b3eb
               516             3   27    0    0    #f7baff
               5165            9   19    5    0    #e8cff2
               517             0   18    0    0    #ffd1ff
               5175            5   12    3    0    #f2e0f7
               518            80  100   60   10    #2e005c
               5185           88  100   85   10    #1c0022
               519            72  100   35    5    #44009d
               5195           75   95   68    5    #3d0c4e
               520            64  100   12    0    #5c00e0
               5205           52   63   48    0    #7a5e85
               521            27   47    0    0    #ba87ff
               5215           29   38   24    0    #b59ec2
               522            17   37    0    0    #d4a1ff
               5225           17   27   15    0    #d4bad9
               523            10   26    0    0    #e6bdff
               5235           10   17   10    0    #e6d4e6
               524             6   15    0    0    #f0d9ff
               5245            6   10    7    0    #f0e6ed
               525            84  100   45    5    #270085
               5255           83   85    0   70    #0d0b4d
               526            77  100    7    0    #3b00ed
               5265           77   73    0   46    #20258a
               527            73  100    0    0    #4500ff
               5275           67   57    0   34    #3848a8
               528            41   55    0    0    #9673ff
               5285           42   35    0   23    #7280c4
               529            26   40    0    0    #bd99ff
               5295           27   22    0   10    #a8b3e6
               530            18   31    0    0    #d1b0ff
               5305           16   13    0    7    #c7ceed
               531            10   20    0    0    #e6ccff
               5315            6    6    0    5    #e4e4f2
               532           100   88   70   18    #00193f
               533           100   85   46   11    #00227b
               534           100   82   30    5    #002caa
               535            42   30    7    0    #94b3ed
               536            31   22    5    0    #b0c7f2
               537            22   14    3    0    #c7dbf7
               538            13    9    2    0    #dee8fa
               539           100   49    0   70    #00274d
               5395          100   44    0   76    #00223d
               540           100   55    0   55    #003473
               5405           58   17    0   46    #3a728a
               541           100   57    0   38    #00449e
               5415           40    8    0   41    #5a8a96
               542            62   22    0    3    #5ec1f7
               5425           30    4    0   32    #79a6ad
               543            41   11    0    0    #96e3ff
               5435           13    3    0   17    #b8cdd4
               544            30    6    0    0    #b3f0ff
               5445            8    1    0   13    #ccdcde
               545            22    3    0    0    #c7f7ff
               5455            6    0    0    9    #dae8e8
               546            95    9    0   83    #02272b
               5463          100    0   18   83    #002b24
               5467          100    0   30   95    #000d09
               547           100   19    0   75    #003440
               5473           82    0   28   52    #167a58
               5477           56    0   27   74    #1d4230
               548           100   24    0   64    #00465c
               5483           62    0   21   31    #43b08b
               5487           36    0   17   56    #48705d
               549            54    7    0   27    #56adba
               5493           43    0   14   21    #73c9ad
               5497           18    0    9   38    #829e90
               550            39    4    0   21    #7bc1c9
               5503           29    0   10   14    #9cdbc5
               5507           11    0    7   29    #a1b5a8
               551            27    3    0   13    #a2d7de
               5513           18    0    7    5    #c7f2e1
               5517            9    0    6   18    #bed1c5
               552            15    0    0    9    #c5e8e8
               5523           11    0    5    3    #dcf7eb
               5527            6    0    4   11    #d5e3da
               553            60    0   51   80    #143319
               5535           66    0   57   82    #102e14
               554            80    0   60   67    #115422
               5545           59    0   50   52    #327a3d
               555            79    0   56   56    #187031
               5555           43    0   34   38    #5a9e68
               556            45    0   31   27    #66ba80
               5565           30    0   24   26    #84bd8f
               557            30    0   20   15    #98d9ad
               5575           20    0   16   17    #a9d4b2
               558            20    0   13    9    #bae8ca
               5585           12    0   11   10    #cae6cc
               559            14    0   10    6    #cef0d8
               5595            7    0    8    7    #ddedda
               560            80    0   63   75    #0d4018
               5605           65    0   56   94    #050f07
               561            85    0   54   52    #127a38
               5615           44    0   47   68    #2e522b
               562            85    0   50   31    #1ab058
               5625           28    0   30   51    #5a7d57
               563            52    0   32    1    #79fcac
               5635           16    0   18   36    #89a386
               564            37    0   20    0    #a1ffcc
               5645            9    0   13   25    #aebfa6
               565            23    0   13    0    #c4ffde
               5655            6    0    9   18    #c5d1be
               566            14    0    9    0    #dbffe8
               5665            5    0    7   10    #dae6d5
               567            82    0   64   70    #0e4d1c
               568            88    0   57   36    #14a346
               569            98    0   57   17    #04d45b
               570            48    0   29    0    #85ffb5
               571            32    0   19    0    #adffcf
               572            23    0   14    0    #c4ffdb
               573            14    0    9    0    #dbffe8
               574            34    0   81   71    #314a0e
               5743           33    0   85   82    #1f2e07
               5747           32    0  100   79    #243600
               575            48    0  100   53    #3e7800
               5753           25    0   81   67    #3f5410
               5757           27    0   95   55    #547306
               576            49    0  100   39    #4f9c00
               5763           16    0   74   57    #5c6e1d
               5767           15    0   68   39    #849c32
               577            24    0   46   10    #aee67c
               5773            9    0   43   38    #909e5a
               5777           10    0   49   28    #a5b85e
               578            20    0   40    6    #c0f090
               5783            6    0   28   27    #afba86
               5787            7    0   31   13    #cede99
               579            17    0   34    3    #cdf7a3
               5793            4    0   21   18    #c9d1a5
               5797            5    0   24    9    #dce8b0
               580            12    0   26    2    #dcfab9
               5803            2    0   12   11    #dee3c8
               5807            3    0   14    6    #e9f0ce
               581             2    0  100   72    #464700
               5815            0    0   91   79    #363605
               582            13    0  100   46    #788a00
               5825            0    2   87   59    #69660e
               583            23    0  100   17    #a3d400
               5835            0    2   67   40    #999632
               584            12    0   79    6    #d3f032
               5845            0    1   47   30    #b3b15f
               585            11    0   66    2    #defa55
               5855            0    0   31   18    #d1d190
               586             9    0   53    0    #e8ff78
               5865            0    0   25   13    #dedea6
               587             5    0   40    0    #f2ff99
               5875            0    0   18    8    #ebebc0
               600             0    0   29    0    #ffffb5
               601             0    0   40    0    #ffff99
               602             0    0   51    0    #ffff7d
               603             0    0   69    1    #fcfc4e
               604             0    0   88    3    #f7f71e
               605             0    2  100    7    #ede800
               606             0    4  100   12    #e0d700
               607             0    0   18    1    #fcfccf
               608             0    0   32    2    #fafaaa
               609             0    0   46    4    #f5f584
               610             0    0   58    6    #f0f065
               611             0    1   92   11    #e3e112
               612             0    2  100   20    #ccc800
               613             0    4  100   30    #b3ab00
               614             0    0   20    4    #f5f5c4
               615             0    1   27    6    #f0edaf
               616             0    2   35    9    #e8e397
               617             0    2   48   17    #d4cf6e
               618             0    3   87   30    #b3ad17
               619             0    4  100   43    #918c00
               620             0    5  100   53    #787200
               621            13    0   10    2    #d9fae1
               622            24    0   19    4    #baf5c6
               623            32    0   24   10    #9ce6ae
               624            44    0   35   20    #72cc85
               625            56    0   44   33    #4bab60
               626            76    0   64   63    #175e22
               627            90    0   76   84    #04290a
               628            19    0    6    0    #cffff0
               629            34    0    9    0    #a8ffe8
               630            47    0   11    0    #87ffe3
               631            67    0   12    2    #52fadc
               632            92    0   15    5    #13f2ce
               633           100    0   10   25    #00bfac
               634           100    0    9   40    #00998b
               635            32    0    8    0    #adffeb
               636            45    0    9    0    #8cffe8
               637            55    0    9    0    #73ffe8
               638            83    0   10    0    #2bffe6
               639           100    0    5    5    #00f2e6
               640           100    0    0   22    #00c7c7
               641           100    4    0   30    #00abb3
               642            16    4    0    2    #d2f0fa
               643            25    7    0    4    #b8e4f5
               644            42   15    0    6    #8bccf0
               645            57   28    0    9    #64a7e8
               646            69   34    0   11    #4696e3
               647           100   56    0   23    #0056c4
               648           100   62    0   54    #002d75
               649            14    6    0    1    #d9edfc
               650            24    9    0    2    #bee3fa
               651            38   18    0    6    #95c5f0
               652            60   34    0   10    #5c97e6
               653           100   62    0   20    #004ecc
               654           100   64    0   38    #00399e
               655           100   65    0   52    #002b7a
               656            14    4    0    0    #dbf5ff
               657            24    8    0    0    #c2ebff
               658            41   20    0    0    #96ccff
               659            64   35    0    0    #5ca6ff
               660            90   57    0    0    #1a6eff
               661           100   69    0    9    #0048e8
               662           100   72    0   18    #003bd1
               663             7    6    0    0    #edf0ff
               664            11    9    0    0    #e3e8ff
               665            20   17    0    2    #c8cffa
               666            31   30    0    7    #a4a6ed
               667            52   49    0   14    #6970db
               668            65   64    0   30    #3e40b3
               669            76   78    0   47    #201e87
               670             0   13    0    0    #ffdeff
               671             1   20    0    0    #fcccff
               672             3   34    0    0    #f7a8ff
               673             6   49    0    0    #f082ff
               674             9   67    0    0    #e854ff
               675            17  100    0    3    #cd00f7
               676             6  100    0   22    #bb00c7
               677             2   13    0    0    #fadeff
               678             3   21    0    0    #f7c9ff
               679             5   27    0    0    #f2baff
               680            10   43    0    2    #e18efa
               681            21   61    0    4    #c15ff5
               682            25   79    0   12    #a82fe0
               683            11  100    0   43    #810091
               684             0   17    0    2    #facffa
               685             0   25    0    3    #f7baf7
               686             0   30    0    5    #f2aaf2
               687             2   44    0   12    #dc7ee0
               688             5   57    0   19    #c459cf
               689             7   77    0   34    #9d27a8
               690             0   97    0   59    #690369
               691             0   15    8    1    #fcd7e8
               692             0   23   10    2    #fac0e1
               693             0   30   12    6    #f0a8d3
               694             0   43   19   10    #e683ba
               695             0   58   28   25    #bf508a
               696             0   84   54   40    #991846
               697             0   93   70   51    #7d0925
               698             0   16    8    0    #ffd6eb
               699             0   24   10    0    #ffc2e6
               700             0   36   14    0    #ffa3db
               701             0   53   20    0    #ff78cc
               702             0   69   34    5    #f24ba0
               703             0   83   54   16    #d62463
               704             0  100   80   27    #ba0025
               705             0    9    5    0    #ffe8f2
               706             0   17   10    0    #ffd4e6
               707             0   30   14    0    #ffb3db
               708             0   46   22    0    #ff8ac7
               709             0   66   38    0    #ff579e
               710             0   79   58    0    #ff366b
               711             0  100   80    2    #fa0032
               712             0   14   31    0    #ffdbb0
               713             0   19   41    0    #ffcf96
               714             0   28   54    0    #ffb875
               715             0   37   71    0    #ffa14a
               716             0   47   91    0    #ff8717
               717             0   55  100    2    #fa7000
               718             0   58  100    8    #eb6300
               719             0   10   25    0    #ffe6bf
               720             0   15   34    1    #fcd7a7
               721             0   24   52    3    #f7bc77
               722             0   36   76    9    #e89538
               723             0   45   95   17    #d4740b
               724             0   53  100   37    #a14c00
               725             0   55  100   49    #823b00
               726             0    8   23    2    #fae6c0
               727             0   15   34    5    #f2cea0
               728             0   21   48   10    #e6b577
               729             0   31   61   18    #d19052
               730             0   39   76   29    #b56e2b
               731             0   53  100   54    #753700
               732             0   56  100   64    #5c2800
               7401            0    4   18    0    #fff5d1
               7402            0    6   30    0    #fff0b3
               7403            0   10   50    0    #ffe680
               7404            0    9   80    0    #ffe833
               7405            0   10  100    0    #ffe600
               7406            0   18  100    0    #ffd100
               7407            0   22   85   11    #e3b122
               7408            0   25   95    0    #ffbf0d
               7409            0   30   95    0    #ffb30d
               7410            0   30   55    0    #ffb373
               7411            0   35   69    0    #ffa64f
               7412            0   42  100    7    #ed8a00
               7413            0   53  100    4    #f57300
               7414            0   46  100   11    #e37b00
               7415            0   18   15    0    #ffd1d9
               7416            0   60   60    0    #ff6666
               7417            0   75   75    0    #ff4040
               7418            0   70   60    5    #f24961
               7419            0   60   45   18    #d15473
               7420            0   80   42   20    #cc2976
               7421            0  100   30   61    #630046
               7422            0    9    5    0    #ffe8f2
               7423            0   55   22    0    #ff73c7
               7424            0   75   30    0    #ff40b3
               7425            0   90   30    7    #ed18a6
               7426            0  100   45   18    #d10073
               7427            0  100   65   28    #b80040
               7428            0   80   45   55    #73173f
               7429            0   18    3    0    #ffd1f7
               7430            2   31    0    0    #fab0ff
               7431            0   38    2    5    #f296ed
               7432            0   55    3   10    #e667df
               7433            0   75   15   15    #d936b8
               7434            0   80   15   20    #cc29ad
               7435            0  100   10   35    #a60095
               7436            3    8    0    0    #f7ebff
               7437            6   20    0    0    #f0ccff
               7438           15   35    0    0    #d9a6ff
               7439           20   35    0    0    #cca6ff
               7440           30   40    0    0    #b399ff
               7441           36   50    0    0    #a380ff
               7442           50   70    0    0    #804dff
               7443            6    5    0    0    #f0f2ff
               7444           20   17    0    0    #ccd4ff
               7445           30   20    0    3    #adc6f7
               7446           43   38    0    0    #919eff
               7447           60   58    0   19    #5357cf
               7448           32   42    0   55    #4e4373
               7449           72  100   77   46    #270020
               7450           20   10    0    0    #cce6ff
               7451           40   21    0    0    #99c9ff
               7452           50   32    0    0    #80adff
               7453           50   26    0    0    #80bdff
               7454           50   24    0   10    #73aee6
               7455           80   53    0    0    #3378ff
               7456           55   35    0    7    #6b9aed
               7457           12    0    2    0    #e0fffa
               7458           40    0    5    6    #90f0e4
               7459           57    0    6   13    #5fded1
               7460          100    0    0    5    #00f2f2
               7461           78   28    0    0    #38b8ff
               7462          100   50    0   10    #0073e6
               7463          100   43    0   65    #003359
               7464           25    0   10    0    #bfffe6
               7465           50    0   25    0    #80ffbf
               7466           70    0   23    0    #4dffc4
               7467           95    0   25    0    #0dffbf
               7468          100   10    0   28    #00a5b8
               7469          100   20    0   40    #007a99
               7470           80   15    0   45    #1c778c
               7471           28    0   14    0    #b8ffdb
               7472           52    0   25    0    #7affbf
               7473           70    0   38    8    #46eb91
               7474           90    0   28   22    #14c78f
               7475           50    0   25   30    #59b386
               7476          100    0   43   60    #00663a
               7477           80    0   10   68    #105249
               7478           18    0   14    0    #d1ffdb
               7479           55    0   50    0    #73ff80
               7480           60    0   50    0    #66ff80
               7481           60    0   55    0    #66ff73
               7482           80    0   75    0    #33ff40
               7483           85    0  100   55    #117300
               7484          100    0   85   50    #008013
               7485            6    0   10    0    #f0ffe6
               7486           20    0   30    0    #ccffb3
               7487           30    0   45    0    #b3ff8c
               7488           43    0   60    0    #91ff66
               7489           60    0   80    7    #5fed2f
               7490           45    0   80   35    #5ba621
               7491           32    0  100   40    #689900
               7492           12    0   50    7    #d1ed77
               7493           14    0   36   10    #c5e693
               7494           25    0   40   15    #a3d982
               7495           25    0   80   30    #86b324
               7496           40    0  100   38    #5f9e00
               7497           40   30   70   25    #738639
               7498           25    0  100   80    #263300
               7499            0    2   15    0    #fffad9
               7500            0    2   15    3    #f7f2d2
               7501            0    4   20    6    #f0e6c0
               7502            0    8   35   10    #e6d395
               7503            0   12   35   25    #bfa87c
               7504            0   25   45   40    #997354
               7505            0   30   70   55    #735022
               7506            0    5   15    0    #fff2d9
               7507            0   10   30    0    #ffe6b3
               7508            0   15   40    4    #f5d093
               7509            0   20   50    5    #f2c279
               7510            0   30   72   11    #e39f40
               7511            0   45  100   25    #bf6900
               7512            0   46  100   33    #ab5c00
               7513            0   18   28    3    #f7cbb2
               7514            0   24   38    5    #f2b896
               7515            0   35   50   12    #e09270
               7516            0   52  100   35    #a65000
               7517            0   60  100   44    #8f3900
               7518            0   40   55   60    #663d2e
               7519           50   60  100   48    #423500
               7520            0   16   19    0    #ffd6cf
               7521            0   25   20   10    #e6acb8
               7522            0   40   30   16    #d68196
               7523            0   40   35   20    #cc7a85
               7524            0   55   60   27    #ba544a
               7525            0   45   50   30    #b36259
               7526            0   65  100   35    #a63a00
               7527            0    2    6    7    #ede8df
               7528            0    3   10   10    #e6dfcf
               7529            0    4   12   17    #d4cbba
               7530            0    8   21   32    #ada089
               7531            0   10   27   50    #80735d
               7532            0   17   50   65    #594a2d
               7533            0   22   85   85    #261e06
               7534            0    2    8   10    #e6e1d3
               7535            0    3   15   20    #ccc6ad
               7536            0    4   22   32    #ada687
               7537            3    0   10   20    #c6ccb8
               7538            9    0   13   30    #a2b39b
               7539            2    0    9   36    #a0a395
               7540            0    0    0   72    #474747
               7541            2    0    0    5    #edf2f2
               7542           10    0    3   16    #c1d6d0
               7543            7    0    0   30    #a6b3b3
               7544           10    1    0   40    #8a9799
               7545           23    2    0   63    #495c5e
               7546           33    4    0   72    #304547
               7547           35    4    0   94    #0a0f0f
               Black           0   13   49   98    #050403

2006年09月09日

从80年代到现在,可以说是在我国掀起一股韩流,如韩国的音乐、电视剧、电影、游戏等,可以说现在看爱情剧的都喜欢看韩剧,韩国的电影.游戏在我国也是比较流行.而韩国的网站在我国也是同样受到大多数网站爱好者的欢迎.

    一些网页设计的初学者一般都会去模仿韩国的网站进行设计,通过分析他们的网站,让人不由得惊叹,韩国的站点在框架结构、内容排版、色彩搭配、图片运用上达到了非常和谐的统一,他们的设计师更是拥有较大的设计空间,让人不由的惊叹他们的创造力,当然并不是说我们国人的创造力没他们强.

    首先是韩国的设计师在色彩的运用方面可以说是非常的得当,在我们看来有些非常难看的颜色到了他们的手里很轻易的就搭配出一种很另类或和谐的美感,给人的感觉要么淡雅迷人,要么另类大胆,很好的把颜色搭配起来,给人一种心理舒畅的感觉.

    其次是韩国网站大量运用flash和图片,大量的图片、flash得到很好的运用,网站里的图片动不动就是40、50K的大图,网页图片多的页面大小通常都是几百K,这在我们国内是根本不敢想像的。韩国的banner大都以横幅广告条出现在页面的导航栏下面,采用的都是精美的图片或者是手绘风格的矢量插图。国内很多网站也采用大幅的flash广告条,但是通常都是着眼于如何去表现flash动画的酷、炫的感觉,使得浏览者过于关注flash而忽视了页面的其他内容。而韩国的flash则更好的服务于网站的主题,和整个页面搭配起来看得很舒服而不抢眼,他们的关键就在于整个flash不是全部变化,而只是局部在动,以及文字和背景的巧妙配合。韩国网页设计师的手绘能力很强,页面中大量采用手绘的矢量图片,使得整个网站显得精致而与众不同。 

    第三就是韩国网站的页面层次感,这个层次感不是靠作几个立体字来体现的,其实靠的也不过是添加简单的图片或文字阴影效果和巧妙的利用构图来形成视觉上的差异,但就是这种设计上的不拘泥于形式使网站的立体效果呼之欲出,层次感还体现在细微部分的设计上,如果少了那些细节,将会使他们的网站逊色不少.

    评论韩国网站的文章很多,我在这里也不多说了,我个人并不赞成去模仿他们的设计风格,而要形成我们自己的风格,学习如何更好地继承我们优秀的民族艺术,将它和现代设计理念结合起来,做出更有特色的精彩网站。

一、页面结构

  韩国网站的页面结构相对来说比较简单,可以说几乎是统一的风格,顶部的左边是网站的logo,右边就是它的导航栏,和国内网站不一样的地方它甚少采用下拉菜单的样式,而是把各级栏目的下级内容放在导航栏的下面。然后下面是个大大的Flash条,再往下就是各个小栏目的主要内容,如图所示:

按此在新窗口浏览图片

  二、色彩运用

  韩国设计师很多都是科班出生,对色彩的运用非常得当,在我们看来有些非常难看的颜色到了他们的手里很轻易的就搭配出一种很另类或和谐的美感,给人的感觉要么淡雅迷人,要么另类大胆,让人觉得欣赏他们的网站是一个非常愉悦的过程。在我看来,韩国的设计师真是深得Windows xp的设计精髓,渐变色以及透明水晶效果用得非常恰当,而不像很多网站动不动就滥用仿苹果按钮,和整体风格不协调,看起来显得很突兀。韩国网站的各个栏目一般都比较喜欢采用不同的色调来表达不同栏目的主题,灰色是他们最爱用的颜色,因为灰色比较中庸,能和任何色彩搭配,大大的改变色彩的韵味,使对比更强烈,正文文字也大都采用灰色。而局部则喜欢用色彩绚丽的色条或色块来区分不同的栏目,我们来看下面的几张图片

  图1是圣诞主题的网站,颜色运用对比强烈,在我们看来红色和绿色搭配就是“红配绿,死牛肉”,其实相反色系两色相配,即所谓红 配绿、蓝配黄、橙配紫,这种搭配如果处理得好,出来的效果会很抢眼。如这个网站,看起来显得很生动活波,使得红显得更红,很符合网站的主题。

按此在新窗口浏览图片

  图2是个典型的有关旅游休闲韩国网站,该网站采用了灰色做为底色,然后用色彩明快的橙色、绿色、粉红色的色块来划分栏目,显得整洁清晰而不呆板。
按此在新窗口浏览图片

  下面这两个网站运用渐变色很出色,图3一看颜色就知道是个女性的时尚站点,它把几个栏目做成晶莹剔透的泡泡球放在顶部的大Flash条里,非常醒目。整个站点显得异常优雅迷人

按此在新窗口浏览图片

按此在新窗口浏览图片
 

三、Flash动画及图片的运用

  韩国的宽带普及率很高,所以设计师设计起页面来完全毫无顾忌,大量的图片、flash得到很好的运用,网站里的图片动不动就是40、50K的大图,网页图片多的页面大小通常都是几百K,这在我们国内是根本不敢想像的。韩国的flash banner大都以横幅广告条出现在页面的导航栏下面,采用的都是精美的图片或者是手绘风格的矢量插图。国内很多网站也采用大幅的flash广告条,但是通常都是着眼于如何去表现flash动画的酷、炫的感觉,使得浏览者过于关注flash而忽视了页面的其他内容。而韩国的flash则更好的服务于网站的主题,和整个页面搭配起来看得很舒服而不抢眼,他们的关键就在于整个flash不是全部变化,而只是局部在动,以及文字和背景的巧妙配合。韩国网页设计师的手绘能力很强,页面中大量采用手绘的矢量图片,使得整个网站显得精致而与众不同。

  图5是个很养眼的网站,颜色采用类似色调搭配,看起来很舒服。最欣赏的就是flash的右边的树叶,有几片叶子在轻轻飘动,左边的图片淡淡地消失、出现,文字缓缓出现,真的是非常有意境,整个网站看起来生机盎然。

按此在新窗口浏览图片

  最近在杂志界开始吹起了复古风,六、七十年代的手绘插图又开始流行,杂志书籍中大量使用矢量时尚插图取代以前的照片,这股流行势力很快也蔓延到了网络上,韩国网站紧随其后,在时尚站点和儿童站点中大量运用手绘的插图,如图6 、图7所示。

按此在新窗口浏览图片

按此在新窗口浏览图片

  四、文字排版

  网站的内容排版因为要考虑到可读性,很多栏目的文字编排都比较简单,利于阅读,而在一些内容较少的页面如网站的广告或宣传页上排版则富于变化,更类似于杂志内页的排版,我怀疑很多韩国网页设计师都是从平面设计师转行过来的。如图8、图9。

按此在新窗口浏览图片

按此在新窗口浏览图片
 
 

五、页面的立体感及细节处理

  韩国网站还有个令人称道的地方就是它的网站看起来很有层次感,而这个层次感不是靠作几个立体字来体现的,其实靠的也不过是添加简单的图片或文字阴影效果和巧妙的利用构图来形成视觉上的差异,但就是这种设计上的不拘泥于形式使网站的立体效果呼之欲出。我最佩服的是韩国设计师做事的认真态度,他们的每一个按钮、图片的处理都及其讲究,其实一些细微的部分不仔细看还不一定容易发现,但是如果少了这些细节的地方,整个网站的整体形象就要大打折扣了。

  图10中我们可以看到,网站的右边画了个好像是探照灯的东东,它周围的立体效果使得它看起来像是放置在一个房间里,然后照亮左边的大幅画像,感觉就像在电影院一样,和它这个娱乐主题很吻合。

按此在新窗口浏览图片

  图11是个框架相当简单的网站,如果处理得不好,很容易会显得呆板而无趣,但是因为使用了大量的和整个网站颜色风格统一的图标和图片,网站看起来显得很生动。

按此在新窗口浏览图片
 

1、搜索引擎不友好

搜索引擎对于难以处理和识别的打字稿、复数、连字号等等各种各样的问题,搜索的准确度会降低。显然,如果搜索引擎刻意去迎合这种错误使用的话,会伤害到所有的搜索使用者。

一个相关的问题是,搜索引擎区分结果是依靠文档的重要性,而只是按照内容关联次数简单地进行结果区分。

当找不到信息的时候,搜索是用户的救生索。即使有高级搜索功能,建议还是使用简单搜索,搜索形式应该是一个简单的录入框,就像我们常见的那一种。

2、使用PDF文件做为在线阅读

用户讨厌在浏览的时候跳出PDF文件,因为那会打断用户的浏览过程,因为普通的浏览器按钮无法工作,因此即使如打印或保存文档这样简单的事情也会变得复杂。由于其版面设计是基于纸张优化的,因此文字的字体很少会和用户的流量其窗口相适应。没有了平滑的滚动浏览,有的只是超小号的字体。

更糟糕的是,PDF文件内容是分块的,很难浏览。

PDF是对于印刷及发行手册等和其他需要打印的大文件来讲是很合适的,使用它的目的只是为了保留它的信息使其网页上浏览成为现实。

3、未改变已访问链接的颜色

一个好的浏览历史能够帮助你了解目前的位置,因为那是你浏览的起点。知道过去和现在的位置反过来使得决定下一步去哪里变得容易了。链接是这些浏览过程中的一个关键因素。用户可以不去访问那些没有用处的地址,相反,他们会访问那些对他们有帮助的链接地址。

最重要的是,他们知道哪些网页已经访问过了,这样就不必一次又一次访问同一个历史页面。

但是这些好处只是基于一个重要的假设:由于网站提供不同的颜色显示,用户可以分辨出哪些链接访问过,哪些链接没有访问过。如果访问一个链接后颜色没有发生变化,那么用户很可能会感到迷惑并无意中反复访问同一历史页面。
    

4、文字未排版

将所有文字堆积在一起是一种可怕的体验,浏览这样的文字将是痛苦的经历。

在线写作,并不是为了打印,需要让用户能很好地阅读,下面是几个改进的要点:

  使用子标题

  使用列表

  突出关键字

  使用小段落

  反金字塔结构

  简单的写作风格

5、固定字体大小

CSS样式不幸让网站有权禁止浏览器的“改变字体大小”的功能,并使得网站有一个固定的字体大小。对于大多数人的年龄超过40岁的人来说,这个固定地文字大小实在太小了。

尊重用户的喜好,让他们按照自己的需要修改文字的大小,同时,明确字体大小是相对的,而非绝对显示像素的数量多少。

6. 网页标题搜索引擎不友好

搜索是用户发现网站的最重要途径,搜索用户找到一个独立网站的最重要的方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工具。

网页的标题文字是在<title>标记之间的文字,并通常作为搜索引擎结果列表中的链接文字。搜索引擎一般只显示标题开头66个字,是真正的缩略内容。

网页标题也用户将一个网址加为书签时的默认文字,对于你的主页,应该以公司名称开头,接着是网站的简介,不要用“The”或“Welcome to”做为开头文字。

对于其他网页来说,标题应该是将具体内容的概要文字说明,由于网页标题是浏览器窗口的标题,也是用户任务条上的标签,多个窗口下将会显示每一页的标题,因此,如果你所有的网页标题字都相同的话,对于开了多个窗口的用户来说,你网站的可用性将严重降低。

7、所有的东西看起来都像广告

有选择地吸引注意力是相当有力的途径。用户已经学会了对挡在眼前的那些目的性很强的广告采取不予理睬的态度。这也就是为何点击率每年以半数速度下降,网络广告根本不起作用的原因。

不幸的是,这也使得用户忽视了那些看起来很像广告的设计样式。毕竟,当你不理会某些东西时,就不会仔细地研究它并搞清楚它是什么。

因此,最好避免任何类似广告的设计。这一指导方针所传达的含义随着新的广告形式出现而变化。目前遵循以下规则:

无视横幅:着用户将不会把注意力放在任何看似横幅广告的东西,这取决于它的形状及位置。

避免使用动画:用户会忽视那些闪烁的文字或其它侵略性很强的动画。

净化弹出窗口:用户在弹出窗口完全打开前就会将其关闭,有时是带着极端厌恶的情绪。

8、违反设计惯例

一致性是最重要的可用性原则之一:当事物遵循相同的原则运作时,用户不用担心发生意外,因为他们根据先前的经验已经很清楚将会发生什么事情。就像你每次在牛顿的头顶上放下一个苹果,它一定会砸中他的脑袋一样。

用户的期望实现得越多,他们就越感觉是自己在控制整个系统,并且更加喜欢它。相反地,用户则会感到可靠程度不够。想想,当我释放苹果时,它变成了西红柿并朝着天空蹦出一英里,那多荒诞!

9、打开新的浏览器窗口

打开新的浏览窗口就像一个吸尘器推销员在上门推销时,直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托!不要用任何窗口污染我的屏幕(尤其在当前操作系统低劣的窗口管理技术下),如果我需要一个新窗口,我会自己打开的。

设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应,这种策略恰恰弄巧成拙,因为当用户想通过“后退”按钮返回先前的站点时,已经做不到了。用户通常注意不到新窗口已经被打开,尤其当他们的显示器很小,而窗口又正好是最大化时。因此,当用户想要返回原来的站点时,面对的却只是一个不可用的灰色“后退”按钮。

点击链接的标准结果是目标页面在当前的浏览窗口中加载,取代现有页面。出现其它的任何情况都违背了用户的期望,令他们感到对网络的控制不稳定。用户痛恨那些突然弹出来的窗口,当用户想要在新窗口打开一页的时候,会自己使用“在新窗口打开”功能,因此不要用一些代码来干扰了用户浏览器的操作。

10、不回答用户的提问

用户是因为某个目的才访问你的网站。他们方式可能是想购买你的产品或者其他,但最终却失败了,因为网站没有提供用户寻找的资料信息。

事实上问题远没有这么简单,如果你不告诉用户具体情况,用户就会以为你的产品或服务不能满足他们的需求,因此用户就不会购买你的产品,或者有一些信息,深深隐藏在各种文档之间,用户没有时间阅读所有这些隐藏的信息,因此也就认为它们不存在。

不回答用户提问的最坏的例子是拒绝提供产品和服务的价格清单,没有任何B2C的商务网站会犯这种错误,但是这在B2B中却普遍存在,大多数“企业解决方案”的提出,让你不能告诉用户他们适合100个站点、还是10万个站点人。价格是最主要的作用是便于想用户提供相应的产品,避免提供一个不成熟的产品给用户。

即使是B2C网站有时页会忘记在所有地方提供相关产品价格清单,例如在目录页或者搜索结果页,要知道,在这两种情况下,价格是关键,它让用户能够区分不同的产品并找到最合适的目标。

作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页。   从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确,这些确实是我所关注的。视觉上的吸引力是重要的,但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。   我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息。   设计站点   在进行 Web 设计时–在设计过程中–形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然,我们有最新的 Web 工具,并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。   事实上,我经常发现一些站点未将重点放在功能上。常见的错误包括:   用户界面元素不一致。例如,同一个控件在不同的页面上功能不同,或者同一个功能对应几个用户界面控件。   导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。   不太注意或根本不注意基本的图形设计原则。例如排版式样、色彩和版面的设计。   相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。   使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形,但是您需要对它们进行精挑细选,然后用适当的压缩和颜色索引优化它们。   现在的 Web 站点仍然存在很多问题,这并不奇怪。毕竟,Web 设计“艺术”相对来说还是个新生事物。在四、五年以前,Web 页甚至是普通的。那时,人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在–并且,可能在某些情况下这种方法确实有效。但是这些站点一般很难看,并且更重要的是,它们真的难以使用。接下来便进入“看看我们能做些什么”阶段,在网页中加入了大量的动画、声音文件以及其它附加件,导致访问者需要长时间地进行下载,但是并未获得多少实实在在的内容。   如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速,同时在功能上有所提高。这是 Microsoft 的目标,而且我们最先承认自己所犯的错误(参阅“Microsoft 的 Web 简史”看一看以前的主页设计)。   设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是,在其它情况下,它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西,那就是小的改动会使 Web 页的运行方式有很大的不同。明确的流程   若要避免类似问题,我们为新服务(例如“搜索”)的创建或关键的 Web 页(如主页)设计了一个明确的流程。 每个项目都是在一定的基础上开始的,即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段(第 1 阶段),我被要求设计一些初级模型:大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议,看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。   如果答案是“可以”,那么此项目会获得批准,我们开始写项目说明书(第 2 阶段)。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时,我们一般还会开始可用性测试(一般会有书面的模型)以了解潜在用户将对计划中的设计做出何种反应。 在最后开发阶段(第 3 阶段),我们创建运行计划服务的 Web 原型,并且进行全面的可用性测试以及内部复查。然后完成站点的代码,修改程序错误,最后站点通过实际运转的 Web 站点向客户发布。   正如您所见到的,可用性在整个流程中扮演着重要的角色(参阅“创建有效的 Web 界面需要认真计划”)。我们可以为用户运行某项任务计时,这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量,以确定一个功能的重新设计是否为客户带来任何真正的价值。   还有,我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能–我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如:在我们的站点上,在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索,以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上,很少有人熟悉它。一些用户认为他们正开始新的搜索,并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。   选项“在结果范围内搜索”看上去很直观,但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。   最后阶段   大体来讲,站点设计是在发生冲突的需要之间求得平衡的艺术。一方面,我要将站点设计得尽量简单易用。另一方面,我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时,我还要为内部客户服务–Microsoft 产品项目组–他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题,经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。   这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程–在大学学习图形艺术,然后在多媒体公司设计 CD-ROM,最后加入 Microsoft 并开发应用程序–才获得这个职位的。非常奇怪的是,当我申请(并获得)这份工作时,我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的,并且我自认为已经验证了格言“成功的设计就是成功的设计”(不论是什么媒体)。许多设计问题对 Web 来说是独一无二的,解决这些问题的方法对于任何媒体都是一样的。   对于那些准 Web 设计师我的建议是,他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分–大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。 在未来,Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容,从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师,要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是,Web 设计师也将向这些领域发展。   对于属于 microsoft.com 的我们–以及在 Internet 上的其它地方–那应该是一个非常有趣的未来。   了解您的观众   调查一下究竟哪些人在访问您的站点,以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。 使您的站点对访问者来说有所帮助。 为您的观众提供所需的信息   使导航元素保持一致,并且确保对访问率最高的区域进行明显的标记,是它们易于被找到。   使用清楚的消息   确保用户了解此页面的上下文,并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名,那么就直截了当地说。不要让访问者自己计算什么,他们会感到沮丧,于是转到其它更简单的站点(例如您的竞争对手的站点!)。   保持一致性   虽然更改不同 Web 页的外观并不难,但这并不意味着您应该这么做。将主要功能–例如返回“主页”的链接或者执行一个搜索–放在每页的相同位置。在 microsoft.com 上,黑色全局导航工具栏的位置在四十多万页上都是一样的。   使站点可用   牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率,然后努力进行改善。如果新的设计没有在这些方面获得改善,那么就不要实施它。重新从草图(或最初的计划)开始并尝试其它方法。   保持简洁   说起来容易做起来难。尝试征求反馈意见。 有时新人可以很容易找到解决方案。   尝试新的东西   不要害怕打破常规,尝试一些完全不同的东西。如果您不试试,永远不会找到真正的答案。

1引言 
1.1设计说明 
本文档是对系统界面设计风格进行描述,和用户交互的最终界面在《详细设计说明书》中设计和解释。 

1.2概念和定义 
用户界面:又称人机界面,实现用户与计算机之间得通信,以控制计算机或进行用户和计算机之间得数据传送得系统部件。 
GUI:即图形用户界面,一种可视化得用户界面,它使用图形界面代替正文界面。 

1.3用户假定 
将使用本系统的用户定义为:对应用程序或计算机的一般用法有一定了解,用户希望界面符合WINDOWS9X特别是OFFICE97风格,对易用性、简洁性有比较高的要求,对界面快速交互没有很强的要求(即不希望通过命令方式快速交互)。 

2用户界面设计规范 
2.1用户界面设计原则 
本系统坚持图形用户界面(GUI)设计原则,界面直观、对用户透明:用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 
界面设计员应该明白软件中用户是所有处理的核心,不应该有应用程序来决定处理过程,所以用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把*作流程强加给用户。 
界面设计必须经过确认才能完成。 

2.2界面一致性 
在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 
1)显示信息一致性标准 
(1)标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号(10号); 
(2)日期:正常字体、宋体、白底黑字、3-D lowered; 
(3)对齐方法: 
l 左对齐:一般文字、单个数字、日期等 
l 右对齐:数字、时间、日期加时间。 
(4)分辨率为800*600,增强色16色 
(5)字体缺省为宋替、五号、黑色 
(6)底色缺省采用灰色 
这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用,因此开发者应当注意在同一软件中表现形式的一致性。 
2)布局合理化原则 
应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。 
在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下,再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 布局力求简洁、有序、易于*作。 
3)鼠标与键盘对应原则 
应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一些必要的按钮和菜单项。 
但是,许多鼠标的*作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代(或其它方式)。又如在一个窗口中有两个数据窗口,可以用鼠标从一个数据窗口中将一项拖出然后放到另一个中。如果只用键盘,就应当在菜单中设置拷贝或移动的菜单项。 
4)快捷键 
在菜单项中使用快捷键可以让使用键盘的用户*作得更快一些,在西文Windows及其应用软件中快捷键的使用大多是一致的。本系统中应用的快捷键在各个配置项上语义必须保持一致。 
面向事务的: 
l Ctrl-D 删除 
l Ctrl-F 寻找 
l Ctrl-I 插入 
l Ctrl-N 新记录 
l Ctrl-S 保存 
查询/列表: 
l Ctrl-O 
l Ctrl-R 
其它: 
l Ctrl-C 拷贝 
l Ctrl-H 帮助 
l Ctrl-P 打印 
l Ctrl-V 粘贴 
l Ctrl-W 关闭 
l Ctrl-X 剪切 
MS Windows保留键: 
l Ctrl-Tab 下一窗口 
l Ctrl-Esc 任务列表 
l Ctrl-F4 关闭窗口 
l Alt-F4 结束应用 
l Alt-Tab 下一应用 
l Enter 缺省按钮/确认*作 
l Esc 取消按钮/取消*作 
l Shift-F1 上下文相关帮助 
其它快捷键 
其它快捷键使用汉语拼音的开头字母,不常用的可以没有快捷键。 
2.3向导(WIZARD)使用原则 
对于应用中某些部分的处理流程是固定的,用户必须按照指定的顺序输入*作信息,为了使用户*作得到必要的引用应该使用向导,使用户使用功能时比较轻松明了,但是向导必须用在固定处理流程中,并且处理流程应该不少于3个处理步骤。 

 

2.4系统响应时间 
系统响应时间包括两个方面:时间长度和时间的易变性。用户响应时间应该适中,系统响应时间过长,用户就会感到不安和沮丧,而响应时间过短有时会造成用户加快*作节奏,从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长,低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间上坚持如下原则: 
响应时间长度               界面设计 
0-10 秒                       鼠 标 显 示 成 为 沙 漏 
10 到18 秒               由微帮助来显示处理进度 
18 秒 以 上                   显示处理窗口,或显示进度条 
一个长时间的处理完成时       应给予完成警告信息 


响应时间的易变性             界面设计 
用户感觉不到                     不考虑 
用户稍微感觉到                     由微帮助提供易变性说明 
容易性大而且时间绝对差别大          显示易变性提示 

2.5用户帮助设施 
常用的帮助设施有两种:集成的和附加的。集成的帮助设施一开始就是设计在软件中的,它与语境有关,用户可以直接选择与所要执行*作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间,增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。 
本系统提供这两种帮助设施,设计和实现时遵循以下原则: 
1) 进行系统交互时,提供部分帮助功能,即:提供主要*作的帮助 
2) 用户可以通过帮助菜单、F1键和帮助按钮(如果有的话)访问帮助 
3) 表示帮助时根据需要提供三种方式的选择:另一个窗体、微帮助和指出参考某个文档 
4) 用户如何回到正常交互方式有两种选择:返回键和功能键 
5) 帮助信息的构造:采用分层式帮助 
6) 微帮助提供:由状态栏提供,或控件上的提示文本 

2.6出错信息和警告 
出错信息和警告是指出现问题时系统给出的坏消息,本系统对于出错信息和警告应该遵循以下原则: 
1) 信息以用户可以理解的术语描述; 
2) 信息应提供如何从错误中恢复的建设性意见; 
3) 信息应指出错误可能导致那些不量后果,以便用户检查是否出现了这些情况或帮助用户进行改正; 
4) 信息应伴随着视觉上的提示,如特殊的图像、颜色或信息闪烁。 
5) 信息不能带有判断色彩,即任何情况下不能指责用户 

2.7命令交互 
由于本系统用户是WINDOWS用户,故本系统不提供命令交互。 

2.8一般交互原则 
本系统一般交互遵循以下原则: 
1) 一致性:菜单选择、数据显示以及其它功能都应使用一致的格式。 
2) 提供有意义的反馈 
3) 执行有较大破坏性的动作前要求确认 
4) 在数据录入上允许取消大多数*作 
5) 减少在动作间必须记忆的信息数量 
6) 在对话、移动和思考中提高效率 
7) 允许用户非恶意错误,系统应保护自己不受致命作物的破坏 
8) 按功能对动作分类,并按此排列屏幕布局,设计者应那里提高命令和动作组织的内聚性 
9) 提供语境相关的帮助机制 

2.9信息显示原则 
本系统信息显示遵循以下原则: 
1) 只显示与当前用户语境环境有关的信息; 
2) 不要用数据将用户包围,使用便于用户迅速吸取信息的方式表现信息; 
3) 使用一致的标记、标准缩写和可预测的颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源; 
4) 产生有意义的出错信息,见2.6; 
5) 使用缩进和文本来辅助理解; 
6) 使用窗口分隔控件分隔不同类型的信息; 
7) 高效地使用显示器的显示空间。 

2.10数据输入原则 
本系统数据输入遵循以下原则: 
1) 尽量减少用户输入动作的数量; 
2) 维护信息显示和数据输入的一致性; 
3) 交互应该时灵活的,对键盘和鼠标输入的灵活性提供支持; 
4) 在当前动作的语境中使不合适的命令不起作用; 
5) 让用户控制交互流,用户可以跳过不必要的动作、改变所需动作的顺序(如果允许的话)以及在不退出系统的情况下从错误状态中恢复; 
6) 为所有输入的动作提供帮助,见2.5; 
7) 消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。 

3用户界面设计更改和追加说明 
3.1更改说明 
更改本用户界面设计时应该征得所有开发者的同意,所有开发者应该按更正后的原则修改和设计用户界面。 

3.2追加说明 
追加本用户界面设计时应该发布给所有开发者,所有开发者应该按追加后的原则修改和设计用户界面。