在信息社会的浪潮中，快节奏的生活使人们学会有选择地关注。如何在复杂的信息中引导用户？有没有科学的方法？这是当今设计师面临的问题。界面布局的构成不仅是信息传播的桥梁，也是视觉传达的重要手段。科学的编排技术和实用性、艺术性的合理应用，可以实现更快、更准确的信息传递。时尚频道，作为滕循一个强调视觉呈现的频道。com，在操作过程中经常会有非常明显的案例。在这一部分，我们将从这些案例中分析一些感受布局设计的科学性和趣味性的方法。

　　对称构图有左右对称和上下对称。对称构图可以给用户一个整洁稳定的印象。在基本对称形态上加入一些细微的变化也会给用户带来惊喜，就像这个案例在对称的基础上进行了垂直翻转一样。在设计该版块的前期，需求方提出自动检索该版块的内容，均为方块图。因此，我们采用等比例的图像处理，降低了后期维护的工作成本。拍照后，简单的JavaScript代码可以将其应用到任何位置，并确保其满足所需的渲染质量。同时，通过图片大小的不同，定义图片之间的主次关系。为了避免尺寸类型过多带来的混乱，我们只设置了大、中、小三个级别的尺寸，并调整了它们的平衡关系。

　　即使传递的是同样的信息，简单的文字表达和混合视觉元素的表达也会给用户带来不同的印象。如果读者不能通过简单的文字快速理解信息，可以通过视觉处理轻松掌握内容。那些用文字表达时显得冗长的描述，一旦被视觉表达所取代，就会立刻变得清晰。插画起到浓缩信息内容，增加图像比例的作用。

　　如图16所示，数据以量化形式以不同颜色呈现，方便读者直观了解内容。复杂内容按照大类进行合理整合和逐一分析。并利用饼图、条形图和曲线图的变形来达到视觉传达的目的。对于用颜色区分各部分的应用，需要采用对比色、同色系或对比色系，用颜色区分差异。

　　如图17所示，是对黑眼圈的特殊描述。如果简单地用文字描述，用户将很难理解气氛和场景。熊猫的拟人化不仅增加了趣味性，也让用户在轻松愉悦的氛围中理解所表达的内容。

　　由此可以推导出更多的呈现形式，将这种等比递进的呈现方式应用到单品抠图的编排中，会有很好的效果，其对称性和缩放原则是一致的。像下面两个例子，如图3(a)和图3(b)所示，虽然是抠图形式的单品，但其大小级别其实只有两级，布局也采用对称形式，所以还是有规律可循的。这个项目最初的需求是要有一种带有日系气息的DIOR时尚感。搭载的内容为2015迪奥精神-东京大展专访，现场图片推送，包括采访、评论、图片信息展示等功能。

　　了解情况后，如何科学设计？首先，主题突出。因为演出地点在日本东京，所以日本元素必不可少。从这个发散中，提炼出樱花、折扇、禅三个关键词。所以封面氛围以大面积樱花营造，主题只用文字编排，中英文结合成线，将重点内容“心动东京”和“DIOR”放大。在保证英语识别的基础上，进行删减，采用距离和节奏的方法体现主题的主次关系。线描樱花的处理基于禅宗追求完美，运用点、线、面的基本组合原则，构建视觉中心的整体性。两侧点缀日本“DIOR”，细节上强调日本东方气息，不偷镜加分。引导进度条以折扇的形状进行引导，采用前面提到的时间轴的引导方式，保证用户在浏览时掌握阅读进度，为自己的浏览做心理预测(见图18)。

　　内页承载了更多的信息输出，所以要避免大规模的氛围强调。为了保证色调的统一，我们用禅麻质感打基础，两边只放出樱花枝的延伸，呼应封面氛围。关于如何输出好内容信息，以面试页面和背景细节为例进行简要分析。

　　先看面试页面(见图19)，因为界面需要承载四个内容：面试人物、主要化妆作品、好友留言、面试对话，所以如何处理好它们之间的逻辑关系是首要问题。首先把握核心主题，即采访人物彼得，所有的内容都是围绕他进行的，所以他的画面也在视觉比例上有所强调，他的主要化妆作品都是围绕但小于主题的。这里，不同的形状被用来使间隔看起来更大。

　　这里摒弃了方块图的处理方式，采用了圆形图的处理方式，在信息量较大的排版中巧妙地营造了通风效果。朋友圈信息以符号变形的形式体现，区别于主体的功能性，作为辅助功能进行点缀。最后是访谈对话内容的呈现。因为重量高，所以布局也大。在问答的形式上，运用了前面提到的排版原则，通过不同的颜色区分不同层次的内容，营造阅读的节奏感。

　　背景详细信息页面(见图20)也使用了对称和等价的规则。但在这种对称的设计中，采用了不规则的处理方式，图片的排版以发散的形式呈现，营造出“若无其事”的动感。同样的，为了方便需求端的自动检索，图片还是等比处理，降低维护成本。画面大小只设置了大、中、小三个层次，调解其平衡关系，有规律可循。对于整个界面的呈现，设计师做了有目的的留白，迎合禅的主题。留白的目的是减少用户浏览的压迫感，给边界构图一种变化感，让其获得更多的扩展空间，从而达到营造安静氛围的效果。背景点和线的匹配在功能上对相似的内容进行了分类和统一，同时建立了界面布局的平衡。页面主要内容在1000px以内，保证了宽窄屏用户的无损浏览，但大屏用户的浏览体验太弱。因此，日本“DIOR”在1000px的页面之外进行拆分排版，以争取用户浏览的视觉美感。

