UI设计解析-ppt课件.ppt

1、1ppt课件UI设计概述2ppt课件UI的本意是用户界面，是英文User和 Interface的缩写。从字面上看是用户与界面2个部分组成，但实际上还包括用户与界面之间的交互关系。所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。UIUI的定义的定义界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。3ppt课件对于交互设计再一次的巨大推动是互联网

2、的出现，互联网从20世纪90年代改变了人们的生活。如果没有互联网，个人计算机只能永远是“工具”，而不会成为“玩具”。丰富的互联网通过界面交互设计给人们提供了无数种可能，也给计算机赋予了无数个面貌。它可能是一个集市，例如亚马逊和淘宝，也可能是和朋友交流的平台，就像facebook或者开心网，也可能是新闻报纸或者广播。例如CNN.这么多的可能性推动着交互设计的快速发展。推动交互设计大踏步向前发展的是个人电脑的流行。在20世纪80年代，个人电脑的发展推动了图形界面的大行其道。图形界面即GUI（Graphic User Interface），这一界面模式真正商业化是苹果的lisa及Macintish系

3、统，同时代也出现了大批的基于GUI的操作系统，包括微软的Windows.GUI的出现让人与计算机的交互过程变得丰富而有趣起来，这一模式也成为以后二十多年界面交互设计的主流交互设计的发展历程交互设计的发展历程4ppt课件5ppt课件交互设计的发展历程交互设计的发展历程在目前这个“手机皆智能”的时代，人们当初从桌面PC互联网那里得到的新鲜感又来到了手掌中。苹果的Iphone让智能手机的操作系统摆脱了桌面PC的模式，形成了独特的一套系统ios,结合灵敏的触摸屏幕，让掌中设备的用户体验提高到了新的级别。另一种流行的移动操作系统Andriod也给用户提供了丰富多彩的移动应用。微电子与传感器的发展拓宽了交

4、互设计的领域，交互设计师不必再拘泥于屏幕之上进行设计。TUI(实体界面)、物联网和普适计算机等概念让交互设计的空间扩充到生活中的每个角落，想象一下，超市里每个商品都能显示自身的信息；带有界面的办公桌可以让你忘掉计算机这样的老古董；发送邮件只需要在屏幕墙面前挥几下手。这样的设计对象对于交互设计师来讲是个巨大的挑战。6ppt课件7ppt课件8ppt课件9ppt课件10ppt课件界面设计的基本视觉原则界面设计的基本视觉原则11ppt课件基本视觉原则基本视觉原则文本内容的位置，可以让其边缘按照普通的行或列对齐，或者让其主体按照一个中心点排列。视觉元素应该以一个或者多个药店对齐，这样能创造出一致性与相符

5、性，增加设计的整体美感，使人觉得清新舒适。“对齐”也可以带领人去认识一项设计的强大工具。1、对齐12ppt课件13ppt课件在分段的文本中，相对于中间对齐的文本格式，左对齐和右对齐的格式有更强烈的对齐暗示。比起其他对齐方式，左对齐和右对齐的文本格式，能够创作出无形的列，呈现出一种清新的视觉暗示。相反，中间对齐的文本格式，视觉上的对齐暗示就很模糊，各个要点之间的并列关系不够清楚。“对齐”能够创造更整齐的版式，让信息传达更加快捷1、对齐界面设计的基本视觉原则界面设计的基本视觉原则14ppt课件15ppt课件16ppt课件界面设计的基本视觉原则界面设计的基本视觉原则在一切大系统中，大约80%的效果是

6、由20%的变量造成的。一切的大系统。包括经济、管理、用户界面、品质监控和工程。例如 80%的产品，只使用20%的功能； 80%的受益，来自于20%的产品； 80%的进步，来自于20%的努力。 2、80/20法则80/20法则，对集中资源有很大的帮助。它可以提高设计效率。比如，一个产品，设计师用的是它关键的20%的功能，那么设计师就应该把80%的时间、设计和测试资源都用在这些功能上面。设计中的元素是有主次之分的。设计师可以利用80/20法则来评估系统元素之间的价值，并做出更加优化的决策。17ppt课件18ppt课件19ppt课件界面设计的基本视觉原则界面设计的基本视觉原则“容易使用”法则设计应该

