软件界面设计设计

《软件界面设计设计》由会员分享，可在线阅读，更多相关《软件界面设计设计（34页珍藏版）》请在装配图网上搜索。

1、第一章 绪论1.1 课题的研究背景和意义顾客来看一种软件一方面是通过界面的，通过界面来感知软件的好坏，界面关乎着一种软件的形象。软件界面设计是产品开发中最重要的方面。界面设计师必须要牢记：界面是面向顾客的。开发者开发的软件必须满足顾客的需求，并且保证软件易于使用。注重顾客界面设计有重要的意义。顾客界面设计得越直观，越易用，越美观，顾客就使用得越以便，越舒服，培训顾客、维护系统的成本就越低。客户支持成本减少了，系统就会更便宜，同步，也将获得更多的顾客好感和订单，公司的效益就会更好。1.2 软件界面设计的现状和基本对策尽管软件行业有许多技术杰出的软件工程师，但多数工程师开发出来的软件既不好用又不美

2、观。客户对软件界面非常的不满意，常常要修改软件界面，导致极大的生产力挥霍。顾客满意的好界面都是软件公司想要做的，但是她们却不懂得怎么做。软件界面设计始终以来都是中国软件行业的弱项，这里存在两方面行业共性问题：一是缺少系统性的软件界面设计措施和有关的教育；这也导致了第二个问题“缺少优秀的界面设计师和纯熟的界面程序员”。千万不要觉得软件开发就是编程，仅懂编程的人，绝不也许做出好的软件系统。要成为优秀的软件人才，仅学会编程语言是远不够的。系统性的科学技术教育是国内理工科大学的计算机和软件专业偏向的重点。基本课程有物理、数学、电学等，专业课程有数据库、网络管理、编程语言等等。并且每门课程均有较好的教材

3、，有的是国外外文的，并且有较好的教师。因此国内理工科大学要培养出大量技术功底夯实的软硬件研发人才并不难。相比照之下，软件界面设计专业的教育就差得远了。既缺少好的教材，又缺少优秀的教师。由于计算机软件专业学生接受的教育几乎都是科学技术理论知识，她们对于设计出易用美观的顾客界面感到很茫然，许多人甚至不懂得尚有界面设计这回事。 我们把软件界面开发分为三个环节：交互设计、视觉设计和程序实现。公司但愿界面设计师负责“交互设计和视觉设计”，由纯熟的程序员实现这个界面，这个规定其实并不高，但现状却不抱负。不少软件公司不仅有程序员，尚有美工人员，但遗憾的是这两类人不会配合着工作。大多数人都觉得界面设计是美工人

4、员的事情，否则公司招聘美工人员有什么用？ 编程实现是在美工人员完毕界面设计后进行，由程序员负责的，至于界面设计好不 好程序员不去管。美工人员大多是美术有关类专业毕业，她们的长处是擅长于视觉设计，缺陷是：不懂得待开发软件系统的业务逻辑，不理解顾客的特性，难以开展交互设计；不懂得软件技术，她们不理解自己做出来的界面在技术实现方面的难易限度。千万不要低估界面实现的难度，界面不是想做就能做得出的。有些Web软件界面控件，不仅要功能好、性能好，还要易用，可以说技术难度非常高，这不是一般程序员能做得好的。 可见美工人员并不属于抱负的软件界面设计师。就目前情形来看，既能做好交互设计又能做好视觉设计的界面设计

5、师还是比较少见的，可以在做好交互设计、视觉设计的基本上再做好程序实现的人更加罕见。 我作为一名学生，肯定不也许去变化中国的教育措施和体系，能做的只有总结某些软件界面设计的规范来供读者（开发人员）参照。第二章 软件界面设计应遵循的原则本论文总结了软件界面设计应遵循的原则：以目的顾客为中心，容易被理解，反馈操作信息，排错性考虑，至少环节（最高操作效率），合理的布局，色彩的选择与组合。读者（开发者）理解这些设计原则的含义后，要结合准备的开发软件的基本特性，进一步融会和细研究，从而拟定开发软件的界面设计原则。2.1 以顾客为中心以顾客为中心，这是第一重要的界面设计原则，关系着软件的好坏。不以目的顾客为

6、中心开发出来的界面，顾客不会购买，虽然买了也不会去用，虽然界面美观也没用。有些通用的软件系统如操作系统、文字解决软件等，面向的顾客十分地广泛。可是由于顾客群体之间生活的环境不同，从而会存在年龄、性别、语言、教育限度的差别，进而导致使用习惯也有很大差别。在设计软件界面之前，各类顾客群体的使用习惯是我们需要迫切理解的，努力使顾客在操作软件界面的时侯感觉不到麻烦，一般要为了适应多种类型的顾客提供多种操作途径。举例来说，Windows系统的文献管理器，对于一种初学电脑的人来说，她乐意使用鼠标、菜单一步一步慢慢地操作；但是对于纯熟使用电脑的人而言，快捷键也许是她更乐意用的。不要试图让一款产品在差别很大的

7、顾客群体中得到合用，要把广泛的顾客划分为多种顾客群体，根据自己所在公司的实力，选择一种分市场来开发产品。一款产品最佳是只面向一种顾客群体，这样容易设计并且质量也可靠。2.2 容易被理解在顾客使用界面前，一定要保证理解界面的意图。如下措施可以提高顾客界面的可理解性：1.顾客界面中的所有元素都不能有错误文字，也不能浮现让人费解的文字。2.图标一定要直观明了，最佳让顾客看到这个图标就能懂得这是什么含义。如果图标比较抽象，则应给图标加上文字阐明，不让顾客误解。3.所有的界面元素应当予以有必要的提示。4.界面构造要可以清晰地反映软件工作流程，这样顾客就能有条不紊地操作。5.没有先后逻辑关系的选择项，如姓

