引导页的设计

今天分享几条可以直接上手的引导页设计小技巧。正在设计引导页的小伙伴看过来了。...



♝点击上方“交互设计学堂”关注我们,送电子书

这是我在部门设计分享里的一篇分享。文章是在外网环境下写的，截图也大多是网上找的，不是公司产品。所以可以复制出来，发出来跟大家探讨一下。这一期的部门设计分享主题是“引导页的设计”。其实我们公司本身极少涉及到引导页的设计，但我们可以去学习互联网产品的设计，尽管设计的具体对象不同，但设计理念和方法是通用的。

引导页有多种类型，一种是功能的新手使用向导，比如有什么新功能，或者有改版，或者有一些可能比较复杂的功能，通常会使用遮罩效果一步步引导用户使用；另一种比较常见的是手机App的引导页面。今天重点说第二种。

尽管简单，但引导页通常是一个产品接触用户的第一个门面，第一印象很重要。平常我也有体验各种App的习惯，引导页是我一直想吐槽的地方，我不是很明白，有一些明明很简单的东西，为什么很多（甚至可以说是大多数）App都做不好？是因为不够重视还是有别的原因？欢迎探讨。

以下是我总结的几点引导页的设计建议。

半屏比全屏好

这一点在我之前的文章里有提到过，全屏的引导页给人的感觉是用户依然在门外，半屏遮罩的引导页更有种已经进门的感觉，虽然同样有个导游在跟你对话，但一个是在室外，一个是在室内，你可以感受到室内的环境氛围，让你迫不及待地想一窥全貌。



滑动进入首页而不是点按

引导页通常有多页，每一页之间是通过手指滑动来切换的，那么，当用户滑动第一页、第二页，直至最后一页时，是否“继续滑动开始进入首页”会比较舒适顺畅呢？但很奇怪的是，好多App都是个点按的按钮，每次都让我很无语。对于大多数用户来说，并不想在引导页花费太多时间，在这样的场景前提下，如此唐突的交互方式的变化是不是会突然打断用户的操作呢。



允许用户跳过引导

不是必须的步骤都应该允许用户略过，这点我想道理不用多说，但很遗憾的是还是有很多App没有这么做，包括BAT这些巨头的一些应用。

说一些有用的


这是@KentZhu 在微博上发的两个应用同一个场景的对比图，称之为“50分的设计与70分的设计”，两个方案的对比还是比较强烈的，左图的设计只是一张漂亮的图，加上几句无关痛痒的话，而右图则突出了文案，同时直观地把用户能获得的好处一项一项列出来，无论是文案还是排版都更胜一筹。引导页很重要，但是用户依然不会愿意花太多时间在上面，因此，最好是精简你的文案，删掉废话，用一句直白简单的话告诉用户能获得什么好处。

原文地址：http://jeffreyblog.com/archives/473

欢迎投稿：anhejiao@126.com

加老D私人微信18605817040，和老D一起学交互，老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。

交互设计学堂已经开设了新的栏目-行知书院，旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等，同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课，积少成多。已有134位小伙伴加入。详细了解行知书院>

    关注 交互设计学堂