UI设计中的版式设计分析

摘要：由于超链接技术的应用，人类的信息处理和交流正从文本向超文本转化。基于网络数字媒介的UI版式设计已经完全不同于纸质平面媒介的版式，文本信息的架构方式从平面二维展开变成了立体网状层级信息架构，媒介也以手机屏幕和PC显示器为界面，信息的传递也从单向传递变成了双向交互。因此，我们必须重新认识和建构适应网络数字媒介的UI设计的版式方法和理念。本文主要论述了UI设计中的版式设计的相关概述并进行相关的分析，提出针对网络信息媒介相应的信息架构方式和版式布局与设计原理与注意事项。

关键词：UI设计 版式设计 网络媒介

当前，正处于数字式信息时代，由于时代在改变，传统的纸质媒介的版式设计方法已经完全不适用于数字媒介，版式设计也因此需要进行相应的创新。网页界面与手机界面作为信息时代的主流媒体，与传统的纸媒相比，采用了完全不同的信息架构方式，并增加了信息双向交互，更加重视用户体验，而且平面视觉版式设计也发生了很大的改变，但是作为信息传播的本质是一脉相承的。

一、UI设计中的版式设计的相关概述

版式设计主要是进行图片与文字的编排，一般而言主要指的是根据相应的规律，对视觉元素以及构成元素进行合理的编排，从而使得信息能够美观、有序地进行传达。充分将主题突现出来是版式设计最基本的前提，因此，在进行企业官方网站、手机 APP 软件UI界面设计的时候，必须要对诸如图标、按钮、符号、图片、文字、色彩、线条等页面的所有元素，按照形式美的法则加以组织，进行整体布局，才能形成美观实用的界面。版式设计中点、线、面这三方面是构成视觉元素的关键。其中，“点”在UI界面中出现，说明是可以将所出现的信息点击链接的，它的作用是能够将版面进行分割，点缀画面以及强调秩序，尤其是其功能在UI设计中具有无法替代的细节要素。而“线”在网页界面以及手机界面中通常是以分割线或缝隙的形式来进行展现的，倘若不存在线，界面的条理性就不会显得那么清晰，将会给人非常凌乱的感觉，人们在进行阅读时就难以进行下去，使得UI设计的传达功能无法得到实现。“面”在视觉中主要分为图片与色块这两类，一名合格的UI设计师应该要能够在满足界面功能需要期间，充分利用能与主题进行合理搭配的图片或者色块来将画面进行改进，从而使得画面能够更加美观，更加丰富。另外，美国人Richard Saul Wurman提出的“LATCH”模式，即Location（位置）、 Alphabet（字母）、Time（时间）、Category（类别）和Hierarchy（视觉层级），仍然精炼地揭示了信息组织与架构的原则，UI界面设计仍然要遵循信息架构的这些原则进行版式设计。今天已经跨入移动互联网的信息时代，由于超链接交互式信息处理技术出现，UI设计师的版面布局必須从二维平面展开的方式向立体网状层级跳转链接的思维转化，才能真正拓展全新的数媒版式设计的新方向。

二、如何建立针对数字界面的栅格化的版式设计

