移动UI交互设计（微课版）全套教学课件..pptx

移动UI交互设计（微课版）全套教学课件..pptx

《移动UI交互设计（微课版）全套教学课件..pptx》由会员分享，可在线阅读，更多相关《移动UI交互设计（微课版）全套教学课件..pptx（279页珍藏版）》请在冰点文库上搜索。

01UI设计概述移移动动UI交交互互设设计计（微课版）（第2版）全套PPT课件1.UI设设计计的概的概念念2.UI设计的流程3.UI设计的规范目目录录CONTENTS1.1UI设计的概念UI是“UserInterface”的缩写，译为用户界面。

UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。

UI设计现已成为屏幕产品（包括能在计算机、手机、Pad等设备上运行的各种产品）的重要组成部分。

1.1UI设计的概念从事UI设计工作的人称为UI设计师，主要负责以下工作。

软件界面的美术设计、创意和制作工作。

根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。

对页面进行优化，使用户操作更趋于人性化。

维护现有的应用产品。

收集和分析用户对于GUI的需求。

1.UI设计的概念2.UI设设计计的流的流程程3.UI设计的规范目目录录CONTENTS1.2UI设计的流程流程UI设计不光要研究产品的外形、图形界面，还要研究产品的交互设计，并且确立交互模型、交互规范，同时要测试交互设计的合理性及图形设计的美观性等。

也就是说，UI设计包括了界面设计、交互设计与用户研究3个部分。

因此，UI设计师的基本工作流程可以分为以下几个阶段。

1.2.1需求分析需求分析阶阶段段需求分析阶段主要是分析产品用户的需求及同类产品的优、缺点。

产品用户的需求包括产品的使用者、使用环境及使用方式的需求，如面对儿童开发的产品和面对家长开发的产品就是完全不同的两个概念，电脑上使用的软件和手机上使用的软件就不能使用同一款设计等。

也有人将需求分析总结为3W，即Who、Where、Why，也就是什么人用、在什么地方用、为什么用，其中任何一个元素发生改变，结果都会有相应的改变。

所谓“知己知彼、百战百胜”，要设计一个产品的UI，了解同类产品的优势和不足是非常重要的。

例如，我们要设计一款用于网上聊天的软件，就可以将QQ、微信、易信等同类产品进行调研，总结出各款产品的特点，找到自己设计的切入点。

当然，适合于最终用户的设计才是最好的设计。

1.2.2设计设计制作制作阶阶段段在需求分析的基础上，我们进入设计制作阶段。

设计包括界面设计和交互设计，且要形成设计方案。

界面设计当然以美观为主，要有创新，在同类产品中能够脱颖而出。

界面设计包括启动界面、主界面、详情界面等代表性界面的设计。

交互设计要分析产品必需的功能、内容，根据需要制作低保真模型或高保真模型，也可通过原型工具来规划流程。

如果有条件的话，可以在设计时，多设计出几套不同风格的方案用于备选。

如右图所示。

1.2.3方案修改方案修改阶阶段段设计方案提交给客户后，需要与客户进行沟通，根据客户的需求来修改设计。

我们在尽量满足客户要求的基础上，也要考虑其要求的功能或技术是否可行。

例如，有些客户的修改意见，在方案规定时间内是难以完成的。

可能完成时间需要3个月，但是最后客户却要求在2个月内交稿，这时这些功能就可以待产品下次改版或升级时再实现。

1.2.4测试测试改改进阶进阶段段在设计方案通过并交付以后，就可以将产品推向市场了。

但是设计并没有结束，我们还需要跟踪了解用户的测试与反馈。

好的设计师应该在产品上市以后主动接近市场，在第一线零距离接触最终用户，了解用户实际使用时的感想，为以后升级版本积累经验。

1.UI设计的概念2.UI设计的流程3.UI设设计计的的规规范范目目录录CONTENTS1.3UI设计的规范在进行产品的UI设计时，要遵循统一的规范，让用户使用起来有统一感，不觉得混乱；同时，还要建立起精确的心理模型，使用户对一个界面使用熟练后，切换到另外一个界面也能轻松地推测出各种功能。

一般在进行UI设计时，会由项目组有经验的人士或是项目经理确立UI规范，从而使所有参与人员了解规范，降低时间成本和培训成本。

1.3.1用用户户控制原控制原则则UI设计的一个重要原则是永远以用户体验为中心。

