UI组件库（1）——Walkthroughs

「KILL ME」「Nahaki」の漫画 [pixiv].jpg

在之前的文章《UI灵感库分类规范》中，有提到建立一个自己的灵感库的重要性。

结合最近看的一本书《刻意练习：从新手到大师》，里面提到了“心理表征”。简单来说就是，一件设计作品，大师可以看到普通人所看不到的东西。

受这个的启发，自己决定针对网站上的每个分类，分别寻找和研究几个页面，发现其中的一些规律并总结下来。

之前的工作模式基本上是，遇到了特定的需求后，才开始找相关的竞品、相关的页面。这种方法相当于遇到问题之后再去寻找答案。

而如果事先在脑海中积累了一定量的页面，并且熟悉其中的要点和规律的话。再遇到需求的时候，就会变成从很多解决方法中寻找一个最优解。解决完的需求又可以重新纳入自己的积累中，与现有的积累相联系。

我觉得，这样也许就是《刻意练习》中的心理表征吧。

今天要总结一下walkthroughs，也就是我们常说的引导页。

这里的引导页只是介绍产品的主要功能，我把涉及到登录和注册操作的引导页排除在外了。

首先，引导页可以分为两类：带图片的和带图标（插画）的。

以带图片的为例，可以把引导页的组成元素分成几个部分。

基本上引导页都包含了这些元素中的几个。

引导页示例.png

图片可以分为两种形式，一种是可以做背景的图片，一般都会在图片上加一层遮罩；另一种是不可以做背景的图片，可以用各种形状，比如圆形、圆角矩形进行裁剪，得到想要的区域。

一般都会有一个小标题和一段简短的文字组成。

小标题用来概括功能，文字用来进行简单的说明，两者通常是在一起的，也有只有出现其中之一的情况。

logo一般出现在页面的最上方

分为常驻和最后一页出现两种情况。

常驻的一般会出现在页面的中下部，并且长度比较长，方便用户进行点击。

最后一页出现的开始按钮，可以直接覆盖在指示器上，也可以覆盖在“下一步”上。

跳过按钮一般会很隐蔽，可以是纯文字的形式，也可以跟常住的下一步摆在一起，比它重要性要低一点。

因为我们想让用户浏览引导页，以便了解我们产品的新功能。

指示器代表引导页的书目，可以有很多种形式：圆形、线、长方形、圆+图标等等。

除了左右滑动切换引导页之外，我们可以加入箭头，点击就可以切换页面。

可以是单向向右的箭头，也可以是左右都有的箭头，取决于需求是怎样的。

除此之外，图片可以和介绍文字组成悬浮卡片，使之整体作为页面中的一个元素。

图标也是类似的元素，在此就不做过多的介绍了。

「手をとって」「爽々＠作品集発売中」のイラスト [pixiv].png