畅游VC丨教你3步快速搞定Slogan的排版问题 - 优设网 - UISDC

畅游VC丨教你3步快速搞定Slogan的排版问题

2016/11/30 13148评论区

slogan-typesetting-fast-fix-1

@畅游VC :我们在平时接到需求之后,总会涉及到关于slogan(文案)的排版问题,那么如何快速的梳理文案的层级,对slogan进行快速的排版呢?今天给大家分享一些自己在slogan排版这块的小经验,希望能够对大家有所帮助。

那么通常在拿到slogan之后我们第一步应该做什么呢?

01. 用简单的对比将slogan的层级体现出来

uisdc-slogan-201611301

这种文案给的比较清晰,本身就可以很直观的进行判断文案的层级,所以很容易得到以下排版:

uisdc-slogan-201611302

那是不是所有的slogan都像上面这样给过来的时候有着清晰的划分呢?我们再看看下面这种:

uisdc-slogan-201611303

如果按照我们上面的理解,是不是应该把“刀剑英雄跨年特别活动”作为主标题,“跨年送惊喜 红包领不停”作为副标题来处理呢?并!不!是!

一般情况下,对待我们拿捏不准的slogan定位的时候,最好的方法就是跟需求方那边去确认下slogan中的文案层级,究竟什么是最重要的。经过跟需求那边沟通,了解到这句slogan的层级关系如下:

uisdc-slogan-201611304

那到这里我们的第一步基本上就算完成了,这里主要是对slogan的层级做一个简单的大小和颜色上的区分,目的是为了让我们对slogan的层级有一个大致的了解,便于我们进行后期的排版工作。

02. 给部分文案添加简单图形修饰,对slogan做进一步的排版

如果我们的slogan全部都是文字,只是有单纯字体和字号上的区分,整体难免看起来会很枯燥,而且全都是文字的话也对浏览者提炼关键信息起到一定的阻碍作用。所以我们可以尝试对slogan中的部分文案添加一些图形修饰,修饰的形式很多,可以是线条、框或者面等等,下面我们通过一些栗子来加深理解:

以下栗子及部分理解您在任何教科书上都看不到,因为都是编的,主要为了帮助您理解!!!

uisdc-slogan-201611305

那么这里给了一句文案,我们可以添加哪些简单的图形修饰呢?如下:

uisdc-slogan-201611306

上面随意打出来的栗子就是我们添加的图形修饰,这下很容易理解了吧。那我们对slogan做这种处理的好处有哪些呢?

1. 可以使我们的排版形式更加丰富

2. 可以使slogan的主副等标题之间的层级更加清晰

3. 可以使浏览者迅速get到文案中的刺激点

那我们还以上面两个例子给部分文案也添加一些简单的图形修饰:

uisdc-slogan-201611307

矮油卧槽,是谁允许你把“新门派”放那么小的?别急,咱们看下下面的图:

uisdc-slogan-201611308

有没有感觉很熟悉?这两张图中的“特价”和“热销”虽然占比也不大,但是却很惹眼。它们作为一个独立于主体之外的标签,不仅没有被弱化,反而更容易引起浏览者的注意。我们这里也是一样的,“新门派”是对“鬼谷”的一个定语修饰,告诉大家“鬼谷”是什么。那既然是新推出的门派,当然也可以像电商产品列表中的“新品”一样做类似的处理了。

通常我们在对slogan排版的时候,一行中主标题的字数不要太多,最好是控制在4个字左右。要注意的是这里强调的是“一行中”,为什么呢?因为主标题通常是要做放大处理的,如果一行中的主标题文字过多,势必会占据更大的横向空间,这样如果画面中还要出现其他的元素,比如人物原画,那么就会对我们的排版造成一定的困扰。再者,同样级别的字数较多的主标题如果排成一行,也不太利于浏览者去进行断句,快速找到主标题中的重点信息。所以,如果主标题中的文字较多,我们可以根据实际情况适当进行断句,拆成2行;或者是将一些至于首尾的修饰性定语单提出来,做标签处理,同样可以使我们的主标题做一个很好的层级区分。

根据上面的描述,例二添加完图形修饰后的效果如下:

uisdc-slogan-201611309

那到这里我们的第二步基本上就算完成了,这里主要是对slogan的层级做一个断句的处理,目的也是为了让我们的排版更加合理和易读,通过这一步我们对最终的文案排版会有一个相对明确的认识,现在差的就只是选择合适的字体,并且根据不同的页面风格,对排版中的图形修饰做进一步的细化处理了。

03. 选择合适的字体,对修饰图形做进一步细化

选择合适的字体,这点我觉得很好理解了,就是根据不同的风格页面需求来定位相应的字体。比如:武侠风的首选书法字体或者粗宋体,枪战动作类的选择一些棱角分明、外形看起来比较坚硬的字体,活动类的可以选择一些笔画较粗的非衬线字体等等。(这里选择的字体主要是针对slogan中的主标题。)

uisdc-slogan-2016113010

那么我们可以看到,对于出自《新天龙八部》的例一来说,这里的主标题我选择了书法字。首先,天龙是一款武侠类的游戏,本身的专题中书法字和粗宋体就是首选,鉴于鬼谷这个门派的牛逼之处(据说他们一出场就单挑其他十二大门派),所以这里选择了更显霸气的书法字来做主标题,其他的标题则选择了宋体类型字,以识别清晰为主要出发点。另外,“内测资格限量领取”这句副标题的修饰图形也由矩形框变成了两端的图形修饰,这里主要考虑到主标是书法字,并不像其他字体看起来那么规整,鉴于书法文字的高低大小错落,所以副标题没有选择较为方正的形状去修饰。大家还可以看到“新门派”下面的红底已经从一个圆角矩形变成了墨迹,这也是从页面的类型和风格出发而做出的进一步细化。

uisdc-slogan-2016113011

按照我们的排版,加上各种效果之后,最终显示如上图。

uisdc-slogan-2016113012

例二出自《刀剑英雄》,虽然也是古风,但是这个专题的定位是偏活动类型的,所以这里也并没有选择粗宋或者书法字,而是选择了比较粗壮厚重的非衬线字体去做主标题。修饰图形上也选择了较为常见的圆形作为趁底。最终效果如下:

uisdc-slogan-2016113013

最后再说一下第二步中的“添加图形修饰”,其实这个样式非常的多,有时候根据一种特别简单的可以演化出很多种不错的样式。大家可以根据实际情况去进行绘制,多去尝试,会有意想不到的效果。下面给大家一些例子,帮助大家更好地去理解。

uisdc-slogan-2016113014

04. 小结

这次的小教程到这里就基本结束了,内容不多也不复杂。按照上面的方法不能保证你排出特别惊艳的版式,但是大体上的层级还是可以很容易的去区分的。希望感兴趣的朋友在以后的工作中也可以尝试一下~本人水平有限,以上观点仅代表个人意见,如果有说的不好的地方(你也不能打我),欢迎大家一起交流讨论,共同进步。

「优秀专题页速成三部曲」

Step 1:搞定标题文字!实战好文一篇!
《经典教程!商业BANNER设计实战:标题文字篇》

Step 2:搞定设计创意!网易高手实例教学!
《高手教你做BANNER!如何把BANNER做得传情达意》

Step 3:搞定效率!专题图的速成技巧!
《编辑也能快速做出漂亮BANNER!专题头图的秘密武器》

作者:@畅游VC

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

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