UI——day6.引导页的设计
认识引导页
定义: 出现在加载完启动画面之后、进入界面首页之前用户所见到的一系列画面。往往是第一次打开应用时出现的画面且仅出现一次。
作用: 在用户使用产品之前提前告知其主要功能与特点
看一下引导页中有什么元素?
图形、图片、文案、分页点、*跳过/关闭按钮(最后一页由进入代替分页点或添加进入按钮)数量要合理,一般在4页左右
包含元素及展现形式
文字与界面组合
优点:
能较为直接地传达产品的主要功能
缺点:
过于模式化,显得千篇一律文字与插图组合
优点:
活泼生动吸引眼球缺点:
设计耗时长,费脑动态效果与视频
优点:
生动直观,氛围活泼
缺点:
设计成本高,占用内存大,可能引起卡顿
新手的8种引导方式方式
- 蒙层引导(点击按钮/空白处)
- 气泡提示引导
- 动画视频引导
- 教学式引导(每操作一步就有操作反馈)
- 预加载任务(提前加载实例)
- 空状态引导
- 互动式引导
- 引导页
引导页的3种分类
根据引导页的目的、出发点不同,可以将其分为功能介绍类、使用说明类、情感共鸣类等
介绍功能类
最常见的引导页类型,对APP新版本的主要功能进行展示,让用户提前对新功能有一个大致的了解。
采用的设计形式一般是提炼功能点浓缩成一个标题或—句话,并以直观的图形来解释这个功能点,多用插图或者提取界面的形式。
使用说明类
对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。
可能出现在界面首页之前,用插图或者提取界面的方式将新功能的使用步骤演示绘制出来,以方便用户清晰地理解;也可能出现在界面中,以黑色半透明蒙版覆盖当前页面,在蒙版上解释功能或操作,此时以手绘居多。
情感共鸣类
根据产品定位和目标人群特点,用情感化设计传递产品的态度和价值观,让用户理解产品的基调的情怀,借以打动他们。
总结
要点一:基调要准确要点二:引导页是系列界面,一定保证风格统
要点三:文案很重要,根据实际情况与运营沟通
UI——day6.引导页的设计相关推荐
- UI设计实用干货素材|引导页模板
引导页设计原则 ①合理化原则.只做必要的内容引导,根据引导页的目的,出发点不同,大致可以将其分为产品说明类.使用说明类.推广类和问题解决类. 在设计之初就应该对需要设计的引导页进行充分分析,从而得出合 ...
- App引导页学习进阶临摹模板|UI界面设计步骤
设计一个成功的App引导页可以说是我们APP界面设计师需要重点用心对待的事情,因为APP引导页的设计取决于用户对这个APP的第一印象,或是大概的了解. 像素精简版 - 免费引导4 UI套件www.s ...
- 设计灵感|引导页设计中如何借助图形来展现场景?
一款APP最先呈现在用户眼前往往是从引导页开始,在这个情况下,一个APP设计的好坏.使用否能吸引用户可以在引导页的设计上有第一感知.想让APP设计更加有趣,引导页设计需要遵循简单的图形展示场景. 运用 ...
- 插画类引导页设计灵感|友好结合,总能带给人惊喜~
现在的APP数量越来越多,制作也是越来越精美,特别是引导页,各种APP都希望能在设计上 与其他APP区分开,从而给用户留下好的第一印象,并且更能吸引到用户的注意. 矢量插画与引导页的友好结合,总能带给 ...
- app启动页html模板,APP引导页设计的五种常见表现方式
app引导页,想必大家都很熟悉.目前来说,APP引导页设计并不是每一个APP的必备设计环节啦.因为一款App是否需要引导页,取决于每一个APP出发点或者说是用途. 比如,在功能引导页和操作引导页上的设 ...
- php 移动端隐藏引导页,移动端引导设计技巧1:前置的引导页
前言: 引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用 ...
- 如何做好App的引导页?(转)
http://uedc.163.com/12264.html 当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响 ...
- UI设计灵感|插画在引导页中的应用
引导页是指用户使用app时,能提前告知用户产品功能,特点与热门资讯的页面.在app设计中,一个精美的引导页能够极大地提高用户体验. 新手引导页几乎成了每个App的标配,如何通过简明扼要的文案搭配形象化 ...
- APP引导页UI设计素材模板|轻松留下完美的第一印象
App首次引导页是当你第一次打开一款应用的时候你看到的引导页,它们在你未使用产品之前提前告知产品的主要功能与特点. 先来看看 像素精简版引导UI工具包 好的实际案例,让初学者更友好! 美丽的用户界面, ...
最新文章
- kali使用openvas
- android自适应拉伸图片,Android 启动页-解决图片被拉伸和压缩问题,适配虚拟导航栏...
- 2018年4月1日 蓝桥杯 C/C++B组答案 乘积尾零
- python中函数和类的区别_Python中函数和方法的区别
- Qt-5种布局控件详解
- thinkphp内置标签简单讲解
- 的硬件报错_工程师经验:78%的硬件失效罪魁祸首 —— 焊接问题
- Hive的连接(join)方案
- 《设计模式详解》行为型模式 - 解释器模式
- 李宏毅机器学习——线性回归
- Python urllib2 设置超时时间并处理超时异常
- Javascript设置对象的ReadOnly属性
- c语言中专业英文词汇的意思,C语言常见英文词汇表
- 【记录】mmsegmentation 训练自己的数据集
- 室内定位技术的应用及室内定位技术的种类-新导智能
- Win10电脑怎么更改UEFI固件设置
- 二维占用栅格地图Occupancy grid maps
- 盘点那些计算机相关名词(二)
- SQL Server电影院数据库管理系统【英文版-源码】--(Movie Theatre Management System Database)
- 松下电视机竟暗藏魂斗罗游戏(哈哈哈)