多媒体界面设计ppt课件.ppt

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

1、多媒体界面设计 近几年，有一个新兴的词在设计领域诞生，这个词就是“UI”。在短短的几年里UI设计师越来越多，设立UI部门的企业越来普遍，各大院校也出现了和UI相关的专业，UI 设计的组织和网站层出不穷。这一切都预示着一个“UI”大时代已经到来。到底什么叫UI设计，什么是UI设计师，UI设计师负责什么，UI设计师的知识背景是什么，什么样的企业需要UI设计部门，UI 设计和ID设计的关系是什么，UI设计的发展现状是什么，UI设计的将来的是什么？我想很多人都会对这些问题感兴趣。在本文我以一个一线UI设计师的视角解析这个行业，这个领域。什么叫什么叫UIUI设计设计 UI的本意是用户界面(user in

2、terface)，概括成一句话就是人和工具之间的界面。这个界面实际上是体现在我们生活中的每一个环节的，例如我们切菜的时候刀把手就是这个界面，开车时候方向盘和仪表盘就是这个界面，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面。于是我们可以把UI可以分成两大类：硬件界面和软件界面。本文所关注的UI设计特指软件界面，我们也可以称为特殊的或者狭义的UI设计。UIUI设计师是做什是做什么么的，背景是什的，背景是什么么 UI设计从工作内容上来说分为3个方向。图 它主要是由UI 研究的3个因素决定的，其分别是研究工具，研究人与界面的关系，研究人。(图中：蓝色代表工具，红色代表关系

3、，绿色代表人)研究界面-图形设计师图形设计师 国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。研究人与界面的关系-交互设计师交互设计师 在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人-用户测试用户测

4、试/研究工程师研究工程师 任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。UIUI设计的的发展展阶段段 市场经济需要竞争，竞争就会需要设计来提高产品竞争力。2000年以前国内的UI设

5、计刚开始萌芽，但当时做UI等于做平面设计,基本也体现在网页设计上，后来随着flash的流行，一部分美术设计师开始去思考互动性。到了2002年一些企业开始重视到UI设计的重要性，纷纷把 UI部门从软件编码团队里提出来，开始有了专门针对软件产品的图形设计师和交互设计师。2004年以后随着手机，电脑附加软件，MP3等大量产品上市，ID设计就和UI设计越来越紧密了，UI设计也开始被提升到一个新的高度和重视程度。2005年国内的UI设计已经相对成熟了，有了专门的职业分工也出现了很多不错的UI一线设计师与UI设计交流组织。什么样的企业需要什么样的企业需要UIUI设计部门设计部门 随着“UI”热的到来，近几

6、年国内很多从事手机，软件，网站，增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计的公司也应运而生。软件UI设计师的待遇和地位也逐渐上升。软件软件UIUI设计的将来设计的将来 软件UI 设计应该属于ID(工业产品设计)的一个特殊形式，只是针对的材质有所不同。但随着智能化电子产品的普及，带有液晶屏显示的产品将越来越多。也就意味着越来越多的产品设计需要软件UI设计。随着科技的发展，不久的将来所有的产品会组成一体，变成一个无处不在的电脑，这个电脑控制着用户的所有家用产品和资料。用户只要有自己的一个账号，就可以通过任何一个产品来控制所有其它产品，而所有的产品都具有终端的功能。而这个终端操作

7、的基本形式就是软件的UI设计。产品设计由物质设计向非物质设计转变已经开始了，而且必将成为未来产品设计的主流，一个UI大时代即将到来。巧妙性设计之巧妙性设计之UIUI按钮设计方法论按钮设计方法论 一个漂亮的按钮，我们要看他的表现方式、形态、质感是否符合整个界面所要传达的整体风格是值得每一个设计师去重视的。随着网络媒体的发展。各行各业都在网络媒体上来展示自己，也相继出现了许多行业界面，那么这些界面的设计风格肯定不会千篇一律，那么涉及到的按钮设计也是各有风格的。“艺术来源于模仿”，“设计来源于生活”。在画按钮的时候主要从生活中发现自己需要的元素。首先，我们知道按钮在效果表现上很大一部分我们是从质感的

