Recomendados
Más contenido relacionado
Similar a 凌網-網頁設計新規格簡介
Similar a 凌網-網頁設計新規格簡介 (20)
凌網-網頁設計新規格簡介
- 1. 網頁新規格簡介 HTML5 / CSS3 / Responsive Web Design
- 2. 大綱 對網頁設計的了解?對GIP的了解? 手持裝置對網頁設計帶來的改變 關於HTML5 關於CSS3 Responsive Web Design自適應網頁/響應式網頁 對新規格的誤解 設計師會遇到的難題 企劃該注意到的事
- 3. 對網頁設計的了解?對GIP的了解? HTML是什麼? CSS是什麼? 關於GIP 了解你配合的工程師 如何跟設計師溝通你要的切法？
- 4. 手持裝置對網頁設計帶來的改變 手持裝置這些年來已經進入了大爆發的時代，為了配合手持裝置瀏覽， 網頁的設計方式這些年來也漸漸改變，但無論如何改變，最終的目的 都是要讓瀏覽經驗更方便、更快速。 趨勢 解決辦法 網頁內容精簡 滾動式、單頁式 減少Flash、JavaScript的使用 HTML5搭配CSS3 網頁設計精簡 扁平化設計Flat Design 跨媒體瀏覽 RWD自適應
- 5. 關於 HTML5 HTML5是HTML下一個主要的修訂版本，現在仍處於發展階段。目 標是取代1999年所製定的HTML 4.01和XHTML 1.0標準。 廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內 的一套技術組合。 它希望能夠減少瀏覽器對於外掛程式需求，如Adobe Flash、 Microsoft Silverlight，與Oracle JavaFX的需求，並且提供更多能有 效增強網路應用的標準。
- 6. HTML5的技術組成 離線功能 HTML5透過JavaScript提供了數種不同的離線儲存功能，相對於傳統的 Cookie而言有更好的彈性以及架構，並且可以儲存更多的內容。 WebStorage →比Cookies更大、更有彈性的的儲存 Web SQL Database →本地端的SQL資料庫 Indexed DB → Key-value的本地資料庫 Application Cache → 將部分常用的網頁內容cache起來
- 7. HTML5的技術組成 即時通訊 以往網站由於HTTP協定以及瀏覽器的設計，即時的互動性相當的受限， 只能使用一些技巧來「模擬」即時的通訊效果，但HTML5提供了完善的 即時通訊支援。 WebSocket →即時的socket連線 Web Workers →以往JavaScript都是single thread，透過Worker可 以有多個運算 Notifications →原生的提示訊息，類似像OS X的Growl提示
- 8. HTML5的技術組成 檔案以及硬體支援 在Gmail等新的網頁程式當中，可以透過拖拉的方式將檔案作為附件或是上 傳的方式，就是HTML5的Drag‘n Drop和File API。 Drag'n Drop → HTML元素的拖拉 File API →讀取使用者本機電腦的內容 Geolocation →地理定位 Device orientation →手持裝置的方向 Speech input →語音輸入
- 9. HTML5的技術組成 語意化 語意化的網路可以讓電腦能夠更加理解網頁的內容，對於搜尋引擎的優 化（SEO）有很大的幫助。 New tags →新的標籤，像是<header>、<section>等 Application tags →也是新的標籤，像是<meter>、<progress>等 Microdata →加入語意的資料讓搜尋引擎等網站可以正確顯示 Form type → <form>可以加入的type便多了，包含email和tel等屬 性，瀏覽器會協助進行資料格式的驗證
- 10. HTML5的技術組成 多媒體 Audio、Video的標籤支援以及Canvas的功能應該是大家對於HTML5最 熟悉的部份了，也是許多人認為Flash會被取代的主要原因。 Audio video → 影片和音樂的原生播放支援 Canvas → 2D的繪圖功能支援 Canvas 3D → 3D的繪圖功能支援 SVG → 向量圖支援
- 11. 與HTML4的不同之處 檔案類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。 新的解析順序：不再基於SGML。 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 input元素的新類型：date, email, url等等。 新的屬性：ping（用於a與area）, charset（用於meta）, async（用於script）。 全域屬性：id, tabindex, repeat。 新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。 解除安裝元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。
- 12. 與HTML4的不同之處
- 13. HTML5的支援程度 各瀏覽器的支援 HTML 5 Test網站，是用以測試對瀏覽器對熱門新功能的支援。測試的滿分是550分 http://html5test.com/results/desktop.html HTML5 & CSS3 Support http://fmbip.com/litmus/ CSS3 Properties：CSS3屬性支援列表 CSS3 Selectors：CSS選擇器支援列表 Web Applications：HTML5的Web應用功能支援列表 GFX & Embedded Content：HTML5的圖形及內嵌內容支援列表 Web Forms 2.0：HTML5的新表單元件支援列表 讓IE8勉強支援HTML5 http://diyland.biz/?opt=detail&topic=75&id=16977
- 15. 關於CSS3 各瀏覽器的支援 CSS又叫層疊樣式表（Cascading Style Sheets）用來為結構化文件（如HTML或XML） 添加樣式（字型、間距和顏色等），由W3C定義和維護。目前最新版本是CSS2.1，為 W3C的推薦標準。 CSS3新增許多CSS2.1沒有的功能，過去利用影像或是JavaScript才能呈現的網頁設計 （例如漸層色、圓角、陰影、英文網路字型、多欄位排版、動畫），現在只要利用 CSS3搭配HTML5就可以輕鬆完成，對於網頁在手持裝置上的執行速度有顯著的提升。 但因為目前只是草案，除了每家瀏覽器的CSS3寫法不同之外，也有支援度的問題。 W3C網站 http://www.w3.org/TR/CSS/ CSS3 school http://www.w3schools.com/css/css3_intro.asp 瀏覽器引擎CSS支援比較 http://ppt.cc/7qe0
- 16. Responsive Web Design自適應網 頁 何謂自適應？ 簡單來說就是讓同一 個網頁文本（即同一 個HTML）在 PC、 Mobile 上都可以有好 的瀏覽效果，稱為自 適應網頁 （Responsive Web Design，簡稱RWD）。
- 17. Responsive Web Design自適應網 頁 Responsive design device resolution reference http://spirelightmedia.com/resources /responsive-design-device- resolution-reference Testing Tools http://designwebkit.com/web-and- trends/12-responsive-design-testing- tools-check-screen-resolutions/
- 18. Responsive Web Design自適應網 頁 自適應原理 液態排版 vs 固定寬度排版 液態排版的對比設計方式就叫「固定寬度(fixed-width)排版」，傳統上 來說，比起液態方式，固定方式通常較受平面及視覺設計師歡迎，因為 他們較習慣先決定整體版面輸出的範圍，而液態方式則需要費多一點心 力去考量很多不同解析度的情況，雖然比較費工，但卻是互動介面不可 或缺的重要設計。 液態排版(通常用在文章Blog) http://alistapart.com/article/holygrail 固定寬度排版 http://www.japantimes.co.jp/
- 19. Responsive Web Design自適應網 頁 自適應原理 CSS3 media query 自適應網頁設計的主要核心技術是CSS3 media query ，說穿了就是讓不同解析度去套用不同的CSS設定， 所以多少種尺寸，就要寫多少組CSS。 Max Width（@media screen and (max-width: 600px)） Min Width（@media screen and (min-width: 900px)） Device Width（@media screen and (max-device-width: 480px)） 針對iPhone4提供專用的css設定檔 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> 針對iPad的Portrait Mode(直立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設定檔 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 參考設計 http://mediaqueri.es/ https://dribbble.com/shots/1004476-Wireframes/attachments/118672
- 20. Responsive Web Design自適應網 頁 自適應的優點 開發成本與時間比APP低 APP必須開發iOS版及Android版兩個版本，一個版本皆數十萬元起跳，開發時間加上審核上架時 間相當長。 不需下載APP就能使用 這不只是自適應網頁的優點，可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到 iTunes、Google Play下載，APP若要更新，必須重新審核過後，再通知所有下載用戶更新。反觀 自適應網頁與手機網頁，只要管理者更新網站，每次連上網頁都會是最新版本。免費Wi-Fi熱點越 來越多、 3G費率持續調降，即使無法離線瀏覽也不再是問題了。 可以同時針對許多不同裝置分別調整 APP必須開發iOS版及Android版兩個版本。通常做 都是利用 CSS3 的 Media Queries 方法來實 現，而你可以使用這項 CSS 來對許多裝置做設計，不論是螢幕小到不行的入門款 Smart Phone、 螢幕大的 Galaxy Note、解析度超高的 iPad、輕巧的 Google Nexus 7 都可以做 Responsive Web Design 。
- 21. Responsive Web Design自適應網 頁 自適應的優點 不需要重寫 HTML Responsive Web Design 不需要再重寫另一份 HTML ，直接使用 CSS 屬性來對不同裝置做調整 即可。 維護成本低 APP完成之後要不定期需針對新版本測試，才能確定APP在新手機上能運作順暢。以目前新手機 上市的頻率來看，這是永遠不會結束的測試地獄。手機版網站等於是另一個用在行動裝置的公司網 站，相對地，企業必須花2筆網站維護成本。 利於分享 APP沒有網址可以分享，做了手機版網頁，分享出的網址通常都是手機版網頁的網址，當朋友用 電腦開啟連結時，卻不見得會轉回電腦版網站。蘋果日報的手機網站就是如此。 同樣的網頁內容 拆成電腦版、手機版兩個網址，按讚數、流量分析等也會跟著拆成兩筆數據，對SEO相對比較弱。
- 22. Responsive Web Design自適應網 頁 自適應的缺點 E7以下不支援，IE8雖然有hack但是很容易有bug 不適合複雜的功能、選單或介面 如果電腦版必須維持很複雜的介面，手機版則必須大量縮減內容，兩個版本架構不同 且差異相當大的話，另外做手機版網站是比較適合的。 載入速度問題 因為是使用同一份的 HTML & CSS ，所以不管 User 在手機上或者在 PC 上，要瀏覽 的網頁都是同一份網頁，當然速度也是會一樣。 必須花心思規劃及花較長的時間切版，前端開發時間較長 不單單只是程式碼的配合而己，整體網頁在架構及設計上一開始就要導入RWD的觀念， 所以網頁的使用上必須簡單直覺，訊息清楚明瞭，少用動畫及特效（輪播、跑馬燈、 動畫） 。
- 24. 對新規格的誤解 用新規格開發會變快？ 工程師或許會少套一個手機板，但是對於設計師來說會增加切版時間及修正BUG的時間。 是手機板還是自適應？ 基本上自適應就是為了手持裝置瀏覽而誕生的，有了自適應自然不需要做手機板，除非是兩者採用 資料不同，或電腦版的內容過於龐雜，用手機瀏覽負擔會太重，這時候才需要另外製作手機板。 一欄?兩欄?三欄? 自適應其實無關乎幾欄，在於版面的編排是否符合自適應的邏輯。 當然欄位變動越大，製作時間就越長。幾本上解析度越小，欄位要越少，才不會讓使用者看到眼睛 脫窗，所以在手機上瀏覽網頁大部分都是一欄。 區塊可以任意變換? 在GIP的架構下必須遵守table的邏輯，但如果不用GIP開發則要考量到工程師的時程。 但是原有的HTML邏輯也是必須遵守的。
- 25. 設計師會遇到的難題 不適合的規劃 小小的區塊擠太多內容 / 沒有按照HTML的邏輯 / 不先訂好稿切板後再修改 GIP的侷限 GIP2.0架構因為中間有table的關係，對於自適應的排版有相當程度的阻礙。 自適應CSS所需耗費的工時 一種規格尺寸，一份工時 ex:1024X768、960x640、480X320 規劃越複雜越不統一，切版越耗時 各家瀏覽器版本的整合 -moz / -webkit / -ms / ie9 、8、7、6 Javascript和JQ的修改 大部分的網頁設計都是學視覺傳達出身，為了工作逼不得已要學CSS和HTML，有時候還要會寫AS和JQ， 但畢竟我們不是寫程式的科班，只能找網路上的opensource來替代， opensource的好處是免費，壞處 就是有BUG不能修改，也無法客製。 其實這些工作都是前端設計師的專長，但我們公司並沒有前端工程師，通常都是請開發的工程師幫忙救火 或是設計師網路上找免費的硬上。所以當企劃在規劃某些功能時，必須考慮是否有可輔助這些效果的工程 師。
- 26. 企劃該注意到的事 估執行該專案的條件 總金額 / 時間 / 人力資源 / 規格 客戶想要的？我們能做的？如何分析出效益最好的做法？ 金額低→時間少人力少→簡化需求→push客戶開新案 寧可凹客戶開個維護案，也不要被凹但做的凌凌落落焦頭爛額還要被扣錢 如果真的要做，該如何設計出適合自適應的規劃? 先了解客戶的認知及需求 根據專案利潤來評估要做的尺寸規格 把需要的區塊表列出來，並儘量統一各區塊的規格 排列出適合的電腦版頁面 依據客戶需求、考量使用者行為，將電腦版頁面縮減內容至其他自適應版本 （化繁為簡） 針對獨特的區塊或是需要動態的部分和設計師及工程師討論可行度