UI界面设计新课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,上课时间和地点安排,1,节次,星期一,星期二,星期三,星期四,星期五,第一大节,第,3,4,周,第二大节,第,3,6,周,第,3,周,第,3,4,周,第三大节,第,3,周,第,3,6,周,第四大节,第,3,4,周,多媒体专业计算机综合楼,606,、图形专业计算机综合楼,610,2,UI,界面设计,计多,10,、图形,10,3,第一节 关于,UI,设计,4,一、什么是,UI,5,通过什么操作汽车？,6,7,通过什么操作,ATM,机？,8,9,通过什么控制电视机？,10,11,通过什么控制数控车床？,12,13,通过什么操作,Photoshop,程序？,14,15,通过什么操作手机？,16,17,UI,即,User Interface(,用户界面,),的简称。广义上来讲，,UI,界面是,人与机器,进行,交互的,操作方式，即用户与机器相互传递信息的,媒介,，其中包括信息的,输入,和,输出,。,18,机器,用户,界面,19,好的,UI,界面,美观易懂,、,操作简单,且有,引导功能，,使用户感觉愉快、增强兴趣，拉近用户和机器之间的距离，从而提高使用效率。所以，对整个产品设计来说，,UI,界面设计是其重要的组成部分。,20,但对于我们多媒体和图形设计方向来说，,UI,界面则主要是指,GUI,，即,Graphical User Interface,（图形用户界面），是对,屏幕产品,的视觉效果和互动操作进行设计。,GUI,是一种结合美学、计算机科学、心理学、行为学、人机工程学以及市场的综合性学科，强调,人,机,环境,三者作为一个系统进行总体设计。,思考常见的,GUI,界面。,21,二、主要研究内容：,GUI,是一种综合性设计，要想设计出好的图形界面，我们必须要掌握,设计艺术,、,计算机技术,、,人机工程学,等学科领域的内容。,22,1,、设计艺术,主要涉及到平面构成、色彩构成以及立体构成等基础知识，同时也需要有一定的平面设计经验。,23,2,、计算机技术,UI,界面的互动必须要通过计算机技术来实现例如用,FLASH,做的互动程序，必须要用,AS,语言才能够实现。,24,3,、人机工程学,人机工程学就是应用人体测量学、人体力学、劳动生理学、劳动心理学等学科的研究方法，对人体结构特征和机能特征进行研究，提供人体各部分的尺寸、重量、体表面积以及人体各部分在活动时的相互关系和可及范围等人体结构特征参数；分析人的,视觉、听觉、触觉以及肤觉等感觉器官,的机能特性；探讨人在工作中影响心理状态的因素以及心理因素对工作效率的影响等。,25,26,三、,GUI(,图形界面,),主要组成部分：,1,、桌面,在启动时显示，也是界面中最底层，有时也指代包括窗口、文件浏览器在内的,“,桌面环境,”,。在桌面上由于可以重叠显示窗口，因此可以实现多任务化。一般的界面中，桌面上放有各种应用程序和数据的图标，用户可以依此开始工作。,典型代表：,Windows,桌面、手机桌面等,27,28,29,30,2,、窗口,应用程序为使用数据而在图形用户界面中设置的基本单元。应用程序和数据在窗口内实现一体化。在窗口中，用户可以在窗口中操作应用程序，进行数据的管理、生成和编辑。通常在窗口四周设有菜单、图标，数据放在中央。,31,3,、菜单,将系统可以执行的命令以阶层的方式显示出来的一个界面。一般置于画面的最上方或者最下方，应用程序能使用的所有命令几乎全部都能放入。重要程度一般是从左到右，越往右重要度越低。命定的层次根据应用程序的不同而不同，一般重视文件的操作、编辑功能，因此放在最左边，然后往右有各种设置等操作，最右边往往设有帮助。一般使用鼠标的第一按钮进行操作。,32,4,、按钮,菜单中，利用程度高的命令用图形表示出来，配置在应用程序中，称为按钮。,应用程序中的按钮，通常可以代替菜单。一些使用程度高的命令，不必通过菜单一层层翻动才能调出，极大提高了工作效率。但是，各种用户使用的命令频率是不一样的，因此这种配置一般都是可以由用户自定义编辑。,33,四、,GUI,的设计原则：,1,、减少用户的认知负担,2,、保持界面的一致性,3,、满足不同目标用户的创意需求,4,、用户界面友好性,5,、图标功能的一致性,6,、建立界面与用户的互动交流,34,五、,GUI,的主要应用领域：,手机通讯移动产品、电脑操作平台、软件产品、,PDA,产品、数码产品、车载系统产品、智能家电产品、游戏产品、产品的在线推广等。,35,第二节 图形界面设计的基本原则,36,用户原则是图形界面设计最基本和最重要的设计原则,。,所谓用户原则,，就是在软件界面设计中，要充分体现出,“,以人为本,”,、,“,用户友好,”,的基本要求，做到,：,易懂、易学、易用,。,37,一、,图形,界面设计的,“,黄金法则,”,用户原则是大原则，人们在长期的图形界面设计过程中，总结出了图形界面设计中一些有用的法则，这些原则被称作软件界面设计的,“,黄金法则,这些法则进一步丰富了用户原则，使用户原则变得实在、可操作。,38,1,、图形,界面的一致性原则,一致性原则是,“,黄金法则,”,中最重要的原则，也是界面开发人员最容易忽略和违反的一个原则。,一致性原则有利于减少用户的学习量和记忆量，用户可以把局部的经验和知识推广到其他应用场合。,39,一致性原则要做到：,界面外观上的一致：,具有相似的外观布局和信息显示格式。例如Office和Adobe软件。,操作次序上的一致：,例如不同命令操作后的显示效果一致。,概念、语义、命令语法一致,：例如同一功能的命令名称要一致，例如,“,复制,”,命令。,不同软件开发商之间的界面设计要保持某种一致：,例如Windows操作系统下的各种软件都具有一致性。,40,Dreamweaver,界面,41,Flash,界面,42,After Effects,界面,43,Premiere,界面,44,2,、图形,界面的简洁性原则,简洁,不仅是界面设计的美学原则，而且也是显示屏幕大小所要求的。复杂化是界面设计的一大误区！,简洁性原则主要表现在：,内容归类合理、内容排列整齐一致,45,46,3,、图形,界面的快捷方式原则,用户希望能减少人机对话的次数以减轻操作的频率，快捷方式就是一个较好的办法。,Windows,常用的快捷方式有：删除、查找、插入、保存、打开、复制、粘贴、帮助、打印、关闭、剪切等。,Windows,操作操作系统下的应用程序基本都遵循一样的快捷方式原则。,47,48,4,、软件信息的反馈原则,软件界面对用户的每个操作都应当提供及时的信息反馈，尤其是简明的错误处理和帮助功能是软件界面的重要反馈信息。,例如光盘刻录程序在工作的时候提示进度，结束的时候告诉任务完成、如果没有光盘提示插入光盘等反馈信息；手机信息发送成功,失败提示等。,49,5,、软件界面的在线帮助原则,软件界面的友好性还体现在为用户提供有好的帮助界面，帮助用户学习和使用本软件。如下图：,50,51,6,、软件界面的操作可逆性原则,操作的可逆性对用户来说，是一种有效的鼓励。如果用户知道操作是可逆的，即使发生错误也能恢复到原来的状态，用户就能大胆地对不熟悉的功能进行探索和学习。如下图：,52,53,7,、图形界面的最少记忆项目原则,好的图形界面应该尽量减少用户的记忆量，用户必须记住的任何信息应该是和当前操作有关的，而不是和计算机相关。,为减少记忆量，应该通过菜单设计及联机帮助等形式帮助用户记忆，一般地说，用户的短期记忆不要超过,7,个项目。,54,8、,图形,界面操作序列的完整性原则,界面中每个操作序列都应该清楚地标明开始和结结束，其余的操作应插在中间。操作序列的结尾应该给用户完成的感觉，并指示下一个任务的开始。,想象一下发送手机信息的整个操作过程。,55,二、,图形界面的配色原则（色彩构成）,在黑白显示器的年代，人们是不用考虑色彩的配置的。今天，屏幕色彩的配置是屏幕显示设计的一个关键。恰当的色彩运用，不但能美化软件界面，而且还能够增加用户的兴趣，引导用户顺利完成操作。,色彩构成,是配色的基础，请同学们好好回顾一下，学会把色彩构成理论用到图形界面设计当中。,56,例如，在电子地图上可以用不同的颜色区分不同的省、不同的国家；也可以用同一颜色的不同深法度来区分海洋的深度或地形的高度；在电脑游戏中可用颜色来表示游戏的进程。相反地，如果错误地使用颜色，会误导用户放弃操作，如有的打印程序用红色表示激光打印机预热就绪，可以打印，但有的用户却误解为机器出现危险而放弃操作。因此，屏幕色彩的配置直接关系到用户对软件操作的信赖程度。57,1,、,色调的一致性,色调的一致性指的是在整个软件系统中要采用统一的色调，就是有个主色调。例如，用绿色表示运行正常，那么软件的色彩编码就要始终用绿色表示运行正常，如果色彩编码改变了，用户就会认为信息的意义变了。所以，在软件界面设计前，设计者应该把色彩编码标推方案写出来，以利于每一个设计者遵守。,例如很多程序采用交通灯的色彩编码含义。,58,59,60,61,62,63,2、保守地使用色彩,大多数的界面设计者都赞成这一色彩配置原则。所谓保守地使用色彩，就是从大多数的用户考虑出发，根据不同的用户设计不同的色彩。界面设计时提倡采用一些柔和的、中性的颜色，以便于绝大多数用户能接受。因为有时急于使用色彩突出显示效果，反而适得其反。如有的软件界面使用大号字母，每个字母还使用不同的颜色显示，在远距离看来，屏幕耀眼夺目，可是它不利于阅读，而且会导致多屏显示。,64,3、色彩选取尽可能符合人们的习惯用法,对于一些专门软件，在配置颜色时，要充分考虑用户对颜色的喜爱。例如明亮的红色、绿色和黄色适用于为儿童设计的应用程序。一般来说红色表示错误，黄色表示警告，绿色表示运行正常等等。,思考下面配色方案可能适合的群体和环境：,65,66,67,68,69,70,71,72,4、,把色彩作为功能分界的识别元素,不同的色彩可以帮助用户加快对各种数据的识别，明亮的色彩可以有效地突出或者吸引人们对重要区域的注意力。,73,5、能让用户控制,配色方案,通常图形界面都可以让用户自定义界面色彩配置，选择自己最喜欢的颜色。例如,windows,操作系统界面，浏览器，,QQ,界面等等。,74,75,6、色彩搭配要便于阅读,要确保屏幕的可读性，就要注意色彩的搭配，有效的方法是遵循对比法则。在浅色背景上使用深色文字，在深色背景上使用浅色文字等等。,动态对象的颜色应该比较鲜明，静态对象的颜色应该较暗淡。,76,77,78,79,7、色彩数目应该有限,建议把单个界面颜色限制为,4,种以内，整个软件系统系列颜色应限制在,7,种以内。,80,附一：,二十世纪代表性的人机界面装置,81,1,、扩音器,82,2,、按键式电话83,3,、方向盘,84,4,、磁卡,85,5,、交通灯,86,6,、遥控器,87,7,、阴极射线管（,CRT,）,88,8,、液晶显示器（,LCD,）,89,9,、鼠标,/,图形界面,90,10,、条形码扫描器,91,附二：,图形界面设计作品欣赏,92,93,94,95,96,97,98,99,100,101,102,103,104,实验一：临摹平板电脑操作界面,105,106,107,108,109,要求：,1,、分析界面的布局、版式、色彩以及功能，领会界面的设计思想。,2,、界面制作要严谨、紧凑，做到和作品完全一样。,3,、本实验暂不考虑界面的互动功能。,4,、本实验用,Photoshop,或者,illustrator,制作，图片最大边尺寸为,1024,像素。,5,、试验时间为,6,个学时，作业完成由各班学习委员统一汇总上交。,110,资料下载地址,