8、表现上来识别的，比如我们最常见VISTA风格的按钮就是从玻璃质感上变现。大家可以看我找的玻璃瓶素材，很明显就能看出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多是从这三方面出发。实例分析：玻璃瓶素材 A按钮是完全按照玻璃瓶质感的方式来画的 B按钮是经过对光规律的观察而总结出的自己想要表现方式的一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。这样也便于界面制作人员的制作。下面一种是我们经常所见的苹果风格的按钮设计，这种风格的按钮也是我们在生活中经常能见到的，键盘手机就经常采用这种设计方式，但是随着触摸屏手持设备的普遍，绝大数的键

9、盘界面都采用模仿原来手机实物键盘的设计方式，这样是为了让用户对界面产生亲切感，同时这样的设计也看起来更加简洁美观。键盘素材 C按钮是参照键盘的质感做的样稿 D按钮是选择了同一色相不同明度和纯度所做的按钮，之所以列举这个列子，是为了说明我们在做这种风格的按钮设计的时候，一定要把握住一个很重要的问题，那就是一定是在同一种色相中拉渐变，这样的按钮效果才自然，当然除了设计师追求一些不一样的效果。从这张色谱，大家可以看出色相的微妙关系。有利于我们做渐变类型的按钮 E按钮就是我采用的45度角径向渐变的按钮，是为了说明渐变方式不同最后按钮的最后出现的效果也会不同，就这一点我们设计师可以设计出很多不同形式的按

10、钮。其它的我会根据我生活中的观察来和大家分享一些生活中的按钮设计，如图所示这个按钮设计是我仿常见的复印机上面的按钮来设计的，这种按钮的设计方法也很简单，但是效果很好。同时也加强了用户对界面的亲切感，更加有利于用户的使用。如下图：下面这个按钮是我们常见的开关按钮，我只是按照开关的样式，粗糙的画了一个实例，为的就是说明其实在做按钮设计的时候我们参考的实物是很多的，多观察周围的实物往往会得到一些意想不到的收获，并且我们还可以通过简单的艺术效果处理得到不同的按钮效果。如下图：界面设计师在做界面设计的时候应该多观察生活中看到的物品，这些都能给界面设计师很大的启发。本例中我们利用photoshop设计制作

11、一款漂亮的MP3播放器界面，教程主要是练习我们的设计技巧和基本功，大家可以练习一下。好习惯：在新填充颜色前新建一层，命名要有意义，把相同的东西放在同一组里，这样就不会乱并且容易修改了。教程中的参数仅供参考，你可以自己灵活的调整，发挥自己的想像力，做出更好更漂亮的效果。1：创建一600*600的文件2：用圆角矩形工具画一见P的矩形并填充成黑色：3：给矩形加上图层样式 4：渐变条的设定 5：做完后的图效果 6：创建一层再用圆角矩形工具画一见P的矩形并填充成黑色 7：再用矩形选区画一见P的选区并删除 8：给图层加上图层样式 9：渐变条设定 10：运行完的效果 11：用魔术棒选取选区 12：将选区填充

12、成黑色并运行描边 13：创建一层做下方按钮的背景.用圆角矩形工具画一矩形填充成黑色 14：给创建的层加上图层样式 15：留意渐变条的设定 16：效果见图 17：创建一层，画一很2-4像素的宽的白色矩形 18：加上图层样式：(请留意)19：渐变条的设定：20：在来一描边 21：拷贝刚才做的那个白色间隔条(当然加上图层样式后就不是白色了)6个，并成见P地方 22：创建一层给这个按钮背景加个高光，用矩形工具画一见P的矩形 23：调整图层模式为叠加，不透明度为：78%24：做到这儿的效果见P 25：创建一层，载入刚才第7部操作的那个图层，进入选区，按照ALT键减选一部分 26：填充成白色，将不透明度改

