看看大神在UI中是怎么應(yīng)用插畫(huà)的?

?Villa finder app?by?Riko Sapto Dimo


第一眼看到覺(jué)得畫(huà)面非常的干凈、清晰。插畫(huà)應(yīng)用得很好,非常清新,插畫(huà)雖占據(jù)了很大空間,但是完全沒(méi)有影響內(nèi)容表達(dá);圖標(biāo)精致、表意明確,整個(gè)畫(huà)面?zhèn)鬟f給我的是這個(gè)產(chǎn)品上的房源一定都很干凈、有品質(zhì),什么元素都剛剛好,錦上添花的感覺(jué)~


信息布局上:

1.采用大留白與卡片式布局。應(yīng)用親密性原則將信息進(jìn)行整合、分類(lèi),應(yīng)用卡片進(jìn)行信息聚合;采用圖標(biāo)與文字結(jié)合的形式讓用戶(hù)更快的解讀信息,更快速的了解房源信息、易讀易懂。

2.采用微投影的形式凸出已收藏、評(píng)論功能。

3.通過(guò)色彩(黃色、綠色)來(lái)凸出重要信息,與強(qiáng)按鈕,吸引用戶(hù)點(diǎn)擊,引導(dǎo)用戶(hù)操作。


色彩:

界面整體顏色調(diào)性為綠色,給人自然、干凈、安靜的感受。畫(huà)面的色彩主要有兩種,主色調(diào)為低明度低飽和度的綠色,輔助色為黃色,文字的顏色也是帶點(diǎn)綠的黑色,讓整體畫(huà)面更加統(tǒng)一和諧。



圖標(biāo):

功能圖標(biāo)與裝飾性(信息輔助)圖標(biāo)都是采用線(xiàn)性圖標(biāo),線(xiàn)性圖標(biāo)更輕量化,符合產(chǎn)品的氣質(zhì)。裝飾性圖標(biāo)造型簡(jiǎn)單、表意明確,起到很好的傳遞信息的作用。已經(jīng)操作的按鈕是面性圖標(biāo),且浮動(dòng)到上層,是對(duì)用戶(hù)操作的反饋,讓用戶(hù)清楚的知道已經(jīng)收藏此房源。


控件:

按鈕采用小圓角式的控件。全圓角的控件會(huì)偏向娛樂(lè)化、可愛(ài)一些,全直角又偏嚴(yán)肅,選用這種小圓角的是比較合適的。按鈕的占比根據(jù)權(quán)重來(lái)體現(xiàn),在詳情頁(yè)里面,預(yù)定按鈕占據(jù)100%,能讓用戶(hù)更好的點(diǎn)擊,也能很好的引導(dǎo)用戶(hù)操作。


設(shè)計(jì)細(xì)節(jié):


1.插畫(huà),這個(gè)界面的插畫(huà)采用扁平的畫(huà)風(fēng),給人自然、安靜的感受,很好的傳遞了產(chǎn)品的氣質(zhì)與吸引用戶(hù)。

2.這兩個(gè)卡片的處理形式不一樣,第二張卡片給人有點(diǎn)肌理質(zhì)感的感覺(jué)(應(yīng)該是采用了綠色到白色的漸變),增加了卡片細(xì)節(jié)。


應(yīng)用場(chǎng)景:

可以借鑒到產(chǎn)品介紹、詳情展示頁(yè)面。也可以學(xué)習(xí)這中插畫(huà)+卡片的布局形式,應(yīng)用在一些產(chǎn)品流程相關(guān)的界面設(shè)計(jì)中。善于利用插畫(huà)去傳遞產(chǎn)品氣質(zhì)與信息,讓界面錦上添花。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容