怎樣體現(xiàn)高端的配色與設(shè)計(jì)？以及各種參考網(wǎng)站

原創(chuàng) 贊19 收藏82 評(píng)論

舉報(bào) 2015-08-26

掃描,分享朋友圈

來源：站酷
原載于：Handy Web Design
編譯：SISENdesign
原標(biāo)題：關(guān)于高端感覺的配色、設(shè)計(jì)與可參考的各種網(wǎng)站(翻譯理論)

這篇文章是關(guān)于個(gè)人比較在意的高端感覺配色和設(shè)計(jì)相關(guān)的事情，所以試著寫一下這個(gè)題目的文章。體現(xiàn)高端感覺的網(wǎng)站，不限于行業(yè)種類，在各行各業(yè)中都有體現(xiàn)。作為初學(xué)者的時(shí)候，都會(huì)有“如何能做出這樣的設(shè)計(jì)？怎樣可以體現(xiàn)出高端感覺？…”的煩惱。這里通過匯總多個(gè)這種類型網(wǎng)站去試著體會(huì)一下。

（注：部分參考網(wǎng)站的配色和設(shè)計(jì)現(xiàn)已更改，與本文截圖稍有差異）

有高端的配色

想要體現(xiàn)出高端感覺，針對(duì)不同的行業(yè)、不同的對(duì)象所采用的表現(xiàn)方法是不同的。想要向男性與女性展現(xiàn)出高價(jià)格？或者是高級(jí)品卻沒能體現(xiàn)出高品質(zhì)？針對(duì)各種各樣的情況必須有不同的應(yīng)對(duì)，這里是從各個(gè)行業(yè)種類找的參考。

美容

1、HACCI

以白色的背景為底色，logo的配色即使是使用了米色也能體現(xiàn)出清爽感和高級(jí)感。并且使用了不會(huì)破壞優(yōu)雅氣氛的圖片+簡(jiǎn)短的文案。

鏈接地址：http://hacci1912.com/

2、クレ?ド?ポー　ボーテ

這也是高級(jí)化妝品的品牌網(wǎng)站。因?yàn)橹黧w使用了黑色作為配色，打開時(shí)會(huì)留下很強(qiáng)的成人感覺。為了體現(xiàn)出成人的氣氛與考慮到配色的統(tǒng)一，其他用色也與商品都使用了同樣低明度的紫色。這里同上面介紹的網(wǎng)站相同，為了能體現(xiàn)出高品質(zhì)的感覺而保留了最低限度的信息。

鏈接地址：http://www.cledepeau-beaute.com/jp/

潮流品牌

1、Tiffany （蒂芙尼）

著名的蒂芙尼網(wǎng)站使用了綠松石色。排版簡(jiǎn)潔并且使用了企業(yè)色。使用紅色緞帶的照片，體現(xiàn)出圣誕節(jié)的節(jié)日感，顏色的對(duì)比更進(jìn)一步的突出了商品。

鏈接地址：http://www.tiffany.co.jp/

2、Burberry（博柏利）

這是以格子花紋出名的博柏利網(wǎng)站。因?yàn)橛泻芏喔叨似放乒镜木W(wǎng)站特點(diǎn)是使用了有特點(diǎn)的logo和圖案，因此在這里使用了更有吸引力的高端照片和商品。

鏈接地址：https://jp.burberry.com/

汽車

1、メルセデス?ベンツ（梅賽德斯 - 奔馳）

背景使用了黑色~灰色的色調(diào)。要體現(xiàn)出高端感覺，黑色是必要的顏色。下面精致的菜單由基本型號(hào)組成。黑色背景的網(wǎng)站與白色背景的網(wǎng)站相比，在遇到更大視覺沖擊力的時(shí)候會(huì)相對(duì)更容易接受。

鏈接地址：http://www.mercedes-benz.co.jp

2、LEXUS（雷克薩斯）

豐田高端品牌雷克薩斯的網(wǎng)站。這個(gè)網(wǎng)站被分割出了一個(gè)新的網(wǎng)站嗎？橫向運(yùn)動(dòng)出去的banner設(shè)計(jì)讓人印象深刻。斜線加入的地方感覺空間被擴(kuò)大了。雷克薩斯也同樣使用了黑色和灰色的配色。首頁下面車模的圖片，改變車型的拍攝角度和氣氛使人感覺張弛有度。

鏈接地址：http://lexus.jp/

住宿設(shè)施

1、加賀屋

