当前位置:文章 > 版式细节文字排版技巧
版式细节文字排版技巧
ChiNa_威海_山岩 发布于 2018-04-24    分类:网页设计  教程/技巧     标签: photoshop 电商 教程 技巧 设计思维
浏览//评论
我们上期提到了常用版式及在版式应用中需要注意的一些小的细节。接下来我们还是围绕细节问题展开讲解,毕竟所有好的作品,其最最基本的要素就是细节的丰富和完善,细节处理的好,作品想出问题都很难。 我会分几期教程对大部分新人都非常头疼的文案排版需要注意的细节问题做一个较为详细的总结和分析,希望能对文案排版有困惑的朋友有一个较好的帮助。 [align=center][img=山岩ps小课堂22_02.jpg]http://image.135editor.com/files/users/438/4388382/201804/jQ2HHyhd_E82h.jpg[/img][/align] [b][size=20px]◆ 文字的排列要遵循规律[/size][/b] 人类在阅读文字时的基本规则是[color=#FF0000]从上到下、从左到右[/color]的。文案的排版应尽量遵从这一规则,除特殊版式之外,尽可能减少参差不齐或右对齐排列,大部分情况下,还是使用[color=#FF0000]左对齐或居中对齐[/color]是最为合适的选择。 [align=center][img=山岩ps小课堂22_04.jpg]http://image.135editor.com/files/users/438/4388382/201804/OrXc8r9K_fQ7c.jpg[/img][/align][align=center][img=山岩ps小课堂22_05.jpg]http://image.135editor.com/files/users/438/4388382/201804/KDgDwPRf_cG3N.jpg[/img][/align][align=center][b]不管是应用了文字的特效、文字的前后层次还是文字的倾斜,都是遵循左对齐的原则[/b][/align] [align=center][b][img=山岩ps小课堂22_07.jpg]http://image.135editor.com/files/users/438/4388382/201804/LuNtBv7m_jrgS.jpg[/img][/b][/align] 而当沿着某一版块或素材的左侧排列文字的时候我们使用右对齐会比左对齐和居中对齐要有更好的表达效果,但一定要记住这是特例。 [align=center][img=山岩ps小课堂22_09.jpg]http://image.135editor.com/files/users/438/4388382/201804/T5qNpkZ6_atnw.jpg[/img][/align] 我在通过一个小例子来更加明确关于左右对齐的操作。 [align=center][img=山岩ps小课堂22_11.jpg]http://image.135editor.com/files/users/438/4388382/201804/WXmtnkSe_xtND.jpg[/img][/align] 这里有人会问,这两个图左右都是不规则的,为什么第一个就不舒服第二个就没事,这里要考虑的就是我前面提到的视觉点,从正常从左到右的阅读顺序,第一张是视觉的【入口处】就开始不齐,是一开始就有的[color=#FF0000]生硬的视觉干扰[/color],而第二张是视觉【出口处】末端不齐,出口的部分是缓和的部分,是可以减少视觉的硬性干扰的。我们抛去美观、版式等问题不看,单从阅读的流畅性和合理性来说,也是左对齐比右对齐要好的很多的。 [align=center][img=山岩ps小课堂22_13.jpg]http://image.135editor.com/files/users/438/4388382/201804/KaYsdMex_4ve5.jpg[/img][/align] [align=center][img=山岩ps小课堂22_14.jpg]http://image.135editor.com/files/users/438/4388382/201804/OYBTgQ6f_PQHG.jpg[/img][/align] [b][size=20px]◆ 明确主、副标题及描述[/size][/b] 文字排版应用的核心是[color=#ff0000]对比[/color],而对谁做对比,怎么对比,为什么要对比是很都设计师都做不好的点。主、副标题及描述部分从直观的外形上可以通过粗细、大小、颜色来区分,而最常用的特点对于主标题——大、粗、醒目;副标题——可以与主标题同一字体、略粗、略大、较规整;描述——常伴有形状搭配来划出分隔,利于阅读,较细、较小(有些文案没有描述或副标题时,可彼此借见综合使用。)另外在字体的选择上[color=#ff0000]尽量不要使用识别度较低,特型异型的字体[/color]。 [align=center][img=山岩ps小课堂22_16.jpg]http://image.135editor.com/files/users/438/4388382/201804/Vr4UOunx_mjSt.jpg[/img][/align] 上图有以下几点问题,这也是很多文字排版有问题的朋友常犯的一些问题。 [align=center][img=山岩ps小课堂22_18.jpg]http://image.135editor.com/files/users/438/4388382/201804/dqwqBWFY_Ewd8.jpg[/img][/align] 综上所述,我们的文案可以稍作改进,更符合明确的展示。 [align=center][img=山岩ps小课堂22_20.jpg]http://image.135editor.com/files/users/438/4388382/201804/5HDUj8h7_34YG.jpg[/img][/align] 另外,在同一个[color=#FF0000]小范围内应用颜色尽量不要太多[/color],像下图中装饰形状内的文字颜色最好是应用跟背景色相近的颜色,不然会觉得非常的跳脱,不舒服。 [align=center][img=山岩ps小课堂22_22.jpg]http://image.135editor.com/files/users/438/4388382/201804/bHdJBd7V_HTWL.jpg[/img][/align] 主、副标题尽量的区分开,不要给人模棱两可或含糊不清的感觉。 [align=center][img=山岩ps小课堂22_24.jpg]http://image.135editor.com/files/users/438/4388382/201804/DWcg7vyj_xeKu.jpg[/img][/align] 关于主、副标题的排版形式,在[color=#FF0000]2期教程[/color]中也有比较明确的实例,可以作为借鉴参考。 [align=center][img=山岩ps小课堂22_26.jpg]http://image.135editor.com/files/users/438/4388382/201804/4Bs6QVC4_Kg8v.jpg[/img][/align] [b][size=20px]◆ 主标题的应用[/size][/b] 一般情况下,我们都是[color=#ff0000]以主标题的长度为一个文字排版的左右宽幅[/color],而如果主标题过长会导致我们的视觉点被拉长,文字如果都以主标题为基准去排列会显得臃肿,不按主标题去排列,主标题和其他文字之间会有很明显的断档,所以一般情况下,[color=#ff0000]当主标题超过8个字的时候我们可以选择性的分段[/color]。 [align=center][img=山岩ps小课堂22_28.jpg]http://image.135editor.com/files/users/438/4388382/201804/aqdr23Ax_3Xx8.jpg[/img][/align][align=center][img=山岩ps小课堂22_29.jpg]http://image.135editor.com/files/users/438/4388382/201804/jZwFS3F9_ZICN.jpg[/img][/align] 很多朋友愿意在文字排版的开头使用你整体文案中最大或最粗的文字,其实有时候这种版式会让画面头重脚轻,有很强的压迫感,文字排版的摸索阶段,还是多以副标题或缩小了的主标题作为开头比较合理。 [align=center][img=山岩ps小课堂22_31.jpg]http://image.135editor.com/files/users/438/4388382/201804/5hDQd7qT_JMvy.jpg[/img][/align] 主标题字数略少时可以[color=#FF0000]单独以主标题的每一个字做为一个图层[/color]的方式,通过大小变化、粗细变化、旋转、叠加、排列等方式灵活运用主标题,必要时可附带特效。 [align=center][img=山岩ps小课堂22_33.jpg]http://image.135editor.com/files/users/438/4388382/201804/a9vwLYWy_chr2.jpg[/img][/align] [align=center][img=山岩ps小课堂22_34.jpg]http://image.135editor.com/files/users/438/4388382/201804/TKcaZYkK_kEjZ.jpg[/img][/align] [b][size=20px]◆ 行距与间距[/size][/b] 行距与间距的把握是文字排版中最为点睛的一环,如果控制得好,整个文案都会很和谐,如果控制不好即便上边提到的几个技巧都做的完善也会感觉整体非常不舒服。距离的把空中我们一定要慎重考虑[color=#FF0000]承重是否合理[/color],直白的说就是你下方的文案能否撑得住上方的文案,而这个撑的含义就是通过行距与间距去展现的。 [align=center][img=山岩ps小课堂22_36.jpg]http://image.135editor.com/files/users/438/4388382/201804/hbhVXtFg_9mGZ.jpg[/img][/align] 上图为例,我们说说行距,上图的文字整体行距是比较保守的同距型,这种方式比随意的摆放要合理一些,但是整个文案部分看起来较为死板呆滞。 [align=center][img=山岩ps小课堂22_38.jpg]http://image.135editor.com/files/users/438/4388382/201804/xLVt2vNa_rCBe.jpg[/img][/align] 我们可以拉开文案间的行距,较为合理的承重行距是[color=#FF0000]上窄下宽[/color],宽度可以帮你去支撑画面,但是注意,这个时候我们要把同一范围的文案看做一个整体,当做一个分块,但不要让这种整体在一个画面里出来太多,版块分的太多文案就会散乱,视觉也不易集中,一般情况下两块即可。不过这个整体中的文案之间可以做一些小浮动性的行距的处理。 [align=center][img=山岩ps小课堂22_40.jpg]http://image.135editor.com/files/users/438/4388382/201804/WqVqeN7B_7Mt6.jpg[/img][/align] 红框部分为一个整体,注意上边提到过,就算是整体,其中的行距也可以做一些小的浮动变化,尤其是文案较多的时候不要让你的文字看着死板。然后整个文案很明确的分为两部分,红色一部分,点击领取一部分,通过两个部分的行距拉大来增加承重,但这种行距的拉大不要做的太过,尽量让他们集中在[color=#FF0000]一个视野的范围[/color]。 间距一般来说使用默认距离是不会出现太大的问题的,足够应付很多的场合,但是有的时候我们是需要通过间距拉伸来达到某些目的,比如下图中“精品台钓竿”与整体文案相比较文字部分相对薄弱,我们就可以使用文字间距拉伸的方式让它有更好的表现效果,不过我们要注意文字间距的人为拉伸尽量不要让拉开的距离[color=#FF0000]超过当前一个字体大小的一半[/color],那样文字就会散乱。 [align=center][img=山岩ps小课堂22_42.jpg]http://image.135editor.com/files/users/438/4388382/201804/hfSHF3Pq_WpJv.jpg[/img][/align] 如果你非要做大于一个体积的间距,就需要[color=#FF0000]增加一些装饰效果[/color]来弥补空白过大所带来的视觉问题。 [align=center][img=山岩ps小课堂22_44.jpg]http://image.135editor.com/files/users/438/4388382/201804/xbBzXvCf_yccf.jpg[/img][/align] 再延伸到一个问题,很多朋友都很喜欢用英文做些装饰效果或者翻译,这种情况我们[color=#FF0000]尽量使用大写[/color]字母而不要使用小写,小写文字有高有低,一行下去很不规整,凹凸不平,很容易干扰视觉,而大写高度相同就会减少这种视觉上的冲突。 [align=center][img=山岩ps小课堂22_46.jpg]http://image.135editor.com/files/users/438/4388382/201804/ndeGKX8E_dQCU.jpg[/img][/align] 从干扰的角度去出发,文字中的[color=#FF0000]标点符号[/color]也是比较影响视觉的,可以选择性去掉,我们可以使用空格或一些装饰符号去代替生硬的标点。 [align=center][img=山岩ps小课堂22_48.jpg]http://image.135editor.com/files/users/438/4388382/201804/rdnOHZnd_rMII.jpg[/img][/align] 下期我们继续对文字排版中需要注意的小细节进行分析和讲解~
收藏
 
分享到:
 
  • 直播课程:-
  • 视频课程:-
  • 粉丝:-
  • 回答:-
正在加载...

Copyright © 2015 xuehui.com All Rights Reserved 长沙维联文化传播有限公司 版权所有(建议使用1280以上分辨率、IE8以上版本浏览器访问)
湘ICP备13012319号-2