來一場(chǎng)華麗的冒險(xiǎn)！創(chuàng)意與技術(shù)齊飛的日本網(wǎng)頁設(shè)計(jì)欣賞

編者按：今天推薦的日本網(wǎng)站，每戳進(jìn)一個(gè)，都像進(jìn)行一場(chǎng)華麗的冒險(xiǎn)。令人訝異的創(chuàng)意與強(qiáng)大的技術(shù)支持，兩者無縫交融，形成濃烈的日式設(shè)計(jì)風(fēng)格，而且，這組網(wǎng)站涵括各行各業(yè)，是真正落地的設(shè)計(jì)項(xiàng)目，即使國(guó)內(nèi)的設(shè)計(jì)師也能從中學(xué)習(xí)到很多。

韓文、中文和日文文字外形相似，所以國(guó)內(nèi)的網(wǎng)站除了中國(guó)風(fēng)之外，還能借鑒日韓的風(fēng)格。韓國(guó)網(wǎng)站我想大家也見過不少，他們特別喜歡使用Flash來制作，效果超弦（Why? 因?yàn)樗麄兙W(wǎng)速比我們快7、8倍…）。而日本網(wǎng)站呢，他們用Flash？響應(yīng)式？還是扁平化設(shè)計(jì)呢？

接下來@設(shè)計(jì)達(dá)人網(wǎng) 小編為大家精選一組優(yōu)秀的日本酷站，在收集日本網(wǎng)站的同時(shí)也讓小編驚嘆了，日本的網(wǎng)站設(shè)計(jì)以及使用的Web技術(shù)相當(dāng)不錯(cuò)，本以為日本的工業(yè)設(shè)計(jì)好，想不到網(wǎng)站設(shè)計(jì)水平也相當(dāng)高。

日本網(wǎng)頁設(shè)計(jì)：很多已經(jīng)使用新的網(wǎng)頁設(shè)計(jì)趨勢(shì)，如視差滾動(dòng)、全屏背景、全屏視頻等等，很少使用Flash，特別注重網(wǎng)頁的配色、版式和交互設(shè)計(jì)，整體網(wǎng)頁布局新穎，不少網(wǎng)站使用了可愛的漫畫式手繪風(fēng)格。

Web前端技術(shù)方面：已有部分網(wǎng)站開始HTML5、CSS3技術(shù)，雖然使用這些新技術(shù)，但在IE8兼容方面還是做得很好的，有的不兼容IE8的會(huì)做一個(gè)瀏覽器兼容提示。

下面一起來欣賞這些優(yōu)秀的日本網(wǎng)頁設(shè)計(jì)作品，希望對(duì)你的新項(xiàng)目帶來靈感吧，Enjoy！

Hanamichiya

很漂亮的水彩背景，網(wǎng)站的右側(cè)菜單效果很贊！看來很多日本設(shè)計(jì)師的手繪功底都很厲害啊！各位小伙伴，你懂手繪了嗎？

附：《非科班同學(xué)有福啦！手把手教你從零基礎(chǔ)開始學(xué)素描！》

Dascorp

該網(wǎng)頁使用了響應(yīng)式設(shè)計(jì)，基本兼容IE8，當(dāng)用戶向下滾動(dòng)網(wǎng)頁設(shè)計(jì)，內(nèi)容會(huì)漸變顯示出來。

Mitsugashi

設(shè)計(jì)簡(jiǎn)約的糕點(diǎn)食品網(wǎng)站，但這種簡(jiǎn)約在國(guó)內(nèi)很容易飛機(jī)稿。

Regettacanoe

明快的藍(lán)色與黃色的時(shí)尚配色，很符合網(wǎng)站主題。左上角菜單藍(lán)色的曲線好像和鞋跟一樣，這是令人印象深刻的設(shè)計(jì)。

Ca4la

很獨(dú)特的小型電子商務(wù)網(wǎng)站，瀏覽時(shí)注意看那些動(dòng)畫，好玩之余更有意義。

Hotakubo-Seikei

一所醫(yī)院網(wǎng)站，網(wǎng)站整體頁面設(shè)計(jì)得很精美，就連圖片質(zhì)量也很注重，這醫(yī)院看起來很高檔次啊。

醫(yī)院類網(wǎng)站在國(guó)內(nèi)肯定不會(huì)這么做了，都會(huì)做成門戶式，做內(nèi)容，搞SEO，什么內(nèi)容都有…… 不過大家可以參考他的設(shè)計(jì)，相當(dāng)不錯(cuò)。

Hishiken

漂亮的圖像+視差特效，很美的網(wǎng)頁啊。

Asitanosikaku

