试析UI设计的交互性与界面视觉设计

试析UI设计的交互性与界面视觉设计

郑梦月厦门兴才职业技术学院

摘要：信息时代，UI在人们生活中的作用越发重要，UI的交互性、界面视觉成为了一个新的“课题”，在未来可预见的一段时间内，该“课题”必将贯穿在数字时代发展历程中。本文立足于界面视觉设计视角，结合人体机能、感官、心理等，对UI设计中界面视觉的设计提出了相应的构想，并围绕构尺寸、布局、色彩等方面，对UI交互设计进行了详尽论述，以期为广大从业者提供有价值的参考。

关键词：UI设计；视觉设计；人机交互

重要系统。如今，UI是通过图形元素、UI以其良好的可视性、文本，让人和设备之间实现高效交互的

交互性、便捷性，在软件

开发领域、产品开发领域占据着重要地位。从人体机能来分析，UI人机交互原理，给人提供的信息，以界面视觉设计为导向，主要体现在视觉、触觉、以交互设计为重心，情感等方面。遵循必定能够在保证UI感官良好性的同时，减少用户的认知问题，减轻用户的记忆负担。反观近几年UI设计发展历程，不难发现UI设计的理念在不断发生变化，尤其是2012-2018年间，伴随着我国信息技术、互联网的快速发展，UI设计出现了深刻的变革，交互设计、界面视觉设计已然成为了UI设计中的重点内容。

一、以交互性为基础的UI界面视觉设计

产品，UI所以早期是为了提高产品使用便捷程度而被开发出来的辅助

UI的视觉性在早期并没有得到开发商、设计者、消费者所重视。长久以来，UI设计仅仅注重于高效、实用的人际交互。而后，电子产品市场逐步拓展，在激烈的市场竞争下，UI设计逐步呈现出多元化的发展趋势。索尼、Apple、Microsoft等等公司，先后推出一个个舒适的操作界面，绚丽多彩的屏幕以及应用按钮，给人带来了全新的人际交互体验。

（一）UI设计整体界面视觉

目前，Android、IOS、Windows都有着绚丽的用户界面，家用电气也被赋予了功能更加丰富的交互系统，但是无论是哪一种UI中，，都必须要遵从用户的视觉感官。在可采用视觉平衡的方式，来有效拓展人们对UI整体界面视觉设计“功能”的认知范围[1]。“视觉平衡”设计，最早可溯源至Apple公司根据日本“禅”理念所推出的UI，在Apple早期的一些电子产品上，史蒂夫•乔布斯尤其推崇“平衡、和谐”的设计理念，果不其然，在市场上大获好评，这也开创了“平衡”UI设计的先河，IOS系统上圆角应用图标设计，便是源自于此。“平衡、和谐”的设计，既能够保证设计方案的整体观感，同时也符合人体左右脑的视觉习惯，一方面为

66

个性化的设计奠定了基础，另一方面能够进一步提高UI的可视性[2]。

针对UI的平衡设计，国内外有着诸多研究，其中耶鲁大学的研究最具有针对性。在一项有关人体视觉偏好的研究中显示，平衡的图像架构能够有效扩大界面的可视范围，并且接近90%12px的左脑主导性人群，接受，。所以，早期的为保证界面上的信息能够快速的、在界面感受方面，比右脑主导性人群低ISO系统就对UI界面进行了调整（直观的被人们所可见图1），并且该UI界面的大致设计框架一直沿用至今[3]。并且，根据相关调查研究显示，87%的人，阅读习惯为从左到右，根据该理论，IOS系统多数实用的工具栏，通常都被放在评估靠左的位置。

图1IOS早期UI界面

（二）UI设计中的图形语言

人体对图像信息有着独特的处理机制，第一种是通过外侧枕叶皮层处理，信息通过前额皮质来传递，让复杂的图像信息在大脑中最终构成一个整体；另一种是通过外侧枕叶皮层区域来实现对视觉信息的划分。图形语言的应用贯穿于人类社会发展历程，图腾、密码、壁画等等，都是广义上的图形语言。而在UI设计中，图形语言则用来特指“图标设计语言”，“图标”体现了软件所想表达的信息，同时也反映了人类对事物的普遍性理解[4]。在信息时代，在视觉集中化、泛化的背景下，许多图标语言已经得到了人们的广泛认同，在一定程度上替代了传统语言的表达。所以，在UI设计中，图形语言的应用也有着极其重要的作用，通过应用图形语言的基础框架，用户在阅览、交互的过程中，就能够快速的将这些视觉符号和脑海中的概念联系在一起，进而将复杂的图像处理过程转化为简单的图像划分过程[5]。

二、UI交互设计（一）尺寸

