Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

響應式設計(RWD)與網站前瞻性設計

1.817 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

響應式設計(RWD)與網站前瞻性設計

  1. 1. 響應式設計(RWD)與網站前瞻性設計
  2. 2. 大綱 • 關於Nowill • 整體環境設計趨勢 • 跨平台使用者研究 • 手機網站設計趨勢 • 網站前瞻性設計 • 2015年網頁設計趨勢
  3. 3. 關於NOWILL
  4. 4. Nowill Chang 2012年成立Nowill Design團隊 致力於運用HTML5、CSS3、PHP等技術 製作網站與雲端系統 RWD響應式設計 可跨越手機、平板、筆電、桌機等多種平台, 一致性的前端設計,可完整呈現品牌印象 前端互動技術 隨著網頁設計的演進,品禾在前端技術的研究, 符合全球最新潮流,絕非舊時代的技術 UI設計/UX研究 擁有使用者研究經驗,可透過觀察使用者的操 作,設計出操作性良好的使用介面
  5. 5. 相關案例 朱宗慶打擊音樂教學 系統國際官站 普德單冰飲水機
  6. 6. 相關案例 午洋室內設計 OTOP北台灣深度旅 遊網
  7. 7. 整體環境設計趨勢
  8. 8. 主流趨勢 為了滿足各種資訊與符合使用者 可快速瀏覽的習慣 目前主流趨勢有 扁平設計 偏離擬物主義的視覺呈現 在極簡設計下 滿足現代設計的需求 大幅圖片來造成視覺效果 圖像化設計成了能瞬間產生印象的表現 更直覺的透過圖像傳達訊息 給讀者更多空白空間 聰明的有效的整理訊息 乾淨式美學
  9. 9. 通用設計概念 雖然無法通過一種方式就滿足所有人 但可透過 可視性 與 親和性 原則符合使用者需求 可視性 透過設計方式 位置形式 讓選單 按鈕 一目了然 親和性 UXUI 標題內文明確定義 字行間的舒適閱讀距離
  10. 10. 跨平台特性 分享散播 透過社群分享功能讓訊息發酵 可意外達到口碑傳播效果 多系統跨平台運用 跨平台趨勢在iOS或android都能有不錯 的表現 資料整合收集更便利 Big Data的運用可以透過個平台的累積提 供更好的使用經驗
  11. 11. Microsoft 設計原則 應用格線 在圖像設計中,現代排版樣式格線是讓 您的內容產生一致性的基礎。按比例安 排元素具有美觀和實用上的雙重效益。 這樣使用者才能夠迅速、舒適地吸收頁 面的內容。 層次和均衡 若希望使用者覺得您的應用程式視覺層 次分明,請以不同屬性顯示不同類型的 資訊。您可以利用字型大小、字型色彩、 定位和間距來呈現彼此有區別的不同層 次感。如果您以一致的方式運用不同的 屬性值,使用者便容易與您的應用程式 產生共鳴,也能區別並立即辨認每個不 同的層次。
  12. 12. Microsoft 設計原則 內容才是主角而非裝飾 讓使用者直接與內容互動。 去除多餘的裝飾,運用字型、 比例和色彩,就能輕鬆展現 內容。在此範例中,更容易 閱讀名稱和標題。 資訊為重 您提供的內容必須像「資訊 圖表」一般,而不只是和 「圖像」一樣。資訊傳遞是 主要目標,不應迷失在不必 要的細節中。採用資訊圖表 方法,可以提供更簡潔的內 容、可操作的資訊,而且完 全沒有任何干擾。
  13. 13. Microsoft 設計原則 讓內容說話 相關的命令和功能應簡單明瞭、 容易了解與進行互動。 考慮平台 想想您的應用程式要如何在不 同的裝置和尺寸規格的生態系 統上運作。問問自己:「這個 裝置的強項是什麼?」,然後 針對這些獨一無二的優勢充分 打造極致的體驗。使用多個平 台設計應用程式為您提供的商 機,是只在單一平台上建置應 用程式所遠遠不及的。
  14. 14. 跨平台網站使用者研究
  15. 15. 只有年輕人才會上網? • 測試期間:2014年中 • 調查管道:E-mail邀請、粉絲團 • 樣本數:747份 • 男/女: 86% / 14% • 主要受測者縣市分佈:北部為主 項目 主要受測者 次要受測者 問卷佔比 82% 18% 年齡 40-50歲 30-40歲 年收入 151~200萬 81~120萬 • 主要調查問題:  上網瀏覽哪種類型的資訊  不同網站會用何種載具上網  不同情境的載具使用習慣
  16. 16. 上網主要瀏覽哪些網站 24% 18% 13% 11% 11% 11% 12% 搜尋入口網站(ex:Yahoo,Google) 社群網站(ex:Facebook) 新聞網站(ex:蘋果日報) 理財投資網站(ex:股票、銀行) 汽車網站(ex:車訊) 影音網站(ex:Youtube) 購物網站(ex:拍賣、PC home 24h)
  17. 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. 18. 使用MOBILE的情境大不相同 • 使用手機的情境多在室外 • 使用平板的情境多在室內 桌上型電腦 筆電 平板電腦 智慧型手機 不上網 = 10% 24% 37% 24% 5% [家中客廳] 20% 30% 24% 19% 7% [自己的房間] 9% 8% 7% 60% 16% [商店/購物時] 0% 2% 11% 76% 11% [交通工具上]
  19. 19. 2014台灣跨屏網路使用行為調查 資料來源為創市際®市場研究顧問公司
  20. 20. 響應式網頁設計
  21. 21. 思考一下 A BOOK APART 2011 SMASHING MAGAZIN 2012 PACKT PUBLISHING 2012 好感度No.1的網頁 設計:RWD不出槌 法則 2014
  22. 22. 遺失的片段 • 2012年RWD被.net magazine選 為網頁設計趨勢第二名,第一名 為“漸進增強”設計模式。 • • 漸進增強這樣的設計趨勢,在台 灣並不流行,但卻可以說是RWD 的立基點。所謂的漸進增強就是 打破傳統的網站規劃方式,以 mobile first為主,從手機內容開 始規劃,在推到平板、桌機網站 內容,是一種從小到大的網站設 計模式,與以往從大到小的設計 模式完全不同。
  23. 23. 何謂RWD? • RWD是Responsive Web Design的縮寫,中文翻譯比較常 見的有響應式設計或者是自應式設計,可使網站在多種瀏 覽裝置(從桌面電腦顯示器、平板電腦顯示器到行動電話 或其他行動產品裝置)上閱讀和導航,同時減少縮放、平 移和捲動。
  24. 24. 縮放?平移? • 2007年iPhone問世之後沒多久 Android系統也隨之誕生,為了讓智 慧型手機也可以瀏覽網站,所以就發 展出將網站以等比例縮小置放在手機 瀏覽器中,由於畫面過小,想要瀏覽 正常頁面內容,使用者就必須不斷的 使用放大、縮小手勢,並搭配左右平 移手勢,才能順利瀏覽整體網站內容
  25. 25. 何謂RWD? • 簡單說就是可以橫跨手機、平板、桌機等各式螢幕解析度 的,以不同形式展現網頁內容的一種網頁設計方式,中文 名稱為響應式設計或自應式設計。
  26. 26. 為什麼要RWD? • 視覺設計省時: 一款設計跨越多個平台,減少視覺設計師負擔。 • 修改維護省時: 後續修改上大致上只要調整一個版本即可,減少後續擴充 或修改維護的負擔。 • 一次上稿省時: 後台上稿也只需要上一次資料即可更新個平台所看見的網 站內容。
  27. 27. RWD響應式設計 跨越各種載具 一款設計運用在各平台上,可以 讓使用者只需學習一種操作模式 就可以在各平台中自由操作 一致性的設計 視覺設計上的統一有助於品牌印 象的建立容易讓使用者記憶深刻 整合後台操作 只需一個後台管理系統即可控制 各平台上的顯示畫面內容,節省 後續網站維護成本
  28. 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)
  29. 29. 這個網站適合RWD嗎? 專案 經費 網站 架構 內容 資料 媒體 檔案 特殊 元素 專案經費足夠的情 況可依據各平台打 造最適合的網站當 然是最佳的選擇, 但是如果經費不足 又想打造各平台上 的網站,那採用 RWD設計模式就是 一個解決方式 透過架構可以推測 網站選單的分層多 寡,過多層次地選 單在智慧手機上操 控不易,很容易造 成使用者瀏覽障礙 網站資訊若過多, 在使用者頻寬不足 的情況下會導致網 站開啟過慢,進而 提升跳出率 雖然圖片、音樂、 影片等等的視覺、 聽覺類媒材可以營 造網站的氛圍,但 是必須注意的是這 些檔案的大小是否 會造成開啟過慢, 讓使用者失去信 心,不想等待,如 果因為這些數位媒 材導致使用者不想 瀏覽網站,那勢必 就要有所取捨 比較常見的就是所 見即所得編輯器必 須固定大小無法縮 放,或是一些網路 廣告無提供RWD格 式,導致網站在各 個平台上無法正常 響應 有沒有更簡單的方式?
  30. 30. RWD對無障礙有幫助? • 絕對有幫助! • 更有效率的程式碼,使用role 與 aria-label做標示 • 注意區塊的排列順序,會影響閱讀順序 • Tab鍵的功能要製作跳過header區塊直接到主要區塊的機制 • 視覺性質的內容要有替代文字作為輔助
  31. 31. RWD設計與一般行動網站的難易度對照
  32. 32. 常見的RWD Framework Bootstrap Foundation Pure 自行開發模式
  33. 33. Bootstrap Bootstrap是由Twitter的設計師與工程師共同開發建造出來的 開放原始碼,也是目前最常被拿來運用的RWD Framework。
  34. 34. Foundation 號稱最先進的RWD Framework,也是目前檔案大小最大的 一套RWD Framework,採用mobile first 概念所打造,觀念 上比Bootstrap欣穎
  35. 35. Pure 由Yahoo所打造,是目前常見RWD Framework架構中,體 積最小的一套RWD Framework,約44K。
  36. 36. 自行開發模式 運用現有RWD Framework最大的問題在於有許多的CSS設 定或javascript特效是運用不到的,但是由於Framework本身 都會匯入所有的檔案作為預設值,所以很容易造成網站肥 大,而且設計師若對Framework熟悉度不高,很容易搗毀整 個Framework的設定。 自行開發RWD Framework除了可以提升自己的能力以外, 運用在專案上可以節省許多不必要的流量資源浪費,並且使 用起來也會順手許多,幾乎不需要再去學習如何使用。
  37. 37. 在RWD架構下Server端也可以做什麼 事? RWD Server Side ComponentsRESS
  38. 38. RESS實際情況 當網友開啟網站時記錄網友目前使用的平台,再到後端撈取 相對的區塊元素組合出所需的頁面內容。 後端上稿時會自動處理圖片縮放問題,通常上稿只需上傳一 張,程式會自動壓縮不同比例。 Desk header Pad header Mobile header Desk footer Pad footer Mobile footer
  39. 39. 實測RWD網站 多平台測試是RWD設計中一定會遇到的環節,以往測試都必 須一次使用一種平台做測試,但是現在我們選擇模擬測試與 實機同步測試兩種方式。
  40. 40. 常見選單設計方式 下拉選單模式 極簡的選單收合,通常使 用于選單較少的網站,使 用者需點擊MENU連後才 可以看見完整選單 左右滑入模式 極簡地選單收合,通常適 用于選項較多的網站,使 用者需點擊MENU連後才 可以看見完整選單 常駐選單模式 直接將選單攤開常駐于頁 面,與App選單較為類 似,通常用於選單只有四 至五個選項的網站上
  41. 41. iOS與android載具最大的不同 iOS僅有一顆選單按鈕,但是android卻有回上一頁、選單、多功等三個按鈕
  42. 42. 操作體驗 滑鼠 超手感 觸控筆
  43. 43. 操作體驗
  44. 44. 操作體驗 幾個咩? 幾個G?
  45. 45. 操作上的難易度 常用App通常會放置于最下方,原因是 單手操作下,放置于最下方的App最好 開啓
  46. 46. RWD測試檢核表
  47. 47. 網站前瞻性設計
  48. 48. 以使用者為導向 之單欄式設計 • 以內容為主 • 大圖營造氛圍 • 適當的留白讓使用者可以呼吸 • 簡單不複雜的選單操作 • 沒有太多層級的內容
  49. 49. 開發跨平台網站
  50. 50. 搜尋抬頭顯示
  51. 51. Fat Footer • Sitemap • Facebook 社群等 • 圖像式的資訊
  52. 52. FB 專頁以 iFrame 內嵌 官網資訊 • 與網站做關聯 • 宣傳相關活動 • 製作FB app行銷
  53. 53. 開放 API 串接服務
  54. 54. 2015年網頁設計趨勢
  55. 55. 捲動網頁取代點擊 單一網頁愈來愈長已是很普遍的做法,尤其是在行動裝置普 及的時代,使用者對捲動這件事已經越來越能接受
  56. 56. 運用敘事與互動製造驚喜 • 精彩的內容是決定網站優劣的 關鍵因素,如果善於以說故事 的方式呈現內容,更是大加分 • 使用視差滾動技術Parallax Scrolling可以讓使用者在瀏覽 時有不同的感受,一邊滑動捲 軸、一邊滑過不同元素,會有 各種令你驚奇萬分的互動感
  57. 57. 背景爭奪戰:大張背景圖 vs. 大型色塊 前幾年,一定看過不少大型 圖片作為背景、文字浮於其 上的設計,這是網友打開網 站首先映入眼簾的部分,覺 得膩了、想要「非主流」一 下嗎?那就逆勢而行。有些 新網站就選擇抽除背景圖 片,只留下巨大的色塊與文 字。抽的好處除了特別突出 之外,也有助於改善載入速 度
  58. 58. 去除非必要的元素,簡化再簡化 有個設計理論是這麼說的,所有非必要元素全部都被清除之 後,設計才大功告成。2015 年可能會是設計師大舉實踐這個 理論的年份
  59. 59. 固定寬度置中版型 • 過去幾年大部分網站多把「banding」或寬度(width)設 為 100%,影像與區塊隨著瀏覽器視域而變化。在更之 前,設計師傾向設定固定寬度,並將圖像置中在頁面。這 種固定寬度的趨勢以現代化的面貌,出現復興的跡象,有 些網站選擇設定「最大寬度」,讓內容在瀏覽器中置中
  60. 60. 專業高品質、獨一無二的攝影 • 花一點錢請專業攝影師拍攝高品質、獨一無二而且完全按 照網站目的需求定製的影像,不僅能夠切實展現網站品 味,還能避免與其他網站「撞衫」
  61. 61. 主選單藏起來! 有些網站則把選單藏起來,唯有網友點擊或懸停在某個元素 上,才會開啟選單,儘量維持畫面整潔、強調功能性。這個 同樣源自手機螢幕特性的設計,或許也將成為 2015 年的趨 勢
  62. 62. 手機選單移植回網站 響應式設計(RWD)興起,協 助設計師順利讓網站順應裝 置,無論何種螢幕都能有最佳 瀏覽體驗。在這樣的趨勢下, 我們開始看到本來在手機上流 行的元素,反倒移植回桌電上
  63. 63. 超級大的字型(typography) 巨大的文字標題富有張力,可以衝擊網友的視線
  64. 64. 最新常見設計模式 • 視差滾動技術Parallax Scrolling • 卡片設計:前幾年類似 Pinterest 的卡片瀑布流今年 可能會捲土重來
  65. 65. 最新常見設計模式 • 物質設計(material design):擬真設計與扁平設 計的交叉點,Google 去年推 出的 material design,今年預 計也將大為風行 • 幽靈按鈕(ghost button): 按鈕透明化,僅以能夠識別的 超細邊框,包裹無襯線字型。 一方面減少按鈕與背景的突兀 感,一方面依然有清楚的指向
  66. 66. 最新常見設計模式 • 動態設計(motion design):比如不斷捲動, 不會直接出現圖片,而是先 有色塊才有圖片開展。或者 數據長條圖「動起來」 • 模組捲動(modular scrolling):一般我們是捲 動整個網頁,但捲動個別欄 位也是沒問題的
  67. 67. THANK YOU! Nowill Chang nowill@nowilldesign.com

×