App应用引导页设计教程

  引导页是用户在首次安装并打开App应用后,呈现给用户的说明书。目的是希望用户能在最短的时间内,了解这个应用的主要功能、操作方式并迅速上手,开始体验之旅。既然是说明书那难免不受待见,因为我们的用户总是傲娇,他们不喜欢被教育、被说明,他们喜欢一口气划过引导页,直接上手,但是在碰到问题、遇到挫折的时候又会各种别扭。所以这就需要设计师非常用心的去处理引导页的设计。

  丰富多彩、风格迥异的引导页设计

  有些引导页则沉稳大气,适合资讯类的应用,给人以可信赖感。例如搜狐新闻客户端的引导页设计,摒除了所有多余的设计,用干净的界面及有力的文字体现了整个应用真实可信的媒体平台的定位。


  图01

  有些引导页则轻松、活泼,适合日常工具或者休闲类的应用,让用户感受到贴心和放松。例如UC手机浏览器,由用户使用浏览器常见的下载麻烦的情景来穿起整个引导页,像一副四格漫画一样让用户带着浏览漫画的心情,轻松地阅读完整个引导页,同时也强调了使用UC浏览器下载的轻松便捷。


  图02

  还有一些引导页则富有生活情趣,适合一些文艺、小清新的应用,因为这部分应用的用户不一定喜欢标新但一定立异,不喜欢随大流。


  图03

  一套好的引导页的构成,怎样做到引人入胜

  好的引导页设计是从展示内容到设计风格再到语言文字都经过细致考究并与应用整体气质符合的。

  1. 展示内容要简明扼要,只捡最重要的说,用户虽然傲娇但是我们也不能一味的去贬低用户的理解能力及手机使用经验,如果只是新功能的推荐我们完全可以只告诉用户入口,而不是事无巨细的详细列明每一步的操作,把一个好好的引导页活生生做成一个帮助教程页。如果是新的交互及操作方式,我们也可以只展示最核心、关键的操作,要留给用户探索和发现的余地。

开发教程">
  图04

  2. 展示内容应当连贯有一定的逻辑关系,所有的内容都按照一定的顺序有机的排列。如先是亮点模块的介绍再是应用整体呈现,或者按照一个主打功能的操作流程介绍。总之做到有主有次,再到最后静静等待用户点击“开始体验”那一刻。


  图05

  3. 每页只放一个内容。有时候想表现得东西太多,不妨拆分成几页,因为引导页使用情景决定了,它是用户在下载完应用后急切地想见到主界面使用应用前的绊脚石,极有可能的场景是用户很快速的划过引导页,一页上太多信息,只会让用户更快速的划过引导页。如果我们保证每一页的内容都非常简洁的话,用户就算走马观花的划过也能记下一些东西。每一个画面都有一个重点。可能是文字也可能是图。


  图06

  4. 设计风格,正如上面说到引导页的设计风格要与产品的气质保持一致,如果是一本正经的新闻资讯类应用。那它的引导页风格也是稳重、正统的。而娱乐类的应用可能有更情感化的表现形式,例如漫画形象的应用或者是大幅背景照片的运用。在设计细节上,现在也有越来越多的引导页运用到线描的插画,这样既可以更方便、准确的传达操作方式、使用场景等复杂信息又可以增加亲和力减少说教带来的用户反感。还有局部放大、手绘箭头等也功能介绍时常用的表现手段。


  图07

  5. 在文案上也是需要非常考究的,要使用用户听得懂的词,不要让用户脆弱的自尊受到伤害。比如“点击Title Bar,您可以…”,不如换成“点这儿试试呢,您还能…”

  总之 ,好的引导页设计,不是一本冷冰冰的说明书,不是让用户脆弱的自尊饱受凌辱,而是让用户由里及表、由内而外的感受到自己受到非常良好的对待。这需要设计师真正从用户的角度去理解用户对于引导页的需求及用户阅读引导页的场景。

时间: 2016-08-03

App应用引导页设计教程的相关文章