和倉溫泉旅館加賀屋的網(wǎng)站。主體的banner部分使用了黑色，網(wǎng)站內(nèi)部分文案使用了豎排，體現(xiàn)出“和”的韻味。Banner下面的菜單也使用了豎寫的菜單。

鏈接地址：http://www.kagaya.co.jp/

2、ホテルラ?スイート神戸

整體采用了淡淡的灰色，logo的顏色作為主色，網(wǎng)站由2種顏色構(gòu)成。排版也很巧妙，有種精練的感覺。因?yàn)槊廊菖c婚禮也可以選擇這里，所以感覺配色也很干凈。

鏈接地址：http://www.l-s.jp/

飲食店

1、橫浜モノリス

白色的背景與圖片很好的搭配，突出了品質(zhì)的優(yōu)良。菜單部分也被設(shè)計(jì)成寫實(shí)的圖標(biāo)，感覺很有意思。因?yàn)闆]有使用過多的顏色，整體感覺也很統(tǒng)一。

鏈接地址：http://restaurant.novarese.jp/yhm/

2、赤坂美料あけち（網(wǎng)站已過期）

用圖片充滿整個(gè)畫面會(huì)有強(qiáng)烈的沖擊力。照片上的料理展現(xiàn)了這個(gè)店的高端品味。有很多體現(xiàn)出高端的網(wǎng)站都使用了大量的照片。由于網(wǎng)站使用了視覺滾動(dòng)差效果也有一定的創(chuàng)新。在配色中使用了大量的黑色，讓料理中的紅和綠更加明顯奪目。

綜上所述，試著參考和留意一下這些網(wǎng)站吧。

1. 與黑體相比最好使用明朝體

根據(jù)具體情況具體處理。受歡迎的高端感覺和質(zhì)量好的商品，很多都使用了明朝體。與黑體相比明朝體的文字更有動(dòng)感，留下成人的感覺。在頭圖的標(biāo)題等地方使用會(huì)有不錯(cuò)的效果。使用黑體的時(shí)候，如果不注意字體的粗細(xì)和文字的顏色，會(huì)使設(shè)計(jì)變得庸俗。

2. 字間距的調(diào)整適度

如果字間距過密，會(huì)讓人有狹小不富裕的感覺并且會(huì)讓氣氛發(fā)生改變。如果字距擴(kuò)大也必須注意不要有像孩子那樣隨意的感覺。

3. 注意行距和組之間的空白

稍微夸張的留出空間，更容易展現(xiàn)出優(yōu)雅的氣氛。因?yàn)橐粲谐渥愕目臻g，所以必須整理信息，控制刊登文案的數(shù)量。要是文章過多的話，會(huì)給人以像信息網(wǎng)站那樣的感覺。

4. 使用漸變

因?yàn)闈u變表現(xiàn)顏色的深淺，可以讓人感到網(wǎng)站的縱深。稍微讓顏色有些不同的差異，略微的漸變很很好的。如果全部都是漸變，會(huì)帶來相反的感覺。

5. 不胡亂使用艷麗的顏色，調(diào)整色彩的飽和度和明度

體現(xiàn)高端感覺的時(shí)候，使用花哨且顯眼的顏色會(huì)很容易破壞氣氛。即使有想突出的地方，也可以考慮顏色以外的方法。飽和度低的粉筆色，特別是淺茶色常?？梢栽诤蒙唐分锌吹?。如果想使用視覺強(qiáng)烈的紅色，重點(diǎn)是如果不是集中使用，就不會(huì)產(chǎn)生強(qiáng)烈的視覺。

6. 有意識(shí)的網(wǎng)格排版

高端=有品味，有這種感覺會(huì)發(fā)現(xiàn)很多橫豎向都對(duì)齊的排版。相對(duì)于個(gè)性的還是放置這樣規(guī)矩的樣式要好吧。有網(wǎng)格排版的意識(shí)，整理信息的時(shí)候多留意橫豎的線，可以給人以整齊的感覺。

7. 黑色帶有很強(qiáng)的顏色感覺

看了各種各樣的網(wǎng)站，會(huì)發(fā)現(xiàn)使用黑色背景的要比使用白色背景的視覺要強(qiáng)烈。如果是白色的背景，對(duì)于背景來說無論使用了怎樣配色突顯的都不光是白色，黑色背景的時(shí)候只有黑色是顯眼的。因?yàn)槿绻褂昧撕谏尘?，色彩的搭配?huì)變得很難（要是想與目標(biāo)一致一定要使用黑色么？）。

綜上所述，試著匯總可以參考的網(wǎng)站。關(guān)于高端感覺是多種多樣的，歸根究底還是像之前總結(jié)的那樣。

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。