超实用的版式设计技巧汇总(3)

资讯频道 - 设计技 来源:中国设计在线 作者:cdo 2015-05-29

文字的组合呈现

文字的目的是使内容能够被读懂。在文字的排版中,易读性是需要重点考虑的问题。为了明确表现出不同内容之间的差别,最基本的处理方式就是改变文字的 字号或者颜色。对于需要重点展示的文字,可进行单独的视觉化处理。例如,在图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 整体界面的呈现

总结

总结本小节的内容可以看到,一切的版面设计都是基于内容的存在,体现内容的主题思想,用视觉化的手段增强读者的注意力与理解力,以科学的方式实现层级递进的效果。大视觉、小细节,一个都不能少。

 

引导性

说到引导性,比图片排版(见图9)更加直观的是时间轴的运用(见图10)。突出每个节点,结合之前提到过的距离和节奏的方法,呈现更加新颖跃动的排版形式。

图片与文字的相辅相成

在排版的过程中,图片与文本的组合方式也是重要的问题。必须要有意识地避免将图片的美观与文字的易读性相互消解,两者之间的配合非常重要。作为说明 图片内容的文字,它与它所说明的部位的对应关系必须是明确的(见图11)。一方面要避免图片与其文字说明的距离过远,另一方面还应该尽量将某图片的文字说 明与容易引起误解的图片拉开距离。

声明:站内网友所发表的所有内容及言论仅代表其本人,并不反映任何网站意见及观点。

全部评论

暂无相关推荐