辑导语:关于启动页和引导页,我们在每个APP都可以看到。做好这两个页面,是用户了解产品的基础一步,也是用户最先了解产品的第一个窗口。因此,该如何设计启动页与引导页,才能够吸引他人?作者总结了一些自己的经验,与你分享。
启动页与引导页设计几乎是每个APP必备的。
在产品上架前期,设计师们通常会集中设计产品启动页与引导页。启动页与引导页是用户了解产品的第一个窗口,能给用户留下初印象~最近刚做完新产品的启动图与引导页设计,分享自己关于做启动图、引导页学到的相关知识与经验总结,希望对大家有所帮助,欢迎一起交流学习呀~
启动页:当用户打开APP时,在启动APP的过程中被用户所看到的过渡页面或动画都被称为启动页。
作用:
特点:
启动页的形式比较多样化,但UI设计师在产品上架前期主要还是设计以产品内容或品牌为主的品牌启动图,介绍产品核心服务与传递品牌,本文主要介绍的是APP品牌启动图这种形式。
其他的,比如广告页、节日闪屏等运营类的启动页形式,我们知道有这种过渡页面存在就行了,这里就不做过多介绍了。
引导页:当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页,帮助用户更加清晰的了解产品定位与功能服务。
作用:
特点:
启动图设计形式启动图常见的设计形式有纯背景+图标/slogan、背景图片、漂浮图标、品牌渗透这4种形式。
纯背景+图标/slogan在纯色背景上,融入产品启动图标或产品slogan。这一种是最简洁也是最经典的启动图设计形式。简单有力的宣传产品品牌、传递产品服务理念、加深用户对产品印象。
设计小tip:设计这种形式的启动图,我们需要注意页面的视觉平衡。上下比例建议采用0.86:1很多设计师在对齐的时候会直接采用工具的垂直居中,我们可以来对比看一下直接垂直居中与微调后的视觉感受~
很明显,直接采用垂直居中,上下比例为1:1的话,视觉中心是有些往下掉的;我们需要往上进行调整,达到视觉平衡。NAVER的改版设计中,专门将启动页的比例由1:1调整为了0.86:1,让视觉达到舒适。
背景图片采用图片或短视频作为背景图。图片或视频的选取需要符合产品调性。这种设计形式更加直观,具有场景感,能带来更大的共鸣,具有沉浸式体验。最具代表的就是微信的启动图了,仅靠一张图片就形成了产品的记忆点。
政务类产品启动图常选用当地的地标建筑或区域特色作为启动背景图。
漂浮图标将与产品相关的功能服务图标飘散浮动在整个页面中。最具代表的就是淘宝的启动图。
品牌渗透品牌渗透设计形式是目前市场上应用得最多的。采用插画、3D等设计手法,结合产品IP形象、品牌符号等与品牌相关的元素进行融合设计,加强品牌推广,形成品牌记忆。
品牌渗透的设计形式有:a.将品牌图形与服务场景进行融合设计利用插图或3d的形式将品牌图形与功能服务场景相结合,这类设计形式也是比较流行的,既能直观的展示服务场景又能很好的宣传品牌。
b.品牌符号因为启动图时间特别短,将产品的品牌符号放大或者重复排版,从而加深用户对产品、品牌的记忆,这也是一个比较讨巧的方法。
c.IP形象启动图展示产品的IP形象,加强用于与产品IP的链接。最经典的就是QQ的企鹅开屏,这么多年都是一直保持这种设计形式。
引导页动图设计形式引导页设计除了帮助用户更加清晰的了解产品定位与功能服务外,现已成为每个app的仪式感设计。
每次下载新的app后,自己也很期待看到产品的引导页,通过引导页来推测整个app的设计调性~引导页设计内容相对来说比较固定,一般为文案(主副标题)、图形部分、轮播器、按钮这四部分。
设计形式也主要为插画、3D、实景图片这3种设计形式。
插画设计形式这是市场上应用得最多的设计形式,分为扁平化插图与2.5D插图形式。
3D元素随着3D设计形式的流行,3D元素在UI设计中越来越常见。3D图形比扁平化的图形更加直观立体、具有场景感,在引导页中的应用也越来越多。
实景图片采用实景图片或视频形式,让画面更具场景感,具有沉浸式体验。这类设计形式更适合旅游类或短视频类产品。
一个产品的启动图与引导页设计(特别是启动图设计)是很具有代表性的。我们可以从启动图与引导页看出产品的设计调性与服务理念,个人觉得这两个模块也是值得设计师花心思做的~
结合产品服务与品牌进行设计方案探索,也是很有趣的。以上就是自己关于启动图与引导页的部分设计见解与解析,欢迎大家多多指教呀~
本文由 @小鱼晴子 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
/张丽 引导页即是用户在首次使用软件时进行产品推介和引导的说明书,使用户在最短的时间内了解这个软件的主要功能、操作方式,以便于迅速上手。
引导页具有指引用户了解和掌握软件应用的功能、特性操作方法等作用,根据软件应用的安装情况,从位置上一般将引导页分为前置引导和中间引导。
①前置引导。
所谓前置引导即在用户安装完成软件应用,并第一次打开的时候出现的引导页,该引导页一般由2到6页连续或不连续的相关页面构成,某些应用引导页可达10页。
前置引导是用户使用软件应用前所看到的内容,此时用户对所安装的产品了解并不多,对于产品的功能、布局、具体操作方法等内容还没有相关的认知。
所以前置引导担任的作用主要就在于介绍产品的概况内容、核心功能、比同类产品更具竞争力的功能,以及重要的操作步骤等。
②中间引导。
对于版本更新的软件应用,采用中间引导是一个常见的选择。
中间引导往往是对已有版本更新升级后,新功能的一些说明性操作指导。
在第一次使用有新功能出现的页面或操作中弹出指导性的说明界面,能够让用户快速掌握新功能的使用,而不会因为对新功能的不解造成使用上的困扰。
中间引导在设计中常用比较贴近用户的俏皮口语进行引导,而非正式官方的书面用语。
因为在使用过程中,用户往往更倾向于舒适满意的服务性语言,而不使用说教形式的官方用语。
设计中多用卡通形象进行引导,以对话的方式逐步提示使用户带入感更强,更利于引导内容的呈现,避免了用户的反感。
①合理化原则。
只做必要的内容引导,根据引导页的目的,出发点不同,大致可以将其分为产品说明类、使用说明类、推广类和问题解决类。
在设计之初就应该对需要设计的引导页进行充分分析,从而得出合理化的设计方案。
②优化编排原则。
引导页最常用设计方式有文字与界面组合、文字与插图组合、动态效果与音乐、视频特效等。
常用的编排有逐一展示故事串联、应景节日等,逐一展示是将一个个内容总结成点并顺序排列出来,各点之间没有必要的关联。
③眼球效应原则。
有效地吸引用户的眼球才能使引导页面起到事半功倍的效果,需要将焦点聚集在重点阅读的内容上,才能达到突出信息的目的。
聚焦可以通过光影突出、虚化背景、放大镜突出内容等方式来实现。
眼球效应还可以通过交互效果、动画和视频来实现。对于泛滥的静态引导页面来说,采用动态内容更能够吸引用户的注意力。所以除了采用静态的表现方式,还可以通过增加合适的动态内容来吸引用户的眼球。
采用不一样的引导页切换方式,也可以吸引用户的眼球。一般引导页的切换都是从右向左滑动切换,对于用户来说没有多余的学习负担,但长久以后就会麻木从而感觉没有创意。
可以通过设计出具有新意的切换方式来博取用户的关注,比如类似抽取、刮开、上下等切换形式,在合适的时候能取得与众不同的效果。
引导页在交互设计中应当根据项目需求来制定设计方案,并且需要根据产品的受众及竞品等调研进行合理化设计。
引导页的设计对于新用户来说是非常重要的,而功能性的升级版本中的引导页也能让老用户快速掌握新升级功能,能起到很好的辅助作用,提升用户体验。
总之,引导页设计是APP的设计重点之一。
们在打开APP时候总会跳出一些页面,有人说是启动页也有人叫开机图,各种叫法让人傻傻分不清楚。那么在启动APP的时候我们看到的页面到底是什么,又有什么区别呢?下面就是关于启动页、闪屏、引导页的简单的归纳和总结,希望对大家有所帮助。
当app被用户打开时,在app启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。
APP在用户打开过程中需要一定的时间,启动页的展示是为了给用户一个过渡页面,缓解用户打开app时等待的焦虑心情。类似于在app在加载过程中loading动画一样,都是为了通过设计的手段来解决用户的焦虑情绪。
规范型和品牌推广型
(1)规范型
根据 iOS 和MD 的官方定义来,用户打开应用能立即使用是最好的体验,例如苹果系统自带的一些应用,是没有闪屏的;或者把闪屏设计的和首页很像,类似 国外的instagram
(2)品牌推广型
国内很多APP为了体现产品的品牌,强化用户对品牌的记忆,一般启动页会由:产品名称+产品形象(logo)+产品广告语(slogan)组成。闪屏设计多数较为精简,主要目的是为了突出产品特点,不宜内容太多,太过复杂,且不易经常更换,打断用户对品牌的认知记忆,类似国内的淘宝、优酷等。
启动页为一张静态图片,不可点击,不可跳过
闪屏页约等于启动页,又叫做开机广告。由于闪屏主要用于活动推广,商业上的广告宣传,容易造成用户排斥心理,所以这类闪屏多数有倒计时和跳过的功能。该页面出现在启动页之后,类似京东、爱奇艺等国内大多数应用,在冷启动出现启动页之后有时候紧接着还会出现广告闪屏。
广告推广型、活动推广型、节日关怀型。
(1)广告推广型
产品为了通过流量变现,在此区域给一些商家提供广告宣传。
(2)活动推广型
有时候产品在运营过程中会策划一些行销活动,该区域就作为活动的宣传口。活动推广型闪屏着重体现活动的主题,用户利益点,以及营造活动氛围。
(3)节日关怀型
在节假日到来时,很多APP会通过营造节日气氛来体现人文关怀。目的主要是通过情感化得设计给用户带来节日祝福,提升用户的对产品的好感度,提升产品本来的品牌调性。且此类闪屏多采用插画类的手法,对设计师的表现力比较强的需求。
引导页可以为一张静态图片,也可以是个动态短视频,有倒计时和可以跳过,跳过后进入app首页。
用户第一次安装app或者app更新后首次启动时展示的3-5个可滑动的页面。主要是向用户展示产品的功能和产品亮点。
功能介绍性、推广介绍型、问题解决型
(1)功能介绍性
通过简洁明了的设计和通俗易懂的文案提炼产品特色功能,把产品信息传达给用户。需要注意的是保证信息展示一针见血,切记啰嗦反复,引导页数控制在5张以内,避免过多的页面造成用户反感。
(2)推广介绍型
主要目的是传达产品的思想和态度,告诉用户产品的使命和情怀。这一类的引导页需要做到吸引用户注意,引发用户的共鸣。
(3)问题解决型
问题解决类通过描述在实际生活中会遇到的问题,直击用户痛点,通过最后的解决方案让用户产生情感上的联系,让用户对产品产生好感,增加产品粘度。
可以左右滑动切换页面,一般最后一页有引导按钮,可以寄点击进入app。
本文由 @Sevenmoon 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
*请认真填写需求信息,我们会在24小时内与您取得联系。