8、名、标题等，可以按照字母排序，便于顾客选择。但是不要把功能菜单、有严格逻辑关系的状态集按照字母顺序排列。2.3 排错行考虑 顾客在使用软件时，某些错误是时有发生的，固然也有某些是顾客人为导致的，那么有什么措施来减少出错几率呢。1.排错应当遵循的细则。2.非正常中断的错误是最重要的，也最应当排除。3.应当尽量避免顾客无意输入无效的数据。4.采用某些控件限制顾客输入数据的类型。5.如果也许作出的选择只有两个，可以采用单选框来减少顾客输入的麻烦。6.当选择再多某些时，可以采用复选框。7.当选项诸多时，可以采用列表框。8.在一种应用系统中，应当避免未经授权的操作，然后没故意义的操作也要避免。9.对于某

9、些输入字符，也许会引起严重错误甚至会让系统出错，应当要加以限制或屏蔽。10.对于特殊符号，输入会与系统使用的符号产生冲突，该字符应当被制止输入的。11.当顾客产生错误的操作时，软件最佳可以提供取消系列操作。12.对有些等待时间也许较长的操作软件最佳可以提供取消功能。13.与系统正在使用的保存字符也许会产生冲突的一定要加以限制。14.在顾客已输入的信息被系统读入时，可以根据需要选择来判断要不要去掉前后空格。2.4 至少操作环节 在设计顾客界面的过程中，软件设计师应当尽量多地为顾客着想，让顾客用至少的操作环节完毕某项任务，保证使用效率达到最高，最大限度地让顾客满意。尽管减少一种操作环节所节省下来的

10、时间很短，似乎可以忽视不计，但是让顾客感觉起来，反差却很强烈。并且如果每个环节都能节省一点，整个工程下来，节省的时间就很长了，所谓聚少成多。界面设计师一定要在进一步地分析熟悉软件的业务流程和顾客使用习惯的基本上，才干设计出至少的操作环节，使效率最大化。2.5 合理的布局 一方面，一定的逻辑性要在界面的总体布局中体现出来，总体布局最佳可以与工作流程吻合。界面设计人员要在全面地理解软件需求的前提下，才干找到对界面布局有一定协助的信息。另一方面，对于窗口上的界面元素的布局有整洁清爽的规定。界面元素要在水平方向对齐，或者在垂直方向上使界面元素对齐，还要保证同样的行、列间距。要保证合适的窗体尺寸，界面元

11、素不要放得太拥挤，在边界的地方要留有一定的空间，但是也不能太宽松，那样会显得零乱。界面元素要保证一致对齐，以避免产生不齐整的视觉效果。同类型界面元素要尽量在大小上保持一致，最起码在高度或宽度上一定要保证同样。与逻辑有关系的元素应就近放置，这样顾客以便操作某些。此外要善于运用窗体的空白，尚有分割用的线条。 2.6 一致性 界面一致性的体现涉及了诸多方面，其中最需要注意的是一下几点： 1.界面设计与公司营销的方略风格一致。 2.与不同产品操作界面的使用措施一致。 3.与同一产品不同版本的界面保持一致。 4.与顾客的预期一起。 5.与页面元素一致。 6.产品在隐喻上的设计一致。 每件产品的顾客族群都

12、相称广泛，要与所有顾客预期一致其实是很困难的。但至少在评估这个话题时，可以一方面界定目的顾客群，分析顾客需求，随之有效地探究界面一致性如何与顾客预期吻合。2.7 色彩的选择与组合在界面设计中，色彩的色调和组合关系会短时间起到“凝聚”顾客视觉的作用，同步也会使顾客产生心理的变化。2.7.1 色彩的联想虽然色彩的联想作用在心理学范畴内，但是它的合用性却体目前了艺术设计中。若不可以预测人是如何感知色彩的、如何发生作用的，也就不也许有效地应用色彩。色彩的象征意义和心理暗示从人类的高档情感来分析，具体如下：1.红色红色是一种令人激奋的色彩。它能使人产生冲动、愤怒、热情、活力的感觉。这种色彩在女性和男性之

13、间、衰老和年轻之间、内向和外向之间、意志单薄和坚强之间，均倾向于后者。红色最能引起人的视觉注意，因此，红色常被作为心理上的警示。在逐渐变暗时，红色变得深沉而庄严；反之则变得有激情而欢快。在色环上，当红色变向紫色时，红色就逐渐由兴奋变为安静，变得浪漫、豪华、严肃、富裕、强大和优雅。当红色在色环上偏近黄色时，红色就变得更加具有爆发力、煽动力和暴力倾向。2. 黄色黄色能体现出快乐、但愿和轻快的个性，它的明度是最高的，是一种自我膨胀和谋求幸运的颜色。黄色还具有警示作用。也许是对于马峰或黄蜂身上的黄黑条纹的恐惊联想，一般能立即注意到这种颜色搭配所暗示的危险的存在，这就是在现实生活中某些危险的地方，如变压

14、器、停车位、放射性工作间等处，常能看见黄黑色设计的条纹和图表的因素。3. 蓝色 蓝色具有凉爽、清新、专业的个性。在视觉上往往给人一种被动、静谧、深邃、潮湿、谨慎、忧郁、科技和理智的感觉。她颇受成年人的爱慕，由于它体现得更加理智、更加成熟。蓝色越深，就越显得深邃、遥远；反之，便会引起人梦幻、童话、凉爽的感受。4.绿色绿色具有黄色和蓝色的某些特性，使人联想到和睦、宁静、健康、坚定。在色环上绿色偏近黄色时，就变得温暖、活泼、健康而无危害。它加进一点白色，就可以产生一种女性的优雅和轻盈的感觉。当在色环上偏近蓝色时，绿色就变得更加坚定、顽强和持久，这种颜色很能吸引那些能抵挡得住多种诱惑、有信念、办事稳妥

15、并具有强烈自尊心的人。绿色已得到了广泛的运用，它已被人们理解为安全、正常和成功的象征。在街道上，绿色的灯表达可以安全通过。绿色的区域是安全的，绿色的逃生标志引导人们在紧急状况下的逃生路线；绿色的图标提示意味着一切正常等。5. 橙色橙色也像绿色同样具有其她两种颜色的特性。橙色是一种激奋的色彩，具有轻快、欢欣、开放、温馨、潮流、有活力、无拘束和感情洋溢的感觉。据研究，在橙色的氛围里时人的活动没有任何拘束，因此橙色在很大限度上代表了温暖和诚挚的感情。6. 紫色紫色令人联想到灰暗、深刻、高贵、奢华、阴暗、悲哀、不可靠。紫色越深，严格和呆板的效果就反映得越明显；反之，明亮的紫色会比较容易显得没有主见、脆

