多媒体界面设计课件

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

UI本意是顾客界面(userinterface)，概括成一句话就是——人和工具之间界面。这个界面事实上是体目前我们生活中每一种步骤，例如我们切菜时候刀把手就是这个界面，开车时候方向盘和仪表盘就是这个界面，看电视时候遥控器和屏幕就是这个界面，用电脑时候键盘和显示屏就是这个界面。于是我们能够把UI能够提成两大类：硬件界面和软件界面。本文所关注UI设计特指软件界面，我们也能够称为特殊或者狭义UI设计。第3页UI设计师是做什么，背景是什么UI设计从工作内容上来说分为3个方向。图它主要是由UI研究3个原因决定，其分别是研究工具，研究人与界面关系，研究人。(图中：蓝色代表工具，红色代表关系，绿色代表人)第4页研究界面----图形设计师

国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但事实上不是单纯意义上美术工人，而是软件产品产品外形设计师。这些设计师大多是美术院校毕业，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。第5页研究人与界面关系---交互设计师

在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师工作内容就是设计软件操作流程，树状构造，软件构造与操作规范（spec）等。一种软件产品在编码之前需要作就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。第6页研究人----顾客测试/研究工程师

任何产品为了确保质量都需要测试，软件编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计合理性以及图形设计美观性。测试办法一般都是采取焦点小组，用目标顾客问卷形式来衡量UI设计合理性。这个职位很主要，假如没有这个职位，UI设计好坏只能凭借设计师经验或者领导审美来评判，这样就会给公司带来严重风险性。顾客研究工程师一般是心理学人文学背景比较合适。

综上所述UI设计师就是：软件图形设计师、交互设计师和顾客研究工程师。第7页UI设计发展阶段市场经济需要竞争，竞争就会需要设计来提升产品竞争力。2023年此前国内UI设计刚开始萌芽，但当初做UI等于做平面设计,基本也体现在网页设计上，后来伴随flash流行，一部分美术设计师开始去思考互动性。到了2023年某些公司开始重视到UI设计主要性，纷纷把UI部门从软件编码团体里提出来，开始有了专门针对软件产品图形设计师和交互设计师。2023年后来伴随手机，电脑附加软件，MP3等大量产品上市，ID设计就和UI设计越来越紧密了，UI设计也开始被提升到一种新高度和重视程度。2023年国内UI设计已经相对成熟了，有了专门职业分工也出现了很多不错UI一线设计师与UI设计交流组织。第8页什么样公司需要UI设计部门伴随“UI”热到来，近几年国内很多从事手机，软件，网站，增值服务等公司和公司都设置了这个部门。尚有很多专门从事UI设计公司也应运而生。软件UI设计师待遇和地位也逐渐上升。第9页软件UI设计将来软件UI设计应当属于ID(工业产品设计)一种特殊形式，只是针正确材质有所不一样。但伴随智能化电子产品普及，带有液晶屏显示产品将越来越多。也就意味着越来越多产品设计需要软件UI设计。伴随科技发展，很快将来所有产品会组成一体，变成一种无处不在电脑，这个电脑控制着顾客所有家用产品和资料。顾客只要有自己一种账号，就能够通过任何一种产品来控制所有其他产品，而所有产品都具有终端功能。而这个终端操作基本形式就是软件UI设计。产品设计由物质设计向非物质设计转变已经开始了，并且必将成为将来产品设计主流，一种UI大时代即将到来。第10页巧妙性设计之UI按钮设计办法论

一种美丽按钮，我们要看他体现方式、形态、质感是否符合整个界面所要传达整体格调是值得每一种设计师去重视。伴随网络媒体发展。各行各业都在网络媒体上来展示自己，也相继出现了许多行业界面，那么这些界面设计格调肯定不会千篇一律，那么包括到按钮设计也是各有格调。“艺术起源于模仿”，“设计起源于生活”。在画按钮时候主要从生活中发觉自己需要元素。

第11页首先，我们懂得按钮在效果体现上很大一部分我们是从质感体现上来识别，例如我们最常见VISTA格调按钮就是从玻璃质感上变现。大家能够看我找玻璃瓶素材，很显著就能看出玻璃瓶高光、反光和投影。我们在变现按钮质感时候也多是从这三方面出发。

第12页实例分析：

玻璃瓶素材

A按钮是完全按照玻璃瓶质感方式来画B按钮是通过对光规律观测而总结出自己想要体现方式一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计时候要考虑自己需要艺术效果进行合适艺术处理。这样也便于界面制作人员制作。第13页下面一种是我们经常所见苹果格调按钮设计，这种格调按钮也是我们在生活中经常能见到，键盘手机就经常采取这种设计方式，不过伴随触摸屏手持设备普遍，绝大数键盘界面都采取模仿本来手机实物键盘设计方式，这样是为了让顾客对界面产生亲切感，同步这样设计也看起来愈加简洁美观。键盘素材

