最近對(duì)國(guó)內(nèi)外各種資訊文章的閱讀和最新優(yōu)秀產(chǎn)品的體驗(yàn),梳理下今年的UI設(shè)計(jì)的趨勢(shì),希望在接下來(lái)的設(shè)計(jì)工作中,理性的前提下又不失創(chuàng)新。
1.半扁平化的設(shè)計(jì)
在過(guò)去的兩年左右,扁平化無(wú)疑是討論最多、最火的設(shè)計(jì)趨勢(shì)。但設(shè)計(jì)趨勢(shì)往往受到媒體,技術(shù),和實(shí)用性的影響,一般都以緩慢漸進(jìn)的方式滲透在我們的設(shè)計(jì)中,周期在1-2年之間。目前已經(jīng)有很多設(shè)計(jì)師對(duì)它進(jìn)行細(xì)微改進(jìn),形成了一個(gè)新的設(shè)計(jì)趨勢(shì)-半扁平設(shè)計(jì)。
半扁平化設(shè)計(jì)說(shuō)直白點(diǎn),其實(shí)就是結(jié)合了material design和flat design兩種風(fēng)格的處理手法。使簡(jiǎn)潔的設(shè)計(jì)上多一些空間感,包括懸浮的按鈕和卡片的設(shè)計(jì)。按照Wired的話來(lái)說(shuō),那就是讓像素具備海拔高度,這樣子的話,系統(tǒng)的不同層面的元素,都是有原則、可預(yù)測(cè)的,不讓用戶感到無(wú)所適從。
下面是一些國(guó)外的設(shè)計(jì)案例,(可以點(diǎn)擊看大圖細(xì)節(jié))。
從細(xì)節(jié)上來(lái)看,頂部的導(dǎo)航條是通過(guò)淡淡的投影來(lái)與背景區(qū)分,而不是是常見(jiàn)于ios設(shè)計(jì)中的1px的灰色的線條。包括更有空間感的卡片的處理,在保證細(xì)節(jié)的時(shí)候,又不會(huì)由于增加了投影給用戶帶來(lái)視覺(jué)干擾,反而頁(yè)面更有層次感。
可能有的設(shè)計(jì)師會(huì)說(shuō),這些都是國(guó)外的效果圖!:angry:而且英文的很容易做出高大上的效果??!:angry:要我我也可以!:angry:但是自己做的產(chǎn)品或者說(shuō)國(guó)內(nèi)的設(shè)計(jì)不太好做出這樣的啊 :angry:ba la ba la~
兄弟!不要為自己的懶惰找借口了,例子來(lái)了! hiahiahia。 下面是最近常用的一些國(guó)內(nèi)app,半扁平化的設(shè)計(jì)已經(jīng)在他們產(chǎn)品上有了體現(xiàn)。(以下APP分別是:字里行間,微信閱讀,輕芒雜志,滴滴出行,微信閱讀)
2.更多三維呈現(xiàn)
在以前,UI或運(yùn)營(yíng)設(shè)計(jì)中常見(jiàn)的都是二維的處理手法。元素以平面的方式展示給我們,但是今年會(huì)慢慢趨于更多3D的效果,使內(nèi)容更加有縱深感從而也提升了設(shè)計(jì)的趣味性,尤其是運(yùn)用在運(yùn)營(yíng)設(shè)計(jì)上會(huì)讓畫(huà)面顯得更加豐富。
360做的搶票軟件的的視覺(jué)設(shè)計(jì)給我印象很深,采用的是粘土塑形的方式塑造的立體形象。我認(rèn)為這種對(duì)設(shè)計(jì)的創(chuàng)新手法,很值得設(shè)計(jì)師們學(xué)習(xí)的。做設(shè)計(jì)真的不僅僅局限于每天對(duì)著屏幕挪動(dòng)著鼠標(biāo),反而對(duì)生活的熱情和動(dòng)手的能力會(huì)讓自己的設(shè)計(jì)脫穎而出。
3.幾何圖形的點(diǎn)綴
從2016年年底就有一些設(shè)計(jì)作品或者設(shè)計(jì)包裝采用不同顏色的幾何圖形進(jìn)行點(diǎn)綴。它不是作為設(shè)計(jì)內(nèi)容的主角,而是起到渲染畫(huà)面氛圍的作用。用色一般鮮亮大膽,會(huì)給人視覺(jué)上的沖擊,多用于運(yùn)營(yíng)設(shè)計(jì)。
下面是國(guó)內(nèi)產(chǎn)品運(yùn)營(yíng)設(shè)計(jì)實(shí)用幾何形的案例(所以我都找了國(guó)內(nèi)的案例,專治各種找借口說(shuō)只能用英文才好出效果):
4.漸變色的運(yùn)用
漸變色的運(yùn)用范圍很廣,它可以當(dāng)作背景使用,也可以在logo或者按鈕上使用。今年的漸變不再是像擬物化時(shí)代為了還原物體本身的空間所做的處理。這里的漸變多為大撞色的使用,為了營(yíng)造氛圍和產(chǎn)品氣質(zhì)使用。
漸變色的處理在logo或者按鈕上的運(yùn)用:
5.大標(biāo)題,大間距的處理
預(yù)測(cè)今年將會(huì)有越來(lái)越多優(yōu)秀的產(chǎn)品跳脫出系統(tǒng)本身規(guī)范的束縛,開(kāi)始更大膽的設(shè)計(jì)。不在局限于本身規(guī)范里最大字號(hào)不能超過(guò)多少px,間距最好在稍稍px之內(nèi)等等...而是針對(duì)不同場(chǎng)景,不同用戶群體,不同的內(nèi)容去特殊處理。
所以出現(xiàn)了目前更多大標(biāo)題大間距大量留白的設(shè)計(jì)作品。其實(shí)像這種處理手法有點(diǎn)類似幾年前微軟的Metro Design,只是現(xiàn)在很多優(yōu)秀設(shè)計(jì)師都能把不同的設(shè)計(jì)語(yǔ)言靈活的去運(yùn)用,而不僅限于某個(gè)系統(tǒng)平臺(tái)。
下面是國(guó)內(nèi)一些APP設(shè)計(jì)實(shí)例(依次是:輕芒雜志,airbnb,ofo,VUE,字里行間)::
總結(jié)
我們需要了解趨勢(shì),預(yù)判未來(lái),接受創(chuàng)新。但并不需要盲目追隨趨勢(shì)。不能為了設(shè)計(jì)而設(shè)計(jì)。在形式服從內(nèi)容的今天,只能說(shuō)哪種設(shè)計(jì)風(fēng)格更適合自己的產(chǎn)品。
設(shè)計(jì)趨勢(shì)只是設(shè)計(jì)工作中小小的一部分,更重要的是我們?nèi)绾巫龅桨盐蘸米约寒a(chǎn)品需求的情況下把這種優(yōu)秀的設(shè)計(jì)語(yǔ)言巧妙的加進(jìn)去,做到符合產(chǎn)品定位,節(jié)約開(kāi)發(fā)成本和提升商業(yè)價(jià)值的效果,從而給產(chǎn)品帶來(lái)更多的利益。