基于Processing的微信状态图生成程序的设计与实现

王辽森，蒋克岩

（天津师范大学，天津 300387）

0 引 言

随着智能互联理念的提出、科技的发展和社交媒体的迭代，人类活动的社交性也在不断进化，微信作为重要的即时通信类社交软件，承载着现代人的社交生活。最近上线的微信8.0.0 版本，新增了每日状态设置的功能，用户可以随心选择自己的心情状态，设置专属的微信状态图片或视频，持续24 小时后自动结束。微信状态的设置，以一种全新的方式来展现用户的心情或感受，类似于早期就有的QQ 签名，但微信状态设置具有更强的时效性、更丰富的内容表达性和更高的自由度。因此，笔者认为，基于微信状态设置持续24 小时的周期性，通过设计和编程将用户当天的状态信息及其他相关数据进行可视化呈现，即时输出可供用户设置为微信状态的图片，具有一定的现实意义和实用价值。

1 “微信状态”的程序总体设计

本程序的总体设计主要分为图像资源设计与交互程序设计两个板块，其中，图像资源的整体版式设计灵感来自邮票，采用方块分割的布局，通过扁平化的设计语言，分区域地将数据予以可视化的呈现。交互程序一方面负责处理用户输入的信息及其在网络中抓取到的用户所在地的天气、温度等信息，将处理后的数据与对应的图像资源进行匹配，而后生成图片并输出提示语；另一方面还需要兼顾数据的异常处理，确保即便是用户不按照规范输入数据或者是出现数据冲突的时候，依然能准确无误地生成一张图片。

2 “微信状态图生成程序”的开发环境与技术

从开发环境和编程技术的角度来说，许多桌面GUI 程序都是采用Java 语言开发的，通过其内置模块丰富的API，开发出复杂炫酷的图形界面。此外，类似的程序还可以通过基于Java 的Web 组件布局在网页中，其中包括Java 官方提供的Servlet 和JSP，以及常用的MyBatis、Spring MVC、Spring Boot 等第三方组件。“微信状态图”生成程序从本质上说是静态图像生成程序，涉及数据与图像资源的匹配。目前市面上虽然没有相同定位的产品，但从当前主流的编程技术来看，选择诸如Java、Python 之类面向对象的编程语言显然是较为明智的。考虑到多媒体艺术设计的“感官属性”，直观的可视化编程语言可以大幅缩减艺术与技术之间的距离，因此最终选用由Java 拓展而来的Processing 语言实现本程序的开发。作为一门新兴的编程语言，Processing 将计算机屏幕上的像素视为变量值的可视化表现，其开发平台免费且开源，是目前市场上提供开源设计应用中为数不多的可视化编程语言。此外，Processing 是由Java 语言拓展而来的，继承了Java 面向对象的特性，是Java 语言的延伸，支持许多现有的Java 语言架构，具有丰富的可拓展性，并且还在Java 应用范围的基础上增加了图形化应用的功能，将Java的语法予以简化并将其运算结果“感官化”，提高了编程语言的交互性，能够有力促进数字媒体艺术的发展，同时可视化模型为各个行业的应用者提供了极大的便利，为他们提供强大的技术支持。

3 状态与视觉设计

从数据可视化的角度出发，通过合理的布局与适当的配色使不同类型的数据协调有序地呈现在画面中，整体设计灵感来源于邮票和拼图，采用方块分格拼接的方式，选择扁平化的设计语言以便于更好地凸显信息。扁平风格作为现代插画的新兴潮流之一，起源于“瑞士风格”的装饰设计，有着造型简练概括又不乏生动的优点，相较于其他风格的插画，扁平风格的插画更能直接明了地传达主题，艺术表现力更强。扁平风格图形摒弃了无谓的装饰、阴影，虽然信息传达更加清晰，但难免会给观者带来枯燥单一的感受，因而笔者在创意点、造型、比例、色彩、神态等方面进行了夸张设计，强化了目标元素的特征，丰富了扁平化图形的视觉效果。

从整体上来说，笔者首先进行了分格设计和色彩选择，如图1所示，分格过后，就可以对用户设置微信状态图的大体效果有所把握，从而方便后续图像资源的设计，如图2所示。

图1 色彩分格

图2 大致效果

在扁平化图标的设计中，色彩的选择和使用直接影响着图标的统一性和对比度，决定了整个作品的基调和风格。以该作品为例，整体选择了较高饱和度的色彩，轻松明快，较适宜在LCD 与OLED 屏幕上显示。通过色彩的对比，可体现出元素的结构转折与块面关系，在增强视觉冲击力的同时，也将不同区块的基本特征交代清楚。

