APP下载

基于移动端界面的信息图标设计路径研究

2022-12-16谢丽娟

大观 2022年8期
关键词:图标界面符号

◇谢丽娟

随着数字化时代的到来,数字技术助力设计的创新发展,衍生出新的设计形式,既为当下和未来人们的物质和精神生活提供了崭新的审美方式和审美体验,也为社会生活的新需求和新问题提供了新的设计方案。信息已成为人类生活最基本的交换物,手机等移动端电子产品除了在外观上的变化,网络更是赋予其便携的特点,是人们当下普遍采用的信息获取媒介,其颠覆了传统传播媒介的信息传播方式,极大地丰富了参与者的热情和视听体验,使相关设计创作充满了新的可能性和更广阔的创意空间。因此,界面信息图标设计无疑成为新形势下移动端人机良好交互沟通的重要环节。

信息图标是移动端界面的重要组成部分,是传递信息的视觉符号。信息图标设计是视觉符号的构成,可实现信息语义向符号意象的转换。由于界面信息图标设计所具有的用户体验特性及内容创新性,其需要符合当前信息传播的视觉品质标准,这样用户才能充分认知、接受和反馈,实现信息的交流互动。

一、用户体验在移动端界面信息图标设计中的重要性

以网络为特征的数字化,改变了我们的生活方式、工作方式,也改变了设计的思维形式和形态。基于移动端界面的信息图标设计是信息发送者向接收者传递信息,并通过媒介的不断进步,产生信息互动的过程,从而在设计中不断营造良好的用户体验氛围。

用户体验是用户在使用设计对象或服务的过程中,建立起来的主观心理感受,能够使用户进入设计者所营造的情感环境中,其带有一定的不确定性因素。用户在设计体验过程中,受环境和个人因素的影响,可以产生功能性、可用性、愉悦性三个方面的体验维度,其中愉悦性是体验的最高维度。

界面信息图标是传递信息的视觉符号,是与其他界面链接以及让其他界面链接的标志。图标能使受众便于选择信息。其中,“图”包括最基本的符号与底图的形态;“标”,即标示、标准,是特定信息的视觉符号;界面即特定视觉空间,是图标与背景底图构成的视觉形式。

界面信息图标不仅仅存在于某个界面平台,在不同的交互平台都有信息图标的设计。根据平台特性的不同,有移动和非移动端界面平台的区别,移动端界面平台主要指随身电子产品,如手机、平板电脑、笔记本电脑等;非移动端界面平台主要有车载电子设备、空间交互设备、个人电脑平台等。我们需要充分了解平台特性,以便设计出符合用户使用习惯和平台要求的界面信息图标。

随着通信技术以及计算机技术的发展,移动端电子产品已然成为我们日常生活中不可或缺的通信与交流的工具与手段,与其他非移动界面平台相比较,其特点是可以随身携带,在任何环境下都方便人们使用。一般来讲,移动端电子产品体积、显示区域相对较小,便于携带,同时又具有复杂的展示效果。界面信息图标的本质是传达信息的视觉符号,是为了将信息更直观、更准确地传达给受众,而面对内容与形式多样的信息图标,人们会根据不同的需求作出选择,为需要的图标投入更多的注意力。优化移动端界面视觉识别的选择性注意力,需要在图标的设计上准确有效地传递信息。

移动端界面信息图标设计的用户体验不是低维度的信息对称,而是将实用、便利、愉悦、趣味、娱乐等因素综合考虑的创造,目的是达到高维度的精神交流。不同的人有不同的爱好,只有对群体进行情感分析,才能使设计达到对个体主体性的共通情感表达,完成信息图标在造型与界面上的形式表现,达到接受情感信息的共鸣状态。这就需要重视设计的调研、实践、成果和检验环节,进行符合用户心理特征、行为特征、生活环境的信息图标设计,让受众在追求各异的网络时代,享受设计带来的愉悦感体验,使受众达到对信息的认知和理解。因此,移动端界面图标设计,在用户获取信息体验过程中显得尤为重要。移动端操作主要依赖手指,所以交互层次不能设计得太多,交互过程不可太复杂,设计上应该简洁明晰,要考虑选择通用的图形图像、声音、动画等,让用户能更好地体验界面的操控感,以便用户在移动使用过程中更加准确地获取信息。

