如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

本文通過(guò)分析日式網(wǎng)站的色彩、圖片、文字和元素運(yùn)用，幫你充分吸收日式網(wǎng)站的精華，讓中文網(wǎng)站的設(shè)計(jì)也變得高大上！

色彩

當(dāng)我們看到小清新的網(wǎng)站的時(shí)候首先一定會(huì)想到日式網(wǎng)站。

Sarara 是一家純凈水的網(wǎng)站，所以它的網(wǎng)站主題色系為藍(lán)色系，主要由高飽藍(lán)色到低飽藍(lán)色的過(guò)度，加上明暗對(duì)比的強(qiáng)烈，直接了當(dāng)?shù)耐怀鲂麄鞯漠a(chǎn)品。

該網(wǎng)站的主要面向目標(biāo)人群是大學(xué)生，所以選比較清純活力的女生作為主角，采用藍(lán)色系作為背景，紫色作為點(diǎn)綴色。

這也是一家日本礦泉水的官網(wǎng)，它也是運(yùn)用了大量的藍(lán)色系作為背景。

畫(huà)面中主要以亮藍(lán)色、亮黃色以及白色的對(duì)比，自然突出了人物和產(chǎn)品，最后加上亮黃色的點(diǎn)綴吸引購(gòu)買。

總結(jié)：

1.  大部分采用藍(lán)色系進(jìn)行過(guò)渡
2. 增加色彩的對(duì)比，例如亮藍(lán)色和亮黃色等
3. 選擇年輕化的人物來(lái)傳達(dá)氣氛

掌握了這些要領(lǐng)，相信各位設(shè)計(jì)一個(gè)接地氣的日式小清新的網(wǎng)站。

圖片

日式網(wǎng)站在處理頁(yè)面中的圖片的時(shí)候，會(huì)哪些規(guī)律呢？ 下面我們看看一些案例。

AIM Info 網(wǎng)站團(tuán)隊(duì)欄目中運(yùn)用的圖片具有統(tǒng)一的調(diào)性，主要體現(xiàn)在：

人物的色調(diào)，視角及人物占有畫(huà)面的比例，通過(guò)男女的先后順序緩解視覺(jué)疲勞，這樣的處理方式會(huì)給用戶一種專業(yè)嚴(yán)謹(jǐn)信任的感覺(jué)。

下面的網(wǎng)站是一個(gè)傳統(tǒng)服飾的網(wǎng)站，通過(guò)孩子的攝影角度（一個(gè)正面和一個(gè)反面），女孩和男孩錯(cuò)列順序，色彩的暖色和冷色，板塊大小進(jìn)行一個(gè)對(duì)比。這樣讓用戶即使閱讀這么多圖片，依然清晰條理，還能保持很大的新鮮感。

下面網(wǎng)站中的圖片使用了近景遠(yuǎn)景的對(duì)比處理手法：

第一張用近景來(lái)表現(xiàn)食物的細(xì)節(jié)
第二張用遠(yuǎn)景來(lái)表現(xiàn)飯店的外觀
第三張第四張同樣通過(guò)近景的手法來(lái)表現(xiàn)食物的加工過(guò)程
第五張用遠(yuǎn)景展現(xiàn)全景照片
第六張用近景來(lái)表現(xiàn)食物細(xì)節(jié)
第七張用遠(yuǎn)景體現(xiàn)整個(gè)參觀的內(nèi)部感覺(jué)

這樣的處理手法 使得整個(gè)畫(huà)面中圖多而不亂，增加了圖片中的節(jié)奏感和層次，讓用戶不斷有新鮮感去瀏覽圖片。

這個(gè)網(wǎng)站也是通過(guò)近景和遠(yuǎn)景的方式來(lái)搭配圖片：

根據(jù)上面幾個(gè)案例分析得來(lái)我們?cè)诰W(wǎng)站運(yùn)用圖片可借鑒的幾種方式：

1. 具有統(tǒng)一性（主要體現(xiàn)在色調(diào)/人物占有畫(huà)面的比例/人物造型/表情狀態(tài) 等）
2. 運(yùn)用對(duì)比（主要體現(xiàn)在近景和遠(yuǎn)景/冷暖色彩/人物性別/人物的造型姿勢(shì)/形狀大小的對(duì)比等
3. 突出主體，弱化背景。

