• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 收藏起来!超实用的引导页设计基础手册

收藏起来!超实用的引导页设计基础手册

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含引导页设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

王M争: 老子曾经说过,「千里之行,始于足下」。这句话告诉了我们一个再简单不过的道理:再远的路只要一步步的去走,终会有到达的那一天。两千多年过去了,这句话同样适用于当前的互联网行业。

作为设计师,我们一直希望自己的产品可以给用户提供最好的用户体验。拿App来说,他们对这款产品的第一印象起始于引导页。第一印象产生的时间极短,但是它所带来的影响却要长远的多。如果说给用户构建一个完美的用户体验体系是我们的「千里」,那么引导页就是我们「足下」的第一步。所以一款app的引导页对于用户和产品之间纽带的建立是十分重要的。

什么是引导页?

引导页英文Onboarding原文意为新员工的入职培训。这与我们使用一款新App相类似,人们尝试新事物过程中会产生紧张与不安,引导页的作用就是短时间内让用户对这款产品有一个大概的了解,缓解用户的焦虑与不安,让用户更快的进入使用环境。

引导页的三个基本功能

引导页可以做的很简单,也可以做的很复杂。但是再简单的引导页也必须有三个功能:问候、传递信息和提升参与度。

问候

引导页是用户和这款App的第一次接触,她的作用相当于向用户进行自我介绍和问候。当然问候不意味着我们要真正写一个「Hi」或者「用户,您好」,有的时候一个吉祥物形象或者字符也能向用户传递问候。问候和介绍要尽量的简短,不要分散用户过多的注意力。

传递信息

这是引导页对于用户来说最重要的一项功能。优秀的引导页用户浏览后会对这款App的核心功能有一个大致的了解。此外引导页要起到操作说明书的作用,告诉用户如何快速上手操作,这会降低用户首次使用时的学习负担。

当然「用户的时间是有限的」,用户对于引导页更多的是一瞥而过,不会投入过多的精力。短时间内用户能从引导页中获取的信息是极其有限的,这意味着我们必须对引导页的内容做一个优先级筛选。只有真正重要的内容才能放到引导页中。

提升参与度

我们不仅要了解用户,也要让用户了解我们,要建立用户对于产品的依赖度。引导页通过展示产品的价值和功能,可以在用户心中建立对于产品的一个高期望值,而这高期望值会抵消首次使用时可能出现的负面情绪,保障用户不会在短时间内把你卸载。另外出彩的引导页会极大的提升新用户对于产品的好感,人类毕竟都是视觉动物。

引导页设计要素

不同的App有着不同核心功能和目标用户群,其引导页的框架与内容也是不一样的。但是每一款App的用户体验立足点却是相同的:用户需求、用户期望、产品性质、经营目标。引导页作为用户使用app的出发点,我们的目标是以一种动态的,易懂的和有吸引力的方式告诉用户这款app的基本信息。

引导页一般有3-4页,主要由图片、文字和动画组成。

图片

大多数人对图片的感知速度要比文字来得快。无论是拍摄的照片还是手绘的插画都可以充分的完成传递信息的功能。所以引导页中图片的合理使用会帮助用户在短时间内充分的获取信息。当然引导页中对于插画的要求不是很高,简单的iocn类插画也同样出彩。插画对于低年龄段用户来说有着巨大的吸引力。特别是对于青少年来说,他们很喜欢带有插画的引导页。

文字

对于引导页来说,文字是占主导地位的。引导页中文字要足够的简明扼要,降低用户的阅读时间。有的时候将一个长句子缩写成一个短句是比直接写一个长句要更加困难的,因为你必须学会从长句子中提取重要的信息。用户不会在引导图上花费很多时间,他们不可能一字一句去读,所以文字要尽量短小精悍。

动画

虽然用户对引导页不会给予过多的注意力,但是这并不意味着我们可以降低对引导页的视觉审美要求。引导页也要做的足够用心,要好看并且有吸引力。动画的应用可以给界面注入生命力,增加界面活力。有趣的动画可以很好的娱乐用户,这会提升他们对这款App的期望值。引导页中有些信息是比较重要的,采用动画我们可以将用户的注意力吸引过来。但是动画另一方面意味着更多的加载负担,更长的等待时间。所以对于动画的应用,设计师应该和开发进行深入的沟通务必达到最优的实现效果。

跳过选项

另一个我们需要考虑的要素就是是否要给用户选择跳过引导页的选项,因为不是每一个用户都愿意看这些引导图,即使是第一次使用的新用户。当然是否给用户跳过选项要根据对目标用户群的调查和分析才能做出决定。

总结

这是一个内容为王的时代,用户真正关注的是页面中的内容,这款App究竟能给我解决什么样难题,我通过使用这款App会带来哪些便利。用户对于界面样式的关注度不是很高,淘宝客户端更新了,采用了最新潮的渐变色,但是很少有用户在网购的时候会注意到这些。所以客观条件决定了设计师在内容页面中无法进行更多的改进与创新,引导页因为其巨大的包容性成为设计师发挥他们天马行空想象力的舞台,也是产品彰显其独特魅力的渠道。

欢迎关注作者的微信公众号:「王M争」

「如何做好用户引导!这里有几篇经典好文」

  • 《超全面指南!如何设计移动应用引导页》
  • 《讨厌引导页?这5个技巧帮你设计出眼前一亮的App引导页》
  • 《接地气教程!如何设计不会“见光死”的引导页?》
  • 《实战分析!4个优秀案例帮你掌握引导页设计方法》
  • 《腾讯实战干货!怎么让引导页不再是无用小透明?》

================明星栏目推荐================

优优教程网: UiiiUiii.com?是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 写给UI新手的APP结构指南:用户引导和提示
  • 8种引导方式,7个设计要点,让你全面了解新手引导!
  • 实战案例!新功能引导页设计思路总结
  • 看不惯又干不掉的引导界面,该怎么设计?
  • 收藏起来!超实用的引导页设计基础手册
  • 轻松看懂规范!详解组件控件结构体系之引导类
  • 让设计不再是小透明!超全面的用户引导设计指南
  • 如何在新用户引导流程中用好空状态界面?
  • 从零开始设计APP!快速提升引导页格调的设计方法总结

相关文章

  • 2017-08-06Bootstrap3.0学习笔记之特殊的效果(显示隐藏、消除浮动、关闭按钮等)
  • 2018-08-2336氪产品总监:四大分析法打造你的产品说服力
  • 2018-08-23用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)
  • 2017-08-06新手建站教程 十天学会做网站
  • 2017-08-21React 5 生命周期
  • 2018-08-232017年大家都在学习的服务设计,这篇文章带你快速入门!
  • 2017-09-29noe4j之cypher之where
  • 2018-08-23我们用这个设计方法,从零开始做出了「轻芒杂志」
  • 2018-08-23历时7天,168小时,超过100页的「复仇者联盟」PPT 免费下载!
  • 2018-08-23超全面!底部动作栏设计总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何适配iPhone X?来看滴滴出行的实战案例复盘!
    • 想成为互联网设计师?先来看这篇超全面的介绍!
    • 这些悬浮动效的常见玩法你都知道吗?
    • 用一篇文章,帮你看懂微软最新发布的「流畅设计体系」!
    • 腾讯内部分享!超全面的互联网金融体验设计的方法库
    • 画交互原型方案前,你应该思考的三个点
    • 这个超简单的教程,帮你学会C4D 制作动效的基础方式和流程
    • 时下流行的侧边栏导航到底好不好用?
    • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里
    • 优设网投稿规范

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有