16、弱、易受刺激、温柔、寂寞。值得注意的是，紫色特有的暧昧性、神秘性、不拟定，在某些知识分子和社会文明限度较高的、想把处事和感情理性化的人群中受到普片的排斥。7. 白色白色具有纯洁、完美、纯真、不可触及、不可接近、神圣的、空洞的、无限的感受。白色常给人以光的联想，目前诸多界面设计中具有透明质感的反光设计，事实上都是由于考虑到白色的特性。它可以让画面有一种透气感，使得界面不仅有清新明亮的感觉，并且没有压迫感，也没有沉闷感。8. 黑色黑色具有深沉、神秘、沉寂、压抑、高贵、悲观、邪恶、坚定的感觉。任何颜色和它放置在一起都会显得醒目而又有活力。9. 灰色灰色具有中庸、平凡、温和、中立、单调、矛盾、厌世、高

17、雅的感觉。灰色越深，就越给人一种安定、沉稳、和谐的心理暗示。它自身是一种缺少活力的颜色，在视觉上具有次要地位。综合灰色的特性，诸多软件的界面设计都将不可执行的命令设计为灰色。有些色彩给人的感觉是两极的，例如黑色有时给人沉默、空虚的感觉，但有时也感觉庄严、肃穆。白色有时让人感觉到恐惊和悲哀，但有时却给人以无限的但愿。每种色彩在纯度透明上略微变化，就会使人产生不同的感觉。2.7.2 色彩的心里感受色彩本是不带任何任何含义的，只是人的心里感觉把它们提成了不同的类别。例如，在夏天挂上深绿色窗帘，不见一丝阳光，就会在心理上感到非常凉爽。这并不是现实中的温度产生了某些变化，而是由于色彩影响到了人的内心。数

18、字媒体界面的色彩是顾客使用界面过程中引导顾客行为和影响顾客心里的重要因素。1. 冷暖暖色能使人感受到温暖，而冷色则使人感到寒冷。给人热情、刺激、迈进、喜庆等感觉的是暖色；给人寒冷、收缩、后退等感觉的是冷色。在运用中常会见到色彩的冷暖对比，因此它非常重要。2. 轻重中性色有黑色和白色，但它们不容易分别出冷暖，轻重之分却很明显，给人厚重感觉的是黑色，给人轻快感觉的是白色。一般来说，重色彩明度不强，轻色彩明度强。3. 软硬色彩的软硬感重要由明度和纯度来衡量，一般来说有软感得色彩明度高、纯度低；有硬感的色彩明度低、纯度低。4. 进退 色彩的进退感是色彩对比中“显”和“隐”现象使人产生距离上差别导致的。

19、使人感到近的有红、黄、橙等暖色，使人感到远的有蓝、青、紫等冷色；让人感到远的那些是明度低和纯度低的色彩，让人感到近的是那些明度高和纯度高的色彩。5. 强弱 与色彩的强弱感有关的有色相、纯度,尚有配色对比。在色相中，最强感的是红色；有强感的色纯度高，并且对比度大；有弱感的色纯度低，并且对比度小。在无彩色系中，最具强感的是黑色，最具弱感的是白色。 6.膨胀收缩 暖色有膨大感，明度高；冷色有收缩感，明度低。在无彩色系中，有收缩感得是黑色，有膨大感的是白色。 7.明快忧郁 色彩的明快忧郁感与明度、纯度、色相、配色对比均有关系。暖色、鲜艳色有明快感，明度高，纯度高；冷色、阴晦色有忧郁感，明度低，纯度低。

20、有明快感的配色对比大，有忧郁感的配色对比小。 8.兴奋沉静 给人以兴奋感的有暖色和明度高的色以及纯度高的色；给人以沉静感的有冷色和明度以及纯度低的色。有明快感的配色对比大，有忧郁感的配色对比小。 9.华丽朴素 给人以华丽感的色彩鲜艳、明度高；具有朴素感的色彩晦涩、深谙。有华丽感的色 彩配色对比大、有色彩系；有沉静感的色彩配色对比小；有朴素感的色彩无彩色系。2.7.3 色彩组合色彩组合原理基本上是从色彩的鲜明性、色彩的独特性、色彩的合适性、色彩的联想性4个方面来考虑的。而色彩组合的总体原则也是界面设计的重要原则，即一致性。为达到色彩对界面的易用和舒服的心里影响这一目的，在对色彩进行组合的过程中，

21、有如下几种措施可以采用借鉴：1.用一种色彩。界面的色彩变化均基于该颜色进行透明度或饱和度的调节。 2.用两种颜色。先选定一种颜色，然后选择其对比色，固然，这中间应考虑色饱和度的对比关系。3.用一种色系里的颜色进行组合。4.用黑色和一种彩色搭配。针对界面设计，需要注意的是如下几点：1.一种页面不要将所有颜色都用到，尽量控制在3中颜色以内。 2.背景和前文的对比差别尽量要大，花纹繁复的图案绝对不能用来作为背景，以免影响那些重要文字信息的读取。 3.避免不兼容得颜色大面积地放置在一起，如高饱和度的黄与蓝、红与绿等。普遍的理论尚有：一致的色彩被用来构建整个色彩环境，冲突的色彩被用来显示变化和提示，柔和

22、的色彩用来增强顾客的舒服度和减少疲劳，跳跃的色彩用来彰显个性，合适的对比度用来增强文字或图形的可读性等。2.7.4 色彩分析实例（音乐播放软件千千静听） 从外观上上看，千千静听有多重配色方案。高贵的黑色，淡雅的蔚蓝色，幽深的紫色，高贵的红色和银色，使每一种顾客都能从中找到适合自己的、自己喜欢的外观。紫色与黑色整体颜色的搭配，看起来非常的典雅。中间又镶嵌点点蓝色，使得整个界面看起来富于变化,如图2.1。图2.1 紫色与黑色搭配橘黄色和黑色的搭配，很具有跳跃性，很活泼，如图2.2.图2.2 橘黄色和黑色搭配 浅蓝和深蓝的搭配，清新自然，如图2.3。图2.3 浅蓝和深蓝搭配银色，深灰和蓝色的搭配，看

