2014/01/17

Mobile Web》兼顧UX與扁平化的UI ~ 前端注意事項



習慣先來個要點

請注意:
  • 扁平化不是為了扁而扁,而是為了UI能更有效率的適用在各種尺寸裝置上!
  • 扁平化的同時,該要引導按鈕跟連結的視覺,還是要保有
    人的使用習慣不是可以這麼快速就改變,同時對於新使用者(小孩/長輩)來說,
    過於缺少具象化的扁平設計,無法感受到它的動作引導,就是失敗的設計。
  • 善用CSS3/html5的支援效果,用標準css3寫法即可,行動裝置(mobile/platform)瀏覽器的支援度遠超過你以為。
    做行動版網頁請忘記IE這東西,我知道它摧殘前端很久了。
    能用css寫的圓角、陰影、背景色、半透明、漸層、動畫...,請盡量使用css處理,圖片用在畫龍點睛的地方即可。
  • 連結點擊時狀態(active)遠遠大過滑過狀態(hover),
    請忘記滑鼠這東西,你在手機/平板絕大部分是沒有使用滑鼠的。
  • iOS桌面縮圖icon:
    很多人會忘記做這個,當把網頁加到桌面捷徑時,iOS會預設找以下路徑,如果沒有提供指定圖片,才會自動擷取該網頁的預覽圖。
    圖檔路徑.png" />


實例開始:

1.  按鈕:
     用a或是botton,只有箭頭用圖片,其他都由css產生

      


未完待續...


2. 陰影與圓角:
    用標準css3寫法即可,行動裝置跟電腦的瀏覽器不同,請忘記電腦給的限制!