gui的设计总则(集合在一起)

过去写的。今天在网上看到别人把分开的4篇文章都集合在了一起，所以顺手也就拿过来再贴一次。 其中有很多的话，再次看看仍然十分的受用。 今天开始写这篇gui的设计总则。在正式开始编写以前，先说明一下这篇总则的意义： 由于Openshell的开发是采取opensource的方式进行的，所以很多的时候，开发的动力来源是源自网上的热心人。 由于opensource的先天特点，它必须先确立一个主题，然后所有对这个主题感兴趣的人才有可能参加进来。 一般opensource软件的正常模式是首先放出一个程序来确定这个主题，大家根据这个程序来清楚这个项目的开发目标，然后再根据个人的兴趣来加入。 Openshell 也是Opensource模式的，（这里我将项目的开发分为了两个部分，gui设计部分，程序编写部分，请注意，在这里我所说的所有开发都只是说gui的设计开发，对于程序的开发由于所做的功能明确，所以并不需要大家群策群力来开发各种版本，只是有有限的几个版本即可）但是它最先无法放出一个程序（也能放出，但是体现不出这个程序gui设计的一些根本思想）来让大家作为参考，所以我确立的原则是先编写大量gui规则说明，然后放出一个我的个人的gui版本，大家可以根据我的个人版本来作为参照，然后再依据总则来做自己的gui版本。 作为是本项目的一部分的主要证明在于你所作的设计gui符合我提供的gui设计总则，这样我们的程序就应该可以比较容易的移植你的gui设计。 gui的设计为什么需要这么多的个人版本？ gui是图形用户界面的英文简称。gui的目的是让人对程序进行交互操作。gui是让人使用程序的关键，越是复杂的程序能否发挥程序的特点就越要看gui的设计。好的gui设计可以100%的发挥程序的能力，坏的gui设计甚至无法让人使用程序。 我们说从以人为本的角度来说，每个人的知识结构并不一样，大家接受各种新事物的速度也不相同，对于同样一种事物的喜好也不相同。为了体现以人为本的原则，任何的gui设计是不能一概而论的，没有任何的gui设计可能符合任何人的需要，大家所需要的是更加明细的gui，而这就意味着很多版本的gui来适应很多不同人的需求。 为了实现各种明细gui的设计，以单单几个人的能力是无法达到的，所以采取opensource的模式，采取确立总则并辅助参考的模式，来让网上的热心人完成各自的个人版本。 这就是gui设计总则编写的原因。

openshell的gui设计已经进行了很长时间了，似乎这个趋势还要继续下去。不管怎样，先放点gui设计的笔记出来吧！ 这些笔记大多出自一本叫做“web可用性设计”的书，是译林出版社出版的，2000年的书。偶然在图书馆翻到的。简直是我设计gui的绝对理论参考。书中的很多web设计观点对Openshell的gui设计十分的适用。这些web设计观点也是经过长期作者的实践总结出来的，所以对我的gui设计而言就有了实践的基础。 那么为什么web的设计与openshell的gui设计有这么多共通性呢？ 因为大家都想成为一个强大的gui平台，可以为用户更好的服务，让用户更加的轻易理解自己展示的信息，让用户更加容易的操作，更加容易的完成用户想要完成的任务。 web设计的最根本原则？ 这里我们说有两方面的原则：一个是出自信息提供者，一个是出自通用的好的web设计者。 信息提供者会以让用户更多的浏览它的信息为原则(甚至有限度的愚弄用户也在所不惜)；通用的好的web设计者会以帮助用户浏览信息为原则。 Openshell的gui设计的最根本原则？ 为了帮助人们更加轻易的操作与信息相关的所有动作，如：浏览信息，制作信息，传递信息，消灭信息。以信息为中心就是这个gui的主题。 Openshell是作为一个工具出现的，我们现在关心的是如何帮助用户，成为一个让用户更加信赖的工具。这样的原则也就与通用的好的web设计者的原则相一致。 (不要小觑了信息提供者的力量，在现在的互联网上，大多都是他们的身影，为了自己的信息获得更多的关注，他们可以轻易的浪费任何浏览者的时间，他们从不从用户的角度出发去设计自己的站点，相反，他们总是在想着自己的信息的泛滥程度。) web的现状？ 我们都知道，现在web正在努力的摆脱最初的原始设计，web要成为一个能力全面的平台。web的最初原始设计是作为阅读报纸的环境而设计的，它并不适于解决各种高级的复杂过程。web要成为一个全面的平台就要在显示的内容方面下很多的功夫，但是web要显示的内容没有任何的定式，例如：站点的结构，首页的组成，页面中各种数据的放置位置，导航的设计等等，这些都没有固定的设计规则，大家的设计全凭自己的喜好与一些简单的规则。当然，这种情况现在好了很多，渐渐的有些web设计师开始有意识的遵守某些约定的规则。 web虽然对用户而言是一个整体，但各个站点形成了不同的流派。 附注：笔记顺序可能有些乱，但都是一些gui设计中的精华语句。这些精华语句我都用黑体放置在一段话中，这样有了上下文希望大家能更好的理解。作为独立的黑体字部分，并不是精华，而只是对于精华一个引出。

