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了沒

9.589 Aufrufe

Veröffentlicht am

http://nowilldesign.com/ 投影片部份圖片引用至網路

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

設計師你Rwd了沒

  1. 1. 設計師!你RWD了沒?RWD到底是蝦咪13年5月18⽇日星期六
  2. 2. 海綿時代,多吸多健康13年5月18⽇日星期六
  3. 3. 關於我(Nowill / 德德)有點犯規的經歷使⽤用者研究員網路⾏行銷企劃網⾴頁設計師網站專案PHP程式設計師社群營運專案經理服務過的客⼾戶電信(中華、亞太)美妝(舒摩兒、元氣堂)藥廠(德國拜⽿耳、天義企業)電玩(宇峻奧汀、遊戲怪獸)⾦金融(台灣企銀、保德信)補教(朱宗慶、台⼤大補習班)美⻝⾷食(爭鮮壽司、京星餐飲)出版(城邦、⻘青⽂文出版社)現況SOHO (歡迎合作)部落客連結nowills.blogspot.comnowilldesign.com13年5月18⽇日星期六
  4. 4. 先說在前頭思考⼀一下A BOOK APART2011SMASHING MAGAZINE2012PACKT PUBLISHING201213年5月18⽇日星期六
  5. 5. ⼤大綱快速介紹RWD設計師該如何切⼊入RWD以使⽤用者為中⼼心的RWD13年5月18⽇日星期六
  6. 6. 快速介紹RWD正題終於來了13年5月18⽇日星期六
  7. 7. 橫越桌機、平板、⼿手機跟⾃自由發揮⼀一樣標準的跨出界13年5月18⽇日星期六
  8. 8. Responsive Web Design簡稱 RWD中⽂文翻譯:響應式網⾴頁設計、⾃自應式網⾴頁設計維基百科有記載:響應式網⾴頁設計“響應式網⾴頁設計(英語:Responsive web design,通常縮寫為RWD)是⼀一種網⾴頁設計的技術做法,該設計可使網站在多種瀏覽裝置(從桌⾯面電腦顯⽰示器到⾏行動電話或其他⾏行動產品裝置)上閱讀和導航,同時減少縮放、平移和捲動” - 引⽤用⾃自維基百科之響應式網⾴頁設計13年5月18⽇日星期六
  9. 9. CSS3技術⾯面(這不是重點)@media screen,not , and , only => Media Queries範例:@media screen and (min-width: 400px) and(max-width: 700px)依舊是範例:<link rel="stylesheet" media="screen and(max-width: 600px)" href="template.css" />⽂文件:http://www.w3.org/TR/css3-mediaqueries/13年5月18⽇日星期六
  10. 10. 什麼?舊瀏覽器不⽀支援!(依然不是重點)解法不⽌止⼀一種,最常⾒見的是JS⼤大補帖!Respond.jsA fast & lightweight polyfill for min/max-width CSS3Media Queries (for IE 6-8, and more)https://github.com/scottjehl/Respond13年5月18⽇日星期六
  11. 11. 設計師該如何切⼊入RWD你是哪種設計師?13年5月18⽇日星期六
  12. 12. 網⾴頁設計師有哪幾種?視覺 前端 後端畫網站畫界⾯面畫平⾯面...喜歡CSS愛Javascript對UI充滿熱忱...PHP.netRuby...畫⾯面跟時間有限,故以上僅供參考13年5月18⽇日星期六
  13. 13. 什麼樣的網⾴頁設計師會需要做到RWD13年5月18⽇日星期六
  14. 14. 客⼾戶說之前,請先⾃自⼰己說13年5月18⽇日星期六
  15. 15. K資料以外,也請動⼿手做13年5月18⽇日星期六
  16. 16. 沒經驗沒關係,那就⾃自⼰己去創造13年5月18⽇日星期六
  17. 17. 只要有⼼心下個案⼦子就開始所以到底要怎麼切⼊入?13年5月18⽇日星期六
  18. 18. 以使⽤用者為中⼼心的RWD真正的重點來了13年5月18⽇日星期六
  19. 19. RWD五⼤大祕訣 - 掌握解析度StatCounter 2012年4月~2013年4月於台灣的⼿手機解析度數據,近期 720 x 1280 已經超越 320 x 48013年5月18⽇日星期六
  20. 20. RWD五⼤大祕訣 - 流動佈局捨棄固定寬度(fixed-width)改⽤用液態排版(Liquid Layout)px、pt、百分⽐比、em、rem...... 哪⼀一種適合流動?是要可以⾃自⾏行伸縮,還是固定寬⾼高流動?Liquid Layout13年5月18⽇日星期六
  21. 21. RWD五⼤大祕訣 - 使⽤用者經驗調查 需求建模 研究或訪談 修正 測試導⼊入使⽤用者經驗研究流程,未必全部,但總⽐比沒有好建⽴立網站⼈人物誌(Persona) ,假想使⽤用者操作環境(建模)使⽤用者會開外掛,但這不該是你假想的⼤大部份使⽤用者累積實作經驗,與同事或同業討論,⼤大家來找碴13年5月18⽇日星期六
  22. 22. RWD五⼤大祕訣 - 體驗操作被忽略⼜又假裝成鉛筆的電容筆滑⿏鼠超有⼿手感之你的⼿手13年5月18⽇日星期六
  23. 23. RWD五⼤大祕訣 - 體驗操作孤島式機械式鍵盤迷你型螢幕鍵盤13年5月18⽇日星期六
  24. 24. RWD五⼤大祕訣 - 體驗操作幾個咩? 幾個G?13年5月18⽇日星期六
  25. 25. RWD五⼤大祕訣 - 推敲思考找⼀一個RWD網站,開始思考為什麼這個設計師要如此設計?有什麼缺點?有什麼優點?去哪裡找RWD網站? http://mediaqueri.es/不知道如何思考起?1.列出桌機、⼿手機、平板等規格的差異2.實際使⽤用測試,不要放過任何可以點擊的地⽅方3.列出你有覺得好設計與不好設計之處4.開始思考各平台差異與優缺點為何要如此設計!13年5月18⽇日星期六
  26. 26. 說在後頭不是每個網站都適合做RWD,所以制作前請先評估RWD三⼤大關鍵:Media Queries、流動佈局、資訊流(圖⽚片、檔案⼤大⼩小等)RWD並⾮非為全新的設計網⾴頁設計技術,只是⼀一種全新的設計模式與概念,之前所累積的網⾴頁制作經驗不但可以延續,更可以做更多的延伸專案經驗:對客⼾戶來說,RWD的制作成本相較其他⽅方式來說,是⽐比較低的13年5月18⽇日星期六
  27. 27. 最後,我想尋找築夢的伙伴Nowill Design : nowilldesign.com草監網路: nowills.blogspot.com草監網路粉絲團:www.facebook.com/nowilldesignPlurk:www.plurk.com/nowills13年5月18⽇日星期六

×