二、移动端界面信息图标的视觉识别方式

移动端界面信息图标的视觉识别方式,反映了受众对信息图标进行识别时的心理反应,视觉经验的“图形化”、视觉界面的空间力场及视觉符号的独特性都影响着人们对于信息图标的视觉识别方式。

(一)视觉经验的 “图形化”

移动端界面信息图标设计需要我们研究如何更快速、更强烈地触动人们的视觉感知,其设计结果必须依赖于人的视觉经验。就我们的视觉经验而言,相同或相似于自然形态的图像或图形,较易引发人类本能的情感。由点、线、面、色构成的相同或相似于自然事物的图形符号容易被人的视觉感知,它往往成为界面图标设计的主体要素,而图形化的文字也比较符合人的视觉及情感规律。故而,根据视觉经验,将概念信息“图形化”是吸引视觉注意力的一个重要设计规律,由信息的概念意义到符号系统的意象呈现,再到人的知觉和心理接受,需要在信息图标视觉设计过程中,不断使用概念信息词义与实际视觉效果的交互印证,来准确完成视觉形式或符号的表意传达。

(二)视觉界面的空间力场

“视觉中心”是设计的重要规律与技能,中心即传递给读图者的重要信息,是吸引视觉的焦点,为视觉信息指引明确的符号存在性。在任何观看过程中,视觉会自动调控,使我们的视觉焦点停留在相对舒服的位置,当我们的眼睛同时面对各种复杂的视觉信息时,它会选择性地注意自身最感兴趣的信息图标。在我们日常的视觉经验中,各式各样的移动端界面信息图标之所以能被感知,是因为我们的视觉自然而然地确定了“图”与“底”的概念对比关系,在这种关系中,信息交流互动得以实现。

(三)视觉符号的独特性

有规律、有秩序的图形易被我们的视觉接受,易产生视觉美感,但它们往往不耐看、呆板、单调,并且缺乏活力。而恰到好处的中断、转折、交叉、过渡、对比会形成较为集中的视觉兴奋点,会更大限度地吸引人们的视觉注意力。贡布里希认为:“眼睛在快速扫描环境时并不向大脑提供任何信息,只有当他处于相对静止的状态时才能提供信息。”而这种相对静止的状态只有在视觉感知到图形中断、转折时才更容易形成。因此,中断对眼睛是一种磁铁,眼睛在本能寻找中断,而中断也代表设计的独特性。移动端界面信息图标设计之所以需要在规律中含变化、简约中寓丰富、对称中存在不对称、平衡中包含不平衡,其原因即在于此。

三、移动端界面信息图标符号的创意思路

在移动端界面明确表达信息时,通常会借助图标把抽象的概念视觉化。在前期调研后,需要对信息图标进行具体设计。图标最终的呈现效果需要在最开始就进行创意构思。具象型、意象型和抽象型是信息图标符号创意思路的大体方向。

(一)具象型

具象型的表达方式是指信息图标符号的表现方式为较为具体化的视觉形象,表达的是视觉的真实性和典型性,给用户的心理感受是直观的呈现。信息的直接化表述,形象上一般较为复杂,质感上较为丰富。在越来越简洁的移动端界面图标设计中,这种表现方式相对较少,但符合人们视觉心理的具象型图标设计有时会带给受众不一样的感觉。

(二)意象型

意象型在信息图标设计中较为常见,意象型的表现不是完全描摹客观形象,而是运用了变形、夸张、重组的表现手法。这就需要用准确、贴切、通俗、易懂的语言、比喻手法来表现,有些卡通形象的图标,就是意象型的一种表现方法。移动端界面信息图标的意象型表现可以使用户有一定的想象空间,通过变形的手法能更加符合其审美需求。

(三)抽象型

抽象的表现方法是以具体形象为依据,把具体形象提炼到超脱自然之外的几何形或自然形,以简约、规范、严谨、明确、秩序和有共识的形象,引起人们心理上、逻辑上的联想。抽象虽然没有具象表现那么直观,但具有强烈的现代感和形式美,有鲜明的视觉效果。信息图标有单纯以文字为视觉形象来表现的,这也是一种抽象型的表现方式。移动端界面抽象型的信息图标可以给予用户充分的想象空间,简洁的几何形式能简洁、明了、快速传达信息,符合简洁化的界面信息图标设计趋势。

