基于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 明信片生成等），具有實際應用和推廣價值。話又說回來，對于這個程序還有許多可以優化提升的地方，比如通過加入整體色彩風格的設置，加入可切換的生成模板來避免版式的單調等。

代碼如詩，作為研究生，應當不斷深入研習編程語言，在數字化藝術領域，努力探索科學技術與藝術設計的融合之道，進一步拓展觀者的審美體驗，將藝術設計延伸至更廣闊的領域。