News
新聞中(zhōng)心

淺談插畫在高校網站中(zhōng)的應用價值

2019-11-29
摘要:近兩年來,通元軟件在網站用圖藝術創意方面先後爲北(běi)京大(dà)學,北(běi)京體(tǐ)育大(dà)學、北(běi)京化工(gōng)大(dà)學創作過反響頗高的手繪插畫作品,爲高校網站配圖帶來了畫龍點睛之筆。衆多高校的手繪作品也将在近期陸續發布。

2019年10月,随着頤和園官網上線,标志(zhì)着頤和園擁有了全新的網站形象,在文化建園的征程中(zhōng)又(yòu)邁出了重要一(yī)步。此次網站升級改版,除了頁面樣式和功能得到了進一(yī)步提升,最精彩的地方要屬頤和園的手繪地圖。采用手繪插畫藝術形式爲頤和園創作全景遊覽地圖,畫面中(zhōng)的每一(yī)棟建築,每一(yī)條道路,每一(yī)處景觀,每一(yī)個細節都完全依照實景繪制,保證最大(dà)限度的還原真實場景,手繪地圖作品一(yī)經推出,獲得頤和園專家的高度認可。

頤和園官方網站.jpg

777b79bb4ded4d27aea157ebcc4dd15d.jpg

通元軟件有幸能爲中(zhōng)國古代皇家園林,世界文化遺産頤和園進行官網升級改版和地圖繪制,說明我(wǒ)(wǒ)們的設計理念和服務體(tǐ)系是得到了頤和園專家們認可的,同時也标志(zhì)着通元設計團隊在圖片藝術處理領域再上一(yī)個新台階。

近兩年來,通元軟件在網站用圖藝術創意方面先後爲北(běi)京大(dà)學,北(běi)京體(tǐ)育大(dà)學、北(běi)京化工(gōng)大(dà)學創作過反響頗高的手繪插畫作品,爲高校網站配圖帶來了畫龍點睛之筆。衆多高校的手繪作品也将在近期陸續發布。

QQ圖片20190413085642

QQ圖片20190413085449

QQ截圖20191126153923

面對越來越多的高校對網站配圖的重視,特别是插畫藝術,對提升網站品質、抒寫網站情懷、傳播校園文化,打造高校品牌存在不可小(xiǎo)視的作用。通過通元獨特的視角和常年征戰在第一(yī)線的經驗,整理了一(yī)些高校常用的圖片藝術形式和理論知(zhī)識供大(dà)家學習參考。

一(yī)、插畫越來越受高校的青睐 

在“雙一(yī)流”建設的大(dà)背景下(xià),門戶網站作爲高校對外(wài)宣傳展示的一(yī)張名片,越來越重視品牌和文化建設,特别是在頁面設計和視覺表達上,越來越多的高校,開(kāi)始注重用戶體(tǐ)驗和校園特色的提煉,網站視覺和品牌文化已經成爲各大(dà)高校網站升級改版的硬性指标。

目前大(dà)部分(fēn)高校的門戶網站具備完善的信息浏覽和服務功能,但在信息呈現、視覺表現和文化傳達上缺乏特色和亮點。如今的高校網站,早已脫離(lí)單純追求功能和全面展示信息的時代,網站界面不僅要考慮如何把有效的信息放(fàng)在合适的位置上,還要考慮到浏覽者是如何感知(zhī)網站界面上的各種元素帶來的文化熏陶和視覺體(tǐ)驗。

c580f9afa5194f18b08986302af6518e.jpg

圖形和文字相比,更加形象具體(tǐ),更能成爲高校文化特色的傳達載體(tǐ)。網站給用戶的第一(yī)印象往往是從視覺開(kāi)始的,在現代網頁設計中(zhōng),由于信息量的激增,人們更願意從圖片獲取所需的信息。圖片能夠打破文字較爲呆闆的視覺效果,豐富網頁的視覺表現。由于過去(qù)WEB技術發展原因,網頁設計中(zhōng)運用文化圖形的情況并不多見,随着技術和品牌意識的提高,信息圖形化越來越被高校所重視。

通過信息圖形化,使得數據變得更爲容易理解,更加直觀清晰,并且信息圖形化使得信息更具有針對性和條理性,即便是枯燥以及專業性強的信息也會變得更爲輕松。采用圖形方式對用戶進行引導,能很好地消除語言文字在描述上存在的生(shēng)硬、抽象問題,這樣的設計以用戶爲中(zhōng)心,體(tǐ)現的是一(yī)所高校的服務意識和文化價值,擁有較強的人文氣息。