深聊一组效果显著的引导页设计案例

  最全面的设计优秀案例全面解读!今天腾讯的同学分别从产品属性.设计载体.屏间交互以及扁平风4方面各自挑选了一组顶尖的案例来分析,在引导页设计方面木有经验的设计师,将这4个方面作为参考借鉴,工作起来容易上手,非常方便,强烈推荐哟. 随着苹果ios8的发布,可以看到App store货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师.市场宣传相继关注的焦点,产品宣传的下一轮引爆点.作为能在App store上先发触达地形成前期推广的视频预览,又会否影响到App安装完毕后的引

移动界面设计技巧:引导页设计技巧总结

文章描述:引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式.为了完成不 前言: 引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体

22个知名APP启动引导页设计欣赏

  启动引导页面设计对APP来说非常重要,简洁的3-5个页面传递给用户APP更新的重要功能.引导用户体验.重大活动推出等等.设计师该如何设计呢?本文精选了22个APP启动引导页,供大家参考. 陌陌 百度地图 QQ 2014 QQ 手机QQ浏览器 糯米 高德地图 易信2014 高德地图 2013圣诞节 马蜂窝 来往 3.8淘宝生活节 2013天猫双十一活动 微博 微视 聚美优品 One 豆瓣 当当 百度文库 QQ电影片  

如何让用户最短时间内接受应用:引人入胜的引导页设计

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 引导页是用户在首次安装并打开应用后,呈现给用户的说明书.目的是希望用户能在最短的时间内,了解这个应用的主要功能.操作方式并迅速上手,开始体验之旅.既然是说明书那难免不受待见,因为我们的用户总是傲娇,他们不喜欢被教育.被说明,他们喜欢一口气划过引导页,直接上手,但是在碰到问题.遇到挫折的时候又会各种别扭.所以这就需要设计师非常用心的去处理引导页

如何做好App的引导页?

如 何做好App的引导页? 时间:2014-09-25 02:45 来源:网易uedc 作者:battle_pan 当你第一次打开 一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的 好坏会极大地影响到后续的产品使用体验.因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜.那接下来我跟大家一起来探讨关于引导页的设计. 一.目的区分 根据引导页的目的.出发点不同,可以将其分为功能介绍类.使用说明类.推广类.问题解决类,一般引导页不会

APP设计欣赏课堂:引导页设计赏析

  摄氏度:在APP的启动页做品牌展示后,越来越多的开发者开始打起了前置引导页的主意,广告营销.操作教程.品牌引导--显然引导页可以做的东西比启动页要多,同样更多的启动页正在被开发者们玩坏. 奥卡姆剃刀原理:如无必要,勿增实体.绝大部分情况下,引导页都无存在的必要,让用户第一时间接触APP才是最重要的事情. APP操作教程类:Taasky & Wthr & Launch Center Pro APP功能说明类:Yummly & Sosh & Yahoo News Diges

如何设计移动应用引导页

  编者按:今天的译文绝对值得设计师收藏!来自设计网站的龙头老大Smashingmagazine,专业全面,条理性强,一篇文章几乎包括了移动应用引导页的全部设计方式,还分析了知名APP的反面例子,可以说是搞定引导页的最实用指南,赶紧来学习下! 译文很用心,原文有误的地方都有提醒,欢迎同学们关注译者的微信公众号"开卷有译". 如今,移动应用对首次使用的用户呈现欢迎页这种方式已经越来越流行了.这样做的目的就是向用户介绍并展示我们的应用. 引导页往往是与用户进行交互的第一组界面,于此同时,这

3秒即灭,APP引导页如何闪亮

  大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾.这也不能完全怪俺,小学的时候语文就没考过100分,害怕写的浅了不疼不痒,浪费看官们 陪女朋友的时间;写的太深了吧,咱又不是大老粗搞学术研究. 看官不要着急,咸淡结束,这就进入正题. 今天主讲:如何做App安装引导页(心急的同学可以直接跳转到第二部分) 一个好的App引导页,能够最迅速地抓住使用者的眼球,让他们快速了解App的价值和功能,起到很好地润滑和引导作用.一句话说的好,好的u

如何设计受欢迎的引导页?

  迎客入门,该大方热情还是谦卑有序?是张灯结彩还是朴素平常?对于引导页来说,这都得看产品的调性.今天分享一篇好文,针对不同类型的软件,提出切实可行的具体建议,是引导页设计不可多得的好教程,赶紧来学习吧! 当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验.因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜.那接下来我跟大家一起来探讨关于引导页的设计. 一. 目的区分 根据引导页的