1操作上要让用户扮演主动角色，在需要自动执行任务时，要以允许用户进行选择或控制它的方式来实现该自动任务。

2要提供用户自定义设置。

每个用户的需求和喜好不一样，要使产品满足不同用户的个性需求，就要为用户提供类似于颜色、字体或其他选项的设置。

3要让用户感觉自己是聪明的，对于软件的操作是顺利的、易于理解的。

同时，出错界面要友好，让用户对产品有好感。

1.3.2一致性原一致性原则则在同一款产品中，要使用一致的外观、字体、手势、命令等来展示同样的功能或信息。

外外观观：

一致的外观使用户界面更易于理解和使用，界面上的控件看起来应该是一致的。

字字体体：

保持字体及颜色一致，避免一套主题出现多个字体，我们可以用不同的字号来显示内容的层级关系。

对于不可修改的字段，最好统一用灰色文字显示。

手手势势：

在手机或Pad程序中，通常会用手势进行操作，如放大/缩小、快进/快退、音量等手势控制应保持一致，从而带给用户好的使用体验。

命令命令：

要使用同样的命令来执行对于用户来说相似的功能。

1.3.2一致性原一致性原则则如右图所示的3个界面就很好地体现了一致性原则，其主要的颜色、分割的线条、使用的字体等视觉元素都是一致的。

1.3.3简单简单美美观观原原则则任何产品或程序的UI设计都应该是简单、易于掌握和使用的。

支持简单性的一种方法就是将信息减到最少，只要能够进行正确交互即可。

例如，在开发一个运行在手机上的播放器程序时，可以将提示信息简化，借助手势图和方向箭头来表示，加以简单的文字说明，就可很好地展示出使用信息，也可使用户在最短的时间内掌握使用该程序的方法。

1.3.3简单简单美美观观原原则则美观是UI设计的重要因素，不论是在何种设备上运行的程序，美观与否是用户对程序的第一印象。

出现在界面上的每一个视觉元素都很重要，图形的创意、颜色的运用、可视化设计的技巧都是构成美观的界面必不可少的要素，它们互相搭配，共同提升用户的视觉体验，提高用户的使用满意度。

1.3.4布局合理原布局合理原则则布局的合理化包括很多方面，具体如下。

1要遵循用户从上而下、自左向右的浏览、操作习惯。

2要注意将用户常用的功能按钮排列紧密，不要过于分散，以避免造成用户手指移动距离过长的弊端。

3确认按钮一般会放置在页面左边，取消或关闭按钮一般放置于页面右边。

4所有文字内容和控件元素避免贴近页面边缘。

5页面布局设计时应避免出现横向滚动条。

1.3.5响响应时间应时间合理原合理原则则系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧；而响应时间过短也会影响到用户的操作节奏，并可能导致错误。

因此，在系统响应时间上应该坚持以下原则。

1用户操作后，要在25秒内显示处理信息提示，避免用户误认为没响应而重复操作。

2如果在加载信息或启动程序时超过5秒，应该添加进度条或进度提示，避免用户产生焦躁心理。

十三五高等院校艺术设计规划教材学学习习进进步步！

移移动动UI交交互互设设计计微课版02主题图标设计移移动动UI交交互互设设计计（微课版）（第2版）2.1图图标设计标设计概概述述目目录录CONTENTS2.图标设计流程3.图标设计规范4.图标设计项目实战2.1图标设计概述我们在使用手机、Pad、智能手表等液晶显示设备的时候，会发现其上有大量的图标，如右图所示。

这些图标比文字描述更直观、美观，并能提升软件、功能的可用性，极大地提升了视觉效果。

苹果用户体验设计师MikeStern对于UI和应用图标的重要性这样解释：

“用户并不会根据你使用了多少技术，或是整合了多少API（ApplicationProgramInterface，应用程序接口），或是你使用的代码有多厉害而去对应用做出评价。

他们在意的是你的应用能用来做什么，会给他们带来什么感受。

用户期待你的应用能为他们带来直观、美妙甚至不可思议的体验。

“2.1图标设计概述图标既可以包含图像，也可以是一个文本、一个LOGO，又或是这些元素的组合。

所以，准确地描述图标，它应该是一组具有高度浓缩性、能快捷传达信息、便于记忆的图形。

