软件界面设计技术1--基础知识最终

1、软件界面设计技术软件界面设计技术授课教师：袁贝贝授课教师：袁贝贝邮箱：邮箱：电话：电话时成绩平时成绩 40%40%（作业成绩（作业成绩+ +出勤成绩）出勤成绩）期末考核期末考核 60%60%（提交作品答辩的方式）（提交作品答辩的方式）第第1 1章章 软件界面设计概述软件界面设计概述1.1 1.1 软件界面设计基础软件界面设计基础1.2 1.2 色彩和图像的基础知识色彩和图像的基础知识1.3 phtoshop1.3 phtoshop基本操作基本操作1.1 1.1 软件界面设计基础软件界面设计基础一、界面设计概念一、界面设计概念二、界面发展历史二、界面发展历史三、界面设计

2、内容三、界面设计内容四、界面设计重要性四、界面设计重要性五、以用户为中心的界面设计原则五、以用户为中心的界面设计原则( (重点重点） 六、界面设计的工作流程六、界面设计的工作流程七、界面设计的发展七、界面设计的发展通过什么控制电视机？通过什么操作ATM机？通过什么操作Photoshop程序？通过什么操作手机？一、界面设计（一、界面设计（UIUI）概念）概念 界面界面UIUI即即User Interface(User Interface(用户界面用户界面) )的简称。的简称。 广义上来讲，广义上来讲，UIUI界面是人与机器进行交互界面是人与机器进行交互的操作平台，即用户与机器相互传递信息的媒的操

3、作平台，即用户与机器相互传递信息的媒介。介。用户机器界面 UI-UI-人和机器之间的界面人和机器之间的界面 例如开车时候方向盘和仪表盘就是这个界例如开车时候方向盘和仪表盘就是这个界面，看电视的时候遥控器和屏幕就是这个界面面，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面。，用电脑的时候键盘和显示器就是这个界面。 UIUI可以分成两大类：可以分成两大类：硬件界面硬件界面和和软件界面软件界面。软件界面也可以称为特殊的或者狭义的。软件界面也可以称为特殊的或者狭义的UIUI设设计。计。 界面设计即界面设计即User Interface DesignUser Interfac

4、e Design（用（用户界面设计）的简称，是指对软件的人机交互、户界面设计）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。操作逻辑、界面美观的整体设计。人机交互操作逻辑界面美观问题一：问题一：界面设计界面设计= =版版式设计？式设计？ 版式设计，就是版式设计，就是在版面上，将有限的在版面上，将有限的视觉元素进行有机的视觉元素进行有机的排列组合排列组合。 界面设计的内容界面设计的内容包括包括：图形、文字、：图形、文字、色彩、编排，使界面色彩、编排，使界面起到美化效果的作用。起到美化效果的作用。需要研究用户需求，需要研究用户需求，研究目标用户研究目标用户。 问题二：问题二：界面设计

5、界面设计= =用户用户+ +界面？界面？ 界面设计是指界面美化设计？界面设计是指界面美化设计？ UI UI包含包含用户用户、界面界面以及用户与界面之间的以及用户与界面之间的交互关系交互关系。 界面设计需要定位使用者、使用环境、使界面设计需要定位使用者、使用环境、使用方式。用方式。 UI UI设计不仅仅是美化界面，还有需要研究设计不仅仅是美化界面，还有需要研究用户、让界面变得更友好、更有趣、更易用、用户、让界面变得更友好、更有趣、更易用、更舒适。更舒适。UI用户界面=+交互=版式 考虑用户的心理考虑用户的心理需求，研究目标用户需求，研究目标用户 UI UI设计包括美化和设计包括美化和交互交互 从

6、美化的角度看，从美化的角度看，U UI I优化后优化后: : 1 1. .更有时尚感、层次更有时尚感、层次感感 2. 2.从从QQQQ图像就能知道图像就能知道是是QQQQ的登入界面，更直观的登入界面，更直观、形象。、形象。 从交互的角度，未从交互的角度，未UIUI优化的界面：优化的界面： 1. 1.功能过于简单功能过于简单 2. 2.登入没有体现按登入没有体现按钮的特点，而不会单击钮的特点，而不会单击 3. 3.密码输入框也没密码输入框也没有做掩密处理，被盗号有做掩密处理，被盗号的风险系数增加的风险系数增加二、界面发展历史二、界面发展历史 用户界面的发展历史可以分为三个阶段：用户界面的发展历史

7、可以分为三个阶段： 1 1）从）从2020世纪世纪4040年代年代ENIACENIAC计算机出现到计算机出现到2020世纪世纪6060年代末使用的批处理界面。年代末使用的批处理界面。 2 2）到）到2020世纪世纪8080年代初所使用的文本或命年代初所使用的文本或命令行界面。令行界面。 3 3）从）从2020世纪世纪8080年代初到现在一直在使用年代初到现在一直在使用的的GUI(GUI(图形用户界面图形用户界面) )。批处理用户界面批处理用户界面命令行用户界面命令行用户界面文本用户界面文本用户界面 文本用户界面，也叫文本用户界面，也叫TUITUI，在，在2020世纪世纪8080年代被大年代被大

8、量应用于量应用于IBM PCIBM PC及其兼容机中。及其兼容机中。图形用户界面图形用户界面 GUIGUI 1981 1981年，苹果推年，苹果推出出LisaLisa，第一次在个，第一次在个人电脑中配备了鼠标人电脑中配备了鼠标。 1983 1983年，苹果推年，苹果推出的出的Macintosh (128KMacintosh (128K）型电脑获得成功，很型电脑获得成功，很大程度上归功于其配大程度上归功于其配备了备了GUIGUI操作系统：操作系统：SySystem 1.0stem 1.0 图形用户界面（图形用户界面（GUIGUI，Graphical User InterGraphical Use

9、r Interface face ）是一套通过）是一套通过操作图形元素和文本操作图形元素和文本与计算机与计算机进行交互的系统。进行交互的系统。 常见的图形元素包括窗口、图标、工具栏和常见的图形元素包括窗口、图标、工具栏和指向标识指向标识, ,它们被合称为它们被合称为WIMPWIMP。三、三、 UIUI设计内容设计内容 UI UI设计从工作内容上来说分为设计从工作内容上来说分为3 3个方向，由个方向，由U UI I 研究的研究的3 3个因素决定的，分别是个因素决定的，分别是研究界面研究界面、研究研究人与界面的关系人与界面的关系及及研究人研究人。 1. 1.研究界面研究界面-图形设计师图形设计师

10、国内目前大部分国内目前大部分UIUI工作者从事这个行业。也工作者从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美有人称之为美工，但实际上不是单纯意义上的美术工人，而是术工人，而是软件产品的产品外形设计师软件产品的产品外形设计师。 设计师大多是美术院校毕业的，其中大部分设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计、装是有美术设计教育背景，例如工业外形设计、装潢设计、信息多媒体设计等。潢设计、信息多媒体设计等。 2. 2.研究人与界面的关系研究人与界面的关系-交互设计师交互设计师 在图形界面产生之前，长期以来在图形界面产生之前，长期以来UIUI设计师就设计

11、师就是指交互设计师。是指交互设计师。 交互设计师的工作内容就是设计软件的操作交互设计师的工作内容就是设计软件的操作流程、树状结构、软件的结构与操作规范（流程、树状结构、软件的结构与操作规范（specspec）等。一个软件产品在编码之前需要作的就是交）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型和交互规范。互设计，并且确立交互模型和交互规范。 交互设计师交互设计师一般都是一般都是软件工程师软件工程师背景居多。背景居多。 3. 3.研究人研究人-用户测试用户测试/ /研究工程师研究工程师 任何的产品为了保证质量都需要测试。任何的产品为了保证质量都需要测试。 UI UI设计测试和

12、编码没有任何关系，主要是测设计测试和编码没有任何关系，主要是测试试交互设计的合理性交互设计的合理性以及以及图形设计的美观性图形设计的美观性。 测试方法一般都是采用焦点小组，用目标用测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量户问卷的形式来衡量UIUI设计的合理性。设计的合理性。 如果没有如果没有用户测试用户测试/ /研究工程师研究工程师，UIUI设计的设计的好坏只能凭借设计师的经验或者领导的审美来评好坏只能凭借设计师的经验或者领导的审美来评判，给企业带来严重的风险性。判，给企业带来严重的风险性。 用户研究工程师一般是心理学人文学背景比用户研究工程师一般是心理学人文学背景比较合适。较

13、合适。 UIUI设计师就是：软件图形设计师、交互设计设计师就是：软件图形设计师、交互设计师和用户研究工程师。师和用户研究工程师。四、界面设计的重要性四、界面设计的重要性1)1)创造一个友好、易用的使用环境创造一个友好、易用的使用环境2)2)应对激烈的竞争应对激烈的竞争3)3)应对信息结构的日益复杂应对信息结构的日益复杂4)4)传递正确的信息传递正确的信息以网站为例：以网站为例： 企业建立一个网站，是要传递信息。企业建立一个网站，是要传递信息。 企业不同，信息也不同。企业不同，信息也不同。 信息不同，网站的界面设计亦会不同。信息不同，网站的界面设计亦会不同。 劳力士手表的网站劳力士手表的网站可口

