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