這10個(gè)理由告訴你,為什么要在設(shè)計(jì)中使用漸變
正如同在上一篇文章《這7個(gè)技巧,幫你搞定頁面中背景紋理的設(shè)計(jì)》中所說道,在今天,漸變色幾乎就是時(shí)尚的代名詞。從玄妙而優(yōu)雅的漸變,到多彩失真的復(fù)古結(jié)果,漸變所帶來的視覺吸引力,從視覺到交互上都有不錯(cuò)的提拔。
假如你對(duì)于漸變無感,那么今天的文章,會(huì)給你10個(gè)讓你無法拒絕的使用漸變的理由。
1、讓背景具備視覺吸引力
漸變的背景能夠幫助用戶更好地感知和理解設(shè)計(jì)。當(dāng)眼睛感知到屏幕上的色調(diào)和明暗轉(zhuǎn)變的時(shí)候,會(huì)故意識(shí)地細(xì)致到特定的色彩和視覺焦點(diǎn)。
漸變是特別很是有有效的吸引人的視覺工具,為許多設(shè)計(jì)項(xiàng)目增色不少。雖然使用漸變的方法許多,但是最流行的依然是將圖片和文本放置在有漸變色彩的背景上。
下面的案例就是這么做的。柔和的色彩讓視線更容易找到被安放的地方,空曠的背景由于漸變而顯得富有高級(jí)感,前景元素?fù)碛胁诲e(cuò)的可讀性,底部的“發(fā)現(xiàn)更多”也更容易被人細(xì)致到。
2、在文本字體中營造焦點(diǎn)
漸變可以在背景中使用,而前景元素同樣可以使用漸變。假如將高飽和度的漸變色彩疊加在字體當(dāng)中,能夠創(chuàng)造出頗為抓人眼球的設(shè)計(jì)感。不過值得細(xì)致的是,在色彩的選取上,肯定要故意識(shí)地控制對(duì)比度,如許才能保證可讀性。
3、漸變色疊加能夠讓平淡的圖片更加出彩
色彩是有情緒的,將色彩疊加到圖片上,能夠賦予圖片以情感和情緒。漸變色疊加在圖片上的時(shí)候,即使圖片自己的素質(zhì)和情勢(shì)感并不強(qiáng),色彩的加持同樣能夠讓整個(gè)場景更加時(shí)尚。
漸變色彩的誒額加能夠強(qiáng)化品牌,為網(wǎng)站賦予個(gè)性。通亮的色彩和柔和的色彩所帶來的結(jié)果是截然不同的。
不過考慮到漸變和色彩疊加的使用頻率已經(jīng)很高了,在設(shè)計(jì)的時(shí)候肯定要細(xì)致就加入一些獨(dú)特、有個(gè)性的元素。
4、指導(dǎo)視線
好的漸變?cè)O(shè)計(jì),能夠起到指導(dǎo)視線的作用。絕大多數(shù)的用戶在獲取信息的時(shí)候,都是從上到下,從左到右來看的,我們常說的F式的閱讀體例就是如許。
你可以使用漸變色彩的明暗轉(zhuǎn)變來強(qiáng)化這種閱讀風(fēng)俗,比如從用戶的閱讀起點(diǎn)(左上角的LOGO或者頂部的導(dǎo)航),色彩漸漸漸變到底部的CTA按鈕上,眼睛會(huì)先細(xì)致到通亮的部分,然后漸漸移動(dòng)到較暗的部位。
5、令人難忘的色彩搭配
雖然漸變?cè)絹碓搅餍?,但是每種不同的配色方案所帶來的體驗(yàn)其實(shí)是截然不同的。一些殺手級(jí)的配色特別很是值得長期使用,品牌化的配色也可以讓用戶更容易記住品牌的視覺特性。
漸變能夠讓色彩之間產(chǎn)生關(guān)聯(lián),甚至漸變能夠讓這幾種色彩組成的漸變?nèi)缃y(tǒng)一種全新的色彩一樣使用。尤其當(dāng)這幾種色彩和你的配色方案相互匹配的時(shí)候,這種視覺上的關(guān)聯(lián)就顯得特別很是壯大了。
6、強(qiáng)化品牌
假如你的品牌配色適合制作成漸變的時(shí)候,肯定要試試。在本身的網(wǎng)站和平面設(shè)計(jì)作品中使用如許的漸變色彩,能夠更好地同用戶產(chǎn)生聯(lián)系。
想想如何讓雷同的漸變?cè)诓煌膱龊习l(fā)揮作用吧。在網(wǎng)站中,在廣告里,在海報(bào)中,在門店的裝修中,在社交媒體上,當(dāng)這種漸變出如今各種各樣的地方的時(shí)候,用戶對(duì)于品牌的認(rèn)知會(huì)越來越強(qiáng)。
下面的案例是一個(gè)銀行的網(wǎng)站,他們的這種漸變頗為風(fēng)趣,他們不僅在網(wǎng)站中如許設(shè)計(jì),而且在其他的地方也使用了類似的配色,如許就從配色上強(qiáng)化了品牌的概念。
7、漸變照舊特別很是容易創(chuàng)建的
創(chuàng)建漸變色照舊特別很是簡單的,只必要選取2到3種不同的顏色,然后選擇色彩轉(zhuǎn)變的外形,色彩的肇端的位置,以及疊加的位置。
就外形而言,色彩漸變是有方向性的,從左到右,從上到下,又或者基于一點(diǎn)發(fā)散出來的,千變?nèi)f化。在設(shè)計(jì)漸變的時(shí)候,可以包含一種甚至多種漸變的類型。
選擇漸變的色彩可能是最麻煩的步驟,你可以在色輪上選取對(duì)比色或者近似色來制作漸變。當(dāng)然,許多時(shí)候你并不肯定非得本身去設(shè)計(jì)配色,而是可以使用下列現(xiàn)成的工具來制作:
WebGradients:內(nèi)置180種預(yù)先設(shè)計(jì)好的漸變,可以生成CSS、PNG和Sketch、PS的版本。
Gradient Buttons:可以生成帶有不同懸停狀況的CSS按鈕
Gradient Wave Generator:可以使用你自定義的色彩來制作很炫酷的漸變結(jié)果,你還可以控制肇端的位置。
8、色彩漸變會(huì)感覺更加天然
雖然漸變不會(huì)是你的首要的想法,但是通常漸變會(huì)給人以更加天然的感覺,尤其是當(dāng)漸變配色吻合天然特性的時(shí)候。天然界中絕大多數(shù)的物體都不是單一色彩。
漸變自己就是天然的選擇,所以,當(dāng)你不知道選取什么樣的色彩的時(shí)候,可以從天然的照片中選取合適的色彩。下面的插畫就是一個(gè)很典型的例子,傍晚天空的色彩會(huì)天然地從橙色過渡到藍(lán)色。
9、幫你構(gòu)建獨(dú)特的主視覺
當(dāng)你的整個(gè)設(shè)計(jì)并沒有那么個(gè)性化的特性的時(shí)候,一個(gè)好的漸變結(jié)果能夠幫你創(chuàng)造出有用且風(fēng)趣的視覺。跳脫的通亮的色彩或者品牌色能夠讓你的網(wǎng)站設(shè)計(jì)特別很是有特色。
色彩的轉(zhuǎn)變自己是特別很是風(fēng)趣的,它們即使單獨(dú)用作設(shè)計(jì)元素,都可以創(chuàng)造充足良好的設(shè)計(jì),讓網(wǎng)頁充滿情感吸引力,幫助用戶找到對(duì)的感覺。
10、漸變是設(shè)計(jì)趨勢(shì)
漸變是一種簡約且高度可用的元素,它可以創(chuàng)造出一些時(shí)尚的氛圍,但是又不會(huì)有信息過載的擔(dān)憂。這使得漸變成為一種富有感染力又特別很是實(shí)用的設(shè)計(jì)解決方案。
漸變之所以每隔幾年就會(huì)成為設(shè)計(jì)流行趨勢(shì),很大程度上得益于它天然的特性和普遍的吸引力。
本文地址:http://m.pkvc.cn/tutorial/di4009.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