網(wǎng)站前面那個(gè)有點(diǎn)手繪風(fēng)格的橢圓是用html5 Canvas做出來的，鼠標(biāo)經(jīng)過帶有一些彈性效果，其次這個(gè)橢圓還能根據(jù)瀏覽器分辨率來自適應(yīng)大小哦。

點(diǎn)擊每個(gè)連接的內(nèi)容都是AJAX加載，總體的交互設(shè)計(jì)體驗(yàn)真的很不錯(cuò)。

Kataomoi3

網(wǎng)站使用文字飄落來做視差效果，很漂亮，做個(gè)人博客類的網(wǎng)站推薦。

Kiyomizudera

用全屏視頻作為背景的網(wǎng)頁，視頻的景色超贊，文字使用垂直排版，垂直字體是日本常用的一種排版方式，其實(shí)古時(shí)中文也是垂直的，從首頁點(diǎn)擊進(jìn)去后，默認(rèn)是全屏幻燈片展示，整體感覺很有Feel，有木有？

學(xué)習(xí)院女子大學(xué)

首頁Flash banner做得不錯(cuò)呢。整體色調(diào)很符合網(wǎng)站的主題，即使是粉色也不會(huì)流俗。

Q-Co

不得不說，里面的創(chuàng)意很贊，進(jìn)入首頁后，用筆畫一個(gè)圓圈，然后圓圈里會(huì)有動(dòng)態(tài)圖像顯示。其次網(wǎng)站視差技術(shù)做得很好，

Tokyonohatakekara

甜品店的網(wǎng)站，手繪元素比較多，也很可愛。

K-Associates

一家室內(nèi)設(shè)計(jì)公司的網(wǎng)站，他們的作品展示方便很特別，使用了垂直色塊，然后從右向左的水平慢移。

點(diǎn)擊作品的圖像展示以全屏方式展示。

Japan

只想說，這網(wǎng)站不是FLash做的。

Kamomepark

首頁使用全屏幻燈展示，菜單和新聞?dòng)梅綁K固定在邊欄，方塊設(shè)計(jì)簡(jiǎn)約，所以不影響整體外觀。

產(chǎn)品展示頁是使用不間斷水平浮動(dòng)圖片方式，功能很強(qiáng)大，支持鼠標(biāo)中鍵來控制滾動(dòng)，用戶點(diǎn)小圖后全屏顯示大圖，還有一點(diǎn)細(xì)節(jié)做得不錯(cuò)，就是你瀏覽大圖時(shí)，本來水平滾動(dòng)的圖片將會(huì)停止?jié)L動(dòng)，這樣用戶關(guān)閉大圖后也能看到剛才點(diǎn)擊的位置。

C-Gp

強(qiáng)烈建議大家點(diǎn)擊一下TEAM鏈接看看。

Gooddesigncompany

日本一家設(shè)計(jì)機(jī)構(gòu)網(wǎng)站，首頁直接顯示作品，但展示的方式很有趣，不知道是怎么實(shí)現(xiàn)的。

該網(wǎng)頁的布局能自適應(yīng)寬度，普屏和寬屏瀏覽效果很佳。

Kotobanoie

全屏視屏背景網(wǎng)頁，你要一邊看視頻一邊瀏覽這個(gè)網(wǎng)站上的內(nèi)容。

Wamokei

一家模型制作公司的官方網(wǎng)站，單頁面網(wǎng)站設(shè)計(jì)，首頁的第一屏使用了全屏照片作為背景，另外當(dāng)用戶點(diǎn)擊其它頁面時(shí)，其實(shí)也是全屏的哦！

100tokyo

這個(gè)100tokyo使用了扁平化設(shè)計(jì)，也支持響應(yīng)式，整個(gè)網(wǎng)站配色以淺棕色為主。使用了簡(jiǎn)單的CSS3樣式，比如鼠標(biāo)經(jīng)過漸變效果。

Santepc

全屏Flash網(wǎng)站，看起來有沒有”潮”的感覺？

最后

各位小伙伴，看了上面的日本網(wǎng)頁設(shè)計(jì)，你覺得怎樣呢？你還會(huì)為企業(yè)做哪些爛掉牙的布局排版嗎？不一定要響應(yīng)式，不一定要扁平化，

很多網(wǎng)頁設(shè)計(jì)師需要自己寫前端代碼，所以建議大家在項(xiàng)目中多運(yùn)用CSS3，這是未來必須使用的技術(shù)。（即使不需要寫代碼也要理解它，這才能更好配合前端人員）

作者：@設(shè)計(jì)達(dá)人網(wǎng)

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量72萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：