UI界面设计流程讲解.ppt

《UI界面设计流程讲解.ppt》由会员分享，可在线阅读，更多相关《UI界面设计流程讲解.ppt（61页珍藏版）》请在三一办公上搜索。

1、界 面 设 计,一、界面设计的概念,1、什么是界面设计？（难点）2、界面设计涉及的范围及学科3、界面设计的工作流程4、以用户为中心的界面设计原则(重点）参考书目：用户界面设计与制作交互设计UI进化论移动设备人机交互界面设计网络资料,通过什么控制电视机？,通过什么操作ATM机？,ATM 机,通过什么操作Photoshop程序？,通过什么操作手机？,一、界面设计的概念,1、什么是界面设计（UI）？界面UI即User Interface(用户界面)的简称。广义上来讲，UI界面是人与机器进行交互的操作平台，即用户与机器相互传递信息的媒介。,用户,机器,界面,概括成一句话就是人和机器之间的界面。这个界面

2、实际上是体现在我们生活中的每一个环节的，例如开车时候方向盘和仪表盘就是这个界面，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面。于是我们可以把UI可以分成两大类：硬件界面和软件界面。本文所关注的UI设计特指软件界面，我们也可以称为特殊的或者狭义的UI设计。,一、界面设计的概念,一、什么是界面设计？界面设计即User Interface Design（用户界面设计）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。,人机交互,操作逻辑,界面美观,一、界面设计的概念,问题一：界面设计=版式设计？谓版式设计，就是在版面上，将有限的视觉元素进行有机的排列组合界面设

3、计的内容包括：图形、文字、色彩、编排，使界面起到美化效果的作用。需要研究用户需求，研究目标用户。,问题二：界面设计=用户+界面？或者界面设计就是单单指界面美化设计？从字面上看，UI有用户与界面两个组成部分，但实际上还有还有用户与界面之间的交互关系。界面设计需要定位使用者、使用环境、使用方式。不仅仅是美化界面，还有需要研究用户、让界面变得更友好、更有趣、更易用、更舒适。,一、界面设计的概念,UI,用户,界面,=,+,交互,=,版式,考虑用户的心理需求，研究目标用户,前面讲到UI设计包括两方面美化和交互。让大家更了解UI设计的重要性从美化的角度看，UI优化后:1更有时尚感、层次感2.从QQ图像就能

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

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

6、计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。,一、界面设计的概念,三、界面设计涉及的范围及学科人机产品界面设计、移动设备界面设计、网页界面设计、软件界面设计界面设计是一种结合美学、计算机科学、心理学、行为学、人机工程学、信息学以及市场学等的综合性学科，强调人机环境三者作为一个系统进行总体设计。,一、界面设计的概念,四、界面设计的工作流程1）.产品制作人，写产品计划书。2）.用户体验研究员，作调查分析。3）.信息建构师，设计产品架构。4）.交互设计师，作出互动流程

7、。5）.视觉设计师，作出页面视觉设计。6）.前台工程师，前台开发。7）.后台工程师，后台开发。8）.用户体验研究员，做用户测试确保质量。,一、界面设计的概念,一、界面设计的概念,线框原型、黑白原型稿,一、界面设计的概念,产品原型,一、界面设计的概念,界面设计,5.UI设计与产品团队项目流程的关系,5.1产品团队产品经理:产品团队的老大，对用户需求进行细分调研，针对用户的需求进行产品卖点的规划，将规划陈述给公司高层，以此来争取项目，或者也叫PM（项目经理）的职责。用到软件PPT、isio等产品设计师:侧重功能设计，考虑技术可行性和性价比，有时也要做结构设计或交互设计等。用到软件AXURE 或WO

8、RD用户体验师:UE需要了解商业层面的内容，与PD配合，从商业价值的角度出发，对产品与用户交互方面的环节进行改良。挖掘用户的需求，对用户进行跟踪，调研，分析，做出相关的用户需求报告。心理学研究。ui 进行界面表现和美化，软件：PS/AI/FLASH,一、界面设计的概念,五、以用户为中心的界面设计原则1）、一致性和必要的个性化2）、使用用户的语言3）、用户记忆负担最小化4）、用户界面的功能性5）、容易理解6）、清楚的报错信息7）、快捷方式的组合8）、连续性9）、方便退出10）、帮助系统,一、界面设计的概念,1）、一致性和必要的个性化OFFICE 软件风格一致，要有统一的字体字号、统一的色调、统一

9、的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。目的是能够减少记忆量、减少出错概率而且能迅速积累操作经验。个性化。在一致性下，适当突出该软件的“个性化”如PPT中不同于word 有自己的动画效果,一、界面设计的概念,2）、使用用户的语言界面中要注意使用用户的语言，而不是设计者的语言，最有效的方法：让数据说话，如询问用户、用户投票等。因此，用户使用系统的错误会降到最低。,一、界面设计的概念,3）、用户记忆负担最小化浏览信息比记忆更容易，在设计时一定要考虑到减轻用户的记忆负担。,一、界面设计的概念,4）、用户界面的功能性界面最基本的性能是具有功能性与使用性，通过界面设计，让用户明白功能操作

10、，并将产品本身的信息更加顺畅的传递给使用者，是功能界面存在的基础与价值用户界面一定要有基本的功能，设计者不能片面追求界面外观漂亮而导致华而不实。,一、界面设计的概念,5）、容易理解大多数的用户都有丰富的生活经验，也就是使用各种工具或者玩具的经验。如果能够在界面设计中把这些积累的生活经验和界面视觉元素对应或这连接起来就会让用户更容易理解。如电子书界面，模拟翻书的设计可以很快让用户理解如何操作，并且给读者熟悉的阅读体验。,6）、清楚的报错信息错误操作后，系统应该提供有针对性的错误信息反馈提示，让用户心里有数。,7）、快捷方式的组合在菜单及按钮中使用快捷键可以让用户操作的更加快捷因此在一些软件设计中

11、会把的常用的功能用图标按钮的形式摆在工具条上或用快捷件。如在犀牛软件中按住中间滚轮就能弹出常用的功能键或者在CAD软件中每个常用工具都会有个相应的英文快捷键。直线工具：L(line),8）、连续性一个有序的连续的界面能让用户轻松使用。在排列和版面布局上要有序，是水平排列还是垂直排列还是两者都有之。如QQ界面。,9）、方便退出在界面的使用上要设计方便退出，提供不同可能性，如手机的退出，是按一个键就可退出还是一层一层的退出。10）、帮助系统它可以帮助用户更快捷、更好的学习界面的使用，告诉用户在遇到某些使用问题时该如何处理、减少用户在使用中的挫折感。,一、界面设计的概念,六、界面设计的常用软件Pho

12、toshop、Illustrator、Flash、3ds Max、其他软件：Xara Xtreme绘制图标，是英国矢量图形软件公司Xara开发的老牌图像设计软件，被誉为“世界上速度最快的绘图软件”，用来绘图、处理图像、制作Web图形等。Axialis Icon Workshop是功能强大的、专门制作图标的编辑软件。,一、界面设计的概念,6、界面设计的常用软件：Xara Xtreme,一、界面设计的概念,6、界面设计的常用软件：Axialis Icon Workshop,总的来讲本课内容主要讲了什么是UI？ui是做什么的？怎样做UI?,三、图标制作,三、图标制作,1、图标设计的意义1）、视觉设计

13、的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解3）、使产品的人机界面更具有吸引力，富含娱乐性4）、形成产品的统一特征，给用户以信赖感，便于功能的记忆5）、创造差异化、个性化的美，强化装饰性作用6）、图标设计是一种艺术创作、能提高产品的品味7）、图标设计的表现方式灵活自由、可以传达不同的产品理念8）、图标设计是在屏幕上展示产品的最佳方式,三、图标制作,1、图标设计的意义1）、视觉设计的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解,三、图标制作,1、图标设计的意义3）、使产品的人机界面更具有吸引力，富含娱乐性,三、图标制作,1、图标设计的意义6）、图标设计是

14、一种艺术创作、能提高产品的品味,三、图标制作,1、图标设计的意义6）、图标设计是一种艺术创作、能提高产品的品味,三、图标制作,1、图标设计的意义7）、图标设计的表现方式灵活自由、可以传达不同的产品理念,三、图标制作,1、图标设计的意义8）、图标设计是在屏幕上展示产品的最佳方式,三、图标制作,2、图标设计的原则1）、精美、直观、生动的图标,三、图标制作,2、图标设计的原则1）、精美、直观、生动的图标,三、图标制作,2、图标设计的原则2）、图标的唯一性准确、易识别、易理解,三、图标制作,2、图标设计的原则3）、系列图标风格统一、整体性强,三、图标制作,2、图标设计的原则4）、主题文化性,三、图标制作,3、图标设计的规格图标文件的类型：.ico文件，图标文件大都是.ico格式图标的一般尺寸：16x16像素、32x32像素、48x48像素、64x64像素、96x96像素、256x256像素,三、图标制作,4、图标设计的流程1）、图标创意阶段看懂界面需求，对每个图标的定义要准确清楚。,三、图标制作,4、图标设计的流程2）、草图绘制阶段统一图标风格、统一透视,三、图标制作,4、图标设计的流程3）、草图渲染阶段一般使用Photoshop、Illustrator、Firework、Xara Xtreme pro等软件,三、图标制作,三、图标制作,谢谢！,