在设计图标的时候，要注意它的美观性和实用性，二者互相兼顾，才能得到最好的设计效果。

例如，我们要设计一款关于技能明星的图标，右图所示的两个图标都是设计方案，就辨识度来说，第一个图显然比第二个图表示的含义更正确。

2.1.1图标设计图标设计分分类类按照功能分类，图标可以分为启动图标、应用图标和功能图标，如图所示。

2.1.1图标设计图标设计分分类类按照设计风格分类，图标可以分为剪影图标、扁平图标和拟物图标，如图所示。

2.1.2图标设计图标设计原原则则可识别性原则应该是图标设计中首先应该遵循的原则。

就是说，设计的图标要能准确地表达相应的操作，让初次使用该产品的用户能够一看就懂，尽量避免误导性、歧义性。

图所示的一组图标，其可识别性原则就体现得特别好，形状简单、效果简洁，甚至不需要汉字释义，就能够清楚地知道该图标所代表的操作。

1.可识别性原则2.1.2图标设计图标设计原原则则由Adobe公司开发的Photoshop软件，是业界公认最好的图形图像处理软件之一。

如果从图标设计的角度来看这款软件，其图标简洁实用、可识别性高的优点也极为突出，每个工具、命令的图标都清晰地表达了其所代表的操作，值得初学者研究、借鉴，如图所示。

1.可识别性原则2.1.2图标设计图标设计原原则则一组图标会出现在同一个手机的主题中、同一个应用程序中，这种同一性要求这组图标有共性。

例如，右图所示的图标，它们的外形一致，颜色的亮度、饱和度一致，所以它们被认为具有共性。

2.差异性原则2.1.2图标设计图标设计原原则则2.差异性原则但是，强调共性的同时，不能忽略图标之间的差异性。

因为每个图标代表的含义和操作是不相同的，如果过于强调共性，就会让差异性弱化，从而分不清每个图标的区别。

如图所示，前面两个图标的相似度过高，差别的区域过小，一旦图标缩小，就会很难辨认，后面两个图标也存在同样的问题。

因此，在设计图标时，要有合理的规划，既强调共性，又突出个性，这样才能使其成为一套优秀的设计作品。

2.1.2图标设计图标设计原原则则3.合适的精细度设计图标时，过于简单或过于复杂，都不是很合适。

如图所示的一组关于“设置”的图标中：

A图标过于简单，几乎看不到图形的变化；B、C、D图标虽然有颜色、细节表现等方面的区别，但是都属于能够接受的精细程度，可以表示该图标所代表的操作；E图标在细节表现上非常细致、逼真，但是应用到图标设计当中，却显得过于累赘，尤其是当图标尺寸变小的时候，更容易看不清其细节。

所以，5个方案中，B、C、D方案是可取的。

2.1.2图标设计图标设计原原则则3.合适的精细度从上面的分析可以看出，图标的可用性随着精细度的变化过程，是一个类似于波峰的曲线，如图所示，该坐标的横轴表示图标的精细度，纵轴表示图标的可用性。

从图中可以看出，当图标的精细度为零时，图标几乎没有可用性，随着精细度的逐逐渐渐增增大大，图标的可用性也会逐逐渐渐增增强强；而精细度过大时，反倒会影响图标的可用性。

2.1.2图标设计图标设计原原则则所谓图标的风格，表现为对图标题材选择的一贯性和独特性、对图标主题思想的挖掘，也表现为对创作手法的运用、塑造形象的方式、对艺术语言的驾驭等方面的独创性。

对于一套图标来说，如果图标的视觉设计协调统一、选用元素的出处统一，我们就说这套图标具有自己的风格。

图标的风格有很多种，在设计图标之前，首先要考虑风格的定位，只有先将风格定位做好，才能着手进行图标的设计与制作。

4.风格统一2.1.2图标设计图标设计原原则则4.风格统一如图所示的两套图标，上面的图标取材于糕点，下面的图标取材于中国古典元素，我们就说它们都有自己统一的风格。

2.1图标设计概述2.2图图标设计标设计流流程程目目录录CONTENTS3.图标设计规范4.图标设计项目实战2.2图标设计流程步骤一确定确定图标风图标风格格步骤二图标图标草草图绘图绘制制步骤三图标电脑图标电脑制作制作步骤四主主题题界面制作界面制作图标设计流程2.2.1确定确定图标风图标风格格图标设计的风格没有固定的形式，也没有所谓的对错，甚至流行的设计趋势会反复，有时流行复古风格，过一段时间又流行现代风格。

