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

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