55
RWD 不不不不不不不 響響響響響響響響響響響響響響響

RWD不是你想的那樣 tw mvc#13

  • Upload
    twmvc

  • View
    6.235

  • Download
    8

Embed Size (px)

DESCRIPTION

講者:米雪兔 (http://www.dotblogs.com.tw/rab/) 講者簡介:現職104人力銀行視覺設計,no2studio工作室網頁設計, 從事網頁設計多年,專長為網頁設計排版與摔筆。 課程簡介:RWD到底是甚麼鬼玩意? 為什麼提到響應式設計你家的設計師就會開始摔筆? RWD響應式網頁的設計概念與製作方法。 課程時間:70 分鐘

Citation preview

Page 1: RWD不是你想的那樣 tw mvc#13

RWD 不是你想的那樣響應式網頁的設計概念與製作方法

Page 2: RWD不是你想的那樣 tw mvc#13

2

張米雪

現職 104 人力銀行視覺設計, no2studio 工作室網頁設計, 從事網頁設計多年,專長為網頁設計排版與摔筆。

Page 3: RWD不是你想的那樣 tw mvc#13

3

Responsive Web Design

• 中文翻譯為 響應式網頁 / 自適應網頁• 配合手機、平板、電腦螢幕各種不同平台,以不同

畫面呈現,讓使用者可以舒適瀏覽的網頁設計

Page 4: RWD不是你想的那樣 tw mvc#13

4

為什麼要 RWD?

• 比起 APP 開發,費用省很大 !

• 一個網頁全平台通吃,不用考慮是哪個系統或載具• 工程師只要維護一份 HTML 即可,管理成本也比較

Page 5: RWD不是你想的那樣 tw mvc#13

5

有利必有弊…缺點是

• 所有的載具都讀取同一份網頁,手機或平板效能比較差的載具,會有讀取速度較慢的議題

• 內容影響整體閱讀,不能有過於複雜的排版與內容• 舊瀏覽器支援度比較差 (ex : IE7 IE8 IE9)

• 設計師會做到脾氣很差…

Page 6: RWD不是你想的那樣 tw mvc#13

6

RWD 就像…

Page 7: RWD不是你想的那樣 tw mvc#13

7

設計成衣一樣 !

Page 8: RWD不是你想的那樣 tw mvc#13

8

不管高矮胖瘦大家都穿同一款衣服

Page 9: RWD不是你想的那樣 tw mvc#13

9

最好是大家穿起來都像林志玲…

Page 10: RWD不是你想的那樣 tw mvc#13

10

你說這是不是超為難設計師…T^T

Page 11: RWD不是你想的那樣 tw mvc#13

11

如何開始 ??

Page 12: RWD不是你想的那樣 tw mvc#13

12

從小到大 ? 從大到小 ?從螢幕畫面思考先還是手機畫面先 ?

Page 13: RWD不是你想的那樣 tw mvc#13

13

不管高矮胖瘦就讓他們通通長一樣咩 !

Page 14: RWD不是你想的那樣 tw mvc#13

14

就等比例縮放到全部平台呀 !

Page 15: RWD不是你想的那樣 tw mvc#13

15

最好是有這麼簡單…那我就不用站在這裡了…

Page 16: RWD不是你想的那樣 tw mvc#13

16

手機/平板/電腦螢幕 解析度與比例的差異

Page 17: RWD不是你想的那樣 tw mvc#13

17

解析度是 ??DPI = Dot per inch 每英吋內含幾個點 ( 像素 /px)DPI = Dot per inch 每英吋內含幾個點 ( 像素 /px)

1 英吋 = 2.54 公分

<- 2.54 cm -> <- 2.54 cm -> <- 2.54 cm ->

3 dpi= 3 points per inch

8 dpi= 8 points per inch

16 dpi= 16 points per inch

Page 18: RWD不是你想的那樣 tw mvc#13

18

手機 / 平板 / 電腦螢幕 常見尺寸

• 320x480 (2:3)

• 480x800 (3:5)

• 540x960 (16:9)

• 640x960 (2:3)

• 720x1280 (16:9)

• 768x1280 (3:5)

• 1080x1920 (16:9)

手機

• 600x800 (4:3)

• 600x1024 (75:128)

• 768x1024 (4:3)

• 800x1280 (16:10)

• 1536x2048 (4:3)

• 1920x1080 (16:9)

平板

• 1280x800 (16:10)

• 1280x1024 (4:3)

• 1366x768 (16:9)

• 1440x900 (16:10)

• 1680x1050 (16:10)

• 1920x1080 (16:9)

• 2560x1440 (16:9)

• 2880x1800 (16:10)

電腦螢幕

Page 19: RWD不是你想的那樣 tw mvc#13

19

手機 / 平板 / 電腦螢幕 常見尺寸

Page 20: RWD不是你想的那樣 tw mvc#13

20

是不是眼都花了…就是要通通都要符合喔

Page 21: RWD不是你想的那樣 tw mvc#13

21

依照螢幕大小思考要擺放的內容

Page 22: RWD不是你想的那樣 tw mvc#13

22

破壞總是比建設來的簡單

Page 23: RWD不是你想的那樣 tw mvc#13

23

把需要的東西都先拿出來再來取捨

Page 24: RWD不是你想的那樣 tw mvc#13

24

由大到小 由繁化簡

Page 25: RWD不是你想的那樣 tw mvc#13

25

Prototype 原型設計

Page 26: RWD不是你想的那樣 tw mvc#13

26

Photoshop? PowerPoint? Word?

哪種工具最好用 ?

Page 27: RWD不是你想的那樣 tw mvc#13

27

拿出你的腦袋 和 紙 跟 筆 把想到的畫下來

Page 28: RWD不是你想的那樣 tw mvc#13

28

先整理好你的思緒,與網站要呈現的內容與流程

Page 29: RWD不是你想的那樣 tw mvc#13

29

再選擇順手的工具繪製出網站的 prototype

• Word or PowerPoint

• Axure

http://www.axure.com/

• POP (prototyping on paper)

https://popapp.in/

Page 30: RWD不是你想的那樣 tw mvc#13

30

清楚的流程草圖是溝通的好幫手,順便確認基本規格

Page 31: RWD不是你想的那樣 tw mvc#13

31

內容跟流程是網站的骨架與肌肉

Page 32: RWD不是你想的那樣 tw mvc#13

32

內容也是決定你的網站 RWD 能否製作的關鍵

• 簡單而清楚的內容• 明確可拆分的區塊• 內容區塊重要性的排序• 依平台特性與使用者需求取捨功能

Page 33: RWD不是你想的那樣 tw mvc#13

33

各平台版面配置重點

Page 34: RWD不是你想的那樣 tw mvc#13

34

電腦螢幕

• 考量一個畫面中能看見的範圍去擺放

• 以最小畫面高度比較常用的 768px做為基礎高

• 過寬的螢幕兩側適當留白

768px

Page 35: RWD不是你想的那樣 tw mvc#13

35

平板 • 4:3 的畫面比例為主流,寬度可以1024px 做為一個思考點,寬度其實已經接近平常螢幕的寬度了。

• 平板可以翻轉 ! 所以要考量橫直兩種畫面的效果

4:3

Page 36: RWD不是你想的那樣 tw mvc#13

36

手機

• 簡單 簡單 再簡單

• 畫面很小,怎麼在有限範圍中呈現最精華的內容

• 選單通通收起來固定選單 / 側欄選單

• 向量圖示

• 按鈕大小,最小不能小於 44px x 44px

Page 37: RWD不是你想的那樣 tw mvc#13

37

排版要點

Page 38: RWD不是你想的那樣 tw mvc#13

38

液態排版Width

1680Width

840

Page 39: RWD不是你想的那樣 tw mvc#13

39

圖片自動縮放 延伸方式

Width 1280

Width 2870

Page 40: RWD不是你想的那樣 tw mvc#13

40

圖片自動縮放 延伸方式

Width 1680

Width 630

Page 41: RWD不是你想的那樣 tw mvc#13

41

裝置寬度 / device-width

• 螢幕解析度不一定等於 device-width

ex: iPhone 5 解析度 640 x 960 裝置寬度 320

• 以螢幕解析度作為 device-width ,有可能進入大部分網站時都看到縮小的畫面

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Page 42: RWD不是你想的那樣 tw mvc#13

42

單位

• %百分比 • em字體高 • rem根字體高

Page 43: RWD不是你想的那樣 tw mvc#13

43

瀏覽器支援這是很可怕的惡夢…

Page 44: RWD不是你想的那樣 tw mvc#13

44

Chrome/Safari/

Firefox對 CSS3 與 HTML 支援度一般說來都滿夠的

Page 45: RWD不是你想的那樣 tw mvc#13

45

IE…IE 10 後終於對 HTML 與 CSS3 有比較完整的

支援

Page 46: RWD不是你想的那樣 tw mvc#13

46

如果可以我會把這個世界裝 IE 又在 10 以下的電腦都炸

Page 47: RWD不是你想的那樣 tw mvc#13

47

所以要做 RWD 最好…不要想包山包海,可以捨棄太舊的瀏覽器

Page 48: RWD不是你想的那樣 tw mvc#13

48

測試 測試 再測試最好準備手機 / 平板 / 螢幕測測看

記得行動裝置要旋轉看看效果 !

Page 49: RWD不是你想的那樣 tw mvc#13

49

工具網站

• Screen siz.es / 常用裝置解析度與裝置寬度表http://screensiz.es

• IcoMoon / 免費 icon font

http://icomoon.io

• Web Color Data / 配色收集網站http://webcolourdata.com/

Page 50: RWD不是你想的那樣 tw mvc#13

50

RWD 是設計的惡夢祝福你們可以不要像我一樣整天摔筆

Page 51: RWD不是你想的那樣 tw mvc#13

51

Q & A

Page 52: RWD不是你想的那樣 tw mvc#13

http://mvc.tw 52

好工作室需要支持

http://no2don.com/

Page 53: RWD不是你想的那樣 tw mvc#13

http://mvc.tw 53

好活動需要支持

感謝 KKTIX 贊助 twMVC 活動報名平台

Page 54: RWD不是你想的那樣 tw mvc#13

http://mvc.tw 54

好課程需要支持

http://skilltree.my

Page 55: RWD不是你想的那樣 tw mvc#13

謝謝各位

• 本投影片所包含的商標與文字皆屬原著作者所有。• 本投影片使用的圖片皆從網路搜尋。• 本著作係採用姓名標示 - 非商業性 - 相同方式分享 3.0 台灣授權。閱讀本授權條款,請到

http://creativecommons.org/licenses/by-nc-sa/3.0/tw/,或寫信至 Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

http://mvc.tw