23、起来很干净，简朴，如图2.4。图2.4 银色、深灰和蓝色搭配第三章 界面元素的设计本文总结了常用界面元素的设计：字体编排与设计，动态元素设计，声音的设计与运用，图标设计。3.1 文字编排与设计文字是信息传递的主体。从最初的纯文字界面发展至今，文字仍是其她任何元素无法取代的重要构件。文字作为重要的界面构成元素，同步又是信息的重要载体，选用何种字体、何种大小、何种颜色、如何与底色搭配、如何排版，都深深影响着界面的视觉和运营效果。设计人员应当为顾客设立某些舒服又易读的文字方案，同步也可以顾客自定义文字的字体、大小和颜色，让应用程序自适应顾客的设定以保证文字的正常显示。系统还应保证在不同的平台、屏幕辨

24、别率下字体的正常显示。界面设计中，文字除了注意显示问题，还应关注文字的表述方式需符合目的顾客的语言认知习惯，这是实现界面易用性的一种方面。界面的类型和用途千差万别，针对不同的界面应当有不同的文字设计方案，因此，具体的设计思路和技巧需要放置在不同的界面类型和界面设计目的中区考虑。3.2 动态元素设计动态元素设计指的是界面中动与静的对比关系。一般状况下动态的图像是直接地呈目前页面中，而浮现的时候随着着交互则是另一种状况。画面也可以分两种状况呈目前画面中：第一种不变化动态元素自身的位置，在页面中运用合适的面积和节奏来做动态效果，这样信息辨认不会被扰乱。据研究，图形变化节奏越快，就越能吸引人的视线。因

25、此，动态人员应保证动态的节奏以适应内容和信息传达的需要，例如可以让热点重要信息快节奏地闪烁来迅速抓住顾客的视线。剩余一种状况是也可以让变化的单位产生位移，这种效果能让页面氛围变得活跃，但是在用的时候要谨慎，由于它常常干扰人的注意力，有时甚至会使顾客的心情变得糟糕。第二种状况指的是在交互设计过程中存在的动态效果，也就是切换页面和功能信息模块是产生的动态效果。其所需要支持的技术也诸多。它可以通过变形、加入情景等方式新颖、有趣地过渡到下一页面。在交互的过程中，鼠标滑过图标上方和点击产生的效果也可以有不同的动态效果设计，以增长交互过程中的趣味性和艺术行。3.3 声音的设计与运用声音始终是界面中非常重要

26、的信息体现方式。虽然没有视觉信息那么强烈，但是恰当的声音设计可以让信息的隐喻更加丰富。声音信息的解读比视觉信息的解读更加容易，这重要依托顾客的直觉感受与生活经验。例如，警告音往往是对现实生活中警告的模拟。声音信息和视觉信息的配合也是常用的信息传递模式。在某些情境中，单有声音信息或视觉信息都无法精确体现出信息的含义，这时候两者的配合就显得很重要。界面中的声音设计重要分为指令音的趣味性设计和结合主题的背景音乐的愉悦感和想象性设计。1. 背景音乐不同的音乐有不同的感染力。正如电影配乐同样，选用什么样的界面背景音乐也是非常重要的，好的界面背景音乐能给人带来美的享有，减轻操作上带来的疲劳和乏味，还可以烘

27、托主题，让人产生丰富的联想，从而产生积极的互动行为和悲观欲望。2. 指令音指令音虽然短暂，但它可以通过设计来烘托内容，提前给顾客以心理的暗示。结合界面类型和风格而设计的指令音，不仅可以体现界面使用的整体性和一致性，还由于反馈功能成为界面易用性实现的一种参照指标。在现实的界面设计中，并非是把界面的总体规划与界面元素设计分割开来进行，这两者虽然在考虑的顺序上存在很小的差别，但更加重要的是，作为一种界面系统整体的设计，任何割裂开来分析设计问题都是不容许和不明智的做法，因此，对界面各个方面的设计其实是互相穿插存在的，任何一方面的设计都带有其她方面的元素思考。3.4 图标设计图标设计是界面设计中非常重要

28、的部分，但诸多书籍把太多的注意力投入到设计的过程和手段方面，对它的科学性关注不够。仔细研究当今的图标设计，可以发既有如下局限性之处：常以美为导向，图标的外观效果被予以了太多的关注，却很少去关注内容的选择；常把设计当作导向，以设计师的爱好为图标内容的选择原则，不管顾客的感受；图标的设计没有规则，虽然同一系统的图标之间也没有任何关联性和相似性。如下是应当引起注意的某些地方：1. 辨认图标区别于一般的图形，较好的视觉辨认功能是她必须具有的。图标的浮现和存在价值就是为了让人们辨认，因此在图标设计中，形式美并不是核心，能不能精确地被辨认才是设计师的首要目的。好的图标有两个长处，一是功能一目了然，二是顾客

29、在明白图标的意思，可以引领所有相似的工具都使用和它同样的绘图语言。图标在变成范例后，它就不可动摇。有的软件开发者想试图变化范例，但这要承当令部分顾客没有措施理解的风险。太简洁的符号会影响顾客理解。虽然顾客此前懂得意思，长时间后，也不也许留下诸多印象。如果图标中没有唤起记忆的要素，那么要想靠表面视觉来理解图标的意思就会比较困难，这个有时会让顾客放弃使用。因此在选择隐喻对象的时候一定要谨慎。容易被辨认的图标可以协助顾客使用某些功能，容易产生歧义的图标，尽管有好看的外表，甚至于具有一定的可比性，但那也是不可用的。2. 一致就图标设计来言，一致性重要表目前3个方面。（1） 同一图标家族。从前面的简介来

