近年來,Ul設(shè)計(jì)行業(yè)蓬勃發(fā)展,圖標(biāo)設(shè)計(jì)風(fēng)格更是呈現(xiàn)出多元化的特點(diǎn),各種新穎、創(chuàng)意的設(shè)計(jì)風(fēng)格層出不窮。圖標(biāo)樣式早已從潺潺溪水變成汪洋大海,通過系統(tǒng)歸納和整理各類常用的面性圖標(biāo)設(shè)計(jì)類型與風(fēng)格,我們構(gòu)建了一套體系化的記憶框架,使得在日常工作中能夠迅速且準(zhǔn)確地作出圖標(biāo)樣式的決策,從而有效提升設(shè)計(jì)效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標(biāo)風(fēng)格,線性圖標(biāo)樣式組成一般過于簡單,在此不做討論。
本文在探討圖標(biāo)的分類思維時(shí),巧妙地運(yùn)用了層級理念,
并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標(biāo)。這種分類思維不僅使圖標(biāo)的辨識變得更為便捷,還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法,我們得以更清晰地理解圖標(biāo)的本質(zhì)與特點(diǎn),進(jìn)一步提升我們對常用圖標(biāo)的認(rèn)知水平和應(yīng)用能力。
整體風(fēng)格簡潔大方。由于沒有其他質(zhì)感元素的加入,所以對圖形要求更加需要簡約而精致
主副圖形對比色搭配,整體風(fēng)格既簡約又具備顏色豐富度
·漸變方向從上到下,這種漸變方向較為傳統(tǒng),呈現(xiàn)輕輕鼓起的圓潤形態(tài)
·漸變方向從下到上,為圖標(biāo)賦予了輕盈而靈動的視覺感受
·漸變方向從左到右,融合了漸變圓弧形成的高光形狀,形式較新穎
多層級圖標(biāo)的設(shè)計(jì),主要依據(jù)其是否具備穿透特性進(jìn)行劃分,即不穿透與穿透兩大維度。在實(shí)際操作中,多數(shù)情況下,我們會借助不同層級的設(shè)計(jì)手法來塑造圖標(biāo)的層次感,而這其中往往融入了微妙的質(zhì)感處理。因此,我們并不以扁平與質(zhì)感作為多層級圖標(biāo)的主要劃分標(biāo)準(zhǔn)。
·色彩搭配鄰近色,和諧統(tǒng)一,主圖形內(nèi)發(fā)光質(zhì)感,邊緣有1像素高光和副圖形隔開
·色彩搭配鄰近色,采用強(qiáng)質(zhì)感,多層級之間巧妙運(yùn)用投影進(jìn)行區(qū)分,使得每一層都清晰分明,互相映襯。主圖形的質(zhì)感通過漸變、內(nèi)陰影或內(nèi)發(fā)光等手法進(jìn)行精細(xì)刻畫,增強(qiáng)了視覺沖擊力。
·采用強(qiáng)質(zhì)感,多層級,更貼近真實(shí)物體的質(zhì)感和光影效果。用素描的三大調(diào)五大面思維,讓光影細(xì)節(jié)拉滿,通常需要手動加光,無法單純用軟件自帶漸變
主圖形透出底部副圖形形狀,副圖形被遮擋形狀模糊處理,主圖形通常邊緣有1像素高光,呈現(xiàn)出精致而獨(dú)特的分隔效果。
為減輕記憶壓力,我們直接沿用先前提出的無底板圖標(biāo)風(fēng)格分類方案。在此基礎(chǔ)上,我們進(jìn)一步引入一個底板構(gòu)成元素,以此作為額外的區(qū)分點(diǎn)。因此,整個分類維度與異形圖標(biāo)分類方案保持高度一致,使得用戶能夠更輕松地進(jìn)行識別和記憶。分類維度不再贅述,直接展示案例
·底板漸變+投影,漸變方向從下到上,主圖形漸變方向從下到上,和底板統(tǒng)一
·底板漸變+投影,漸變方向從下到上,主圖形漸變方向上到下,和底板相反
·底板漸變,漸變方向從右下到左上,主圖形漸變方向上到下,并帶有較強(qiáng)的投影
·底板扁平,主圖形和副圖形之間投影區(qū)分,副圖形降低透明度
·底板漸變,主圖形漸變方向根據(jù)物體造型來定制