13、成25%27：此时来画按钮，创建一层，用多边形套索工具画一三角形，填充成白色 28：提高图层样式(渐变叠加)，这儿看看渐变条的设定 29：加上图层样式(描边)，留意是渐变描边 30：描边渐变条的设定 31：效果见图 32：按ctrl+r将标尺调出来，好对齐,创建一层画个相同的矩形，填充白色，并将刚才播放按钮的图层样式复制粘贴到暂停按钮中来 33：之后分别做出，停止.快退.快进34：之后创建一层做屏幕中的时间条，这儿可自由发挥 35：按CTRL+刚才的时间条层，载入选区，按ALT减选一部分，创建一层并填充白色 36：复制刚才快进层的图层样式粘贴到刚才白色的图层中 37：将图层模式的描边去掉 38

14、：给蓝色的时间层做高光，这个可载入蓝色层填充成白色，调整不透明的，之后朝下拖动，删除多余的，效果见P 39：创建一层，做时间轴上方的按钮：40：加上图层样式(渐变叠加)，留意渐变条的设定 41：在加上一描边 42：在给时间轴上方的按钮做个高光，手法就同上方给蓝色条做相同的 43：将刚才做的播放时间的图层添加到一组里 44：拷贝刚才这个组，并调节地方 45：到这儿做完的几乎了，后面给屏幕里面加上一点文字，这儿就可自由发挥了，之后吧2-45步全部加上的一组里，做个倒影的效果，加个蒙版 界面设计技巧界面设计技巧 最好的程序界面就是用户无需去阅读擦操作手册就知道该如何 使用的界面。原则：1.一致性 如

15、果你可以在一个列表的项目上双击后能够弹出对话框，那么应该在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。2.设置标准并遵循它 可以参数一些工业标准，如IBM的界面设计规范或MS的设计规则，它提供了90你所需要的规范。3.设置向导 如果用户使用了一个功能后，不知道如何做下一个，他们就会放弃。如果工作流程和手工工作流程一致，用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。4.提示信息必须恰当且规范 提示信息必须容易理解并且口径统一，比如“您输入了错误的数据”、“用户编码不能超过8位”。一致的措词，提

16、示信息还应该出现在一致的位置，如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一，比如有时提示“用户输入了错误的数据”，有时提示“您输入了错误的数据”，有时又提示“纳税人输入了错误的数据”，这样会使用户无所适从。5.借鉴好的程序 多了解同类软件的界面，并加以分析与了解，直到能够区别好的用户界面与差的用户界面。但不能够机械的模仿别人的界面。6.变灰的功能 有时有些功能不可用，最好不要删除这些按钮若项目，而是使他们变灰为不可用状态，这样有助于用户理解整个程序的功能。界面设计禁忌界面设计禁忌 基本原则：1、关注用户及其任务，而不是技术2、首先考虑功能，然后才是表示3、从用户的视角看问题，使

17、用用户的词汇进行描述4、不要向用户暴露实现细节5、使常用的用户任务简单化，不要让用户解决额外的问题6、保持一致性，引导用户的使用习惯7、保持显示惯性，传递信息，而不仅仅是数据8、设计应满足响应需求禁忌：1、同一页面包含重复功能的链接或按钮2、将复选框用作单选按钮3、无初始值的多选一设置4、在非开/关设置中使用复选框5、用文本框显示只读数据6、单选按钮之间间隔太大7、属性标记对齐方式不一致8、当前无效的控件不充分置灰9、显示对用户无意义的错误提示10、不同的类型页面窗口显示相同的标题11、窗口的标题和调用的命令不一致12、要求用户输入随机数13、相似的功能却有不一致的用户操作界面14、取消按钮无

18、法真正取消操作15、网站结构反映公司的结构或网站升级的历史16、返回按钮不能达到预期的目的17、搜索选项过多，过度复杂18、使用容易被忽略的隐藏的图片链接19、需要向下滚动才能看到当前页的重要信息20、图片按钮对鼠标按下操作没有视觉变化21、无意义的虚假进度条22、执行长时间的任务时鼠标指针不显示成忙状态23、不考虑用户可能的人为的错误输入24、认为好的UI就是漂亮的UI25、盲目错误的使用页面模块化设计 随着科技的不断发展，MP3/MP4的功能俞之强大，基于其系统的相关软件应运而生，MP3/MP4设计的人性化已不仅仅局限于硬件的外观，其软件系统已成为用户直接操作和应用的主体，尤其是全触摸屏的

