基于Processing的微信狀態(tài)圖生成程序的設(shè)計與實現(xiàn)

王遼森，蔣克巖

（天津師范大學(xué)，天津 300387）

0 引 言

隨著智能互聯(lián)理念的提出、科技的發(fā)展和社交媒體的迭代，人類活動的社交性也在不斷進化，微信作為重要的即時通信類社交軟件，承載著現(xiàn)代人的社交生活。最近上線的微信8.0.0 版本，新增了每日狀態(tài)設(shè)置的功能，用戶可以隨心選擇自己的心情狀態(tài)，設(shè)置專屬的微信狀態(tài)圖片或視頻，持續(xù)24 小時后自動結(jié)束。微信狀態(tài)的設(shè)置，以一種全新的方式來展現(xiàn)用戶的心情或感受，類似于早期就有的QQ 簽名，但微信狀態(tài)設(shè)置具有更強的時效性、更豐富的內(nèi)容表達性和更高的自由度。因此，筆者認為，基于微信狀態(tài)設(shè)置持續(xù)24 小時的周期性，通過設(shè)計和編程將用戶當(dāng)天的狀態(tài)信息及其他相關(guān)數(shù)據(jù)進行可視化呈現(xiàn)，即時輸出可供用戶設(shè)置為微信狀態(tài)的圖片，具有一定的現(xiàn)實意義和實用價值。

1 “微信狀態(tài)”的程序總體設(shè)計

本程序的總體設(shè)計主要分為圖像資源設(shè)計與交互程序設(shè)計兩個板塊，其中，圖像資源的整體版式設(shè)計靈感來自郵票，采用方塊分割的布局，通過扁平化的設(shè)計語言，分區(qū)域地將數(shù)據(jù)予以可視化的呈現(xiàn)。交互程序一方面負責(zé)處理用戶輸入的信息及其在網(wǎng)絡(luò)中抓取到的用戶所在地的天氣、溫度等信息，將處理后的數(shù)據(jù)與對應(yīng)的圖像資源進行匹配，而后生成圖片并輸出提示語；另一方面還需要兼顧數(shù)據(jù)的異常處理，確保即便是用戶不按照規(guī)范輸入數(shù)據(jù)或者是出現(xiàn)數(shù)據(jù)沖突的時候，依然能準(zhǔn)確無誤地生成一張圖片。

2 “微信狀態(tài)圖生成程序”的開發(fā)環(huán)境與技術(shù)

從開發(fā)環(huán)境和編程技術(shù)的角度來說，許多桌面GUI 程序都是采用Java 語言開發(fā)的，通過其內(nèi)置模塊豐富的API，開發(fā)出復(fù)雜炫酷的圖形界面。此外，類似的程序還可以通過基于Java 的Web 組件布局在網(wǎng)頁中，其中包括Java 官方提供的Servlet 和JSP，以及常用的MyBatis、Spring MVC、Spring Boot 等第三方組件。“微信狀態(tài)圖”生成程序從本質(zhì)上說是靜態(tài)圖像生成程序，涉及數(shù)據(jù)與圖像資源的匹配。目前市面上雖然沒有相同定位的產(chǎn)品，但從當(dāng)前主流的編程技術(shù)來看，選擇諸如Java、Python 之類面向?qū)ο蟮木幊陶Z言顯然是較為明智的。考慮到多媒體藝術(shù)設(shè)計的“感官屬性”，直觀的可視化編程語言可以大幅縮減藝術(shù)與技術(shù)之間的距離，因此最終選用由Java 拓展而來的Processing 語言實現(xiàn)本程序的開發(fā)。作為一門新興的編程語言，Processing 將計算機屏幕上的像素視為變量值的可視化表現(xiàn)，其開發(fā)平臺免費且開源，是目前市場上提供開源設(shè)計應(yīng)用中為數(shù)不多的可視化編程語言。此外，Processing 是由Java 語言拓展而來的，繼承了Java 面向?qū)ο蟮奶匦?，是Java 語言的延伸，支持許多現(xiàn)有的Java 語言架構(gòu)，具有豐富的可拓展性，并且還在Java 應(yīng)用范圍的基礎(chǔ)上增加了圖形化應(yīng)用的功能，將Java的語法予以簡化并將其運算結(jié)果“感官化”，提高了編程語言的交互性，能夠有力促進數(shù)字媒體藝術(shù)的發(fā)展，同時可視化模型為各個行業(yè)的應(yīng)用者提供了極大的便利，為他們提供強大的技術(shù)支持。

3 狀態(tài)與視覺設(shè)計

