引导页设计，与用户的第一次亲密接触

正文

请到「今天看啥」查看全文

使用说明类引导页可用于用户功能操作较多的应用，应用对用户在使用产品过程中可能会遇到的困难、不清楚的操作及误解的操作行为等进行提前告知。这类引导页大多直接截取界面上的视觉界面，然后蒙上一层黑色做为背景。前景采用箭头、圆圈对需要介绍的功能或者局部进行标识，一般以可爱卡通手绘风格为主。

引导页是连续滑动呈现的页面，所以这些页面必须成系列，这样界面会让用户感觉有统一的设计观感。那么如何让页面视觉统一。首先我们可以发掘共同的元素，让这些元素在页面中使用。这些共同的元素可以是一根线，让一根连续的线贯穿在三到四个界面中取得形式感的统一。

这是我的一期学生胡同学设计的prisms应用，运用了元素贯穿手法，让一根线贯穿整个引导界面的4个画面。为了避免线的单调，所以每个界面的文字采用了不用的线框形式。排版在界面中的不同位置。最后一个打开按钮，巧妙的把OPEN融入在线框中，这样的设计和谐而且统一。

贯穿的共同的元素可以是一根线，也可以是一个面。又或者是一个抽象的元素图形。

这个应用的（名字我不知道，也许是某大神概念稿）。颜色使用梦幻，渐变形式也都非常得统一，不过在连续图形上没有做到前后也关联。这样形式感缺乏了一点统一感。

贯穿的共同的元素， 不是随意的选择，最好与产品想表达的功能内容相关。 比如陌陌这个版本更新重点推荐的是一个视频功能。第一屏选择了使用摄像机投射出的光线构成了一个面，这个面贯穿了四个引导页。有电影里蒙太奇的感觉，非常的巧妙。

这个应用的使用了插画的手法绘制了一个骑车的场景，与单车运动的产品特色也相符合，构思巧妙的使用了一个连续的下坡路去贯穿了三张引导页。

除了产品本身功能可以让我们去发掘共同元素，另外有一种办法，就是寻找产品应用的名称去做两次设计。比如站酷的App发掘了ZCOOL这五个字母，分别为每个字母做了相应的设计。让人觉得灵动又巧妙，并且让用户一下记住了ZCOOL的字母。

这种提取产品logo做2次设计的方法不止可以运用在字母上，也可以运用在产品名称上，或者提取产品名称的一些关键字进行2次设计，例如卖萌货应用，提取了萌、浪、有料的关键词。

不管什么应用，都希望自己的设计风格高逼格，那么我们首先来说说如何设计高逼格的感觉。 首先大面积的留白是必不可少的，这样界面显得透气。 界面中只需要配上一个中心元素，文字最好可以竖排。然后字体一定要配上方正清刻本悦宋，或者方正大小标宋，方正中雅宋之类的字体。由于元素极少，所以此时中间的图片一定要二次处理，这样才不会显得杂乱。比如百度阅读的应用中心元素，共同使用了品牌绿色。

这是我的学生曾同学设计的《爱音》app，使用了大面积留白的方法，他的品牌色是紫色。不过引导页的主元素图片分别使用了不同的颜色，这样看起来比较违和。接受我的建议全部修改为品牌色，是不是统一和谐多了。

有一些功能介绍，真的不太方便用一个物体来抽象表达，怎么办了，这时候我们可以使用另外一种元素，田字格。田字中放置一个大大的中文标宋字。是不是依然逼格满满的？

田字格如果缩小做为画面的辅助元素，那么画面中的元素可以放大，画面可以选择插画形式，也可以使用人物模特。

请到「今天看啥」查看全文