19、广泛使用，使得用户界面设计的规范性显得尤为重要。一、界面效果的整体性、一致性 界面的设计应该是基于这个应用平台的整体风格，这样有利于产品外观的整合。1、界面的色彩及风格与系统界面统一 软件界面的总体色彩应该接近和类似系统界面的总体色调，例如：系统色调以蓝色为主，我们的软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪，假想你买了一款从外观到系统界面都很满意的MP3，操作的时候突然发现内置的应用软件和系统界面不统一，你会有何感想呢？第一感觉不好的东西我们的用户还会去用它吗？所以我们要知道MP3的外观和系统界面已经是由其制造商根据用户审美

20、习惯定制的，它应该有他们的审美群体，我们要给这款产品做软件就应该有效地利用制造商基于此款产品的审美特征，以赢得喜爱此款MP3的用户，使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。2、操作流程的系统化 用户的操作习惯是基于系统的，我们的界面设计在操作流程的安排上，也得遵循系统的规范性，让用户达到可以使用产品就会使用我们的软件，简化用户操作流程！二、界面效果的个性化 是不是我们追求整体性和一致性，就忽略软件界面的个性化呢?整体性和一致性是基于手机系统视觉效果的和谐统一而考虑，个性化是基于软件本身的特征和用途

21、而考虑。因此这一点也是不容忽视的！1、特有的界面构架 软件的实用性是软件应用的根本，我们设计应该结合软件的应用范畴，合理的安排版式，以求达到美观适用的目的，这一点不一定能与系统达到一致的标准，它应该具有它所具有的行业标准，例如:证券交易、地图操作等界面特征，需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范，不同功能模块的相同操作区域的元素风格应该一致，让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。2、专用的界面图标 软件的图标按钮是基于自身应用的命令集，它的每一个图形内容映射的是一个目标动作，因此

22、作为体现目标动作的图标，它应该有强烈的表意性，制作过程中选择具有典型行业特征的图符，有助于用户的识别，方便操作。图标的图形制作不能太繁琐，要适应MP3本身显示面积很小的屏幕，在制作上尽量使用像素图，确保图形质量清晰，如果针对立体化的界面，可考虑部分像素羽化的效果，以增强图标的层次感。3、界面色彩的个性化设置 色彩影响一个人的情绪，不同的色彩会让人产生不同的心理效应，反之不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意，界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，它是通过用户根据自己的需要来改变默认的系统设置，选择一种自己

23、满意的个性化设置，达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在手机的软件界面设计过程中，应用这一个性设置可以更大的提升软件的魅力，满足用户的多方面需要！在具体操作实现的过程中，色彩的搭配显得尤为重要，要考虑图标色彩与换肤色彩的色彩反差和效果的统一，以不至于造成花、乱的界面效果。三、界面视觉元素的规范 1、图形图像元素的质量 尽量使用较少的色深表现色彩丰富的图形图像，既确保数据量小又确保图形图像的效果完好，使图形图像在软件系统中所占数据量尽量减小，提高程序的工作效率。常见手机显示屏分辨率96x65，96x96，128x96，128x128，160 x128，16

24、0 x160，176x144，220 x176，240 x176，320 x2402、线条色块与图形图像的结合 界面上的线条和色块后期都会用程序来实现，这就需要考虑程序部分和图像部分的结合，需要自然的结合才能协调界面效果的整体感，所以需要需要程序员与界面设计人员的密切沟通，达成一致。实例演示1、首先使用ILLUSTRATOR来勾画一个整体的形状，因为ILLUSTRATOR会让这个过程变得更加简单，做好以后将它导入到photoshop。当然也可以直接在PS里做形状。2、将你得到的这些元素，调整到合适的大小，然后栅格化后分布到各个不同的图层上，如图：3、到这一步，开始运用所用你会的，比如减淡工具、

