移动界面图标的符号化设计案例研究

2018-02-21成藻

大观 2018年1期

关键词：界面设计指代图标

成藻

摘要：界面设计是人机交互研究的重要方向，移动应用的界面是界面设计的特殊形式。由于移动设备的便携性、不固定性以及无线网络的低带宽、高延迟等诸多限制，移动界面设计又具有自己的特点。

关键词：界面；符号化设计

[本文系2016江苏省高校哲学社会科学研究基金指导项目“符号学背景下的数字界面设计教学研究”成果，项目编号为2016SJD760023]

应用界面到底是什么，它到底有什么用途这是UI设计师在工作前首先需要认识的。界面属于产品的视觉锚点。可以算品牌的一部分——不仅在视觉上需要有吸引力、与众不同，理想状况下甚至要能诠释应用的核心本质。

“LOGO”这个词在当今频频被提及，应用界面中的图标却与其不完全等同。两者均与品牌相关联，都受到很多限制。一个重要区别是：LOGO是代表品牌的一个可缩放矢量图块；而图标则放置在屏幕内，根据栅格系统进行个性化定制并输出，还需要使用特定的尺寸与背景。两者的实现方式与功能，以及优劣评判标准都不尽相同。

作为符号化案例的图标及界面设计有必要从符号学原理对其进行溯源，符号分为：图像型符号、指示性符号、象征性符号。

“食茶”作为一个以传统文化定位，以传播茶文化为主要功能的APP，选用了扭曲的茶叶拼接成“器、茶、泡、品、史”五个模块的界面形象。在这个案例中，文字的质地是茶，内容是反映茶文化内涵的汉字“器、茶、泡、品、史”，用实物象征茶文化的文字，属于象征性符号。（图1）

这组案例要分为两个部分来看，第一：用矢量图标绘制的地铁、停车场、红绿灯、加油站、建筑物等形象来指代实际生活中的地铁、停车场、红绿灯、加油站、建筑物等目标物，属于图像性符号；第二：用绘制出的图标来指导人们的出行行为，又属于指示性符号。（图2）

这一组天气应用的图标设计也需要分为两个部分：第一，点线面以及红、蓝、黑、白色构成了晴、云、雨、雾等天气现象，这种表现方式符合长久以来大众媒体对于天气的表现，人们也已经认可这类对天气的表现方式，属于象征性符号；第二，用绘制出来的天气图标来预报之后的天气，并指导人们的生活出行，又属于指示性符号。（图3）

手机APP Music Caffee的界面设计是用俯视角度拍摄的咖啡杯，以及构成音符形状的咖啡泡沫图像作为应用的主界面。这个表现方式属于图像性符号：咖啡沫→饮咖啡→休闲放松的行为；音符→听音乐→休闲放松的行为。用喝咖啡搭配听音乐，二者属于邻近行为，又属于修辞上的移位。（图4）

“I LOVE NY”和杭州城市图标这两个案例已经不单纯属于界面图标了，但因为他们的符号化设计非常经典，我们仍有必要将其拿出来分析和学习。

“I NY”这个标识要分三层意义来解读：① 是英文单词LOVE（爱）的象征图形；②NY是英文单词NEW YORK（纽约）的缩写和象征符号；③“INY”这组文字搭配图形的标识现在成为纽约市城标。（图5）

需要了解的背景是该标志于1977年由梅顿·戈拉瑟创作，用作美国纽约州的旅游广告词和标志，后又被应用为纽约市的城标，除了红色的心形图案外，所有文字采用黑色圆形的Slab serif字体。至今这一标志已被印在全世界各地的各种产品上，已经超越了广告范畴，成为一种流行图案并取得了巨大的商业价值。这个标志也形成了它特有的与人文、社会习俗相关的认知，因此属于象征性符号范畴。

杭州城市图标也需要分三个层次来解读：1.马头墙建筑符号象征杭州的地方文化，作为浙江省首府，杭州地处江浙皖三省交界，历史上的杭州就有徽派建筑为它的主要建筑代表，用徽派建筑特有的马头墙形象来替换文字笔画属于替换性修辞；2.杭州的“杭”字为文字的图形化处理，属于文字象征符号；3.古典园林形象作为图像性符号来指代杭州的城市定位为古典文化浓郁的园林型城市。

手机端的输入法表情包用夸张变形的人类面孔来指代不同的表情和情绪，1.用表情包象征面部表情和情绪；2.用表情包来指示人的情绪并替代文字。其中固定表情包的正圆形、带凹凸感的黄色脸上的眼睛、嘴巴、眼泪、嘴唇等表现方式已经成为互联网媒介上一种通用的图像语言，形成了社会共识，被大众认可。（图6）

“talk more”图标用蓝色的‘（上下引号）替换了文字talk more中的字母a和e，‘（上下引号）对聊天、对话行为的象征意义使得这个设计看起来意味深长。（图7）

这组手机桌面图标系统包含30个图标，全部用水墨晕染方式表现一些常用工具，其中：天气用水墨方式表现大众认可的天气图标——云朵，来指代天气预报的功能；用黑体字及圆幼字体“星期四”和“23”来指代日历的功能；正三角形状指代视屏播放功能；游戏手柄指代游戏的功能；音符指代音乐播放功能；“淘”指代手机淘宝；大众点评的跨腿的小人形象来指代大众点评网；两个有眼睛的對话气泡指代的微信；小企鹅指代QQ……种种经典软件的经典形象，早已成为网民共同认知的典型形象，符合大众认可，形成约定俗成的社会共识，属于典型的象征符号语言。（图8）

Clubbing and nightlife的引导页设计以城市为主题，第一幅用月光下的伦敦桥图像指代伦敦的城市主题；第二幅用月光下的巴黎铁塔象征巴黎的城市主题，都属于用部分指代整体的修辞手法，也属于象征性符号的使用。（图9）

通过以上九组案例的解读，我们可以总结出设计师在设计过程中主要注意的五个方面：

1.可扩展性

由于在整个平台的多个地方都有展现，且尺寸不同，因此保持其清晰度与独特性非常重要。图标需要保持美观。将小小的屏幕塞满的过于复杂的图标会面临可扩展性不佳的情况。

在应用图标的构思设计阶段，设计师应将很大一部分精力放在这里，思考设计能否进行良好的扩展。

2.可辨识度

确保图标准确呈现应用的功能。应用图标的设计需要精巧地编织记忆与关联，让功能与情感相通。尝试删掉所有细节，只保留原本的概念。

3.一致性

在加强视觉表现力上，让图标与界面保持一致非常重要。需要考虑到与应用图标的交互，以及与该应用进行交互，两者的体验需要保持一致。让用户对应用留下统一的形象，将会提升产品的可用性和满意度。简单来说，确保应用图标与实质、功能和设计一致将会带来巨大的成功。

保持界面与图标色彩协调，并使用相似与一致的符号语言。通过图标的象征意义与应用功能直接关联能强化应用与图标之间的联系。

4.唯一性

由于常要与其他图标竞争用户的注意力，使用独特的设计会很有效。设计师可以尝试完全不同的方向。可以尝试不同的色彩方案，找出新的象征色系。