發(fā)布時間:2024-01-25 09:08:11 瀏覽量:241次
小編:今天就和大家一起看看重新回歸的網(wǎng)頁漸變色,設(shè)計師以多種形式運用了回歸后的漸變,同時視覺效果超贊的!它并不存在任何明確的使用規(guī)則,所以我們可以充分的去發(fā)揮,千萬不要簡單的ctrl C、ctrl V,要做出自己的特色!
在2016年里我們分享過《如何使用彩色濾鏡創(chuàng)造奇妙的網(wǎng)頁設(shè)計》,當時就有很多彩色+漸變風(fēng)的網(wǎng)頁設(shè)計作品,然而2年時間已過去,20167我們再次看到這些漸變色的網(wǎng)頁設(shè)計作品!
似乎是在一夜之間,漸變又重新回到網(wǎng)頁設(shè)計中來了,這是在扁平化設(shè)計初期、設(shè)計師努力回避的一種配色方式。
從背景到圖層疊加應(yīng)用,再到細微的紋理,它的多種應(yīng)用以卷土之勢出現(xiàn)在用戶界面上大,但與以往稍有不同。欲再練此功?看完下面的理論再說?。ǜ綉?yīng)用實例以激發(fā)靈感)
網(wǎng)頁設(shè)計界領(lǐng)航者
年初,雙色調(diào)潮流一直由Spotify引導(dǎo)著,這幾乎也成了該品牌的視覺符號。放大點看你會發(fā)現(xiàn),Spotify的雙色調(diào)用色是有一定梯度的,它平衡明亮的顏色,有時又通過使用單色相向明暗漸變。
其他的大牌網(wǎng)站也同樣重拾了這種漸變設(shè)計用于用戶交互。Texture——一家在線雜志供應(yīng)商——回歸得比較徹底,整屏都是漸變。
然而,這些僅僅是新版漸變色使用的冰山一角。它爆發(fā)式的出現(xiàn)在單品到系列設(shè)計的每一個地方。
與此同時,它并不存在任何明確的使用規(guī)則。可以是多色漸變,也可以是輻射漸變、點光漸變或者垂直線性漸變。它已成為視覺陳列或簡單專欄中主要的設(shè)計風(fēng)格。
令人稱奇的是,設(shè)計師以多種形式運用了回歸后的漸變,同時視覺效果超贊的!
扁平化漸變配色
盡管在扁平化設(shè)計領(lǐng)域中一度被拋棄,然而重新回歸的漸變色融合了大量扁平化元素,尤其是色彩。一些大膽的色彩甚至是從扁平設(shè)計的調(diào)色板中直接“借來的”。
這樣的的色彩選擇使得漸變更加 modern,也更加契合其他網(wǎng)站的設(shè)計趨勢。當然,你也可以把它與平面設(shè)計結(jié)合,或是在材料設(shè)計的用戶界面再增加一種漸變,甚至如果有較小的設(shè)計項目,你還可以嘗試用柔和的顏色組合作為背景。
漸變的色彩選擇比較隨意,它也是對其他設(shè)計流行趨勢的一種補充。如果你并不想完全拋棄現(xiàn)有的設(shè)計成果,可以稍作轉(zhuǎn)變,局部替換就好。
雙色調(diào)已開始流行
雙色漸變是一種非常重要的設(shè)計技巧,更是一種融合性的、超棒的流行趨勢。
但是這個概念有一個缺點:有點被過度使用。好像整個設(shè)計界都在用,而大部分呈現(xiàn)出來的都是藍綠漸變,效果也就千篇一律,沒啥特色。
流行看重的是個性,而非共性。千萬不要簡單的ctrl C、ctrl V。
背景中的漸變圖片
漸變的回歸也使得背景更有深度了,這樣的趨勢還會延續(xù)。因為得益于VR(虛擬現(xiàn)實),越來越多的網(wǎng)站和設(shè)計師都在嘗試將現(xiàn)實、3D效果與設(shè)計相結(jié)合。
雖然扁平化設(shè)計具有直觀、舒適、簡單的優(yōu)點,但也比較缺乏真實性。閑暇時多貼近大自然,那多彩——藍的、紅的、黃的和紫的天空,任何時候都能賦予你靈感。
天空和漸變、陰影是同一種概念。當一項設(shè)計完成后,運用這些概念能有效地增加設(shè)計的層次感和真實性。所以要抓緊時間掌握這些技巧,它們能給予你強大的力量。
圖片的漸變疊加
除了上面說到的,在圖片上使用漸變疊加也流行好一段時間了。所以從單色疊加到漸變疊加的轉(zhuǎn)變就沒什么新奇的。
這種應(yīng)用在大幅面的圖片上效果比較明顯,比方說英雄的背影,在這類圖片上使用漸變疊加的好處是,能夠固定視覺焦點到重要的元素上,或者創(chuàng)建一個可讀性較強的空白區(qū)域,便于添加個性化、呼吁性的文本內(nèi)容。
技巧就是在照片的頂部要平衡好圖片和色彩之間的關(guān)系。隨時檢查:顏色與圖片涵義是否匹配?是否能看懂圖片所表達的故事?為了完整保留圖片本身的信息,漸變與圖片必須要巧妙地融合才行。
UI元素中的少量漸變
一些設(shè)計師將漸變加入用戶界面元素中,而這些漸變與其他時下一些流行的款式不同。它的效果更傾向于小范圍的漸變,而且還是同色系的漸變。
在蘋果早期IOS的時代,這是一種主流的款式,但是卻并未受到大眾過多的喜愛。毫無疑問,使用這種漸變看起來更適用于比較大的元素中。對于一些像小圖標的設(shè)計,這種小范圍的漸變效果很難被識別,甚至?xí)稚⒂脩舻淖⒁饬ΑH欢?,在一個大的空間中,這種小范圍的漸變效果能夠抓住讀者眼球,將注意力轉(zhuǎn)向執(zhí)行按鈕或者一些特大的按鈕。
對于每種漸變款式,都不應(yīng)讓用戶在看到漸變的時候,停下來去想,“哇,這是一個很酷的漸變效果?!睗u變效果在某種程度上應(yīng)該是被無視的。它只是用來增強用戶體驗,而不是讓用戶的注意力停留在漸變本身的美感上,除非你執(zhí)意要那種效果。
配色工具
網(wǎng)上有很多不錯的配色工具,對于不懂配色的新人來說,還可以試試這些工具來獲得配色的靈感。
UI Gradients
一個在線在成漸變配色工具,自帶的漸變配色方案非常美麗。
Colllor
使用 Collor 可以方便的創(chuàng)建色調(diào)一致的配色,看起來非常不錯,使用方法很簡單,打開網(wǎng)站,輸入 RGB 色值,就能自動獲得該顏色的其它色調(diào),非常漂亮哦。
配色導(dǎo)航
設(shè)計導(dǎo)航中有一個配色欄目,里面有很多你意想不到的配色工具,相當好用。打開設(shè)計導(dǎo)航,點選配色欄目,你就可以看到超多配色工具,快選擇一款你喜歡用的吧!
最后
如果漸變退出時尚界,我會是第一個掉眼淚的。所以看到她的回歸,我內(nèi)心無比激動。
帶有絢麗顏色的漸變或者與圖片疊加的漸變是一種能有效提高圖片轉(zhuǎn)化率的設(shè)計技能,簡潔卻不簡單,既令人心動又能引起興趣。她的回歸得益于所有的設(shè)計師的推動。感謝你們!
熱門資訊
1. iPhone6的UI設(shè)計尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎?這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范,包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個絕佳的UI設(shè)計網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
3. 移動端UI設(shè)計中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計的基本知識
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
6. 推薦10本適合UI設(shè)計師看的書籍,輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機會。
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣?想學(xué)UI設(shè)計要多少錢?
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎?不知道學(xué)UI設(shè)計要花多少錢?不妨看看這篇文章,了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
同學(xué)您好!