5個(gè)幫你瞬間提高網(wǎng)頁(yè)對(duì)比度的小技巧!
缺乏對(duì)比度是一個(gè)非常常見(jiàn)的問(wèn)題,而且往往易于補(bǔ)救。當(dāng)你聽(tīng)到客戶(hù)對(duì)你咆哮著“不夠完美!”的時(shí)候,他們真正想說(shuō)的是,他們希望看到的是更多對(duì)比的設(shè)計(jì)元素。今天這篇好文總結(jié)了5個(gè)簡(jiǎn)單實(shí)用好上手的技巧,來(lái)收!
你的的設(shè)計(jì)項(xiàng)目是否總覺(jué)得看起來(lái)不是那么出眾,這很有可能是因?yàn)槿鄙僮銐虻膶?duì)比度。對(duì)比度的主要作用就是提高要素之間的差異化,使得每個(gè)設(shè)計(jì)看起來(lái)更加獨(dú)立,突出和特別。
有很多方式可以創(chuàng)建設(shè)計(jì)對(duì)比度,包括使用各種不同類(lèi)型的元素,從印刷到色彩調(diào)整等。創(chuàng)建對(duì)比度非常重要,它可以使一個(gè)設(shè)計(jì)完成從平凡到令人驚艷的蛻變。如果你還不知道該怎么辦,那下面的五個(gè)建議或許可以幫到你
1. 做得更大(或者更?。?/strong>
過(guò)多的同等重量的元素會(huì)顯得相同。最簡(jiǎn)單的辦法是讓一個(gè)元素顯著更大或更小。
這個(gè)不同的項(xiàng)目會(huì)變成眼前的焦點(diǎn),用戶(hù)將被吸引到畫(huà)布的該區(qū)域,因?yàn)樗遣煌摹?/p>
制作一個(gè)元素時(shí),照片或文本塊大或變小不僅僅是在它的物理尺寸上,更重要的是它的視覺(jué)重量。理解這一點(diǎn)最簡(jiǎn)單的方法是排版??纯瓷厦娴膱D片。這兩個(gè)詞都是一樣的“大小”,但是感覺(jué)就大不一樣。這種反差的原因是相對(duì)于厚的字母,薄的字母在頁(yè)面底端。
你可以把這個(gè)相同的概念延伸到別處,你會(huì)發(fā)現(xiàn)幾乎任何其他設(shè)計(jì)元素也是如此。
看上面這個(gè)網(wǎng)站上的小傳單。在頁(yè)面和按鈕在屏幕的底部,頂部要特別注意的基于文本的導(dǎo)航。為什么其中的文字吸引你的眼睛更快?為什么所有類(lèi)型的是相同的大小,但內(nèi)部的五顏六色的相片框卻能使它看起來(lái)更大更醒目。
2. 添加紋理
雖然現(xiàn)在平板化和迷你風(fēng)格作為設(shè)計(jì)趨勢(shì)的主流,紋理不再像之前那樣常用,。但你仍然可以在很多地方看到它,有時(shí)候你甚至沒(méi)有思考為什么它會(huì)存在。
從平面元素改變到任何與一個(gè)紋理,圖案或三維樣式將有助于創(chuàng)造聚焦。加入紋理背景可能是最直接的解決方案,或者說(shuō)相同條件下,添加紋理比其他方案來(lái)得更快更好。
考慮與文本元素質(zhì)感相同的紋理,這在許多復(fù)古排版風(fēng)格中很流行。主要類(lèi)型的紋理質(zhì)感包括粗糙和光滑。他們可以相互合作區(qū)提高設(shè)計(jì)的對(duì)比度,以此創(chuàng)造視覺(jué)焦點(diǎn)。
3. 改變形狀
看看上面的圖片。你看到的第一個(gè)是什麼?對(duì)我來(lái)說(shuō)這是里面那個(gè)有問(wèn)號(hào)的圓形物體。
你知道為什么嗎?在一個(gè)充滿(mǎn)矩形的形象中,它是唯一的圓形。跟其他對(duì)象的區(qū)別使得它脫穎而出。顛倒字符這一安排也是它引人注目的原因之一。改變一個(gè)元素的形狀或取向可以增加最直接的影響。
下一次如果你的設(shè)計(jì)感覺(jué)有點(diǎn)平淡,你也可以嘗試這種方法。鈍化照片的邊緣,把元素放置在一個(gè)圓形框架中,而不是矩形。選擇一個(gè)垂直的照片。
所有這些改變嘗試可能讓你在第一次有點(diǎn)不習(xí)慣。但請(qǐng)堅(jiān)持嘗試,當(dāng)你做的時(shí)間久了,你就會(huì)摸索出一些有趣的經(jīng)驗(yàn)了。
4. 添加色彩(或者直接扔掉)
色彩是在處理設(shè)計(jì)時(shí)需要考慮的重要要素。通過(guò)改變色調(diào),或者添加刪除顏色,你可以改變一個(gè)設(shè)計(jì)的整體情緒。顏色可以使事物出現(xiàn)或大或小,或深或淺,訣竅在于對(duì)比運(yùn)用調(diào)色板。
對(duì)比度的最簡(jiǎn)單的形式是色盤(pán),配對(duì)的顏色沿著輪形成不同的反襯組合:
互補(bǔ):從色盤(pán)的相對(duì)側(cè)高強(qiáng)度對(duì)比
三元:顏色隔開(kāi)沿輪三分之一增量
拆分互補(bǔ):在一種顏色旁邊的兩個(gè)顏色就是它的互補(bǔ)色。
這個(gè)色板非常管用,如果你已經(jīng)有了一個(gè)調(diào)色板,就不用擔(dān)心做細(xì)微的調(diào)整,或者怎么樣選擇對(duì)比的顏色了。
把溫暖,涼爽的顏色和中性色調(diào)混合。 通過(guò)添加色度和色調(diào),改變顏色的飽和度,使顏色和基色相區(qū)別。 綜合管理亮的顏色與暗的顏色,就像把它分成陰陽(yáng)一樣看待。 添加沒(méi)有顏色的元素。黑色或白色的元素可以是很多不同色系的添加重點(diǎn), 它們和許多其他基色都能產(chǎn)生對(duì)比。
5. 添加不同
適量的添加出人意料的的形狀和細(xì)節(jié)會(huì)帶來(lái)意想不到的驚喜。在設(shè)計(jì)中,一個(gè)驚喜是什么?它可以是任何要素,這個(gè)要素或許與其他元素并不十分匹配,但仍能與整體和諧相處。
這些要素包括:
一個(gè)與已有元素對(duì)稱(chēng)的新元素。
一個(gè)引導(dǎo)你完成設(shè)計(jì)的視覺(jué)提示,比如強(qiáng)烈視覺(jué)沖擊的形狀或視覺(jué)追蹤模式比如上圖中在網(wǎng)站設(shè)計(jì)中的應(yīng)用,它們使網(wǎng)站看起來(lái)充滿(mǎn)活力。
如平面構(gòu)成中的變異,在多個(gè)重復(fù)元素中一個(gè)變異的元素。
更改元素或文本的排序,如上圖中,在單詞Anima的變化(用字母“I”)。
改變?cè)谝曈X(jué)上一個(gè)行的定位或一個(gè)元件的尺寸。 不同風(fēng)格的影像,如把照片更改為插圖或動(dòng)畫(huà)的提示。
混合復(fù)雜又簡(jiǎn)單的視覺(jué)效果或排版樣式。
結(jié)論
提高元素之間的對(duì)比度的好處是,它可以提高一個(gè)設(shè)計(jì)項(xiàng)目的直接影響。通過(guò)改變?cè)氐耐庥^,你可以改變視覺(jué)的焦點(diǎn),并幫助用戶(hù)提煉出最重要的一部分消息。
缺乏對(duì)比度是一個(gè)非常常見(jiàn)的問(wèn)題,而且往往易于補(bǔ)救。當(dāng)你聽(tīng)到客戶(hù)對(duì)你咆哮著“不夠完美!”的時(shí)候,他們真正想說(shuō)的是,他們希望看到的是更多對(duì)比的設(shè)計(jì)元素。現(xiàn)在你的挑戰(zhàn)就是運(yùn)用你手邊的工具去完成這一轉(zhuǎn)變。
本文地址:http://m.pkvc.cn/tutorial/di3220.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