從數(shù)據(jù)可視化的角度出發(fā)，通過合理的布局與適當(dāng)?shù)呐渖共煌愋偷臄?shù)據(jù)協(xié)調(diào)有序地呈現(xiàn)在畫面中，整體設(shè)計靈感來源于郵票和拼圖，采用方塊分格拼接的方式，選擇扁平化的設(shè)計語言以便于更好地凸顯信息。扁平風(fēng)格作為現(xiàn)代插畫的新興潮流之一，起源于“瑞士風(fēng)格”的裝飾設(shè)計，有著造型簡練概括又不乏生動的優(yōu)點，相較于其他風(fēng)格的插畫，扁平風(fēng)格的插畫更能直接明了地傳達主題，藝術(shù)表現(xiàn)力更強。扁平風(fēng)格圖形摒棄了無謂的裝飾、陰影，雖然信息傳達更加清晰，但難免會給觀者帶來枯燥單一的感受，因而筆者在創(chuàng)意點、造型、比例、色彩、神態(tài)等方面進行了夸張設(shè)計，強化了目標(biāo)元素的特征，豐富了扁平化圖形的視覺效果。

從整體上來說，筆者首先進行了分格設(shè)計和色彩選擇，如圖1所示，分格過后，就可以對用戶設(shè)置微信狀態(tài)圖的大體效果有所把握，從而方便后續(xù)圖像資源的設(shè)計，如圖2所示。

圖1 色彩分格

圖2 大致效果

在扁平化圖標(biāo)的設(shè)計中，色彩的選擇和使用直接影響著圖標(biāo)的統(tǒng)一性和對比度，決定了整個作品的基調(diào)和風(fēng)格。以該作品為例，整體選擇了較高飽和度的色彩，輕松明快，較適宜在LCD 與OLED 屏幕上顯示。通過色彩的對比，可體現(xiàn)出元素的結(jié)構(gòu)轉(zhuǎn)折與塊面關(guān)系，在增強視覺沖擊力的同時，也將不同區(qū)塊的基本特征交代清楚。

在將數(shù)據(jù)呈現(xiàn)區(qū)域分為六個區(qū)域后，筆者針對這六個區(qū)域分別設(shè)計了五組元素實現(xiàn)分區(qū)域的數(shù)據(jù)可視化：

（1）黃色塊1 即彩蛋格。每逢節(jié)假日或用戶生日時，會在該區(qū)域觸發(fā)彩蛋，顯示節(jié)日（生日）圖標(biāo)，反之則顯示彩蛋圖標(biāo)，確保畫面的完整性，部分彩蛋格圖標(biāo)如圖3所示。

圖3 部分彩蛋格圖標(biāo)

（2）綠色塊2 即實時顯示日歷。展示日期數(shù)據(jù)是為了凸顯微信狀態(tài)的時效性，另一方面也便于用戶后期回看索引自己的每日動態(tài)圖。

（3）藍色塊3。實時顯示用戶所在地的天氣信息，筆者針對扁平化的整體風(fēng)格設(shè)計了一套由白色粗線條構(gòu)成的天氣狀態(tài)圖標(biāo)，與藍色的背景形成鮮明對比，識別度高且符合整體風(fēng)格。

（4）白色塊4。無內(nèi)容，此區(qū)域在設(shè)置為狀態(tài)圖后會顯示用戶的微信頭像和昵稱，為此選擇白色且不做任何圖像資源顯示。

（5）橙色塊5。顯示瑞獸，瑞獸的形象來源于中國傳統(tǒng)的十二生肖，如圖4所示，整體上采用扁平化的設(shè)計語言進行設(shè)計，旨在讓用戶在使用程序時可以輕松愉悅地選擇一只瑞獸來守護自己一天，增加程序的互動性和趣味性。值得一提的是，扁平風(fēng)格圖形不僅僅是三角形、圓形、長方形等圖形元素的簡單拼湊，在創(chuàng)作時，圖形之間的統(tǒng)一性、大小比例關(guān)系的把握，圖形輪廓曲線與直線之間的變化都在很大程度上影響著整個圖形的韻律、張力和規(guī)整度。以十二生肖中的“雞”為例，對雞尾巴和雞冠的典型特征進行了夸張?zhí)幚?，使圖標(biāo)的識別性更強。半圓及圓弧輪廓的使用與雞的頭部、腿部的直線形成對比，在增加圖標(biāo)呼吸感的同時提升了圖標(biāo)的質(zhì)感。

圖4 瑞獸模塊設(shè)計

（6）粉色塊6。靈感來自中國傳統(tǒng)的“掃晴娘”。“掃晴娘”是中國民間祈禱雨止天晴時掛在屋檐下的剪紙婦人像，寓意就是掃去陰霾，迎來晴天，以利曬糧、出行。因此，該格子里展示的娃娃形象會根據(jù)用戶所在地的氣溫變化更換不同厚薄的衣服，而娃娃的表情則是由用戶選擇的心情狀態(tài)決定，如圖5所示。通過擬人化和夸張化的表現(xiàn)手法，為娃娃賦予喜、怒、哀、樂情緒變化以及其他各種人類面部表情特征，使娃娃更加立體形象、活潑可愛。而娃娃的服裝設(shè)計為隨氣溫的變化而搭配，增加了畫面的親切感，更容易拉近與觀者之間的距離，在符合大眾審美需求的同時又增添了趣味性。