　　画面排列组合的距离感

　　“距离”在心理上表示亲近的程度，而减少亲近意味着离得更远，而增加亲近意味着离得更近。在排版设计中，我们也可以用距离来表达内容各部分之间的亲切感。例如，通过调整每个部分的内容之间的距离，可以表达每个部分的内容之间的相关性。然而，应该注意的是，太多不同的距离设置将违背区分它们的相关性的初衷。

　　接下来我们来看看时装周秀场特别界面的秀场部分。因为每个大秀都有相同的层次关系，所以它的图片都是以相同的距离排列的。用距离把组划分清楚，把一个班的图片整合在一起，也缓解了很多图片的压力。同时每场秀的权重相等，所以采用了大小相同图片的平铺设计，采用了组合图片的重复效果，给用户的印象是信息充分简洁(见图1)。

　　另一方面，街拍部分用大小不一的图片排列，通过主次关系的区分，突出专属内容。同时图片之间的距离是一样的，意味着在大环境下还是属于同一级别内容，亲密度是一样的(见图2)。

　　还有两种数学理论，对称和等价。

　　节奏是指自然界、社会和人类活动中与节奏齐头并进的规律性突变。如激烈而缓慢的音乐，艺术的节奏，以及文学作品的高潮。节奏也是版面处理的重要元素。

　　通过重复规则的形式，用户可以感受到一定的节奏。就像下面的例子一样，图片的排列总是遵循“上下”的原则，既聪明又有规律(见图5)。

　　同时，由于这个例子中使用的图片是矩形的，我们不得不扩展一个数学规则：黄金分割比例。黄金分割比是一个定义为(-1)/2的无理数，广泛应用于数学、物理、建筑、艺术甚至音乐等领域。这种古老的数学方法所具有的魔力在实践中发挥了意想不到的作用。黄金比例为1: 1.618的矩形也被认为是最理想的矩形比例。一个广为流传的说法是，比黄金分割长的长方形是正确的女性形象；相反，随着逐渐趋于方形，矩形会变得更加阳刚。作为设计参考，值得学习和尝试。那我们就来说说节奏的应用。除了规则的形式重复，如果在一系列节奏中加入一些不同的元素，构图也会发生变化。这个不同于其他部分的元素将成为页面的关键内容，构图也会变得更加生动灵活(见图6)。

　　当然还有一个比较随意的布局节奏，那就是场景的安排。像美国20世纪50年代的旧海报拼贴，如图7(a)所示，或者是明信片散落在桌面上的排列，如图7(b)所示，更随意自然。

　　同时，用色彩反映节奏突破了简单排版的思路，以更直观的手段给用户一个清晰的感知和规律的把握。就像下面的例子(见图8)，虽然呈现的内容量不小，但六色的节奏规则清晰，内容完整。

　　说到指导，使用时间轴(见图10)比图片排版(见图9)更直观。突出每个节点，结合前面提到的距离和节奏的方法，呈现出更加新颖、动态的排版形式。

　　图片和文字相辅相成

　　在排版过程中，图文结合也是一个重要的问题。要有意识地避免消解画面之美和文字的易读性，两者之间的配合非常重要。作为解释图片内容的文字，它和它所解释的部分之间的对应关系必须清晰(见图11)。一方面要避免图片与其标题之间的距离，另一方面要尽量将图片的标题与容易引起误解的图片拉开距离。

　　当然，如果把所有的内容都处理得过于统一，有时会产生相反的效果。在排版图片的过程中，顺序添加变化是一个不错的选择。

　　另外，不要用图片把文字剪掉，这样会损害文字的可读性。如果在整篇文字中插入一张图片，阅读的视线就会被打断，用户往往不知道该从哪里继续。对于图片中插入的字符，选择容易识别的颜色非常重要。通常的选择是白色或黑色。如果选择与图片相同的颜色，将很难识别。同时，文字要尽可能放在不影响画面效果的位置(见图12)。

　　写作的目的是使内容被理解。在字符的排版中，易读性是一个重要的问题。为了清楚地显示不同内容之间的差异，处理它们最基本的方法是改变单词的字体大小或颜色。对于需要突出显示的字符，可以进行单独的视觉处理。比如图13中，图片底部的两行是对文字采访内容的关键引导，不仅改变了颜色，还进行了斜体处理，让用户在阅读前就能预测文字是否有趣，进而决定是否阅读全文。同时，本项目还搭配了HTML5响应式设计，保证了移动用户的浏览需求。其设计氛围与PC视觉统一，但复杂元素被拆分删除，使得信息主体更加清晰，并利用移动终端的优势增加了全屏大图像的显示，既强调了视觉效果，也方便用户仔细浏览。整个界面，樱花花瓣缓缓飞舞，营造的气息自然拂过脸庞(见图21)。

　　总结这一节的内容，我们可以看到，所有的版面设计都是以内容的存在为基础，体现内容的主题，运用视觉手段增强读者的关注度和理解度，以科学的方式实现递进的效果。大视野，小细节，缺一不可。