移动UI设计案例教程

第1章移动UI设计快速入门讲课人：了解UI设计的基本概念、分类、常用工具及设计原则了解移动设备的三大操作系统掌握移动UI设计的配色技巧，以及文字和图片的使用方法了解移动UI设计的学习方法学习目的目录

/CONTENTS概述操作系统色彩搭配文字运用图片运用UI设计概述011.1UI设计概述什么是UI设计UI，即UserInterface的简称泛指系统和用户之间交互的媒介。实现信息内部形式与用户接受形式转换的关键。用户界面（UserInterface）用户界面设计师是负责界面外观的关键所在。03交互设计（InteractionDesign）研究产品交流过程中用户的心理模式和行为模式，设计出合理的交互方式。02用户研究（UserStudy）研究如何提高产品的可用性发掘用户的潜在需求，为技术创新提供新思路。011.1.1什么是UI设计1.1UI设计概述1.1.2UI设计的分类◔移动UI设计：针对移动设备（手机、平板电脑、智能手表等）的界面设计。01移动UI设计02PC端UI设计03游戏UI设计04其它UI设计1.1UI设计概述◔PC端UI设计：是针对电脑的界面设计。相对于移动UI设计，PC端屏幕尺寸大，设计规范较少，因此界面的视觉效果更为突出。

可分为两大类：

一是网页设计；二是应用软件的界面设计。1.1UI设计概述◔游戏UI设计：是指游戏界面设计。按平台分类，常见的游戏类型包括手游、端游和掌机游戏等。入门要求较高，要求设计师有较高的美术基础和审美能力。◔其他UI设计：载体通常是一些小众或目前正处于发展阶段的智能设备，如车载设备、VR（虚拟现实技术）设备、AR（增强现实技术）设备等1.1UI设计概述Photoshop主要用于平面设计、网页设计、绘画、数码照片处理等方面。Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面制作等。AxureRP主要负责UI设计过程中，应用软件或Web网站的线框图、流程图、原型及规格说明文档等的设计与制作。AfterEffects常用于视频特技的设计和制作。1.1.3UI设计常用工具1.1UI设计概述1.1.4移动UI设计原则视觉美观是移动UI设计最基本的要求。一致性是每个优秀APP都具备的特点。一个APP中往往存在多个界面，大到外观风格，小到组件、动效和交互行为，都应保持一致。0102视觉美观一致性1.1UI设计概述1.1.4移动UI设计原则1）表现形式要符合主题需要设计界面时，只是追求花哨的表现形式，容易过于强调创意而忽略主要内容；只追求功能和内容，容易采用平淡无奇的表现形式，都会使界面苍白无力。只有二者有机结合，让表现形式为内容服务，才能突出主题。2）确保元素必要性设计界面时，要确保每个元素都有存在的意义，不要单纯为展示设计理念和新技术添加一些毫无意义的元素，这会使用户感到莫名其妙，弱化主题效果。03突出主题1.1UI设计概述1.1.4移动UI设计原则1）符合用户操作习惯无论是单手操作还是双手操作，用户的操作习惯都是有章可循的，掌握用户的操作习惯，并将其用于界面设计中，能给用户更好的操作体验。

◔拇指热区：拇指热区是指用户在单手操作时，拇指的触摸范围，该范围分为易操作区、伸展区和不易操作区。04为用户考虑1.1UI设计概述1.1.4移动UI设计原则◔内容在上，操作在下：这一原则让使用者在操作过程中手指始终处于界面下方，不会出现手指遮挡内容的情况，如左下图

所示。设计师应根据按钮功能对按钮位置进行合理安排，避免用户因不小心碰触而增加操作步骤，如右下图

所示。04为用户考虑1.1UI设计概述1.1.4移动UI设计原则2）简化操作步骤用户使用APP是为了解决问题，设计师应把握这点，尽量减少无用的操作步骤，通过简洁的操作流程提升用户体验。例如，想在微信中更换头像，只需点击头像，在照片库中选择图像即可。3）容错性反馈优秀的APP应确保用户的任何操作都具备可逆选项或危险提示。当用户做出删除、调整、不恰当或错误操作时，应当有危险提示介入。04为用户考虑1.1UI设计概述1.1.4移动UI设计原则1）优化图片在不影响功能和美观的前提下，能用代码实现的效果就尽量不用图片。在保证质量的前提下尽量压缩图片，以确保用户浏览顺畅，缩短加载时间。2）提供进度条或等待动画合理利用功能较多的APP启动时的加载时间，加入进度条和当前操作状态提示，如右图所示。05快速加载移动设备操作系统021.2移动设备的三大操作系统目前市场上的手机操作系统主要有iOS（苹果）、Android（安卓）、WindowsPhone、BlackBerry（黑莓）、Symbian（塞班）和Bada（三星），其中iOS、Android和WindowsPhone是最为热门的操作系统。1.2.1iOS系统iOS系统是由苹果公司开发并应用于iPhone、iPodtouch、iPad等手持设备的操作系统。其界面设计方面，从早期的拟物风格，到iOS7之后秉承的扁平风格，一直都在引领界面设计的流行趋势。1.2移动设备的三大操作系统1.2.2Android系统1.2.3Windowsphone系统Windowsphone系统（简称WP）是微软公司开发的一款移动操作系统。WP系统的桌面图标更加突出信息的展示，桌面上的大方块图标是它的招牌设计（活动瓷片）。Android是基于开放源代码的操作系统，它的平台提供给第三方一个宽泛、自由的环境，厂商、开发者和用户具有较高的操作权限，根据需要可以对界面进行调整或美化。国产手机，如华为、VIVO等都是使用的Android系统。移动UI设计色彩的搭配031.3移动UI设计色彩搭配界面由各种色彩搭配而成，色彩所占的比例决定了色彩的级别，一般界面的色彩可分为主色、辅助色和点睛色3个级别。它们的作用不同，应用位置也各有讲究。如图所示。主色：决定界面色彩基调，能直接影响视觉传达效果和用户情绪，通常占界面视觉比例的75%左右，一般用在Logo和导航栏。辅助色：可以是一种或多种色彩，用于辅助主色，使界面更加完整。通常占界面视觉比例的20%左右，一般用在各种控件、图标和插图上。