在将数据呈现区域分为六个区域后，笔者针对这六个区域分别设计了五组元素实现分区域的数据可视化：

（1）黄色块1 即彩蛋格。每逢节假日或用户生日时，会在该区域触发彩蛋，显示节日（生日）图标，反之则显示彩蛋图标，确保画面的完整性，部分彩蛋格图标如图3所示。

图3 部分彩蛋格图标

（2）绿色块2 即实时显示日历。展示日期数据是为了凸显微信状态的时效性，另一方面也便于用户后期回看索引自己的每日动态图。

（3）蓝色块3。实时显示用户所在地的天气信息，笔者针对扁平化的整体风格设计了一套由白色粗线条构成的天气状态图标，与蓝色的背景形成鲜明对比，识别度高且符合整体风格。

（4）白色块4。无内容，此区域在设置为状态图后会显示用户的微信头像和昵称，为此选择白色且不做任何图像资源显示。

（5）橙色块5。显示瑞兽，瑞兽的形象来源于中国传统的十二生肖，如图4所示，整体上采用扁平化的设计语言进行设计，旨在让用户在使用程序时可以轻松愉悦地选择一只瑞兽来守护自己一天，增加程序的互动性和趣味性。值得一提的是，扁平风格图形不仅仅是三角形、圆形、长方形等图形元素的简单拼凑，在创作时，图形之间的统一性、大小比例关系的把握，图形轮廓曲线与直线之间的变化都在很大程度上影响着整个图形的韵律、张力和规整度。以十二生肖中的“鸡”为例，对鸡尾巴和鸡冠的典型特征进行了夸张处理，使图标的识别性更强。半圆及圆弧轮廓的使用与鸡的头部、腿部的直线形成对比，在增加图标呼吸感的同时提升了图标的质感。

图4 瑞兽模块设计

（6）粉色块6。灵感来自中国传统的“扫晴娘”。“扫晴娘”是中国民间祈祷雨止天晴时挂在屋檐下的剪纸妇人像，寓意就是扫去阴霾，迎来晴天，以利晒粮、出行。因此，该格子里展示的娃娃形象会根据用户所在地的气温变化更换不同厚薄的衣服，而娃娃的表情则是由用户选择的心情状态决定，如图5所示。通过拟人化和夸张化的表现手法，为娃娃赋予喜、怒、哀、乐情绪变化以及其他各种人类面部表情特征，使娃娃更加立体形象、活泼可爱。而娃娃的服装设计为随气温的变化而搭配，增加了画面的亲切感，更容易拉近与观者之间的距离，在符合大众审美需求的同时又增添了趣味性。

图5 娃娃模块设计

4 基于Processing 的交互设计

首先，需要对程序的预期运作流程进行设计，用户根据实际情况与自身需求输入自己的心情状态，选择守护瑞兽，输入生日信息，如图6所示。而天气、气温和日期则是由程序在网络上自动抓取，确保数据的实时性、准确性，从而实现信息更新的动态交互。在获取到上述数据之后，程序进行数据转化与分析，与图像资源进行一一匹配。如果用户未按规定输入数据，或者程序从网络上获取的信息异常，则由程序进行异常处理，最终确保用户在网络畅通的环境下使用程序，这样每次都能成功获取生成图片与程序回执。

图6 程序运行流程图

5 数据的采集与配置

程序有两个获取信息的方法，分别获取用户输入信息（包括昵称、心情状态、瑞兽、出生年月日）和网络信息（天气、气温、当日日期）。用户信息以csv 表格文件的形式进行存储，用户在使用程序时只需将自己的信息像涂答题卡一样输入表格文件，程序运行时会采用loadTable 方法加载表格文件中的数据。使用“TableRow row =table.getRow(0);”代码提取第一行（也就是用户填写行）的数据，随后在程序中对应数据逐一建立变量存储数据值，至此完成从用户到程序的数据输入。

此外，获取网络数据的方式是使用“loadStrings()”函数抓取URL，并将抓取到的html 源文件存储在一个字符串数组中，而后使用join()函数将数组转化为一个长字符串。基于html 编码语言的特性，我们只需找到固定的起止html标签，就可以在标签中间获取到目标字段，为此，笔者使用自定义函数方法“giveMeTextBetween()”来获取指定字段的中间字符串，如果无法找到开始或结束的“html 标签”，则返回一个空字符串，核心代码为：