30、看，同一图标需要根据具体的应用环境，来设计出不同尺寸和色深度的图标家族成员。但是尺寸和色深度的变动，使得设计师要保持图标外观上的一致成了一项困难的工作。但是不管如何，大图标与小图标相比要相似，彩色的图标与黑白图标也要感觉不出差别，这样子顾客在不同的显示环境下才干正常地使用软件。具体的来说，应当要从色深度较高的大图标展开设计，然后再根据具体规定，弱化那些不重要的内容，删除那些无法保存的内容，最后强化在图形中某些构造上的因素，这样多种版本感觉差不多就行了。（2） 应用程序和操作系统的图标要尽量一致。每一次操作系统的更新也到了应用软件更新的时候，软件开发商不仅仅要升级功能，还要在图形界面的风格上尽全

31、力地追求与操作系统的一致性，这样做也是为了让顾客可以在完美和谐的环境下工作。 3.兼容 图标的兼容指的是图标在不同的文化语义下都能被辨认为同样的内容和意义。文献夹、画笔等等都是广泛隐喻的典型范烈。 在一种文化语义下理解的事物到了另一种文化语义下就也许不被理解，或者会被理解为其她意义。例如，用圆形、点和短线构成的图形，在大多数地方都能被理解为船舵，而在非洲某些没有船舵的部族则也许理解不了，她们也许觉得是太阳。在中国文化背景下，鱼可以理解为年年有余，是富裕的盼望，在其她文化中，就会觉得中国人的这种联系很奇怪。虽然在同一大文化背景下，也会由于次级的语义环境而产生不同的理解。因此在设计图标时要充足考虑

32、到多种顾客在理解上的差别，保证不会发生理解上困难和偏差。4.避免文字尽量不要在图标中运用文字。图标中的文字也许会让人感到不知该怎么办，导致阻碍跨文化上的交流。图形的特点重要在于它的直观性，可以通过模拟已有的东西，让顾客凭借简朴的视觉对比和经验就能懂得图形代表的内容及含义。语言则不是这样的，世界各地甚至于同一国家里人们使用的语言都是不太同样的，因此在母语国家看起来容易被理解的文字，对其她国家及地区的人来说那就是天书。5. 为显示而设计图标应当要在目前的显示屏辨别率下，如果看起来比较好才行。由于一种个的像素点在一起就构成了屏幕，水平或垂直的直线以及斜线具有较好的显示效果。曲线的显示效果不太抱负，不

33、规则的像素排列会形成锯齿状，影响线条的流畅性。虽然目前许多系统都支持真彩色，对图标尺寸的限制也可以放宽，图标的设计自由度和变化越来越大，但这也并不意味着可以随意设计。一方面，顾客的显示屏不太同样，即便使用同一操作系统，也要照顾到好坏不一的显示效果。6. 图标示例l 操作图标操作图标阐明新建绿色主色编辑具有笔状图形查询放大镜删除红色主色下载向下箭头l 提示图标提示图标阐明下级目录省略号协助问号警告感慨号返回上一级向左方向箭头返回眸页房子第四章 软件界面设计流程4.1 目的顾客研究在界面产品越来越面对个人顾客的今天，以顾客为中心的设计措施成为设计人员的第一选择。在这一设计措施体系中，目的顾客研究有

34、着非常重要的位置，其工作有也许是在设计之初，也有也许贯穿于整个设计过程中。在顾客研究中，人体工程学、心理工程学、社会学、和组织行为学都会提供有益的指引。顾客的背景，如性别、年龄、文化背景、职业、受教育限度、经历、身体条件；顾客的工作环境，如周边的物理环境、工作设备、社会和文化的影响；顾客的任务组织，如任务种类、工作流程，都是需要进一步调查与分析的。在目的顾客研究的第一步，就是定义界面设计面向的顾客群体，即如何定义目的顾客并找到合适的顾客研究对象。一般可以设定某些参数来对目的顾客进行定义。例如，要设计一种用于手机无线环境下的银行支付软件界面，可以使用两个参数来定义目的顾客：使用手机无线平台的经验

35、；使用银行支付系统的经验。进行顾客定义的目的是为了在进行顾客研究时找到对的的顾客进行研究，而不会由于找不到恰当的顾客导致成果错误。顾客研究的措施有诸多，常用的涉及间接受集资料、展开问卷调查、实境调查、观测、访谈级焦点小组等。把这些措施进行分类，大体可以分为背景调查、观测、访谈3大类。1. 背景调查这一措施的核心是输入既有的背景资料，输出对于顾客研究有用的信息。具体的措施有： （1）间接受集资料在分析类别中，最重要的研究措施是间接分析资料，也就是在图书、报刊、互联网上收集与设计内容有关的多种背景资料。该措施的优势在于能在很短的时间内获取大量与设计有关，也是非常有价值的。但是收集的这些间接资料，有

36、几种问题需要注意：1） 时效性。2） 反复资料。3） 非权威资料 （2）竞争对手分析无论是成功的产品还是失败的产品，竞争对手的产品都是非常重要的研究对象。对于成功的竞争产品，需要对其设计、商品体现进行分析，获得有益的设计经验；对于失败的竞争产品，则要从失败的因素入手，避免同样的错误发生在自己身上。2. 观测观测是顾客研究措施中最常用到的类型。观测法需要设计人员进入到顾客使用同类界面的情境中去，直接接触顾客及系统，可以以便地获取大量的第一手资料。但观测法也有其弱点，那就是需要耗费较长的时间和较多的费用。通过观测，设计人员可以获得一下信息：顾客的使用环境；环境对界面的影响；顾客完毕一种任务的过程、

37、顾客与否同步还在使用其她的产品或界面；什么任务占去了顾客大量的时间；顾客使用产品交互系统的方式；顾客在使用什么术语等。具体措施有如下两种：（1） 跟随影子法。由字面意思可想到，跟随影子法师指顾客使用界面系统时设计人员跟随着顾客的操作进行观测，就仿佛是顾客的影子。在跟随过程中，设计人员可以理解到顾客的使用习惯，体会到顾客使用系统的感受，还可以和顾客进行交流、沟通。固然，这些都是第一手资料，仅用笔来记录是完全不够的，应当同步进行拍照、录音或摄像，以便于进行整顿和总结。（2） 观测视频。观测视频可以分为两种：一种是让顾客都在实验室进行，对于环境影响较小的界面系统研究是可以采用这种方式，如网页使用研究

