版畫設(shè)計(jì)語(yǔ)言在App插畫中的應(yīng)用

程諶

（武漢理工大學(xué)，武漢 430070）

一、版畫與插圖發(fā)展簡(jiǎn)述

插畫是一門歷史十分悠久的藝術(shù)，目前發(fā)現(xiàn)人類最早的插畫是在公元前兩萬(wàn)年的法國(guó)南部地區(qū)的“拉四格的洞窯畫”。經(jīng)過(guò)一段時(shí)期的發(fā)展，插畫被廣泛應(yīng)用于印刷書籍中。目前已知最早的插畫書是古埃及的《亡靈書》，這本書一共有190篇章全長(zhǎng)9米，使用的紙張是莎草紙，里面記載著符咒、祈禱文、和贊美詩(shī)。到了14世紀(jì)，各式各樣的圖書館紛紛出現(xiàn)，以復(fù)制世俗文本的小作坊建立起來(lái)，插圖開(kāi)始成為獨(dú)立的手工藝術(shù)活動(dòng)。這些手抄本的裝飾圖案和插圖大量出現(xiàn)在宗教、植物學(xué)、醫(yī)學(xué)以及百科全書中，并且插畫的風(fēng)格都是以細(xì)密畫為主。

15世紀(jì)隨著歐洲中世紀(jì)藝術(shù)、文化以及冶金的發(fā)展，中國(guó)木板印刷的流入，插圖的復(fù)制技術(shù)得到了改進(jìn)。這些木板印刷首先被應(yīng)用到了織物裝飾品上，接著大量的運(yùn)用在宗教畫像上，在這個(gè)時(shí)期中插圖最多最豐富的書是由哈特曼·舍德?tīng)枺℉artmann Schedel）在紐倫堡出版的《紐倫堡編年史》（圖1）。這是一部含有豐富插畫的世界歷史書籍。原稿全書共包含有645副插畫。到了15世紀(jì)后半葉開(kāi)始出現(xiàn)多色印刷法，并開(kāi)始出現(xiàn)銅板凹版，刻板方式分為干刻法和腐蝕法，直到17世紀(jì)版畫的藝術(shù)表現(xiàn)形式得到了極大的發(fā)展，誕生了美柔汀版畫、飛塵腐蝕版畫等成熟刻板技法，版畫讓插圖顯得更加生動(dòng)逼人，使圖像傳播的信息得到了質(zhì)的飛躍。

20世紀(jì)后，印刷技術(shù)的提高使得版畫往多領(lǐng)域發(fā)展，并出現(xiàn)了絲網(wǎng)印刷、綜合版畫和數(shù)字版畫，版畫的商業(yè)性越來(lái)越小。社會(huì)發(fā)展到今天，插畫被廣泛地用于社會(huì)的各個(gè)領(lǐng)域。隨著藝術(shù)的日益商品化和新的繪畫材料及工具的出現(xiàn)，插畫藝術(shù)進(jìn)入商業(yè)化時(shí)代?，F(xiàn)代插畫的概念已遠(yuǎn)遠(yuǎn)超出了傳統(tǒng)規(guī)定的范疇，插畫不再局限于某一風(fēng)格，它打破了以往單一使用一種材料的方式，通過(guò)廣泛地運(yùn)用各種現(xiàn)代技術(shù)手段，使插畫藝術(shù)的發(fā)展獲得了更為廣闊的空間和無(wú)限的可能?，F(xiàn)在，隨著智能手機(jī)的普及，使用人群的擴(kuò)大，插畫開(kāi)始大量進(jìn)入手機(jī)圖形用戶界面設(shè)計(jì)中。

二、App插畫的發(fā)展

> 圖1 哈特曼·舍德?tīng)柕摹都~倫堡編年史》

> 圖2 Window phone7 的扁平化風(fēng)格

> 圖3 電商傳統(tǒng)節(jié)日Banner

