MUJI 物的八分目- 網站解析

MUJI 八分目網站解析

MUJI 物的八分目網站的風格我很喜歡
原網站網址: http://www.muji.net/lab/fitness80/zh-tw/
截圖也是從上面的網址所截的。
恩...因為這個網站用了兩個我很有興趣的技巧，一個就是畫面捲動，另一個就是Muji在網頁上表現八分目的技巧。其實看這個網站的時候心理也大概有的底，經過我不是很精密的研究之下，還是有research到一點東西。

• 使用HTML5

• 是否為響應式設計
  Ans:No 用了RWD測試的時候，
  
  發現這個網站不是RWD(不過我並不確定他否另有手機版:P)
  -用滑的效果比較不靈巧，要點按導覽列的小點感應是最好的
  -順序上由上到下很順暢，由下到上還好，但我後來發現PC版也是這樣
 

 
• Javascript Plugin部分:
  -jQuery,
  -localScroll,
  -scrollorama,
  -jquery.belatedPNG,
  (這個東西我第一次看過，我搜尋到一篇網路文章可以看看解決IE6不支持PNG絕佳方案)
 

 

• 從100到80......
  在Muji fitness80的HTML結構中，
  右邊導覽列的ID叫做skipNav，點按skipNav會使畫面捲動
  我看了原始碼之後，發現這個Muji網站使用了localScroll()這個方法，使畫面產生捲動的效果。
  若把localScroll()這個拿掉，動作就會像錨點連結(<a href="#example">example</a>)一樣用跳的。
  請參考以下網址或搜尋"localScroll":(這感覺跟jquery的scrollTop等方法很像)
  jQuery.LocalScroll
  另外這個網站所常使用的還有scrollorama 
  scrollorama有個方法叫做 onBlockChange以及animate(scrollorama.animate())。

• 模擬....就是Plugin Plugin Plugin... : 
  我後來也嘗試模擬製作同Muji fitness80的練習，其實這個網站很好demo，因為我發現fitness80並無特別去做js/css的壓縮，是很好回推的網站。
  基本上HTML結構都是參考fitness80，精簡了一些外掛檔(我不需要的我就拿掉了)，
  Demo Link : http://yiying2.ueuo.com/8cent/
  但是我對於對Demo實在很卡關，詞窮也沒啥素材，只是我很少這樣拆解一個網站，只能說Muji fitness80網站製作簡單，設計美感也很有美滿。

-End