那些讓我們上癮的日本網站設計，到底好在哪裡？
一.色彩
當我們看到小清新風格網站的時候，首先想到的一定是日式網站，因為年輕化的用戶群佔網站多數。
1sarara：一家純凈水的網站主要突出網站的：靜、純、自然。
它的網站主題色係為藍色系，主要由高飽藍色到低飽藍色的過度，加上明暗對比的強烈，直接了當地突出宣傳的產品。
2該網站的主要面向目標人群是大學生。
選擇的人物是比較清純、有活力的女生，讓她告訴用戶在炎熱的夏季一瓶飲料給他們帶來涼爽的感覺所帶來的喜悅。
同樣採用了藍色系作為背景，紫色作為點綴色。畫面的女主角傳遞出了清純、可愛、運動、年輕的氣氛！所以一樣給用戶傳遞出了清新的感受。
3這是一家日本礦泉水的官網。
運用了大量的藍色系作為背景。畫面中主要以藍白對比來反襯人物，給人一種天然、陽光、愉悅的感覺，不知不覺就吸引了用戶，自然突出了人物和產品。最後加上亮黃色的點綴吸引購買，成功增加了產品的購買率！
在設計小清新風格網頁的時候可以吸取日式網站中的優秀元素：
1: 大部分採用藍色系進行過渡
2: 增加色彩的對比。例如：亮藍色和亮黃色等
3: 選擇帶有清純、年輕化、清新、愉悅的人物來傳達氣氛
掌握了這些要領，相信各位設計一個接地氣的日式小清新的網站。
二.圖片
日式網站在處理頁面中的圖片的時候，有哪些規律呢？ 來看一些案例。
1AIM info：網站團隊欄目中運用的圖片具有統一的調性。
主要體現在： 她們的色調，人物視角， 及人物佔有畫面的比例，通過男女對比的先後順序緩解視覺的疲勞。這樣的處理方式會給用戶一種專業、嚴謹、信任的感覺。
2以下網站是一個傳統服飾的網站。
網站中的圖片運用了孩子的攝影角度。正面和面的對比，性別的對比，女孩和男孩錯列順序，色彩冷暖的對比，板塊大小的對比，網站中小圖片和大圖片的對比，幾何圖形的對比，正方形和長方形的對比……這樣的好處是讓用戶即使閱讀這麼多圖片的時候仍舊感覺畫面整潔舒服、條理清晰，並且保持很大的新鮮感，也不會感覺視覺疲勞。
3網站中的圖片使用近景遠景的對比處理手法。
如下網站中的圖片處理方式：
第一張：圖片使用近景來表現食物的細節
第二張：採用遠景來表現飯店的外觀
第三張第四張：通過近景的手法來表現食物的加工過程
第五張：使用遠景表現整個全景照片
第六張：使用近景來表現食物細節誘惑的感覺
第七張：使用遠景體現整個參觀的內部感覺
這樣的處理手法使得整個畫面中圖多而不亂，增加了圖片中的節奏感和層次，讓用戶不斷有新鮮感去瀏覽圖片。
4以下網站也是通過近景和遠景的方式來搭配圖片的。
根據上面幾個案例分析，可以得出在網站運用圖片時可借鑒的幾種方式：
1: 具有統一性。主要體現在色調、人物佔有畫面的比例、人物的造型、人物表情狀態等。
2: 善用對比。主要體現在近景和遠景的對比、冷暖色彩的對比、人物性別的對比、人物造型姿勢的對比、形狀大小比例的對比、利用圖形來做對比等等
3: 突出主體，弱化背景！
三.文字
1使用幾何圖形的形狀比例來進行文字排版。
使用三角形比例進行文字文字排版
使用豎長方形比例來排版
使用橫長方形比例來排版
使用六邊形比例進行排版
使用正方形比例進行排版
使用圓形的比例進行文字排版
食品網站：文字進行豎排，有效地將主視覺和介紹性的文字結合起來，又不失美感。
同樣使用豎排的文字方式進行排版的案例，使整個畫面更加有貼切感。
2使用圖案和文字結合的方式進行排版，使文字更有趣味性， 讓頁面更加緊密。
通過添加圖形讓整個文字變得更加豐富。
誇張的圖形和文字內容進行結合展示，也很有趣味性。
3使用圖像和文字排版的案例
下圖就是使用實景圖像和文字進行設計的巧妙結合。誇張的人物模特和神情 增加了文案排版的視覺衝擊力，讓原本單調的文字變得有活力。
根據以上幾個案例可以總結出網站中文字排版可借鑒的幾種方式：
1: 學會借鑒幾何圖形的比例來排版文字
2: 文字排版中巧妙地加入圖形，不僅有創意還會讓表達的信息內容更加易懂
3: 文字排版中學會融入來自生活中的圖像元素，不僅會讓視覺效果得到質的提升，還會使整個內容更加接地氣
四.元素
網站中的線條以及幾何圖像的運用。
1搭配文字一起運用。
下面網站為了突出數字部分，採用明亮的線條作為提示作用。不僅潮流，而且有效地抓住了用戶的視覺和突出了重點。
同理，這裡也運用了線條來突出文字的重要性。
2按鈕的運用。
下面的網頁將線條運用在網頁中的按鈕上。告別實色為主的方式，利用線條更好地和整體融合。加強了按鈕的透徹感也是非常新穎的展現方式。
3網頁整體的裝飾作用。
線條的加入讓下面的網頁每一屏之前有了區分感！同時也吸引了用戶的注意力，避免了兩屏內容相互干擾。
4利用線進行輔助修飾。
下面網站為了讓整個信息更加的有條理的去展示，利用線條進行了分隔，避免了彼此的干擾。
5網頁中利用純色方式來突出信息內容。
下面網站為了讓用戶第一視覺看到網站表達的重要內容，利用了純色打底方式來修飾文字，成功地讓用戶第一眼注意到了它們。
下面案例為了將日式文字和英文進行區分，也採用了純色的方式來區分和突出需要表達的信息內容。
6利用純色作為板塊之間的區分，這是網站設計最常用的方式。
下面是一個網站的底部，為了讓top到頂部的功能和底部板塊信息得到有效的區分，採用了兩種色彩來分離兩個板塊的信息，讓原本雜亂的頁面變得有條理。
下圖網站也是採用不同的背景顏色，讓畫面變的有主次，富有層次感。
7採用活潑的幾何形狀作為背景。
這種方式使得整個網頁不單調，給用戶一種活力青春的感覺，使模特和和整個畫面結合得更加緊密。
8加入科技的元素，讓產品加分出彩。
下面網站是一家賣眼鏡的產品，畫面中流線型科技元素的加入，使得眼鏡給用戶先進、科技、現代的感受。
下面網站是一家市場雜誌的模特網站，網站同樣加入了現代科技感的元素，使整個網站變的潮流超前起來。
9加入繪畫元素讓網站更富有活力和創新色彩。
下面網站是一家寺廟的景區網站，網站將平時在寺廟運動的人群， 使用繪畫的方式唯美地展示出來， 既不搶主體視覺，又為網站增加了幾分色彩，真正地讓用戶看到此網站就想去當地體驗一番。
下面網站的開場動畫，利用繪畫的方式來描述整個企業的歷史及發展，既有歷史感，又很有創新的感覺。
下面網站是一家賣蘋果的網站，網站中背景採用大量種植蘋果樹景色的插畫，搭配文字，簡單而不失優雅，用簡單粗暴的方式告訴用戶我們就是賣蘋果的。
10讓實景圖片的元素融入網站，使網站更加接地氣。
下面網站是一家婚慶公司的宣傳網站，網站背景採用了新娘手捧鮮花的照片。設置透明度模糊展示， 既不搶主視覺，又讓背景和照片完美地融入和呼應，給用戶一種淡雅幸福的感覺。
下面網站採用了生活照片元素，巧妙地融入網站中，給用戶感覺就像在現場觀看一樣！
11加入強烈的幾何圖形，讓網站變得更有創意力。
下面是一家設計創意的公司，整個網站背景採用大量立體圖形元素作為背景裝飾，告別傳統，加上炫酷的動效，足以說明是一家創意十足的設計公司！
根據上面幾個案例可以總結出在網站中進行元素設計時可借鑒的幾種方式：
1: 線條的運用，既可以起到裝飾輔助分隔的作用，又可以作為重點信息突出
2: 背景紋理純色的運用，有效的起到了網站分隔和區分對比的作用
3: 幾何圖形的運用，讓你的網站更有新意
4:科技元素的運用，讓網站的產品賣點更突出，優勢更明顯
5: 增加氛圍，可以讓網站變得更有青春活力
6: 實景圖的運用，可以使網站更貼近生活
7:手繪元素的運用，讓網站更出彩
轉自：交互設計學堂
BIGBANG交互設計小課堂
可 能 是 中 國 最 小 的 設 計 號
只 分 享 最 精 華 的 設 計 小 文
BY
大 邦 創 新
www.bigbang-consulting.com
—
WE HELP BUILD FUTURE
THROUGH INNOVATION
價 值 源 於 創 新
QQ群 391169619
站長微信 LeonHo002
小編微信 xiaoshapixiaoke
打 破 僵 界 無 畏 創
※這麼好的設計，不是每天都能看到！
※日本那些美到逆天的招牌設計，你喜歡哪一個
※日本設計做了哪些我們沒做的事？
※日本到底有多乾淨？看看這些垃圾袋設計就知
※這些設計，看起來都挺好吃
※謝娜快本透露：這可能是我最後一期了！到底進修設計還是懷孕了？接班人是沈夢辰？
※這麼多好的設計都在哪兒呢？
※這門到底是誰設計的！
※當我們為設計買單的時候，我們買了什麼？
※這些設計，看起來都挺好吃｜這個設計了不起
※當設計師在看金馬獎，他們到底在看什麼？
※盤點那些好看卻不好用的家裝設計，你中了哪幾條？
※告訴我，設計師是想上天嗎？這種高跟鞋誰來穿？
※我就是沖著吃，才去設計的！
※日本的包裝設計好在哪裡？
※那麼多的聯名設計，但最後是誰買到了它們？
※春天要來了，在家裡也可以賞花了｜這個設計了不起【好奇心日報】
※這才是好設計，不僅要上牆，還要上天！
※設計濕你出來，這些發明是逗我玩的嘛？