界面设计中基于符号学的设计元素提取方法研究

杨 程 （浙江大学城市学院 310015）

在界面设计的应用领域，网易、腾讯等大型互联网公司多次提出以情绪板设计方法进行设计创意。根据情绪板设计方法，设计实现的过程为根据意向语义寻找参考图像，并从参考图像中提取设计元素进行设计。在实际应用中发现，对于从参考图像进行设计元素提取的过程主要依赖于设计师的经验积累或直觉获取，过程较为抽象，具有不确定性。所以需要为设计者提供从视觉图像中提取设计元素的参考方法。

一、设计元素的符号学解读

从图像中提取设计元素的过程是通过材料刺激来驱动思考的过程，是将抽象的视觉感受转化为具象的设计元素的创意思考过程。符号学是设计过程中重要的方法论，包含了许多思考途径，为设计师提供了重要的参考方式。软件界面设计中包括了小图标的设计、文字排版、页面布局、色彩等设计元素，这些设计元素本身就是一种符号。所以对于界面设计中设计元素的提取，可参考符号学的角度分类。

根据符号学特征，将设计符号分为语意，语境，语用，语构成四个维度：语意在界面设计中表现为通过图标、构图形式等设计所表达出产品所具有的功能性，如页面跳转功能、上下左右滑动功能，以及各个小图标表达出的购物篮、个人中心等具体使用功能；语境研究的是设计中符号的区域性与时代性，是社会化的考虑范畴，由于区域和时代的划分，用户对相同事物的认知会随时空和区域的不同而有所区别；语用研究的是用户的使用经验、习惯等因素对于设计元素使用的影响，符合用户使用习惯的设计能够提升用户对产品的认知度；语构研究的是视觉图像的构成形式，通过对视觉参考图像的提炼概括、变异修饰、分解再构等设计手法，通过对原有的参考图像在表现形态方面的变换，得出适合的设计元素。

二、设计元素提取原则

在进行元素转化时，首先设计师要收集资料，对产品目标和用户需求有深刻的理解，在大脑中形成相应目标体系，包括目标人群喜好、产品风格特征以及产品核心价值观等一系列的约束与期望，这些约束与期望就是产品的符号学语境。然后，设计师应从产品的语用功能和语意出发，结合元素的语构特征，设计出符合需求的作品。最后从符号学语构角度进行设计元素的提取，并将其向图案、色彩、构图等设计要素进行映射。接下来提出具体设计元素提取方法。

（一）图形线条提取

在界面设计中的图形设计元素提取过程中，首先要分析图片素材的特征，根据符号学特性进行映射。根据符号学理论，设计符号学映射分为显性映射和隐性映射。其中，显性映射主要适用于纹理可直接用在界面设计中的图片，通常是作为APP的背景底纹素材；隐性映射为通过常用的设计方法对视觉图案进行再创造，适用于较为复杂的图案，一般参考原型为生活中的实体物品，设计师通过提取轮廓线，对其简化、夸张变形、重复等手段对其再设计，作为界面设计中的图标或装饰元素。如图1所示，为根据实际优惠券的图片进行设计元素提取过程，通过提取实体优惠券具有代表性的锯齿状线框和钉孔凹陷等外形轮廓特征，设计出识别性强的优惠券图标。

图1 优惠券设计

（二）色彩的提取

依据界面设计的风格，选取能够表达相应设计风格的图片。从图像中选取颜色可通过Photoshop软件来完成，使用Photoshop中“存储为Web和设备所用格式”的方法，颜色选择为4种或8种颜色得到色彩方案。如图2所示为选取的代表温馨感的图片，通过上述方法得到该界面设计的主色及辅助色。该组色系由低纯度的棕色系，高明度的淡绿色搭配而成，提取出的色彩也能够给人温馨、舒适的感受。选取不同的参考图像，得出的色彩都不尽相同，比如同是代表现代简约的偏青蓝色调的图片，但在得出颜色的色相、纯度、明度上还是有所不同，同时也形成了具有特色的配色方案，这也正是设计的魅力所在。

图2 图片色彩提取

（三）构图形式的提取

构图形式的产生需要根据图片素材的构图形式来推测相应的排版来完成。具体参考方法为：根据设计的主题风格和功能需求，构建整体范围的外形线为界面边界，将专题内容依据信息层级填充进较大的图形轮廓中。例如图3所示的支付宝的交电费页面中，背景的构图参考了实际生活中电灯泡的排版形式，形成富有趣味性的构图形式。

图3 支付宝交电费页面

三、总结

依据符号学设计理论，总结了设计符号学在界面设计中的分类，并结合各个维度梳理出通过视觉参考图像提取设计元素的具体方法。结合符号学设计方法，从图形提取、色彩提取、构图提取三个方面对设计元素提取方法进行具体说明。希望本文提出的方法，能为实际应用中的用户图形界面设计提供参考。

[1]Endrissat N，Islam G，Noppeney C.Visual organizing：Balancing coordination and creative freedom via mood boards[J].Journal of Business Research，2016（69）2353-2362.

[2]付彧.符号学视阈下的智能手机应用程序图标视觉分析[J].包装工程，2016（12）：57-60.

[3]朱上上，罗仕鉴.产品设计中基于设计符号学的文物元素再造[J].浙江大学学报（工学版），2013（11）：2065-2072.