38、。而对于与环境关系密切的界面系统，如家庭娱乐系统，则可以把摄像设备安装在顾客熟悉的环境里，如顾客的家里。 3.访谈 访谈是一种老式的顾客研究措施，由于其实行以便、成本低廉而被大量采用。重要方式如下：（1）面谈这种措施可以在面对顾客的状况下进行深度的讨论，从而获得有价值的信息。重要缺陷是效率低，由于面谈每个顾客会耗费较多的时间。面谈对于研究人员的规定较高，一是规定研究人员对有关界面系统理解限度必须很高，二是提问的方式和内容不能对顾客有暗示或不良的引导，三是不能有让顾客感到紧张的提问。不恰当的提问也许有一下几种：1） 带有引导性的问题，例如：“这个产品有多不以便?”2） 不够中立的例子。3） 提问

39、中带有设计人员自己的倾向。4） 不明确的问题，让顾客无法回答。5） 过于直白的提问，容易引起顾客的自我防备，例如：“你在使用过程中犯了多少次错误？” 设计人员应当尽量精心准备问题，“这个产品有多不以便？”这样的问题可以改成“谈一下使用这个产品的感受”，在放松的状态下，如果有不以便的地方顾客自然会提到。“你在使用过程中犯了多少次错误？”这样的问题可以改成“你能谈一下这个产品不能完毕某个任务的状况吗？” （2）问卷调查随着互联网的渗入，使用互联网进行问卷调查已经变得非常以便和快捷。如果是简朴的顾客数据收集与研究对象招募，可以使用某些社交网站上的调查工具，。某些专业的问卷调查也可以协助设计人员轻松地

40、完毕调查。4.2 交互设计界面中的交互设计是指顾客面对界面系统时对信息进行的多种操作以及系统对顾客额反馈。交互设计的重要目的是让顾客顺利地使用界面，因此，界面设计的易用性因素是交互设计的重点。交互设计重要有一下要点：1. 预设用途预设用途一次也能翻译成示能性，是指物品被觉得具有的性能以及事实上的性能。在界面设计中，这一概念非常重要。与直接模拟形象的设计措施不同，预设用途重要提供了一种使用界面的线索以及使用界面上某一元素的因果关系，而不仅是形象上的相似。界面中最常用的预设用途是网页中的链接。蓝色的文字会告诉顾客此处是一种链接热区，单击就会有新的页面或内容浮现，鼠标通过时链接也会显示出下划线进行提

41、示。这样的预设用途对于大多数顾客而言，是不言而喻的，如果设计人员设计了一种蓝色文字而不是链接热区，就会让诸多顾客产生误解，以至于觉得界面很糟糕。2. 控件控件是预设用途最佳的案例。在计算机浮现前得很近年里，人类就开始使用某些具有固定功能的设备来完毕特定的任务，这些就是界面控件的原型，如开关、把手、旋钮等。控件的作用是用来完毕设定好的操控。用按键来激活或关闭某个功能；旋钮调节在一定范畴内的变化；拨动开关来在两种状态中切换。可以把固定功能的界面元素都看做是控件，几乎每个界面上都会浮现各式的控件。 （1）按钮。按钮是界面中常用到的控件。一种界面上往往会存在几十个按钮。按钮可以完毕控制页面状态的转换，

42、也可以控制界面元素做多种动作。在原则化限度规定较高的界面中，如软件界面和手机界面，按钮的样式较为固定，而在某些个性化较强的网页界面中，按钮的设计往往能成为吸引眼球的亮点。 （2）滑块。滑块可以提供在一定范畴内的调节操作，一般用来调节音量、亮度或范畴。有的滑块其两端会有微调按钮，这种控件也被称为滚动条。 （3）文本框。文本框可以提供输入文本的空间，这种控件往往会涉及在搜索框或多种表单中。如图4.1QQ空间的说说文本框。图4.1 QQ空间的说说文本框 （4）进度条。进度条用来表达一种复杂进程进行的限度。进度条也可以做成丰富的图形动画。如图4.2是打开QQ空间的进度条。 控件的优势有如下几种方面：

43、1）控件是某些容易理解的预设用途，顾客不必过多学习就可以直接使用。2）易于原则化。使用原则控件能让顾客迅速地把使用一种界面的经验转移到同类界面中。3）让界面更加简洁。控件可以保持界面的一致性，从而在视觉上减轻顾客的承当、提高界面的易用能力。在使用控件时，一方面要注意不要在一种页面放置过多的控件，可以考虑分页面显示多项内容。另一方面，应当将核心的控件突显出来。每个页面均有核心功能的控件，精心设计此类控件的外观，并调节尺寸和位置，使之处在最醒目的状态。再次，把有关联的控件放在一起，把不有关的控件按照功能分组，以免产生误解。最后，至于控件的摆放顺序，如果在界面中浮现多种控件，设计人员应当要仔细研究它

44、们的摆放位置。如果控件来自于现实生活，那么可以以控件原型的摆放习惯为参照，使控件与原型一一对号。 图4.2打开QQ空间的进度条3. 反馈反馈是指顾客进行操作后交互系统浮现的某种提示。如果系统对于顾客的操作没有反馈或者反馈较慢，这也许会导致顾客反复此操作，整个交互过程就会产生问题，顾客进行的任务也许会失败。因此，恰当的反馈是交互设计的重要构成部分。（1）反馈的要点。 1）及时。反馈必须要及时，哪怕就是耽误一小会也会给顾客带来疑惑和不满。想象一下在饭店里招呼服务员的场景，如果没有服务员理睬，顾客将会感觉很糟糕。当顾客有需求时，服务员如果不能立即服务客户，也应当及时地反馈给客户表白已经收到了她的祈求

