UI場景中如何應(yīng)用插畫?

2024-01-19    分類: 網(wǎng)站建設(shè)

隨著 UI 設(shè)計(jì)對情感化和差異化的追逐,插畫已經(jīng)逐步影響了 UI 設(shè)計(jì)趨勢。插畫已經(jīng)不局限于運(yùn)營視覺范圍的運(yùn)用,在 UI 場景中也逐漸普及,作為背景視覺感強(qiáng)化、圖標(biāo)風(fēng)格差異體現(xiàn)、功能或者業(yè)務(wù)配圖強(qiáng)化等等。

呈現(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ì)中也會呈現(xiàn)風(fēng)格多樣的效果,插畫也比較容易統(tǒng)一視覺規(guī)范,很多成熟的設(shè)計(jì)團(tuán)隊(duì)都會制定插畫規(guī)范系統(tǒng),滿足項(xiàng)目各類場景的運(yùn)用。

作為視覺設(shè)計(jì)師來說掌握插畫的能力已經(jīng)成為基本崗位需求,很多公司對于 UI 設(shè)計(jì)師也有同樣要求,這也是提高產(chǎn)品設(shè)計(jì)視覺感的一個(gè)方向。

突出圖標(biāo)設(shè)計(jì)的風(fēng)格差異 ,隨著用戶對于感官體驗(yàn)的升級,圖標(biāo)風(fēng)格特征的差異化體驗(yàn)至關(guān)重要,而插畫風(fēng)格的融入可以提升圖標(biāo)設(shè)計(jì)的特征感。

插畫風(fēng)格運(yùn)用到圖標(biāo)設(shè)計(jì)中,需要做簡化處理,可以是插畫的局部元素或者簡化后的小場景插畫。風(fēng)格多樣的插畫風(fēng)格也會延續(xù)到圖標(biāo)中,不僅可以使得圖標(biāo)具備差異化的視覺效果,也能烘托出整體設(shè)計(jì)的質(zhì)量。

強(qiáng)化區(qū)域背景的風(fēng)格感, 插畫可以作為欄目區(qū)域背景來使用,以此增加該欄目的風(fēng)格感和視覺感。相較于攝影圖片來說,插畫具備風(fēng)格特征,可控性較強(qiáng),能夠滿足更多氛圍感的營造。

突出個(gè)人中心的情感化, 個(gè)人中心的設(shè)計(jì)之前大部分采用單調(diào)的白色或者品牌色作為背景,近些年一些產(chǎn)品開始使用插畫背景來增強(qiáng)情感化設(shè)計(jì)。有的產(chǎn)品還根據(jù)天氣變化、節(jié)日主題、白天/夜間等場景設(shè)計(jì)不同的插畫風(fēng)格,帶來的視覺感較強(qiáng),也能吸引用戶的關(guān)注度,提高用戶對產(chǎn)品的感官體驗(yàn)。

強(qiáng)化空狀態(tài)的情感化設(shè)計(jì) ,空狀態(tài)由單純的文字提示演變到圖文結(jié)合,感官層面越來越被重視。利用圖形結(jié)合、IP 形象結(jié)合、小場景插畫結(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)秀案例??梢允褂萌珗鼍安瀹嬜鳛楸尘霸O(shè)計(jì),也可以使用小場景插畫作為局部強(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)一,對于設(shè)計(jì)師來說把控性很強(qiáng)。

增強(qiáng)專題活動(dòng)頭部視覺感 ,插畫形式運(yùn)用到專題頁設(shè)計(jì)中案例非常多,相較于合成圖片來說,插畫的風(fēng)格感和駕馭度更靈活。插畫形式帶來的情感化體驗(yàn)更佳,通常被運(yùn)用到專題頁頭部區(qū)域來增強(qiáng)視覺感,也有延伸到整個(gè)背景層設(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)行插畫元素裝飾,對于插畫基礎(chǔ)薄弱的設(shè)計(jì)師更易上手。

插畫形式的閃屏設(shè)計(jì) ,閃屏和啟動(dòng)頁采用插畫的形式也是可取的,啟動(dòng)頁設(shè)計(jì)通常和引導(dǎo)頁表現(xiàn)類似,不過運(yùn)用品牌展示的相對多一些。

插畫作為設(shè)計(jì)師需要掌握的基礎(chǔ)技能,被逐步運(yùn)用到各類設(shè)計(jì)場景中,也影響了 UI 設(shè)計(jì)的趨勢走向。隨著產(chǎn)品設(shè)計(jì)感官體驗(yàn)的不斷升級,風(fēng)格化和差異化的設(shè)計(jì)才能滿足更多用戶的感官需求,而風(fēng)格多樣的插畫形式首當(dāng)其沖。

網(wǎng)頁名稱:UI場景中如何應(yīng)用插畫?
分享地址:http://www.muchs.cn/news35/314435.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、云服務(wù)器、響應(yīng)式網(wǎng)站、網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)