色彩

當我們看到小清新的網站的時候首先一定會想到日式網站！主要為年輕化的用戶群網站居多！

01:sarara   一家純凈水的網站！主要突出網站的  靜  純  自然  

所以它的網站主題色系為藍色系，主要由高飽藍色到低飽藍色的過度，加上明暗對比的強烈！直接了當的突出宣傳的產品！足夠吸引用戶的購買欲望。！

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

03 : 這也是一家日本礦泉水的官網

同樣它也是運用了大量的藍色系作為背景：畫面中主要以亮藍色和亮黃色以及白色的對比再加上強烈對比的人物！一種 天然 陽光  愉悅的心情   不知不覺就吸引了用戶！自然突出了人物和產品！最后加上亮黃色的點綴吸引購買！成功增加了產品的購買率！

還有很多例子！我在這里只舉例了幾項！

在我們需要清楚的是在我們設計小清新的網頁的時候可可以吸取日式網站中的優秀元素！

01: 大部分采用藍色系進行過渡

02: 增加色彩的對比 例如：亮藍色和亮黃色等

03: 選擇帶有清純 年輕化 清新 愉悅的人物 來傳達氣氛

等等！

掌握了這些要領 相信各位設計一個接地氣的日式小清新的網站。

圖片

日式網站在處理頁面中的圖片的時候，會哪些規律呢？ 那么下面我們看看一些案例。

01:AIM info  網站團隊欄目中運用的圖片具有統一的調性，主要體現在：

她們的色調，人物視角， 及人物占有畫面的比例，通過男女對相別比的先后順序緩解視覺的疲勞！因此這樣的處理方式會給用戶一種專業 嚴謹  信任的感覺。

02:下網站是一個傳統服飾的網站：網站中的圖片運用了孩子的 攝影角度 一個正面和一個反面作為對比，通過性別對比，女孩和男孩錯列順序，通過色彩的 暖色和冷色進行一個對比，通過板塊大小的對比 網站中 小圖片和大圖片進行對比！通過幾何圖形來對比，正方形和長方形的對比！這樣的好處就是讓用戶即使閱讀這么多圖片的時候 變的清晰條理還不亂還能保持很大的新鮮感！減少用戶的視覺疲勞！

03:網站中的圖片使用 近景遠景的對比處理手法：如下網站：

中的圖片處理方式：第一張圖片使用近景來表現食物的細節！

第二張采用 遠景來表現飯店的外觀，

第三張第四張：同樣通過近景的手法來表現食物的加工過程

第五張：使用遠景表現整個全景照片

第六張：使用近景來表現食物細節誘惑的感覺

第七張：使用遠景體現整個參觀的內部感覺

這樣的處理手法 使得整個畫面中圖多而不亂，增加了圖片中的節奏感和層次！讓用戶不斷有新鮮感去瀏覽圖片! 

04：下網站也是通過近景和遠景的方式來搭配圖片

根據上面幾個案例分析得來我們在網站運用圖片可借鑒的幾種方式！

01: 具有統一性［主要體現在 色調 人物占有畫面的比例 人物的造型 人物表情狀態 等］

02: 通過對比來｛主要體現在 近景和遠景的對比   冷暖色彩的對比   人物性別的對比 人物的造型姿勢的對比   形狀大小比例的對比  利用圖形來做對比 等｝等等方式！都是可以值得我們在網站中運用的時候需要注意的.

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

文字

01：使用幾何圖圖形的形狀比例來進行文字排版

使用三角形比例進行文字文字排版

使用豎長方形比例來排版

使用橫長方形比例來排版

使用六邊形比例進行排版

使用正方形比例進行排版

使用圓形的比例進行文字排版

下面食品網站：文字進行豎排有效的將主視覺和介紹性的文字結合起來。又不失美感

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

等等！

02:使用圖案和文字結合的方式進行排版！這樣使文字更加的趣味！使用戶更快的理解！獲取vi中的圖形和文字結合排版！不適單調。讓頁面更加緊密。

下面頁面也是類似這樣的方式，延展vi中的元素進行圖文搭配通過特殊處理文字效果，

使得文案中重要突出的內容  直接抓取了用戶的視覺！

通過特殊處理文字效果，使得文案中重要突出的內容  直接抓取了用戶的視覺！

通過添加了圖形讓整個文字變的更加的豐富！

比較夸張的圖形和文字內容進行結合展示！也是很有趣味性

下面案例也是巧妙的利用圖像和文案結合排版 ，也是很有趣味！

03：使用圖像和文字排版的案例

下圖就是使用實景圖像和文字進行一個巧妙結合設計！夸張的人物模特和神情。

增加了文案排版的視覺沖擊力！讓原本單調的文字變的有活力。

