详细解析引人入胜的引导页设计技巧

2016-02-17 00:56 14 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的详细解析引人入胜的引导页设计技巧,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - 平面设计 】

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

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

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

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

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

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

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

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

详细解析引人入胜的引导页设计技巧,PS教程,图老师教程网

5. 在文案上也是需要非常考究的,要使用用户听得懂的词,不要让用户脆弱的自尊受到伤害。比如点击Title Bar,您可以(Title Bar是什么东东,欺负老娘不懂英文么 !!!!)不如换成点这儿试试呢,您还能

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

来源:http://www.tulaoshi.com/n/20160217/1577041.html

延伸阅读
下面让我们一起来学习吧 本人很少写相关的经验,有不足之处,还望站友多多包涵~ 我会努力做更好。 ^-^ 说明:设计师有三张照片,但如果在版面上都用上这些照片,那你还要对这三张照片进行剪切,然后将它们挤进版面里。但出来的效果却是,这三张照片在版面中的样式很相似(相似的图片元素及图案),文字阅读起来很费力。所以,设计师又不...
关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。 Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底...
晋小彦:时代在变规则也在变,网页设计师刚入行的时候都会被告知信息内容需要摆放在800或1000的宽度以内,但是今天不论在网络速度还是硬件、显示屏都有了不同程度的更。面对伴随而来的多终端显示。如何让我们的网页有一个良好的第一视觉?如何让各类的用户特别是宽屏的用户在自己的显示器上看到完整的视觉盛宴?而非仅停留于1000宽度的切糕网页。...
匆匆而过的除了朱自清的指缝,还有APP上的引导页。为了让使用者能停留在引导页上哪怕三秒钟,设计师们各种诡谲奇招都用了个遍,今天Micu设计同学就分享了他做APP引导页的设计三部曲,过程详尽,实战好文一篇,右戳学习咯。 大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾。这...

经验教程

717

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部