從Spotify 的案例開始，雙色調(diào)這種網(wǎng)頁設(shè)計方式一天比一天流行了，僅用一對顏色去進行設(shè)計的效果非常驚人，這種風(fēng)格的圖片看起來非常有趣，充滿活力且相當時髦，最近的新網(wǎng)站很多都采用這種設(shè)計方式。今天這篇譯文可以幫助你更充分全面地了解和使用這項設(shè)計方法！

什么是雙色調(diào)設(shè)計

Spotify-Foundthemfirst

首先，簡單來說：雙色調(diào)就是使用兩種顏色。

這種技巧的名稱和技術(shù)來自印刷學(xué)。雙色打印是指打印時僅用一個顏色的兩個色度或者是僅用一種顏色加黑色，這種處理方式通過使用兩個色彩來從不同的角度呈現(xiàn)圖片。

雙色的概念非常大，潘通色卡中就有很多，包括對比色，相近色等，設(shè)計師們首先需要思考色板的限制和顏色的搭配，但是這個方法很有趣而且很容易創(chuàng)造。你可以通過PS，也可以通過其他雙色梯度處理工具，比如Colofilter.css來進行這種創(chuàng)作。

正是因為在Spotify中的應(yīng)用，這種設(shè)計風(fēng)格才變得流行起來。雙色調(diào)設(shè)計這種配色方案適用于音樂播放應(yīng)用程序和各種微型促銷網(wǎng)站。它為圖片增加了獨特的設(shè)計元素，這種設(shè)計元素來自著名的藝術(shù)家，并且具有廣泛的適用性。

這項曾經(jīng)適用于印刷裝訂的技術(shù)現(xiàn)在已經(jīng)找到了在互聯(lián)網(wǎng)環(huán)境下新的應(yīng)用方式，并且成為了未來幾個月內(nèi)，我們可能經(jīng)常會看到的一種設(shè)計趨勢。

顯示性的圖片案例

New deal design

新的處理方式創(chuàng)造的視覺之所以令人驚艷，得益于古怪而大膽的色彩搭配，有趣的圖像和色彩。當處理圖像時不要害怕用的色彩和圖像是否符合主流搭配，或者說你搭配的看起來并不像普通的那樣看起來很舒適。都沒關(guān)系，哪怕不合適也可以搭配起來，因為它的目的是要創(chuàng)造一個引人注目的視覺沖擊，當然，除了色彩，還包括圖像的對比度需要調(diào)整。

這里有一些擴大影響的技巧：

選擇兩種對比色或品牌的顏色（比如百事可樂的藍白配色）。

選擇一張有聚焦區(qū)域的照片，自然景觀的照片可能很難處理。

選擇一個高品質(zhì)的圖像，模糊或較差的圖像不要和雙色調(diào)混用。

增強對比度。

考慮按鈕或排版的空間。

選擇反映照片情緒的色彩。設(shè)置圖像時避免彩色或者混合顏色的邊框，可以用一個條幅或者視覺差的效果來搭配顏色選項。

簡單的顏色搭配案例

125 Years Of Amazing

雙色調(diào)不必是復(fù)雜的。有時最簡單的雙色項目最醒目。

Assurity公司就只用了紅色和白色這兩個最簡單的顏色和純凈排版。條幅中包括多個半色調(diào)的風(fēng)格，色彩明亮而迷人，因為紅色是那種幾乎能吸引所有人的顏色，所以很吸引人。

這里的技巧是，通過簡單的設(shè)計有效的傳遞信息，確保用戶不會忽視主要的元素。紅色吸引了你的注意然后你就可以聚焦到圖片上的文字里。這種類型的雙色調(diào)效果給人感覺更正式，因為它僅僅給了用戶一種不帶強制性的引導(dǎo)。

以此來增加可讀性

Viens-la

雙色調(diào)可以用作顏色穩(wěn)定劑，使文本有足夠的空間和對比度。雙色調(diào)顏色疊加可以幫助圖像中色彩變化的“扁平化”，因為單一的顏色，所以文本幾乎可以在圖像上任何一個地方使用，并且保持可讀性。

雙色調(diào)顏色的選擇并不會使文本變得十分明顯，而是以一種更溫和卻足以為目標服務(wù)的形式表現(xiàn)出來。Holm Marcher & Co.公司做的這個珊瑚藍雙色很有趣，而且創(chuàng)造了文字高度可讀的背景。另外，導(dǎo)航元素使用的藍色色調(diào)使畫面變得更有活力了。

強調(diào)作用案例

Holmmarcher

雖然雙色調(diào)效果追求大的圖像，他們在較小的地方同樣可以正常工作，比如它可以用來強調(diào)導(dǎo)航，輔助圖像或特定類型的內(nèi)容容。

小范圍使用雙色調(diào)的優(yōu)勢還在于，當你被技術(shù)嚇到或者還不知道該來用它工作時，雙色調(diào)可以使你設(shè)計的更自由。當在較小的空間中使用，它可以通過與多個不同顏色，不同設(shè)計的元素搭配，使畫面變得更有趣以吸引更多的人。

卡片樣式元素的雙色調(diào)設(shè)計，可以用于視頻鏈接的覆蓋或強調(diào)號召。通過色彩反差配色方案，雙色調(diào)也可以起到一定的強調(diào)作用。

背景作用案例

Joinradio

通過微妙的雙色調(diào)設(shè)計可以創(chuàng)造一個有趣的背景圖像或圖案，而這種效果其他任何方法是沒辦法達到的。想要不做太大改動，僅僅想對品牌顏色進行調(diào)整或?qū)⒘餍械纳{(diào)和技術(shù)添加到設(shè)計中的時候，雙色調(diào)是一種理想的設(shè)計方法。

如上圖，JOIN電臺的背景就是一個好的案例。顏色的變化幾乎無法察覺，在設(shè)計中與其他用戶界面元素無縫融合。有一個簡單的動畫，通過舒緩的運動使它的色彩變得十分動人。從主頁的左上角移動到右下角遵循從亮到暗的轉(zhuǎn)變，自然的視覺和閱讀模式進一步鼓勵用戶滾動界面和點擊。

結(jié)論

雙色調(diào)設(shè)計可以調(diào)節(jié)過度使用的圖像和元素，為畫面添加有趣的元素，幫助完善視覺表現(xiàn)以吸引更多的用戶。

另外，色彩搭配十分有趣。你永遠無法想象，作為一個設(shè)計師，搭配兩種不同顏色后，看到產(chǎn)生美麗的新元素時那種驚喜。無論哪種方式，創(chuàng)建一個雙色調(diào)搭配就像在進行一種定制，是一種很有趣的工作。

網(wǎng)頁名稱：設(shè)計就要火力全開，2016年網(wǎng)頁設(shè)計high玩法
網(wǎng)頁網(wǎng)址：http://www.rwnh.cn/news/43549.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、動態(tài)網(wǎng)站、用戶體驗、網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)