您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

網(wǎng)頁設(shè)計要怎樣體現(xiàn)高端的配色與設(shè)計?

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

美容類網(wǎng)頁設(shè)計

1、HACCI

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

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


怎樣體現(xiàn)高端的配色與設(shè)計? 三聯(lián)



3.jpg


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

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

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





潮流品牌網(wǎng)頁設(shè)計

1、Tiffany (蒂芙尼)

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

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





2、Burberry(博柏利)

這是以格子花紋出名的博柏利網(wǎng)站。因為有很多高端品牌公司的網(wǎng)站特點是使用了有特點的logo和圖案,因此在這里使用了更有吸引力的高端照片和商品。

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





汽車類網(wǎng)頁設(shè)計

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

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

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





2、LEXUS(雷克薩斯)

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

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


12.jpg



13.jpg


酒店旅館網(wǎng)頁設(shè)計

1、加賀屋

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

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


14.jpg



15.jpg


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

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

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


16.jpg



17.jpg


飲食店網(wǎng)頁設(shè)計

1、橫浜モノリス

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

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


18.jpg



19.jpg


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

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


20.jpg



21.jpg


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

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


22.jpg


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

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


23.jpg


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

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


24.jpg


稍微夸張的留出空間,更容易展現(xiàn)出優(yōu)雅的氣氛。因為要留有充足的空間,所以必須整理信息,控制刊登文案的數(shù)量。要是文章過多的話,會給人以像信息網(wǎng)站那樣的感覺。

4. 使用漸變


25.jpg


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

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


26.jpg



112716_02.jpg


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

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


27.jpg


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

7. 黑色帶有很強的顏色感覺


28.jpg


看了各種各樣的網(wǎng)站,會發(fā)現(xiàn)使用黑色背景的要比使用白色背景的視覺要強烈。如果是白色的背景,對于背景來說無論使用了怎樣配色突顯的都不光是白色,黑色背景的時候只有黑色是顯眼的。因為如果使用了黑色背景,色彩的搭配會變得很難(要是想與目標(biāo)一致一定要使用黑色么?)。

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


[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di2888.html
模塊化設(shè)計:初學(xué)者完全入門指南
聊聊網(wǎng)頁設(shè)計中五大「金科玉律」
圖趣網(wǎng)微信
建議反饋
×