图形用户界面中的版式设计

2015-03-28孙湛

合肥师范学院学报 2015年4期

孙湛

（安徽商贸职业技术学院艺术设计系，安徽芜湖241000）

在个人电脑、互联网和智能手机、平板电脑广泛运用的当今社会，用户界面设计越来越受到重视，并获得了高速发展。用户界面，简称UI（User Interface），或称使用者界面，是介于用户与硬件之间，为彼此之间交互沟通而设计的相关软件，它能将信息的内部语言与指令转换为使用者可以简单接受和使用的形式，并达成双向交流。早期的用户界面称为命令行界面（简称：CLI），依靠键盘输入的指令作为使用者与计算机沟通的工具，不支持鼠标操作，因其使用不便，随着科技的发展已在一般个人用户层面逐渐被对用户来说更为简便易用的图形用户界面（简称：GUI）所取代。

图形用户界面通过各种图形来实现用户与计算机系统之间的互动，以经过设计美化的视窗、菜单、标签、图标、按钮等界面元素，为用户提供了界面友好的操作环境，著名的如微软公司的 WORDOWS系列、苹果公司的MACOS和IOS系列、谷歌的安卓系统系列。用户可使用鼠标、键盘乃至直接触屏操作的方式操作图形用户界面软件，软件系统对用户操作的反馈同样以图形方式显示。因为视觉效果生动、操作直接便捷，且用户使用门槛低，图形用户界面已被广泛认可和使用，随着个人数字终端的普及成为人们日常生活中的重要元素，也成为视觉传达设计中日渐重要的组成部分。版式设计作为视觉传达的重要手段，在图形用户界面设计中也同样起到至关重要的作用。

一、图形用户界面中版式设计的特点

所谓版式设计，就是对版面上所有信息编排的形式进行设计，是将图形、文字、色彩等视觉要素在限定的版面内按照一定的审美规律进行排列组合。与传统印刷品的版式设计相比，图形用户界面设计中版式设计除具有审美规律等共性外，还具有自身的独特之处。

（一）版面尺寸具有不固定性

图形用户界面的版面是一种动态的版面，并且受到硬件平台的屏幕尺寸和分辨率的影响。印刷品都有固定的版面尺寸，例如，一本开本为大16开的杂志，版面尺寸210mm×285mm，那么每个页面都是相同的尺寸，设计者在这样固定的版面里进行设计要素的编排，作品最终印刷出来后的视觉效果也都是固定不变的。与印刷品不同，对很多图形用户界面软件来说，因为需运行的硬件不是唯一的，相应带来的结果是其显示尺寸和分辨率具有不固定性。例如使用安卓操作系统的移动数字终端，包括智能手机、平板电脑、智能电视等多种，其屏幕尺寸从数寸至数十寸不等，分辨率大小也千差万别，运行于安卓平台的各类App，就必须考虑到同时对种类繁多的手机、平板电脑屏幕尺寸和分辨率的支持，有的甚至还需要考虑横屏、竖屏使用的不同版面编排和视觉效果，因此其版式设计也就必须兼顾到App在多种终端上的显示效果以及用户的不同视觉习惯。例如在界面中将大量文字进行纵向多栏排版，在较大尺寸屏幕和高分辨率的支持下或许效果尚可，但在小屏幕、低分辨率情况下就会难以阅读，过多的翻页操作也会让用户厌烦。有不少第三方的app，因其设计开发企业和人员素质良莠不齐，大多注重应用的功能性，却忽视了程序界面的编排，这就影响了软件的推广［1］。

（二）版式元素具有互动性

在印刷品的版式中，所编排的视觉元素包括文字、图形、摄影图片、色彩等，都属于静态元素。而在图形用户界面中，视觉元素除了传统的静态元素外，还包括动态图片（如GIF格式图片等）、动画、视频等动态视觉元素，而且这些视觉元素无论静态还是动态，都可以被设计为可对用户的操作（如点击、滑动、按键输入等）进行互动反馈，以及按某种规律或触发条件产生放大、缩小、位置变化、变形、弹出菜单或窗口等能够影响界面版式构图的变化。这些图形和版式的变化，反过来又会对用户的体验和下一步操作带来直接或间接影响，具有互动性特点。如果说对印刷版面的设计只要考虑平面空间因素，那么对图形用户界面的版面设计还要加上对时间因素的考虑。这种动态的、包含时间因素的互动效果，正是图形用户界面与印刷版面的最大不同点，也是其魅力所在。

（三）版式设计结构具有非线性

