一、呈現(xiàn)獨(dú)具一格的 Banner 設(shè)計(jì)
插畫運(yùn)用到 Banner 設(shè)計(jì)中非常普及，不僅可以帶來個(gè)性化的視覺風(fēng)格，也可以避免運(yùn)用圖片帶來的版權(quán)風(fēng)險(xiǎn)。因?yàn)椴瀹嬘兄S富多樣的風(fēng)格，運(yùn)用到設(shè)計(jì)中也會(huì)呈現(xiàn)風(fēng)格多樣的效果，插畫也比較容易統(tǒng)一視覺規(guī)范，很多成熟的設(shè)計(jì)團(tuán)隊(duì)都會(huì)制定插畫規(guī)范系統(tǒng)，滿足項(xiàng)目各類場(chǎng)景的運(yùn)用。
作為視覺設(shè)計(jì)師來說掌握插畫的能力已經(jīng)成為基本崗位需求，很多公司對(duì)于 UI 設(shè)計(jì)師也有同樣要求，這也是提高產(chǎn)品設(shè)計(jì)視覺感的一個(gè)方向。
二、突出圖標(biāo)設(shè)計(jì)的風(fēng)格差異
隨著用戶對(duì)于感官體驗(yàn)的升級(jí)，圖標(biāo)風(fēng)格特征的差異化體驗(yàn)至關(guān)重要，而插畫風(fēng)格的融入可以提升圖標(biāo)設(shè)計(jì)的特征感。
插畫風(fēng)格運(yùn)用到圖標(biāo)設(shè)計(jì)中，需要做簡(jiǎn)化處理，可以是插畫的局部元素或者簡(jiǎn)化后的小場(chǎng)景插畫。風(fēng)格多樣的插畫風(fēng)格也會(huì)延續(xù)到圖標(biāo)中，不僅可以使得圖標(biāo)具備差異化的視覺效果，也能烘托出整體設(shè)計(jì)的質(zhì)量。
三、強(qiáng)化區(qū)域背景的風(fēng)格感
插畫可以作為欄目區(qū)域背景來使用，以此增加該欄目的風(fēng)格感和視覺感。相較于攝影圖片來說，插畫具備風(fēng)格特征，可控性較強(qiáng)，能夠滿足更多氛圍感的營(yíng)造。
四、突出個(gè)人中心的情感化
個(gè)人中心的設(shè)計(jì)之前大部分采用單調(diào)的白色或者品牌色作為背景，近些年一些產(chǎn)品開始使用插畫背景來增強(qiáng)情感化設(shè)計(jì)。有的產(chǎn)品還根據(jù)天氣變化、節(jié)日主題、白天/夜間等場(chǎng)景設(shè)計(jì)不同的插畫風(fēng)格，帶來的視覺感較強(qiáng)，也能吸引用戶的關(guān)注度，提高用戶對(duì)產(chǎn)品的感官體驗(yàn)。
五、強(qiáng)化空狀態(tài)的情感化設(shè)計(jì)
空狀態(tài)由單純的文字提示演變到圖文結(jié)合，感官層面越來越被重視。利用圖形結(jié)合、IP 形象結(jié)合、小場(chǎng)景插畫結(jié)合等，還有結(jié)合動(dòng)效設(shè)計(jì)的案例，帶來的設(shè)計(jì)體驗(yàn)感也是非常不錯(cuò)的。
六、瓷片區(qū)的視覺感強(qiáng)化
插畫風(fēng)格被運(yùn)用到視覺表現(xiàn)層面案例較多，特別是在瓷片區(qū)的發(fā)揮，呈現(xiàn)出了風(fēng)格多樣的優(yōu)秀案例?？梢允褂萌珗?chǎng)景插畫作為背景設(shè)計(jì)，也可以使用小場(chǎng)景插畫作為局部強(qiáng)化，還有使用部分插畫元素作為點(diǎn)綴設(shè)計(jì)，視覺表現(xiàn)力豐富多樣。
七、活動(dòng)封面設(shè)計(jì)體現(xiàn)統(tǒng)一感
將插畫形式作為活動(dòng)或者服務(wù)欄目的封面設(shè)計(jì)，相較于其他形式來說風(fēng)格統(tǒng)一性更強(qiáng)，也能更好的進(jìn)行設(shè)計(jì)延展。就算使用不同風(fēng)格的插畫來進(jìn)行封面設(shè)計(jì)，只要在配色風(fēng)格上面把控好，也能做到有效的視覺感統(tǒng)一，對(duì)于設(shè)計(jì)師來說把控性很強(qiáng)。
八、增強(qiáng)專題活動(dòng)頭部視覺感
插畫形式運(yùn)用到專題頁設(shè)計(jì)中案例非常多，相較于合成圖片來說，插畫的風(fēng)格感和駕馭度更靈活。插畫形式帶來的情感化體驗(yàn)更佳，通常被運(yùn)用到專題頁頭部區(qū)域來增強(qiáng)視覺感，也有延伸到整個(gè)背景層設(shè)計(jì)中的案例。
根據(jù)特定活動(dòng)主題創(chuàng)作插畫對(duì)于設(shè)計(jì)師來說更容易，找到符合主題的攝影圖片是很難的，自己拍攝成本又會(huì)比較大，插畫形式是最經(jīng)濟(jì)實(shí)用的設(shè)計(jì)解決方案。
九、插畫形式提高欄目品質(zhì)感
插畫形式可以作為一些代表成就感的配圖設(shè)計(jì)，以此來提高該欄目的品質(zhì)感。比如在打卡點(diǎn)亮城市成就的設(shè)計(jì)中，不同城市的郵票采用插畫形式來表達(dá)，不僅可以展示出各城市的風(fēng)格，也能做到視覺風(fēng)格的統(tǒng)一。精美的插畫提高了品質(zhì)感，吸引了用戶的參與度，帶來的感官體驗(yàn)也是非常棒的。
十、體現(xiàn)主題化的風(fēng)格感
在主界面的設(shè)計(jì)中，不僅要體現(xiàn)出功能的操作體驗(yàn)，也要通過視覺的強(qiáng)化來吸引用戶的關(guān)注度。一些產(chǎn)品在主界面設(shè)計(jì)中以插畫作為背景來強(qiáng)化，結(jié)合動(dòng)態(tài)的表達(dá)趣味性更佳，帶來的關(guān)注度也是不錯(cuò)的。插畫形式結(jié)合到功能模塊中，帶給用戶情感共鳴和操作的體驗(yàn)度。
十一、插畫形式的引導(dǎo)頁設(shè)計(jì)
插畫被運(yùn)用到引導(dǎo)頁設(shè)計(jì)中是相當(dāng)普及的，也是非常有利于進(jìn)行設(shè)計(jì)發(fā)揮的。插畫元素表達(dá)的可控性可以滿足引導(dǎo)頁主題創(chuàng)意的需求，通常以輪廓束縛為主，滿屏插畫較少?；诮裹c(diǎn)和輪廓造型進(jìn)行插畫元素裝飾，對(duì)于插畫基礎(chǔ)薄弱的設(shè)計(jì)師更易上手。
十二、插畫形式的閃屏設(shè)計(jì)
閃屏和啟動(dòng)頁采用插畫的形式也是可取的，啟動(dòng)頁設(shè)計(jì)通常和引導(dǎo)頁表現(xiàn)類似，不過運(yùn)用品牌展示的相對(duì)多一些。
閃屏分為廣告形式和主題展示形式，閃屏廣告形式比較多，插畫結(jié)合也是在廣告活動(dòng)中的發(fā)揮。一些節(jié)慶主題和特殊紀(jì)念日活動(dòng)，也會(huì)以精美插畫的形式表達(dá)，更容易表達(dá)主題和與用戶產(chǎn)生共鳴感。
小結(jié)
插畫作為設(shè)計(jì)師需要掌握的基礎(chǔ)技能，被逐步運(yùn)用到各類設(shè)計(jì)場(chǎng)景中，也影響了 UI 設(shè)計(jì)的趨勢(shì)走向。隨著產(chǎn)品設(shè)計(jì)感官體驗(yàn)的不斷升級(jí)，風(fēng)格化和差異化的設(shè)計(jì)才能滿足更多用戶的感官需求，而風(fēng)格多樣的插畫形式首當(dāng)其沖。
希望這些插畫結(jié)合 UI 場(chǎng)景的案例可以作為拋磚引玉，讓大家重視插畫在 UI 設(shè)計(jì)中的表現(xiàn)力，不斷加強(qiáng)并掌握插畫設(shè)計(jì)的能力。
原文地址：黑馬家族（公眾號(hào)）
作者：黑馬青年
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》插畫在 UI 場(chǎng)景中的趨勢(shì)化探索
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司