文/税梦瑶 初次使用一款移动产品,用户经常会看见各种各样的引导页设计,,引导页的作用是在用户使用产品前,告诉其使用方式、产品功能及特色。引导页界面的设计不仅是操作步骤的设计,更应该是流畅、舒适、愉悦体验的设计,是充分利用使用者好奇心关注产品的设计。

app ios 设置引导页 app中引导页的作用_引导界面图标好大


app ios 设置引导页 app中引导页的作用_引导界面图标好大_02


①基本功能类。展示的主要信息是产品的常用功能,以便第一时间让用户了解产品的主要作用,一般视觉表现形式以文字与图片、图标相结合为主。


app ios 设置引导页 app中引导页的作用_视频播放_03


②使用方法类。该类引导页主要针对第一次使用产品或忘记某一不常用命令的用户而设计,主要介绍使用过程中可能遇到的各类使用方法、问题而预设的操作步骤,视觉表现形式有各类箭头、解释性文字、图形等。

app ios 设置引导页 app中引导页的作用_app ios 设置引导页_04


③意境传达类。该类引导页除了介绍产品主要功能、特色外,在界面设计的视觉语言风格上多采用带有意境的表现元素,以此传递产品的风格和内涵,同时也通过唯美或有趣味的界面形式吸引用户关注产品信息。

app ios 设置引导页 app中引导页的作用_app ios 设置引导页_05


④特色阐述类。该类引导页主要向用户阐述自身产品与同类竞品之间的差别与优势,直击用户的需求点。

app ios 设置引导页 app中引导页的作用_动效_06


①固定框架类。框架类引导页由简要精练的文案搭配该产品的功能框架组成。是引导页最常用的表现形式。常用于基本功能类和使用方法类界面。


app ios 设置引导页 app中引导页的作用_视频播放_07


②图文结合类。图文结合类主要由文字加图片、手绘插图的表现形式组成,在引导页设计中较为常见。具体组成的文字元素要求语句简洁外,还要结合产品的定位组织富有使用意境的插图。


app ios 设置引导页 app中引导页的作用_引导页_08


③动效展示类。利用上下滑动、左右滑动、拉伸放大、点击进入、退出等动效串联3至4个引导页界面,并搭配符合产品意境的音乐,用户在浏览引导页时,会产生新奇、有趣的使用体验,打破常规静态页面带来的单一、沉闷体验感受,从而增加对产品的关注度。

app ios 设置引导页 app中引导页的作用_视频播放_09


④视频播放类。引导页除了静态界面、动效引导方式外,还可以采用视频播放的形式展示产品功能和信息,例如:通过播放一段开场视频向用户传递产品的使用方式、功能,这类引导页设计多用于拍照、记录、交友、发布类多媒体等应用产品。


app ios 设置引导页 app中引导页的作用_动效_10


app ios 设置引导页 app中引导页的作用_引导页_11


针对不同目的和表现形式的引导页界面,在具体设计中应注意一些设计原则,从而吸引用户关注度,加强引导页的传达信息效果。


app ios 设置引导页 app中引导页的作用_视频播放_12


app ios 设置引导页 app中引导页的作用_视频播放_13


引导页的文案设计在字数上要严格把控,突出重点,一般应控制在九个字以内,过多则不易记忆,过少则表达不全,大标题或重点字下面可搭配一小段解释性文字。在版面布局上,文案不宜集中大段堆砌,应尽量简化,如若简化后仍文字过多,可以利用换行、艺术对齐等设计方式优化界面视觉感受。


app ios 设置引导页 app中引导页的作用_动效_14


app ios 设置引导页 app中引导页的作用_视频播放_15


引导页界面中的文案和图片重点不应过多,每个页面要有主要的目的,页面中所有的设计元素要紧紧围绕该目的进行布局。其中文案和图形要有主次之分,包括大小标题、解释性文案。其次所有组成界面的元素要形成主次视线流,即引导用户从主到次浏览信息。


app ios 设置引导页 app中引导页的作用_app ios 设置引导页_16


视线流的布局方式一般包括:上下布局、左右布局、弧形布局、折线布局等,具体的布局方式可根据界面主题灵活采用。


app ios 设置引导页 app中引导页的作用_引导界面图标好大_17


app ios 设置引导页 app中引导页的作用_app ios 设置引导页_18


引导页的界面感情流露包括两种表现方式:

①文案信息图化像表达。采用形象、直观的设计元素和背景图案来表达文案信息,例如:运用具象的小图标、简易故事人物等形象。目前很多购物类产品的引导页在设计上,会将背景图采用虚实交加的店铺建筑和商品插图风格,营造该页面购物信息的主题,给用户以轻松、愉悦的购物环境感觉。

app ios 设置引导页 app中引导页的作用_引导页_19


②交互式使用体验。引导页面中适当加入动效等交互使用体验方式,可以増强用户浏览页面的参与性和趣味感。


app ios 设置引导页 app中引导页的作用_动效_20


app ios 设置引导页 app中引导页的作用_视频播放_21


引导页应根据产品的风格与定位组织设计元素,营造适合产品的风格与氛围,例如:消费型、娱乐型、游记型、软件工具型等产品的定位是不同的,由此产生的引导页是严肃、有趣、清新、活泼还是其他风格也是不一样的。


app ios 设置引导页 app中引导页的作用_app ios 设置引导页_22


在视觉变现形式上也有不同的选择,严肃风格界面表达较严谨,多为模块式界面;趣味风格可采用手绘插图、动态效果等设计手法;清新风格常用有意境的背景图片搭配文案。当然设计手法并不是绝对的,设计师应根据产品特点灵活采用适合产品基调的元素和手段。


app ios 设置引导页 app中引导页的作用_引导界面图标好大_23


app ios 设置引导页 app中引导页的作用_视频播放_24


任何用户在第一次使用产品时,对产品界面上的内容都是陌生的,并且每个用户面对同一引导界面的反应是不一样的,会产生不同的使用问题,因此在引导页设计时,需要提前做好用户使用情况调研,模拟使用情景,对各种可能产生的问题设计出应答的方法。


app ios 设置引导页 app中引导页的作用_视频播放_25


例如:某一按钮的用途是什么,点击前、中、后的不同反馈形式;某一图标放在什么位置容易被用户识别;某一颜色的改变有什么意义等,这些引导图标必须正确、友好的提示用户如何正确使用产品,第一时间解答用户的疑惑。


app ios 设置引导页 app中引导页的作用_引导页_26


引导页的设计,其功能性、使用性与美观性同等重要,应在深入研究产品定位的基础上,从用户使用产品的角度和目的出发,切合用户需求点,运用合理、巧妙、贴合产品特性的设计元素进行界面设计。


app ios 设置引导页 app中引导页的作用_动效_27