本文主要通過日式網(wǎng)站的設(shè)計、色彩、文字、圖片、元素這四個方面去解析。 適合所有愿意提升網(wǎng)頁設(shè)計的小伙伴看。希望對大家有所幫助和提升。
來源：站酷
作者：俊敏
原標題：淺談日式網(wǎng)站 我們需要學(xué)會哪些？
數(shù)英網(wǎng)對內(nèi)容有所編輯
一.色彩
當(dāng)我們看到小清新風(fēng)格網(wǎng)站的時候，首先想到的一定是日式網(wǎng)站，因為年輕化的用戶群占網(wǎng)站多數(shù)。
1
sarara：一家純凈水的網(wǎng)站主要突出網(wǎng)站的：靜、純、自然。
它的網(wǎng)站主題色系為藍色系，主要由高飽藍色到低飽藍色的過度，加上明暗對比的強烈，直接了當(dāng)?shù)赝怀鲂麄鞯漠a(chǎn)品。
2
該網(wǎng)站的主要面向目標人群是大學(xué)生。
選擇的人物是比較清純、有活力的女生，讓她告訴用戶在炎熱的夏季一瓶飲料給他們帶來涼爽的感覺所帶來的喜悅。
同樣采用了藍色系作為背景，紫色作為點綴色。畫面的女主角傳遞出了清純、可愛、運動、年輕的氣氛！所以一樣給用戶傳遞出了清新的感受。
3
這也是一家日本礦泉水的官網(wǎng)。
運用了大量的藍色系作為背景。畫面中主要以藍白對比來反襯人物，給人一種天然、陽光、愉悅的感覺，不知不覺就吸引了用戶，自然突出了人物和產(chǎn)品。最后加上亮黃色的點綴吸引購買，成功增加了產(chǎn)品的購買率！
在設(shè)計小清新風(fēng)格網(wǎng)頁的時候可以吸取日式網(wǎng)站中的優(yōu)秀元素：
1: 大部分采用藍色系進行過渡
2: 增加色彩的對比。例如：亮藍色和亮黃色等
3: 選擇帶有清純、年輕化、清新、愉悅的人物來傳達氣氛
掌握了這些要領(lǐng)，相信各位設(shè)計一個接地氣的日式小清新的網(wǎng)站。
二.圖片
日式網(wǎng)站在處理頁面中的圖片的時候，有哪些規(guī)律呢？ 來看一些案例。
1
AIM info：網(wǎng)站團隊欄目中運用的圖片具有統(tǒng)一的調(diào)性。
主要體現(xiàn)在：她們的色調(diào)，人物視角， 及人物占有畫面的比例，通過男女對比的先后順序緩解視覺的疲勞。這樣的處理方式會給用戶一種專業(yè)、嚴謹、信任的感覺。
2
以下網(wǎng)站是一個傳統(tǒng)服飾的網(wǎng)站。
網(wǎng)站中的圖片運用了孩子的攝影角度。正面和面的對比，性別的對比，女孩和男孩錯列順序，色彩冷暖的對比，板塊大小的對比，網(wǎng)站中小圖片和大圖片的對比，幾何圖形的對比，正方形和長方形的對比……這樣的好處是讓用戶即使閱讀這么多圖片的時候仍舊感覺畫面整潔舒服、條理清晰，并且保持很大的新鮮感，也不會感覺視覺疲勞。
3
網(wǎng)站中的圖片使用近景遠景的對比處理手法。
如下網(wǎng)站中的圖片處理方式：
第一張：圖片使用近景來表現(xiàn)食物的細節(jié)
第二張：采用遠景來表現(xiàn)飯店的外觀
第三張第四張：通過近景的手法來表現(xiàn)食物的加工過程
第五張：使用遠景表現(xiàn)整個全景照片
第六張：使用近景來表現(xiàn)食物細節(jié)誘惑的感覺
第七張：使用遠景體現(xiàn)整個參觀的內(nèi)部感覺
這樣的處理手法使得整個畫面中圖多而不亂，增加了圖片中的節(jié)奏感和層次，讓用戶不斷有新鮮感去瀏覽圖片。
4
以下網(wǎng)站也是通過近景和遠景的方式來搭配圖片的。
根據(jù)上面幾個案例分析，可以得出在網(wǎng)站運用圖片時可借鑒的幾種方式：
1: 具有統(tǒng)一性。主要體現(xiàn)在色調(diào)、人物占有畫面的比例、人物的造型、人物表情狀態(tài)等。
2: 善用對比。主要體現(xiàn)在近景和遠景的對比、冷暖色彩的對比、人物性別的對比、人物造型姿勢的對比、形狀大小比例的對比、利用圖形來做對比等等
3: 突出主體，弱化背景！
三.文字
1
使用幾何圖形的形狀比例來進行文字排版。
使用三角形比例進行文字文字排版
使用豎長方形比例來排版
使用橫長方形比例來排版
使用六邊形比例進行排版
使用正方形比例進行排版
使用圓形的比例進行文字排版
食品網(wǎng)站：文字進行豎排，有效地將主視覺和介紹性的文字結(jié)合起來，又不失美感。
同樣使用豎排的文字方式進行排版的案例，使整個畫面更加有貼切感。
2
使用圖案和文字結(jié)合的方式進行排版，使文字更有趣味性，讓頁面更加緊密。
通過添加圖形讓整個文字變得更加豐富。
夸張的圖形和文字內(nèi)容進行結(jié)合展示，也很有趣味性。
3
使用圖像和文字排版的案例
下圖就是使用實景圖像和文字進行設(shè)計的巧妙結(jié)合。夸張的人物模特和神情增加了文案排版的視覺沖擊力，讓原本單調(diào)的文字變得有活力。
根據(jù)以上幾個案例可以總結(jié)出網(wǎng)站中文字排版可借鑒的幾種方式：
1: 學(xué)會借鑒幾何圖形的比例來排版文字
2: 文字排版中巧妙地加入圖形，不僅有創(chuàng)意還會讓表達的信息內(nèi)容更加易懂
3: 文字排版中學(xué)會融入來自生活中的圖像元素，不僅會讓視覺效果得到質(zhì)的提升，還會使整個內(nèi)容更加接地氣
四.元素
網(wǎng)站中的線條以及幾何圖像的運用。
1
搭配文字一起運用。
下面網(wǎng)站為了突出數(shù)字部分，采用明亮的線條作為提示作用。不僅潮流，而且有效地抓住了用戶的視覺和突出了重點。
同理，這里也運用了線條來突出文字的重要性。
2
按鈕的運用。
下面的網(wǎng)頁將線條運用在網(wǎng)頁中的按鈕上。告別實色為主的方式，利用線條更好地和整體融合。加強了按鈕的透徹感也是非常新穎的展現(xiàn)方式。
3
網(wǎng)頁整體的裝飾作用。
線條的加入讓下面的網(wǎng)頁每一屏之前有了區(qū)分感！同時也吸引了用戶的注意力，避免了兩屏內(nèi)容相互干擾。
4
利用線進行輔助修飾。
下面網(wǎng)站為了讓整個信息更加的有條理的去展示，利用線條進行了分隔，避免了彼此的干擾。
5
網(wǎng)頁中利用純色方式來突出信息內(nèi)容。
下面網(wǎng)站為了讓用戶第一視覺看到網(wǎng)站表達的重要內(nèi)容，利用了純色打底方式來修飾文字，成功地讓用戶第一眼注意到了它們。
下面案例為了將日式文字和英文進行區(qū)分，也采用了純色的方式來區(qū)分和突出需要表達的信息內(nèi)容。
6
利用純色作為板塊之間的區(qū)分，這是網(wǎng)站設(shè)計最常用的方式。
下面是一個網(wǎng)站的底部，為了讓top到頂部的功能和底部板塊信息得到有效的區(qū)分，采用了兩種色彩來分離兩個板塊的信息，讓原本雜亂的頁面變得有條理。
下圖網(wǎng)站也是采用不同的背景顏色，讓畫面變的有主次，富有層次感。
7
采用活潑的幾何形狀作為背景。
這種方式使得整個網(wǎng)頁不單調(diào)，給用戶一種活力青春的感覺，使模特和和整個畫面結(jié)合得更加緊密。
8
加入科技的元素，讓產(chǎn)品加分出彩。
下面網(wǎng)站是一家賣眼鏡的產(chǎn)品，畫面中流線型科技元素的加入，使得眼鏡給用戶先進、科技、現(xiàn)代的感受。
下面網(wǎng)站是一家市場雜志的模特網(wǎng)站，網(wǎng)站同樣加入了現(xiàn)代科技感的元素，使整個網(wǎng)站變的潮流超前起來。
9
加入繪畫元素讓網(wǎng)站更富有活力和創(chuàng)新色彩。
下面網(wǎng)站是一家寺廟的景區(qū)網(wǎng)站，網(wǎng)站將平時在寺廟運動的人群， 使用繪畫的方式唯美地展示出來，既不搶主體視覺，又為網(wǎng)站增加了幾分色彩，真正地讓用戶看到此網(wǎng)站就想去當(dāng)?shù)伢w驗一番。
下面網(wǎng)站的開場動畫，利用繪畫的方式來描述整個企業(yè)的歷史及發(fā)展，既有歷史感，又很有創(chuàng)新的感覺。
下面網(wǎng)站是一家賣蘋果的網(wǎng)站，網(wǎng)站中背景采用大量種植蘋果樹景色的插畫，搭配文字，簡單而不失優(yōu)雅，用簡單粗暴的方式告訴用戶我們就是賣蘋果的。
10
讓實景圖片的元素融入網(wǎng)站，使網(wǎng)站更加接地氣。
下面網(wǎng)站是一家婚慶公司的宣傳網(wǎng)站，網(wǎng)站背景采用了新娘手捧鮮花的照片。設(shè)置透明度模糊展示，既不搶主視覺，又讓背景和照片完美地融入和呼應(yīng)，給用戶一種淡雅幸福的感覺。
下面網(wǎng)站采用了生活照片元素，巧妙地融入網(wǎng)站中，給用戶感覺就像在現(xiàn)場觀看一樣！
11
加入強烈的幾何圖形，讓網(wǎng)站變得更有創(chuàng)意力。
下面是一家設(shè)計創(chuàng)意的公司，整個網(wǎng)站背景采用大量立體圖形元素作為背景裝飾，告別傳統(tǒng)，加上炫酷的動效，足以說明是一家創(chuàng)意十足的設(shè)計公司！
根據(jù)上面幾個案例可以總結(jié)出在網(wǎng)站中進行元素設(shè)計時可借鑒的幾種方式：
1: 線條的運用，既可以起到裝飾輔助分隔的作用，又可以作為重點信息突出
2: 背景紋理純色的運用，有效的起到了網(wǎng)站分隔和區(qū)分對比的作用
3: 幾何圖形的運用，讓你的網(wǎng)站更有新意
4:科技元素的運用，讓網(wǎng)站的產(chǎn)品賣點更突出，優(yōu)勢更明顯
5: 增加氛圍，可以讓網(wǎng)站變得更有青春活力
6: 實景圖的運用，可以使網(wǎng)站更貼近生活
7: 手繪元素的運用，讓網(wǎng)站更出彩
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（2條）