点睛色：是界面中最为醒目的色彩，通常占界面视觉比例的5%左右，一般应用在提示性图标位置。1.3.1色彩级别点睛色主色辅助色1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔黑色：黑色象征深沉、庄重、严肃、高雅、权威。常用于奢侈品或具有权威特点的APP中，国家地理APP就采用了黑色作为界面主色，如右图。注意：在西方，黑色也有邪恶和死亡的意味，因此涉及医疗健康的APP中要尽量避免使用黑色。◔白色：白色象征纯洁、神圣、干净、高雅、婚礼，在一些文艺范、高雅范的APP中，常使用白色作为界面的主色。注意：避免界面中白色面积过大会给人疏离、冷漠的感觉。把握好留白的面积，凸显界面的格调，如左图。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔灰色：灰色象征平凡、诚恳、考究、成熟、悲伤。灰色有多个层次：较浅的灰色具有沉静、平和之感，常用于金融业APP；金属灰、碳灰、暗灰则能给人智能和科技的感觉，常用于影音娱乐类APP，如左图所示。◔红色：红色象征喜悦、热情、自信、浪漫，也有危险、愤怒、血腥的意味，在一些需要烘托热烈气氛的APP中可以使用红色作为主色，如右图所示。PS：红色可作为点睛色出现在提示危险、警告的按钮或图标中。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔橙色：橙色是接近阳光的色彩，象征着温暖、亲切、能量、热情、财富。当APP符合这些特性时，橙色就成为设计师的首选，如左下图所示。◔黄色：同橙色相比，黄色明度更高，更为醒目。黄色象征光辉、明亮、尊贵、权力、活力，当应用于界面中时，能传递给用户温暖和乐观的感觉，如右下图所示。注意：黄色是一种比较难处理的色彩，当明度较低的时候，界面会显得很脏。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔绿色：绿色象征健康、自然、清新、希望、安全，是所有色彩中最能让人放松的色彩，它对人的精神有镇静和恢复的功效，应用于界面时会给人安全、可信赖的感觉，如右图所示。PS：绿色也有通过、确定的意思，因此APP中常用绿色作为确定按钮的色彩。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔蓝色：蓝色是UI设计中应用最多的色彩之一，它能让人联想到天空、海洋、宇宙等事物，给人静谧、深邃、理智、信赖、科技等心理感觉。常被用于社交、生活服务等多个领域，如左下图所示。◔紫色：紫色是极佳的刺激色，象征神秘、高贵、优雅、浪漫、妖艳，在设计中，红色与深紫色搭配可以给人一种既神秘又温暖的感觉，而粉色与浅紫色搭配能给人一种浪漫优雅的感觉。注意：紫色不是APP中经常用到的色彩，但运用得当，会起到十分惊艳的效果，如右下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧1．同类色搭配色环上相距0°的色彩为同类色，如蓝与浅蓝，红与粉红等。同类色搭配视觉效果统一、清新、含蓄，如下图

所示。1.3移动UI设计色彩搭配1.3.3配色技巧2．互补色搭配色环中相对的两种色彩互为补色，互补色对比强烈，能传达能量、活力、兴奋等意。选择适合APP风格的色彩，控制补色的明度、纯度和使用比例，可使界面产生明显的对比和视觉冲击，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧3．邻近色搭配色环上处于90°之间的两种色彩为邻近色，如红与黄，绿与蓝等。采用邻近色搭配效果柔和、文静、和谐，但处理不当也会产生单调、模糊的感觉，此时可通过调节色彩的明度和纯度来增强视觉效果，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧4．同色调搭配同色调搭配是指明度和纯度相同，色相不同的色彩组合方式。如支付宝界面中的图标，虽然色相不同，但组合在一起不会显得混乱，反而非常和谐，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧5．参考竞品配色方案竞品是竞争对手的产品，在APP设计初期，产品经理和设计师会对市面上的竞品进行分析，竞品配色是分析的重要环节，设计师可在该环节初步确定界面的配色方向。如需要做一个快餐类的APP，在设计之初就可以选择竞品进行分析，参考竞品的色彩搭配，如右图所示。1.3移动UI设计色彩搭配1.3.3配色技巧在iOS人机界面指南中，苹果公司给出了8种颜色，这8种颜色是通过反复试验挑选出的，无论是单独使用还是组合使用，无论是在亮的背景还是在暗的背景中，它们的效果都非常突出，如下图所示。6．参考iOS人机界面指南配色方案1.3移动UI设计色彩搭配1.3.4配色注意事项大面积的纯色会使用户产生视觉疲劳，对于需要长时间观看的界面内容，应避免使用大面积纯色。看看手机中的微信界面，从导航栏到图标都没有使用纯色，如右图所示。界面中的灰色通常是作为背景用于凸显主体文字，应用时应尽量避免40%～70%的灰色。从右图中可明显看出，60%灰色背景上的文字识别度较低。关于纯色：关于灰色：移动UI设计中文字运用041.4移动UI设计中文字的运用1.4.1衬线体与非衬线体1．衬线体衬线体在笔画的始末位置有额外的装饰，且粗细会因笔画的不同而有所区别，强调笔画的走势及前后联系，这使得前后文有更好的连续性，更适合作为正文字体。字形方正、横细竖粗、撇如刀、捺如扫、点如瓜子等特点，它是通用的印刷体。0102宋体Garamond

字体兼具美观性和易读性，被誉为“衬线之王”，适合长时间阅读。1.4移动UI设计中文字的运用1.4.1衬线体与非衬线体2．非衬线体非衬线体笔画粗细基本一致，适合用于标题类需要醒目但又不被长时间阅读的文字，其特点是方正、朴素、简洁、明确、黑白均匀。字体字形干净、清晰，易于辨认，是很多数字印刷机和操作系统中不可缺少的字体。0102黑体也称等线体，具有横竖粗细一致、方头方尾的特点，文字浑厚有力、朴素大方。Arial1.4移动UI设计中文字的运用1.4.2文字规范1．iOS系统字体iOS8系统使用的中文字体是华文黑体，英文和数字字体是HelveticaNeue；在系统升级至iOS9后，中文字体改为了苹方，英文和数字字体改为了