根據上面幾個案例分析得來我們在網站中進行文字排版可借鑒的幾種方式！

01: 學會借鑒幾何圖形的比例去排版文字

02: 文字排版中巧妙的加入圖形，不僅變的具有創意還會讓你所表達的信息內容更加易懂。

03: 文字排版中學會融入來生活中圖像元素，不僅會讓你的視覺上得到質的提升 還會讓你整個內容更加的接地氣。等等還有很多方式需要你們去發掘了。

元素

網站中的 線條運用！幾何圖像的運用！

01:搭配文字一起運用！ 

下面網站為了突出數字部分，采用明亮的線條作為提示作用！ 這樣不僅潮流，而且有效的抓住了用戶的視覺和突出了重點！

相同的道理 這里也運用了線條 來突出文字的重要性！

02:按鈕的運用！

下面的網頁 將線條運用在網頁中的按鈕上！告別實色為主的方式，利用線條更好和整體融合 ！加強了按鈕的透徹感也是非常新穎的展現方式！

03:網頁整體的裝飾作用：

線條的加入讓下面的網頁每一屏之前有了區分感！同時也吸引了用戶的注意力。避免了兩屏內容相互干擾。

等等：

2: 常用的利用線來輔助作用！

01:利用線條進行分隔作用的案例：下面網站為了讓整個信息更加的有條理的去展示！避免了彼此的干擾。

下面案例的線條也是采用一樣的修飾輔助作用！

3 : 網頁中的利用純色方式來突出信息內容

01:下面利用純色方式提煉文字的案例

下面網站為了讓用戶第一視覺看到網站表達的重要內容，所以利用了純色打底方式來修飾文字，成功的讓用戶第一眼注視到了它們！

下面案例為來日式文字為來和英文區分，也采用了純色的方式來區分和突出需要表達的信息內容

02:下面是利用純色來作為板塊之間的區分案例 這是網站設計最常用的方式。

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

下圖網站也是采用不同的背景顏色，讓畫面變的有主次，富有層次感。

03:采用活潑的幾何形狀作為背景的方式。

使得整個網頁不單調，給用戶一種活力青春的感覺，使模特和和整個畫面結合的更加緊密.

04:加入科技的元素，讓你的產品增分出彩。

下面網站是一家賣眼鏡的產品，畫面中讓流線型的科技元素的加入，使得眼鏡給用戶 先進 科技 現代的感受，使得用戶更加直觀的了解產品的賣點。

05:下面網站是一家市場雜志的模特網站，網站同樣加入了 現代 科技 感的元素，使整個網站變的潮流

超前起來。

06:加入繪畫的元素讓網站更富有活力和創新色彩

下面網站是一家寺廟的景區網站，網站將平時在寺廟運動的人群， 使用繪畫的方式唯美的展示出來，

既不搶主體視覺，又為網站增加了幾分色彩，真正的讓用戶看到此網站就想去當地體驗一番。

下面網站的開場動畫，也是利用繪畫的方式來描述了整個企業的歷史－發展到現代，利用繪畫讓歷史感體現的十足，同時也很有創新的網站。

下面網站是一家賣蘋果的網站，網站中背景采用大量的種植蘋果樹景色的插畫，搭配文字，簡單而不失優雅，用簡單粗暴的方式 告訴用戶我們就是賣蘋果的。

07 : 讓實景圖片的元素融入網站，使得網站更加的接地氣。 

下面網站是一家婚慶公司的宣傳網站，網站背景采用了將新娘手捧鮮花的照片 設置透明度模糊展示

既不強主視覺，又讓背景和照片完美的融入和呼應，給用戶一種淡雅 幸福的感覺。

下面網站也是采用了生活照片元素，巧妙的融入網站中，給用戶感覺就像在現場觀看一樣！

08: 加入強烈的幾何圖形，讓網站變的更有創意力！

下面是一家設計創意的公司，整個網站背景采用大量的立體圖形元素作為背景裝飾，告別傳統，加上炫酷的動效，足以說明是一家創意十足的設計公司！

根據上面幾個案例分析得來我們在網站中進行元素運用的時候可借鑒的幾種方式！

01:線條的運用，既可以起到裝飾 輔助分隔的作用，又可以作為重點信息突出

02: 背景紋理純色的運用，有效的起到了網站分隔和區分對比的作用。

03: 幾何圖形的運用，讓你的網站更有新意。

04:科技的元素的運用，讓你的網站的產品賣點更突出，優勢更明顯。

05: 增加氛圍，可以讓你的網站的變的更有青春活力。

06: 實景圖的運用，可以使網站更貼切生活。

07:手繪元素的運用，讓你的網站更出彩。

等等，還有很多元素  也需要各位仁兄去發掘，并且巧妙的運用！