王遼森，蔣克巖

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

0 引 言

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

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

本程序的總體設(shè)計(jì)主要分為圖像資源設(shè)計(jì)與交互程序設(shè)計(jì)兩個(gè)板塊，其中，圖像資源的整體版式設(shè)計(jì)靈感來自郵票，采用方塊分割的布局，通過扁平化的設(shè)計(jì)語言，分區(qū)域地將數(shù)據(jù)予以可視化的呈現(xiàn)。交互程序一方面負(fù)責(zé)處理用戶輸入的信息及其在網(wǎng)絡(luò)中抓取到的用戶所在地的天氣、溫度等信息，將處理后的數(shù)據(jù)與對(duì)應(yīng)的圖像資源進(jìn)行匹配，而后生成圖片并輸出提示語；另一方面還需要兼顧數(shù)據(jù)的異常處理，確保即便是用戶不按照規(guī)范輸入數(shù)據(jù)或者是出現(xiàn)數(shù)據(jù)沖突的時(shí)候，依然能準(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 等第三方組件?！拔⑿艩顟B(tài)圖”生成程序從本質(zhì)上說是靜態(tài)圖像生成程序，涉及數(shù)據(jù)與圖像資源的匹配。目前市面上雖然沒有相同定位的產(chǎn)品，但從當(dāng)前主流的編程技術(shù)來看，選擇諸如Java、Python 之類面向?qū)ο蟮木幊陶Z言顯然是較為明智的?？紤]到多媒體藝術(shù)設(shè)計(jì)的“感官屬性”，直觀的可視化編程語言可以大幅縮減藝術(shù)與技術(shù)之間的距離，因此最終選用由Java 拓展而來的Processing 語言實(shí)現(xiàn)本程序的開發(fā)。作為一門新興的編程語言，Processing 將計(jì)算機(jī)屏幕上的像素視為變量值的可視化表現(xiàn)，其開發(fā)平臺(tái)免費(fèi)且開源，是目前市場(chǎng)上提供開源設(shè)計(jì)應(yīng)用中為數(shù)不多的可視化編程語言。此外，Processing 是由Java 語言拓展而來的，繼承了Java 面向?qū)ο蟮奶匦?，是Java 語言的延伸，支持許多現(xiàn)有的Java 語言架構(gòu)，具有豐富的可拓展性，并且還在Java 應(yīng)用范圍的基礎(chǔ)上增加了圖形化應(yīng)用的功能，將Java的語法予以簡(jiǎn)化并將其運(yùn)算結(jié)果“感官化”，提高了編程語言的交互性，能夠有力促進(jìn)數(shù)字媒體藝術(shù)的發(fā)展，同時(shí)可視化模型為各個(gè)行業(yè)的應(yīng)用者提供了極大的便利，為他們提供強(qiáng)大的技術(shù)支持。

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

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

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

圖1 色彩分格

圖2 大致效果

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

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

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

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

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

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

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

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

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

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

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

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

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

圖6 程序運(yùn)行流程圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8 結(jié) 論

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

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