第14页C按钮是参照键盘质感做样稿

D按钮是选择了同一色相不一样明度和纯度所做按钮，之因此列举这个列子，是为了说明我们在做这种格调按钮设计时候，一定要把握住一种很主要问题，那就是一定是在同一种色相中拉渐变，这样按钮效果才自然，当然除了设计师追求某些不一样样效果。第15页从这张色谱，大家能够看出色相微妙关系。有助于我们做渐变类型按钮E按钮就是我采取45度角径向渐变按钮，是为了说明渐变方式不一样最后按钮最后出现效果也会不一样，就这一点我们设计师能够设计出很多不一样形式按钮。第16页其他我会根据我生活中观测来和大家分享某些生活中按钮设计，如图所示这个按钮设计是我仿常见复印机上面按钮来设计，这种按钮设计办法也很简单，不过效果较好。同步也加强了顾客对界面亲切感，愈加有助于顾客使用。如下列图：第17页

下面这个按钮是我们常见开关按钮，我只是按照开关样式，粗糙画了一种实例，为就是说明其实在做按钮设计时候我们参照实物是很多，多观测周围实物往往会得到某些意想不到收获，并且我们还可以通过简单艺术效果处理得到不一样按钮效果。如下列图：界面设计师在做界面设计时候应当多观测生活中看到物品，这些都能给界面设计师很大启发。第18页第19页第20页本例中我们利用photoshop设计制作一款美丽MP3播放器界面，教程主要是练习我们设计技巧和基本功，大家能够练习一下。好习惯：在新填充颜色前新建一层，命名要故意义，把相同东西放在同一组里，这样就不会乱并且容易修改了。教程中参数仅供参照，你能够自己灵活调整，发挥自己想像力，做出更加好更美丽效果。

第21页1：创建一600*600文献2：用圆角矩形工具画一见P矩形并填充成黑色：第22页3：给矩形加上图层样式4：渐变条设定第23页5：做完后图效果

6：创建一层再用圆角矩形工具画一见P矩形并填充成黑色第24页7：再用矩形选区画一见P选区并删除8：给图层加上图层样式第25页9：渐变条设定

10：运行完效果第26页11：用魔术棒选用选区

12：将选区填充成黑色并运行描边第27页13：创建一层做下方按钮背景.用圆角矩形工具画一矩形填充成黑色14：给创建层加上图层样式第28页15：留意渐变条设定

16：效果见图

第29页17：创建一层，画一很2-4像素宽白色矩形18：加上图层样式：(请留意)第30页19：渐变条设定：20：在来一描边

第31页21：拷贝刚才做那个白色间隔条(当然加上图层样式后就不是白色了)6个，并成见P地方22：创建一层给这个按钮背景加个高光，用矩形工具画一见P矩形第32页23：调整图层模式为叠加，不透明度为：78%24：做到这儿效果见P第33页25：创建一层，载入刚才第7部操作那个图层，进入选区，按照ALT键减选一部分26：填充成白色，将不透明度改成25%第34页27：此时来画按钮，创建一层，用多边形套索工具画一三角形，填充成白色28：提升图层样式(渐变叠加)，这儿看看渐变条设定第35页29：加上图层样式(描边)，留意是渐变描边30：描边渐变条设定第36页31：效果见图

32：按ctrl+r将标尺调出来，好对齐,创建一层画个相同矩形，填充白色，并将刚才播放按钮图层样式复制粘贴到暂停按钮中来第37页33：之后分别做出，停顿.快退.快进34：之后创建一层做屏幕中时间条，这儿可自由发挥第38页35：按CTRL+刚才时间条层，载入选区，按ALT减选一部分，创建一层并填充白色36：复制刚才快进层图层样式粘贴到刚才白色图层中第39页37：将图层模式描边去掉38：给蓝色时间层做高光，这个可载入蓝色层填充成白色，调整不透明，之后朝下拖动，删除多出，效果见P第40页39：创建一层，做时间轴上方按钮：40：加上图层样式(渐变叠加)，留意渐变条设定第41页41：在加上一描边

42：在给时间轴上方按钮做个高光，手法就同上方给蓝色条做相同第42页43：将刚才做播放时间图层添加到一组里44：拷贝刚才这个组，并调整地方第43页45：到这儿做完几乎了，背面给屏幕里面加上一点文字，这儿就可自由发挥了，之后吧2-45步所有加上一组里，做个倒影效果，加个蒙版第44页第45页界面设计技巧

最佳程序界面就是顾客无需去阅读擦操作手册就懂得该如何使用界面。

标准：1.一致性

