插畫在現(xiàn)代教育產(chǎn)品界面中的應(yīng)用

從傳統(tǒng)教育媒介開始，似乎就與插畫有著密不可分的關(guān)系。一路成長(zhǎng)過來，從低幼插畫書、兒童故事書、再到學(xué)校時(shí)期的教材教輔，插畫都是大量運(yùn)用在其中。其中的一些插圖乃至長(zhǎng)大后依舊印記在腦海之中。

 

插畫的魅力緣何如此之大尼？其對(duì)于教育的意義何在？在互聯(lián)網(wǎng)經(jīng)濟(jì)時(shí)代我們又是怎樣去運(yùn)用到用戶界面設(shè)計(jì)之中？

什么是插畫？有時(shí)我們也會(huì)俗稱插圖，它屬于繪畫藝術(shù)，運(yùn)用圖案表現(xiàn)形象，本著審美與實(shí)用相統(tǒng)一的原則，其宗旨是盡量使線條，形態(tài)清晰明快，制作方便。在UI （User Interface），用戶界面界面中作為圖形語言，有著直觀的形象性、真實(shí)的生活感和美的感染力的特點(diǎn)。

縱觀國內(nèi)or國外的教育產(chǎn)品，插畫都有著非常廣泛的應(yīng)用。將插畫應(yīng)用到教育產(chǎn)品界面中，從教育角度來看有著以下幾個(gè)非常顯著的優(yōu)勢(shì)。

首先，插畫作為最容易接受的傳播媒介之一，一定程度上可以保持學(xué)生集中注意力。通過鮮明的色彩，有趣的圖形直觀生動(dòng)傳達(dá)界面所要表達(dá)的信息，比起純粹枯燥的文字更容易抓住用戶的注意力。應(yīng)試的學(xué)習(xí)本身是一件很枯燥的差事，插畫可以幫助安撫用戶的情緒。

下面我們看一個(gè)插畫栗子的應(yīng)用——洋蔥數(shù)學(xué)。

提起數(shù)學(xué)，多數(shù)女孩子都會(huì)覺得很枯燥無聊，又難以學(xué)好。數(shù)學(xué)是一種邏輯思維，洋蔥通過插畫的輔助生動(dòng)靈活的去展示教學(xué)內(nèi)容，傳遞思考方式。通過課程教研和產(chǎn)品設(shè)計(jì)，讓學(xué)生達(dá)到一種深度學(xué)習(xí)的體驗(yàn)，而不是練題或拍題。這樣的一種深度體驗(yàn)進(jìn)而吸引了用戶的注意力并持續(xù)保持。下面是洋蔥數(shù)學(xué)一些APP界面：

上面是進(jìn)入APP的首界面，以情感化擬物的插畫表現(xiàn)出戰(zhàn)勝數(shù)學(xué)的信心，同時(shí)也傳遞出產(chǎn)品的立場(chǎng)、氣質(zhì)和形象，呼應(yīng)“讓數(shù)學(xué)變得簡(jiǎn)單”的slogan?？吹竭@張插畫是不是又燃起對(duì)數(shù)學(xué)的希望之火，你的注意力一下子吸引過來了？哪怕只有一點(diǎn)點(diǎn)。然后抱著好奇心去注冊(cè)試試。進(jìn)行主界面，你會(huì)看到書籍知識(shí)點(diǎn)被具象化成一個(gè)個(gè)圖標(biāo)有韻律感地排列在界面中。這些抽象的數(shù)學(xué)概念肯定讓設(shè)計(jì)師腦洞大開，設(shè)計(jì)的這些插圖讓人感覺這些數(shù)學(xué)概念一下子親切有趣了起來。右側(cè)其他的一款數(shù)學(xué)學(xué)習(xí)產(chǎn)品，與之相似的內(nèi)容，空洞的文字標(biāo)題加之深色單一的背景，是不是有種嚴(yán)肅乏味的感覺，并沒有讀完這個(gè)界面的信息內(nèi)容的欲望。

點(diǎn)擊圖標(biāo)進(jìn)入到二級(jí)頁面，連貫的插畫圖標(biāo)成為界面上方主體，核心概念好似一把利劍，在完成核心概念的視頻學(xué)習(xí)后，可以進(jìn)入補(bǔ)充學(xué)習(xí)，好似斧頭去拓展新的天地。界面簡(jiǎn)潔清爽，插畫適當(dāng)?shù)狞c(diǎn)綴依舊保持趣味性。