在数字化界面中，目前广泛应用的图标尺寸近乎是固定的，大致为34px*34px、72px*72px、40px*40px、64px*64px等，多数UI的图标都被控制在64px*64px内。笔者在查阅文献中发现，人体

包装世界PackagingWorld

对64px以下的小型图标，视觉感知往往较弱，脑海中信息的触发效果较差，用户在寻找图标时，往往需要花费更多时间，而大型图标比小型图标的触发率往往更大[6]。所以，许多产品的UI界面逐步朝着大尺寸的方向发展，智能手机、电视、家电操作屏幕的尺寸也在随之扩大。如图2所示，大图标往往能够给用户带来更加直观的观感，且明艳的颜色，更能够触发脑海中的信息。

图2UI中大小图标对比示意图

（二）布局

之间的相互配合以及总体布局形态。目前，UI设计并不是一个单一的设计，而是需要考虑到不同元素

UI设计已经从规范化、标准化逐步向多元化、个性化过度，不仅仅开发商会推出各种操作界面，用户也能够根据自身的需求来设置自己喜欢的主体风格，呆板的UI图标形态如今更加丰富。以各大厂商推出的基于Android系统的各种IOS为例，华为、小米、三星等品牌在布局上、图标形态上均有着独特的设计，如Apple公司所设计的功能性图标（可见图3），采用对象语义理论对图标进行“视觉梳理”，并通过定义加工具的方式来刺激大脑中的信息，让用户能够更快的完成交互操作。用户在观察图标的过程中，能够通过工具、图像的结合，更快的完成对信息的读取。

图3苹果IOS界面

和大多数手机厂商所推出的UI界面相同，Apple支持图标的定义，能够根据用户的喜好来随意改变图标的布局，实现图标的分类以及集成。如图3所示，图标可整合在目标文件夹中，用户根据自己的喜好来更改文件夹的命名。诚然，这些设计都是

创意设计

在业界被广泛应用的设计，而广大从业者在设计UI的过程中，就要深度思考用户对图标的理解机理，通过更加便捷的设计方式，来体现出UI的个性化设计方案。如，将UI图标根据功能进行自动化布局，将UI图标的颜色根据功能来进一步细化等等。

（三）色彩

色彩是人们感官中的重要构成元素，是视觉思维应用在交互设计中的重要手段，UI设计从业者可通过合理的设计方案，帮助用户快速组织信息内。用户如何看待色彩？设计者如何使用色彩？交互设计和色彩之间的关系？都是从业者需要深入思考的问题，人类对于色彩的感知来源于先天性的感知能力，我们就要利用这个机理，规避人类视觉中的弱势。如图2所示，黑白色调的图标，其可读性明显弱于彩色图标。

在电子荧幕的干预下，人类对色彩的感知会受到一定的影响，根据相关研究分析结果表明，人类对电子荧幕中绿色、黄色最为敏感。所以，在UI图标设计中，蓝色常常被用作于背景色，黄色常常用作于信息表达，少有图标会采用黄色作为背景色，这样才能够让用户感受到舒适。同时，人类对颜色的辨别和物体大小也有着直接关系，在复杂的颜色背景下，物体越小，人类对于颜色的理解越困难。诚然，用户对于颜色的感知在某种程度上存在一定的差异，任何人的光感细胞也存在一定的差异，上述内容是大部分人对颜色感知的共性理论，在设计UI时不得忽视少部分人对于颜色理解的差异，如色盲、色弱等。简单来说，较小的图标，若是想要提高其信息表达能力，就要采用“浓墨重彩”的设计方法，对于较大的单一性色彩区域，则要应用柔和的色调进行设计，只有在颜色倾向方面，找到合理的权重标准，才能够让UI更加富有交互性。

三、结语

综上所述，UI设计必须要遵从用户的认知机理，遵循人类大脑对于信息的理解规律。虽然UI设计目前在业界内有着初步的理论，但是这些理论仍旧没有构成一个完整的体系，广大从业者在设计工作中需要进一步实践、分析，为UI设计提供长期的理论支持。

参考文献

[J].信息与电脑[1]单晓辉,(理论版冯文博),.2017(3):125-126.UI设计的交互性与界面视觉设计研究2017.

[2]李剑.浅析视觉层次对UI界面设计的应用[J].明日风尚,美术教育研究[3]韩林.浅析手机游戏,2018(16):74-75.UI设计中视觉艺术元素的构成[J].艺,2017(2).[4]胡娅玲.浅析用户交互设计中的视觉性设计[J].大众文2018.

[5]王财富.试论UI设计中的视觉表现[J].美术教育研究,术教育研究[6]魏巍峰,2018(13):89.

.图形与符号在视觉传达设计中的应用探讨[J].美

67