文字的排版设计有哪些科学方法？看腾讯案例解析版式趣味

在信息化社会那如浪潮般的形势下，快节奏的生活促使人们开始着手学会选择性地去关注，怎样于纷繁复杂的信息里头引导用户呢，有没有科学的办法呢，这是当今之下设计师所面临着的问题，界面以及版式的构成是信息得以传播的桥梁，同时也是视觉进行传达的重要手段，科学的编排技术，还有实用性跟艺术性的合理运用，才能够成就更快、更为准确的信息传递，时尚频道作为腾讯网里更着重强调视觉呈现的频道，在运营的进程当中通常有着极为鲜明的案例。在这一节当中，针对这些案例，我们要剖析出一些方式，以此来感受版面设计里的科学性，同时感受其趣味性。

图片的排列组合距离感

在心理这一方面，“距离”所呈现的是亲近的程度，要是亲近度有所减弱，那就意味着变远了，若是亲近度增强，那就表示变近了。在排版设计当中，同样能够借助距离的远近状况去体现各部分内容之间的亲密程度。比如说，经由对各部分内容间距进行调整，以此来展现各部分内容之间的关联性。然而，需要留意的是，过多不同的距离设定反倒会背离区分其关联性的原本意图。

下一步，让我们瞧瞧时装周秀场专题界面之中秀场图的展示板块。鉴于每场大秀具备相同的层级关联，因而其图片排列采用了一样的间距予以呈现。借助间距开展清晰的组别区分，把一类图片予以整合，与此同时也减轻了图片众多所带来的压迫之感。并且每场秀的权重是均等的，所以采用了尺寸相同的图片平铺设计，借助组合图片的反复效应，给予用户信息丰富且又简约的印象（见图1）。

图1中，存在着示例，其排布距离是相同的，尺寸同样是相同的尺寸，此图片为尤目YVMIN品牌授权使用 。

街拍的那部分，采用了大小不一样的图片进行排布，借助对主次关系加以区分，以此突出具有独家看点的内容，与此同时，图片之间的间距一样，这表示它们依旧是归属于一个大环境下的平级内容，亲密度是相同的（见图2）。

图2 相同的排布距离但不同尺寸的示例

这里也运用了数学上的两个理论，对称与等比。

左右对称，上下对称等形式，属于对称构图。对称的构图方式，能给用户带来整齐安定的印象。在基本的对称形式上，加入一些微妙变化，便会给用户带来惊喜，就像此案例在对称基础上，进行了垂直翻转处理。设计此版块前期，需求方提出，此版块内容自动调取，均为正方图。所以，我们采用了等比缩放的图片处理方式，进而降低了后期维护的工作成本，当调取一张图片后，运用简单的 JavaScript 代码就能将其应用于任何位置，并且还能保证其呈现质量达到要求。与此同时，借助图片大小各异，明确了图片之间的主次关系。为防止尺寸类型数量众多而产生杂乱感，我们仅设置了大、中、小三个层级的尺寸，并且对其平衡关系进行了调整。

由这能够推导出更多的呈现样式，将这种以等比递进展现的办法运用到单品抠图的排布做法上也会有挺好的成效，其对称以及缩放的原理是相同的。就像底下的两个例子，像图3（a）和图3（b）所显示的那样，虽说呈现的样式是抠图的单品，但其尺寸的层级实际上仅仅是两个层级，与此同时版式的排布也运用了对称的样式，所以依旧是有规律可循的。

图3（a）呈现出，两个层级的，对称排布的这样一种情况。此图片系由尤目YVMIN品牌授权使用的。

图3（b），存在着两个层级的对称排布情况哈。此图片是由尤目YVMIN品牌授权使用的哟。

而紧接着的接下来的那两个例子，会显得更为讨巧，就如同图4（a）所展示的那样，也如同图4（b）所呈现的那般，图片的尺寸尽管仅仅只有一个层级，然而呢，却因为菱形的分割，从而显得灵动又独特，是这样的情况。

