通過色彩、圖形、風(fēng)格及一些上線APP進(jìn)行研究,從中提取一些適用于未來設(shè)計(jì)風(fēng)格,下面是圖標(biāo)設(shè)計(jì)的5大風(fēng)格,無論是設(shè)計(jì)風(fēng)格還是動(dòng)效,都值得我們學(xué)習(xí)。
01/
雙色漸變圖標(biāo)(Duoton Icon)
2019年漸變色流行了一整年,那么2020年雙色漸變設(shè)計(jì)依然持續(xù)是一個(gè)大趨勢(shì),因?yàn)閱我坏纳{(diào)無法滿足產(chǎn)品所需,雙色調(diào)圖標(biāo)的特點(diǎn)就是色彩對(duì)比鮮明,青春活力,這種相比單色調(diào)圖標(biāo),更適合應(yīng)用于一些主流偏年輕化產(chǎn)品,因此設(shè)計(jì)師還可以通過設(shè)計(jì)色彩打動(dòng)用戶,提升產(chǎn)品競(jìng)爭(zhēng)力,工具化產(chǎn)品也可以使用這樣有層次的圖標(biāo),不過使用時(shí),需要對(duì)色彩進(jìn)行克制使用。因此,如果您希望自己的設(shè)計(jì)界面脫穎而出,可以去大膽的使用雙色調(diào)色彩。
a. 雙色調(diào)多層質(zhì)感(彌散漸變,直投影,混合模式)
b. 雙色調(diào)混合模式疊加
02/
單色漸變透明圖標(biāo)(Alpha Icon)
Alpha icon 圖標(biāo)風(fēng)格最大特點(diǎn)就是單色帶透明漸變,通過弱透明度來制造視覺層次,如果是純白色,就會(huì)顯得圖標(biāo)平庸了一些,這種圖標(biāo)運(yùn)用范圍可以是界面中空?qǐng)鼍盎蛘咭恍╆P(guān)鍵模塊的主功能圖標(biāo)。
如下圖左側(cè)大卡片上面圖標(biāo)應(yīng)用思路。
03/
層疊式圖標(biāo)(Cascade Icon)
層疊式圖標(biāo),相比于純白色線條圖標(biāo),它帶來一種更舒適的質(zhì)感,其設(shè)計(jì)方法是通過穿插層疊的手法,將日常我們所見到的單一的線條圖標(biāo),變得更具有視覺層次感,當(dāng)然這種圖標(biāo)使用場(chǎng)景一般會(huì)是在功能說明性頁(yè)面,功能介紹等。
04/
品牌植入(Brand Icon)
品牌植入一直是非常大趨勢(shì),包括今年我們所看到兩大廠的品牌更新IBM和UBER等,都是將品牌核心符號(hào)植入設(shè)計(jì)中,我想這樣的思路在2020年將持續(xù)會(huì)是一個(gè)重要表達(dá)產(chǎn)品氣質(zhì)和記憶點(diǎn)手法打造思路之一,因?yàn)橛脩粢呀?jīng)很熟悉目前圖標(biāo)模式,如何能創(chuàng)新區(qū)別其他產(chǎn)品,那么融入品牌將是一個(gè)不錯(cuò)的選擇~品牌的融入技巧有高低之分,需要設(shè)計(jì)師去巧妙設(shè)計(jì)
圖標(biāo)與IBM字母基因某些地方保持一致性,點(diǎn)擊查看此視頻。
同樣多鄰國(guó)在前段時(shí)間更新品牌,并將其logo特征符號(hào)植入字體中。
05/
動(dòng)態(tài)圖標(biāo)(Motion Icon)
動(dòng)態(tài)圖標(biāo)是一個(gè)能提升產(chǎn)品體驗(yàn)的方法之一,也是微交互中的一種,它可以增加產(chǎn)品趣味性,F(xiàn)acebook在評(píng)論入口的表情動(dòng)畫就運(yùn)用了動(dòng)態(tài)圖標(biāo), 包括蘋果Apple Pay支付成功圖標(biāo)動(dòng)畫,Google Assistant智能助手,Messenger中的打招呼動(dòng)畫等等我們可以逐漸發(fā)現(xiàn)動(dòng)態(tài)圖標(biāo)比靜態(tài)圖標(biāo)的表達(dá)性更強(qiáng),更受到青睞,隨著硬件升級(jí),這種動(dòng)態(tài)圖標(biāo)運(yùn)用逐漸在越來越多場(chǎng)景可見到。
看看整個(gè)表情動(dòng)畫,點(diǎn)擊查看動(dòng)畫視頻。
看完是不是覺得特別有趣好玩。表情更接近我們生活。
再來個(gè)Apple pay支付動(dòng)態(tài)效果,點(diǎn)擊查看視頻演示。
其他類型圖標(biāo)動(dòng)畫
OutLook中的日歷圖標(biāo)動(dòng)畫
總結(jié)
在整個(gè)互聯(lián)網(wǎng)大趨勢(shì)下,研究圖標(biāo)將來的風(fēng)格走向,做好未雨綢繆,希望以此為開端,大家能發(fā)現(xiàn)更好的設(shè)計(jì)趨勢(shì)風(fēng)格,融入產(chǎn)品設(shè)計(jì)里面,當(dāng)然趨勢(shì)是好的,我們運(yùn)用時(shí)候更多需要從產(chǎn)品本身定位出發(fā),產(chǎn)品性格去合理運(yùn)用設(shè)計(jì)趨勢(shì),提升產(chǎn)品設(shè)計(jì)品質(zhì)。
作者:LoveXiaoTao,微信號(hào):UX-Talk

全部評(píng)論