四、基于移动端界面的信息图标设计方法

(一)移动端界面信息图标类型设定

信息图标是具有明确指代含义的图形符号,具有便于记忆和高度浓缩并快捷传达信息的特征。它在移动端界面中可以是功能标识、程序标识、数据标识、命令选择、模式信号、切换开关或者状态指示等。

移动端界面的视觉流程可分为观、看、读三个层次。在这一特定的视觉界面空间中,信息是分级传达的,呈现不同信息含量的视觉符号设计,因此信息图标对应观、看、读的视觉意义,分别以多义、复义、直义的符号设计来分级表现,通常为一、二、三级图标设计。一级信息图标,即多义图标,需包含多种信息概念;二级信息图标,属于复义图标,需要由两个信息概念的视觉意象符号构成,设计以两词中选择关键词为主形式意象,构成“一形两意”的图标创意符号;三级信息图标,属于直义图标,设计以一个信息词对应的视觉意象构成,图标符号要求简约明确,通俗易识别。

(二)移动端界面信息图标符号形态要素

信息图标符号形态要素包括以下四个方面:其一,造型,即形状(曲直性与开闭性形状)、色彩(色相、明度、彩度)、肌理(视觉肌理、触觉肌理);其二,条件,包含数量(大小、粗细、体积)、方位(垂直、水平、倾斜、位置)、动静以及光线;其三,空间限定,即点、线、面、体、实虚;其四,关系,即无形的信息要素,形象的新奇、情感的运动、意义的合成。移动端界面信息图标需要将各形态要素综合考虑,以实现信息语义向符号意象的转换。

(三)移动端界面信息图标的表现方式

1.简捷性

界面设计传达的信息方式应是简化、方便记忆和易操作的,信息图标设计亦是如此。设计移动端界面图标时应坚持以用户体验为中心的设计原则,全面考虑目标用户对图标的认知程度,在界面和用户理解的现实参照之间建立起一种对应关系,以便让显示的信息与用户关注信息的期望相符,使用户在使用时不会因为信息的误读而造成错误操作或判断。

信息图标体现直观、简洁,操作方便快捷,用户接触界面后通过对信息图标的识别可理解相应的功能,进而方便使用本应用系统。图标符号和色彩使信息的含义明确,用户不必再参考其他信息源。在进行图标设计时还需要充分考虑界面布局的合理化,遵循用户从左向右、自上而下的浏览操作习惯,避免用户在使用过程中移动距离过长。设计上要多做“减法”,围绕用户的目的和行为来设计,遵循已经成型的用户习惯,使用户更加易于理解和操作,专注于主要业务操作流程,提高信息图标的易用性及可用性。

2.对比性

移动端界面信息图标是直观的视觉标识,可以对信息进行补充与强调,也可以对信息进行直接表意。每个图标都有一套对应的图像,其根据不同的功能、不同的状态会产生相应的变化。它们各自具有不同的大小、颜色和图像格式,这些格式对应不同的属性。

差异是在刺激物之间的对比中显示出来的,传播内容的安排如果具有强烈的对比和矛盾冲突,就容易引起受众的注意和重视。对比是强调突出信息视觉化表现的方法之一,适宜、良好的对比度会更易于读者辨识和接受。移动端界面信息图标设计运用对比的方法有很多,可以通过形态要素中图标的色彩、图形、质感、空间等达成对比效果。使用对比的关键是突出重点内容,以吸引读者浏览。

3.整体性

整体性是表现移动端界面设计独特风格的有效方式。信息图标的统一风格,不仅能体现品牌或产品自身的特点,塑造产品的整体识别性,增加信息的辨识度,还能加强用户对产品文化以及界面操作的理解。

对于移动端信息图标的整合设计,可以有助于更好地进行界面的视觉管理,有效地整合与归纳信息,避免产生视觉上的混乱感,抓住用户焦点,增强移动端各平台之间信息图标的统一性。界面图标整体风格表现要以用户的信息传达为首要目标,信息图标往往由多个部分组成,一套信息图标应该有相同的设计风格,保持这些图标以及图标中设计元素中色彩、大小比例、材质、风格等方面的一致性,是让产品显得整体和谐的关键所在。