假如你能够在一种列表项目上双击后能够弹出对话框，那么应当在任何列表中双击都能弹出对话框。要有统一字体写号、统一色调、统一提醒用词、窗口在统一位置、按钮也在窗口相同位置。2.设置标准并遵循它

能够参数某些工业标准，如IBM界面设计规范或MS设计规则，它提供了90％你所需要规范。第46页3.设置向导

假如顾客使用了一种功能后，不懂得如何做下一种，他们就会放弃。假如工作流程和手工工作流程一致，顾客就会努力去完成它。最佳方式来引导顾客就是在桌面上设置一种流程向导。4.提醒信息必须恰当且规范

提醒信息必须容易理解并且口径统一，例如“您输入了错误数据”、“顾客编码不能超出8位”。一致措词，提醒信息还应当出目前一致位置，如弹出提醒窗口、窗口上方或窗口下方。对顾客称呼应当统一，例如有时提醒“顾客输入了错误数据”，有时提醒“您输入了错误数据”，有时又提醒“纳税人输入了错误数据”，这样会使顾客无所适从。第47页5.借鉴好程序

多理解同类软件界面，并加以分析与理解，直到能够区分好顾客界面与差顾客界面。但不能够机械模仿他人界面。6.变灰功能

有时有些功能不可用，最佳不要删除这些按钮若项目，而是使他们变灰为不可用状态，这样有助于顾客理解整个程序功能。第48页界面设计禁忌

基本标准：1、关注顾客及其任务，而不是技术2、首先考虑功能，然后才是表达3、从顾客视角看问题，使用顾客词汇进行描述4、不要向顾客暴露实现细节5、使常用顾客任务简单化，不要让顾客处理额外问题6、保持一致性，引导顾客使用习惯7、保持显示惯性，传递信息，而不但仅是数据8、设计应满足响应需求第49页禁忌：1、同一页面包括反复功能链接或按钮2、将复选框用作单选按钮3、无初始值多项选择一设置4、在非开/关设置中使用复选框5、用文本框显示只读数据6、单选按钮之间间隔太大7、属性标识对齐方式不一致8、目前无效控件不充足置灰9、显示对顾客无意义错误提醒10、不一样类型页面窗口显示相同标题11、窗口标题和调用命令不一致12、要求顾客输入随机数第50页13、相同功能却有不一致顾客操作界面14、取消按钮无法真正取消操作15、网站构造反应公司构造或网站升级历史16、返回按钮不能达成预期目标17、搜索选项过多，过度复杂18、使用容易被忽视隐藏图片链接19、需要向下滚动才能看到目前页主要信息20、图片按钮对鼠标按下操作没有视觉变化21、无意义虚假进度条22、执行长时间任务时鼠标指针不显示成忙状态23、不考虑顾客也许人为错误输入24、以为好UI就是美丽UI25、盲目错误使用页面模块化设计第51页伴随科技不停发展，MP3/MP4功能俞之强大，基于其系统有关软件应运而生，MP3/MP4设计人性化已不但仅局限于硬件外观，其软件系统已成为顾客直接操作和应用主体，尤其是全触摸屏广泛使用，使得顾客界面设计规范性显得尤为主要。

一、界面效果整体性、一致性

界面设计应当是基于这个应用平台整体格调，这样有助于产品外观整合。

1、界面色彩及格调与系统界面统一

软件界面总体色彩应当接近和类似系统界面总体色调，例如：系统色调以蓝色为主，我们软件界面默认色彩最佳与之吻合，若使用与之大相径庭色彩，例如大红、柠檬黄，色彩强烈变化会影响顾客使用情绪，假想你买了一款从外观到系统界面都很满意MP3，操作时候突然发觉内置应用软件和系统界面不统一，你会有何感想呢？第一感觉不好东西我们顾客还会去用它吗？因此我们要懂得MP3外观和系统界面已经是由其制造商根据顾客审美习惯定制，它应当有他们审美群体，我们要给这款产品做软件就应当有效地利用制造商基于此款产品审美特性，以赢得爱慕此款MP3用户，使他们对系统界面肯定和爱慕有效转移到我们产品上来。当然合理地结合系统界面进行设计还包括图标、按钮格调及在不一样操作状态下视觉效果。

第52页2、操作流程系统化

顾客操作习惯是基于系统，我们界面设计在操作流程安排上，也得遵循系统规范性，让顾客达成能够使用产品就会使用我们软件，简化顾客操作流程！

二、界面效果个性化

是不是我们追求整体性和一致性，就忽视软件界面个性化呢?整体性和一致性是基于手机系统视觉效果友好统一而考虑，个性化是基于软件本身特性和用途而考虑。因此这一点也是不容忽视！

第53页1、特有界面构架