对于网页或者是手机应用的UI设计来说，栅格化如同纸质媒体排版的网格系统一样重要。对于UI设计而言，像素px作为数字媒体的最基本单位，贯穿于版面布局的始终。电脑屏幕中最常见的1024×768像素单位和1920×1080像素单位，以一种“优雅”的、接近黄金分割1：1.618的比例关系被大众广泛接受，这种比例也大量运用在苹果、安卓系统的各类手机屏幕，以及笔记本电脑、电视屏幕等诸多电子产品中。在此基础上，包括图片文字视频等所有的设计元素，以及它们之间的留白和空间关系，都是以像素为单位建立起以整套栅格体系构建其各自的平面版式关系。有趣的是，传统纸质媒介的视觉比例关系是建立在根号2，即1：1.414这个数学模型基础上的，无论是A1还是A2、A3或A4，所有国际标准纸张的尺寸的宽长比都是这个数值。对于网页的设计而言，栅格化瀑布流模型是处理大信息容量的版式一种主要的设计方式，诸如新闻信息类门户网站、行业和资源类型的网站、交易类型的网站，都大量采用这种版式模型，而公司和机构的官方网站、搜索引擎网站因为信息容量和用户体验的不同，要个性化和简洁很多。而针对手机屏幕而言，大部分智能手机的屏幕尺寸都在5～6吋左右，和手掌大小差不多，平板电脑尺寸则在8～10吋左右。由于受版面尺寸的限制，在单个界面上不能容纳太多信息，必须运用跳转链接和分层逻辑来架构复杂信息，而且手控触摸的操作方式也有很高的交互性要求，这就要求UI设计师要同时具备很强的信息处理和版面布局能力，需要UI设计师在进行排版设计之前，全面按照主题来建立一个网格体系。然而，建立网格体系需要注意以下几点：（1）UI设计师在进行版式排列的过程中应当根据主题对相关内容进行分类，并且将同类的信息排列在相同位置中，防止出现凌乱感，还要注意内容的遗漏；（2）倘若版面中文字与图片过多时，UI设计师需要建立一个相对而言比较清晰的网格体系，还要将图片与文字进行整理，从而使得版面能够给人一种赏心悦目的感觉；（3）应当充分按照受众的阅读习惯来进行编排，所以，需要将比较重要的信息或者相关内容编排在网页最显眼的位置中，使得受众能够准确地看到，使得版面美观且有序，信息也能够准确得到传达；（4）针对不同的信息处理，采用多种交互方式，创造出直观的用户体验。

三、UI设计中的版式设计分析

通常而言，UI设计的版式设计主要有六种类型。（1）满版型版式设计。满版型版式设计的设计元素主要是以满版图片作为主要的依据，能够充分将视觉进行传达，且冲击力较强。此外，满版型版式一般比较适用于相对而言比较大气、直白的企业品牌形象，它的布局非常便利，能够给受众带来深厚的印象，并且得到广泛的应用。（2）分割型版式设计。分割型版式设计的相关内容主要是在进行设计构思的过程中进行区分的，而在版面进行分割时需要用到线、面来分割。（3）倾斜型版式设计。倾斜型版式设计通常而言指的是在进行相关设计的过程中，版面视觉感出现倾斜的情况时，会导致传达出现动感或者不稳定的现象。其主要的作用是以表达运动的形式来呈现的。（4）三角形版式设计。稳定、扎实是三角形版式设计的主要特征，在UI设计中的作用是将版面的大小与形状进行有效的限制，然而这种版面的应用是不常出现的。（5）曲线形版式设计。曲线形版式设计的作用是能够在UI界面中把曲线元素在图片中放大，并且充分运用文字排列的方式使得UI界面能够充分展现出曲线感。（6）自由型版式设计。自由版式主要是在主体界面中采用相对而言比较随意的、不需要遵循规律的编排形成的，使得画面能够呈现出灵活感。在UI设计的版式组织原则中，均衡、对比、对齐、重复、疏密、节奏、层级、流线、网格等纸媒时代的形式法则，仍然具有经典的美学指导价值，这些原则加上交互设计，在以上六种基本版式设计的基础上，会演变出千变万化的版面样式。

四、结语

总而言之，UI设计师背负着时代的重任。信息技术在不断发展，从硬件到软件每年都在更新换代，作为人机信息交互的UI设计也变得越来越重要，UI设计师的思维观念也要不断更新发展。从“媒介即信息”到“媒介即设计”，媒介的改变意味着设计必须改变，探索如何适应UI界面的版式设计方法，对今天的UI设计师来说，这是无法回避的问题和职责，我们必须要去面对并找到解决之道。

参考文献：

[1]刘伟，郝俊勤.信息组织与信息构建[J].情报资料工作，2009（01）.

[2]魏云柯.版式设计法则在UI设计中的体现[J].赤子（上中旬），2016（02）.

[3]徐晓静，陈景景.文字编排在版式设计中的应用分析[J].传播与版权，2016（10）.

[4]郑小利.形式美在版式设计活动中的应用价值分析[J].出版广角，2016（06）.

（作者简介：吴敬忠，男，硕士，西南民族大学艺术学院设计系，讲师，研究方向：视觉传达设计、建筑设计和绘画创作）