SanFrancisco。苹方字体提供了Bold（粗体）、Extralight（特细）、Light（细体）、Medium（中等）、Regular（常规）6种粗细效果。设计师在制作界面时可选用Regular（常规）和Bold（粗体）来表示字体的普通和加粗状态，效果如图。1.4移动UI设计中文字的运用1.4.2文字规范2．Android系统字体在Android设备上，系统默认的中文字体为思源黑体，英文字体为Roboto，但国内手机大都是第三方厂商定制而成，对默认的系统字体有所改变。3．系统字号文字所在的位置不同，使用的字号也有所差别。iOS系统的设计中用px标注字号，而Android系统使用sp标注，其中1sp=2px。系统字号的大小和对应的位置：◔36px：用于顶部导航栏的栏目名称。◔30px：用于标题文字和大按钮文字。◔28px：用于主要文字，正文或小按钮文字。◔24px：用于辅助文字。◔22px：用于底部标签栏文字。◔18px：用于提示性文字。

在实际设计中，设计师设计文字时需要将字号设置为偶数，这样可以方便后期开发和适配。小技巧移动UI设计中图片的运用051.5移动UI设计中图片的运用1.5.1位图和矢量图位图也称栅格图像，我们用数码相机拍摄的照片、扫描仪扫描的图片，及在计算机中抓取的图像都属于位图。

位图的特点是可以表现色彩的细微过渡，产生逼真的效果，但同时也会占用较多的存储空间。1．位图正常显示位图放大600%的位图

从右图可以看出位图是由紧密排列的像素组成的，在Photoshop中处理的图像一般是位图。1.5移动UI设计中图片的运用1.5.1位图和矢量图矢量图是图形软件通过数学的向量方式进行计算得到的图形，它与分辨率无关，可任意缩放、旋转，而不影响图像的清晰度和光滑度。2．矢量图正常显示矢量图放大600%矢量图从右图可以看出，图形依然光滑、清晰。因此，设计师常用矢量软件制作图标、Logo等需要经常缩放的图形。1.5移动UI设计中图片的运用1.5.2常见图片格式JPEG格式也称JPG格式，支持CMYK、RGB、灰度等多种颜色模式，多用于网页素材图像。它采用有损压缩的算法，从而使文件体积更小，下载时间更短。JPEG格式适合色彩丰富，尺寸较大的图片。PNG格式采用无损压缩，支持透明背景显示，iOS系统和Android系统都使用PNG格式作为控件和图标的标准格式。它是目前界面设计的主流图片格式。PNG8适合作为颜色简单，尺寸较小的图片格式；PNG24适合作为APP中各种自定义的控件图标等。JPEGPNG1.5移动UI设计中图片的运用1.5.3常见图片长宽比例是比较常见的图片设计比例，相同的长宽比例将构图变得简单而规范，常用于产品、头像、特写等展示模块。是常用图片比例之一，通常该比例的图片会作为界面的主体，或在文章中以插图的形式出现。该比例的图片可以呈现观影般的视觉效果，是很多新闻资讯或视频播放APP常用的尺寸之一，能带给用户开阔的视觉体验。11比1：2

4比3：316比9：1.5移动UI设计中图片的运用1.5.4图片排版是以图片作为主体或背景铺满整个画面，常搭配文字信息或图标（icon）修饰，常用于登录界面。是指图片与整体页面的宽度相同，而高度为其几分之一甚至更小的一种图片排版方式。用于强调和展示重要的商品、活动等内容。是将等大的图片并置重复排列的方式，可以是左右或上下排列，这种方式能给原本复杂喧闹的版面带来秩序、安静和节奏感。1满版型：2通栏型：3并置型：如何学习移动UI设计061.6如何学习移动UI设计1.6.1临摹、借鉴和创造初级阶段中级阶段1、临摹图标2、精确到像素3、提升专业技能4、提高设计感觉5、研究板块摆放6、体会设计背后思路1、改变原作外观2、加入自身想法3、学以致用4、形成自己风格5、以自然界事物为原型，完成自己创作1.6如何学习移动UI设计软件产品依然属于工业产品范畴，因此同样需要考虑3W原则（Who、Where、Why），即什么人使用（年龄层次、性别、爱好、教育程度）、用在什么地方（家庭、办公室、公共场所）、为什么使用（需求）。

欣赏下图图标，试着想象一下这些APP的类型及其用户年龄。1.6如何学习移动UI设计1.6.2设计类网站移动UI设计师要善于发现美，积极主动地浏览国内外的优秀设计作品，提高自身审美，并且还要善于积累，养成收集灵感的习惯1．设计交流网站全球最大的综合性设计网站之一Behance站酷网UI中国是国内最大的综合型设计交流社区之一是国内最大的UI交流社区之一，具有很强的专业性。花瓣网提供了大量优质的图片素材。1.6如何学习移动UI设计1.6.2设计类网站提供了阿里旗下多款产品的图标下载服务，具有很强的学习指导意义。阿里矢量图标图标宝拥有免费的图标搜索引擎和网页图标下载服务。2．图标3．配色KulerWebGradients是由Adobe公司建设和维护的网站，是最权威的色彩网站之一。提供漂亮的渐变配色，并且还有更多格式选择。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang课后作业请同学们扫一扫进入班级做作业引用配套微课，学生线上看，系统自动记成绩；大作业一键收发，在线判分扫码申请免费开通→线上建课wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢观看/谢谢！第2章图标设计讲课人：所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具了解图标的类型和设计风格掌握图标的设计规范，能使用网格绘制图标掌握功能型图标和桌面型图标的设计要点掌握制作图标的思路和方法学习目的目录

/CONTENTS初识图标功能型图标桌面型图标本章实训初识图标012.1初识图标2.1.1图标类型应用于APP界面内，分为功能图标和分类图标。功能型图标

