基于手机UI设计的视觉表现研究

李超凡（上海大学 上海美术学院，上海 200444）

一、视觉元素在手机端UI设计的目的

随着技术的发展及普及的运用，人们对数字产品的要求逐步提高。功用性已经是对产品的基础要求，人们在使用数字产品时的体验感也逐步提升。这些观念的改变使得设计者开始追求数字产品与艺术的结合。因此UI设计的视觉表现也逐渐被设计者重视。对手机端UI设计进行研究，首先，我们需要了解视觉元素在手机端UI设计的目的。

我将手机端UI设计的目的分为了三大块，分别为人机交互、信息传达以及娱乐审美。

首先，人机间的互动是手机UI设计中最基础的应用，视觉元素的设计自然要以人机互动为基础的考虑方向。人机交互即是指人与手机之间的互动，人的操作、机器的反馈，形成了使用感受。对于日益生活化的手机功能、与我们生活逐渐融合的手机，手机的操作、如何做到使用户快速有效地理解、学习、习惯该用法成了设计要点之一，我们需要通过视觉元素的辅助，引导使用者对想进行的操作快速、准确地做出相应反应。

而对于信息传达方面，由于图形的阅读性、传递性更直观、快速，手机UI设计逐步趋向于图案化、图片化、视频化。而这些逐渐对设计感要求更强的用户观念的变化使得视觉元素在手机端的UI设计中起着越来越重要的作用。而大量的设计观念的涌入与普及于使用者的日常生活，使他们在审美、展示个性、艺术等方面有了更多的追求，这也是现在手机端UI设计的一个必须考虑的方向，视觉元素便是对娱乐审美目的的直接体现。

文本的排布、图形与色彩等视觉元素的运用都会影响到人机之间的互动效率与感受。视觉元素的优秀运用能够提升信息传递的效率，提升UI的艺术水准，而这两点也能够影响用户的使用体验。

二、手机端UI设计的视觉编排

1.信息视觉化

如上文所述，视觉元素在手机端的UI设计中，主要是为了更有效的信息传达、与艺术结合的娱乐审美，以此来提升人机交互的用户体验。因此，信息视觉化是本文的重要讨论对象之一。“信息的视觉化过程是设计师将信息根据文字、图形、图像、表格、动画等形式表达出来的过程。在表达的过程中，设计师需要将元素和特定的信息需求，按照美学原则和人类的视觉阅读特性进行信息组织、信息架构和信息编排。”

手机端界面空间有限，在这么小的界面中如果存在多个视觉元素，用户就需要一个流畅的阅读顺序，而如何引导使用者的浏览路线，使用户有效且享受地浏览信息则需要通过合理的视觉元素的设计去达成。

2.信息的组织与构架

在信息的视觉化过程中，最重要的是信息的逻辑结构，即是指信息之间的层级关系整理。信息的组织构架相当于信息的一种分类展示方式。

多个界面之间最常见的信息构架是以导航构架为基础，将各个信息根据不同类别归类于不同界面的层级结构。在很多APP中都可以见到这种树状结构（中心辐射结构），这是多界面信息处理的基本构架。例如微信的界面构架，就是典型的中心辐射结构。

另一块则是单个界面的信息排布，分为层级结构、矩阵结构、线性结构和自然结构。层级结构的信息存在上下级关系，如同上文的导航构架，是最常用的排列方式。矩阵结构的分布则能使用户根据需求筛选信息。例如许多用来令客户自主筛选信息的情况，如许多用来浏览产品的购物类APP。以图1“饿了么”APP的界面为例，该界面的信息排布既包括了层级结构，也包括了矩阵结构。

其左边的导航栏与右面相应的信息之间的排布属于层级结构，而导航及其对应对象的信息点之间相互的关系则属于矩阵结构。

自然结构是一种不遵循任何固定模式随意排布的信息组织模式，多用于娱乐、游戏、设计类产品，使用户自主探索信息。而线性结构则是来源于线下的媒体，例如书籍、音像产品等。手机端的线性结构的信息分布大多是指简单的由上而下的视觉流，例如一篇文章、大部分的教育类APP也存在着线性结构的信息排布。

3.信息的视觉化编排

除了信息的逻辑结构，它的编排设计对用户的阅读性也起着很重要的作用。视觉编排有着基本的四个原则和一个应用——接近原则、一致原则、对比原则、闭合原则和网格应用。

接近原则即是指视觉元素之间彼此靠得很近，用户则会自动将这块信息归类。所以在一个界面中将同一组别的视觉元素挨近放置会出现分类、分级的效果。

一致原则是指将视觉元素大小保持一致的尺寸可以有效地传递信息，同时也起着直观的信息分类作用。

对比原则是指视觉元素之间要有轻重对比，使用户的视线集中于界面的关键部分，减轻了用户的浏览负担。