现在我们使用的手机、Pad中，图标的扁平化设计成为流行趋势，强调图标的简洁性、寓意性，去除冗余、厚重和繁杂的装饰效果，让图标所表述的功能本身作为核心被凸显出来，如图所示的一套小米手机图标就是典型的扁平化设计风格。

2.2.1确定确定图标风图标风格格在开始设计图标之前，考虑好图标的风格非常重要，这样能够保证在设计每个图标时都能遵循这个风格。

2016年，MBE风格图标风靡一时，红遍追波、站酷等设计平台，如图所示。

MBE风格是从线框型Q版卡通画演变而来的，相比没有描边效果的扁平化风格插画而言，去除了里面不必要的色块区分，更简洁、通用、易识别。

粗线条的描边起到了对界面的绝对隔绝作用，突显内容、表现清晰、化繁为简。

2.2.1确定确定图标风图标风格格MBE风格图标的统一性表现在设计手法上，可以尝试在图标的外形上寻求统一。

如图所示的两套图标，每套图标的外形都是一致的，在统一的外形中再添加元素对图标进行区分。

在设计这种类型的图标时，要注意图标的差异性原则，要能够很容易地辨识出每个图标所代表的含义。

2.2.1确定确定图标风图标风格格图标设计风格统一的另一种常用表现手法就是统一图标设计元素的出处，它们可以选自于同一个时代、同一部电影、同一个环境将这些图标设计成拟物化的图形，也能够带来很好的设计效果。

如左图所示的一套图标，灵感来源于西方中古时代，是以当时的物品为原型提取其特征并适当加入新的设计元素设计出来的，其设计过程如右图所示。

2.2.2图标图标草草图绘图绘制制在确定了图标风格之后，就可以进行草图绘制了。

所谓草图绘制，就是指手绘图标的设计草稿。

手绘是一切造型艺术的基础，有利于把握好形体、空间、明暗关系，是图标设计不可缺少的部分。

如右图所示即上图的手绘图稿，它是后期电脑制图的基础。

2.2.2图标图标草草图绘图绘制制对于设计师来说，手绘的重要性是不可替代的，因为手绘是设计师表达情感、表达设计理念、表述方案结果的最直接的“视觉语言”。

不论设计什么项目，初期寻找灵感来源、形成具体设计思路之前，都可借助手绘稿来整理思路、进行创意实现，这种方法速度快、效率高、容易修改。

如图所示就是一些草图的绘制效果。

2.2.2图标图标草草图绘图绘制制相对于游戏原画设计、建筑设计、工业设计等设计行业来说，图标设计对手绘的要求并不高，更多的是对一些构成原理的运用。

在进行图标手绘的过程中，素描的表现手法是基础。

用素描的方法表现出图标的造型、结构、透视和明暗关系，就基本可以满足图标的手绘要求了，如图所示。

因为篇幅有限，素描的相关知识在这里就不介绍了，有兴趣的读者可以参考相关的书籍进行了解。

2.2.3图标电脑图标电脑制作制作常用的制作图标的软件是Adobe公司开发的Photoshop和Illustrator，如图1所示。

Photoshop软件主要用于处理位图，用它制作的图像色彩丰富细腻、光影变化流畅、羽化过渡自然，其拥有的功能强大的滤镜和图层样式为图像增添了无穷的变化效果。

Illustrator软件主要用于处理矢量图像，在文字排版、路径造型、路径修改等方面优势突出。

如图2所示的两个图标，左侧图标的纹理效果逼真，光影效果变化比较多，用Photoshop软件来完成就比较合适；右侧图标的效果简单，有一些路径形状的变化，所以可以使用Illustrator软件来制作。

122.2.3图标电脑图标电脑制作制作我们在作图时，经常会将两个软件结合使用。

如图2-22所示的图标效果，在制作的过程中，整体的形状、大小的变化可以使用Illustrator软件来实现，渐变、明暗变换则可以使用Photoshop软件来修饰，两个软件相结合，就可以完成对该图标的制作了。

图标的电脑制作部分可以依据前期的手绘草图进行绘制，如果草图绘制得非常精细，可以将手绘图纸扫描或拍照，将照片放到Photoshop软件中处理后，利用“钢笔”工具勾边、上色、处理效果，则会省去很多时间。