4.规范性

在界面图标前期设计过程中,要针对目标用户规范分析设计角色,获取最终用户和直接用户的需求。要考虑到目标用户不同,所引起的交互重点和信息分级形式也不同,如对于专业用户和对于入门用户的设计重点就不同。界面图标视觉设计中存在多个组成部分(组件、要素),不同组成部分之间的交互设计目标需要一致,无论是图标的造型,还是色彩布局和风格,都需遵循各移动端平台的标准与规范。

五、强调用户体验的界面信息图标质感塑造

移动端界面信息图标的表意可以由质感来体现。具有相同表达意思的图标,其设计风格会有所不同。界面图标的质感是对信息图标设计的锦上添花,质感用得恰当,加得合理,会营造出更好的使用环境,给用户带来良好的体验感。移动端界面设计在不断变化,界面图标的质感选择也在不断更新换代。

(一)扁平化与视觉深度设计

扁平化是指避免所有的装饰,例如阴影、纹理等,强调减弱质感的影响,使界面变得更加简洁。扁平化设计不仅仅是表示视觉元素上的扁平,它也意味着产品结构上的扁平,尽可能让界面操作流程更加便捷。移动端界面图标的扁平化视觉设计可以通过单纯的形象和简洁的色彩来实现。醒目明亮的扁平化配色能够增强信息图标视觉元素的趣味性,其设计重点是在色彩的饱和度、明暗上下功夫,使信息色彩具有醒目感和有序感。

营造视觉深度可丰富界面信息图标设计的视觉效果。扁平化设计虽然有简洁感,但有时会缺乏细腻的情感沟通,而增强视觉深度,可以丰富界面的整体层次,使视觉效果变得更具深度和更加立体,让信息通过丰富的界面图标设计准确地传达出来。图标的视觉深度营造可通过投影、渐变、透明、光炫、3D效果等方式来实现。

(二)拟物化氛围营造

移动端界面图标质感塑造少不了拟物化设计。拟物化主要是利用一些特殊手法达到图标质感在视觉上与真实物体的相似性,例如阴影、玻璃质感、透明感、金属感等效果。拟物化设计需要在不影响整体风格的情况下,对图标的不同属性进行强调,丰富设计细节,使用户在使用时丰富视觉效果与触觉感受,让设计更加富有情感,符合界面空间氛围。

目前移动端界面信息图标设计整体虽然是扁平化趋势,但是在细节上使用拟物化营造,会使得界面整体形象更具特色。

(三)动效化视觉表现

移动端界面图标如果拥有恰到好处甚至令人惊喜的动画效果,可以让屏幕中的虚拟世界变得生动,让操作变得有趣。动态效果可以通过闪烁发光、动画、音效配合等设计方式实现,使设计变得更加丰富,并且让用户在使用时达到信息的良好沟通与交流。

动态效果在不同的移动端界面平台的设计方法及规范略有区别,这需要符合我们平时使用多媒体设备的经验习惯。动态设计要考虑实现成本,在设计中要以功能为主、动画为辅,在实现功能的基础上,再去添加动画,进而完善设计。

六、结语

界面信息图标是用户在使用移动端电子产品时重要的信息获取媒介元素,可以提高人们使用电子产品的效率。用户浏览移动端屏幕中的信息是通过扫视和凝视相结合的方式进行的,从图标中获取的所有信息,都是从信息图标本身以及其他相关知识中推断得到的,这就使得界面信息图标的设计要表意明确。在大多数情况下,手机、平板电脑、笔记本电脑等移动端电子产品,界面信息图标的设计有相似之处。本文对信息图标设计路径进行研究,力求在设计中创造良好的用户体验。移动端平台的不断更新,使设计路径值得进一步讨论和研究。

猜你喜欢

图标界面符号
不同截面类型钢管RPC界面粘结性能对比研究
学符号,比多少
微重力下两相控温型储液器内气液界面仿真分析
国企党委前置研究的“四个界面”
“+”“-”符号的由来
Android手机上那些好看的第三方图标包
图标
中国风图标设计
有意思的厕所图标
草绳和奇怪的符号