創意和技術的日本網頁設計分享(很棒的體驗)

日本网页设计 日本酷站

日本的網站設計以及使用的Web技術相當不錯,本以為日本的工業設計好,但網站設計水平也相當高。

日本網頁設計很多已經使用新的網頁設計趨勢,如視差滾動、全屏背景、全屏視頻等等,很少使用Flash,特別注重網頁的配色、版式和交互設計,整體網頁佈局新穎,不少網站使用了可愛的漫畫式手繪風格。

Q-Co

不得不說,裡面的創意很贊,進入首頁後,用筆劃一個圓圈,然後圓圈裡會有動態圖像顯示。其次網站視差技術做得很好,具體請行瀏覽。

日本网页设计 日本酷站

查看網址:http://www.q-co.jp/

 

Hanamichiya

很漂亮的水彩背景,網站的右側菜單效果很贊!看來很多日本設計師的手繪功底都很厲害啊!

日本网页设计 日本酷站

查看網址:http://hanamichiya.jp/

 

Dascorp

該網頁使用了響應式設計,基本兼容IE8,當用戶向下滾動網頁設計,內容會漸變顯示出來。

日本网页设计 日本酷站

查看網址:http://www.dascorp.co.jp/

 

Regettacanoe

明快的藍色與黃色的時尚配色,很符合網站主題。左上角菜單藍色的曲線好像和鞋跟一樣,這是令人印象深刻的設計。

日本网页设计 日本酷站

查看網址:http://regettacanoe.com/

 

Hotakubo-Seikei

網站整體頁面設計得很精美,就連圖片質量也很注重,這醫院看起來很高檔次啊。

醫療類網站在國內不會這麼做,都會做成門戶式,做內容,搞SEO,什麼內容都有…… 不過大家可以參考他的設計

日本网页设计 日本酷站

查看網址:http://www.hotakubo-seikei.com/

 

Hishiken

漂亮的圖像+視差特效,很美的網頁啊。

日本网页设计 日本酷站

查看網址:http://www.hishiken.co.jp/

 

Asitanosikaku

網站前面哪個有點手繪風格的橢圓是用html5 Canvas做出來的,鼠標經過帶有一些彈性效果,其次這個橢圓還能根據瀏覽器分辨率來自適應大小哦。

點擊每個連接的內容都是AJAX加載,總體的交互設計體驗真的很不錯。

日本网页设计 日本酷站

查看網址:http://www.asitanosikaku.jp/

 

Kataomoi3

網站使用文字漂落來做視差效果,很漂亮,做個人類的網站推薦。

日本网页设计 日本酷站

查看網址:http://kataomoi3.com/

 

Kiyomizudera

用全屏視屏作為背景的網頁,視頻的景色超讚,文字使用垂直排版,垂直字體是日本常用的一種排版方式,其實古時中文也是垂直的,從首頁點擊進去後,默認是全屏幻燈片展示

日本网页设计 日本酷站

查看網址:http://feel.kiyomizudera.or.jp/

 

Japan

只想說,這網站不是FLash做的。

日本网页设计 日本酷站

查看網址:http://japan.diverse.jp/

 

C-Gp

強烈建議大家點擊一下TEAM鏈接看看。

日本网页设计 日本酷站

查看網址:http://web.c-gp.com/

 

Wamokei

一家模型製作公司的官方網站,單頁面網站設計,首頁的第一屏使用了全屏照片作為背景,另外當用戶點擊其它頁面時,其實也是全屏的哦!

日本网页设计 日本酷站

查看網址:http://www.wamokei.com/

 

結語

看了上面的日本網頁設計,你覺得怎樣呢?你還會為企業做哪些爛掉牙的佈局排版嗎?不一定要響應式,不一定要扁平化,創意+技術這就是日本網頁設計!

Web前端技術方面已有部分網站開始HTML5、CSS3技術,雖然使用這些新技術,但在IE8兼容方面還是做得很好的,有的不兼容IE8的會做一個瀏覽器兼容提示。

很多網頁設計師需要自己寫前端代碼,所以建議大家在項目中多運用CSS3,這是未來必須使用的技術。 (即使不需要寫代碼也要理解它,這才能更好配合前端人員)

 

廣告

2 thoughts on “創意和技術的日本網頁設計分享(很棒的體驗)

    • 客戶溝通上的問題一直是設計師的苦惱來源~,但設計就是解決問題、解決需求,適時按照客戶需求設計對雙方對專案都有很大的好處喔!~

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s