14、可乐的网站可口可乐的网站http:/ 1）一致性和必要的个性化）一致性和必要的个性化2 2）使用用户的语言）使用用户的语言3 3）用户记忆负担最小化）用户记忆负担最小化4 4）用户界面的功能性）用户界面的功能性5 5）容易理解）容易理解6 6）清楚的报错信息）清楚的报错信息7 7）快捷方式的组合）快捷方式的组合8 8）连续性）连续性9 9）方便退出）方便退出1010）帮助系统）帮助系统1 1）一致性和必要的个性化）一致性和必要的个性化 一致性一致性：OFFICEOFFICE软件风格一致，要有统一的软件风格一致，要有统一的字体字号、统一的色调、统一的提示用词、窗口字体字号、统一的色调、统一的提示

15、用词、窗口在统一的位置、按钮也在窗口的相同的位置。目在统一的位置、按钮也在窗口的相同的位置。目的是能够减少记忆量、减少出错概率而且能迅速的是能够减少记忆量、减少出错概率而且能迅速积累操作经验。积累操作经验。 个性化：个性化：在一致性下，适当突出该软件的在一致性下，适当突出该软件的“个性化个性化”，如，如PPTPPT中不同于中不同于word word 有自己的动画有自己的动画效果效果2 2）使用用户的语言）使用用户的语言 界面中要注意使用用户的语言，而不是设计界面中要注意使用用户的语言，而不是设计者的语言，最有效的方法：让数据说话，如询问者的语言，最有效的方法：让数据说话，如询问用户、用户投票等

