2014年11月23日 星期日

網頁分析05 - 株式会社ココノヱ

株式会社ココノヱ
http://9ye.jp/

網站的主色調是基本的黑白搭配搶眼的桃紅色,最大的特色點是公司的吉祥物不時以動畫效果穿插出現於各個地方,讓網站變得十分活潑逗趣,字體選用帶著圓角的字型,符合整體的風格。




首頁
整體很簡單的以波浪造型的線條和色塊分為上下兩部分,上半部正中央的圓形有四張圖案撥放,分別是LOGO以及三項資訊公告,會自動撥放也可以自行點選觀看,下半部則是MENU。




MENU
主色與首頁剛好相反,有四個分頁可選WORKS、ABOUT、NEWS和CONTACT,點選中央的LOGO可回首頁。








MENU與吉祥物互動的動畫非常俏皮可愛,將滑鼠移到分頁按鈕上就會有不同的效果,首頁鈕是圖會翻到背面變全白,吉祥物會從中跳出來,WORKS是吉祥物從O裡探頭出來,ABOUT是吉祥物把U當作跳繩跳,NEWS是E變成門吉祥物開門跑出來,CONTACT是C會變成圓形,吉祥物出現後便會往下掉。





首頁往下拉可以看到各式各樣的資訊以圓形的區塊呈現,整個首頁非常的長,共有16個橫排的資訊可點閱,吉祥物則在圓形的邊緣上不停行走,這時如果將滑鼠移到圓形區塊上,那些行走的吉祥物會彈出去,接著會撞上旁邊的其他圓形區塊,產生像是彈珠檯遊戲般撞來撞去的效果。




將滑鼠移到圓形區塊上,整個圓形會變成帶著鋸齒狀的色塊,每個橫排的色塊顏色都不同,像是圖上的黃色而上排是藍色,其他還有綠色和桃紅色等等。
滑動閱覽時上方不時會有吉祥物從上方掉下來,掉下來時如果撞到圓形區塊上會產生凹陷的效果,像是吉祥物掉落在很有彈性的球上面的感覺。




ABOUT
頁面呈長條式設計,包含了一小段的介紹、公司的基本資訊、所在位置的地圖和員工資料,每部分資訊的背景都使用色塊區隔,瀏覽起來很清楚易懂只是必須用滑鼠一直往下滑來看是比較不方便的部分。
員工介紹的地方很有趣,滑鼠移到員工照片上會顯示動態圖片,每個人的都不同,像是中排最左邊的Reiko會一直替換不同的髮型,最右邊的Mao則是會一直閃動照相按下快門時的閃光效果。






最上方的重字是會動的,每個筆畫會左右上下晃動,讓整個字看起來搖搖晃晃的,吉祥物會從上面掉下撞在字上面再彈開。





WORKS
將作品按年份分類,2009之前歸為同一部分,2010到2014則是每年一個分類,點選進去可看到詳細的內容,當你在瀏覽某個年份時,一開始年份數字比較大且會在畫面最上方,往下滑後數字會縮小但不會消失依然保持在上方,所以當你不斷往下滑時,可以很清楚的知道自己在看哪一年份的作品,是個很好的設計。而這個頁面吉祥物一樣會不斷的從上面掉下來並且撞在圓形區塊上,




CONTACT
背景是全黑的,設計很簡潔讓人一目了然,就算不懂日文也可以順利填寫。




FOOTER
延續首頁的風格,主要放置公司的聯絡方式,有LOGO、地址、電話、傳真號碼以及FB、Twitter和BLOG連結按鈕。


2014年11月4日 星期二

網頁分析04 - A Structure Design LSD

A Structure Design LSD

網站整體設計採用極簡風格,黑白的配色及基本點線面的組合圖形,主要特點是運用許多動畫效果,讓簡單的幾何線條圖形看來活潑有趣。




一進入網頁首先會開始閃爍出現許多的半透明圓點,並接連出現點線的圖形。




接著圓點會消失,幾何點線圖形會從外到內聚集,主題字A STRUCTURE DESIGN LSD會從正中央出現。





主題字出現後停留在這個頁面觀看的話,背景會持續變動,像是宇宙星空的感覺。






點LAUNCH SYSTEM會直接進入ABOUT,正中央的圖形也是會不停旋轉改變,右邊有TWITTER、INSTAGRAM以及EMAIL的連結,除此之外沒有更多的資訊了。





MENU放在網頁的右上角,有INDEX、ABOUT、PROJECT和LAB四個頁面,像是一把尺設計很有趣可愛,現在所在的頁面會用紅色粗線標示。







 PROJECT,放置他們製作過的案子,每個項目前面都有一個幾何圖形,圖形會從扁的變成立體並且重複變化,游標移到項目上字會開始閃動。





點選進想看的項目,會跳出一個底是交叉的白色線條框架,訊息放置在中間,左上有CLOSE可點選離開,右上的WEBSITE可進入實際頁面觀看,訊息下方頁數的設計很特別,是用點及線的組合,第一個點代表第一頁,第二個點就代表第二頁,可自己點選想看的頁面,不點也會自動播放。





LAB,類似公告和部落格的設計,點選標題可進入看詳細的文章內容,點進去整個頁面會依序從右到左滑入畫面,先是最深色的色塊再來是次深的接著是最淺的,最後是白色訊息的部分,離開頁面時則會從左到右滑出畫面,順序和進入頁面時相反。