45、。这种情景和界面设计中的反馈是同样的。当顾客单击一种按钮时，界面上应立即有所反映，如果这个反映过程时间较长，系统要提供一种进度条表白系统正在做出反映。 2）明确。系统的反馈也要明确。当系统正对顾客的操控进行解决时，可以提供类似“载入中”或“请稍候”这样的提示。固然，提供进度条是一种更为明确的方式。但当系统中断或异常终结时，系统必须明确地告诉顾客系统已经终结操作或者退出，否则顾客会在等待中失去耐心，做出更多错误的操作。（2） 反馈的类别。反馈在整个交互界面系统中无处不在。没有反馈，顾客就无法和界面系统继续交流，不同类型的反馈均有着各自的特点。 1）悬停反馈。悬停反馈可以批示出光标目前的位置，并能

46、告知光标通过的位置上与否有特殊的元素等待进一步操作。在界面中按钮必须设立悬停反馈，否则顾客会辨认不出按钮，从而没有操作的意识和机会。复杂的悬停效果可以给界面增长亮点，以丰富顾客的交互体验。 2）单机反馈。单机反馈是界面元素在被单击后产生的反映，表白此元素已经被单击。 3）选中反馈。当元素被选中后，显示出与未选中状态的区别，提示顾客已经选中并可以进行下一步操作。 4）进度反馈。进度反馈分为拟定性反馈和不拟定性反馈两种，拟定性反馈可以告知顾客进程大体的完毕比例。 5）激活反馈。有些元素，特别是不应占据页面重要空间的控件，给她们设立动态反馈可以辨别激活与非激活状态。在非激活状态下元素尽量消隐在页面中

47、，需要它们时再将其突出显示。 4.错误 错误信息提示是界面交互系统中也要顾及的方面。在顾客进行了错误的操作时，系统需要提供错误信息，往往也随着着提示音。 顾客可以撤销操作也是界面设计的重要方面，这样才干给顾客出错后弥补的机会。顾客出错后的错误报告页面应尽量提供精确的信息，也可以设计某些有趣的画面缓和顾客的焦躁情绪。4.3 视觉设计视觉设计师一般由负责美工的人来担任，在已经拟定了的交互设计方案基本之上，尽量使界面变得美观，让顾客看了更加舒服。视觉设计的重要内容有：界面布局，颜色搭配，图标设计，字体编排与设计，界面元素的背景图案设计等。做出的成果一般是效果图，例如设计一种按钮，要制作“正常、加亮、

48、按下、禁用、焦点”五种状态的效果图。为了提高视觉设计的效率，设计人员需要有一套界面素材库，这套界面素材平时保存着常用界面元素的多种效果图。在着手应用软件的界面设计时，可以一方面从素材库中选出合适的界面元素，如果没有合适的，再尝试制作新的，不断地素材库变得更丰富。4.4 界面实现界面实现要由程序员来负责：在交互设计方案和已定的视觉设计方案基本上，运用编程来使可以运营的软件界面得以实现。界面实现过程中的常用弊病是：某些程序员为了编程上的以便，界面代码常常被混扰到业务逻辑中，导致团队协作以及后续维护都很非常麻烦。只要界面或者业务逻辑一旦改动，就得要改动许多地方，以致常常出错。开发团队应当要努力使“界

49、面”和“业务逻辑”分离，使两者之间的互相干扰降到最小：1.业务逻辑要形成编程接口；2.界面元素的交互操作也要形成编程接口；3.程序员调用上述两类编程接口以及界面资源文献（如文字、图片等），实现特定功能的界面。4.5 应用测试 应用测试并非是界面设计环节中的最后一步，它贯穿于整个界面产品开发和设计的全过程，甚至在整个产品生命周期过程中，从界面产品的前期规划到最后退出应用市场，它都是一种持续的、反复的工作。这一环节虽与真正的设计环节无关，但它是设计中不可缺少的部分。 1.测试界面的测试是有关易用性方面的，测试是检查界面易用性唯一的、不可替代的措施。测试的时间和次数是没有任何规定的，只要需要就可以进

50、行测试。在界面设计的初期，可以测试相似或类似界面的竞争产品来获得调查数据，还能在纸上进行原型测试来制定设计概念；到了中期，可以针对界面额某一方面或某些方面进行任务型测试；在产品投入市场后来，以真实顾客的使用反馈信息为根据，进行界面的升级和不断完善，这也是测试的重要部分。2. 综合评估每一次测试完毕之后，都需要对其测试的内容进行评估。固然，评估的内容和方面肯定会有某些不同之处。但无论哪一种界面类型，评估的内容都逃不开一下几种背面： （1）界面的实用性。衡量顾客在使用界面完毕任务时的满意限度。 （2）界面的有效性。度量指标有错误率、系统各设备使用率、任务完毕时间。 （4）系统设备及功能使用面。设备

51、和功能使用率，与否具有存在的必要。 （5）顾客满意限度。衡量的指标有顾客发现问题多少和使用爱好以及顾客对界面的满意限度。3.修改意见测试评估之后，设计人员需要筛选出必须关注的问题，并给出实用性的修改意见以协助界面进行调节。一般的环节如下： （1）筛选意见。 （2）拟定界面是通过局部微调来解决发现的问题，还是全盘否认。 （3）制定修改和调节的方案，以解决问题。第五章 有关计算机学院软件界面设计的思考 计算机学院的软件界面设计要符合我们南华大学的形象辨认规范，图5.1是学校的形象辨认系统主页面，学校的主颜色是蓝色。图5.1 南华大学形象辨认系统主界面 图5.2是计算机学院的院徽。圆形，以白色为底，

52、以蓝色为基调色，给人一种静谧、深邃、谨慎、冷静和理智的感觉；以计算机学院简称C为基本元素，外圈辅以蓝色的中文阐明，明确南华大学计算机学院专属；院徽以蓝、橙、白、红为基色，干净明亮，时代感鲜明，教导现代大学生应当热情开放、理智成熟、蓬勃奋发；整体如火热的火炬，又似东升的旭日，象征南华大学团结奋进、蒸蒸日上、欣欣向荣。计算机学院的软件网站都必须得有这个院徽。图5.2 计算机学院院徽 图5.3是计算机学院的网站主页面，大体以蓝色为主色调，体现现代计算机领域的发展方向。左上角是计算机学院的院徽，让人一看到就懂得这是计算机学院的软件网站。右上角附有学校主教学楼图片，旁边尚有一颗枝繁叶茂的大树，表白学校实