16、。用户、用户投票等。 因此，用户使用系统的错误会降到最低。因此，用户使用系统的错误会降到最低。3 3）用户记忆负担最小化）用户记忆负担最小化 浏览信息比记忆更容易，在设计时一定浏览信息比记忆更容易，在设计时一定要考虑到减轻用户的记忆负担。要考虑到减轻用户的记忆负担。4 4）用户界面的功能性）用户界面的功能性 界面最基本的性能是界面最基本的性能是具有功能性与使用性，通具有功能性与使用性，通过界面设计，让用户明白过界面设计，让用户明白功能操作功能操作，并将，并将产品本身产品本身的信息的信息更加顺畅的传递给更加顺畅的传递给使用者，是功能界面存在使用者，是功能界面存在的基础与价值的基础与价值 用户界面

17、一定要有基用户界面一定要有基本的功能，设计者不能片本的功能，设计者不能片面追求界面外观漂亮而导面追求界面外观漂亮而导致华而不实。致华而不实。5 5）容易理解）容易理解 大多数的用户都有丰富的生活经验，也大多数的用户都有丰富的生活经验，也就是使用各种工具或者玩具的经验。如果能就是使用各种工具或者玩具的经验。如果能够在界面设计中把这些够在界面设计中把这些积累的生活经验积累的生活经验和和界界面视觉元素面视觉元素对应连接起来就会让用户更容易对应连接起来就会让用户更容易理解。理解。 如电子书界面，模拟翻书的设计可以很如电子书界面，模拟翻书的设计可以很快让用户理解如何操作，并且给读者熟悉的快让用户理解如何