文字

使用幾何圖形的形狀比例來(lái)進(jìn)行文字排版：

△  使用三角形進(jìn)行文字排版

△  使用豎長(zhǎng)方形排版

△  使用橫長(zhǎng)方形排版

△   使用六邊形排版

△  使用正方形排版

△  使用圓形排版

這個(gè)食品網(wǎng)站將文字進(jìn)行豎排，有效的將主視覺(jué)和介紹性的文字結(jié)合起來(lái)。又不失美感

通過(guò)特殊處理文字效果，突出重要內(nèi)容，直接抓取了用戶的視覺(jué)。

夸張的人物模特和神情，增加了文案排版的視覺(jué)沖擊力，讓原本單調(diào)的文字變的有活力。

根據(jù)上面幾個(gè)案例分析得來(lái)我們?cè)诰W(wǎng)站中進(jìn)行文字排版可借鑒的幾種方式！

1. 學(xué)會(huì)借鑒幾何圖形的比例去排版文字
2. 文字排版中巧妙的加入圖形，不僅變的具有創(chuàng)意還會(huì)讓你所表達(dá)的信息內(nèi)容更加易懂
3. 文字排版中學(xué)會(huì)融入來(lái)生活中圖像元素，不僅會(huì)讓你的視覺(jué)上得到質(zhì)的提，還會(huì)讓你整個(gè)內(nèi)容更加的接地氣

元素

網(wǎng)站中的線條與幾何圖像的運(yùn)用。

下面網(wǎng)站為了突出數(shù)字部分，采用明亮的線條作為提示作用，這樣不僅潮流，而且有效的抓住了用戶的視覺(jué)，突出了重點(diǎn)。

這里也運(yùn)用了線條來(lái)突出文字的重要性。

這個(gè)網(wǎng)頁(yè)將線條運(yùn)用在網(wǎng)頁(yè)中的按鈕上，告別實(shí)色為主的方式，加強(qiáng)了按鈕的透徹感。

線條的加入讓下面的網(wǎng)頁(yè)每一屏都有了區(qū)分性，同時(shí)也吸引了用戶的注意力，避免了兩屏內(nèi)容相互干擾。

下面網(wǎng)站為了讓用戶看到網(wǎng)站的重要內(nèi)容，利用了純色打底方式來(lái)修飾文字。

下面是一個(gè)網(wǎng)站的底部，為了讓top到頂部的功能和底部板塊信息得到有效的區(qū)分，所以網(wǎng)站采用了兩種色彩來(lái)分離兩個(gè)板塊的信息，從而避免它們彼此的干擾，讓原本雜亂的頁(yè)面變的有條理。

下面網(wǎng)站是一家賣眼鏡的產(chǎn)品，畫(huà)面中讓流線型的科技元素的加入，使得眼鏡給用戶先進(jìn)科技現(xiàn)代的感受。

下面網(wǎng)站是一家市場(chǎng)雜志的模特網(wǎng)站，網(wǎng)站同樣加入了現(xiàn)代 科技感的元素，使整個(gè)網(wǎng)站變的潮流超前。

下面網(wǎng)站是一家婚慶公司的宣傳網(wǎng)站，網(wǎng)站背景采用了將新娘手捧鮮花的照片，既不搶主視覺(jué)，又讓背景和照片完美融。

根據(jù)上面幾個(gè)案例，我們?cè)诰W(wǎng)站可借鑒的幾種方式：

1. 線條的運(yùn)用，既可以起到裝飾輔助分隔的作用，又可以作為重點(diǎn)信息突出
2. 背景紋理純色的運(yùn)用，有效的起到了網(wǎng)站分隔和區(qū)分對(duì)比的作用
3. 幾何圖形的運(yùn)用，讓你的網(wǎng)站更有新意
4. 科技的元素的運(yùn)用，讓你的網(wǎng)站的產(chǎn)品賣點(diǎn)更突出，優(yōu)勢(shì)更明顯
5. 實(shí)景圖的運(yùn)用，可以使網(wǎng)站更貼切生活
6. 手繪元素的運(yùn)用，讓你的網(wǎng)站更出彩

藍(lán)藍(lán)設(shè)計(jì)( www.payeee.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)