2015年10月27日 星期二

日本・探險!京都大學 特設網站


探索!京都大學

這是京都大學的一個特別網站,可以從京都大學的官方網站連入,和大多數的學校網站相比,是個令人眼睛為之一亮的網站!一進去就是整個校園的縮小3D圖,而且是動態的,可以看到現園內有人在騎著腳踏車、有情侶在校園漫步、有工人正在為新建大樓施工等等,甚至還有白天和晚上的不同背景,非常很有趣,就如網站的大標,讓人想進去每個地方探險。


在首頁畫面中有些紀念性的建築物可點擊進入,畫面會跳出一個視窗,以滑鼠滾輪上下滾動,就能探索裡面的空間,並在最後出現介紹(如下圖)。


滾輪往下滑就能看到各個分頁內容的畫面,也可以將滑鼠移到最左邊白色的部份,每個點為一個分頁內容,滑鼠進入後會右滑出白色區塊選單,最上面的京都大學則可連回京都大學的官網。

 每個分頁畫面也是給人明亮活潑的感覺,內容分別有師資介紹、諾貝爾文學獎得獎校友、京都大學118年來的歷史數據等等。


而如果要看更詳細的資料,以滑鼠點入每頁下面的圓形按鈕或最右邊的長條色塊,就會跳出另一個更多資料的網站(下圖)。這個頁面上面的選單就和上一個網站分頁面是對應的。


教授介紹頁面(左圖),點入會有更詳細的資訊(右圖)。這部分我覺得很有趣,每位教授都有一個卡通版人物,然後這裡的照片是有正面、背面、側面的,在你滾動頁面的時候都會做變換,還有老師的興趣、嗜好等,甚至將老師的生活作息以時間軸的方式全都列出來,讓本來好像是一個比較嚴肅的介紹頁面變得非常有趣,也將老師與學生的距離感拉近了。
       


得獎校友介紹頁面,為一個頁面拉到底的設計,點選上面的照片也可直接跳到那個人的畫面,內容為得獎者的生平介紹與成就。
 


最後為京都大學的歷史與數據統計,分為學生、教員、研究成果、國際交流和其他。也是一個頁面下拉到底的設計,這個頁面中運用了許多動畫,所有的圖片或文字都是在我們進入到那個畫面後才顯示、跳出的,數字的部份也都是從零開始跑跑跑,數據部份會搭配圖表、icon或動畫。讓這些原本死板板的數據變得非常生動有趣,也加速我們去理解他。
 

通常看到這種數據資訊的頁面都會是滿滿的字或是表格,大多數人可能都會很快就跳出,但他運用這種方式,完美的把文字都變成了圖像去表達,又加上動畫,每頁的動畫都很可愛,會讓人一直想要往下看,不知不覺就把整個頁面都閱讀完了!



2015年10月19日 星期一

日本・吉見自動車株式会社網站


http://www.yoshimi-auto.com/#do

這是一間汽車公司位於日本大阪
主要業務是在賣二手車


整個網站是以插畫的方式來呈現,這也是一開始讓我注意到這個網站的原因
原本看縮圖時以為是設計師或插畫家的網站,進去發現竟然是關於車的公司的網站!
覺得這種公司會以插畫的方式來呈現網站非常特別

整個網站是一個下拉式捲軸呈現,以白色為主,配上黑色線條或是淡彩,
雖然沒有繽紛的色彩,但卻給人清新溫暖的感覺,視覺上也很舒適放鬆

第一個畫面有兩個選項 左邊SHOP是介紹他們的業務、工作內容等
右邊的LINE UP點進去則會跳出新視窗,裡面有現有的二手車庫存資料


在等待時間會有小輪胎轉動的動畫


這個就是點下LINE UP時會跳出的二手車販賣資料,雖然只是車子的資料,但網站還是結合了插畫的風格,配上照片都是以綠色草地為背景,整體給人的感覺還是很活潑可愛,和一般租車或賣車的那種網站給人硬邦邦的感覺很不一樣。



以下這些畫面則是左邊SHOP的內如,而若直接將網頁捲軸下拉也可以看到

他們也已插畫的方式來傳達他們的理念、工作內容、他們的堅持與重視細節等等,我覺得用這樣偏感性的方式來述說,能讓看的人感受到溫度,並無形中增加對他們的信任。



