2013年3月6日 星期三

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

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...