Published on

Course - RWD

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
  • 0768 (這個大小是平版的尺寸,如果要多一個手機的話,可以自已設定 0400 手機的範圍)
  • 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 來控制那個空格的大小