我想很多設(shè)計師都認(rèn)同或喜歡日本的設(shè)計，不管是建筑、產(chǎn)品、包裝，在網(wǎng)頁設(shè)計方面，也有值得我們學(xué)習(xí)的地方。

今天精選了20+日式 Web Design 作品，有餐飲、產(chǎn)品專題頁、互聯(lián)網(wǎng)、設(shè)計工作室等行業(yè)，從這些案例可以看出設(shè)計師是絞盡腦汁去設(shè)計好一個網(wǎng)站，而不是簡單的「美觀」，除了做到精美、大膽的網(wǎng)頁布局，同時還增添一些細(xì)節(jié)交互動效，使網(wǎng)頁變得更加精彩。

下面大家一起來欣賞這20個漂亮的日本網(wǎng)站，請不要光看，要懂得「思考」，這就是高級設(shè)計師與初級設(shè)計師的區(qū)別。

500 Colored Pencils

一支彩鉛都要做這么漂亮的專題頁，可見日本對設(shè)計、對品牌包裝的重視程度。左右滑動的 JS 特效很好玩，看到這500支彩鉛，小編也有點心動了

G-A

話說只有設(shè)計水平到一定程度后，才這么大膽做這種設(shè)計吧？

Kirin

這是一家餐飲企業(yè)的品牌網(wǎng)站，很少餐飲企業(yè)愿意花這么多精力和資金做一個品牌網(wǎng)站，可見日本對設(shè)計的重視和大陸不是一個檔次。。

kirin 里面的很多大膽排版方式很漂亮，像是 VI 手冊般的平面設(shè)計，但又比 VI 好一點，因為多了些動態(tài)效果，還有個強大之處就是，這排版還支持響應(yīng)式。

SERAKU

這是一家互聯(lián)網(wǎng)機構(gòu)，網(wǎng)站采用了雙語言（日語+英文），以日式插畫作為首屏頁面，讓首頁擁有強大的視覺吸引力。網(wǎng)站的英文字體、數(shù)字沒有使用系統(tǒng)自帶，而是其它嵌入式字體，以視覺優(yōu)先。

Gina

Gina 也是一個餐飲食品網(wǎng)站，這個首頁的視覺離不開攝影師的功勞，漂亮的擺拍攝影讓首頁增添不少美感。

Toshin-Sekai

一家網(wǎng)站雜志媒體網(wǎng)站，日后你要設(shè)計信息類的網(wǎng)站，這個時尚版式是不錯的參考對象。

網(wǎng)站的導(dǎo)航菜單直接隱藏了，采用「面包屑」導(dǎo)航，展開后，是這樣子：

Udatsu

單單是用鼠標(biāo)移動左側(cè)導(dǎo)航的哪一個細(xì)微交互，這也已經(jīng)很不錯了。要懂得思考啊，同學(xué)們。

Newgraduate

簡約時尚的網(wǎng)頁設(shè)計。

Carborocco

干凈的頁面布局，有時候只用圖片排版可能會很單調(diào)，比如有些地方空白太多，所以設(shè)計師就加了一些圖形來做點綴，每個頁面都很 nice，所以不要光看首頁，其它頁面也點點看哦！

B-Monster

上面的排版太過有特色？太個性？好吧，來個中規(guī)中矩的給你看。

Tamanabokujo

手繪風(fēng)格的導(dǎo)航設(shè)計也是很有意思哦。

Aozoramokuzai

也是中規(guī)中矩的頁面排法，這種網(wǎng)站 Banner 的視覺也重要。這家木材廠的橫幅就使用了視頻來做，效果也相當(dāng)不錯。

Danielspatzek

一個設(shè)計師的個人網(wǎng)站，創(chuàng)意十足呢！特別是動效超 cool，實現(xiàn)起來估計也相當(dāng)麻煩的。（但這個不是日本網(wǎng)站）

Foodfloor

美食 APP 著陸頁的設(shè)計

Orangina

只彩2種顏色搭配的網(wǎng)站，藍(lán)色+黃色，效果也很棒呢，你怎么看？

Kirameki Dental Land

一家專注兒童牙齒健康機構(gòu)的網(wǎng)站，導(dǎo)航使用了與 LOGO 相襯的多彩點綴，使整體視覺看起來活躍不少。

Suzuka 2017 專題頁設(shè)計

Kyoeiseicha

kyoeiseicha 是一家賣茶的企業(yè)品牌，網(wǎng)站采用自然界的綠色作為主色，首屏 Banner 使用了不規(guī)則的形狀圖案，還有就是圖像方面也用上了「高清圖片」的質(zhì)量，這才能使得網(wǎng)頁看起來不會低端、劣質(zhì)，以后記得不要省那幾個流量啦！

Koshibasaki

某明星的介紹頁

Descente

Kenjiokabe

靜靜的用圖片記錄生活點滴：

以上優(yōu)秀 Website 均摘自設(shè)計導(dǎo)航推薦的：MUUUUU, 4db, straightline 以及 81-web日本網(wǎng)頁設(shè)計畫廊，大家有空的時候不妨到這里找找日本的網(wǎng)站靈感。

「學(xué)好點線面，網(wǎng)頁設(shè)計不會差」

1. 《平面設(shè)計中如何用“點”提高視覺張力？》
2. 《實戰(zhàn)教程！聊聊平面構(gòu)成中線的風(fēng)格和玩法》
3. 《設(shè)計基礎(chǔ)功！聊聊平面構(gòu)成中的點線面（超多案例）》
4. 《實戰(zhàn)教程第二彈！聊聊平面構(gòu)成中「面」的風(fēng)格和玩法》

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com