闭合原则是利用了人的心理，当人们看到一个未完成的图像时，人们会自主去完成该图像。所以，在许多界面会出现在界面边沿呈现一部分的文字或图像，目的是为了让用户通过操作自主去将信息补充完成，延伸了界面的空间，存放更多的信息。

网格应用是在过多视觉元素集中在一个页面时，设计师们常会使用的信息展示形式，利用栅格线将信息统一有秩序地排布。

以图2的推特界面为例，四组图并列排布即是利用了接近原则、一致原则，会被自动识别为一组。其中用户所发布的内容图片占据画面的最中心，发布者和发布内容为重色且字体做加粗加重处理；而其余次要信息，例如是如何出现在首页的，该消息的热度等都是灰色的且文本字体较小，这是利用了上文所述的对比原则。而每一块发布的内容的相关信息则利用网格应用的处理方式以栅格线分割形成明显的组别，且每一块信息同类信息的处理都运用了一致原则，保持了界面在多视觉元素下的秩序感。

以上均是视觉元素对信息传递的基本处理，即是对信息的整理分类、排布，并使其以简单易懂的方式展示，引导使用者进行有效的信息处理及对事件的应对行为。而视觉元素如何更进一层地在信息视觉化上使用户在使用过程中提升感受则需信息分布组织以外的、与艺术结合的设计，这就需要利用到各种图形、色彩、字体等个性化的视觉元素。下文我们将从文本、色彩、图形的元素来探讨视觉元素与手机端UI设计的构成。

三、手机端UI设计的视觉元素构成

1.文本元素

对手机端的UI设计的视觉要素进行研究，首先要对几大要素进行分类，并对其组合及功用进行分析。我将视觉元素主要分为了三大块，分别为文本元素、色彩元素、图形元素。

文本要素除了文案本身也包括字体、字号等文字本身及排布的设计，这其中包括了信息的传递效率以及视觉上的享受。除了文本提取的信息需要简单准确，文本的排布方式也有一定的规则，通过设计才能使用户对信息的提取变得更为流畅。例如字间距、行间距、段间距、字体大小等都有一定的默认规则。“比如在IOS系统中，常规的字体一般会选择默认为冬青黑体与华文细黑两种字体，而在安卓系统中，则是默认英文化字体和中文思源黑体。”除此之外，字号也有着自己的适用潜规则，“大标题或者是界面中相对较大的字用40px左右，文章正文标题字号用32px，正文用26px，小字部分用20px，当然不同的情况下也会有具体的字号设计。”且字号的使用应当为偶数。而字体在审美方面的要求则对字体的特殊设计有更多的要求，在特殊、有设计感的同时也要保持与风格的一致，要避免样式太多造成的杂乱等。

2.色彩元素

色彩在手机端UI设计中会为产品带来最直观的印象，是视觉元素中举足轻重的一个部分。虽然每个色彩对于用户的个人感受及审美都会产生不同的影响，但其主要的情绪和体验影响还是有着基础原则可循，有着可研究利用的方向。

同产品需要主题色调，单一或复杂都会带来使用感的降低，过于无聊或是嘈杂引起视觉疲惫都是不可取的。而色彩的色相、明度、纯度都会对产品印象、使用体验带来不一样的影响，例如亮色给人以活泼轻松的感觉，而暗色、冷色则使人平静、给人以沉稳的感受等。我们应当利用色彩给不同受众群的不同感受以及操作所应对的不同事件进行色彩的设计，优化视觉带来的体验。

最常见的就是一些APP的夜间模式，通常会将主题色调为暗色，使人在夜间使用时更为舒适、安静，符合夜晚的氛围。

3.图案元素

图案包括了图像与图标，是视觉冲击较大的元素，它能够更直观地传递信息、增大渲染力。图像无需语言也可以被理解，是用户无障碍沟通的桥梁，比起文字，人们会优先注意图案，接受图案的讯息。图像的设计包括了其大小尺寸、位置排布等。中心大尺寸的图像给人以冲击力、小而边沿的图像给人以精致缓和的感受。

而图标除了是视觉要素、产品印象直观感受的承担者之外，也往往需要负责信息的传递，例如一些导航或使用指示等。图标则需被设计得简练、明确、辨识度高。通常图标都伴随着可交互的行为，因此，用户对其操作的前后变化也在设计的范围之内。

结语

视觉的传达在手机端的UI设计里起着信息传导的作用，其目的包括人机交互、信息传达及娱乐审美，视觉的设计能为人们提供更有效的信息交互方式，在与艺术结合的同时也能娱乐使用者，令其享受交互过程。而视觉元素可归纳为三点，包括了文本元素、色彩元素以及图案元素，三者相辅相成，优秀的视觉设计为信息传达带来更加有效、便捷的途径，也提高了人们的用户体验，带来美的感受。