版畫設計語言在App插畫中的應用

程諶

（武漢理工大學，武漢 430070）

一、版畫與插圖發展簡述

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

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

20世紀后，印刷技術的提高使得版畫往多領域發展，并出現了絲網印刷、綜合版畫和數字版畫，版畫的商業性越來越小。社會發展到今天，插畫被廣泛地用于社會的各個領域。隨著藝術的日益商品化和新的繪畫材料及工具的出現，插畫藝術進入商業化時代。現代插畫的概念已遠遠超出了傳統規定的范疇，插畫不再局限于某一風格，它打破了以往單一使用一種材料的方式，通過廣泛地運用各種現代技術手段，使插畫藝術的發展獲得了更為廣闊的空間和無限的可能。現在，隨著智能手機的普及，使用人群的擴大，插畫開始大量進入手機圖形用戶界面設計中。

二、App插畫的發展

> 圖1 哈特曼·舍德爾的《紐倫堡編年史》

> 圖2 Window phone7 的扁平化風格

> 圖3 電商傳統節日Banner

近年來，App插畫普遍呈現扁平化趨勢。手機界面上的扁平化，最早出現在微軟發布的windows phone7的移動界面設計上。早期微軟公司將這種設計風格命名為metro design，其后更名為modern ui（圖2），在風格上體現為直觀簡單的形狀，粗并且干凈的字體，明亮對比的顏色，長投影以及減少復雜細節和紋理特征。從歷史的淵源來看，這種風格來源于19世紀四五十年代瑞士的國際主義風格，當時主要影響層面是海報，將字體與圖像結合起來被視為視覺傳達交流的最有效的方式。

隨著2013年蘋果ios7的發布，扁平化得到了進一步發展，這也是蘋果公司在設計風格上的重大轉變，完全拋棄了了ios之前版本的擬物化特征。與微軟的完全扁平風格相比，增加了一定的陰影和分界線，并且大量使用了半透明效果和“毛玻璃”效果來體現層級，同時用sensor制作出視差效果和大量華麗動畫特效。因為涉及到很多產品，這種分割迅速在設計圈內流行開來，并逐漸出現在一些App軟件配圖和輪播頁上。

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

三、App插畫風格現狀

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

四、版畫設計語言在App插畫中的體現

版畫設計語言能很好的運用在商業banner圖上，尤其是與傳統節日相關。首先版畫相對于實景圖更具有趣味性和藝術性，能夠增加其視覺沖擊度。主流App軟件在各種傳統節日中會替換與節日氣息相近的banner圖。（圖3）

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

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

> 圖4 站酷App啟動頁面

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

> 圖6 WWDC獲獎的5款游戲應用

版畫設計語言在游戲設計中也表現良好。蘋果的年度設計大獎已延長21年，越來越多地突出高質量的原創應用，并將界面的美感與用戶體驗相結合。設計師經常會在設計獎項列表中了解Apple所重視的應用程序設計風格。其中，獲獎的有5個高品質的游戲，在圖形、音樂和情節上都比較出彩（圖6）：

《佛羅倫薩》一款互動故事書手機游戲，于2018年情人節推出，由紀念碑谷的首席設計師推出。講述一個女孩的第一個愛情故事和令人心碎的低谷的高潮。雖然游戲故事和內容都比較簡單，但在藝術風格上贏得了很多玩家的喜愛。

《INSIDE》是丹麥 Playdead工作室繼《Limbo》后的又一力作。可以說，INSIDE有資格在畫面、聲音、情節、內涵和精神方面代表獨立游戲的最高成就。自推出以來，已經斬獲無數獎項，包括E32016獎最佳獨立游戲、TGA2016最佳藝術指導、最佳獨立游戲獎、GDC最佳視覺效果、最佳音效獎等等。

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

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

《奧德瑪》是一款出色的平臺冒險游戲。全手繪水平滾動場景使其看起來不想像一個游戲，更像是電影或動態漫畫。

從獲獎名單中的這五款游戲的藝術風格上來看，不難發現其中摻有版畫藝術的影子，手機游戲不再是以真實的畫面為切入點，而是退回到二維，著重豐富藝術效果，抽象化物體，強調色彩與光影效果。

可以預見，App中的插畫配圖形式，今后還會延續插畫的潮流。各種風格的插畫可以完美搭配各種App的使用場景以及用戶群體的特點，使得App呈現出不同個性化的使用體驗，它可以更符合當前追求個性化定制體驗的年輕用戶社區的需求。版畫設計語言在遵守界面設計的功能性和有效性的的基礎上，App應用可以在很大程度上豐富現有的App插畫形式。■

圖片來源：

圖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