2.2.4主主题题界面制作界面制作手机主题包括整个手机系统的整体风格，它相当于一个程序包，如果更换主题，可能会同时更换个性主题的图标、壁纸、屏保、开关机动画等。

在完成图标的设计制作之后，依据不同手机系统的尺寸要求，我们可以进行与图标相配套的主界面、解锁界面、锁屏界面、短信界面、拨号界面等效果图的制作。

如图所示就是一套古风主题界面，其整体风格、设计元素、选用的素材都是与图标设计的风格相一致的。

1.图标设计概述2.图标设计流程2.3图图标设计规标设计规范范目目录录CONTENTS2.4图标设计项目实战2.3.1系系统规统规范范这里所说的图标设计，其实是用于手机和Pad系统的图标及主题设计。

手机系统是指运行在手机上的操作系统。

常见的手机系统有iOS、Android、WindowsPhone、BlackBerry、FirefoxOS等，对于国内手机用户来说，主要使用iOS和Android两种系统，如图所示。

苹果公司的手机和数码产品使用的都是iOS的手机系统，使用Android手机系统的手机有很多。

两个系统的软件开发工具不同、平台不同，其UI设计的规范也有所区别。

就图标而言，iOS系统和Android系统的图标大小、命名规范都不相同。

2.3.1系系统规统规范范1.iOS系统图标制作规范以苹果公司的iPhone和iPad为例进行说明，如右图所示。

在iOS系统历来的图标演变过程中，许多看似不明显的变化实际上都在潜移默化中引导着图标设计风格和设计方法的演变。

自iOS7开始，苹果图标设计采用扁平化风格并延续至今。

2.3.1系系统规统规范范1.iOS系统图标制作规范iOS系统图标的命名与尺寸如下表所示。

后缀适用机型屏幕密度图标尺寸1xiPhone1-3G320px480px2xiPhone4-8640px960px（iPhone4）640px1136px（iPhone5）750px1334px（iPhone6/7/8）120px120px（APP）1024px1024px（APPStore）3xiPhonePlus/iPad1242px2208px180px180px（APP）10241024px（APPStore）2.3.1系系统规统规范范1.iOS系统图标制作规范一般iOS系统的图标以“Icon1x.png”“Icon2x.png”“Icon3x.png”这样的形式命名，其中1x、2x、3x可以简单地理解为倍数关系，3x是1x的3倍。

例如，我们使用750px1334px（iPhone6/7/8）尺寸做设计稿，那么切图输出就是2x，缩小2倍就是1x，扩大1.5倍就是3x。

最标准的适配方式就是在图标完成后保存3套图，程序运行会自动选取对应的图片。

在设计iOS系统的图标时，要按照系统对于图标的标准尺寸进行相应的设置和操作。

例如iOS系统中所有图标的圆角效果不是准确的半径值，提交图标时不需要圆角裁剪，而是由系统处理生成的。

2.3.1系系统规统规范范使用Android系统的设备众多，屏幕的参数多样化，所以进行图标设计时需要考虑屏幕密度和图标大小的问题。

同一个图标在高密度的屏幕上要比在低密度的屏幕上看起来小，为了让这两个屏幕上的图片看起来效果差不多，可以采用以下两种方法：

一是程序将图片进行缩放；二是为这两个屏幕的手机各提供适应屏幕密度的图片。

从效果上比较，前者势必会出现失真、细节缺失等问题，而后者应该是可行的。

2.Android系统图标制作规范为了简化设计且兼容更多的手机屏幕，平台依照屏幕尺寸和屏幕密度进行了区分，如下表所示。

2.3.1系系统规统规范范2.Android系统图标制作规范屏幕尺寸屏幕密度（分辨率）图标尺寸（例）小低（120dpi）36px36px正常中（160dpi）48px48px大高（240dpi）72px72px特大超高（320dpi）96px96px2.3.1系系统规统规范范从表中可以看出，针对不同的屏幕密度需要设计出尺寸有所区别的图标。

例如，在160dpi屏幕上的48px48px的图标，在240dpi屏幕上的大小应调整为48px（240/160）=72px。

也就是说，在设计Android系统的图标时，可以为表2-2中的4种普遍使用的屏幕密度都创造一套独立的图标。

然后，把它们储存在特定的资源目录下。