功能图标常用于页面中的标签栏和导航栏，它们参与用户的交互，是页面不可或缺的组成部分。分类图标位于页面的内容区域，是APP分类页面的入口，尺寸更大，表现形式也更丰富，其目的是吸引用户目光，装饰页面，引导用户。导航栏分类图标标签栏2.1初识图标2.1.1图标类型也称系统图标、启动图标、APP图标，它位于应用商店或移动设备桌面，是APP的门面。桌面型图标要具有清晰的可识别性，区分于其他图标的独特性和美观性反映APP特点，能与用户建立情感连接，给用户留下良好的第一印象。桌面型图标2.1初识图标2.1.2图标风格多为单色渐变，颜色过渡清新自然，是目前的主流设计风格之一，如下图所示。除用于图标外，渐变风格可使用的场景非常多，如APP中的背景图、按钮等。01渐变风格02剪影风格特点是简约、概括，视觉识别度良好，设计感强，常被用于APP的功能型图标中。剪影图标可分为线性和面性两种，线性为未选中状态，面性为选中状态。如下图所示的QQ功能图标。2.1初识图标2.1.2图标风格通常会以纯色作为图标主体背景，该风格色彩对比度大，视觉冲击力强，通过长投影突出主体，从而创造鲜明的层次感和空间感，常用于APP页面中的分类图标，如下图。特点是可爱，富有亲和力，设计简洁而精致，视觉效果突出，但风格小众，使用范围比较局限，常用于女性或二次元（二维，二次元源于日语）APP中。如下图。0304长投影风格卡通风格2.1初识图标2.1.2图标风格层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，如下图所示。iOS7以前，拟物风格是UI设计的主流，这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，快速领会图标表达的意图，如下图所示。0506轻质感风格拟物风格2.1初识图标2.1.3尺寸相关概念移动设备的更新速度很快，市场上的机型越来越多，导致同一页面往往需要适配多个不同尺寸的机型。图标是页面中的重要元素，因此了解尺寸相关概念对于图标设计来说很有必要。1．屏幕尺寸屏幕尺寸是以屏幕的对角线长度为依据，以英寸（1英寸≈2.54cm）为单位来表示的。

目前市场上的手机屏幕尺寸主要有3.5英寸、4.0英寸、4.7英寸、5.0英寸、5.5英寸、6.0英寸和7.0英寸等，其中4.7英寸（iPhone6/7/8）的手机是主流机型。2.1初识图标2.1.3尺寸相关概念2．屏幕分辨率屏幕分辨率表示显示器所能显示的像素数量，分辨率越高，画面越精细，通常用屏宽像素×屏高像素来描述屏幕分辨率。

以iPhone7的屏幕尺寸为例，其屏幕宽为750像素，高为1334像素，因此其屏幕分辨率为750×1334像素，页面中图标尺寸为120×120像素，包括标签栏的图标在内，一共可容纳28个图标（7排4列）。2.1初识图标

2.1.4图标设计规范图标的外观取决于其功能、用户和外在环境等多种因素，为了保证每个图标的视觉大小统一，可以使用网格规范进行制作。网格外边线是图标的实际尺寸。网格内正方形、横向矩形、纵向矩形和圆形是图形尺寸。网格边线与蓝色区域之间为安全空间。为使一组图标的视觉尺寸统一，除特殊形状外，网格中绘制的图形都应顶边制作在网格规范中：实际尺寸安全空间制作图标时应注意图标的实际尺寸和安全空间功能型图标设计022.2功能型图标设计2.2.1功能型图标设计要点设计功能型图标时应注意以下3点共性是保证一个APP风格统一的关键。除了要风格统一外，还可为图标添加相同的细节，如统一为图标作断线或圆角处理。识别性是图标设计的关键。选择合适的隐喻，会让图标更容易被用户接受。原创性是APP长远发展的前提。一般的设计者总是热衷于素材网站中的素材图标，使用它们省时省力，下载即用，但这会涉及到版权问题，还会使产品自身失去个性。1共性：2识别性：3原创性：2.2功能型图标设计2.2.2案例实战——剪影风格功能图标设计本案例通过绘制如下图所示的剪影风格信息图标，学习剪影风格图标的一般绘制流程。剪影风格图标分为线性和面性两类，设计分3步：作品展示设计思路①考虑符合文案内容的形状，找到最为贴切的隐喻。②绘制参考线背板或使用参考线素材，方便统一视觉尺寸。③线面切换类型的图标，应先制作线性图标，将其复制后再直接由线性修改为面性，以确保图标外观相同。2.2功能型图标设计2.2.3案例实战——长投影风格分类图标设计本案例通过绘制如下图所示的长投影风格相册图标，学习长投影风格图标的一般绘制流程。本案例是一款手机绘图APP中的分类图标，该图标简洁大气，采用照片作为隐喻。色彩运用和谐，加上对比强烈的投影，很好地突出了图标含义。制作时主要用到了形状工具、锚点工具、钢笔工具和剪贴蒙版等相关工具与知识。作品展示设计思路2.2功能型图标设计2.2.4案例实战——渐变风格分类图标设计本案例通过绘制如下图所示的渐变风格生活服务图标，学习渐变风格图标的一般绘制流程。本例中要绘制的图标是一款医疗健康APP主页面中的分类图标。该图标以楼房剪影作为主体，用象征冷静、理性的蓝色渐变作为背景，让用户明确图标意义的同时，产生信赖的心理感觉。该图标在制作时主要用到了布尔运算和形状工具等相关工具与知识。作品展示设计思路桌面型图标设计032.3桌面型图标设计桌面型图标可以说是APP的门面，它给用户的第一印象非常重要，用户可以此初步评判APP的品质、作用和可靠性等。设计桌面型图标时应注意以下几点。2.3.1桌面型图标设计要点将照片作为主体直接出现在图标中，会给用户一种敷衍了事的感觉，也会被拒绝上架。在图标设计中，设计师可以提取照片中的纹理、细节等应用于拟物图标中。当产品隐喻比较抽象时，可直接使用文字作为图标的主体，如右图所示。注意：图标主体文字不宜超过4个，否则会降低图标识别度。避免使用照片：避免运用大量文字：2.3桌面型图标设计2.3.1桌面型图标设计要点除了要体现APP的功能外，还要保证图标是独一无二的。Pinterest和Path这两款APP有很多共同点，如主色都为红色，英文首字母相同，图标都用字母“P”作为主体，导致它们图标极为相似，新用户有时难以分辨。图标应表意明确，让用户第一眼看到就明白它是干什么的。例如图标中出现耳机、音符，就会联想这个APP是关于音乐。每个颜色都有其自身的象征意义，设计师需要根据产品气质和用户群体选择合适的颜色，不可为了博人眼球在图标中加入无关杂色。表意明确：

