那些mockup沒告訴你的事@WebConf.tw 2013
•
352 gefällt mir•31,859 views
大公司小前端的經驗分享，前端工程師如何看mockup，設計師應該怎麼與前端工程師合作。 @adamp3
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie 那些mockup沒告訴你的事@WebConf.tw 2013
Ähnlich wie 那些mockup沒告訴你的事@WebConf.tw 2013 (20)
那些mockup沒告訴你的事@WebConf.tw 2013
- 1. 那些Mockup沒告訴你的事 Adam Wang WebConf Taiwan 2013.01.12
- 3. 我是Adam Wang 也有人叫我「阿當」 現在在趨勢科技 前端工程師
- 6. 還有前端工程師的慈善事業
- 8. 有人也是拿這本嗎？XD http://blog.45royale.com/post/31822015848/pepin
- 14. 什麼是 Mockup 其實我也不知道中文怎麼翻比較好， 原意是「模型（圖）」
- 16. 互動設計師或PM Wireframe 視覺設計師 Mockup 幾乎沒有人做 Prototype
- 19. 其實都是因為分工 用來溝通，減少落差 http://godinministry.wordpress. com/2012/06/21/lessons-from-the-classroom-dont- guess-in-your-life-gaps/
- 20. 前端工程師的特異功能 http://www.fanpop.com/clubs/x- men/images/58082/title/x-men- wallpaper
- 21. 前端工程師的吃飯傢伙 http://loop48.com/bump/nathans-hot-dog- champ-takeru-kobayashi/
- 22. 把圖片變成互動介面 寫程式時也有腦補畫面 http://www.fanpop. com/clubs/pinocchio/images/28337077/title/pinocchi o-magic-wallpaper-wallpaper
- 23. 臨摹 Norman Rockwell Triple Self-Portrait, 1960
- 24. 腦補分鏡圖 http://www.digititles.com/movies/life-of-pi- 2012/storyboard
- 26. 滑鼠移到tab上，要更新下方區塊資料 請寫出Javascript需要的邏輯和流程 前端工程師應該要會
- 27. 有時候Mockup和Spec 說得太少 就像地雷片的預告片一樣
- 28. 或者這根本是平面設計 這種例子還不少 http://typedesk.com/2010/11/30/adrian- shaughnessy-on-his-book-graphic-design-a-users- manual/
- 29. 那些Mockup沒告訴你的事 （終於到主題了）
- 30. 1 彈性 i18n、圖片的濫用
- 32. 圖片沒有彈性 別再用固定寬度圖片當按鈕了 再想想日後維護和高解析度螢幕 (如retina)
- 33. 反正之後不是我維護 （誤）
- 35. 邪惡的半透明陰影 a *filter:alpha vs. opacity vs. rgb 使用opacity時，半透明底層和文字要分離，然後高度...就壞了
- 36. 2 對齊 line-height與box-model
- 38. 字裡行間的魔鬼 line-height line-height與box-model、字體學的不同 多出的pixel 導致高度是無法預測的
- 39. 高度對齊？
- 41. Do the Math
- 43. 寬度對齊？ 會不會只是剛好而已？ kerning和letter-spacing決定寬度 text-overflow:ellipsis; /*CSS3*/
- 44. 三字經？
- 45. 3 z-index 疊疊樂
- 47. 大亂鬥
- 48. 大亂鬥
- 49. 4 一致性 重複利用、關聯性
- 50. "Consistency is one of the most powerful usability principles." Jakob Nielsen http://quotesondesign.com/jakob-nielsen/
- 51. 配色與變數 CSS preprocessor, Sass, LESS 用CSS來思考日曆設計 $holidayColor: red; .holiday {color: $holidayColor;} 無名變色龍的「廣告主題」
- 53. 狀態 按鈕的多種狀態： 除了正常以外， 還有 :hover, :focus, :active, [disabled]
- 54. 5 親和力 親和力 ≠ 無障礙
- 55. Think ARIA 網頁的本質在傳遞內容 結構、語意正確，SEO也自然會好 <a role="button" href="#">Panic</a>
- 60. 以樣式來說... CSS3已經不是未來，而是現在 box-shadow, text-shadow, border-radius keyframe-animation
- 62. 別再花太多時間fallback了
- 63. try caniuse.com
- 64. 這是一個很大的主題 誠心地建議看這段影片 :p N. Zakas - Progressive Enhancement 2.0 http://youtu.be/hdTxeR90_1E http://webstandardssherpa.com/about/authors/nicholas-zakas
- 66. Poka-yoke! 防呆是很重要的 發生錯誤的情況總是被忽略（在設計上） http://www.wufoo.com/html5/types/1-email.html
- 67. Web Application AJAX其實也是要等待的，並非一眨眼就完成 AJAX與「回上一頁」、瀏覽器歷史紀錄 (pushState/ PJAX) Single-Page Application (SPA) tab切換頁面的例子 [tab A (default)] -> [tab b] -> [tab b] link -> page -> 回上一頁會到哪？
- 68. 8 捲軸 above the fold、 垂直視差捲動（Parallax Scrolling）
- 69. 一目了然？ Above the fold，考慮那些在第二屏的訊息 Parallax scrolling 網頁設計有可能透過設計師和 前端工程師協力完成嗎？ 可以玩玩stellar.js
- 70. 9 效能 載入時間與介面反應
- 71. 效能最大的敵人：http request 效能有很多面向，在這裡只談圖片載入。 整包下載的時間與觀感： Pinterest的瀑布高度與lazyload。
- 72. How Long Is Too Long? “ 0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.” Jakob Nielsen
- 73. 天下武功，唯快不破 Responsive interface. http://www.slideshare.net/nzakas/responsive-interfaces 多久讓你感到慢？ 超過0.1秒，人類普遍可以感覺到 Javascript與UI thread
- 75. 螢幕大小？ Responsive Web Design (RWD) Media query? 請洽下午場閃光洽 15:40 很多人都在zoom-in網頁的奇特現象，為何？
- 76. 除了畫面，還有情境 不要再用:hover （mouseover）來提示了 請加上:active Mobile first? 或是 "mdot"? (m.webconf.com)
- 79. 希望大家都能 順利完成偉大的案子 :) （如果有偉大的案子存在的話）
- 82. 謝謝大家！ @adamp3 about.me/adamp3 facebook: A Damn Thing