信息圖形化藝術價值最高的就屬插畫,插畫作爲一(yī)種創新的藝術形式可以給網站視覺進行填補,增添感染力,将具體(tǐ)和抽象相互交替,帶給用戶視覺上的沖擊,同時還能夠透過畫面看到更深層次的文化内涵,插畫的帶入感強,将用戶的心緊緊拉近,帶來更強畫面感的愉悅享受。插畫形式豐富多彩,包含圖标、圖形、圖片、圖像等。它與傳統的電腦圖形不一(yī)樣。它可以給原本平淡無奇的設計注入新的活力。

721ed1de1d8d4e8eb9b090e081552373.jpg

米蘭大(dà)學官網

ee95fff36a9243e294197ed9a8ae9679.jpg

東京大(dà)學

二、插畫在高校網站中(zhōng)的應用領域

插畫在高校網站中(zhōng)的運用,可以說相當廣泛,大(dà)量應用在不同的場景。插畫表現力更精準、更有文化特色、帶入感更強、同時也更有溫度,在高校網站中(zhōng)常常運用在這些地方:

  專題網主題圖

  Banner大(dà)圖

  校園手繪地圖

  建築物(wù)手繪圖

  吉祥物(wù)形象

  新用戶引導教程

  迎新網入校流程引導

  内網系統登錄頁

  信息類指示圖

插畫本身的藝術性很強,它連接了設計、連接了師生(shēng)、連接了生(shēng)活、連接了文化、連接了曆史,它作爲内容的呈現方式,帶着鮮明的藝術個性。

三、高校網站運用插畫的好處

1、用于文化創作

插畫是一(yī)種多樣化的視覺風格,可以完全按照你的需要使用。高校中(zhōng)很受歡迎的手寫字體(tǐ),以簡約而現代感的設計脫穎而出。

90ab284cf4df471c97b8d8af06a708ac.jpg

2、用于傳遞信息(高校迎新網)

有時候我(wǒ)(wǒ)們習慣用文字去(qù)描述信息,即使你的文案寫的再好,用戶往往都有視覺疲勞。如果你想創建一(yī)個時尚、簡潔的迎新網,那麽手繪引導圖将會是一(yī)個非常不錯的選擇。帶插圖的入學流程往往更能引起新生(shēng)的興趣,更有利于用戶感知(zhī)信息。

31148b4d07844091a0d5d96223ae00da.png

3、給浏覽者帶來愉悅感(可與高校吉祥物(wù)搭配)

愉悅感,是指用戶在浏覽網站所獲取到的愉悅的信息内容。可能是一(yī)段溫暖的文字,可能是一(yī)張幽默的插圖,而網站引入具有高校文化符号的插圖往往就能給用戶帶來愉悅感,使用戶心情更舒暢,眼前一(yī)亮。

647663955ad64d62b1a2463522b048c5.jpg

4、傳達特有的校園文化

插畫的運用不光能給用戶帶來愉悅感,而且還有着獨特的文化底蘊。很多高校都希望網站能給用戶傳達獨特的文化魅力和校園特色,很明顯插畫就能讓用戶對高校建立比良好的忠誠度。

ac7843e119154ff2a5e51ce556ce9936.jpg

5、讓網站與衆不同

插畫的展現方式非常多,完全可以根據高校定制,現在網站設計越來越流行明亮鮮豔的色彩搭配,如果采用傳統的攝影圖片作爲配圖或者背景,在搭配上存在一(yī)定難度。而手繪圖可以運用豐富的配色,輕松融入這種明豔的色調風格中(zhōng)去(qù)。

46cdadd8af7741ea9015424cf9b1fb82.jpg

6. 感染力強,場景感強

人是情感動物(wù),幾乎每個決定都是在情感和情緒的驅動下(xià)完成的。而在諸多設計中(zhōng),插畫在撬動用戶情緒這一(yī)點上,有着無與倫比的效用——從線條、色彩到面部表情和曲線和動效,都在竭盡全力地爲你闡述故事,營造氛圍,将你拉到故事和場景當中(zhōng)去(qù)。

timg (1).jpg

7、更适宜呈現故事

故事是最令人難忘的内容,劇情的走向和起承轉合會給人留下(xià)深刻的印象。而手繪插畫則以清晰的形象将文字和意象勾連起來,無論是在網頁、UI設計還是内容上,都有着足夠突出的體(tǐ)現。營造氛圍,渲染情緒,描摹環境,呈現角色,讓故事更加鮮活、易于理解。在内容制造上,有着難以替代的作用。

timg (19).jpg

8. 讓校園更有溫度(校園手繪建築,手繪地圖)

校園文化是一(yī)所大(dà)學的靈魂。校園裏的一(yī)山一(yī)水、一(yī)草一(yī)木,無不浸潤着濃郁的人文情愫。一(yī)棟以名人命名的建築,一(yī)條以名人命名的道路,一(yī)處以名人命名的地标,一(yī)座名人的雕像等等無不彰顯着大(dà)學的魅力和氣質。面對網站上生(shēng)冷的數字攝影圖片,即便拍攝水平再高,也無法通過一(yī)瞬間的定格禁锢住校園的美。建築物(wù)是有溫度的,每一(yī)個角落的景觀都曾飾演過不同的故事。精心設計的插畫在美學和風格上更加紮實,帶來的情感大(dà)大(dà)超越實景照片所提供的價值。運用手繪插畫去(qù)描摹環境,可以讓校園變得更有溫度,更有情懷。

