Cash Wu Geek

Course - RWD

Posted on 2014-11-01

responsive websites respond to their environment，讓網頁可以自已去適應環境，不只是適應環境而已，重點在於想一個全新的設計，可以適應手機、平板、電腦的設計

RWD 常問的問題

1、該用用什麼工具規劃 RWD ?

  • 使用 Grid (網格系統) + 支援 Grid 顯示的工具 (軟體)
  • mockflow

2、要從手機開始規劃還是桌機開始 ?

  • 從桌機規劃到手機 => Graceful Degradation 優雅降級
  • 從手機規劃到桌機 => Progressive Enhancement 漸進增強
  • 這兩種規劃方式要從產品 (網站性質) 回頭分析，看那一種比較適合
  • 以下為幾個網站的建議：
  • 一般產品資料展示網站：要呈現所有的資料畫面 (很複雜的效果)，還是只要在手機上看到文字的展示
  • 遊戲網站：複雜的資料展示，建議桌機開始
  • 電子商務網站：因為手機要可以購物，建議手機開始
  • 單頁式，建議手機開始
  • 系統網站 (線上會議系統)，一般來說比較少用手機上，建議桌機開始

3、資訊流如何規劃與呈現 ?

  • 一般來說桌機是 z 字型，手機是一字型 (直線型)
  • 圖文交叉並排時，畫面縮小圖文的排版會造成問題，有好的設計規範是重點

4、多裝置 layout patterns 有哪幾種 ?

  1. Mostly Fluid：常見的排版 完整的 Z 字型
  2. Column Drop：標準三欄式排版，不過有點脫離 Z 字型的閱讀順序，原則上 html 的結構就是手機版的結構
  3. Layout Shifter：另一種三欄式排版
  4. Tiny Tweaks：單頁式網站，只是按寬度比例縮小
  5. Off Canvas：按選單才會跑進來畫面的範圍

5、畫面縮放時，元件如何取捨

  • Demo 網站：http://foodsense.is
  • 選單的 icon 不見只剩下文字，為了比較好的辨識度
  • 主圖片的文字拉下來在圖片下面，不會把圖片蓋住
  • 受限於寬度，有些東西要作隱藏
  • Demo 網站：http://2014.uxlondon.com/
  • 手機版時，文字加重加強效果
  • 什麼是要讓 user 第一眼看到的，最重要的東西
  • Demo 網站：http://www.worldwildlife.org/
  • 圖片的文字往下跑
  • 切換圖片的按鈕變顏色而且往下跑，重點是不要干擾 user 的閱讀

6、企劃、設計該具備的 RWD 知識

  • 手機的限制：手勢 hover、畫面、效能
  • past 這一頁/部份作完，接著做下一頁
  • now 設計的過程會不斷的循環、重複，會一直回去修改之前作過的畫面
  • past 產出視覺稿後，新增的元件可以靠想像補上
  • now 新增的元件必需明確指定在不同裝置的那裡呈現
  • RWD 最詬病的問題為檔案太大影響效能，有下面幾種原因：
  1. 下載隱藏的元件/資料
  2. 下載縮放的圖片
  3. 過量的 DOM
  • 改善的方法：
  1. 不同裝置，載入不同的圖片
  2. lazy loading
  3. 改用不同技術取代圖片，例如：SVG、Icon Font

Flexible Layout 流動式網格佈局

  • 只限於 layout 部份的改變，畫面縮小時元件不會有任何改變，元件的話還是需要作適當的調整 (縮小或是隱藏)

viewport

  • 告訢瀏覽器 現在的裝備有多寬、多高
  • min、max 通常都不會寫
  • user-scalable 手機上是否可以縮放
  • 非 RWD 專用，可以直接寫死網站的寬度
  • 常見的錯誤是，使用桌機的畫面但是又不讓 user 可以拖拉

Flexible Grid System

  • 自動計算 %
  • 方便製作開發
  • 一般來說有 960 Grid 和 1200 Grid
  • Grid 相關名詞
  • column width 每個欄的寬
  • left/right padding 左、右的邊界
  • gutter 兩欄間隔，通常是邊界的 2 倍
  • Grid 不一定要從第一格開始放東西

客製化 Layout

  • Flexible Grid System 可以解決大部份的東西，而需求只會愈來愈多，只用 Grid 無法解決全部的問題，例如元件的問題無法解決
  • 使用 CSS media query 調整版面，讓版面更加彈性，@media + query (各種規則)，Grid System 負責排版，而 Media Query 負責元件
  • @media screen，裝置 (設備)，除了 screen 螢幕 還有 print 印表機、tv 電視
  • @media screen and，Query 查詢 and、not、only
  • @media screen and (min-width: 400 px) and (max-width: 700 px)，最小、最大寬度，通常叫斷點
  • 如果 min 為 0 的話可以不寫，如果以上的話，可以只寫 min，不寫 max

怎麼知道 media query 的寬度要設多少 ?

  • 參考各大 framework 的設定
  • bootstrap framework
  • 0~768 (這個大小是平版的尺寸，如果要多一個手機的話，可以自已設定 0~400 手機的範圍)
  • 768~992
  • 992~1200
  • 1200~
  • framework 選擇習慣跟順手的就好了，沒有說要選那一個

Boostrap Grid System

  • bootstrap 分為 4 個級距
  • xs 手機
  • sm 平板
  • md 一般桌機
  • lg 寬螢幕
  • 固定 12 個欄寬，寫法： col-裝置大小-數量 (如果寫超過的話就會自動往下掉 (跑到第二排)，並不會跑版)
  • 要在 col 的外面包一層 row，row 就像是 table 的 tr，col 就像是 td
  • 使用線上工具 http://www.bootply.com/ 作為排版的練習
  • 使用 container 放在主要內容的在最外層，等同於最外層的寬度
  • lg 預設 width 1170 px 左右 15px
  • md -> 960px
  • sm -> 768px
  • 使用 container-fluid 時，Grid 左右就沒有邊界，不過還是有 padding

不同裝置的權重 (優先順序)

  • boostrap 為手機優先 (xs 優先 -> sm -> md -> lg)
  • 如果前面有人可以看就看前面的
  • 如果前面沒有人就是最大 (12)

從 第 2 格開始 佔 10 格

  • offset 表示 margin-left 的意思，寫法： col-裝置-offset-數量
  • 一般的 col + offset 相加不一定要是 12，不到 12 的後面會自動補空白到 12
  • offset 預設沒有寫是 0，跟前面說的 col 的優先順序一樣，xs 最大

巢狀

  • 裡面的 div 不管怎麼分，加起來還是 12
  • 巢狀裡面還是要有 row 起來

使用 boostrap 作 float 排版

  • 原本的 html 結構
  • div.main
  • div.sidebar
  • main (7), siderbar (5) 時，main 要往左邊推 7 格，siderbar 要往右邊推 5 格
  • siderbar(5), main(7) 時，main 要往右邊推 7 格，siderbar 要往左邊推 7 格
  • push 由左往右推，pull 由右往左拉，寫法： col-裝置-push(pull)-數量，push 跟 offset 很像，差在 一個差在會浮動，一個不會
  • 如果只有兩欄時，最簡單的算法 col + push (pull) 兩個相加為 12
  • 中間有空格的話，看是要由 push 或是 pull 來控制那個空格的大小