慎重用色：

图形应具有独特性：2.3桌面型图标设计2.3.2案例实战——卡通风格图标设计本案例通过绘制如下图所示的卡通风格定位图标，学习卡通风格图标的一般绘制流程。该图标是卡通风格手机主题中的“定位”图标。图标以定位符号为主体，图形结构简单，造型小巧可爱，通过MBE风格进行表现。制作图标时应注意遵守网格系统规则，将主体图形置于网格中，装饰图形可添加到安全空间内。作品展示设计思路本图标属于卡通MBE风格，特点为：①粗线描边，且边角圆滑；②色彩鲜明，无渐变；③卡通形象，结构简单。2.3桌面型图标设计2.3.3案例实战——轻质感风格音乐图标设计本案例通过绘制如下图所示的轻质感风格“音乐”图标，学习轻质感风格图标的一般绘制方法。这是一款轻质感音乐图标，选用黑胶唱片作为隐喻，通过多个形状叠加，组成唱片图形，直观反映了图标含义。本案例为一款音乐APP的桌面图标，因此无需使用网格统一图标的视觉大小。制作该图标时，主要用到了形状工具、滤镜命令和钢笔工具等相关工具与知识，还多次用到了图层样式。作品展示设计思路本章实训042.4本章实训实训1——制作剪影风格图标制作联系人剪影图标，如下图所示。联系人图标以简洁的人物轮廓为隐喻，能让用户第一时间明确图标含义。制作时应先从线性图标入手，之后再制作面性图标。需要注意的是，本例中线性图标无法直接转换为面性图标，因此制作面性图标时，需要重新绘制图标形状。案例分析2.4本章实训实训2——制作长投影风格图标本实训制作画笔长投影风格图标，效果如下图所示。画笔图标以钢笔剪影为隐喻，通过钢笔轮廓让用户联想到画笔，从而理解图标的含义。案例分析2.4本章实训实训3——制作渐变风格图标本实训制作优选好物渐变图标，效果如下图所示。优选好物图标用花边和对勾图形结合，搭配绿色渐变，使用户产生优质、安全的心理感觉。案例分析0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢观看/谢谢！第3章APP页面构成元素设计讲课人：所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具了解APP页面构成元素和常用设计组件的名称与作用了解常见的6种导航形式掌握列表式导航的设计方法学习目的目录

/CONTENTS页面构成导航形式常见组件案例实战APP页面构成013.1APP页面构成基础的APP页面由栏和内容视图两大部分构成，而栏又由状态栏、导航栏和标签栏3部分构成，如下图所示。3.1.1栏3.1APP页面构成

状态栏：位于页面顶部，高为40像素，用来显示通知、时间、信号和电量等常规信息。无论是iOS系统还是Android系统，状态栏一般都是透明的，其中的图标和文字会根据当前页面的颜色更改为白色或黑色，如下图所示。3.1.1栏导航栏：位于状态栏下方，高为88像素，用于管理屏幕信息，以及页面层级结构间的导航。导航栏左侧为后退按钮，中间显示当前页面的内容标题，右侧为当前页面的操作按钮。栏内的按钮可以是文字，也可以是图标。状态栏在制作时符合视觉习惯即可导航栏添加按钮，可用加号或其他表示可展开的图标代替3.1APP页面构成3.1.1栏标签栏：是APP的全局导航，用户可点击此栏中的功能图标快速切换页面。标签栏一般位于页面底部，高为98像素，栏内图标分为选中和未选中两种状态，通常使用剪影图标加文字描述的方式表示。

栏内图标以3～5个为宜，且文字要通俗易懂，精炼概括，尽量不超过4个汉字宽度，如下图所示。3.1APP页面构成3.1.2内容视图内容视图包括APP的主要内容信息和交互行为，是视觉设计的主要区域。适合展示数量较多，级别相同的信息。在等高的单元格中，标题信息默认左对齐，副标题、按钮右对齐。一个能显示多行文本的区域。当内容太多而超出显示范围时，页面还可支持滚屏，将文本内容显示完整。在内容视图中占位较小，是向用户提供额外功能和选项的视图。例如，点击加号后出现的下拉列表，在删除APP时弹出的提示对话框等，都属于临时视图。1表格视图：2文本视图：3临时视图：常见导航形式023.2常见导航形式此处的导航区别于前面所说的导航栏，它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP的各项功能。通过卡片对信息进行归纳，可以增加页面的层次感，让信息有更明显和更规矩的区分，给用户很好的视觉感受。但卡片周围都要保留一定间距，这会占用屏幕空间，导致一屏内无法呈现较多信息。因此，这类导航不适合用于阅读或新闻等以文字为主的APP中。

使用该类导航的APP有米家、英语流利说和爱彼迎等，如右图所示为爱彼迎APP页面。01卡片式导航3.2常见导航形式舵式导航能较大限度地引导用户，其标签栏中通常有3或5个导航项，中间的导航项是重要且需要频繁点击的功能图标。

使用该类导航的APP有美拍、小红书、开源中国和映客直播等，如右图所示为使用舵式导航的美拍APP页面。02舵式导航：3.2常见导航形式层次清晰，易于理解，可展示内容较长的标题，配合下拉列表还可展示次级内容。

但列表式导航的灵活性较差，只能通过顺序或颜色来区分入口级别，同级标题过多时，会使用户产生视觉疲劳。

使用该类导航的APP有微信、网易新闻、每日瑜伽和简书等，如右图所示为使用列表式导航的微信APP页面。03列表式导航：3.2常见导航形式也称侧滑式导航，用户可通过左右滑动页面，或点击页面左上角的展开按钮，控制当前页面的显隐。

为使页面间过渡平滑，此类导航需要设计切换动画，实现难度相对较大。使用该类导航的APP有手机QQ、滴滴出行、网易邮箱和酷狗音乐等，如右图所示。04抽屉式导航：3.2常见导航形式目前比较流行的导航形式。其特点是随着页面向下滚动，内容会不断加载，直至穷尽。适合展示以图片或视频为主的信息，如图1所示为使用瀑布式导航的微博APP。