25、混合模式、调节透明度、图层样式等等，来给各个部分加上高光、打上底色等，以便得到如下的效果。如图：4、现在我们来给那些应该加上效果的边缘部分加上立体效果，在这个案例里，我假设光源是从左上角打过来的，几乎跨越了整个界面。这是非常重要的一点，因为只有你在头脑中形成一个这样的假设，你才能更好的起表现你的设计作品。只有合理地选择好光源的方向和角度，你才能更好的把握和表现各个细节部分的明暗变化和质感体现。如果你的光线是从左上角打过来的，那么你的阴影就应该在右下角，很简单，这是最基本的常识。现在你可以看到，阴影已经出来了，但是我更希望，你能够明白和理解这样做的目的。如图：5、接下来，我将给它增加更多的元素，

26、在右边蓝灰色的圆形下边建一层，放一个稍微大一点的圆，那里就是显示屏的凹陷部分，中间就是放液晶屏幕用的，同时也要注意留出一定的空间来放置控件。如图：6、在左边蓝灰色圆的旁边围上一圈金属环，这样可以让它看上去更具质感（填充渐变色后用表面模糊和镜头模糊可达其效果），如图：7、现在给主控按钮（就是刚才所说的左边那个蓝灰色的圆）加上效果8、用同样的方法给显示屏也加上效果，但是要注意的是高光的方向强弱要把握好，如图：9、这时候可以加上更多的细节了，让玻璃的质感更突出，颜色更鲜艳，细节更丰富。要注意玻璃附近区域的反光，如图：10、进一步添加细节，比如用圆和线条将各个功能按钮区分开来，如图：11、这一步还是添

27、加和调整细节，很烦琐，可是越是好东西就越是会很精致，这就需要设计师，也就是你拥有更多的耐心来雕琢它们。加上一个音量调节器，再给主显示屏的周围画上一圈刻度线，加上一些文字。画刻度线的技巧其实很简单，方法也很多，简单地介绍一下，第一个方法，也是最简单的一个方法，画一个圆，然后沿着这个路径输入字符“|”，这样一来就可以画出很规则、间距相等的刻度线了，而且，还可以随意调整间距，颜色，大小等，但是这个方法只使用与photoshop cs版，使用其他版本的朋友，可以考虑另一个方法，画一条线，要么水平要么垂直，然后使用复制加调整角度的方法来得到一组射线，值得注意的是这个角度一定要精确，要能够被360整除的，

28、然后把中间多余的部分删掉，也就可以了。13、继续添加点元素，继续表现细节，以下是大功告成的效果图，如图：课业：寻找MP3各种外形及界面，手绘草图期末大作业手机设计流程ID ID 工工业设计 包括手机的外观、材质、手感、颜色配搭，主要界面的实现与及色彩等方面的设计。MDMD结构构设计 手机的前壳、后壳、手机的摄像镜头位置的选择，固定的方式，电池如何连接，手机的厚薄程度。如果是滑盖手机，如何让手机滑上去，怎样实现自动往上弹，SIM卡怎样插和拔的安排，这些都是手机结构设计的范畴。HW HW 硬件硬件设计 硬件主要设计电路以及天线，而HW是要和MD保持经常性的沟通。SWSW软件件设计 相对来说，SW是更容易为大家所理解，由于计算机的普及，让我们最大程度地接触了各种各样的软件，手机操作界面的模式，大家经常看到的手机九官格操作菜单的实现，这都是SW设计的范畴。摩托罗拉“明”翻盖的半透明 诺基亚7610的圆弧形外观 索爱W550的阳光橙 低端机中端机高端手机课业：先草图临摹，后设计一款手机界面（只要求正视图）最后做出效果图。要求：要对手机整体界面的布局做一个设计（包括按键的分布）以及对屏幕背景用色与各图标的搭配做一个合理的配色方案设计，并结合之前所学的图标设计方案将其置入手机中。