主要通過(guò)分析日式網(wǎng)站的設(shè)計(jì) 色彩 文字 圖片 元素 這四個(gè)方面去解析。
本文章適合所有愿意提升網(wǎng)頁(yè)設(shè)計(jì)的小伙伴看。
本文章是樓主我根據(jù)原創(chuàng)分析得出。
希望大家看了這篇文章 會(huì)有所幫助和提升。

色彩

當(dāng)我們看到小清新的網(wǎng)站的時(shí)候首先一定會(huì)想到日式網(wǎng)站！主要為年輕化的用戶群網(wǎng)站居多！

01:sarara   一家純凈水的網(wǎng)站！主要突出網(wǎng)站的  靜  純  自然

所以它的網(wǎng)站主題色系為藍(lán)色系，主要由高飽藍(lán)色到低飽藍(lán)色的過(guò)度，加上明暗對(duì)比的強(qiáng)烈！直接了當(dāng)?shù)耐怀鲂麄鞯漠a(chǎn)品！足夠吸引用戶的購(gòu)買欲望。

02 : 該網(wǎng)站的主要面向目標(biāo)人群是大學(xué)生！所以選人物上面 比較有清純 活力的女生作為主角 讓她在炎熱的夏季能夠體驗(yàn)到一瓶飲料給他們帶來(lái)涼爽的感覺(jué)是多么的喜悅。同樣是的采取了 藍(lán)色系作為背景  采用紫色作為點(diǎn)綴色！ 畫面的女主角傳遞出了 清純 可愛(ài) 運(yùn)動(dòng) 年輕的氣氛！所以一樣給用戶傳遞出了清新的感受。所以產(chǎn)品吸引大量的大學(xué)生購(gòu)買！

03 : 這也是一家日本礦泉水的官網(wǎng)

同樣它也是運(yùn)用了大量的藍(lán)色系作為背景：畫面中主要以亮藍(lán)色和亮黃色以及白色的對(duì)比再加上強(qiáng)烈對(duì)比的人物！一種 天然 陽(yáng)光  愉悅的心情   不知不覺(jué)就吸引了用戶！自然突出了人物和產(chǎn)品！最后加上亮黃色的點(diǎn)綴吸引購(gòu)買！成功增加了產(chǎn)品的購(gòu)買率！

還有很多例子！我在這里只舉例了幾項(xiàng)！

在我們需要清楚的是在我們?cè)O(shè)計(jì)小清新的網(wǎng)頁(yè)的時(shí)候可可以吸取日式網(wǎng)站中的優(yōu)秀元素！

01: 大部分采用藍(lán)色系進(jìn)行過(guò)渡

02: 增加色彩的對(duì)比 例如：亮藍(lán)色和亮黃色等

03: 選擇帶有清純 年輕化 清新 愉悅的人物 來(lái)傳達(dá)氣氛

等等！

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

圖片

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

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

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

02:下網(wǎng)站是一個(gè)傳統(tǒng)服飾的網(wǎng)站：網(wǎng)站中的圖片運(yùn)用了孩子的 攝影角度 一個(gè)正面和一個(gè)反面作為對(duì)比，通過(guò)性別對(duì)比，女孩和男孩錯(cuò)列順序，通過(guò)色彩的 暖色和冷色進(jìn)行一個(gè)對(duì)比，通過(guò)板塊大小的對(duì)比 網(wǎng)站中 小圖片和大圖片進(jìn)行對(duì)比！通過(guò)幾何圖形來(lái)對(duì)比，正方形和長(zhǎng)方形的對(duì)比！這樣的好處就是讓用戶即使閱讀這么多圖片的時(shí)候 變的清晰條理還不亂還能保持很大的新鮮感！減少用戶的視覺(jué)疲勞！

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

中的圖片處理方式：第一張圖片使用近景來(lái)表現(xiàn)食物的細(xì)節(jié)！

第二張采用 遠(yuǎn)景來(lái)表現(xiàn)飯店的外觀，

第三張第四張：同樣通過(guò)近景的手法來(lái)表現(xiàn)食物的加工過(guò)程

第五張：使用遠(yuǎn)景表現(xiàn)整個(gè)全景照片

第六張：使用近景來(lái)表現(xiàn)食物細(xì)節(jié)誘惑的感覺(jué)

第七張：使用遠(yuǎn)景體現(xiàn)整個(gè)參觀的內(nèi)部感覺(jué)

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

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

01: 具有統(tǒng)一性［主要體現(xiàn)在 色調(diào) 人物占有畫面的比例 人物的造型 人物表情狀態(tài) 等］

02: 通過(guò)對(duì)比來(lái)｛主要體現(xiàn)在 近景和遠(yuǎn)景的對(duì)比   冷暖色彩的對(duì)比   人物性別的對(duì)比 人物的造型姿勢(shì)的對(duì)比   形狀大小比例的對(duì)比  利用圖形來(lái)做對(duì)比 等｝等等方式！都是可以值得我們?cè)诰W(wǎng)站中運(yùn)用的時(shí)候需要注意的.

03: 突出主體！弱化背景！

文字

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

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

使用豎長(zhǎng)方形比例來(lái)排版

使用橫長(zhǎng)方形比例來(lái)排版

使用六邊形比例進(jìn)行排版

使用正方形比例進(jìn)行排版

使用圓形的比例進(jìn)行文字排版

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

同樣使用豎排的文字方式進(jìn)行排版的案例，下圖文字采用豎排的方式！使得整個(gè)畫面更加有貼切感。

未完待續(xù)…