那些年我们追过的标题设计

发表于2015-05-03
评论0 542浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913

自METRO风的来袭,几乎一夜间吹平吹偏了许多WEB页面,广大设计师们为顺应潮流,几乎都向此风靠近。然顺应潮流那是必须的,但作为游戏类的视觉设计师,有一些东西还是不可舍去的。最近看到同学们的作品向乎都是一个风格的,偏平化,平面化,高帅范。所以觉得有必翻出一些老东西来炒炒。 标题通常是整个专题最为核心的内容,所以标题设计得好不好,几乎能左右对人们对你整个页面设计的评价,下面将为大家回忆并分析一下那些年我们追过的标题设计。

1.为什么要对标题进行设计?
先来看看那些年接到过令人头痛的设计需求:
01.完全不能看明白的活动标题策划文案
http://km.oa.com/files/post_photo/536/179536/cc84cecc4521ad0b37b79712797317b1.jpg类似于这样的策划案可误导设计师设计成如下这样一个结果
http://top.oa.com/captures/2013-10/1382677073_41.jpg
如上两图虽然设计师对标题都有一定的设计,但作为玩家,我第一时间根本没看懂这个是什么专题,活 动?版本?还是赛事专题。主标题表意不明,又没有副标题的补充说明,标题设计又没能在视觉上很好的 地传达出有效信息。

       我们策划们都很好文采,喜欢写诗写排比句展现自己的文字功底,有时整个标题与副标题看完让人云里雾里,不知所云或者没有抓到关键字,文字多得让设计头痛。我只想说玩家很忙,没空跟咱谈感情谈交情。玩家更关心的是你能给他什么,他能得到什么,他要做什么。所以标题必须直接,精简,一矢中的。

 02.有时一个挺重要的专题,可需求方就是没有或者不能提供帅炫的素材时,没米咋做大餐呢!这时我们有必要考虑是否能做一个高端大气上档次,狂霸酷炫吊炸天的标题设计来撑场. 

      设计一个符合活动氛围需求的标题设计,能在视觉上第一时间给玩家传达活动重要核心信息核心卖点,今天网络资讯琳琅满目,我们的玩家都习惯性迅速地扫描浏览和点击,一个好的标题设计能第一时间抓住玩家的眼球,扣动玩家神经

2.什么是好的标题设计

01逻辑性很好,关键信息核心卖点突出,主次分明。
http://top.oa.com/captures/2013-10/1382677003_95.jpg


以上几个标题的设计是摘自那些年追过和做过的专题设计,当然有很多这样的好案例,信手几个。从中我们可以看出这些标题逻辑性都设计得很好,主要信息和卖点非常明确突出,次层分明。这样的设计能第一时间给玩家传达我们想要传达给玩家的活动信息,吸引住玩家的眼球,从而提高专题活动参与度和市场转化率。
       标题文字不宜过长,一般情况下主标题文字三到四个字为佳,次要信息副标题可作补充说明。作为一个设计师应该懂得从专题内容角度及产品的市场角度出发去提炼捕和捉标题关键字,理清文字主次和逻辑关系,概括了整个专题的商业诉求。在设计时突出关键字,关键信息,让玩家能第一时间了解到活动的内容。这样的标题设计不要求你设计得有多精美,多么有质感多么丽、它只要信息逻辑清晰就是好设计。
       假如说你遇到一个很有个性很浪漫的策划,非得用诗词作为标题。作为设计师除了晓知以理,动之以情外,还有一手就是运用科学去说服他,因为标题文字不宜过长的另外一个原因是它关乎SEO的问题,设计专题标题时,应注意同时兼顾对玩家视觉上的注意力,以及对搜索引擎检索的需要。
http://top.oa.com/captures/2013-10/1382677344_96.jpg 

上面只是简单列举了一下有利于SEO的几个条件,虽然这些重构可以在后台给优化,但我觉得在视觉上也应 遵循这些条件去设计。

02整体性很强的标题设计,高度融入整个页面场景,统一页面风格
http://top.oa.com/captures/2013-10/1382677474_72.jpg 

以上几个专题的标题设计无论是质感还有风格上都是高度隔入场景的,标题与场景衔接生动巧妙,能与专题 整体的视觉要素结合,不但不会显得生硬,反而显得美观捉眼球。也能成为专题最为突出的亮点,在视觉上 第一时间就能捉住玩家眼球 ,给玩家传达出准确的活动信息.


03 引导性强,也就是视觉冲击力很强的标题设计
http://top.oa.com/captures/2013-10/1382677615_20.jpg 