7、不需要特别的适应或改变，就可以给不同能力的人使用。即：感官性、操作性、简易型、回旋性。 3、容易使用1.感官性，就是要每个人，不管他具有怎样的感官能力，都能理解这个设计。提高感官性的基本方法是：用重复编码的方式给出信息；使其他感官技术预制兼容，提供协助；控制板与信息的位置设置要让站立坐着的人都容易使用。2.操作性，就是每个人，不论身体状况如何，都可以使用。提高操作性的基本方法：最大限度地减少重复操作，减少体力消耗；通过把正确操作设置得明白易懂、把错误操作设置为无效，使控制更加容易；使与其他操作方式兼容以便协助；控制板与信息的位置设置要让站立、坐着的人都容易使用。20ppt课件21ppt课件界面

8、设计的基本视觉原则界面设计的基本视觉原则人们往往会认为美观的设计更实用。许多实验都证实了这个效应，这对于设计的接受、使用和表现具有重要的启示。4、美观实用效应好用但不美观的设计，往往接受度不高，也就谈不到是否实用了。这些偏见及其带来的一系列后续反应时很难改变的。美学在设计使用上起到重要作用。美观的设计更能促进正面态度的形成，而且人们会更愿意容忍美观设计的缺陷。设计师要永远追求美观的设计。人们认为美观的设计更常用到。美观的设计能够激发创意、解决问题、促进人与设计建立正面关系，使人更能容忍设计的缺陷。22ppt课件23ppt课件24ppt课件25ppt课件界面设计的基本视觉原则界面设计的基本视觉原

9、则这一原则是预设用途在视觉设计中的体现。物品或环境的某些功能比其他功能更具有可见性。比如圆的轮子比方的更容易滚动，因此滚动体现了圆形轮子的功能可见性。5、功能可见性普通常见的物用在界面设计当中，可以暗示与现实一样的操作。例如凸起立体的按钮暗示人们可以点击，这与设计师印象中实际的按钮时一致的。电脑操作系统以及一些硬件系统中经常使用现实中常见的物件来完成对概念的传达。设置图标，借用了机械内部的齿轮，来表现对产品内部的管理；文件夹，借用了现实中的文件夹；垃圾桶更加写实；扫描热点，表明能够通过该功能发现网络接入；时间借用了钟表的外观；电量借用了电池等等。界面设计的基本视觉原则界面设计的基本视觉原则5、

10、功能可见性26ppt课件27ppt课件界面设计的基本视觉原则界面设计的基本视觉原则设计软件的工具栏图标设计也使用了“功能可见性”原则。字体、橡皮擦、拖拽、吸管、放大、修补。大部分工具表意非常直接，即使是初学者也能马上理解和使用。5、功能可见性28ppt课件界面设计的基本视觉原则界面设计的基本视觉原则在移动APP的启动图标设计中，表意也非常重要。用户需要通过启动图标第一时间传达应用服务，当然有些公司是用启动图标来传达品牌。5、功能可见性29ppt课件界面设计的基本视觉原则界面设计的基本视觉原则条件反射经常用于训练动物，但是也可以用来营销与广告。在产品界面设计上使用条件反射原则，例如把产品或服务与

11、吸引人的影响或者味道联系起来。6、条件反射30ppt课件31ppt课件32ppt课件在专题网站设计中，利用素材来营造氛围非常重要。33ppt课件最近流行的拟物化设计也是利用条件反射的原则，营造出现实中的真实场景，拉近了用户在现实中的感受。34ppt课件界面设计的基本视觉原则界面设计的基本视觉原则颜色能赋予设计更多的视觉乐趣和美感，并且可以加强设计元素的组织和意义。如果用的不好，颜色也会严重损害设计的外形和功能。7、颜色使用颜色的数目要尽可能的少。一个设计作品，一眼扫过去，所能接受的颜色数目要尽可能的少，因为大多数人的颜色视觉是有限的，不要把颜色当做信息表达的唯一途径。为使颜色达到美观，可以利用