3dc69c8ef034409782f98bb7bc97184f.jpg

e7731a50e3764c158f0b97247379900b.jpg

四、高校常用的插畫風格

1、矢量插圖風格

矢量插圖是高校網站設計中(zhōng)運用最廣的一(yī)種風格,此種插圖是在矢量軟件上進行電腦手繪,圖片進行放(fàng)大(dà)、縮小(xiǎo)都不會失真,精準性比較高,繪制基本單位多以線條和色塊爲主。矢量插圖最大(dà)的優勢是,色彩明亮、親和力強,大(dà)衆接受度高。

5c1eee13063d4d1aa88ae9f8f7519900.jpg

北(běi)京大(dà)學

c92915ba4996428c917a9d892f72b439.png

清華大(dà)學

4733abcedee94e6e8149651ff989ed1f.jpg

江蘇大(dà)學

2、線描風格

線描是運用線的輕重、濃淡、粗細、虛實、長短等筆法表現物(wù)象的體(tǐ)積、形态、質感、量感、運動感的一(yī)種方法。在中(zhōng)國繪畫中(zhōng),線描既是具有獨立藝術價值的畫種(白(bái)描),不僅可以勾畫靜态的輪廓,還可以表現動态的韻律。用線和空白(bái)還可以譜寫出一(yī)支支和諧流動的線的協奏曲。高校一(yī)般表現文化和意境之處常常采用這種風格。

b308ae61643a48e2b080ca3c83bda7a7.jpg

早稻田大(dà)學

570ba0e00a3644b5b39cf30b3f776aa8.jpg

新加坡國立大(dà)學

788e530756e6440fb75513ef7e46429e.png

北(běi)京大(dà)學

3、寫實風格

筆觸、紙(zhǐ)紋,這些傳統的學院派繪畫所帶來某種底蘊深厚的氛圍,能結合網頁自身的特點,傳遞出品牌的價值。尤其表現了一(yī)種“人爲”的過程,不僅從視覺上還從觸覺上激發觀者的想象。這一(yī)類風格往往比較寫實,細節也相對豐富。

C:\Users\HYP\Desktop\頤和園\QQ截圖20191128120943.jpgQQ截圖20191128120943

C:\Users\HYP\Desktop\頤和園\QQ截圖20191128120906.jpgQQ截圖20191128120906

4、水彩風格

采用水調和顔料作畫的一(yī)種繪畫方法,通常是在水彩專用紙(zhǐ)上作畫。畫面大(dà)多具有通透的視覺感覺,并且在繪畫過程中(zhōng)水的流動與顔料的結合會産生(shēng)一(yī)種豐富的層次感和色彩暈染感,給人一(yī)種淋漓酣暢、自然灑脫的意趣。

timg (14)

C:\Users\HYP\Desktop\頤和園\QQ截圖20191126145816.jpgQQ截圖20191126145816

5、畫影合成(3D實景渲染)

畫影合成是不常見的插畫形式,但是最近卻深受學生(shēng)的喜愛。畫影合成既有繪制的成分(fēn)也有攝影的部分(fēn),它融合了攝影的“真實”和手繪的“想象”,來源于生(shēng)活又(yòu)超越生(shēng)活之上實現畫面的融合跨越。

C:\Users\HYP\Desktop\頤和園\6100969b360c40ccbbfc29654f0f117c_th.jpg6100969b360c40ccbbfc29654f0f117c_th

在高校網頁設計中(zhōng)使用一(yī)些插畫,不僅能深層次的表達高校的文化氛圍,還能通過一(yī)張張精美的圖片巧妙的把人文關懷、服務意識、學生(shēng)生(shēng)活、建築特色、曆史積澱展現出來,提升網站頁面的格調,讓網站更有文化特色。使得人們在浏覽網站時眼前一(yī)亮,這樣的網站更貼近用戶,更有溫度,更有文化,也更具備品牌價值。

C:\Users\HYP\Desktop\頤和園\9a3233641b7c22929.png9a3233641b7c22929

通元軟件擁有專業的設計團隊,多個創意小(xiǎo)組協同工(gōng)作。配備視覺設計師、平面設計師、網頁設計師、UI設計師、商(shāng)業插畫師。積累了15年寶貴經驗,形成了一(yī)套專業規範的設計體(tǐ)系,持續的創新力與前沿新技術的洞察力,讓通遠軟件成爲高校網站品牌文化建設建言獻策的領跑者。


分(fēn)享到:
幫助中(zhōng)心
TOP