这类标题有个特点就是标题特别大,标题具有很强的视觉冲击力和视觉引导性,极具号召力,感染力,吸引力。也就是那种狂霸酷炫吊炸天的标题设计。 当你做一个挺重要的需求却苦于没有好的素材时,或者你接到需求时实在想不到一个具像的视觉画面而时间在有限。建议你最好考虑一下这种设计形式,以主标题设计为页面的视觉中心,结合一些铺助元素,营造一种切合页面主题的视觉氛围。这样的出来的设计稿在视觉的引导上更加有利于活动信息的传达,此外在视觉上也不失为有设计感和形式感。这比随意摆个角色人物,呆呆地放着主标题副标题来得实在得很多。

3.怎样设计一个好标题呢?

       这里我也只能凭自己以往的一些不算成熟的经验与大家一起分享一下设计流程,至于设计方法和设计技巧我觉得设计没有绝对的方法套路,关键是看你有没有用心,对项目有没有爱。因为方法和技巧有千百种。也没有那一种方法或者技巧是完美的,只有为专题内容量身定制的标题设计,才是完美的标题设计。
大概流程:

01 提炼主标题
保证主标题及副标题能说明专题核心内容 扫除那些无关痛痒的词儿,提取有效关键词,让主标题能精辟简短,有吸引力,有概括力。展现项目的核心卖点,核心信息。当然这些要发挥你的沟通能力,咱们的策划和品牌经理往往都会有小小的文人骚客情节,尽量以一起探讨的方式与他们一起完成这一步,因为毕竟我们对专题需求的市场目的没有他们清晰。
02 构想与专题内容相符的标题展现形式
构成形式以及质感风格。 这里你可初步在脑海中构想一个大体的画面,结合专题内容,选择合适的风格和形式,就是该要表达喜庆节日,得喜庆,该有速度对决的得有速度对决感。也可以直接手绘草稿图,来一下思维迭代,完成构想和设计思路。如果你实在没有想法,那去翻阅优秀案例吧年。
03 将设计构想和设计思想可视化
这一步是执行部分也可以分几个步骤的 第一步是:选择符合专题内容及产品风格的字体 字体是有感情的有性格的,如果想让字体能更符合专题所要求的表达的情感和氛围,这需要我们对字体进行设计
例如倾斜的字体能体现速度感

http://top.oa.com/captures/2013-10/1382677885_33.jpg

狂草书法字体可以体现打击对抗氛围
http://top.oa.com/captures/2013-10/1382677938_43.jpg
笔划明快,粗细结合的字体能体现时尚感
http://top.oa.com/captures/2013-10/1382677981_4.jpg
刚粗硬朗的字体可能现现代,科技,战争机甲
http://top.oa.com/captures/2013-10/1382678026_64.jpg
不同的字体设计能表达不同的性格和感情,字体设计是个有学问的有耐力的活,需要长期的练习才能把握精准,所以这里我只能说明它的重要性,而中方法需要设计师们长期学习,多看优秀案例,习人之长,补已之短。字体设计花瓣收载交流:http://huaban.com/boards/13657923/

第二步是:选择合适质感及风格
这一步得根据专题活动内容对于氛围的需求来设计,也是得费比较多心思的一步,要力求到位,精致,质感的表现要有品质感,有设计感。忌燥,忌山寨,忌廉价。
http://top.oa.com/captures/2013-10/1382678130_64.jpg
它可以是拟物的真实质感                                              它也可以还原真实场景的
http://top.oa.com/captures/2013-10/1382678192_19.jpg
它也可以是平面街头涂鸦的感觉                                    它也可以是具有神秘色彩的金属质感
http://top.oa.com/captures/2013-10/1382678247_79.jpg
它可以情景氛围化                                                         它可以有引领页面风格的颜色和质感
质感和风格可以是多种多样的,只有选择最合适专题氛围诉求的质感和风格,才能引领融入页面的整体氛围当中,不至于唐突生硬。其实也就像人的穿着打扮一样,不同的环境不同的时间都要有相适宜的穿着,才能体现个人不凡的气质和内涵。别永远都是短裤拖鞋,甘为丝。

第三步 调整

主要是增加一些元素或者减少一些干扰元素,保证标题在页面中清晰可见,且与画面风格保持一致。让画面更谐调,更具节奏感,更具视觉引导性。 标题背景不宜过于复杂,明暗,颜色对比要强烈,忌亮底亮色字,灰底灰色字,颜色相冲,或者颜色过于接近隔合。页面视觉中心要么以标题为视觉中心,要么以其它人物角色道具为中心,忌水平线上有多个视觉亮点,这样整体面面会乱也会花,主次不明没有节奏,不具视觉引导性。

步骤大概就是这样,这些也只是个人的一点经验分享,也希望有更多的设计大们分享自己在这方面的经验。也期望以后能出现更多让人眼前一亮的作品。

 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台