图4的（a）部分，呈现出一种独特的、以菱形进行排列分布的样式，该图片是經由尤目YVMIN品牌授权才得以使用的。

图4（b） 独特的菱形排布

节奏感

在自然之中，存在着一种有规律的突变，它与韵律结伴而行，这便是节奏，于社会领域同样如此，人的活动里亦是这般，像音乐有着快慢、激烈、缓柔等不同表现，美术有其韵律，文学作品包含铺垫、高潮、结尾等，在版式的处理方面，节奏也是一个重要的元素。

凭借反复呈现的具备规律特性的形式，能够使得用户体会到某种特定的节奏，恰似下面所列举的实例一般，图片的布置一直依照“上下上下”这种摆放的准则进行，显得灵动且存在规律能够探寻（可查看图5）。

与此同时，鉴于此例子所运用的图片形状是矩形，所以我们又得引出一项数学规则：黄金比例。黄金比例是一个被定义为（ -1）/2的无理数，它被运用的范围极为广泛，像数学、物理、建筑、美术乃至音乐领域。这种古老数学方法具备的魔力在实际当中常常发挥着超乎我们想象的作用。依照1∶1.618的黄金比例构成的矩形，也被视作是最为理想的矩形比例。有一种流传很广泛的说法，那就是，有这样一种矩形，它比黄金比例更细长哦，这种矩形是一种呈现着端正状态的、展露出女性特质的图形呢；与之形成相反情况的是，当它慢慢朝着趋向于正方形的方向变化时，这个矩形就会渐渐变得更具男性化的特点啦。而这，将其当作一种设计方面的参考依据，还是具备值得被借鉴以及去尝试的价值的。

再来讲述节奏的运用 拿掉规则的形式重复 给一系列节奏添加某些各异的要素 构图便会产生变化 这个与其他部分不一样的要素 会成为页面里的关键内容 构图也会变得更为生动灵活 （见图6）。

图5 有重复规律的摆放（图片由尤目YVMIN品牌授权使用）

图6 在重复规律中加入不同要素

当然，还有一类更具随性特质的版式节奏，呈现为场景化的排列方式，就像美国20世纪50年代的老海报那样进行拼贴，正如图7（a）示意的景致；或者类似散落在桌面的明信片那般进行排布，恰似图7（b）展示的状况，呈现出更显随意与自然的态势。

图7（a） 场景化的排布方式——老海报拼贴

图7（b） 场景化的排布方式—散落的明信片

与此同时，运用颜色去展现节奏这种做法，突破了仅仅只是单纯排版的那种想法，通过更为直观的方式，给予用户清晰明确的感知，进而让用户掌握当中的规则。就如同紧接着的例子（可查看图8），虽说所呈现出来的内容信息量并非不大，然而6种颜色明确了里面的节奏规律，把内容开展了整合。

图8 用颜色来体现节奏

引导性

较之图片排版（见图9），提及引导性，更为直观凸显的是时间轴的运用，（见图10），每一节点予以突出，之前所讲的距离以及节奏方法相互结合展示，呈现出更为新颖跃动的排版情形。

图片与文字的相辅相成

于排版进程当中呐，图片跟文本的组合形式同样是关键的事项哟。务必要有意识地去防止把图片的美观性跟文字的易读性彼此抵消掉呀，此二者之间的搭配是相当重要哒。作为对图片内容进行说明的文字呢，它跟其所说明的部位的对应关联必须得是清晰明确的（参照图11）。一方面得防止图片跟其文字说明的间距过于遥远呀，另一方面还应当尽可能地把某图片的文字说明跟容易引发误解的图片隔离开距离来呢。

图9 用图片排版实现引导性

图10 用时间轴实现引导性

图11 图与其说明文字的对应关系要明确

要是所有内容都被以过度统一化的方式予以了处理，那么有时就会起到相反的作用。在对图片进行排版的这个过程当中，在整齐的状态里加入变化，这是一个挺不错的选择。