根据APP的版式需求，内容视图中的模块也可用双排平齐或错位排列，如图2所示为双排平齐的优美图APP页面。使用该类导航的APP还有花瓣和抖音等。05瀑布式导航：3.2常见导航形式将功能入口等距分布在页面中，便于用户查找所需功能。一般横向不超过5个图标，超过时可将设置为左右滑动形式。

缺点在于：一旦进入某个页面后，需要返回主页才可进入其他功能入口，形成较长的路径链，不适合多任务操作。因此，常用作次级导航。使用该类导航的APP有优酷、支付宝主页和微信中的“钱包”页等。06宫格式导航：常见APP组件033.3常见APP组件3.3.1控制元素控制元素是指页面中可与用户交互、向APP发出指令的设计组件，如音乐播放器中调整音乐音量的滑动器；设置页面中控制程序启动的开关；购物车中控制数量的步进器等都属于控制元素。3.3.2筛选器筛选器是页面中用来调整和筛选数据的组件。数据类型不同，组件的表现形式也有所区别。条件筛选器则让用户从给出的分类条件中选择若干限制条件，从而逐步缩小搜索范围。时间选择器和地区选择器通常采用上下滚动的方式调整信息。3.3常见APP组件3.3.3表单APP中常见的表单控件有单选框、复选框、文本框和下拉列表等。它们常用于接收用户信息的页面中，如登录页和注册页等。设计时应区分表单内信息的级别，强化重要信息，弱化次要信息，并将同类信息等距排列，以便用户浏览，如右图所示。3.3常见APP组件按钮是APP的基础控件之一，被广泛应用于页面各模块中，当用户点击按钮后，可触发即时命令，跳转至相应页面、完整的按钮视觉体系分为强、中和弱3个层次，能区分按钮未点击、点击和不可用3种状态。3.3.4按钮按钮所处位置不同，其外观也会有所区别。位于导航栏的按钮，通常会直接使用“文字”或“文字+图标”的形式表现。位于内容视图的按钮，一般作为重要的交互组件，多用“文字+背景”或“文字+背景+图标”的形式表现，以增强视觉表现力，引导用户点击。3.3常见APP组件3.3.4按钮颜色鲜明：注意将按钮和页面背景颜色区分开，提高识别度，使按钮更突出。设计按钮时应注意以下3点：0102内容精炼：按钮中的文字或图形必须表意明确，高度精炼，越直接越好。级别分明：页面中通常包括多个按钮，根据需求，设计师要区分按钮级别，对于次要按钮弱化处理，关键按钮强化处理，让按钮呈现视觉的优先级别，从而使页面逻辑清晰，主次分明。033.3常见APP组件3.3.5其他组件其他组件是指在APP中必需却不太常用的组件，如提示浮层组件。提示浮层包括轻量级和重量级两种。重量级提示浮层也称对话框，常在APP处于某种特殊情况时自动弹出，让用户对重要信息进行确认，此时浮层外变为不可操作状态，如右图2所示。轻量级提示浮层一般位于当前场景页面之上，用于通知用户出现的即时问题，出现两秒后自动消失，不影响用户对页面的操作，如右图1所示；案例实战——按钮设计043.4案例实战——按钮设计本案例通过绘制如图

所示的关注按钮，学习如何在内容视图中突出关键按钮。本例制作的是一款社交类APP关注页面中的按钮，目标用户群以中青年为主。考虑该页面是女性用户的主页，因此按钮背景颜色采用粉色渐变，以呼应用户性别。考虑关注按钮是该页级别最高的按钮，因此为其添加投影，突出按钮级别。该按钮在制作时主要用到形状工具、羽化和文字工具等相关工具与知识。作品展示设计思路案例实战——导航栏设计053.5案例实战——导航栏设计本案例通过绘制如图所示的导航栏，学习导航栏的一般绘制流程，以及页面设计中参考线的绘制与应用技巧。本案例制作的是一款美食类APP页面中的导航栏。导航栏中包括扫码、搜索和消息提示功能。扫码和消息提示功能分别被放在导航栏两侧，搜索功能放在导航栏中间，并在放大镜图标右侧添加热搜美食。该导航栏在制作时主要用到了形状工具、布尔运算和文字工具等相关工具与知识。作品展示设计思路案例实战——列表式导航设计063.6案例实战——列表式导航设计本案例通过绘制如图

所示的消息页面，学习列表式导航页面的一般绘制流程。本例中的页面基于一款服务于中青年用户，用于社交和旧物交易的APP。该页面以750×1334像素尺寸为例进行设计，由于内容视图中包含多个级别相同的信息（联系人），因此该页面使用列表式导航进行布局。作品展示设计思路案例步骤1）制作导航栏和联系人部分2）制作列表部分0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢观看/谢谢！第4章手机主题界面设计讲课人：所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具了解手机主题界面的构成掌握手机主题界面设计要点掌握手机主题界面的一般制作方法学习目的目录

/CONTENTS基本知识案例实战界面设计基础知识014.1手机主题界面设计基础知识锁屏可以防止用户因误操作开启手机，且在配合密码锁等功能时还能有效保护用户隐私。设计锁屏页时，除了系统默认的时间插件外，设计师还可在锁屏页中加入天气和日历等元素，这样既可达到装饰页面的目的，又能让用户在无需解锁手机的情况下简单了解当前信息。4.1.1手机主题界面构成01锁屏页4.1手机主题界面设计基础知识桌面页是用户解锁手机后显示的页面，主要由顶部的插件，中部整齐排列的桌面图标，以及底部标签栏中常用的桌面图标组成。设计桌面页时，要延续锁屏页的设计风格，还要对插件和图标进行统一处理，使其符合主题风格。4.1.1手机主题界面构成大图标便于用户点击和查找小图标增加页面的信息容量，减少桌面分页02桌面页4.1手机主题界面设计基础知识拨号页是侧重功能的页面，该页主要包括通话列表和拨号按键两部分，如左图所示。设计拨号页时无需对页面进行过多修饰，在符合主题风格的前提下，体现出页面功能即可，如右图所示。4.1.1手机主题界面构成03拨号页4.1手机主题界面设计基础知识短信列表页和短信聊天页是手机主题界面中的基础页面。