近年來(lái)，App插畫普遍呈現(xiàn)扁平化趨勢(shì)。手機(jī)界面上的扁平化，最早出現(xiàn)在微軟發(fā)布的windows phone7的移動(dòng)界面設(shè)計(jì)上。早期微軟公司將這種設(shè)計(jì)風(fēng)格命名為metro design，其后更名為modern ui（圖2），在風(fēng)格上體現(xiàn)為直觀簡(jiǎn)單的形狀，粗并且干凈的字體，明亮對(duì)比的顏色，長(zhǎng)投影以及減少?gòu)?fù)雜細(xì)節(jié)和紋理特征。從歷史的淵源來(lái)看，這種風(fēng)格來(lái)源于19世紀(jì)四五十年代瑞士的國(guó)際主義風(fēng)格，當(dāng)時(shí)主要影響層面是海報(bào)，將字體與圖像結(jié)合起來(lái)被視為視覺(jué)傳達(dá)交流的最有效的方式。

隨著2013年蘋果ios7的發(fā)布，扁平化得到了進(jìn)一步發(fā)展，這也是蘋果公司在設(shè)計(jì)風(fēng)格上的重大轉(zhuǎn)變，完全拋棄了了ios之前版本的擬物化特征。與微軟的完全扁平風(fēng)格相比，增加了一定的陰影和分界線，并且大量使用了半透明效果和“毛玻璃”效果來(lái)體現(xiàn)層級(jí)，同時(shí)用sensor制作出視差效果和大量華麗動(dòng)畫特效。因?yàn)樯婕暗胶芏喈a(chǎn)品，這種分割迅速在設(shè)計(jì)圈內(nèi)流行開(kāi)來(lái)，并逐漸出現(xiàn)在一些App軟件配圖和輪播頁(yè)上。

2017年6月5日，蘋果在wwdc上發(fā)布了ios11，9月20日該系統(tǒng)在北京正式推送。與前期相比，系統(tǒng)改變最大的是蘋果應(yīng)用商店。在蘋果應(yīng)用商店中增加了今日視圖，并大量增加插圖使用面積，軟件的展示插圖占了手機(jī)屏幕幾乎三分之二，并且將每種軟件和游戲的風(fēng)格進(jìn)行了細(xì)致的歸類。同時(shí)在視覺(jué)風(fēng)格上采用卡片加陰影的設(shè)計(jì)形式。隨著蘋果以插畫為主導(dǎo)的設(shè)計(jì)思路的引領(lǐng)，大量的插畫應(yīng)用在圖標(biāo)、文章配圖、banner圖上，以實(shí)景圖作為插圖的風(fēng)格的軟件越來(lái)越少。

三、App插畫風(fēng)格現(xiàn)狀

目前交互和視覺(jué)設(shè)計(jì)師們將軟件視覺(jué)效果的設(shè)計(jì)重點(diǎn)放在了App的插畫設(shè)計(jì)上。在這種背景下，更多的插畫風(fēng)格應(yīng)運(yùn)而生。近幾年App插畫的主流風(fēng)格大致分為扁平插畫、肌理插畫、手繪插畫、漸變插畫、立體插畫、描邊插畫、MBE插畫。扁平插畫是消除掉立體感將能明顯表現(xiàn)體積的顏色過(guò)渡、紋理、陰影等元素。肌理插畫則是在扁平化圖像上增加紋理豐富的插畫質(zhì)感。手繪插畫則是普通的繪畫流程。漸變插畫是在色塊中采用同一色漸變，整體畫面給人一種唯美的感受。立體插畫是在二維的空間表現(xiàn)出三維的空間，將被繪制的物體以二分之一側(cè)面和半俯視呈現(xiàn)，并消除掉空間透視。描邊插畫則是在運(yùn)用色塊的基礎(chǔ)上添加描邊，將事物進(jìn)行抽象化處理。MBE插畫則是在描邊插畫的基礎(chǔ)上給描邊輪廓有規(guī)律的作斷線處理。從這些延伸而來(lái)的插畫風(fēng)格來(lái)看，都是在扁平插畫的基礎(chǔ)上添加一種特殊效果，以此來(lái)豐富畫面的成效效果。相比較而言，版畫與App插畫在形式上相似，尤其是日本浮世繪套色版畫。以葛飾北齋的《富岳三十六景》為例，整體畫面以線為主，通過(guò)線條的穿插表現(xiàn)前后關(guān)系，并且走線柔美流暢，以密集的點(diǎn)或者線來(lái)制造灰面，增添細(xì)節(jié)。顏色上以平鋪為主，通常以一種顏色為主色，其他幾種顏色為輔助色，這種表現(xiàn)方式通過(guò)改良轉(zhuǎn)變成現(xiàn)在我們所看的的App插畫風(fēng)格。兩者都拋棄了諸如陰影、漸變之類的效果，純粹用平鋪的色塊和線條去表現(xiàn)物體。同時(shí)，版畫與App插畫在功能屬性上類似。在批量印刷之前，插圖還是以手工版畫印刷為主，版畫所印刷出來(lái)的插圖與現(xiàn)代App插畫雖然承載物不同，但在功能上都是以闡釋或補(bǔ)充文字為主，并通過(guò)圖像來(lái)增加對(duì)讀者的感觀刺激。另外，版畫與App插畫都具有相同的人群載體和市場(chǎng)指向。兩者針對(duì)的人群都是普通大眾，版畫早期主要運(yùn)用在廣泛傳播的宗教書籍或科學(xué)圖鑒上，例如《圣經(jīng)》和《世界圖書百科全書》。而現(xiàn)代社會(huì)人人都用手機(jī)APP插畫，面向的也都是普通大眾。批量印刷以前的版畫與App插畫都具有商業(yè)性，目的都是為了更好地傳播與推廣。

