（设计艺术学专业论文）多媒体图形界面设计的研究.pdf

多媒体图形界面设计的研究 摘要： 平面设计中的设计元素在多媒体图形界面设计中的变 化。图形界面设计的规范性。新媒体对现代设计的要求。多 媒体图形界面设计在现代设计中的发展趋势及国内外的发 展现状。广东科学中心动画多媒体图形界面设计中的思路与 创新 关键词：图形界面、窗口行为模式、用户建模、情感设计 m u l t i m e d i ad e s i g no fag r a p h i c a li n t e r f a c e a b s t r a c t ： t h e c h a n g e o f p l a n e e l e m e n ti nm u l t i m e d i a g r a p h i c a l i n t e r f a c e t h es t a n d a r do fg r a p h i c a li n t e r f a c ed e s i g n m u l t i m e d i a g r a p h i c a li n t e r f a c ed e s i g n sd e v e l o p m e n t a lt r e n da n da c t u a l i t ya t h o m ea n da b r o a di nm o d e r nd e s i g n t h et h o u g h ta n di n n o v a t i o ni n m o t i o nm u l t i m e d i a g r a p h i c a li n t e r f a c eo fg u a n g d o n gs c i e n c e c e n t e r k e yw o r d s ：g r a p h i c a li n t e r f a c e w i n d o wb e h a v i o rm o d e u s e rm o d e l i n g e m o t i o n a ld e s i g n 插图索引 图卜l 虚拟环境系统的刺激信号1 图l 一2 统一鲜橙多网页设计1 图1 3 统一鲜橙多网页设计2 图l 一4 三国志游戏界面2 图1 5 游戏机战登陆界面2 图1 6n o k i a 手机界面3 图1 7 索爱i p h o n e 手机主题界面3 图l 一8 c 1 0 c k w o r ko r a n g e 主题设计欣赏4 图1 - 9q q 音乐界面设计4 图卜1 0q q 音乐界面设计5 图2 1 计算机人机交互7 图2 2g m a i l 邮箱界面7 图2 3 早期的计算机7 图2 4 办公软件图形界面8 图2 - 5 企业网站界面设计：8 图2 - 6 广东多媒体软件界面设计8 图2 7 游戏界面设计9 图2 8 电子图书界面设计9 图2 - 9 网络游戏界面设计9 图2 1 0 广东多媒体软件界面设计1 0 图2 - 1 1 广东多媒体软件界面设计1 0 图2 1 2 广东多媒体软件界面设计1 2 图2 一l3 广东多媒体软件界面设计1 2 图2 一1 4 广东多媒体软件界面设计1 2 图2 1 5 界面图标设计1 3 图2 一1 6 界面图标设计13 图2 - 1 7 广东多媒体软件界面设计1 4 图2 一1 8 广东多媒体软件界面设计1 4 图2 - 1 9 广东多媒体软件界面设计1 5 图2 - 2 0 n e r od i s cc o p y 界面设计1 6 图2 2 1 图标设计1 7 图2 2 2 广东多媒体软件界面设计1 8 图2 2 3 广东多媒体软件界面设计1 8 图2 2 4 广东多媒体软件界面设计1 9 图2 2 5 广东多媒体软件界面设计1 9 图3 一l 苹果的早期的图形界面2 l 图3 2 苹果的桌面设计2 1 图3 - 3 苹果系统界面设计2 1 图3 - 4w i n d o w s 系统界面2 2 图3 5w i n d o w s 系统界面2 2 图3 6w i n d o w s 系统登陆桌面2 2 图3 7w i n d o w s 3 2 系统界面2 3 图3 8w i n d o w s 9 5 系统界面2 3 图3 - 9i r i n d o w sm e 系统界面2 3 图3 - 1 0w i n d o w s 2 0 0 0 系统界面2 4 图3 1 lw i n d o w s 2 0 0 3 2 4 图3 1 2w i n d o w sv i s t a 2 4 图3 - 1 3w i n d o w sx p 系统界面2 5 图3 一1 4w i n d o w sv i s t a 系统桌面2 5 图3 1 5 苹果系统桌面2 5 图3 1 6 苹果系统桌面2 5 图3 1 7l i n u x 标志图标2 6 图3 1 8b s db eo s 桌面2 6 图3 1 9b s db eo s 标志图标2 6 图3 2 0b s db eo s 交互桌面2 7 图3 - 2 1b s db eo s 交互桌面2 7 图3 2 2m e d i ap l a y e r 界面与图标2 7 图3 2 3m e d i ap l a y e r 界面与图标2 7 图3 - 2 4m e d i ap l a y e r l l 图标2 8 图3 2 5m e d i ap l a y e r l l 图标分析2 8 图3 2 6m s nm e s s a g e r 的图形界面2 8 图3 2 7q u i c r t i m e 的图形界面2 9 图3 2 8r e a l o n ep 1 a y e r 的图形界面2 9 图3 2 9r e a l o n ep 1 a y e r 的图形界面3 0 图3 3 0 广东多媒体软件图形界面3 0 图3 3 1 广东多媒体软件图形乔面3 1 图4 - 1 广东多媒体软件图形界面3 2 图4 2 广东多媒体软件图形界面3 2 图4 3 广东多媒体软件图形界面3 3 图4 - 4 广东多媒体软件图形界面3 3 图4 - 5 广东多媒体软件图形界面3 4 图4 - 6 广东多媒体软件图形界面3 4 图4 - 7 广东多媒体软件图形界面3 5 图4 - 8 广东多媒体软件图形界面3 5 图4 - 9 游戏软件图形界面图标3 6 图4 一1 0 广东多媒体软件图形界面3 6 图4 一1 1 广东多媒体软件图形界面3 7 图4 - 1 2 广东多媒体软件图形界面3 7 图4 - 1 3 广东多媒体软件图形界面3 8 图5 - l 广东多媒体软件图形界面3 9 图5 2 广东多媒体软件图形界面3 9 图5 3 广东多媒体软件图形界面4 0 图5 - 4 广东多媒体软件图形界面4 0 图5 6 图形界面层叠窗口4 1 图5 - 6 广东多媒体软件图形界面4 1 图5 7 广东多媒体软件图形界面4 i 图5 8 广东多媒体软件图形界面4 2 图5 - 9 广东多媒体软件图形界面4 2 图5 - 1 0 广东多媒体软件图形界面4 3 图5 - 1 i 广东多媒体软件图形界面4 3 图5 - 1 2 广东多媒体软件图形界面4 3 图5 - 1 3 软件图标设计4 4 图5 - 1 4 软件图标设计4 5 图5 - 1 5 多媒体软件图形界面4 6 图5 一1 6 多媒体软件图形界面4 6 图5 - 1 7 广东多媒体软件图形界面4 7 图6 - 1 合肥生命科技园多媒体软件图形界面4 8 图6 2 合肥生命科技园多媒体软件图形界面4 8 图6 - 3 合肥生命科技园多媒体软件图形界面4 8 图6 4 广东多媒体软件图形界面4 9 图6 5 广东多媒体软件图形界面4 9 图6 - 6 广东多媒体软件图形界面5 0 图6 7 广东多媒体软件图形界面5 1 图6 8 广东多媒体软件图形界面5 2 图6 9 广东多媒体软件图形界面5 2 图6 - 1 0 广东多媒体软件图形界面5 2 图6 1 1 广东多媒体软件图形界面5 3 图6 1 2 多媒体软件图形界面5 4 图6 1 3 多媒体软件图形界面5 4 图6 - 1 4 多媒体软件图形界面设计5 5 图6 - 1 5 多媒体软件图形界面5 5 图6 - 1 6 多媒体软件图形界面5 6 图6 一1 7 多媒体软件图形界面5 6 图6 一1 8 多媒体软件图形界面5 7 图6 一1 9 多媒体软件图形界面5 7 图6 - 2 0 多媒体软件及游戏图形界面 图6 2 1 多媒体软件及游戏图形界面 5 8 5 8 图6 - 2 2 多媒体软件图形界面5 9 图6 - 2 3 多媒体软件图形界面5 9 图6 2 4 多媒体软件图形界面6 0 图7 - 1 多媒体软件图形界面6 1 图7 - 2 统一鲜橙多网页设计。6 2 图7 - 3y a h o o 搜索界面6 2 独创性声明 本人声明所呈交的学位论文是本人在导师指导下进行的研究工作及取得的研究成 果。据我所知，除了文中特别加咀标注和致谢的地方外，论文中不包含其他人已经发 表或撰写过的研究成果，也不包含为获得 盒壁_ 王些鑫堂 或其他教育杌构的学 位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文 中作了明确的说明并表示谢意。 学位论文作者签名 台鳓b 签字日期：彦。莎 年6 月 f 学位论文版权使用授权书 本学位论文作者完全了解盒墼王些丕堂有关保留、使用学位论文的规定，有权 保留并向国家有关部门或机构送交论文的复印件和磁盘，允许论文被查阅和借阅。本 人授权佥壁三些盔堂可以将学位论文的全部或部分内容编入有关数据库进行检索， 可以采用影印、缩印或扫描等复制手段保存、汇编学位论文。 ( 保密的学位论文在解密后适用本授权书) 学位论文作者签名 签字日期：母占月舻 学位论文作者毕业后去向 工作单位： 通讯地址： 导师 签字日期：年月日 电话 邮编 致谢 首先要感谢我的导烦张彪副教授，在就读研究生期间，张彪老师 给予我极大的关心和支持。在论文写作过程中，从选题到最终成稿， 得到了导师的悉心指导。并提出了宝贵的建议和意见。在此，谨向我 的导师张彪副教授致以最衷心的感谢。 其次要感谢研究生期间给予我学习上指导和各方面关心的潘国泰 教授、郭凯老师、陈刚老师、陈宇非老师、陈新生老师、李俊蜂老师 还有学院的其他所有的老师，表示诚挚的谢意。 另外还要感谢帮助过我的人们，谢谢您们的支持和鼓励。 最后向我提供帮助和指导的朋友和同学们表示感谢。 作者：范慧君 2 0 0 7 年4 月 第一章绪论 随着经济全球化迸程的加速，软件产业将成为经济的支柱产业，而 且起到的作用将越来越重要软件设计将改变我们的视觉设计观念， 使视觉设计行业变得更加丰富、复杂化。由于软件图形界面的飞速发 展和软件使用范围的不断扩大。图形用户界面设计也逐渐从边缘设计 正在转变为主流的设计行业。特别是2 l 世纪以来，计算机和软件的飞 速发展，图形界面设计却显得有点力不从心。在我国这个问题则显得 更加突出，我们的设计观念和水平跟不上发展的速度。这一切将影响 到我们日常的工作效率，降低计算机的软件功能，出错率将不断增加。 所以当前我国正在大力扶持软件行业的发展，如何做好软件图形界 面的设计已成为一个崭新的课题。 1 1 图形界面设计与计 算机技术在时代发展中的 地位和现状 1 1 1 计算机技术的进步 带来设计艺术革命 现在每天人们都在和各式 各样的电脑产品或基于电脑系 统的产品打交道，而这些产品 可能是日常工作中用到的软件 系统，或带有多媒体功能的智 图表1 一l 虚拟环境系统的刺激信号 能手机等。但是，大多数人在 使用这些交互类的产品时都面临着学习和使用的技术问题，这些新技 图表1 2 统一鲜橙多网页设计 术产品的使用，促使了图形 用户界面的出现和发展，图 形用户界面能够帮助人们知 道如何使用产品，因为消费 者在使用产品时，当接触到 这类交互类产品时，几乎是 没有人会先去看使用手册， 通过摸索许多人就可以熟悉 产品的基本功能，但是之后 对于深一步的功能就难以掌握了到了最后基本上就只会使用有限的 一些功能或者使用起来效率很低，所以设计师应最大可能的通过设计 让用户使用图形用户界面就能够掌握这些交互的功能。 图形用户界面是用户使用交互式产 品时接触到的软件产品的第一印象。 它的重要性是不言而喻的。在当今时 代软件设计市场上，软件的技术和卖 点都已经趋于平均了，要想使自己的 软件产品争取到更多的客户。那么， 图形用户界面设计的美观、易用，符 合大多数人的操作习惯的设计才是 重点，而又必不可少的，所以，如果 图表1 3 统一鲜橙多网页设计 说技术是软件的大脑，那么图形用 户界面就是软件的灵魂。 另外，通过图形用户界面本身， 即使个别人自己不能解决一些特定 的问题，但是由于掌握了更多的概 念性的知识会帮助他们更有效地沟 通和学习。图形用户界面现在越来 越成为基本独立的数据对象了。同 样，一些图表统计等计算功能也都 可以作为视觉元素来展现给用户， 这些都独立于传统设计的应用。另 外，当我们在把一个通用的功能赋 予一个数据对象时，产品还应当提 供给使用者完美灵活的交互方式， 而不必费力的在产品中寻找这种功 能是否存在。这种形式可以让用户 用一种更简单、更加灵活的方式来 操作使用交互功能，使软件产品更 加能够吸引人，给使用者带来了兴 趣。 图表l 一4 三国志游戏界面 图表l 一5 游戏机战登陆界面 图形用户界面的发展和改善可以帮助我们把一些传统的辅助工作 软件变成象娱乐软件一样吸引人。我们可以提高软件图形用户界面的 2 亲和力，使不同的层次的人们都可以方便的使用，而对于所有人也都 会更加容易使用的。所以图形用户界面设计已经在我们的生活中担负 着重要的角色，图形用户界面的设计则更多的倾向于以用户为中心的 交互的方向，使传统的设计产生了新的变革。 1 1 2 设计和技术在人们生活中的关系 设计在社会的发展中的作用是十分重要 的。设计的方法可以为各种问题的解决提供新 的思路。设计思维方式在某些程度上在各个领 域都会影响着社会生活方式。虽然有些问题本 身不是由于缺乏设计或是设计的思维方式所 造成的，但是都可以通过运用设计来解决。另 外一方面，设计师的思维方式也是十分重要 的，有利于社会的发展。设计的一个基本概念 就是明确项目的目标和限制以及理解项目受 益者的各方面的利益。如果一旦设计思维无法 做到“目标清晰，方式合理”的话，那么就需 要设计师来应用设计师的思维进行协调和促 进各方的交流。我们要紧紧把握住设计思维中 的概念原型，这样创造出来的模型则更加符合 设计的要求。虽然设计可以为各种思考提供很 图表1 6 ”。8 手机界面 多帮助。但是也有一定的局限性，总之，用设 计的思维形式来思考问题，会更 加有益于对问题的分析。 技术的发展促进了人们的创 造力，但是创造力是不会单纯地 因为技术而前进或后退。一方面， 技术使人们更快地了解设计概 念，设计原形或设计灵感，从而 增强创造能力。但是另一个方面， 我们也要记住，由于创造力很容 易，人们也许会匆忙地确定解决 方案a 由于在软件产品的概念设 图表l 一7 索爱i p h 。手机主题界面 计阶段就存在一些影响因素，所 3 以许多行业中新的产品，或在更高层次的阶段中面临的危机或限制同 样也是不容忽视的，因此设计和技术必须致力于改善人们的生活。 在设计与技术的关系中，我 们对待软件产品中的图形用户 界面设计时，必须遵循“以用户 为中心。”这一理念是非常重要 的。用户在一个产品的整个过程 中是一个中心，强调这一理念有 助于我们解决不同方面的目标 的冲突，将最终的产品改善为以 便于用户的使用。作为衡量标准 另一个方面，应当认识到用户的 能力并着力改善人们的生活的 环境。正确使用设计和技术，把 用户作为生活的创造者，使人们 不是被动地使用产品。这样，在 图表l 一8c l o c k ，o r ko ，a n g e _ t m t l 计欣赏 图形用户界面设计时，就会拥有 更多的灵感。 我们的生活中到处都是无形的计算机。技术显然已经足够廉价充足 并且能够共享，那么更进一步，就是在于怎样帮助人们更好地使用。 这就是技术与设计应该怎样合 理的结合起来a 1 1 3 图形界面设计的飞 速发展产生的影响 图形用户界面设计的发展 来自各个方面。其一是由于网页 浏览器和个人电脑的发展。像雅 虎的y a h o o ! 和苹果m a co s 的 d a s h b o a r d 这样的工具，以及即 时通讯代理等服务，它们都已经 超越了网页浏览器。其二是如何 更好地利用网络空间，提供更具 有针对性更合适和及时的信息与服务。 4 图表l 一9q q 音乐界面设计 在网络空间的交互之时，用户 就会使用图形用户界面来达到自己的目标。其三是对用户模型的了解。 通过充分了解用户的兴趣与需要，并从其关系网加以推测，以便于能 够实现发送信息的个性化。网络博客和公共点评服务已经初显端倪。 还有一个比较重要的方面，就是改善图形用户界面设计，便于他 们能够达到软件图形用户界面的标准。随 着动态图标的成熟和界面的改善，我们正 在把合理的图形用户界面设计推向一个更 高的层次。同样，图形用户界面所带来的 影响可能发生在各个层面。目前是将图形 设计中的信息设计和可视化的图形广泛地 应用到各个软件产品中，特别是在多媒体 产品中，如多媒体手机软件的界面或其他 医疗产品。随着网络的普及以及显示器分 辨率的提高，我们可以从编辑设计以及图 形设计那里学到很多排版和设计方面的知 识，以及如何使用图像色彩和动态文本。 现在图形设计业的竞争十分激烈，而数字 图形设计师则更应加强和客户的沟通，在 传统设计的基础上，强调客户的交互设计， 图表l l oq q 音乐界面设计改善设计所创造的交互环境，使软件产品 的图形用户界面更加附合人们的要求。 1 2 国内外研究动态和水平 1 2 1 国外研究动态 国外的图形用户界面设计的研究较早，已建立了较为完善的设计 体系。如美国微软的图形用户界面标准的建立，强调以图形来统一和 规范各项工作。在1 9 8 5 年，美国微软发布了视窗系统，并在全球全面 推行图形用户界面。该系统以直观的图形来操作计算机，降低了使用 计算机的门槛，让更多的人们掌握了计算机这个方便快捷的工具，给 世界带来了翻天覆地的变化。图形界面的安全性、可靠性和可用性对 于已经广为人知。 微软生产的软件产品包括了很多的种类；目前最主要的软件产品 是各种称作w i n d o w s 的图形操作系统，它有很多版本。w i n d o w s 几乎预 5 装在所有的i b m 兼容个人电脑上。早期的w i n d o w s 版本要在m s d o s 下运 行，但是到了w i n d o w sn t 以及以后的产品已经可以脱离m s - d o s 运行了。 从刚开始的苹果系统到如今遍地开花的视窗系统，国外的图形界 面的研究现在已经很成熟，各个行业的软件设计中都要关注到界面设 计。人们更加关注图形界面的易用性。 i 2 2 国内研究动态 目前，国内的图形界面设计差异很大，总的来说，沿海发达地区比 较重视，各个软件和多媒体设计公司已有自己的技术标准和评估体系。 但是当前对图形界面设计的研究还很不完善，而现行的方法并没有完 整、准确反映出真实状况，存在一定局限性。例如：目前在合肥市来 看，还没有一家专门从事软件图形界面设计的公司。乃至真个安徽地 区都没有这样的一个独立的设计公司。国内缺乏象微软那样的大型研 究团队，软件的开发也是比较滞后的。 国内对u i 设计的研究也只是近一两年的事情。对整个图形用户界面 设计的划分和界定还是比较模糊。图形用户界面视觉设计的研究还是 要进一步提高。 6 第二章多媒体图形用户界面的概述 2 1 图形用户界面设计概述 2 1 1 图形用户界面的概念 图表2 1 计算机人机交互 的范围很广，所以我们不 能把图形用户界面设计看 成是人机交互设计的全 部。因为图形用户界面则 更多地体现出丰富的想象 和构思，并在框架结构、 色彩搭配和图片运用等方 面达到了和谐和统一。在 传统的设计的观念下，设 图形用户界面是 计算机人机交互的设 计的一部分。用户界 面又称人机界面或图 形用户界面，是一种 可视化的用户界面， 它的显著特点就是使 用图形界面代替文字 界面。人机交互涉及 图表2 2g e a i l 邮箱界面 计就是外观设计与包装，但是现在的图形用户界面设计已经更多的关 注到符合学、心理学和用户的认知模 式。通过设计，怎样使人们合理的使 用产品，而达到享受现代数字产品所 带来的便捷和快乐。 图形用户界面，我们可以分为以 下几个种类。 图表2 3 早期的计算机 一 ( 1 ) 图形用户界面( g r a p h i cu s e r i n t e r f a c e ，简称g u i ) 6 u i 即人体交互图形化用户界面设计，是一种结 合计算机科学、美学、心理学、行为学及各商业领域需求分析的系统 设计工程现在，图形用户界面设计的发展已经受到许多国际知名公 司的重视。6 u i 的设计推动软件产品向更加人性化的方向发展。 ( 2 ) 实体用户界面( s o l i du s e ri n t e r f a c e ，简称s u i ) ，实体用 户界面的设计是硬件的 设计，通过对控制面板、 按键的开关与排版等独 特的设计来增强产品的 易用性。 图表2 - - 3 办公软件图形界面 助用户更好、更方便的使用产 品，或给消费者带来不同的乐 趣，亦或向消费者传达产品与品 牌的形象与理念。 2 1 2 图形用户界面发展 的现状 计算机与互联网改变了我 们的生活，从设计的角度来说， 设计的任务就是把不能直接为 人服务的技术，用设计的手段， 改变成被消费者能够接受和乐 于接受的形式。所以图形用户界 面，就成为这种媒介，使产品能 够被用户接受的中介。 图形用户界面真正为人们 所提及重视是基于电脑产品的 8 ( 3 ) 声音用户界面 ( a u d i ou s e ti a t e r f a c e 简称a u i ) 这一用户界面 也是最近才得到认同的， 主要是通过在产品使用 过程引入独特的声音帮 图表2 5 企业舟站界面设计 图表2 - - 6 广东多媒体软件界面设计 图表2 - - 7 游戏界面设计 诞生，人们为了解决与机器的交 流而诞生的新概念一一现在人们 经历的时代已经是图形用户界面 时代。正是这种图形用户界面才 促使我们的新时代的到来互联 网及软件产品的飞速发展的一个 重要的部分就是图形用户界面加 快了这个时代的步伐。图形用户 界面给了我们广阔的空间，把先 进的技术传达给用户，为人类的 发展创造了愉悦的空间。所以图形用户界面作为一种媒介，让我们发 挥出更高的才能，创造出更大的价值。要想更好地发展经济和技术， 我们就得加大对图形用户界面设计的研究。通过研究图形用户界面设 计，从而获得更好的产品的功能，以及更加有利于产品的推广使用。 图形用户界面本身作为一种设 计活动，像其它的任何设计一 样，都没有一个完整的答案。例 如拿我们使用的最好的软件产 品图形用户界面一一微软的 w i n d o w s 系统来说，也不是我们 的唯一的系统。还有其它的操作 系统，如苹果的操作系统，u n i x 操作系统等。 图表2 8 电子图书界面设计 用户体验是以用户为中心 的设计中最重要的部分，是图形 用户界面设计的中心，也是软件 产品对用户行为产生的反应与 用户期待值的误差的测试，也就 是说这种误差越小，也就越符合 以用户为中心的设计原则。在西 方，图形用户界面设计行业的兴 起要归功予以计算机为主的高 科技迅速的发展，尤其是视觉操 留表z 一9 弼络游戏界面设计 作系统的推广和普及。然而广义 9 的图形用户界面概念则是在十七世纪的工业革命阶段就己经开始，只 不过，把易用性带入到机械的设计还是一种无意识的行为。图形用户 界面在国内发展还是十分缓慢的，由于国内的软件开发的进度十分缓 慢，导致国内的软件业的萧条，在一定程度上也制约了图形用户界面 的发展。它作为一个全新的概念或行业，被人们所接受还是有待于发 展。最终凭借图形用户界面设计的优势胜出的案例几乎在国内外也是 不可能。因为，当一个产品成功进入市场时，人们看到的是其强大的 功能，上乘的质量，以及周密的市场策略，合适的价位，很少有人会 将亲和性的界面设计放在首位。 2 2 图形用户界面的设计流程 2 2 1 图形用户界面的定位与构思 对于图形用户界面的定位 来说不能一概运用传统设计的 眼光来看待。有人曾以功能主义 来评判设计，“功能决定形态” 是2 0 世纪以来的设计格言，现在 这种提法已经是十分片面的。这 是因为： 第一：功能不是单一的，包 括使用功能、审美功能、社会功 能和环境功能等，过分追求单一 功能会导致许多重要内容如装 饰性、民族性等都被排斥捧。而 且有些内容并不只是功能的概 念就能概括了的。更何况物质和 精神也并不是时时都是相等地 融合在一个统一体中。随着产品 开发的不同时期和个体的不同， 它们的各自的主次地位也随之 变化。另外，在现今信息技术高 1 0 图表2 - - 1 0 广东多媒体软件界面设计 留表2 1 i 广东多媒体软件界面设计 度发展的时代，情感因素也越来越成为设计的主要方面。仅仅是物质 意义上的功能在保持其基础地位的情况下，已日益不能代表情感诉求 的表述。 第二，按照“形式服从功能”而设计的产品，对于不能熟悉它的 使用者来说是难以理解的，产品要能为人而表述和理解，必须要借助 公认的信息和符号系统； 第三，在满足同一功能的产品形态来说不是唯一的方面，各种措 施和技术的实施已经成为商品经济中日益不可避免的现象。只有当社 会经济发展到一定程度时，才能出现设计的专业需求。所以，在现今 人们的基本的物质需求已能基本满足，如再只是简单地以物质功能来 决定设计是不恰当的。而现今时代。图形用户界面设计体现了人与物 之间的信息交流的本质，这也是设计艺术的内涵，它包括了设计的方 方面面，也明确了图形用户界面的设计的目标与程序。 那么，我们在进行软件图形用户界面设计时，应该如何进行定位 与构思呢? 软件是用户的工具，因此，应该由用户来操作和控制软件。图形 界面就应该响应用户的动作，引导用户进行需要的下一步操作，汇集 目标用户的习惯用户方式进行交互。不同类型的用户则是有着不同的 交互习惯，而这种习惯的交互方式往往来源于其原有的针对现实的交 互流程或已有的软件工具的交互流程。当然还要在此基础上，通过调 研份析来找到用户希望达到的交互效果，并且能以流程的形式确认下 来提示和引导用户。所以图形用户界面设计的定位和构思应该遵循以 下几个原则： 一致性原则； 设计目标一致：软件中往往存在多个组成部分，如组件、元素等。 不同部分组成的交互设计目标需求一致。例如：如果以电脑操作初级 用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯 彻软件整体的目标与风格。 元素外观一致：交互元素的设计其外观往往影响到用户的交互效 果。如果在同一类( 个) 软件中，图形用户界面采用一致的风格，对 于保持用户的焦点，改进交互效果有着很大的帮助，但是应该如何统 一元素外观的风格，还是有必要对目标用户进行调查和研究。 交互行为一致；在图形用户界面中交互模型的设计，把不同类型 的元素在用户触发其对应的行 为事件后，交互行为需要一致。 例如：所有需要用户确认操作的 对话框都需设计包含确认和放 弃的两个操作按钮。对于交互行 为一致的原则比较极端的理念 是相同类型的交互元素所引起 的行为事件相同。但是我们可以 看到这个理念在大部分情况下 是不正确的，但是也有相反的例 子证明不按照这个理念设计会 更加简化用户的操作流程。 可用性原则： 由于软件要为用户使用，所 以用户必须可以理解软件各元 素对应的功能。如果不能为用户 理解，那么就要提供一种途径使 用户可以通过对该元素的操作， 理解其对应的功能。例如：删除 操作元素，用户可以点选或删除 操作按钮图标，提示用户如何删 除操作或者是否确认删除操作， 用户也可以更加详细地理解该 元素对应的功能，同时可以取消 该操作。 图表2 一1 2 广东多媒体软件界面设计 图表2 - - 1 3 广东多媒体软件界面设计 我们要以用户为软件交互 的中心，每一个交互元素必须对 应着用户需要的功能。因此交互 元素必须能够被用户控制。用户 通过诸如键盘、鼠标之类的交互 设备来移动或触发已有的交互 元素图标达到其它在此之前不 图表2 1 4 广东多媒体软件界面设计 可见或者不可交互的交互元素。但是我们要注意的是交互的次数和能 1 2 否达到的交互效果。当一 个图标元素的功能超过四 层时，那么用户到达该图 标元素的几率就会大大降 低了，所以达到的交互效 果同图形用户界面设计有 着密切的关系。太多层次 的复杂界面会影响可达到 的效果。在图形用户界面 设计中可以让用户直接参 加图形界面的体验，增加 图形用户界面的交互效 果。 图表2 1 5 界面图标设计 2 2 2 图形界面的视觉元素 图形用户界面的视觉效果通常是通过视 觉元素来体现的。视觉元素则包括图形的大 小、形状、色彩等。我们可以把图形用户界 面中的视觉元素进行分类。广义的视觉元素 的概念是广义的构图，包括造型、形态、形 状以及排列方式等多方面的因素，而现今的 图形用户界面中的构图在各个方面体现着效 率和速度，这种趋势表现在设计上的就是“简 单化、纯粹化、效率化”。也就是说，现在所 流行的视觉元素不再会象希腊罗马的爱奥尼 克、科林斯一样，也不会再象欧洲的巴洛克、 洛可可，而是转变成一种极度的和时代性相 符合的形态一一简洁纯粹的形式。没有过多圈表2 - - 1 6 界面图标设计 的修饰和线角，直来直去，丝毫不隐讳自己 的棱角和瞳线，以一目了然的快感来震憾人的心灵。而传统图形符号 在现代的图形用户界面中已经很好的结合到软件的用户需求中去，不 再只是单独的表现。随着当今社会发展的节奏不断加快，大工业化生 1 3 产以来的效率第一的思想已经深深地影响了“美”的设计的思想。同 时，人们日益浮躁的心理需求也使节奏加快，而已不再是以往追求的 含蓄的美。 例如：人们经常提到 “流线型”。尤其在工业设 计中，产品造型极大的影 响着购买者的心理。越来 越多的人把“什么是高 档”，什么是“俗气”的标 准定位是否纯粹的形式 感。这种趋势，反映在各 个设计领域，如广告设计、 建筑设计等多个方面。但 是在图形用户界面上的构 图和元素的表现上，却是 图表2 一1 7 广东多媒体软件界面设计 需要对界面风格的统一把 握，而不能这样一概而论。形态上的曲线和直线的表现性是根据设计 的意图来出发，不能把元素本身的部分性看作是整体风格的整体，如 果这样就容易造成以偏概全的错误 在图形用户界面设计中，我们可以任意的把历史符号、视觉元素 在一起进行综合，因为计算机的虚拟现实的能力已足以提供这种可能。 元素的本身的形态并不能代 表什么；例如蒙德里安的作品 就可以说明很多问题。他的表 达的手法并不是现今流行元 素的代表，但是那种表现美的 方式无疑是符合社会发展潮 流，具有划时代的意义。他通 过以直线来界定空间的方式 深刻地揭示了不同形状、色 彩、材质和面积的空间如何排 图表2 一1 8 广东多媒体软件界面设计 1 4 列和组合才能达到“设计的美”的境界。他的作品虽然初看不能了解， 但在细细分析后却可以让人叹为观止，有些经典之作甚至到达了。不 能增删分毫”的程度。当然，这种极致的比例和形式与他本人的修养 有着极大的关系，那种表达美的方式是更加直接和本质化。当今的图 形用户界面设计的发展潮流正是这样的。所以如何运用巧妙的组合方 式和排列方式值得我们去探讨。 曲线和直线的两种截然不同的性质，引发出设计风格的差异。然而 在本质上两者之间是并不矛盾的。曲线的优美自由和直线的严谨归整 看似风格差异，但是实质上是统一的。直线和曲线在空间中有着明确 的界定，如果把它们看作一体，它们之间又都有着密切的联系。并且 这种联系通常表现在图形的某些特定的区域内。在图形用户界面中， 这种区域之间的联系已可以不是唯一的，而且可以是随着人的视觉转 换而不断地变化的。把这些元素进行合理的排列就能够创造出具有美 感和韵律感的线条和形象，与用户产生共鸣。所以视觉元素之间是并 不矛盾的，它们则是反映着设计的统一的风格，综合起来就会产生出 符合时代特征的造型。比如在图形界面中，把直线型的大的造型内加 上一些小的曲线型的元素，这些也是常见的和容易被人们所接受的。 图表2 - - 1 9 广东多媒体软件界面设计 在图形用户界面的视觉 元素的色彩方面，自从视窗操 作系统开始，色彩逐渐从过去 的灰色系改变为纯色系。色彩 搭配已经向更高层面提高。由 于纯色的搭配比灰色更加难 以掌握，所以我们必须要选择 合理的色相，以及按照特定的 比例进行更加细致的调节。由 于计算机的交互显示使得我 们进行色彩搭配时更加微妙和及时、直观，好的设计师都能够敏锐地 把握住人们的心理需求，从而创造出准确的表现出时代特色的作品。 例如：m i c r o s o f t 公司就是一直把视窗系统做得很好。视窗操作系统从 9 5 到9 8 n x p 再到现在的v i s t a ，色彩也是越来越鲜艳，我们反而觉得更 加有特色。随着时代的发展，人们对美的需求也是在不断进步的，所 以我们都会不由自主的追随设计的潮流。设计师们也会凭借敏锐的审 1 5 美和洞察力不断创造出新的风格。 2 2 3 图形界面设计的分类 现代的图形设计的理论没有来及给图形用户界面进行合理的规 范。大多数从事图形用户界面设计人员都是以传统图形设计而转过来 的，他们还没有对计算机的视觉理论完全熟悉和了解。而设计教育还 没有来及做好准备，所以我们已经发现在图形用户界面上落后得很远 了。在这里为了便于认识和分析设计界面，我们可以将设计界面分类 为： ( 1 )功能性设计界面 接受物的功能信息，操纵与控制物，同时也包括与其它外设的接 口，这一界面反映着设计与人造物的协调作用，功能性界面在设计中 的作用是和外设的关系比较密切，与图形用户界面的不同之处是在于 物与图形的区别。 ( 2 )情感性设计界面 即物要传递感受给别人，取得与人的感情共鸣。这种感受的信息 传达存在着确定性与不确定性 的统一。我们在设计时要把情感 定位在引起目标对象的使用的 感情，而不是设计者的个人的情 感抒发。设计师在设计时应该 。只投入热情，而不能太多地加 入个人的感情”避免个人的任何 主观臆断与个性的自由发挥。这 一类界面反映着设计与人的关 系。 ( 3 )环境性设计界面 外部环境因素对人的信息 的传递。任何一件或一个产品或 平面视觉传达作品或室内外环 境作品都不能脱离环境而存在， 环境的物理条件与精神氛围是 不可忽视的界面因素，这是设计 图表2 - - 2 0n e r od is c 。o p y 界面设计 师时刻都要把握的地方。 1 6 在设计的界面的功能性分类时，强调以功能为基础，以环境性界 面为前提，以情感性界面为重心而构成的，在它们之间有着系统的联 系。 图形用户界面中的情感设计是指人机间的交互所产生的人的心 理。而设计艺术的范畴是研究人与物的关系的学科。在这里任何元素 符号之间不再是简单的功能的叠加。而是一个能进行交流的对象。在 图形用户界面设计时既要强调对功能和情感研究的广度，也要有一定 的深度，我们不能再一味地以人的生理特征进行分析。除了研究人的 尺度中既有人的自然的方面，还应有作为社会人的方面的特征。既要 研究生理、心理、环境等对人的影响和效能，另外，还要深刻地了解 人的文化、审美、价值观念等方面的要求和变 化，图形用户界面的设计正是这样的一种人与 物之间的交流。我们可把人与计算机交流的部 分归属于设计界面，图形用户界面设计的内涵 比较广泛的。可将图形用户界面定义为设计中 所面对，所分析的一切信息交互的总和，它可 以反映出现代时代信息交流的关系。 美国学者赫伯特a 西蒙提出：设计是人工物 的内部环境和人工物的外部环境的结合所以 我们应围绕人来进行设计。图形用户界面设计 所要围绕的就是“以用户为中心”。在多媒体软 图表2 - 。2 i 图标设计 件的图形用户界面中要把握住用户体验的重 心。 2 3 图形用户界面设计在交互设计中的地位 我们应该如何确定图形用户界面设计在交互设计中的地位呢? 确定图形用户界面设计标准的条件是只有被有价值的确定一个好 的环境。当在这个较好的环境中我们才能更进一步地确立它的条件。 下面我们可以根据以下条件来进行分析； ( 】) 尽量描述可用的界面的概念； ( 2 ) 以用户理解的方式进行信息的分解； ( 3 ) 尽量统一规范图形用户界面元素的风格。 1 7 通过以上三个条件我们可以大致确立一套图形用户界面的设计规 范。其中交互设计在图形用户界面中的交互模式的共性，使我们不再 只能利用文本或信息框来实现交互。虽然现在每个操作系统都有两三 个不同风格的主题，但是这种共性使我们可以很容易的识别图标模块 进行信息交流。 由于图形用户界面设计在人机交互中的重要性，我们可以根据人机 交互的原则和性质来确定图形用户界面设计要点和步骤： ( 1 )保持图形用户界面的一致性 要求设计的概念模式和显示方式等一致，在类似的情况下具有统 一的操作序列。如在提示、菜单和帮助中产生相同的术语，在不同的 软件系统中都要有相似的界面外观、布局以及相似的交互方式以及相 似的对话框等。另外界面设计 必须要维持高度的一致性，让 用户不必进行过多的学习，就 可以掌握其共性。还可以把局 部的知识以及经验推广使用到 其他场合。 ( 2 )必须提供信息反 馈 让交互系统的反馈带给用 户的一些特定的信息。让用户 可以在计算机的动作中进行交 互。因为，如果在界面设计没 有反馈，用户就无法判断自己 的操作是否为计算机所接受， 是否正确，以及操作的效果是 什么? 在界面设计时，反馈的 形式可以是多种多样的，如文 本、图形或卡通形象和声音等。 ( 3 ) 保持图形用户界面的 简洁、有效，合理利用空间。 在界面设计的空间布局上，应 图表2 - - 2 2 广东多媒体软件界面设计 图表2 - - 2 3 广东多媒体软件界面设计 当形成一种简洁明了的布局。界面设计最重要的就是遵循美学上的原 则一一简洁明了。那么在进行图形用户界面设计中就必须执行以下步 1 8 骤； ( i ) 对软件的用户进行调 研，拟定用户需求，初步建立界 面原型。 ( 2 ) 进行软件的任务分解， 根据任务的复杂性、难易程度 等，详细分解任务动作，进行合 理分工，确定适合于用户的交互 方式。 ( 3 ) 环境分析：确定系统 的软件和硬件支持环境及接口， 图表2 2 4 广东多媒体软件界面设计 向用户提供各类文档要求等； ( 4 ) 根据需求分析、任务分析、环境分析等，来分析实现图形用 户界面形式的所要的成本以及效益，以便选择合适的开发设计途径。 ( 5 ) 根据用户的自身特征确定界面，以及系统任务、环境、成本、 效益，确定最为适合的界面类型。 ( 6 ) 屏幕显示以及布局设计制定屏幕显示信息的内容和界面显示 的次序，然后进行屏幕总体布局和显示结构设计 ( 7 ) 进行艺术设计完善，包括为吸引用户的注意力所进行的增强 显示的设计。例如：采取运动，改变形状、大小、颜色、亮度环境等 特征( 如加线、加框、前影和背景设计等) ，还包括创新的设计以增加 亮点或者应用新的多媒体手段等。 图表2 2 5 广东多媒