整個頁面大部分以圖為主,如果是需要大量文字說明的地方,則畫面會有小圖示或是read more的按鈕,點開會下下圖一樣出現白色框框來顯示,可以在看完後按左上角的×來關閉,是一個讓畫面乾淨、操作也容易理解的設計方式。





2015年10月8日 星期四

日本・VAlSE 公司網站



VALSE 為一間有關聲音、音樂製作的公司,主要業務範圍為電視節目、網站或是廣播的主題音樂、配樂或是特效聲等等有關聲音方面的製作。

首頁一進去會有動畫和音樂,底部可以變換曲目,而動畫的律動會隨著音樂的節奏去變化。


動畫的圖案是以公司的logo去變化
滑鼠也可以去旋轉或移動中間的圖形。

最後化為logo作結尾。

並將logo放置到左上角當作分頁選單,以顏色區分,
滑鼠移入時會放大並顯示分頁內容在下方。


進入分頁後會發現每個分頁的背景動畫也都不一樣。


其中成員的頁面是點上圖的小六角型就會出現不同人的介紹(如下圖)。



覺得這個網站很不錯的原因是因為這間公司本身是做音樂音效的,而他也巧妙地將專業的這一塊與網頁中的元素結合,不管是動畫或是按鈕的聲音等等都配合得很好,而且不止首頁,每個分頁的背景也一樣是隨著音樂在做變化,讓人在瀏覽這個網頁時感受到的氣氛是很有活力、動感的感覺!


2015年10月6日 星期二

日本・微笑兒童牙科網站



這是日本的一間兒童牙科的網站。

呼應診所的名字“微笑兒童牙科”首頁就以一個大娃娃的笑臉,並把嘴巴的空間用來播放照片。網站中有一些小地方的元件是會動的,像是頭髮或星星,另外首頁中右區還有一個可愛的院內樓層的空間圖也有一些小動畫(圖2),點進去是院內的各個空間介紹,整個網站充滿童趣,配上照片,營造出一個歡樂的氣氛。


圖1.首頁

圖2

進入分頁,選單在最上排,每個分頁有一個代表的小icon,滑鼠滑進小圖就會旋轉。

在向下滑到超過一個頁面之後,右下角會出現page top的小牙齒按鈕。


在等待網站畫面時會有動態的小娃娃,讓等待的過程不會太無聊。

看牙醫對於小朋友來說或許是一件有點可怕或是不喜歡的事情,但這個網站這樣的設計,感覺小朋友瀏覽過網站後,對於牙醫的恐懼可以減少許多,若有家長在旁陪同觀看解說內容,也能增加對於口腔的正確觀念。



2015年10月4日 星期日

日本設計師 - 森本千繪_個人網站


我要介紹的是日本設計師-森本千繪 的個人網站

從他的上一個版本我就蠻喜歡的,他的網站總會帶點手繪風格,也會有些小動畫或互動設計,很繽紛活潑。

這是他上一版本其中作品介紹的頁面(滑鼠可以點入作品看詳細內容)

而新版的網頁內容我覺得更清楚明瞭,首頁為下圖1。

最上排有網站的各個分頁選項,讓想找東西的人能清楚快速地找到;但下面也有較活潑互動的方式,將一些分頁標或消息及作品以圓圈做連結,每個圓圈都是動態的,像泡泡的概念,會浮動變化,而當滑鼠指到圓圈上,那一個的顏色就會變亮(如下圖2紅色圈圈)。

這樣的首頁設計同時能清楚的展現網站內資訊,又不失互動與趣味性。

圖1


































圖2




















滑鼠移到每個分頁選項時,標題字體也會變成圓圈轉(下圖3)。

圖3

















當你在哪個分頁時,標題下方就會有一個黑色小點
下圖為作品頁面,設計也很簡潔清楚,並且可以選擇想要以照片或是文字來做為瀏覽的方式。
















總體來說,我覺得這個網站讓人看了很舒適,整個網站資料雖然很多,但架構簡單明瞭;版面與顏色也不會過於花俏,適當的留白給人乾淨簡潔的感覺,但卻又保有可愛有趣的地方。