程序获取到所需的数据之后，便开始进行数据匹配，笔者使用Processing中的条件判断语句来对数据进行匹配，匹配方法被逐个封装为函数模块，从而确保程序的易维护性。值得一提的是，网上抓取到的日期数据是String 格式，在进行计算的时候需要提前进行数据类型转换，如果匹配数据正常，则按匹配结果注意输出，反之进行数据的异常处理。

6 程序数据的异常处理

该程序的异常处理主要是针对数据错误和数据冲突两个方面。所谓的数据错误，以瑞兽格子为例，如果用户输入的瑞兽值（zodiac）不在指定范围（1～12）内，对调用程序抓取到的年份进行数据类型转换之后，用当前年份减去2019 除以12 求余数，这样会重新得到一个1～12 的整数范围，用来对应匹配12 瑞兽。如果用户的瑞兽数据输入错误，系统会在瑞兽格中自动显示当年的本命生肖，确保程序正常运行，部分核心代码为：

所谓的数据冲突，以彩蛋格子为例，如果用户的生日和节日重合，便会同时匹配到两张图像资源。为了防止数据冲突导致显示图像重合，笔者首先自定义了“shengri()”函数，用来判断当日是否为用户生日，反馈1 和0，将结果存储在全局变量中，在彩蛋格的匹配函数“caidan()”中，先调用“shengri()”函数执行生日判断，后续匹配全部以=0（即当天非用户生日）为前提，从而防止数据冲突。核心代码为：

7 模块化的设计与实现

总的来说，不同模块的总体功能都是将所获取的数据与图像资源进行匹配，其间涉及异常数据的处理。

彩蛋模块的数据来源为程序在网络上抓取的日期和用户输入的生日。首先进行用户生日判断，如果当日是用户的生日，则在彩蛋格子中显示生日蛋糕图标，同时在程序输出回执中呈现祝用户生日快乐的字样；如果当日不是用户的生日，则进行后续节日匹配。每逢节日，该区域会显示节日图标，反之则显示彩蛋图标，确保画面的完整性。此外，程序的背景音乐同样由该模块的代码段来判定，当用户过生日时，程序自动播放生日歌背景音乐，反之播放日常背景音乐。

日历模块用来展示当天的日历信息，包含月份和日期，考虑到用户的本地时间可能与实际存有误差，因此没有采用Processing 内置的方法直接调用系统时间。日历数据来源为程序在网络上抓取的字符串，在导入字体后，采用text 方法输出。值得一提的是，程序会先对抓取到的字符串长度进行判断，当字符串长度小于2（即日期为1～9日的个位数）时，系统会自动在前位补0，确保显示画面的美观度和完整性。

天气模块用程序在网络上抓取到的天气信息进行字符串匹配，对应输出预设的天气图像资源。娃娃模块的数据来源为用户输入的心情状态和程序在网络上抓取的气温。前者对应匹配娃娃的表情，后者根据温度范围对应匹配娃娃的衣着。当数据有误时，输出预设图像资源，确保程序可以正常输出完整图像。

瑞兽模块的数据来源为用户输入（1～12），对应匹配预设的瑞兽图像资源（鼠——猪），当数据有误时，执行自定义函数jinnian()，输出当年对应的本命生肖，确保程序可以正常输出完整图像。

用户在输入数据运行程序后，程序生成图片并输出回执。用户可以根据程序提示，按任意键保存图像并设置成自己的当日微信状态，方便快捷。

8 结 论

Processing为用户提供一个强大的数据可视化服务平台，可以对多种不同的数据进行分析运算，并且在代码严密逻辑性的加持下，可以为传统的平面艺术衍生出更多的表达方式。以该微信状态图生成小程序为例，如果没有编程的介入，再好的构想和设计也只能是一张一张的拼接，一张一张的制作，而编程的介入则赋予传统平面设计以全新的活力，各种图像元素可以根据用户的选择和光阴的流转自由组合。同时，模块化代码具有强拓展性，可用来开发同类衍生小程序（例如每日壁纸生成，或者旅游景区的DIY 明信片生成等），具有实际应用和推广价值。话又说回来，对于这个程序还有许多可以优化提升的地方，比如通过加入整体色彩风格的设置，加入可切换的生成模板来避免版式的单调等。

代码如诗，作为研究生，应当不断深入研习编程语言，在数字化艺术领域，努力探索科学技术与艺术设计的融合之道，进一步拓展观者的审美体验，将艺术设计延伸至更广阔的领域。