圖5 娃娃模塊設(shè)計

4 基于Processing 的交互設(shè)計

首先，需要對程序的預(yù)期運作流程進行設(shè)計，用戶根據(jù)實際情況與自身需求輸入自己的心情狀態(tài)，選擇守護瑞獸，輸入生日信息，如圖6所示。而天氣、氣溫和日期則是由程序在網(wǎng)絡(luò)上自動抓取，確保數(shù)據(jù)的實時性、準(zhǔn)確性，從而實現(xiàn)信息更新的動態(tài)交互。在獲取到上述數(shù)據(jù)之后，程序進行數(shù)據(jù)轉(zhuǎn)化與分析，與圖像資源進行一一匹配。如果用戶未按規(guī)定輸入數(shù)據(jù)，或者程序從網(wǎng)絡(luò)上獲取的信息異常，則由程序進行異常處理，最終確保用戶在網(wǎng)絡(luò)暢通的環(huán)境下使用程序，這樣每次都能成功獲取生成圖片與程序回執(zhí)。

圖6 程序運行流程圖

5 數(shù)據(jù)的采集與配置

程序有兩個獲取信息的方法，分別獲取用戶輸入信息（包括昵稱、心情狀態(tài)、瑞獸、出生年月日）和網(wǎng)絡(luò)信息（天氣、氣溫、當(dāng)日日期）。用戶信息以csv 表格文件的形式進行存儲，用戶在使用程序時只需將自己的信息像涂答題卡一樣輸入表格文件，程序運行時會采用loadTable 方法加載表格文件中的數(shù)據(jù)。使用“TableRow row =table.getRow(0);”代碼提取第一行（也就是用戶填寫行）的數(shù)據(jù)，隨后在程序中對應(yīng)數(shù)據(jù)逐一建立變量存儲數(shù)據(jù)值，至此完成從用戶到程序的數(shù)據(jù)輸入。

此外，獲取網(wǎng)絡(luò)數(shù)據(jù)的方式是使用“l(fā)oadStrings()”函數(shù)抓取URL，并將抓取到的html 源文件存儲在一個字符串?dāng)?shù)組中，而后使用join()函數(shù)將數(shù)組轉(zhuǎn)化為一個長字符串。基于html 編碼語言的特性，我們只需找到固定的起止html標(biāo)簽，就可以在標(biāo)簽中間獲取到目標(biāo)字段，為此，筆者使用自定義函數(shù)方法“giveMeTextBetween()”來獲取指定字段的中間字符串，如果無法找到開始或結(jié)束的“html 標(biāo)簽”，則返回一個空字符串，核心代碼為：

程序獲取到所需的數(shù)據(jù)之后，便開始進行數(shù)據(jù)匹配，筆者使用Processing中的條件判斷語句來對數(shù)據(jù)進行匹配，匹配方法被逐個封裝為函數(shù)模塊，從而確保程序的易維護性。值得一提的是，網(wǎng)上抓取到的日期數(shù)據(jù)是String 格式，在進行計算的時候需要提前進行數(shù)據(jù)類型轉(zhuǎn)換，如果匹配數(shù)據(jù)正常，則按匹配結(jié)果注意輸出，反之進行數(shù)據(jù)的異常處理。

6 程序數(shù)據(jù)的異常處理

該程序的異常處理主要是針對數(shù)據(jù)錯誤和數(shù)據(jù)沖突兩個方面。所謂的數(shù)據(jù)錯誤，以瑞獸格子為例，如果用戶輸入的瑞獸值（zodiac）不在指定范圍（1～12）內(nèi)，對調(diào)用程序抓取到的年份進行數(shù)據(jù)類型轉(zhuǎn)換之后，用當(dāng)前年份減去2019 除以12 求余數(shù)，這樣會重新得到一個1～12 的整數(shù)范圍，用來對應(yīng)匹配12 瑞獸。如果用戶的瑞獸數(shù)據(jù)輸入錯誤，系統(tǒng)會在瑞獸格中自動顯示當(dāng)年的本命生肖，確保程序正常運行，部分核心代碼為：

所謂的數(shù)據(jù)沖突，以彩蛋格子為例，如果用戶的生日和節(jié)日重合，便會同時匹配到兩張圖像資源。為了防止數(shù)據(jù)沖突導(dǎo)致顯示圖像重合，筆者首先自定義了“shengri()”函數(shù)，用來判斷當(dāng)日是否為用戶生日，反饋1 和0，將結(jié)果存儲在全局變量中，在彩蛋格的匹配函數(shù)“caidan()”中，先調(diào)用“shengri()”函數(shù)執(zhí)行生日判斷，后續(xù)匹配全部以=0（即當(dāng)天非用戶生日）為前提，從而防止數(shù)據(jù)沖突。核心代碼為：