传统的平面印刷品，无论是书籍、刊物、报纸还是DM，其读者阅读的方式一般都是单线性的，也就是从前向后阅读。这种阅读方式也就决定了平面印刷品的编辑和版式设计方式是单线性的结构，设计者在版式设计过程中要考虑到前后页面、左右页面视觉与内容的连贯性与均衡性，让读者能清晰而流畅地阅读信息。图形用户界面因为其架构层级呈现树形、网状、发散状乃至更复杂的结构，不同页面之间存在时间与空间的多重联系，因此其编辑与版式设计是非线性的，结构形式蕴含极其丰富的变化，为设计者提供了更大的设计发挥空间。

二、在图形用户界面中进行版式设计实践应遵循的几个原则

因为图形用户界面设计中版式设计相对于传统的印刷排版具有自身的独特之处，设计时完全生搬硬套或完全摒弃传统的印刷排版方式都是片面的，应在秉承形式美法则等美学规律和逻辑规律的基础上，灵活运用版式设计方法和技巧，根据图形用户界面的自身特点和用户习惯进行考虑与设计。

（一）图形用户界面的版式设计要注意风格整体一致性

版式设计可表现出独特的风格，如简约主义、解构主义等。除特殊情况外，图形用户界面的版式设计风格应该与软件创意主题、界面视觉元素的视觉风格、界面色彩的搭配使用风格保持一致，这种一致性甚至是衡量界面设计是否成功的重要因素之一［2］。例如，现代简约风格的界面视觉元素和配色，就应该搭配相应简洁明快的版式设计风格。视觉风格高度一致、主体性明确的用户界面，更容易让界面各个部分的信息安排显得井井有条，甚至可以体现特定的文化气质，给人以视觉上的冲击，从而给用户留下深刻而鲜明的印象。

（二）图形用户界面的版式设计要具有易控性

在很多印刷品中，或为表现某种设计风格，或为尽可能多地传达复杂视觉信息，或因其他某种原因，版式可以设计得相当复杂，特别是在杂志、报纸、DM等大信息量媒介中，这一情况相当常见。但是在图形用户界面设计中，过于复杂的界面版式，会使用户接受信息和进行操作的过程失于通畅，影响用户视觉和操作体验。特别是在对于智能手机等小尺寸屏幕的移动终端或对操作性和互动性要求较高的游戏类App上，过于复杂的界面版式，会让用户无从下手，进而失去使用的兴趣。图形用户界面的版式设计要在考虑目标用户群年龄层次特点和阅读、操控习惯的前提下，以方便用户阅读和操控为宗旨，有条理地规划界面元素的图形设计和编排。

（三）图形用户界面的版式设计要遵循用户的使用习惯

图形用户界面设计的直接目的是方便用户使用软硬件系统，因此在其界面版式编排方面，必须考虑到大多数目标用户的使用特点和一般习惯。

用户的使用习惯有的是因用户年龄层次等自然生理因素产生，例如，学龄前儿童对鲜艳的颜色认知更加敏感。虽然他们的颜色视觉已经能够区分近似的混合色，如黄色和棕色，但还大多不能正确地把颜色和颜色的名称联系起来。所以图形界面的主色调尽量选用鲜艳而明确的基本颜色，比如纯度较高的红、绿、黄、蓝［3］，避免使用颜色倾向模糊的混合色调。儿童操作软件时，无论使用鼠标还是用手直接触控屏幕，一般很难进行相对精确的点击操作；因智力发育等原因，通常无法驾驭较为复杂的软件功能设计。因此，针对低龄儿童用户的图形用户界面在版式设计时，色彩搭配要醒目鲜明，强化视觉刺激；图形和按键要比较大，且保持较大间隔，防止儿童发生误操作；界面的功能分区不宜过多，要能够一目了然，简单摸索就能很快上手操作。

还有些使用习惯是长期以来约定俗成的选择导致的。人们在日常生活中会逐渐积累对于各种事物的认知，从而形成自己的习惯和经验，如果接触的某个事物与头脑中的经验或习惯相关，人们就会本能地借助经验和习惯帮助自己完成对事物的接触［4］。例如，软件在进行一些重要操作时，界面上往往会弹出各种形式的确认对话框，上面一般都会有两个大概意思为“确认”和“放弃”的按钮，在大多数软件中，“确认”按钮放在左侧，“放弃”按钮放在右侧，这就让大多数用户产生了思维惯性，“确认”操作习惯于点击左侧按键。如果某软件将这一按键排列顺序反过来，那么大多数使用者就会感到不适应，在不经意间很容易产生误操作，从而影响使用体验。

（四）图形用户界面的版式设计要保证合理的逻辑性

所谓逻辑，就是指人的正常思维规律。图形用户界面在版式设计上必须保证具备清晰合理的逻辑性，才能让用户获得流畅舒适的使用体验。