18、操作，并且给读者熟悉的阅读体验。阅读体验。 6 6）清楚的报错信息）清楚的报错信息 错误操作后，系统应该提供有针对性错误操作后，系统应该提供有针对性的错误信息反馈提示，让用户心里有数。的错误信息反馈提示，让用户心里有数。7 7）快捷方式的组合）快捷方式的组合 在菜单及按钮中使用快捷键可以让用户在菜单及按钮中使用快捷键可以让用户操作的更加快捷因此在一些软件设计中会把操作的更加快捷因此在一些软件设计中会把的常用的功能用图标按钮的形式摆在工具条的常用的功能用图标按钮的形式摆在工具条上或用快捷键。上或用快捷键。 8 8）连续性）连续性 一个有序的连续一个有序的连续的界面能让用户轻松的界面能让用户轻松使

19、用。使用。 在排列和版面布局在排列和版面布局上要有序，是水平排上要有序，是水平排列还是垂直排列还是列还是垂直排列还是两者都有之。如两者都有之。如QQQQ界界面。面。 9 9）方便退出）方便退出 在界面的使用上要设计方便退出，提供不同在界面的使用上要设计方便退出，提供不同可能性，如手机的退出，是按一个键就可退出还可能性，如手机的退出，是按一个键就可退出还是一层一层的退出。是一层一层的退出。 10 10）帮助系统）帮助系统 它可以帮助用户更快捷、更好的学习界面的它可以帮助用户更快捷、更好的学习界面的使用，告诉用户在遇到某些使用问题时该如何处使用，告诉用户在遇到某些使用问题时该如何处理、减少用户在使

20、用中的挫折感。理、减少用户在使用中的挫折感。六、界面设计的工作流程六、界面设计的工作流程1 1）产品制作人，写产品计划书。）产品制作人，写产品计划书。 2 2）用户体验研究员，作调查分析。）用户体验研究员，作调查分析。 3 3）信息建构师，设计产品架构。）信息建构师，设计产品架构。 4 4）交互设计师，作出互动流程。）交互设计师，作出互动流程。 5 5）视觉设计师，作出页面视觉设计。）视觉设计师，作出页面视觉设计。 6 6）前台工程师，前台开发。）前台工程师，前台开发。 7 7）后台工程师，后台开发。）后台工程师，后台开发。 8 8）用户体验研究员，做用户测试确保质量。）用户体验研究员，做用户

21、测试确保质量。制作制作UIUI简单流程简单流程1.1.确认目标用户确认目标用户 在在UIUI设计过程中，需求设计角色会确定软设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。交互设计重点的不同。2.2.采集目标用户的习惯交互方式采集目标用户的习惯交互方式 不同类型的目标用户有不同的交互习惯。不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的

22、交互流程。现实的交互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。望达到的交互效果，并且以流程确认下来。3.3.提示和引导用户提示和引导用户 软件是用户的工具。因此应该由用户来操作和软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行下一步操作。息，引导用户进行下一步操作。 七、七、 软件界面的发展趋势软件界面的发展趋势 随着信息社会的发展，人们生活水平的提高随着信息社会的发展，人们生活水平的提高以及审美情趣的变化，各种新机器、新技术的日以及审美情趣的变化，各种新机器、新技术的日益涌现，对软件界面设计也