超实用的版式设计技巧全方位总结.pdf

超实用的版式设计技巧全方位总结 在信息化社会的浪潮中 ，快节奏的生活让人们开始学会选择性 关注。如何在纷繁的信息中引导用户？有没有科学的方法？这 是当今设计师所面临的问题。界面 版式的构成是信息传播的 桥梁 ，也是视觉传达的重要手段。科学的编排技术 ，以及实用 性与艺术性的合理运用，才能成就更快、更准确的信息传递。 时尚频道作为腾 讯网中更强调视觉呈现的频道，在运营的过 程中通常有非常鲜明的案例。本节我们就从这些案例中剖析一 些方式，来感受版面设计中的科学性和趣味性。 图片的排列组合 距离感 “距离”在心理上表示亲近的程度 ，亲近度减弱则表示变远 ，亲近度增 强则表示变近。在排版设计中 ，同样也可以用距离的远近表现各部分内容之 间的亲密程 度。例如，通过调整各部分内容的间距，来表现各部分内容之 间的关联性。但需要注意的是 ，过多不同的距离设定反而会违背区分其关联 性的初衷。 接下来我们来看一下时装周秀场专题界面秀场图的展示部分。由于每场 大秀为相同的层级关系 ，所以其图片排布采用了相同的距离来展现。利用距 离进行明确 的组别划分，将一类的图片进行整合，同时也缓解了图片繁多 的压迫感。同时每场秀的权重是平等的，所以运用了相同尺寸的图片平铺设 计，利用了组合图片的反复 效果，带给用户信息充足而又凝练的印象（见 图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的黄金比例构成的矩形 ，也被认为是最理想的矩形比例。一