光彩奪目的柔滑漸變APP界面
iOS7讓我們重新認(rèn)識(shí)了漸變效果,老實(shí)說,漸變是設(shè)計(jì)師手法中最簡單的裝飾之一。它有許多變化,既可以讓設(shè)計(jì)出彩,反過來也可以毀了設(shè)計(jì),關(guān)鍵就取決于色彩的選用和整體風(fēng)格。除此之外,和大多裝飾手段一樣,它也會(huì)隨著當(dāng)前潮流趨勢變化
近日的主流,是平滑溫和的霓虹色漸變,配合近乎發(fā)光的淺色文字和簡單易懂的字體,并通常伴隨著低透明度的半透明層。如此細(xì)膩的結(jié)合很自然地能給任何UI增加一分精致和微妙
我們這里不僅僅討論這種漸變樣式,它毫無疑問非常流行,我們也討論其他基礎(chǔ)且廣為流傳的漸變實(shí)現(xiàn)方法。其中包含的方法更多被用作一種差異化的手段,它的主要目標(biāo)是在某種特定視覺風(fēng)格中承載內(nèi)容
首先,我們來欣賞一些超凡脫俗、基于當(dāng)紅流行漸變風(fēng)格的APP界面
移動(dòng)APP中的漸變效果
我們開篇選用Michael Shanks華麗柔和、基于漸變的iOS7鎖屏界面設(shè)計(jì)。極簡的屏幕元素只包含必須的信息,通過優(yōu)雅的淺色文字實(shí)現(xiàn),精妙的陰影和半透明條作為強(qiáng)調(diào)
Tommy Borgen的Sense。設(shè)計(jì)師也采用了極簡的UI設(shè)計(jì)。界面看起來簡單卻相當(dāng)精美。中央輕微模糊的圓形輪廓漂亮地和其中微妙的細(xì)字體組合,與平滑的背景也搭配良好
Ross Popoff-Walker的個(gè)人站點(diǎn)Idea v1.1。設(shè)計(jì)師借鑒了破曉天空的漸變色,用非凡的潑濺手法來展現(xiàn)。背景為白色的圖形和文字提供了堅(jiān)實(shí)的底色,很好地突出強(qiáng)調(diào)了它們。大量的留白和淺灰純色頁頭頁尾(主要包含導(dǎo)航項(xiàng))漂亮地與主題結(jié)合
Yasser Achachi的界面設(shè)計(jì)看起來絕對驚艷且引人注目。奇妙的萬花筒色用在背景上,配合淺色文字、像素級優(yōu)化的小圖標(biāo)、半透明條和彩色色塊,巧妙地打造了一款相當(dāng)激動(dòng)人心的界面
Kyung Min Kim的Coloring Clock依靠熾熱的火焰色漸變背景,結(jié)合粗筆劃的文字組合和大量留白。精美天然的配色方案很自然地點(diǎn)綴了整個(gè)界面。你也可以定制自己喜歡的漸變主題,來給界面賦予一些個(gè)人色彩
chirag dave的iPhone App Instasave中,界面切換處用了一張精彩的放射狀漸變圖片,來作為側(cè)滑菜單的固定背景。設(shè)計(jì)師用背景圖中相對較淺的區(qū)域來強(qiáng)調(diào)導(dǎo)航,以精美小號(hào)字和纖細(xì)字體來表現(xiàn)
Vladimir的Beam Day概念時(shí)鐘設(shè)計(jì)。其中背景旨在清晰凸顯少數(shù)幾個(gè)圖形構(gòu)成元素。輪廓極細(xì)的圓環(huán)和纖細(xì)字體相互完美配合
Alex Patrascu的Aero Weather設(shè)計(jì)。其中干凈明亮的漸變,很自然地將視線吸引至包含大量信息的天氣預(yù)報(bào)上。淺色的非正式字體與背景完美結(jié)合,并使數(shù)據(jù)清晰易讀
Gaétan Pautler的iOS 7 快捷菜單設(shè)計(jì)。盡管設(shè)計(jì)師用的事實(shí)上不是傳統(tǒng)漸變,因?yàn)槟鞘且粡堄兄伾^渡的高度模糊的背景圖,即便如此,快捷菜單的背景有著難以察覺的垂直漸變,從藍(lán)色漸變至淡粉的奶油色
漸變效果作為強(qiáng)化的手段
作品集的這部分,是致力于將漸變效果用作強(qiáng)化手段的APP界面
Keyuri Bosmia的IndiaNIC App有著令人喜愛的彩虹格調(diào)。設(shè)計(jì)師巧妙地把菜單上色成鮮艷的色調(diào)來將每個(gè)菜單項(xiàng)清晰區(qū)分開。整體來看,這個(gè)概念設(shè)計(jì)看上去愉快、充滿活力
Andrus Valulis的SunFun App設(shè)計(jì)。相反地,這件UI作品基于更加平滑自然的漸變效果。鑒于這個(gè)app致力于展示日出日落相關(guān)數(shù)據(jù),設(shè)計(jì)師使用暖色來支撐整個(gè)主題風(fēng)格就不奇怪了
Frantisek Krivada的扁平樣式色輪設(shè)計(jì)。不同于之前的案例,這件UI作品采用了最終過渡至中性白的冷色調(diào)。所以這個(gè)界面看起來更加犀利、有力和嚴(yán)肅。帶曲線的功能圓環(huán)富有活力,增加了一分圓滑
Franz (Taptanium)的Haze Rays界面主題又是一件強(qiáng)烈依賴生脆清冷配色方案的概念設(shè)計(jì)。放射狀漸變很自然地將用戶注意力鎖定在屏幕中央,無疑使關(guān)鍵數(shù)據(jù)生動(dòng)鮮活起來
Carrie Philips的Waygo App V2設(shè)計(jì)。設(shè)計(jì)師使用了清新的橙色明暗變化,來構(gòu)成溫暖鮮活的漸變主題,提亮了菜單部分。顏色的選用與主色調(diào)完美搭配,并且很好地強(qiáng)化了主題風(fēng)格
Rustem Ramadanov的Bird app GIF中,組織良好、清晰易讀的磁貼布局,起了重要作用,它們通過柔滑的顏色差異來精確指向各分類。設(shè)計(jì)師使用了久經(jīng)考驗(yàn)的端莊藍(lán)白色組合
Eddie Lobanovskiy的Brisk設(shè)計(jì)。界面中展示了一套漸變色大融合,主要由多種明暗變化的熱帶橙過渡至極地藍(lán)。其中背景色扮演著更加功能性的角色,而非純粹裝飾,每種顏色都為溫度計(jì)增加了圖形化的表現(xiàn)
Nick Murph的Goo App基于絕妙的柔和配色。柔和漸變漂亮地與內(nèi)容融合,給界面營造一種文雅怡人的氛圍
Maria Bratchikova的”Giftboard”設(shè)計(jì)。設(shè)計(jì)師通過多種色調(diào)的紅色巧妙地區(qū)分類別,為界面營造一種親切、略微傷感的格調(diào)。此處小小的漸變效果,在強(qiáng)調(diào)和融合類別上起到了一定作用
Amine Mounazil的天氣app界面又是一件利用色彩的力量來視覺化數(shù)據(jù)展示的作品。照慣例,溫度越高,顏色越深、越暖、越飽和
反思
設(shè)計(jì)師們精明地利用各種漸變效果,從無間斷的柔滑光亮背景,到割裂成一條條相互區(qū)別的奔放背景。他們不僅將這種活力十足的效果用于純裝飾作用,也作為一種強(qiáng)調(diào)既有主題風(fēng)格的手段。
via:譯言網(wǎng)
- 目前還沒評論,等你發(fā)揮!