UI设计界面设计.ppt

《UI设计界面设计.ppt》由会员分享，可在线阅读，更多相关《UI设计界面设计.ppt（62页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、User Interface Design 一、界面设计的概念一、界面设计的概念1、什么是界面设计？（难点）2、界面设计涉及的范围及学科3、界面设计的工作流程4、以用户为中心的界面设计原则(重点）参考书目：用户界面设计与制作交互设计UI进化论移动设备人机交互界面设计网络资料User Interface Design 通过什么控制电视机？User Interface Design 通过什么操作ATM机？ATM 机User Interface Design 通过什么操作Photoshop程序？User Interface Design 通过什么操作手机？User Interface Design

2、一、界面设计的概念一、界面设计的概念1、什么是界面设计（UI）？界面UI即User Interface(用户界面)的简称。广义上来讲，UI界面是人与机器进行交互的操作平台，即用户与机器相互传递信息的媒介媒介。用户机器界面User Interface Design 概括成一句话就是人和机器之间的界面。这个界面实际上是体现在我们生活中的每一个环节的， 例如开车时候方向盘和仪表盘就是这个界面 ，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘 和显示器就是这个界面。 于是我们可以把UI可以分成两大类：硬件界面和软件界面。本文所关注的UI设计特指软件界面，我们也可以称为特殊的或者狭义的UI设计。

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

4、界面设计就是单单指界面美化设计？从字面上看，UI有用户与界面两个组成部分，但实际上还有还有用户与界面之间的交互关系。界面设计需要定位使用者、使用环境、使用方式。不仅仅是美化界面，还有需要研究用户、让界面变得更友好、更有趣、更易用、更舒适。User Interface Design 一、界面设计的概念一、界面设计的概念UI用户界面=+交互=版式考虑用户的心理需求，研究目标用户User Interface Design 前面讲到UI设计包括两方面美化和交互。让大家更了解UI设计的重要性从美化的角度看，UI优化后:1更有时尚感、层次感2.从QQ图像就能知道是QQ的登入界面，更直观、形象。从交互的角度

5、，未UI优化的界面：1.功能过于简单2.登入没有体现按钮的特点，而不会单击3.密码输入框也没有做掩密处理，被盗号的风险系数增加User Interface Design 二.ui设计是做什么的？ UI设计从工作内容上来说分为3个方向。图 它主要是由UI 研究的3个因素决定的， 其分别是研究界面，研究人与界面的关系，研究人 。1.研究界面-图形设计师国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。2.研究人与界面

6、的关系-交互设计师 在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。User Interface Design 3.研究人-用户测试/研究工程师 任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，

7、如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。 综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。User Interface Design 一、界面设计的概念一、界面设计的概念三、界面设计涉及的范围及学科人机产品界面设计、移动设备界面设计、网页界面设计、软件界面设计界面设计是一种结合美学、计算机科学、心理学、行为学、人机工程学、信息学以及市场学等的综合性学科，强调人机环境三者作为一个系统进行总体设计。 User Interface Design 一、界面设计的概念一、界

8、面设计的概念四、界面设计的工作流程1）. 产品制作人，写产品计划书。 2）. 用户体验研究员，作调查分析。 3）. 信息建构师，设计产品架构。 4）. 交互设计师，作出互动流程。 5）. 视觉设计师，作出页面视觉设计。 6）. 前台工程师，前台开发。 7）. 后台工程师，后台开发。 8）. 用户体验研究员，做用户测试确保质量。User Interface Design 一、界面设计的概念一、界面设计的概念User Interface Design 一、界面设计的概念一、界面设计的概念线线框原型、黑白原型稿框原型、黑白原型稿User Interface Design 一、界面设计的概念一、界面设

9、计的概念产产品原型品原型User Interface Design 一、界面设计的概念一、界面设计的概念界面界面设计设计5.UI设计与产品团队项目流程的关系5.1产品团队产品经理:产品团队的老大，对用户需求进行细分调研，针对用户的需求进行产品卖点的规划，将规划陈述给公司高层，以此来争取项目，或者也叫PM（项目经理）的职责。用到软件PPT、isio等产品设计师:侧重功能设计，考虑技术可行性和性价比，有时也要做结构设计或交互设计等。用到软件AXURE 或WORD用户体验师:UE需要了解商业层面的内容，与PD配合，从商业价值的角度出发，对产品与用户交互方面的环节进行改良。挖掘用户的需求，对用户进行跟

10、踪，调研，分析，做出相关的用户需求报告。心理学研究。ui 进行界面表现和美化，软件：PS/ AI/FLASHUser Interface Design 一、界面设计的概念一、界面设计的概念五、以用户为中心的界面设计原则1）、一致性和必要的个性化2）、使用用户的语言3）、用户记忆负担最小化4）、用户界面的功能性5）、容易理解6）、清楚的报错信息7）、快捷方式的组合8）、连续性9）、方便退出10）、帮助系统User Interface Design 一、界面设计的概念一、界面设计的概念1）、一致性和必要的个性化OFFICE OFFICE 软软件件风风格一致格一致 ，要有统一的字体字号、统一的色调、

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

12、nterface Design 一、界面设计的概念一、界面设计的概念3）、用户记忆负担最小化浏览信息比记忆更容易，在设计时一定要考虑到减轻用户的记忆负担。User Interface Design 一、界面设计的概念一、界面设计的概念4）、用户界面的功能性界面最基本的性能是具有功能性与使用性，通过界面设计，让用户明白功能操作，并将产品本身的信息更加顺畅的传递给使用者，是功能界面存在的基础与价值用户界面一定要有基本的功能，设计者不能片面追求界面外观漂亮而导致华而不实。User Interface Design 一、界面设计的概念一、界面设计的概念5）、容易理解大多数的用户都有丰富的生活经验，也就

13、是使用各种工具或者玩具的经验。如果能够在界面设计中把这些积累的生活经验和界面视觉元素对应或这连接起来就会让用户更容易理解。如电子书界面，模拟翻书的设计可以很快让用户理解如何操作，并且给读者熟悉的阅读体验。User Interface Design 6）、清楚的报错信息错误操作后，系统应该提供有针对性的错误信息反馈提示，让用户心里有数。User Interface Design 7）、快捷方式的组合 在菜单及按钮中使用快捷键可以让用户操作的更加快捷因此在一些软件设计中会把的常用的功能用图标按钮的形式摆在工具条上或用快捷件。 如在犀牛软件中按住中间滚轮就能弹出常用的功能键或者在CAD软件中每个常用

14、工具都会有个相应的英文快捷键。直线工具：L(line)User Interface Design 8）、连续性 一个有序的连续的界面能让用户轻松使用。在排列和版面布局上要有序，是水平排列还是垂直排列还是两者都有之。如QQ界面。User Interface Design 9）、方便退出在界面的使用上要设计方便退出，提供不同可能性，如手机的退出，是按一个键就可退出还是一层一层的退出。 10）、帮助系统 它可以帮助用户更快捷、更好的学习界面的使用，告诉用户在遇到某些使用问题时该如何处理、减少用户在使用中的挫折感。User Interface Design 一、界面设计的概念一、界面设计的概念六、界面

15、设计的常用软件Photoshop、Illustrator、Flash、3ds Max、其他软件：Xara Xtreme绘制图标，是英国矢量图形软件公司Xara开发的老牌图像设计软件，被誉为“世界上速度最快的绘图软件”，用来绘图、处理图像、制作Web图形等。Axialis Icon Workshop是功能强大的、专门制作图标的编辑软件。User Interface Design 一、界面设计的概念一、界面设计的概念6、界面设计的常用软件：Xara XtremeUser Interface Design 一、界面设计的概念一、界面设计的概念6、界面设计的常用软件：Axialis Icon Work

16、shopUser Interface Design 总的来讲本课内容主要讲了什么是UI？ui是做什么的？怎样做UI?User Interface Design 三、图标制作三、图标制作User Interface Design 三、图标制作三、图标制作1、图标设计的意义1）、视觉设计的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解3）、使产品的人机界面更具有吸引力，富含娱乐性4）、形成产品的统一特征，给用户以信赖感，便于功能的记忆5）、创造差异化、个性化的美，强化装饰性作用6）、图标设计是一种艺术创作、能提高产品的品味7）、图标设计的表现方式灵活自由、可以传达不同的产品理念8

17、）、图标设计是在屏幕上展示产品的最佳方式User Interface Design 三、图标制作三、图标制作1、图标设计的意义1）、视觉设计的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解User Interface Design 三、图标制作三、图标制作1、图标设计的意义3）、使产品的人机界面更具有吸引力，富含娱乐性User Interface Design 三、图标制作三、图标制作1、图标设计的意义6）、图标设计是一种艺术创作、能提高产品的品味User Interface Design 三、图标制作三、图标制作1、图标设计的意义6）、图标设计是一种艺术创作、能提高产品的品

18、味User Interface Design 三、图标制作三、图标制作1、图标设计的意义7）、图标设计的表现方式灵活自由、可以传达不同的产品理念User Interface Design User Interface Design User Interface Design 三、图标制作三、图标制作1、图标设计的意义8）、图标设计是在屏幕上展示产品的最佳方式User Interface Design 三、图标制作三、图标制作2、图标设计的原则1）、精美、直观、生动的图标User Interface Design 三、图标制作三、图标制作2、图标设计的原则1）、精美、直观、生动的图标User I

19、nterface Design 三、图标制作三、图标制作2、图标设计的原则2）、图标的唯一性准确、易识别、易理解User Interface Design 三、图标制作三、图标制作2、图标设计的原则3）、系列图标风格统一、整体性强User Interface Design User Interface Design User Interface Design 三、图标制作三、图标制作2、图标设计的原则4）、主题文化性User Interface Design 三、图标制作三、图标制作3、图标设计的规格图标文件的类型：.ico文件，图标文件大都是.ico格式图标的一般尺寸：16x16像素、32x

20、32像素、48x48像素、64x64像素、96x96像素、256x256像素User Interface Design User Interface Design 三、图标制作三、图标制作4、图标设计的流程1）、图标创意阶段看懂界面需求，对每个图标的定义要准确清楚。User Interface Design 三、图标制作三、图标制作4、图标设计的流程2）、草图绘制阶段统一图标风格、统一透视User Interface Design 三、图标制作三、图标制作4、图标设计的流程3）、草图渲染阶段一般使用Photoshop、Illustrator、Firework、Xara Xtreme pro等软件User Interface Design 三、图标制作三、图标制作User Interface Design 三、图标制作三、图标制作User Interface Design 谢谢！谢谢！