在之前的文章《UI灵感库分类规范》中,有提到建立一个自己的灵感库的重要性。
结合最近看的一本书《刻意练习:从新手到大师》,里面提到了“心理表征”。简单来说就是,一件设计作品,大师可以看到普通人所看不到的东西。
受这个的启发,自己决定针对网站上的每个分类,分别寻找和研究几个页面,发现其中的一些规律并总结下来。
之前的工作模式基本上是,遇到了特定的需求后,才开始找相关的竞品、相关的页面。这种方法相当于遇到问题之后再去寻找答案。
而如果事先在脑海中积累了一定量的页面,并且熟悉其中的要点和规律的话。再遇到需求的时候,就会变成从很多解决方法中寻找一个最优解。解决完的需求又可以重新纳入自己的积累中,与现有的积累相联系。
我觉得,这样也许就是《刻意练习》中的心理表征吧。
今天要总结一下walkthroughs,也就是我们常说的引导页。
这里的引导页只是介绍产品的主要功能,我把涉及到登录和注册操作的引导页排除在外了。
首先,引导页可以分为两类:带图片的和带图标(插画)的。
以带图片的为例,可以把引导页的组成元素分成几个部分。
- 图片
- 介绍文字
- LOGO
- 开始按钮
- 跳过按钮
- 指示器
- 选择按钮
基本上引导页都包含了这些元素中的几个。
图片
图片可以分为两种形式,一种是可以做背景的图片,一般都会在图片上加一层遮罩;另一种是不可以做背景的图片,可以用各种形状,比如圆形、圆角矩形进行裁剪,得到想要的区域。
介绍文字
一般都会有一个小标题和一段简短的文字组成。
小标题用来概括功能,文字用来进行简单的说明,两者通常是在一起的,也有只有出现其中之一的情况。
LOGO
logo一般出现在页面的最上方
开始按钮
分为常驻和最后一页出现两种情况。
常驻的一般会出现在页面的中下部,并且长度比较长,方便用户进行点击。
最后一页出现的开始按钮,可以直接覆盖在指示器上,也可以覆盖在“下一步”上。
跳过按钮
跳过按钮一般会很隐蔽,可以是纯文字的形式,也可以跟常住的下一步摆在一起,比它重要性要低一点。
因为我们想让用户浏览引导页,以便了解我们产品的新功能。
指示器
指示器代表引导页的书目,可以有很多种形式:圆形、线、长方形、圆+图标等等。
选择按钮
除了左右滑动切换引导页之外,我们可以加入箭头,点击就可以切换页面。
可以是单向向右的箭头,也可以是左右都有的箭头,取决于需求是怎样的。
除此之外,图片可以和介绍文字组成悬浮卡片,使之整体作为页面中的一个元素。
图标也是类似的元素,在此就不做过多的介绍了。