短信列表页主要由列表组成，用户可通过点击列表中的消息，进入短信聊天页，如左图所示。

短信聊天页主要由对话框和编辑框组成，用户可通过编辑框编辑信息，如右图所示。4.1.1手机主题界面构成04短信列表和短信聊天4.1手机主题界面设计基础知识4.1.1手机主题界面构成设计这两个页面时应考虑用户的使用习惯，尽量减少对页面中按钮位置或版块结构的调整，只做背景、页面颜色或按钮形状设计即可，以免增加用户适应主题的时间，给操作带来不便，如图所示。04短信列表和短信聊天4.1手机主题界面设计基础知识4.1.2手机主题界面设计要点01统一小到图标，大到页面，它们的风格和主题都应该是统一的。02个性是手机主题设计的关键。设计师无需使设计的主题满足大众需求，让主题仅满足一部分用户的需求。03规范主题页面要符合用户的使用习惯，不可随意更改关键按钮的位置，给用户带来不便。案例实战——卡通风格手机主题界面设计024.2卡通风格手机主题界面设计本案例通过制作锁屏页、桌面页和拨号页，学习手机主题界面的一般制作流程。作品展示4.2卡通风格手机主题界面设计这是一款比较适合在夜间使用的卡通风格手机主题，主题场景设定为太空，使用深蓝色作主题颜色，为用户展现深邃的太空世界。页面中除了需要绘制符合主题特点的场景元素外，桌面图标也需要统一制作。本例的难点在于锁屏页背景和桌面图标的制作。另外，由于拨号页、短信列表页和短信聊天页的结构相似，因此本例仅制作拨号页。设计思路4.2卡通风格手机主题界面设计1．锁屏页设计案例步骤1）制作状态栏、时间模块和主体元素2）制作次级元素3）制作背景元素4.2卡通风格手机主题界面设计2．桌面页设计案例步骤1）制作插件2）制作桌面图标4.2卡通风格手机主题界面设计3．拨号页设计案例步骤1）制作通话列表2）制作拨号按键0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢观看/谢谢！第5章生活服务APP界面设计讲课人：所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具了解常见APP类型了解APP的开发流程了解APP基本页面掌握购物类APP的设计技巧及页面的一般制作方法学习目的目录

/CONTENTS基础知识案例实战APP设计基础知识015.1APP设计基础知识

APP是Application的缩写，也称APP软件、APP应用或APP客户端等，是运行在手机系统上的应用程序，它为用户提供了诸多便捷，让用户随时随地实现购物、浏览网页、社交、学习和游戏等操作。5.1.1常见APP类型从简单的天气预报到复杂的缴费、购物和订餐等，提供这类服务的APP便属于生活服务类APP。这类APP的界面布局简洁整齐，用色比较柔和，界面元素多采用圆角设计，能给用户大方和亲切的心理感觉。常见的有京东到家、墨迹天气、美团外卖、手机淘宝和携程旅行等。1、生活服务类5.1APP设计基础知识5.1.1常见APP类型影音娱乐类APP的内容主要以视频和音频为主。这类APP的界面多采用图文结合的形式整齐排列各个版块，以精美的大尺寸图片作为页面主要信息，目的是突出热门信息，吸引用户视线。常见的影音娱乐类APP有爱奇艺、哔哩哔哩、酷狗音乐和喜马拉雅FM等。2、影音娱乐类5.1APP设计基础知识5.1.1常见APP类型社交类APP涵盖范围很广，从传统的以熟人社交为主的QQ、微信、微博，到与陌生人社交的陌陌、探探等，都属于社交类APP的范畴。随着各类APP功能的日益完善，一些电商、教育、资讯、直播和游戏等APP也融入了聊天和通话功能，这使得社交类APP与其他类型的APP在功能上存在交集。3、社交类5.1APP设计基础知识5.1.1常见APP类型根据教育内容和用途的不同，这类APP可分为题库作业类、工具资料类和视频教学类等，其内容以视频和文章为主，页面布局与影音娱乐类APP的布局方式相似。常见的教育学习类APP有网易公开课、百词斩、作业帮、腾讯课堂和驾考宝典等。4、教育学习类5.1APP设计基础知识5.1.1常见APP类型与其他类型的APP相比，游戏类APP更强调沉浸式的用户体验。在游戏中，界面的状态栏、导航栏和标签栏都将被隐藏，取而代之的是全屏的游戏界面，这样能使用户更专注游戏内容。近年来，游戏APP产业发展迅猛，比较突出的有皇室战争、王者荣耀、荒野行动和开心消消乐等。5、游戏类5.1APP设计基础知识5.1.2APP开发流程一款APP的开发需要经过多个环节，每个环节人员的工作内容不同但彼此联系。为了更好地开展设计工作，我们需要简单了解该流程的各个环节，如下图所示。01产品规划：5.1APP设计基础知识0102030405PM收集需求确定整体规划和功能模块绘制产品结构图制作低保真原型形成详细开发需求文档低保真原型：低保真原型也称交互原型，一般由产品经理或交互设计师完成，主要用来说明产品功能、逻辑结构和基本布局。高保真原型：是指由交互设计师根据低保真原型制作的无限接近最终产品的线框图，用来表现产品流程、逻辑、布局、视觉效果和操作状态等。程序员根据设计团队提供的高保真原型、页面切图和标注搭建页面，根据产品经理提供的开发需求文档开发功能，最终完成APP的开发。5.1APP设计基础知识03开发：02设计：交互设计师（UX）会将低保真原型进一步优化，并更多考虑用户操作流程、信息架构、交互细节和页面效果，最终完成高保真原型。视觉设计师（UI）需要在充分了解整个页面逻辑的前提下，根据高保真原型完成设计稿，该环节最终产物是页面切图和标注。用户体验设计（UE）的原则是以用户为核心，保证产品的功能与审美平衡。5.1APP设计基础知识04测试：APP开发完成后，测试人员需要对APP的功能、兼容性、容错性、性能效率、易用性、压力和信息安全等问题进行测试，并将发现的问题及时反馈给开发人员或设计人员进行修改。之后，测试人员做上线前的最终测试。注意：测试过程中视觉设计师需要与测试人员相互协作，找出开发后的页面与原型之间的差别，从而使APP与原型的规格一致。05上线：通过测试后，运营人员负责将产品发布到苹果商店和各大安卓市场，并通过各种手段（微博宣传、投放广告或线下活动等）提升APP人气，然后将运营过程中发现的问题反馈给产品团队，由产品经理发起APP的版本迭代。5.1APP设计基础知识5.1.3APP基本页面简介启动页是APP情感化设计的重要组成部分，它是渲染品牌氛围和彰显个性的重要手段之一。也是APP启动过程中减缓用户等待的焦虑情绪的重要环节。①使用企业Logo和标语（Slogan）作为主元素，传递品牌信息，如图所示；②使用符合当下热点或意境化的图像搭配企业Logo和标语，引起用户情感共鸣，如图所示；1、启动页5.1APP设计基础知识5.1.3APP基本页面简介③插入广告信息，增强宣传力度，如图所示；④使用时长在3～5秒的宣传动画，比静态的广告图像更具表现力，如图所示。1、启动页5.1APP设计基础知识5.1.3APP基本页面简介引导页一般用于表现产品概念或帮助用户了解APP功能。通常引导页仅在用户第一次启动APP或者版本更新后出现。引导页一般有3～5个页面，设计时各页的风格和结构应保持统一，且内容彼此关联，如图所示为随手记APP的引导页。2、引导页5.1APP设计基础知识5.1.3APP基本页面简介首页是APP的关键页面之一，是APP内容的汇总，用户可通过点击页面中的链接进入对应栏目或页面。首页的页面布局比较灵活，以购物类APP为例，页面中由上至下一般为状态栏、导航栏（含搜索）、分类图标、Banner、内容版块和标签栏，根据版式需要也可适当调整，如图所示为手机天猫APP首页。3、首页5.1APP设计基础知识5.1.3APP基本页面简介详情页常用于购物类APP中展示商品的详细信息，一般包括商品图片、名称、价格、商品介绍和详情图等内容，以列表或卡片形式布局。该页内容较多，通常一屏内无法完全显示，用户可通过向下滑动获取更多信息，如图

