AMO全媒体运营
首页 知识星球 APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

初次使用一款移动产品,用户经常会看见各种各样的引导页设计,,引导页的作用是在用户使用产品前,告诉其使用方式、产品功能及特色。引导页界面的设计不仅是操作步骤的设计,更应该是流畅、舒适…

初次使用一款移动产品,用户经常会看见各种各样的引导页设计,,引导页的作用是在用户使用产品前,告诉其使用方式、产品功能及特色。引导页界面的设计不仅是操作步骤的设计,更应该是流畅、舒适、愉悦体验的设计,是充分利用使用者好奇心关注产品的设计。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

①基本功能类。展示的主要信息是产品的常用功能,以便第一时间让用户了解产品的主要作用,一般视觉表现形式以文字与图片、图标相结合为主。

APP引导页设计!引导的艺术

②使用方法类。该类引导页主要针对第一次使用产品或忘记某一不常用命令的用户而设计,主要介绍使用过程中可能遇到的各类使用方法、问题而预设的操作步骤,视觉表现形式有各类箭头、解释性文字、图形等。

APP引导页设计!引导的艺术

③意境传达类。该类引导页除了介绍产品主要功能、特色外,在界面设计的视觉语言风格上多采用带有意境的表现元素,以此传递产品的风格和内涵,同时也通过唯美或有趣味的界面形式吸引用户关注产品信息。

APP引导页设计!引导的艺术

④特色阐述类。该类引导页主要向用户阐述自身产品与同类竞品之间的差别与优势,直击用户的需求点。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

①固定框架类。框架类引导页由简要精练的文案搭配该产品的功能框架组成。是引导页最常用的表现形式。常用于基本功能类和使用方法类界面。

APP引导页设计!引导的艺术

②图文结合类。图文结合类主要由文字加图片、手绘插图的表现形式组成,在引导页设计中较为常见。具体组成的文字元素要求语句简洁外,还要结合产品的定位组织富有使用意境的插图。

APP引导页设计!引导的艺术

③动效展示类。利用上下滑动、左右滑动、拉伸放大、点击进入、退出等动效串联3至4个引导页界面,并搭配符合产品意境的音乐,用户在浏览引导页时,会产生新奇、有趣的使用体验,打破常规静态页面带来的单一、沉闷体验感受,从而增加对产品的关注度。

APP引导页设计!引导的艺术

④视频播放类。引导页除了静态界面、动效引导方式外,还可以采用视频播放的形式展示产品功能和信息,例如:通过播放一段开场视频向用户传递产品的使用方式、功能,这类引导页设计多用于拍照、记录、交友、发布类多媒体等应用产品。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

针对不同目的和表现形式的引导页界面,在具体设计中应注意一些设计原则,从而吸引用户关注度,加强引导页的传达信息效果。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

引导页的文案设计在字数上要严格把控,突出重点,一般应控制在九个字以内,过多则不易记忆,过少则表达不全,大标题或重点字下面可搭配一小段解释性文字。在版面布局上,文案不宜集中大段堆砌,应尽量简化,如若简化后仍文字过多,可以利用换行、艺术对齐等设计方式优化界面视觉感受。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

引导页界面中的文案和图片重点不应过多,每个页面要有主要的目的,页面中所有的设计元素要紧紧围绕该目的进行布局。其中文案和图形要有主次之分,包括大小标题、解释性文案。其次所有组成界面的元素要形成主次视线流,即引导用户从主到次浏览信息。

APP引导页设计!引导的艺术

视线流的布局方式一般包括:上下布局、左右布局、弧形布局、折线布局等,具体的布局方式可根据界面主题灵活采用。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

引导页的界面感情流露包括两种表现方式:

①文案信息图化像表达。采用形象、直观的设计元素和背景图案来表达文案信息,例如:运用具象的小图标、简易故事人物等形象。目前很多购物类产品的引导页在设计上,会将背景图采用虚实交加的店铺建筑和商品插图风格,营造该页面购物信息的主题,给用户以轻松、愉悦的购物环境感觉。

APP引导页设计!引导的艺术

②交互式使用体验。引导页面中适当加入动效等交互使用体验方式,可以増强用户浏览页面的参与性和趣味感。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

引导页应根据产品的风格与定位组织设计元素,营造适合产品的风格与氛围,例如:消费型、娱乐型、游记型、软件工具型等产品的定位是不同的,由此产生的引导页是严肃、有趣、清新、活泼还是其他风格也是不一样的。

APP引导页设计!引导的艺术

在视觉变现形式上也有不同的选择,严肃风格界面表达较严谨,多为模块式界面;趣味风格可采用手绘插图、动态效果等设计手法;清新风格常用有意境的背景图片搭配文案。当然设计手法并不是绝对的,设计师应根据产品特点灵活采用适合产品基调的元素和手段。

APP引导页设计!引导的艺术

APP引导页设计!引导的艺术

任何用户在第一次使用产品时,对产品界面上的内容都是陌生的,并且每个用户面对同一引导界面的反应是不一样的,会产生不同的使用问题,因此在引导页设计时,需要提前做好用户使用情况调研,模拟使用情景,对各种可能产生的问题设计出应答的方法。

APP引导页设计!引导的艺术

例如:某一按钮的用途是什么,点击前、中、后的不同反馈形式;某一图标放在什么位置容易被用户识别;某一颜色的改变有什么意义等,这些引导图标必须正确、友好的提示用户如何正确使用产品,第一时间解答用户的疑惑。

APP引导页设计!引导的艺术

引导页的设计,其功能性、使用性与美观性同等重要,应在深入研究产品定位的基础上,从用户使用产品的角度和目的出发,切合用户需求点,运用合理、巧妙、贴合产品特性的设计元素进行界面设计。

APP引导页设计!引导的艺术
以上内容就是“APP引导页设计!引导的艺术”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多品牌设计的相关内容,可以来AdobeEdu设计联盟官方网站获取。
生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

优秀版式!离不开这些”关键词”

版式设计的重点在于版面各元素的和谐搭配,在编排版面元素时,应该注意主次分明、表现合理,使阅读流畅顺遂。 均衡 均衡即平衡...
创新思维的深度理解与应用

创新思维的深度理解与应用

一、模型理解 WHAT:是什么 概念:是什么 本质:新旧要素的重新组合 对创新要素的重构 内涵 创新思维是依托人脑 ( ...

色彩的9种调性!要分清呀

以上内容就是“色彩的9种调性!要分清呀”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想...
第四波!2022年8月精选实用设计干货合集

第四波!2022年8月精选实用设计干货合集

各位8月好!这是本月的第四波设计干货,这一期设计干货合集中有一些非常有趣的东西,比如为 CG 艺术家准备的物理参数数据库...
什么你的平面作品不出彩?来看高手总结的14个细节!

什么你的平面作品不出彩?来看高手总结的14个细节!

很多人想提升自己加了无数大神的微信,通过了大量的精力去寒暄,希望得到大神的指点。这种方式对自己成长效果只能微乎其微。 此...

发表回复

返回顶部