12、色环上的相似色、辅色、和大自然中的色彩组合。通常，运用去饱和色、明亮的色彩，会使人感觉友善而专业。35ppt课件36ppt课件37ppt课件38ppt课件39ppt课件视觉关系原则视觉关系原则设计中要把图形和背景区分清楚，以便让焦点集中、尽量避免认知混乱。1、图形与背景的关系40ppt课件41ppt课件视觉关系原则视觉关系原则对于用户体现来说，在一个系统中，相似的部分使用相似的办法是对用户使用习惯的尊重和再利用，能够让用户更好的学习，减少用户学习的成本。“一致性”可以让人高效的把知识转到新背景，更快的学习新事物，并且关注到工作的相关方面。一致性分为：美观、功能、内部和外部。2、一致性美观的一致

13、性指的是风格、外观的统一。如公司的标识使用一致的字体、颜色和图案，美观一致性会加强辨识度，强化统一性，增强品牌影响力，建立情感上的期待。42ppt课件43ppt课件44ppt课件视觉关系原则视觉关系原则强调的做法是与大部分保持差异。也就是这个设计的少数地方做了差异化设计，使得要强调的元素与其他或者背景都不一样。3、强调颜色是强调的常用手段，但切忌不要滥用，否则用户的作品就会五颜六色，用户根本不知道该看哪个地方。如果在一个页面中，放置动态广告banner，那么人们会下意识关注。让元素在两种状态中来回闪烁，是吸引注意力的强有力办法。使用这种办法的技巧是，闪烁限制在重要的信息。45ppt课件46pp

14、t课件47ppt课件视觉关系原则视觉关系原则图像符号是利用图像，来诠释展现要表达的行为、物体和概念，使之更容易发现、辨认、学习和记忆。图像符帮助降低设计效能负载、节省显示区域与控制区域、让标识与控制在各文化中都能容易理解。4、图像符号（1）相似符号：利用视觉上的相似图像，指出行为、物体或者概念。这种图像表示的方法最为有效。（2）举例符号：用经常与行为、物体或者概念相关的实物图像为例。这种手法可以表现复杂的行为、物体或者概念。48ppt课件49ppt课件视觉关系原则视觉关系原则4、图像符号（3）象征符号：象征符号是用图像代表抽象的行为、物体或者概念。如果行为、物体或概念与常见的、容易辨认的物体有

15、关，采用象征符号最为有效。象征符号与举例符号的区别在于，前者不会在操作中用到，后者的图形是在实际中出现、并被用到的。（3）强制符号：强制符号就是用与行为、物体或概念无关的图像来表达，必须通过学习才能了解。一般来说，强制符号只能用在跨文化交流或长期使用的得行业标准上。图像符号在UI界面设计当中尤为重要，它可以让界面流出更多的空间给信息，让界面更容易操作。50ppt课件51ppt课件52ppt课件视觉关系原则视觉关系原则5、干扰效应当两种或者两种以上的感官或认知过程发生冲突的时候，就会产生干扰效应。设计过程中要以预防干扰，避免思维冲突。53ppt课件54ppt课件视觉关系原则视觉关系原则6、沉浸沉浸的情况发生在很多场合，比如工作中、作画中、看书中、电影院播放电影中等等。在某些产品的设计当中，适当的营造沉浸效果有利于用户体验。55ppt课件56ppt课件57ppt课件视觉关系原则视觉关系原则7、映射映射反映了两者之间的联系和关系。如果能够很好地建立两者的关系，则将有利于用户的操作和使用。好的映射主要是设计、行为、意义中的相似性功能。例如方向盘控制车的左右转属于行为相似性。因为相似的控制与效果和人的预期一致，则很容易使用。58ppt课件59ppt课件60ppt课件