杂志版式化简约却有力的强视觉

发表于2015-05-01

简约却有力的强视觉

经验是把双刃剑，它帮助我们更高效快捷的完成任务，但它也往往是束缚我们思维的枷锁。网页设计也是如此，由于早期硬件宽带等限制，网页设计开始有了自己的制作规范，但随着网络的发展，网页的技术也在不断的变化和提升，网页展示的方式也更加丰富了起来，仅仅是翻阅网页设计作品进行学习是远远不够的，那只会让我们在视觉的道路将越走越窄，也许当我们可以尝试的跳入其它的设计体系，让不一样的环境刺激我们新的灵感。向杂志版式学习，是我们尝试迈出思维局限的第一步。

为什么可以向杂志学习

首先因为纸质媒体的平面设计和信息排版较网络媒体有着更悠久的历史，相对而言它们经验沉淀更加专业;其次，随着网络硬件的提升，网页在视觉形式表现上的束缚也越来越少，这样的环境给网页设计师带来了更多元化的设计学习空间。而杂志排版无疑是其中一位良师。第三，杂志版式中简约轻薄的形式感正好契合了现在配合多终端的网页自适应设计。

所以向杂志排版学习，是网页探寻新形式的一个开始。

杂志版式主要通过色块和点线面的形配合形成形式美感。

在一些时尚或视觉类的杂志中圆形、三角、斜线、一像素细线、虚线、箭头等都是较经常出现的元素。而这些元素与色彩的配合，特别是撞色系色彩的配合则十分容易快速呈现强烈的视觉效果。轻质感减少了许多具体质感和细节的繁琐束缚，让设计师更容易对画面进行控制也加快了设计的时间。

版式的强节奏设计，是在一个画面中强调和突出重点信息，并有明确的引导指示。它不同于过去平铺式展示信息的交互方式，它强调信息层级和视觉流程，较之杂志版式设计而言，虽然网页设计有自己特殊的交互性，可以更有逻辑的收纳信息。但由于设计习惯受到早年带宽、栅格化、延展性等问题的限制。在形式感的表现上略显拘束。在一些杂志特别是设计和时尚类的杂志，大但的版式布局是值得我们借鉴的。倘若网页设计能从杂志的版式设计中得到学习，并结合自己的交互的特殊优势相信会有比较不错的表现。

从视觉上讲，如何去强化信息，以达到突出和明确视觉指引的目的呢？我们用三个关键词来概括它，“大小”“多少”“粗细”。下面我们分别来看一看。

首先是大和小的节奏配合，夸张的大字和小字的配合使用是杂志化版式节奏的一大特点，它使阅读和视觉的定位更加明确，适用于我们这样快速阅读的信息时代。

其次是多和少的节奏配合。大量的留白在设计杂志中也是常见的，留白增强了信息的层次感，也让阅读得到休憩。

第三是粗和细的配合，粗细的配合一个是体现在高磅数和低磅数字体的配合上，还有体现在留白处的细微设计中。

在这个读图时代，长篇的文字让人厌倦，图片是直接有效的触动我们麻木神经的好办法。

超大的使用是杂志设计中常见的表现方式，由于带宽的限制过去的大部分页面设计都选反单色、渐变、平铺等方式做为页面的背景，随着硬件的发展和技术的优化，未来我们也更有条件使用更大面积的图片，进行更大面积形式设计。

图片大视觉分为三个类型，一是作为背景使用的，覆盖整个版面的背景大图，它多由高质量的摄影、插画或一些艺术平面作品组成。图片的质量决定了版式的质量。第二种，是信息的图形化，它将信息进行整体的图形化设计，让文字信息形成连贯而整体的图片视觉。第三种是文字配图，它通常与文字并行展示出多样的形式表现。

1.背景大图

2.信息图形化大图

由文字和人物组成的插画式的图形化信息呈现，让阅读犹如电影般播放，视觉表现十分整体。

不同的鸟类形态通过等比线对比感受更直观。

3.文字配图

大图片、大标题、小文字这三种元素组成了许多精彩的具有强烈节奏的视觉表现，当然其中文字配图的图片质量占有关键地位。

这是一个全屏画幅页面。简洁的方形版块充满了现代感。大块面的轮播图片与反白背景的方形关闭、前、后按钮形成了强节奏，下面小字的栏目配上大视觉的简洁快面让整体视觉充满了强烈的现代感。

版块中并无太多的质感表现，色彩和板块结构的配合表现决定了画面的大视觉，三角块面与对比色的配合应用让画面锐利、活跃、响亮，充满了现代的时尚气息。文字、小三角、一像素的细线及微折纸的质感表现决定了细节。轻质感无需考虑太多实体逻辑的束缚，可以充分发挥色彩和结构的优势。这种方式使我们可以在更短的时间内实现细节和大视觉兼备的并具有视觉冲击力的网页效果。

超大字号主标题是杂志版式化的一个特征，配以小字说明，就可以形成强节奏的形式感。

大图与小字的配合也是杂志化版式常用手段。也是强节奏形式的好办法。

除了鲜明的大字表现外，纯文字和手写体的配合，大气中带亲和。右下角的一块小面积小字，定位了画幅的最小精度，使整体大视觉不致于简陋。

这是一个竖条的导航，形式上大胆，点击当前按钮有具体的图片显示，深色的图片内容一方面可以对菜单进行图解，另一方面在白色背景上深色彩图形成了色彩上明与暗的节奏感，关键字母的大与小字说明也形成了大与小的节奏感。

作为以图片为主的大视觉，图片本身的质量也是相当关键的，它承担着整个大效果。

1.背景大图

移轴的照片是近两年比较流行的高空俯拍的形式，它让城市看起来如玩具一般轻松有趣，图片视觉上占有一定优势并配以Q版的汽泡按钮，风格整体视觉统一开阔。

高空单杆泰然自若的一横排人，心不经为之一颤。单就图片来说，符合大背景的惊艳标准。

艺术化的彩绘人物让整体视觉独特响亮。眼神与按钮的配合增强了交互的有趣性。

高质量黑白图片，配上枚红色方向导航按钮，展开的双臂配合交互指试着下一级的方向，简约、大气、闷骚。

需求分析

这是一个灵值系统的欢迎页，需求方希望用户能够通过四个要点的介绍进一步了解灵值，并希望在信息阅读上更加轻松，视觉表现更加友好。但由于这是上线前临时增加的一个需求，整个制作时间只有两个小时。而内容以文字为主，于是当下我们选择了类似杂志排版的视觉表现把以上内容分为五个部分。首页，它负责整体介绍并设有功能的快捷入口，以帮助部分希望快速进入的用户可以直接到达系统。其它内容根据标题分为四个页面，为了更好的进行杂志版式化的设计，我们要提炼重点梳理关系。通过强化文字的节奏形成设计形式感。具体操作如下。

设计分解

1.将内容中提及的常用操作功能提炼成交互的按钮，让用户在阅读信息的同时可以操作。另外帮忙需要快速进行页面的用户以便捷的通道。设置五张页面内容轮播导航的导航，让用户对后面的信息量有一个预知。

2.参与杂志化版式，拉开文字节奏。由于在素材提供时只给了三张配图，所以我们将第一部分的内容“什么是灵值”设置为欢迎页，放大的欢迎二字，一方面在短时间内弥补了素材缺失的不足，另一方面也增强了页面的在形式上的友好性，并使用英文进行一定的装饰和说明补充。拉大了标题与正文字容易字号差距，进一步增加整体视觉节奏感。

页面展示