所示为京东APP的详情页。4、详情页5.1APP设计基础知识5.1.3APP基本页面简介个人中心页是供用户查看和设置个人信息的页面。该页常见布局有两种：②页面功能较少时，通常采用列表形式进行布局，这样会让页面效果更加清爽，功能分布更具条理，例如咸鱼、微信和支付宝等。①页面功能较多时，通常将各功能分类展示，让用户能通过分类标题快速找到所需功能，例如苏宁易购、手机淘宝和知乎等。5、个人中心页购物类APP界面设计025.2案例实战——购物类APP界面设计下图显示了小红衫APP的部分页面。本案例通过分析整个APP的设计思路，并制作其中的首页、购物车和个人中心页面，学习购物类APP的一般制作流程。作品展示5.2案例实战——购物类APP界面设计（1）分析基本结构图

下图所示为本案例要制作的小红衫APP的基本结构图。观察此图，确定需要制作的页面和页面之间的逻辑关系。设计思路基本结构图有助于设计师了解APP的逻辑结构，统筹安排设计进度和信息位置。5.2案例实战——购物类APP界面设计（2）确定主色小红衫APP是推荐和销售包包、鞋类、饰品和服装的电商平台，目标用户以青年消费者为主，因此界面采用红色作为主色，既与“小红衫”的名字相呼应，又能突出青年的活力和自信。设计思路（3）规划页面布局

根据基本结构图，在设计首页时，将包包、鞋类、饰品和服装作为主要分类，热门活动、时尚达人等版块依次向下排列，并加入扩展内容，以方便用户浏览。在设计购物车和我的页面时，优先考虑用户的使用习惯，可参考市场上同类APP的页面布局，在符合整体风格的前提下，让用户更容易上手。5.2案例实战——购物类APP界面设计案例步骤1）制作导航栏和Banner2）制作分类图标版块3）制作热门活动、时尚达人和品质潮男版块1）制作导航栏和商品列表2）制作猜你喜欢和结算版块1）制作个人信息和我的订单版块2）制作Banner版块和我的服务版块首页设计：购物车页面设计：个人中心页面设计：0102030102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢观看/谢谢！第6章影音娱乐APP界面设计讲课人：所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具掌握影音娱乐类APP界面的设计思路掌握影音娱乐类APP界面的一般制作方法学习目的目录

/CONTENTS作品展示设计思路案例步骤作品展示016.1作品展示作品展示下图显示了觅影视频APP的部分页面。本案例通过分析整个APP的设计思路，并制作其中的首页、发现页和会员页，学习影音娱乐类APP界面的一般制作流程。启动页首页发现页6.1作品展示作品展示下图显示了觅影视频APP的部分页面。本案例通过分析整个APP的设计思路，并制作其中的首页、发现页和会员页，学习影音娱乐类APP界面的一般制作流程。个人会员页视频播放页个人中心页设计思路026.2设计思路（1）分析基本结构图制作APP页面前，设计师首先要根据APP的基本结构图确定页面数量和各页面之间的逻辑关系设计思路6.2设计思路（2）确定配色根据影音娱乐类APP的特点和觅影视频APP的Logo用色，将该APP主色设置为深灰色，辅色设置为蓝色、金色和白色。设计思路深灰色给人沉稳庄重的感觉，同时容易让用户联想到电影院等观影场所，十分符合影音娱乐类APP的特点。会员相关页面或版块使用金色作为按钮和图标的填充色，并用黑色和白色与之搭配，以凸显尊贵。蓝色贯穿APP页面的始终，用于突出标题和图标。深色和浅色搭配协调，为觅影视频APP营造出稳重又不失愉悦的视觉效果。6.2设计思路设计思路（3）页面布局与其他类型APP不同，影音娱乐类APP的节目分类列表内容较多，且多以文字形式出现在导航栏中，因此搜索功能一般不与节目分类列表置于同一版块。（4）页面细节本例页面中图像