四、版畫設(shè)計(jì)語(yǔ)言在App插畫中的體現(xiàn)

版畫設(shè)計(jì)語(yǔ)言能很好的運(yùn)用在商業(yè)banner圖上，尤其是與傳統(tǒng)節(jié)日相關(guān)。首先版畫相對(duì)于實(shí)景圖更具有趣味性和藝術(shù)性，能夠增加其視覺(jué)沖擊度。主流App軟件在各種傳統(tǒng)節(jié)日中會(huì)替換與節(jié)日氣息相近的banner圖。（圖3）

版畫設(shè)計(jì)語(yǔ)言也能運(yùn)用在App的啟動(dòng)頁(yè)上。本身啟動(dòng)頁(yè)就是為掩飾一些啟動(dòng)時(shí)需要花很多時(shí)間進(jìn)行初始化的應(yīng)用，避免展示一個(gè)空的頁(yè)面給用戶。后來(lái)開(kāi)發(fā)者意識(shí)到這一小塊空白時(shí)間可以被利用得更加充分，比如像微信一樣加入一些品牌展示的插圖，或者是加入節(jié)假日營(yíng)銷插圖給用戶親近感?，F(xiàn)在啟動(dòng)頁(yè)已成為表達(dá)品牌調(diào)性、產(chǎn)品定位的一塊重要區(qū)域。各種產(chǎn)品經(jīng)理都想盡量將啟動(dòng)頁(yè)這塊做得更具有趣味性。產(chǎn)品的理念通過(guò)插畫的方式濃縮在三到四張啟動(dòng)頁(yè)中。在站酷這款A(yù)pp產(chǎn)品中，啟動(dòng)頁(yè)使用了黑白版畫的形式表現(xiàn)了站酷App（圖4）以“設(shè)計(jì)”“原創(chuàng)”“交流”為中心的產(chǎn)品定位，并在畫面中添加類似搖點(diǎn)刀的散點(diǎn)作為肌理，顏色上采用最為簡(jiǎn)單的黃黑雙色。

版畫的設(shè)計(jì)語(yǔ)言很適合運(yùn)用在一些面向兒童的App（圖5）中。在兒童教育App“Lake涂色書”中，精選全球知名藝術(shù)家的高質(zhì)量插畫線稿，lake涂色書中的插畫大多數(shù)都是平涂式插畫。通過(guò)用戶的再上色完成屬于自己的插畫作品。涂色過(guò)程猶如版畫中的套色，選中調(diào)色盤的顏色點(diǎn)擊被線稿分割的空白色塊完成上色。用戶僅通過(guò)選色點(diǎn)擊就能完成接近于原作的效果，特別能緩解焦慮并給用戶更多成就感。

> 圖4 站酷App啟動(dòng)頁(yè)面

> 圖5 Lake涂色書中的平面插畫

> 圖6 WWDC獲獎(jiǎng)的5款游戲應(yīng)用