53、行可持续发展，学校将有更美好的明天，像大树同样枝繁叶茂，桃李满天下。左下角一笔记本和光盘，强调学生应多多实践，不要纸上谈兵；还加上了“明德、博学、求是、致远”的校训，这与学校的形象辨认密切有关。主页面布局清晰明朗，颜色搭配合理。图5.3 计算机学院主页面通过教师们和同窗们的努力，计算机学院的软件界面较好用了，我们在网上完毕学校和学院交代的作业都非常地顺利。计算机学院的软件界面设计可在借鉴学院已有软件界面的状况下，再从下面几种方面着手：（1）软件以蓝色为主色调。（2）要突出学校的核特色，走可持续发展路。（3）以教师和学生的顾客需求为中心，教师和学生是两个不同的顾客族群，她们的需求不同，在进入界面

54、后能进行的操作也不同样，但都必须满足她们每天在工作和学习上的需要。以学生进入的教务系统简介，如图5.4，左边有“学籍信息”、“选课系统”、“学期课表”、“我的成绩”等7个菜单项，学籍信息供学生查询自己的信息；选课系统供学生在开学时选报有关课程；学期课表供学生查询自己的课表、班级课表、教师课表、教师课表，还能查空闲的教室；我的成绩供学生查询自己的成绩和不及格课程补考报名；重修报名可让学生报名需要重修的课程；网上评教评学可让学生期末时在网上给教师评分和提意见，让教师的教学更好受同窗欢迎；网报系统让学生报名某些国家规定的考试，如一般话等。7个菜单项让学生从开学到期末所有在学习上的需求都得到满足。图5

55、.4 南华大学教务系统（4）在某些复杂软件的交互设计中应提供“协助”这一按钮，用来协助顾客理解这个软件是怎么使用的。如图5.5右上角。图5.5 易捷PDF转换器主界面（5） 操作环节尽量少，界面布局简洁合理，界面颜色以蓝色或其渐进色为主色调，如图5.6T型构造.BannerMenuGuidMainFooter图5.6 T型构造 图5.7是我画的有关本学院的一种软件网站主界面效果图，但愿可以对设计人员有所协助。从图上可见首页下有多种子页面和栏目超链接，足以让游客全方位地理解我们计算机学院，让教师和学生可以时刻关注学院的动态，更好地完毕她们的生活和学习。中间插了一张图片，是第一教学楼，是学校最高的

56、教学楼，旁边是某些有关计算机学院的简介。导航条上面区域左上角有计算机学院的院徽，是学院的象征。院徽的主颜色是蓝色，我索性把整个界面的色彩也设立为蓝色，这样看起来更相称，整个蓝色的界面给人一种深邃、谨慎、沉稳的感觉。整个界面也许内容简朴了点，但给顾客一种清爽明朗的感觉。图5.7 自画的学院主页面参照文献 1程景石，倪亦泉等.人机界面设计与开发工具M.北京：电子工业出版社,1994. 2 斯蒂夫.克鲁格.网页设计效果优化艺术M.杨德祥译.济南:山东科技大学出版社. 3张帆，罗琦，宫晓东.网页界面设计艺术教程M.北京：人民邮电出版社. 4刘正英.面向使用的软件设计M.北京：机械工业出版社. 5鲁晓波

57、，唐炳宏.数字图形界面艺术设计M.北京：清华大学出版社. 6 罗仕鉴，朱上上，孙守迁.人机界面设计M.北京：机械工业出版社. 7李洪海，石爽，李霞.交互界面设计M.北京：化学工业出版社. 8 张丽，徐文平，罗印.人机界面设计M.北京：北京大学出版社. 9 杨璇. 数字媒体界面设计M.北京: 中国水利水电出版社. 10杨明朗，王红.人机交互界面设计中的感性分析J.包装工程，. 11姜葳.顾客界面设计D.杭州：浙江大学，. 12范慧君.多媒体图形界面设计的研究D.合肥：合肥工业大学，. 13王璞.顾客界面设计的人性化D.长春：东北师范大学，. 14刘春花.基于顾客体验的界面设计(UI)研究D.天津

58、：天津工业大学，. 15黄庆华.多媒体软件界面艺术设计研究D.上海：华东师范大学，. 16陆敏.基于人机工程的软件界面设计研究D.南京：南京航空航天大学. 17李刚.虚拟现实的艺术理论研究D.武汉：武汉理工大学，. 18 19Johnson，StevenInterface Culture：How New TechnOlogy Transforms the Way We Create and CommunicationSan Francisco：Harper Edge,1997. 20Gaver WwAuditory interfacesIn Handbook of HumanComputer

59、Interaction,1 997 21Steven Heim.The Resonant Interface HCI Foundations for Interaction DesignM.New Jersey:Addison-Wesley,.谢 辞时光匆匆，转瞬即逝。转眼间，就要收拾行囊，辞别我呆了四年的大学，作别许多教师，好友、同窗，迈出新的一步。在这辞别的季节，感慨良多。论文写作已基本完毕，通过对论文的写作，我理解了软件界面设计不是一件容易的事，是要有多种过程的，懂得了界面设计应有的规则。做任何一件事都应面对客观现实，不能盲目地以自己的想法为中心，就像界面设计同样不能以设计人员自己的感受，而要以顾客群体的想法为中心。做一件事情应当要有条不紊，有筹划，有环节，界面设计也应有自己的流程。我也更加清晰理解了本学院软件界面设计的初衷，懂得学院网站的新闻动态和教育研究事业。而论文中也有某些缺陷和局限性，论文中第五章对于本学院软件界面设计的描述有些简朴，画出的界面也许也不大气，但愿各位评委教师多多包涵并加以指引。大学生活即将结束，想想四年走过的点点滴滴，有彷徨，有迷茫，但总算度过那些难关了，这都少不了教师和同窗们的协助，在这里，我向她们表达最衷心的感谢！