進(jìn)入視頻學(xué)習(xí)，通過動(dòng)畫的形式將概念生動(dòng)的講解開來。符合情景的插圖動(dòng)了起來，像是在講一個(gè)故事，短短幾分鐘可以保持集中的注意力看完這個(gè)故事。

這是一個(gè)簡(jiǎn)短的學(xué)習(xí)流程，插畫貫穿了始終。產(chǎn)品中其他界面也應(yīng)用到了插畫，如完成提示頁、空白缺省頁、頭像的角色設(shè)計(jì)，無處不在。完整的傳遞出整個(gè)產(chǎn)品的視覺印象體驗(yàn)，趣味生動(dòng)，有吸引力。

其次，插畫作為直觀的圖形符號(hào)，輔助文字能夠引導(dǎo)閱讀，帶動(dòng)用戶了解界面內(nèi)容。傳統(tǒng)的教育媒介——教材，由于題材廣泛，包括地點(diǎn)、時(shí)間、場(chǎng)景等，通過對(duì)應(yīng)的插圖相伴便于學(xué)生理解。同理表現(xiàn)在現(xiàn)代的圖形界面。在教育產(chǎn)品中，配以合適插畫傳遞頁面信息的例子很多。譬如最為常見的引導(dǎo)頁，如果是單獨(dú)的文字?jǐn)⑹龊苌儆杏脩魰?huì)去看，如果配以精彩的插圖，至少用戶會(huì)將目光停留一下去欣賞下美的或者是有趣的東西。例如下面的這個(gè)例子：

UMU互動(dòng)。

畫面采用明亮的色彩，紅黃藍(lán)，但并不是三原色（正紅正黃正藍(lán)），飽和度和明度相似，體現(xiàn)了一種活力，時(shí)尚，讓人眼前一亮。扁平化的設(shè)計(jì)風(fēng)格，將擬物化繁重的紋理陰影裝飾去除，采用原始而簡(jiǎn)潔的元素方式，同時(shí)通過輕質(zhì)感和色塊區(qū)別來表現(xiàn)畫面的空間立體感，畫面不失精致和美感。面對(duì)的學(xué)生群體為年輕的一代，這樣的時(shí)尚好看的插畫風(fēng)格也是容易被用戶所能接受的。通過這3副插畫，用戶一看而過腦海中對(duì)于產(chǎn)品中的功能亮點(diǎn)多少有個(gè)具象的印象了。

最后，插畫是一種情感化的表達(dá)，可以滋潤(rùn)用戶的心境，培養(yǎng)想象力。通過人格化的處理，在作品中以美的、真誠的、友愛的情感去影響用戶，使他們?cè)跐撘颇凶非竺赖睦硐?，體驗(yàn)生活的美好。很多產(chǎn)品的品牌形象，將小動(dòng)物賦予了人的性格，或者是直接設(shè)計(jì)出的人物形象并且賦予他們鮮明的性格特點(diǎn)，通過這些形象的參與，產(chǎn)品在用戶眼中不再是冷冰冰的工具，更仿佛是親切有愛的朋友。最后舉個(gè)栗子——百度高考。

上面的這個(gè)人物形象似乎是百度高考的代言人，他以一個(gè)學(xué)生的角色貫穿在產(chǎn)品之中。這個(gè)人物形象原是百度熊孩子家族的其中一員——人艱不拆的貼貼。原有的角色設(shè)定是一名死宅的業(yè)余游戲玩家，樂觀敢自黑，猶豫沒主見，但是對(duì)自己喜歡的人異常執(zhí)著。在這里化身為一位參考高考的可愛學(xué)生。他的氣質(zhì)：透出一股執(zhí)著，即使曾今是學(xué)渣，在學(xué)習(xí)中去探索一切未知的興趣和勇氣，這種學(xué)習(xí)讓人滿足自信且意氣風(fēng)發(fā)。以上判斷個(gè)人的主觀感受占了主要部分，使用該產(chǎn)品的用戶——參加高考的孩子每個(gè)人心中肯定也有個(gè)自己定義的他，仿佛他就是自己的化身，陪伴自己使用產(chǎn)品，一點(diǎn)點(diǎn)學(xué)習(xí)積累為高考努力。這種人格化的形象在無形中向用戶傳遞出一種前進(jìn)向上的能量。