实现引导页_APP界面设计中的引导页!

85d715005908db44506401253a833d57.gif

d69ca55682b5cceac3e93971b90da1d6.gif

36145289300480f68f2797a9209f5daf.png

文/张丽

引导页即是用户在首次使用软件时进行产品推介和引导的说明书,使用户在最短的时间内了解这个软件的主要功能、操作方式,以便于迅速上手。fbd52839263bf36b425660383f7eeaec.png

772fc32a428b1ae5352eed645d721411.gif

引导页具有指引用户了解和掌握软件应用的功能、特性操作方法等作用,根据软件应用的安装情况,从位置上一般将引导页分为前置引导和中间引导。a45b99aa6f4a59f149f23eddbd62f6a4.png

①前置引导。所谓前置引导即在用户安装完成软件应用,并第一次打开的时候出现的引导页,该引导页一般由2到6页连续或不连续的相关页面构成,某些应用引导页可达10页。50bef2c821e4e87889bd3bdf43930b5b.png

前置引导是用户使用软件应用前所看到的内容,此时用户对所安装的产品了解并不多,对于产品的功能、布局、具体操作方法等内容还没有相关的认知。所以前置引导担任的作用主要就在于介绍产品的概况内容、核心功能、比同类产品更具竞争力的功能,以及重要的操作步骤等。db13cfacd78d30e668df2d1e9f03719f.png

②中间引导。对于版本更新的软件应用,采用中间引导是一个常见的选择。中间引导往往是对已有版本更新升级后,新功能的一些说明性操作指导。7a7d0ddbc329a162b6c40c3487815a45.png

在第一次使用有新功能出现的页面或操作中弹出指导性的说明界面,能够让用户快速掌握新功能的使用,而不会因为对新功能的不解造成使用上的困扰。中间引导在设计中常用比较贴近用户的俏皮口语进行引导,而非正式官方的书面用语。88f725219338da8d262db0afc8934df3.png

因为在使用过程中,用户往往更倾向于舒适满意的服务性语言,而不使用说教形式的官方用语。设计中多用卡通形象进行引导,以对话的方式逐步提示使用户带入感更强,更利于引导内容的呈现,避免了用户的反感。推荐阅读:界面设计原则与技巧!653be9c29a8e93b627929cbe663a3496.png

dd0c1a9d7de534b09843eea1bc1d8306.gif

①合理化原则。只做必要的内容引导,根据引导页的目的,出发点不同,大致可以将其分为产品说明类、使用说明类、推广类和问题解决类。在设计之初就应该对需要设计的引导页进行充分分析,从而得出合理化的设计方案。4ba2ec3fe33a7b5e10fa524c0f89ad91.png

②优化编排原则。引导页最常用设计方式有文字与界面组合、文字与插图组合、动态效果与音乐、视频特效等。常用的编排有逐一展示故事串联、应景节日等,逐一展示是将一个个内容总结成点并顺序排列出来,各点之间没有必要的关联。bc02f169817bf61919b6ebbda8bb0659.png

③眼球效应原则。有效地吸引用户的眼球才能使引导页面起到事半功倍的效果,需要将焦点聚集在重点阅读的内容上,才能达到突出信息的目的。聚焦可以通过光影突出、虚化背景、放大镜突出内容等方式来实现。c09aeeed5311001320b98518f2206174.png

眼球效应还可以通过交互效果、动画和视频来实现。对于泛滥的静态引导页面来说,采用动态内容更能够吸引用户的注意力。所以除了采用静态的表现方式,还可以通过增加合适的动态内容来吸引用户的眼球。6bb5cb62f377d361c2c32984bf187dcb.png

采用不一样的引导页切换方式,也可以吸引用户的眼球。一般引导页的切换都是从右向左滑动切换,对于用户来说没有多余的学习负担,但长久以后就会麻木从而感觉没有创意。可以通过设计出具有新意的切换方式来博取用户的关注,比如类似抽取、刮开、上下等切换形式,在合适的时候能取得与众不同的效果。deed2960f37774036a67aa099b6c47d2.png

引导页在交互设计中应当根据项目需求来制定设计方案,并且需要根据产品的受众及竞品等调研进行合理化设计。引导页的设计对于新用户来说是非常重要的,而功能性的升级版本中的引导页也能让老用户快速掌握新升级功能,能起到很好的辅助作用,提升用户体验。a8668d949910926fce874e2020ff0eca.png

总之,引导页设计是APP的设计重点之一。推荐:UI素材包第29季 cbfbf5fbafd3b67e45fa8bfe2800d1a6.pnge8fa3952deb1fe9431035cb5207c07a0.png2aff6e973969c9295cc2a126d880cf7b.png75a7298ccd0617215b9eb2eb11d46d50.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值