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