关于引导页的整理与分析.pdfVIP

关于引导页的整理与分析 随着ui设计的不断发展 ，引导页的形式也在随着变化 ，根据不同产品的 性 ，其作用与意义 也不尽相同。本文将分别从“静态引导页”与“动态引导页”两种形式与大家分享我对于“引导页” 的一些认识。 狭义上 ，我们一般认为在初次打开应用时跳出的几张介绍应用功能的页面叫做引导页 ；从广义上 来说 ，在用户使用某个功能前就达到帮助用户理解和使用 ，降低用户学习成本功能的页面或存在引 导属性弹窗的页面都可以称为引导页。 一、静态引导页 好奇心日报是一款商业资讯类的app ，在引导页上选择了以大图作为背景的形式 ，四张图片为用户 营造了一种偏商务、商业风格的场景。 从配色上设计者选择了白色与app识别色 －黄色 ，当用户在浏览完引导页之后进入主界面时不会有视 觉上太大的落差 ，识别色也给用户留下了相对深的印象 ，容易让用户记住产品。设计者将文字内容 分为两级 ，我们可以清晰的看到粗体被放大的标题型文字与细小的描述型文字。标题型文字将应用 的内容重点提炼展示 ，描述型文字为其作补充 ，为用户展示“好奇心日报”这款应用的内容。 页面的切换方式为横向切换 ，这也是我们常规的切换方式 ，那么下面我们来看一款不一样的切换 方式。 这是一款为用户提供旅行攻略的应用 ，首先设计者选择了一种扁平化的风格 ，用圆点连接每一张 页面 ，以屏间交互的方式引导用户展示应用的内容。 同样作为内容展示的作用 ，下面为大家介绍360Camera的设计风格。 360Camera点设计者采用渐变背景搭配轻拟物的风格为用户展示了应用包含的“摄像”、“扫一扫”、“ 图片编辑”等功能内容。 文案上 ，用红色放大的字体将这三个内容强化 ，让用户能够一目了然。 淘宝 计步器 这两款应用采用了明暗突出的形式 ，相比之下 ，淘宝采用了比较风格化的形式 ，但他们同样起到了 操作指引的作用。 qq采用了萌系的卡通风格 ，以用户熟知的吉祥物作为主角对本次更新的功能进行描述。 同样以功能更新说明作为目的还有36氪。 36氪采用了一种比较 殊的弹窗风格 ，当用户触发模块时才会弹出该模块本次的更新 ，这是一种用 户体验的提升 ，对用户来说只有“我”关注的才是“有用的” ，产品设计者以这一方式帮助用户屏蔽“无 用的”信息。 这里我们看到这是微信引起行业内热烈讨论的几个版本之一 ，黑色底配上文字加手绘 ，整个页面看 起来很简单 ，但细细品读却又引发思考。将即时聊天做到相对完美的程度之后 ，微信针对“朋友圈” 又做了一次精彩的内容运营。 说到微信就不得不说支付宝 ，支付宝9.9更新也在业内激起浪潮 ，纷纷揣测支付宝是不是要做社交 ， 这里不做展开 ，但是不得不说这一版的引导页让我眼前一亮。 支付宝作为一款与“钱”挂钩的应用 ，用户关注的重点也一定是“安全” ，首先设计者采用了工业设计图 的风格对图案进行设计 ，众所周知工业设计图必须保证精准性 ，这样的图案给用户一种“严谨”的心 理暗示 ，让用户对支付宝产生信任感。 文案上 ，支付宝将自己与蒸汽机、电灯、自行车、飞机作类比 ，用“异想天开”、“天方夜谭”、“荒诞 无稽”和“痴人说梦”来描述当时环境下这些发明在世人眼中的形象。将支付宝形象拔高 ，向用户展现 情怀 ，达到品牌营销的目的。 如果要给支付宝9.9版的引导页找缺陷 ，那么我认为是用户场景考虑不够 ，页面缺少“跳过”按钮 ，工 具类应用就是为用户解决问题 ，当用户处于一种急需支付的状态打开应用时 ，用户需要划过五张对 当前状况毫无帮助的页面 ，反而对用户是一种负担。 二、动态引导页 随着技术发展 ，各种各样的展现形式被加入移动端设计中 ，下面我们来看一看精彩的动态引导页 设计。 格志引导页效果预览 格志选择用线框动效搭配文字来对功能进行展现 ，同时也为用户的操作提供引导和帮助。除了初次 进入应用时可以观看到动画 ，当用户不清楚操作时仍可以通过“设置”模块再次观看动画。 这是“什么值得买”早期的一版引导页 ，采用了定格动画的形式 ，作为用户 ，我在观看的时候出了感 觉形式新颖之外并没有为我提供任何帮助或者让我加深对这款应用的认识 ，当然这只是我的个人 感受 ，如有不同意见欢迎讨论。 从截图可以看出 ，猫弄的设计是比较风格化的 ，打哈欠的猫咪嘴巴不断张大从里面游出鲸鱼 ，鲸鱼 带起的浪花中又冒出奇怪的八抓鱼……你永远不知道下一个会出现的是什么 ，最后页面进入一张“定 制你感兴趣的主题”页面。 有的人不禁问这算什么引导 ？其实 ，猫弄是一款号称“致力于抗击无聊的高质量文化社区” ，打开应