版畫設(shè)計(jì)語(yǔ)言在游戲設(shè)計(jì)中也表現(xiàn)良好。蘋果的年度設(shè)計(jì)大獎(jiǎng)已延長(zhǎng)21年，越來(lái)越多地突出高質(zhì)量的原創(chuàng)應(yīng)用，并將界面的美感與用戶體驗(yàn)相結(jié)合。設(shè)計(jì)師經(jīng)常會(huì)在設(shè)計(jì)獎(jiǎng)項(xiàng)列表中了解Apple所重視的應(yīng)用程序設(shè)計(jì)風(fēng)格。其中，獲獎(jiǎng)的有5個(gè)高品質(zhì)的游戲，在圖形、音樂(lè)和情節(jié)上都比較出彩（圖6）：

《佛羅倫薩》一款互動(dòng)故事書手機(jī)游戲，于2018年情人節(jié)推出，由紀(jì)念碑谷的首席設(shè)計(jì)師推出。講述一個(gè)女孩的第一個(gè)愛(ài)情故事和令人心碎的低谷的高潮。雖然游戲故事和內(nèi)容都比較簡(jiǎn)單，但在藝術(shù)風(fēng)格上贏得了很多玩家的喜愛(ài)。

《INSIDE》是丹麥 Playdead工作室繼《Limbo》后的又一力作。可以說(shuō)，INSIDE有資格在畫面、聲音、情節(jié)、內(nèi)涵和精神方面代表獨(dú)立游戲的最高成就。自推出以來(lái)，已經(jīng)斬獲無(wú)數(shù)獎(jiǎng)項(xiàng)，包括E32016獎(jiǎng)最佳獨(dú)立游戲、TGA2016最佳藝術(shù)指導(dǎo)、最佳獨(dú)立游戲獎(jiǎng)、GDC最佳視覺(jué)效果、最佳音效獎(jiǎng)等等。

《阿爾托的奧德賽》，游戲中充滿了藝術(shù)的氣息。相對(duì)于前作增加了各種游戲玩法，同時(shí)保留了內(nèi)核的橫向版本。你的角色是一個(gè)滑雪者，翱翔在微風(fēng)輕拂的沙丘之上，穿過(guò)令人興奮的峽谷，探索神秘的寺廟和城市，遠(yuǎn)離家鄉(xiāng)。

《FROST》引導(dǎo)粉碎的顆粒找到生命的和諧，這是令人賞心悅目的，通過(guò)一些簡(jiǎn)單的旋律和粒子融合的游戲，美麗的色彩讓你無(wú)需了解就能沉浸其中。

《奧德瑪》是一款出色的平臺(tái)冒險(xiǎn)游戲。全手繪水平滾動(dòng)場(chǎng)景使其看起來(lái)不想像一個(gè)游戲，更像是電影或動(dòng)態(tài)漫畫。

從獲獎(jiǎng)名單中的這五款游戲的藝術(shù)風(fēng)格上來(lái)看，不難發(fā)現(xiàn)其中摻有版畫藝術(shù)的影子，手機(jī)游戲不再是以真實(shí)的畫面為切入點(diǎn)，而是退回到二維，著重豐富藝術(shù)效果，抽象化物體，強(qiáng)調(diào)色彩與光影效果。

可以預(yù)見(jiàn)，App中的插畫配圖形式，今后還會(huì)延續(xù)插畫的潮流。各種風(fēng)格的插畫可以完美搭配各種App的使用場(chǎng)景以及用戶群體的特點(diǎn)，使得App呈現(xiàn)出不同個(gè)性化的使用體驗(yàn)，它可以更符合當(dāng)前追求個(gè)性化定制體驗(yàn)的年輕用戶社區(qū)的需求。版畫設(shè)計(jì)語(yǔ)言在遵守界面設(shè)計(jì)的功能性和有效性的的基礎(chǔ)上，App應(yīng)用可以在很大程度上豐富現(xiàn)有的App插畫形式。■

圖片來(lái)源：

圖1：https://www.bostonathenaeum.org/about/publications/selectionsacquired-tastes/liber-chronicarum-nuremberg-1493

圖2：http://www.zcool.com.cn/article/ZNTI5NjIw.html?switchPage=on

圖3：http://www.zcool.com.cn/work/ZMTk4NzY1NjQ=.html

圖4：https://www.zcool.com.cn/work/ZMTMwOTc1ODA=.html