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

　　「2016年設(shè)計(jì)趨勢(shì)」

　　設(shè)計(jì)篇：《再作印證!2016年網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域11個(gè)流行趨勢(shì)預(yù)測(cè)》

　　電商網(wǎng)站篇：《不學(xué)就落伍咯!2016年電商設(shè)計(jì)的9個(gè)熱門趨勢(shì)(附案例)》

　　插畫(huà)設(shè)計(jì)：《畫(huà)出個(gè)未來(lái)!幫你梳理2016年網(wǎng)頁(yè)插畫(huà)設(shè)計(jì)趨勢(shì)》

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

　　Spotify-Foundthemfirst

　　首先，簡(jiǎn)單來(lái)說(shuō)：雙色調(diào)就是使用兩種顏色。

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

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

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

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

　　顯示性的圖片案例

　　New deal design

　　新的處理方式創(chuàng)造的視覺(jué)之所以令人驚艷，得益于古怪而大膽的色彩搭配，有趣的圖像和色彩。當(dāng)處理圖像時(shí)不要害怕用的色彩和圖像是否符合主流搭配，或者說(shuō)你搭配的看起來(lái)并不像普通的那樣看起來(lái)很舒適。都沒(méi)關(guān)系，哪怕不合適也可以搭配起來(lái)，因?yàn)樗哪康氖且獎(jiǎng)?chuàng)造一個(gè)引人注目的視覺(jué)沖擊，當(dāng)然，除了色彩，還包括圖像的對(duì)比度需要調(diào)整。

　　這里有一些擴(kuò)大影響的技巧：

　　選擇兩種對(duì)比色或品牌的顏色(比如百事可樂(lè)的藍(lán)白配色)。

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

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

　　增強(qiáng)對(duì)比度。

　　考慮按鈕或排版的空間。

　　選擇反映照片情緒的色彩。

　　設(shè)置圖像時(shí)避免彩色或者混合顏色的邊框，可以用一個(gè)條幅或者視覺(jué)差的效果來(lái)搭配顏色選項(xiàng)。

　　簡(jiǎn)單的顏色搭配案例

　　125 Years Of Amazing

　　雙色調(diào)不必是復(fù)雜的。有時(shí)最簡(jiǎn)單的雙色項(xiàng)目最醒目。

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

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

　　以此來(lái)增加可讀性

　　Viens-la

　　雙色調(diào)可以用作顏色穩(wěn)定劑，使文本有足夠的空間和對(duì)比度。雙色調(diào)顏色疊加可以幫助圖像中色彩變化的“扁平化”，因?yàn)閱我坏念伾晕谋編缀蹩梢栽趫D像上任何一個(gè)地方使用，并且保持可讀性。

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

　　強(qiáng)調(diào)作用案例

　　Holmmarcher

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

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

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

　　背景作用案例

　　Joinradio

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

　　如上圖，JOIN電臺(tái)的背景就是一個(gè)完美的案例。顏色的變化幾乎無(wú)法察覺(jué)，在設(shè)計(jì)中與其他用戶界面元素?zé)o縫融合。有一個(gè)簡(jiǎn)單的動(dòng)畫(huà)，通過(guò)舒緩的運(yùn)動(dòng)使它的色彩變得十分動(dòng)人。從主頁(yè)的左上角移動(dòng)到右下角遵循從亮到暗的轉(zhuǎn)變，自然的視覺(jué)和閱讀模式進(jìn)一步鼓勵(lì)用戶滾動(dòng)界面和點(diǎn)擊。

　　結(jié)論

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

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