对症下药!如何设计受欢迎的引导页?(二) - 优设-UISDC

对症下药!如何设计受欢迎的引导页?(二)

2015/01/07 10953评论区

design-fabulous-guide-page-1

编者按:今天微博的@Jason-yangsong 同学分享了他的处女作,虽然是第一次总结,但文章很有看点,以常用的引导页作为切入点,结合引导页目的与设计原则,帮设计师深入到用户体验层面思考引导页的设计,实例与理论兼备,特别值得借鉴哟。

ydsj20150107

之前有同学从目的与表现方式的角度切入谈引导页设计,一同学起来!>>> 《对症下药!如何设计受欢迎的引导页?》

一、用户引导的作用

移动应用在新用户注册以及新版本发布的时候都会使用用户引导,那用户引导的作用是什么呢?

可以从两方面来进行探讨:一方面从产品的角度出发,产品需要通过用户引导来突出产品的新功能和特性,说明功能结构变化,避免产品的陌生感,满足产品的需求。例如花瓣,通过图中的用户引导说明产品各模块的功能,并鼓励用户去探索,建立产品与用户间的互动,拉近了用户与产品间的距离。

ydsj201501071

另一方面从用户的角度出发,用户需要通过用户引导了解产品的功能以及如何操作,迅速上手这个产品,降低学习成本,满足用户的需求。例如paper,通过图中的用户引导形式告诉用户可以通过手势进行操作,从而实现与产品的交互,建立用户的使用认知,让用户知道如何去操作,用户很快上手这个产品。

ydsj201501072

二、用户引导的设计原则

1. 保证用户引导的有效性

保证用户引导发挥自身的作用,突出产品的功能,帮助用户更好的使用产品。这是用户引导设计的第一原则,用户引导是对产品内容以及形式的辅助说明,如果不能保证用户引导发挥作用,那用户引导不但失去了意义,反而会影响了用户体验。

2根据使用场景触发相应的用户引导

用户在使用产品的时候都是有一定的使用场景的,根据用户的使用场景触发相应的用户引导,保证在用户需要的时候弹出引导是最符合用户体验的,也是用户最愿意接受的时候。这样引导既不会特别突兀,弄的用户不知所措,又能在相应的场景下帮助用户。例如Facebook开启定位的引导,但用户需要发送当前位置的时候,应用会弹出图中的引导形式,告诉用户开启定位的作用,用户在这种使用场景下会很乐意开启定位,从而提高了开启定位的转换率,又不会觉得这个引导影响了自己的体验。

ydsj201501073

3. 减少对用户体验的干扰,尽可能去提升用户体验

用户引导在用户使用产品过程中的弹出是用户意想不到的,很有可能就打扰了用户使用产品的流畅性,破坏了用户体验。因为这是用户没有预期突然出现的东西,在一定程度上会有一定的惊慌失措感,但是好的用户引导出现在用户需要的时候,反而会起到雪中送炭,提升用户体验的作用。就好比用户在无助的时候,旁人对用户一句有益的提醒,反而感动了用户。比如Google搜索中,在用户进行拖动操作的时候,顶部的状态栏变成了一句温馨的提示,非但不打扰用户,反而有一定帮助,用户会觉得很贴心。

ydsj201501074

三、用户引导规范的制定

每个移动应用都有一套自己的用户引导规范,在制定用户引导规范的时候,不要一味的钻到用户引导的设计里面。研究各种竞品,借鉴各种用户引导样式,这本身无可厚非,但注意用户引导的样式要适合自己的产品。都说paper的引导做的好,是因为paper主要的交互形式是手势操作,所以这种用户引导形式很适合paper,但移植到别的产品上就不一定合适了。

用户引导规范的指定可以按照不同的形式进行指定,一种是从用户引导的样式角度出发,把产品涉及到的各种用户引导样式一一罗列出来,并说明每种引导样式的适用范围、触发机制以及消除机制等。这种形式的优点是各种引导样式结构清晰,一目了然。

另一种形式是从产品功能的角度出发,由于产品每个功能的重要程度和优先级不同,对应的需要突出强调的程度也不一样,所以将用户引导样式分为强中弱三大类,对于产品主要功能,优先级很高的采用强引导样式,对于次要功能,优先级稍差的采用适中的引导样式,对于辅助功能,优先级最低的采用弱的引导样式。同时强中弱三大类里面又分别包括几种引导样式。这种形式的优点是从产品角度出发,根据功能的重要程度的优先级选择对应的引导样式,方便快捷。

四、总结

移动应用的用户引导设计要保证引导的有效性,根据使用场景进行设计,减少引导对用户的干扰。切记用户引导的作用,选择最合适自身产品的引导形式,让用户引导更好的拉近产品与用户间的距离。

本文作者杨松,有不同观点希望能互相沟通,请关注新浪微博@Jason-yangsong

超实用的指南好文合集!

色彩知识大科普!再也不做“色盲”啦!
《设计师配色宝典!教你从零开始学配色(一)》

帮你全面搞定抠图的那些事儿!
《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》

阅读量过10万的超人气自学指南!
《超赞!设计师完全自学指南》

投稿者:@Jason-yangsong

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量89万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-fabulous-guide-page

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里