7 模塊化的設(shè)計與實現(xiàn)

總的來說，不同模塊的總體功能都是將所獲取的數(shù)據(jù)與圖像資源進行匹配，其間涉及異常數(shù)據(jù)的處理。

彩蛋模塊的數(shù)據(jù)來源為程序在網(wǎng)絡(luò)上抓取的日期和用戶輸入的生日。首先進行用戶生日判斷，如果當(dāng)日是用戶的生日，則在彩蛋格子中顯示生日蛋糕圖標(biāo)，同時在程序輸出回執(zhí)中呈現(xiàn)祝用戶生日快樂的字樣；如果當(dāng)日不是用戶的生日，則進行后續(xù)節(jié)日匹配。每逢節(jié)日，該區(qū)域會顯示節(jié)日圖標(biāo)，反之則顯示彩蛋圖標(biāo)，確保畫面的完整性。此外，程序的背景音樂同樣由該模塊的代碼段來判定，當(dāng)用戶過生日時，程序自動播放生日歌背景音樂，反之播放日常背景音樂。

日歷模塊用來展示當(dāng)天的日歷信息，包含月份和日期，考慮到用戶的本地時間可能與實際存有誤差，因此沒有采用Processing 內(nèi)置的方法直接調(diào)用系統(tǒng)時間。日歷數(shù)據(jù)來源為程序在網(wǎng)絡(luò)上抓取的字符串，在導(dǎo)入字體后，采用text 方法輸出。值得一提的是，程序會先對抓取到的字符串長度進行判斷，當(dāng)字符串長度小于2（即日期為1～9日的個位數(shù)）時，系統(tǒng)會自動在前位補0，確保顯示畫面的美觀度和完整性。

天氣模塊用程序在網(wǎng)絡(luò)上抓取到的天氣信息進行字符串匹配，對應(yīng)輸出預(yù)設(shè)的天氣圖像資源。娃娃模塊的數(shù)據(jù)來源為用戶輸入的心情狀態(tài)和程序在網(wǎng)絡(luò)上抓取的氣溫。前者對應(yīng)匹配娃娃的表情，后者根據(jù)溫度范圍對應(yīng)匹配娃娃的衣著。當(dāng)數(shù)據(jù)有誤時，輸出預(yù)設(shè)圖像資源，確保程序可以正常輸出完整圖像。

瑞獸模塊的數(shù)據(jù)來源為用戶輸入（1～12），對應(yīng)匹配預(yù)設(shè)的瑞獸圖像資源（鼠——豬），當(dāng)數(shù)據(jù)有誤時，執(zhí)行自定義函數(shù)jinnian()，輸出當(dāng)年對應(yīng)的本命生肖，確保程序可以正常輸出完整圖像。

用戶在輸入數(shù)據(jù)運行程序后，程序生成圖片并輸出回執(zhí)。用戶可以根據(jù)程序提示，按任意鍵保存圖像并設(shè)置成自己的當(dāng)日微信狀態(tài)，方便快捷。

8 結(jié) 論

Processing為用戶提供一個強大的數(shù)據(jù)可視化服務(wù)平臺，可以對多種不同的數(shù)據(jù)進行分析運算，并且在代碼嚴(yán)密邏輯性的加持下，可以為傳統(tǒng)的平面藝術(shù)衍生出更多的表達方式。以該微信狀態(tài)圖生成小程序為例，如果沒有編程的介入，再好的構(gòu)想和設(shè)計也只能是一張一張的拼接，一張一張的制作，而編程的介入則賦予傳統(tǒng)平面設(shè)計以全新的活力，各種圖像元素可以根據(jù)用戶的選擇和光陰的流轉(zhuǎn)自由組合。同時，模塊化代碼具有強拓展性，可用來開發(fā)同類衍生小程序（例如每日壁紙生成，或者旅游景區(qū)的DIY 明信片生成等），具有實際應(yīng)用和推廣價值。話又說回來，對于這個程序還有許多可以優(yōu)化提升的地方，比如通過加入整體色彩風(fēng)格的設(shè)置，加入可切換的生成模板來避免版式的單調(diào)等。

代碼如詩，作為研究生，應(yīng)當(dāng)不斷深入研習(xí)編程語言，在數(shù)字化藝術(shù)領(lǐng)域，努力探索科學(xué)技術(shù)與藝術(shù)設(shè)計的融合之道，進一步拓展觀者的審美體驗，將藝術(shù)設(shè)計延伸至更廣闊的領(lǐng)域。