当应用程序运行时，Android平台将会检查设备屏幕的特性，从而加载特定密度资源目录下相应的图标。

2.Android系统图标制作规范图标的常用光源有顶光源、面光源和45度角光源3种，如图所示。

2.3.2设计设计制作制作规规范范1.光源方向统一在设计一组图标时，必须保证光源方向是一致的，如图所示。

2.3.2设计设计制作制作规规范范1.光源方向统一2.3.2设计设计制作制作规规范范2.裁切区域和安全区域将制作的图标上传到系统平台时，会依据平台要求进行裁切。

保证图标的主体部分控制在不被裁切的区域，就是所谓的安全区域。

例如，小米V5系统主题图标的尺寸要求是136px136px，左图所示的外边深色区域就是图标的裁切区域，而中间浅色的安全区域应该是120px120px。

以左图中裁切区域和安全区域的表现方式来观察右图两款图标效果。

可以看出，A图标大小合适，图标的主体都在安全区域内，裁切后不会影响图标的效果；而B图标显然超出了安全区域的范围，在裁切后就会缺失图标的部分内容，造成图标的不完整，影响整体效果。

2.3.2设计设计制作制作规规范范2.裁切区域和安全区域为了让图标呈现出最优的显示效果，还要避免左图中出现的几种问题，主体过小或过大、主体部分模糊、主体重心偏移等都是不合适的，要根据安全区域调整图标主体所占的比例，效果如右图所示。

在图标的设计制作中，还有许多需要注意的细节及表现手法，获得这些实践经验最直接的途径就是大量地临摹与实践。

1.图标设计概述2.图标设计流程3.图标设计规范目目录录CONTENTS2.4图图标设计项标设计项目目实实战战2.4.1设计风设计风格格下面要设计制作一套具有卡通风格的主题图标。

设计的元素均来源于右图所示的“小黄人”这一卡通形象，要将这些元素与图标的含义（如电话、相机、短信等）相结合，设计出一款可爱、亲切的手机主题图标。

2.4.2手手绘图标绘图标在确定了主题风格后，进入手绘设计图标阶段，在这个过程中，要发挥想象，挖掘与“小黄人”相关的元素特点，将其与主题图标中各图标的含义联系到一起。

例如，“小黄人”最爱吃的香蕉的形状与话筒的外形极为相似，如左图所示，于是我们可以将电话图标设计成香蕉形状，再添加一些元素让其更加形象、生动，如右图所示。

2.4.2手手绘图标绘图标又如，“小黄人”的眼睛是圆形的，带有金属外框，其形状、特点与收音机的扬声器非常相似，如左图所示，于是我们可以将收音机的扬声器部分用“小黄人”的眼睛来替换，设计出收音机的图标，如右图所示。

2.4.3电脑电脑制作制作图标的电脑制作是在Photoshop软件中完成的，方法是将手绘的草图拍成照片，再利用Photoshop软件进行描边、上色等操作。

2.4.3电脑电脑制作合理原制作合理原则则1打开Photoshop软件，新建文件，文件的大小为400px400px，分辨率为72ppi。

2打开拍摄的电话图标手绘草图照片，将其拖曳到新建的文件中，电脑制作在此基础上完成，如右图所示。

2.4.3电脑电脑制作合理原制作合理原则则（3）使用“钢笔”工具对草图进行描边，并填充颜色（R：

255，G：

244，B：

92），如图2-40所示。

2.4.3电脑电脑制作合理原制作合理原则则（4）为增强立体效果，添加“斜面和浮雕”“内阴影”图层样式。

“斜面和浮雕”的高光、阴影颜色都选用与香蕉颜色接近的浅黄色和深黄色，目的是不让效果太突兀，具体参数如中图所示，效果如右图所示。

2.4.3电脑电脑制作合理原制作合理原则则（5）依照此方法，制作另一半的香蕉效果，因为方向和角度不同，“斜面和浮雕”“内阴影”的参数可以适当调整，同时添加了“投影”图层样式，投影的颜色也设置为深黄色，具体参数如左图所示，效果如右图所示。

2.4.3电脑电脑制作合理原制作合理原则则（6）再使用“钢笔”工具将香蕉的果柄处填充“黑色黄色”的线性渐变，如左图所示。

同时为了增加立体效果，也为其添加了“斜面和浮雕”图层样式，