除此之外，别用图片把文字截断，如此会破坏文字的可读取性。要是用插入图片的方式在整段文字里呈现，那么阅读的视线就会被干扰，用户常常不晓得该从哪里往下接着看。而对于图片里所插入的文字，挑选容易辨认的颜色是相当关键的。一般来讲，最佳的选择是白色或者黑色。要是选用和图片同一色系的颜色，那就会不容易辨认。与此同时，应当尽可能把文字放置在不会对图片效果产生影响的位置上（见图12）。

图12 图片和文字互不影响效果

文字的组合呈现

那文字的目的呀，是要使得内容能够被读懂呢。哦，在文字的排版这个范畴当中呀，易读性可是需要重点去考虑的一个问题哟。为了能够明确地展现出不同内容之间存在的差别呢，最基本的那种处理方式呀，就是去改变文字的字号或者颜色啦。那些需要重点展示的文字呢，可以进行单独的视觉化处理哦。比如说呀，在图13那种情况下呢，图片下方的两行文字呀，是正文采访内容的重点导读呢，不仅改变了颜色哟，还对其做了斜体处理呢，这样就能让用户在阅读之前呀，去预估一下正文是不是自己感兴趣的内容呀，尔后决定是否阅读全文啦。

图13 对于需要重点展示的文字进行单独的视觉化处理

像图 14 所呈现的问答形式，是以 icon 来引领的，它再次依照之前所提及的节奏法则，用户这边能够直观地知晓要去阅读文章的时间成本，那种层级关系也是清晰得一目了然。

图14 以问答形式呈现文字

有的引号运用，就像图画15展示的那样，达成了让重点内容凸显的成果，并且还强化了整体氛围的那种代入感。

图15 运用引号突出重点文字

图解的传达

即便传递的是同样的信息，单纯以文字进行表现的方式，跟夹杂了视觉要素的表现方式，会给用户带来不一样的印象。要是通过单纯文字表现，没办法让读者快速理解信息，那么就能够借助视觉化处理，让内容变得容易把握。那些用文字方式表现时显得繁杂冗长的说明，一旦换成视觉化表现方式，就会立刻清晰明白。图解发挥了凝缩信息内容、增加图像比重的作用。

在图16里，把数据使用不一样的颜色以量化形态去呈现，这能够方便读者直观地领会其中的内容。图中针对复杂的内容做了合理整合，依照大类别一个一个地开展了分析。并且运用了圆饼图、长条图、曲线图的变形，去达成其视觉传达的目的。对于借助颜色区分各部分的应用，要采用对比鲜明、同色系或者对比色系的处理，凭借颜色的明暗来区分其中的差别。

图16 对数据的图形化处理

于图17之中呈现的内容，乃是关于黑眼圈的专题描述，要是仅仅借助文字去进行描述，那么用户将会极其难以去理解其中的氛围以及场景。采用熊猫拟人化的方式予以体现，在增添了趣味性情况发生的同时，还使得用户于轻松愉快的那种氛围里面，知晓了所表述出来的内容。

图17黑眼圈专题

“DIOR迷醉东京”案例分析：一场樱花飞舞的视觉盛宴

该项目起初的需求是具备带有日本气息的DIOR潮流感，所承载的内容是迪奥精神，是2015东京大秀的独家专访，还包括现场图片推送，这里面有访谈、点评、图片信息展示的功能。

弄清楚情境之后，要怎样运用科学的办法来开展设计呢？首先是主题的凸显，鉴于秀场处在日本东京，因而日式的元素是绝对不能少的。据此展开发散，提炼出关键词樱花、折扇、禅意。所以封面氛围用大片樱花作底色来营造，主题只是对文字进行排列，以衬线体的英文和中文组合，把需要着重突出的内容“迷醉东京”以及“DIOR”放大，并且在确保英文辨识度的前提下，对其予以切割，运用距离与节奏的方式，展现主题的主次关系。樱花线描的处理，基于禅意对圆满的追求，运用点、线、面基本组合原理，搭建视觉中心完整性。两侧日文“DIOR”点缀，于细节处强调日式东方气息，不抢镜且加分。引导进度条以折扇形状引导，运用之前谈及的时间轴引导方法，保证用户浏览时掌握阅读进度，对自身浏览有心理预估（见图18）。