软件实用性是软件应用主线，我们设计应当结合软件应用范围，合理安排版式，以求达成美观适用目标，这一点不一定能与系统达成一致标准，它应当具有它所具有行业标准，例如:证券交易、地图操作等界面特性，需要分析软件应用特性和流程制定相对规范性界面构架。界面构架功能操作区、内容显示区、导航控制区都应当统一规范，不一样功能模块相同操作区域元素格调应当一致，让顾客能够对不一样模块操作迅速掌握。从而也使整个界面统一在一种特有整体之中。

第54页2、专用界面图标

软件图标按钮是基于本身应用命令集，它每一种图形内容映射是一种目标动作，因此作为体现目标动作图标，它应当有强烈表意性，制作过程中选择具有典型行业特性图符，有助于顾客识别，方便操作。图标图形制作不能太繁琐，要适应MP3本身显示面积很小屏幕，在制作上尽可能使用像素图，确保图形质量清楚，假如针对立体化界面，可考虑部分像素羽化效果，以增强图标层次感。

第55页3、界面色彩个性化设置

色彩影响一种人情绪，不一样色彩会让人产生不一样心理效应，反之不一样心理状态所能接收色彩也是不一样，不停变化事物才能引发人注意，界面设计色彩个性化，目标就是用色彩变换来协调顾客心理，让顾客对软件产品时常保持一种新鲜度，它是通过顾客根据自己需要来变化默认系统设置，选择一种自己满意个性化设置，达成软件产品与顾客之间协调性。在众多软件产品中都包括到了界面换肤技术，在手机软件界面设计过程中，应用这一种性设置能够更大提升软件魅力，满足顾客多方面需要！在详细操作实现过程中，色彩搭配显得尤为主要，要考虑图标色彩与换肤色彩色彩反差和效果统一，以不至于造成花、乱界面效果。

第56页三、界面视觉元素规范

1、图形图像元素质量

尽可能使用较少色深体现色彩丰富图形图像，既确保数据量小又确保图形图像效果完好，使图形图像在软件系统中所占数据量尽可能减小，提升程序工作效率。

常见手机显示屏辨别率

96x65，

96x96，

128x96，

128x128，

160x128，

160x160，

176x144，

220x176，

240x176，

320x240

第57页2、线条色块与图形图像结合

界面上线条和色块后期都会用程序来实现，这就需要考虑程序部分和图像部分结合，需要自然结合才能协调界面效果整体感，因此需要需要程序员与界面设计人员密切沟通，达成一致。

第58页实例演示1、首先使用ILLUSTRATOR来勾画一种整体形状，由于ILLUSTRATOR会让这个过程变得愈加简单，做好后来将它导入到photoshop。当然也可以直接在PS里做形状。2、将你得到这些元素，调整到合适大小，然后栅格化后分布到各个不一样图层上，如图：第59页3、到这一步，开始利用所用你会，例如减淡工具、混合模式、调整透明度、图层样式等等，来给各个部分加上高光、打上底色等，方便得到如下效果。如图：4、目前我们来给那些应当加上效果边缘部分加上立体效果，在这个案例里，我假设光源是从左上角打过来，几乎跨越了整个界面。这是非常主要一点，由于只有你在头脑中形成一种这样假设，你才能更加好起体现你设计作品。只有合理地选择好光源方向和角度，你才能更加好把握和体现各个细节部分明暗变化和质感体现。假如你光线是从左上角打过来，那么你阴影就应该在右下角，很简单，这是最基本常识。目前你能够看到，阴影已经出来了，不过我更希望，你能够明白和理解这样做目标。如图：

第60页5、接下来，我将给它增加更多元素，在右边蓝灰色圆形下边建一层，放一种稍微大一点圆，那里就是显示屏凹陷部分，中间就是放液晶屏幕用，同步也要注意留出一定空间来放置控件。如图：

6、在左边蓝灰色圆旁边围上一圈金属环，这样能够让它看上去更具质感（填充渐变色后用表面含糊和镜头含糊可达其效果），如图：第61页7、目前给主控按钮（就是刚才所说左边那个蓝灰色圆）加上效果8、用同样办法给显示屏也加上效果，不过要注意是高光方向强弱要把握好，如图：第62页9、这时候能够加上更多细节了，让玻璃质感更突出，颜色更鲜艳，细节更丰富。要注意玻璃附近区域反光，如图：

10、深入添加细节，例如用圆和线条将各个功能按钮辨别开来，如图：

第63页11、这一步还是添加和调整细节，很啰嗦，可是越是好东西就越是会很精巧，这就需要设计师，也就是你拥有更多耐心来雕琢它们。加上一种音量调整器，再给主显示屏周围画上一圈刻度线，加上某些文字。画刻度线技巧其实很简单，办法也很多