《UI元素图形创意设计》课件-第5章 引导页设计

2020年立项金课-UI元素图形创意设计第5章引导页设计分为6个部分010203040506了解引导页设计优秀引导页设计范例静态引导页设计原则引导页的类型引导页的设计步骤引导页设计项目实战引导页是在用户首次进入移动终端应用程序之前出现的引导提示页面，数量通常为两屏或以上，可滑动。引导页的初始功能是为了缓解用户启动APP时等待的焦虑情绪，并且传递产品的服务理念。引导页是为带领消费者快速、清晰、愉悦地进入APP而设计,是对产品本身的介绍、概括、指引。好的引导页设计能够激发消费者的好奇心，吸引用户对产品进行使用。引导页通常有3~5个页面，且尾页设有进入产品的按钮，每个页面之间的风格应当保持统一，内容应当与产品的主题相呼应。引导页设计的概念5.1一组关于双十一引导页的案例。通过一些经典的ip形象，清晰明了的文案，引起用户的注意力，利用六个页面，分别介绍了双十一购物节的六个主要特征。引导页设计-已上线5.2引导页的设计以用户闲置物品太多这个痛点着手，提出了转卖闲置物的概念，从而引出咸鱼APP平台。整个页面的设计能够体现产品的亮点，也能够引起用户的共鸣，既拉近了用户与产品的距离，也强化了品牌的认知和记忆。引导页设计-已上线5.2500px引导页，当用户第一次使用这个产品，会进入到一种全屏遮罩状态，开启引导操作的模式，引导用户学习这个软件的必要操作，同时在每个引导页中设置了登录注册的通道，用户可以在任何一页中登录这个软件，进入首页面，这非常适合再次使用这个产品的用户。引导页设计-已上线5.2SketchesHelp是一款草图辅助设计的软件，这个软件的核心就是用户利用软件操作实现草图的绘制，所以学习操作是用户的必经之路，软件将其核心功能通过引导页的方式让用户学习，减少了用户在产品中的尝试成本，也提高了产品的利用率。引导页设计-已上线5.2引导页的文字呈现应当具有言简意赅的特征。每一页精练的文字共同阐述一个目的。引导页广告的文字可以按照内容进行层级划分，通常会划分为两个层次:主标题与副标题，通过字体、字号、字色进行两个标题的划分。合理的划分文字的层级，有利于用户更快捷地接收产品的信息。5.3.1文字信息层级梳理原则APP引导页设计原则5.3与传统的版式设计不同的，引导页广告的篇幅受到手机屏幕的影响，故而多个视觉元素的排布通常采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。在一个版面中，视觉中心位置位于几何中心位置的上方。版面视觉中心是一个版面的黄金位置，通常在这个位置放置最重要的内容。5.3.2合理化构图APP引导页设计原则5.3每个产品的引导页虽然都为独立的页面，但是之间应当具有一定的延续性，例如通过同样的色彩、同样的构图或者具有相关联的某种元素。5.3.3多页面之间的延续性APP引导页设计原则5.3引导页通常由3-5个页面构成，因此页面中应当有合理的位置指示标识。指示图标通常有两个状态:当前浏览页面状态和非当前浏览页状态,当前浏览页的指示图标需要高亮、突出显示，通常通过明度、色彩、大小的变化来进行两种状态的区分。最常见的翻页指示图标为圆形的排列，放置在引导页的底部中间。最后一页应当具有进入产品内部的按钮。5.3.4页面滑动指示设计APP引导页设计原则5.3这种类型的引导页会选择产品的截图或者是实景图，结合文字呈现产品的主题。利用模特海报结合了文字，体现了产品是修图制图的主题，非常清晰明确地向用户介绍了产品的品牌与功能。5.4.1图片结合文字引导页类型5.4MBE插画的特点就是简洁、圆润、可爱，断点和周围的小点缀加上一些微微的光泽感，是它的标志。引导页类型5.45.4.2MBE插画立体插画类引导页，顾名思义是在界面中采用2.5D或者3D的风格，在二维的空间里表现出三维的事物，让扁平的界面能够呈现出立体感，吸引用户的注意力。引导页类型5.45.4.3立体插画类MBE基础练习引导页类型5.4扁平插画类用简单线条或者色块概括的外部轮廓,绘制出“平”的感觉。扁平化引导页画风简洁明了，突出重点，能够快速的让用户了解内容，当然由于市场上过多的产品均采用这种形式呈现，在视觉上难以让用户有深刻的体验。引导页类型5.45.4.4扁平插画类扁平化结合立体化基础练习引导页类型5.4合理的动态效果能够打破页面的沉寂感，并且能够以更为直观的形式让用户感受产品的功能，让用户充满沉浸的视觉感受。引导页类型5.45.4.5动效结合文字引导页设计步骤5.5>>>1234搜集现实具象实物图片构思页面中呈现元素绘制草图设计引导页效果图1搜集现实具象实物图片

为了能够让用户迅速接收产品的主题，引导页中抽象的元素必须基于用户现实生活的认知。因此我们第一步是要搜集与主题相关的现实产品。例如在旅游的过程中，我们需要搜集的内容可以分为交通、旅馆、人物、行李以及经典景点等重要元素。2构思页面中呈现元素

前文中我们提到，每一个引导页都必须呈现一个明确的主题，且多个引导页应当具有延续性，故而我们每个页面的元素只能具有同样的主题，与主题无关的相关元素应当予以筛除。3绘制草图

根据上一步选择出的元素，用草图的形式绘制版式，对元素进行抽象画处理。4设计界面

根据线稿图，结合产品的品牌特征，绘制完整的引导页面详情页和个人页项目实战5.6项目要求：参考旅游类APP的引导页，提取旅行元素，设计一款针对年轻人旅行的APP引导页。要求主题鲜明，构图合理。5.6.1项目相关知识学生需要掌握下列几项知识点：5.6.1.1引导页的设计原则，具体请参看5.35.6.1.2引导页的类别，具体请参看5.45.6.1.3设计构思，并画出草图，具体请参看5.55.6.1.4设计效果图，软件操作技能，具体请参看5.4.45.6.1项目准备与设计APP图标项目实战3.5这个阶段，先要读懂题目要求，根据题目查找相关引导页的范例作为参考，整理范例的内容，考虑页面中需要表达的主题与元素。根据题目，寻找范例，观察范例

引导页设计实战5.6APP引导页项目实战5.6项目实战根据项目的要求，我们梳理总结出引导页中应当包含的元素包括：建筑物、人物、自行车以及远山、白云等意象。根据元素，找到对应的具象物品。APP引导页项目实战5.6项目实战根据找到的具象元素，提取其明显的特征，通过草图结合AdobeIllustrator软件，将每一个元素都独立呈现。APP引导页项目实战5.6项目实战通过之前学习的引导页构图的原理，我们