人的视觉不可能同时关注屏幕上的每个部分，必然有一个阅读顺序。当今大众的主流阅读顺序习惯受西方文化影响，是从左向右、从上向下的。受这一阅读习惯影响，对界面的版式来说，视觉元素放在左侧比在右侧更醒目，放在上半部分比在下半部分更醒目。那么，哪些视觉元素放在醒目位置更具有逻辑性呢？一个图形用户界面上包含的图形、按键、菜单、视频等诸多界面元素，因功能设计、视觉效果、用户习惯等因素，用户使用时总是会自然地出现常用和不常用的区别，因此在界面版式设计时，也就必须明确这些界面元素的用户重视程度，在界面排版上“区别对待”。具体来说，事先要明确哪些界面元素会经常被用户使用和重视，这些界面元素就应放在版面上较为醒目的位置上。相反，一些不常用、常被忽视的界面元素就可以放在视觉上不突出的版面位置，很多情况下甚至可以把它们设置为默认隐藏状态，防止其在视觉上分散用户的注意力，另一方面也可以节约屏幕的可用版面面积。

有些界面元素被设计为只在某些情况下可以被用户操作，它们在版式设计上应当通过色彩变化、附加特殊标志、添加动画特效等方式进行“可用”与“不可用”状态的区分。例如某按键在不可用状态时显示为黑白状态或叠加一个禁止符号，当转换为可使用状态时，按键显示为彩色，禁止符号消失，为提醒用户注意，还可添加闪动、缩放等动画效果。

界面元素之间有紧密联系的应有计划地放置在同一个视觉区域内，防止因视觉位置差异过大导致逻辑混乱。有些特定的界面元素之间存在一种对应或从属关系，例如某个图形对应某段文字数据，在版式设计时就应将该图形放置在它所对应数据的附近，以方便用户明确该图形元素和数据之间的逻辑对应关系。

（五）图形用户界面的版式设计要考虑到软件的运行要求

在印刷品的设计中，为了版式设计的美观，设计者经常会运用一些装饰图案、辅助图形、艺术字体及特殊文字编排（如出血等）来增加页面的层次感和视觉效果［5］。但是，图形用户界面的运行是以硬件计算能力和网络传输能力为基础的，如果大量使用图形图像或其他多媒体元素，或使用过多的版式变化特效，会增加软件占用的系统资源，对运行平台和网络环境提出更高的硬件要求，削弱软件的实用性和通用性。

三、图形用户界面的版式设计典型案例分析

优秀的界面编排，不但可以突出软件自身的个性，体现自身审美价值，其操作也会更加简便、舒适［6］，经典而时尚的IOS系统就拥有这样的图形用户界面。苹果公司推行的这一移动操作系统，目前已推出到了IOS8版本，其简洁时尚的扁平化图形用户界面设计受到市场的高度认同。IOS系统最大的应用平台就是人们熟悉的苹果手机（iPhone）和平板电脑iPad。

移动设备区别于普通电脑有一个巨大的特点，就是设备需进行手持操作，其操作界面的版式布局必须考虑到屏幕的横竖方向，由于消费者个人习惯不同，强制限定单方向的操作模式缺乏适应性。IOS系统就针对横竖两个方向进行了针对性的版式编排设计，方便用户使用同时保持其界面风格一致性，这图标位置设计，考虑到了使用者习惯和逻辑关系，不会出现界面改变方向后一时找不到图标的情况。

虽然iPhone和iPad的屏幕分辨率、尺寸乃至长宽比都有极大差异，充分体现了图形界面版式的不固定性，但是IOS系统的界面仍然能够很好地通用于iPhone和iPad，在适应屏幕特点、保证使用体验的同时又让人充分感觉到“这是同一个操作系统”（这一点非常有利于培养客户的忠实度），其对图形界面版式的精妙控制不得不让人佩服。

化繁为简，让版面更加易控，IOS系统的界面版面设计同样符合这一原则。无论是IOS6以前的拟物化设计还是IOS7以后的扁平化设计，视觉效果虽改变巨大，其界面版式设计简洁明快的根本原则却始终没有改变。IOS系统的流行，除了其功能强大外，其极易上手的操作流程和时尚、简洁的界面风格带来的友好交互体验也是主要原因。为迎合消费者需求，IOS系统在很多人机交互的细节上进行了提高操作体验的设计，包括提高流畅度和添加有趣的操作反馈，增加版面元素的互动性，多点触控和手势功能更是将复杂而强大的功能实现于简单的操作中。这一切精心设计最终都统一于简洁、易控、符合使用者操作习惯的界面中，力求给用户带来优秀的图形界面操作体验。