Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Andere mochten auch
Ähnlich wie 響應式設計(RWD)與網站前瞻性設計
Ähnlich wie 響應式設計(RWD)與網站前瞻性設計 (20)
響應式設計(RWD)與網站前瞻性設計
- 2. 大綱 • 關於Nowill • 整體環境設計趨勢 • 跨平台使用者研究 • 手機網站設計趨勢 • 網站前瞻性設計 • 2015年網頁設計趨勢
- 3. 關於NOWILL
- 7. 整體環境設計趨勢
- 9. 通用設計概念 雖然無法通過一種方式就滿足所有人 但可透過 可視性 與 親和性 原則符合使用者需求 可視性 透過設計方式 位置形式 讓選單 按鈕 一目了然 親和性 UXUI 標題內文明確定義 字行間的舒適閱讀距離
- 14. 跨平台網站使用者研究
- 15. 只有年輕人才會上網？ • 測試期間：2014年中 • 調查管道：E-mail邀請、粉絲團 • 樣本數：747份 • 男/女： 86% / 14% • 主要受測者縣市分佈：北部為主 項目 主要受測者 次要受測者 問卷佔比 82% 18% 年齡 40-50歲 30-40歲 年收入 151~200萬 81~120萬 • 主要調查問題： 上網瀏覽哪種類型的資訊 不同網站會用何種載具上網 不同情境的載具使用習慣
- 17. 上網瀏覽哪種類型的資訊 • 瀏覽與搜尋資訊主要還是使用PC，但MOBILE也佔了30%的使用率 • 手機最主要拿上社群 • Pad最主要拿來觀看影片 10% 13% 13% 61% 3% [社群交流] 26% 28% 28% 12% 6% [觀賞影片] 32% 33% 15% 19% 1% [搜尋資訊] 35% 35% 15% 15% 0% [瀏覽網頁] 桌上型電腦 筆電 平板電腦 智慧型手機 不上網 ＝
- 18. 使用MOBILE的情境大不相同 • 使用手機的情境多在室外 • 使用平板的情境多在室內 桌上型電腦 筆電 平板電腦 智慧型手機 不上網 ＝ 10% 24% 37% 24% 5% [家中客廳] 20% 30% 24% 19% 7% [自己的房間] 9% 8% 7% 60% 16% [商店/購物時] 0% 2% 11% 76% 11% [交通工具上]
- 20. 響應式網頁設計
- 22. 遺失的片段 • 2012年RWD被.net magazine選 為網頁設計趨勢第二名，第一名 為“漸進增強”設計模式。 • • 漸進增強這樣的設計趨勢，在台 灣並不流行，但卻可以說是RWD 的立基點。所謂的漸進增強就是 打破傳統的網站規劃方式，以 mobile first為主，從手機內容開 始規劃，在推到平板、桌機網站 內容，是一種從小到大的網站設 計模式，與以往從大到小的設計 模式完全不同。
- 23. 何謂RWD? • RWD是Responsive Web Design的縮寫，中文翻譯比較常 見的有響應式設計或者是自應式設計，可使網站在多種瀏 覽裝置（從桌面電腦顯示器、平板電腦顯示器到行動電話 或其他行動產品裝置）上閱讀和導航，同時減少縮放、平 移和捲動。
- 26. 為什麼要RWD？ • 視覺設計省時： 一款設計跨越多個平台，減少視覺設計師負擔。 • 修改維護省時： 後續修改上大致上只要調整一個版本即可，減少後續擴充 或修改維護的負擔。 • 一次上稿省時： 後台上稿也只需要上一次資料即可更新個平台所看見的網 站內容。
- 28. 目前常見解析度 • 手機 • 320x480 (2:3) • 480x800 (3:5) • 540x960 (16:9) • 720x1280 (16:9) • 768x1028 (16:9) • 1080x1920 (16:9) 平板 600x800 (4:3) 600x1024 (75:128) 768x1024 (4:3) 800x1280 (4:3) 1920x1080 (16:9) 桌機 1024x768 (4:3) 1280x800 (16:10) 1280x1024 (4:3) 1366x768 (16:9) 1440x900 (16:9) 1920x1080 (16:9) 2560x1440 (16:9) 2880x1800 (16:10)
- 30. RWD對無障礙有幫助？ • 絕對有幫助！ • 更有效率的程式碼，使用role 與 aria-label做標示 • 注意區塊的排列順序，會影響閱讀順序 • Tab鍵的功能要製作跳過header區塊直接到主要區塊的機制 • 視覺性質的內容要有替代文字作為輔助
- 32. 常見的RWD Framework Bootstrap Foundation Pure 自行開發模式
- 34. Foundation 號稱最先進的RWD Framework，也是目前檔案大小最大的 一套RWD Framework，採用mobile first 概念所打造，觀念 上比Bootstrap欣穎
- 38. RESS實際情況 當網友開啟網站時記錄網友目前使用的平台，再到後端撈取 相對的區塊元素組合出所需的頁面內容。 後端上稿時會自動處理圖片縮放問題，通常上稿只需上傳一 張，程式會自動壓縮不同比例。 Desk header Pad header Mobile header Desk footer Pad footer Mobile footer
- 42. 操作體驗 滑鼠 超手感 觸控筆
- 43. 操作體驗
- 44. 操作體驗 幾個咩？ 幾個G？
- 46. RWD測試檢核表
- 47. 網站前瞻性設計
- 48. 以使用者為導向 之單欄式設計 • 以內容為主 • 大圖營造氛圍 • 適當的留白讓使用者可以呼吸 • 簡單不複雜的選單操作 • 沒有太多層級的內容
- 49. 開發跨平台網站
- 50. 搜尋抬頭顯示
- 51. Fat Footer • Sitemap • Facebook 社群等 • 圖像式的資訊
- 52. FB 專頁以 iFrame 內嵌 官網資訊 • 與網站做關聯 • 宣傳相關活動 • 製作FB app行銷
- 53. 開放 API 串接服務
- 54. 2015年網頁設計趨勢
- 64. 最新常見設計模式 • 視差滾動技術Parallax Scrolling • 卡片設計：前幾年類似 Pinterest 的卡片瀑布流今年 可能會捲土重來
- 65. 最新常見設計模式 • 物質設計（material design）：擬真設計與扁平設 計的交叉點，Google 去年推 出的 material design，今年預 計也將大為風行 • 幽靈按鈕（ghost button）： 按鈕透明化，僅以能夠識別的 超細邊框，包裹無襯線字型。 一方面減少按鈕與背景的突兀 感，一方面依然有清楚的指向