产品经理如何设计APP引导页

产品经理如何设计APP引导页,第1张

个人认为这个没有统一的设计程式。在设计上可能有些通用的或者说主流的设计方案,但是对于一个产品而言,更重要的是用户的使用场景和产品对用户的行为引导,同样的设计在不同产品间,用户体验也是差别极大的。

应用公园提供的是一种APP在线制作服务,也就是说用户通过应用公园可以自行制作APP,根据自身的需求,选择合适的模板添加素材,就可制作出一个专业的且可是运营的APP,还可以通过后台对应用内容进行管理。

上门无忧app是联想为上门服务的工程师们提供记录工单状态、查询备件信息、知识库学习等的一款应用。主要分为“工单、备件、学习、我的”四个模块,工单主要为工程师提供每一单服务的详细记录,工程师需要确认服务的每一个过程,从而确保服务质量;备件主要是服务中的更换备件信息;学习即知识库,工程师可在其中搜索到各类相关问题;我的——工程的个人信息页面。

于工程师:可以帮助工程师记忆,为工程师提效减负。

于公司:可以更好的管理每一个工程师,直接为工程师推送通知、对服务交付的细节进行考核。收集用户信息。

于用户:可以反馈回来的数据,提前知晓哪个工程师将于何时到达,为他进行服务。
现在出发/确认到达现场/确认离开现场/确认服务完成
客户类型、问卷信息、SLA

搜索关键词、文档分类、相关技术通报
从上图可以看出,整个引导页的设计以突出app的主要功能为目的,以粉灰色为基调,而风格则偏向扁平简约。这主要是考虑到app的设计风格也是简约为主,以红灰为主色调,多表单信息等。

引导页中所使用的颜色,大部分都有app中直接提取,再加上一些同色调的辅助色。

细心的人可能会发现,最后一张主体部分的红不如其他两张的颜色重。这是出于面与线的区别考虑,本身面看起来就比线要重,所有选择适当将面的颜色调亮,来保持平衡。
在引导页选择方案的时候,大家都更偏向于简约清新的风格,起初想做的温馨一点,着重体现工程师们的贴心服务,后来考虑到app的使用者是工程师们,所以更换为以突出功能为主。
最开始,大家都很喜欢自如这种小清新的手绘风格,色彩温暖,绘画精细,风格突出(个人觉得相比较图来说,字排的不太好看)。就个人而言,我也是想尝试一下这样的风格的。

看过整套,就会发现,其实这套引导页它所有的图画与文字的关联性并没有那么大,换句话说,也就是把图形放到其他的话术下,也是没有问题的。
而这次引导页的设计中,应该可以看到,每个页面的话术与图形的关联性极强。当然,我的这套引导页的设计也是借鉴了其他设计的,如下图:
上图是我在作图前的参考页面,都说天下设计一大抄,在开始一个新项目时,大部分的设计师都会选择到花瓣、千图、UI中国、站酷等各类设计网站上找素材,或者寻找所谓的“灵感”,这样的学习形式其实也挺好的,多去看,发现美的东西并去研究和学习,这也是提升自己的一种方法,但关键是怎么样把别人的东西变成自己的东西。
显然,我还做的不够。需要更多的思考,这也算是一次尝试吧,尝试分析作品,去看自己的不足。

可以看到,我几乎是整个借鉴了这个引导页的风格、形式等,但是具体的内容有很多区别,也做了一些改进。

例如,上图整套的设计都是以山和云为背景,但实际上这跟它所表现的内容,是没有任何关系的,所以只是单纯的背景。

而我在做的过程中,力求能够将背景和主题结合起来,起初的两张关联性都还不够,做到最后一张的时候,基本上是有密切的相关性了。

例如,力求风格、元素、颜色上的更加统一,希望能关注更多的细节等等。

曾经有一个设计师问我(其实是一次面试),你临摹这个icon,你知道它哪里做的好么?你知道它所在意的细节是什么吗?问的我一脸懵圈,说实话,在临摹的时候我确实没有去考虑它到底为什么好看,于是我只能老实的回答说不知道,并向他请教。

面试官很好,是一个很厉害的设计,于是开始跟我分析那套icon好在什么地方,注意的细节是哪里。于是我知道了,一个高UI跟一个入门级UI的区别在哪里,希望终有一日,我也可以成长到想要的样子。

其实我一般不喜欢分享自己的设计,因为觉得做得还不够好,献丑咯!

好的APP引导是怎样的?
现在,引导的种类形式随着硬件和系统的拓宽有了更多的表现空间,引导页、缺省引导、视频引导、H5引导等都能起到引导用户认识或者使用新应用的作用。一方面从产品的角度考虑,产品希望用户能够方便得理解产品的特性,减少对产品的陌生感;另一方面,从用户角度来看,一个应用里好的引导不仅能使他们对一个应用有好感,也可能更容易得留住他们。但不论什么形式的引导,好的引导都能够让用户对产品有一定的认知并拉近用户与产品的联系,通过对不少做得好的引导(这里主要讨论的是页面形式的引导和H5)进行分析,我们发现大家喜欢的app引导都会有一些共性,通过归总提炼,得出以下几个用户看了都喜欢的原则:
通俗易懂
一个APP的引导不论什么类型,它们的目的都是为了让用户更好得去使用APP,就好比一个贴心的管家或者朋友,给你介绍或者教你使用一个新事物,减低认知和摸索学习的门槛。但如果这个朋友说得太多太杂,你可能就会记不住他说了什么;而如果这个朋友为了想更凸显这个新事物的逼格而形容得“深不可测”(自嗨型引导),那么就很可能让你因为听不懂而失去兴趣了解下去。简单不复杂、信息表达通俗易懂的引导可以让用户抓取到我们想传达的信息并更容易理解APP的特性或 *** 作,比如以下的案例:
界面来自Dropbox
Dropbox的缺省引导是我比较喜欢的一组引导,在用户一开始使用这个app的时候,通过在初始缺省页(空白页)上结合 *** 作去引导用户,大大避免了一进去空空如也的尴尬感。而且这组引导的文案不是生硬的功能讲解,而是通过一些通俗易懂的语句配合与之相对应有趣的图示传达相关的的信息,让用户在看和 *** 作的过程中感受轻松,而且这套引导整体风格都保持一致,让人对产品印象稳固起来,倍显亲和。
具有一致性


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12688806.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表(0条)

保存