图18 封面设计

承载更多信息输出的是内部内页，所以要避免大面积的氛围强调。为确保基调性统一，我们用禅意的麻布质感铺底，仅在两侧放出樱花盛放枝头的延伸，使其与封面氛围相呼应。这里以专访页面和后台细节为例，对内容信息怎样良好输出进行简单剖析。

先去看专访页面，就是图19所示的那个，鉴于界面里要容纳专访人物、主打妆容作品、好友寄语以及专访对话这四项内容，所以怎样处理它们相互之间的逻辑关系，这算是最为首要的问题。首先呢，要抓住核心主体，也就是专访人物Peter，剩下的所有内容的承载都是以他作为中心来展开的，因而在视觉比重这个方面，也会着重突出他的图片，他所主打的妆容作品围绕在其周围，不过规模比主体要小。这里采用了不一样的形状，进而使得间隔看起来更大些。

这里摒弃了方图的处理办法，转而采用了圆图的处理办法，在信息量繁多的排版情形下，精巧地营造出了透气的效果。好友寄语部分是以便签变形的形态予以呈现，有别于主体的功能性，充当辅助性的功能点缀。最后出现的是专访对话内容的展示，鉴于权重较高，同样预留了较大的布局处理。问答的形式运用了先前提及过的文字排版准则，借助不同的颜色去区分不同层级的内容，营造出阅读时的节奏感。

图19，是关于专访的页面设计，其中，人物图片是由尤目YVMIN品牌授权才得以使用的。

后台细节页面，也就是图20所示的那个页面，同样采用了对称与等比的法则。不过呢，在这个对称的设计里头，运用的是不规则的处理方式，是以像发散那样的形式来呈现图片排版的，进而营造出那种若有若无的动感。同样而且，为了能方便需求方进行自动调取，图片依旧采取等比的处理方式，以此降低维护成本。图片的尺寸仅仅设置了大、中、小这三个层级，在调解其平衡关系的同时，又有着规律可以遵循。

图20 后台细节页面设计（图为展示DEMO）

对于整体界面的呈现，设计师做了有目的的留白，去迎合禅意主旨，留白是为减轻用户浏览的压迫感，赋予界面构成变化感，让其有更多扩展空间，进而达到营造宁静氛围的效果。背景点与线搭配，在功能上把相似内容分类统一，同时建立界面版式的平衡感 。页面主体内容处于1000px之内，这保障了宽窄屏用户能有无损浏览体验，然而对于大屏用户而言，其浏览体验会显得太过寡淡，所以在页面超出1000px的部分，对日文“DIOR”加以了拆分排版，以此来追求该用户人群浏览时的视觉美感。

与此同时，该项目采用了HTML5的响应式设计手段，用以保障移动端用户的浏览需求得以实现其设计氛围跟PC端在视觉方面达成统一，不过针对复杂元素做了拆分以及删减的处理，使得信息主体更为明晰，借助移动端自身具备的优势增添了满屏大图的展示，一方面突出视觉效果，另一方面方便用户进行细致浏览。整个界面当中，樱花花瓣缓缓地飞舞着，所营造出来的气息自然而然地扑面而来（可参见图21）。

图21 整体界面的呈现

总结

按照本小节内容进行总结，能够发现，所有的版面设计都是因内容的存在而产生，它展现内容的主题思想，运用视觉化方式强化读者的注意力以及理解力，借助科学方法达成层级递进的成效。大视觉与小细节，缺一不可。

继续浏览有关 排版设计视觉传达 的文章