首先感谢Joe在前天给我的连接，这是一个比较好的例子http://www.imeem.com/，它利用了自己的客户端软件来代替ie浏览器完成一系列的网络任务，如：blog，photo，share files等。这个软件还使用了google gmail采用的邀请的方式，当然并不是一定要收到邀请才能使用。这个软件不好的地方在于它的安装需要.net组件，一般的机器都需要先下载，这个过程很慢。软件运行的并不流畅，界面并没有任何实质性的设计，完全采用了ie的界面，没有太多的体现出独立客户端的优势。 言归正传，继续说gui设计笔记： 我们正在设计的到底是什么？ 一个虚拟系统。更加准确的说是一个人与机器交互用的虚拟系统。 虚拟系统：我们过去的所有操作机器的设计都可以说是一个虚拟系统。虚拟系统就是在自己的系统内部建立一些缺省的操作规则，来让用户使用这个系统。 虚拟系统早先时候是用文字来操作的，如unix系统的命令行操作模式；后来开始使用图形系统来操作，如win32系统。我们现在所玩的电子游戏也是一种虚拟系统。 虚拟系统现在包括：桌面系统，游戏系统。 游戏系统操作的结果具有不肯定性，使得用户总是重复操作，好与坏的结果的可能性格占一定的比率。 桌面系统的操作结果具有十分明确性。 任何的虚拟系统都需要一定的规则来操作，人们本身的任何行为也都需要一定的规则。 我们在使用虚拟系统前就已经学习了解了很多的规则，一个系统的规则是无法适用于所有人，所有人对同样一个虚拟系统的上手速度都不同。例如：使用过很多软件的人对于一个新图形软件的操作肯定会优于很少使用过的人。 操作时的反馈时间？ 0.1秒的反馈会让用户觉得自己在实时操作。 1秒钟意味着用户可以察觉到延迟，但是还未有不适感。 10秒钟是用户保持注意力的极限。 反馈时间的变化性要小，在某些方面给用户对于反馈时间的一个一致的期待，如看到某图标就会知道反馈时间要很长，做某项操作会有预期的反馈时间。 gui界面两种显示元素 文字，图像。文字的目的是对gui界面的描述，依靠用户对文字的理解来理解gui界面。图像的目的是明确的显示事物，让用户清楚的接收一些图像里的信息（也有的gui界面中的图像没有任何的意义）。 还有一种重要的元素，声音。声音在gui上是对于上面的两种元素的辅助，当然，有些时候声音也可能取代上面的两种元素，例如：用户可以只听声音来了解界面上的信息。 gui界面的两类系统 导航系统，动作系统。导航系统的目的是为了引导人们的操作，例如，win32下的资源管理器，它指引人们来进行数据的浏览。动作系统的目的是为了让用户对要操作的对象作出动作，例如，在资源管理器下的复制，粘贴等动作。 win32系统的gui界面将导航系统与动作系统混合在了一起，在win32下运行的大多数软件也都是如此。 多数的游戏都将导航系统与动作系统相分离，进入游戏以前都是导航系统在与用户交互，而进入游戏后都是动作系统在与用户交互。 gui界面中内容的显示比例 当你要显示正文时，真正要显示的内容在整个屏幕上所占的比例应该接近于80%，导航系统应占10%，其他的空白空间占10%。 这种方案是以用户为中心的。现在的实际情况，一般是导航或其他空间占用大量的显示空间，而真正内容只占不到50%，甚至30%还要少。 gui中的显示最大化并不应该真的将程序的显示占满屏幕，而是有选择的适当最大化。对于一个屏幕很大的用户而言，最大化单一的程序会造成屏幕资源的浪费，这时应该在合适的范围内最大化屏幕，剩余的屏幕显示应该留给导航系统或者其他的程序，从而形成多窗口显示。 导航系统的三个作用 告诉用户：我在哪里；我去过哪里；我可以去哪里。 在用户开始使用你的gui界面前，你都必须让用户首先学习你的导航系统与其他的特殊规则。只有用户懂得了导航系统的基本使用规则后，用户才可能开始使用你的系统。现在的软件界面设计大都延用了win32系统的界面设计规则，所以有win32系统经验的用户对于导航系统的规则就很容易适应。 在导航系统的设计中，隐喻是经常出现的（隐喻就是通过某些图像或文字的暗示来引导用户使用）。对于某些用户而言隐喻可以加速用户的学习，并为设计提供统一的架构。但是对多数用户而言，隐喻的使用会让他们迷惑。 隐喻通常不能进行扩展来覆盖系统的所有必要特征。隐喻有词语上的，图像上的。隐喻可能会逐步成为事实标准，就像win32的窗口系统，它以窗口为隐喻。   gui的设计笔记(4) 我们并不拥有用户，也没有办法抓住用户，我们只希望用户在处理信息相关问题时，经过我们这里来前进。 上面的这句话，应该是很多gui工具的设计格言。希望大家都能真正的理解并采纳。 动画的使用 动画的使用会让用户注意到动画的存在，它是提醒用户的好工具。 动画的目的： 显示过渡的连续性；（例如，在mac osx中，当点击窗口最小化时，会有一个动画来显示窗口动态的缩小到屏幕下方的工具栏中） 指出过渡的维度；（通过动画的表达，能让用户的意识到某些画面的维度） 指出随时间的变化；（通过动画，可以暗示用户某些事情是随时间在变化的） 动态的显示附加信息；（例如，当你的鼠标移到某个连接时，有可能会出现动态的文字来告诉你这个连接的实际作用） 增强图形表达；（当一幅静态图像无法确切的传递你的意图时，用动画就能更好的告知用户信息。） 增强三维可视性；（通过动画的展示，三维立体效果能更加的真实，使用户能更加的容易识别三维效果） 起到演示的作用；（动画在演示一些实际发生的情况方面有先天的优势） 吸引注意力。（例如，msn当有新邮件收到时，会动态的在右下角跳出一个窗口来提醒用户有新邮件） 动画应该少量，在大多数时候屏幕的显示应以静态元素为主，动画应该出现，但是少量。 动画用以更加清晰的表达信息，从而让用户更容易理解gui界面上各个元素的关系，方便最初的用户快速的学习操作，在用户操作的后期显然动画的意义就不大了。