1.
那些Mockup沒告訴你的事 Adam Wang WebConf Taiwan 2013.01.12

2.
我是Adam Wang 也有人叫我「阿當」 現在在趨勢科技 前端工程師

3.
工作心得分享 在Yahoo! Taiwan的三年經驗

4.
演講目標美好人生減少臭蟲，提早下班

5.
還有前端工程師的慈善事業

6.
入行管理科學系畢業，大學從自學網頁設計開始

7.
有人也是拿這本嗎？XD http://blog.45royale.com/post/31822015848/pepin

8.
左手Vim、右手Photoshop

9.
有人說這是開發者和設計師的混種 (hybrid)

10.
國外還滿多這樣的前端工程師我想可能是因為自學風氣較盛

11.
希望帶給 工程師和設計師一些不一樣的角度

12.
什麼是 Mockup其實我也不知道中文怎麼翻比較好， 原意是「模型（圖）」

13.
互動設計師或PM Wireframe視覺設計師 Mockup幾乎沒有人做 Prototype

14.
以設計廚房水槽來說設計師 決定水龍頭樣式、位置前端工程師 安裝水龍頭與水管後端工程師 讓水管有水

15.
http://ricketyclick.com/blog/index.php/category/home-and-garden/

16.
其實都是因為分工 用來溝通，減少落差 http://godinministry.wordpress. com/2012/06/21/lessons-from-the-classroom-dont- guess-in-your-life-gaps/

17.
前端工程師的特異功能 http://www.fanpop.com/clubs/x- men/images/58082/title/x-men- wallpaper

18.
前端工程師的吃飯傢伙 http://loop48.com/bump/nathans-hot-dog- champ-takeru-kobayashi/

19.
把圖片變成互動介面 寫程式時也有腦補畫面 http://www.fanpop. com/clubs/pinocchio/images/28337077/title/pinocchi o-magic-wallpaper-wallpaper

20.
臨摹 Norman Rockwell Triple Self-Portrait, 1960

21.
腦補分鏡圖 http://www.digititles.com/movies/life-of-pi- 2012/storyboard

22.
之前的面試題目在為數不多的擔任面試者經驗中

23.
滑鼠移到tab上，要更新下方區塊資料請寫出Javascript需要的邏輯和流程 前端工程師應該要會

24.
有時候Mockup和Spec 說得太少 就像地雷片的預告片一樣

25.
或者這根本是平面設計 這種例子還不少 http://typedesk.com/2010/11/30/adrian- shaughnessy-on-his-book-graphic-design-a-users- manual/

26.
那些Mockup沒告訴你的事 （終於到主題了）

27.
1彈性i18n、圖片的濫用

28.
i18n: 阿鬼不只會說中文CSS3 flex-box可以解決寬度的判斷問題，但按鈕比例仍是奇怪的設計。

29.
圖片沒有彈性 別再用固定寬度圖片當按鈕了再想想日後維護和高解析度螢幕 (如retina)

30.
反正之後不是我維護 （誤）

31.
邪惡的半透明陰影 a *filter:alpha vs. opacity vs. rgb使用opacity時，半透明底層和文字要分離，然後高度...就壞了

32.
2 對齊line-height與box-model

33.
http://www.unitedpixelworkers.com/products/evan-stremke

34.
字裡行間的魔鬼 line-heightline-height與box-model、字體學的不同 多出的pixel 導致高度是無法預測的

35.
高度對齊？

36.
Do the Math

37.
這樣截斷會不會太殘忍啊？ 其實我覺得也很不美觀

38.
寬度對齊？ 會不會只是剛好而已？kerning和letter-spacing決定寬度 text-overflow:ellipsis; /*CSS3*/

39.
三字經？

40.
3z-index 疊疊樂

41.
http://www.cool3c.com/article/64403

42.
大亂鬥

43.
大亂鬥

44.
4一致性重複利用、關聯性

45.
"Consistency is one of the most powerful usability principles." Jakob Nielsen http://quotesondesign.com/jakob-nielsen/

46.
配色與變數 CSS preprocessor, Sass, LESS 用CSS來思考日曆設計 $holidayColor: red;.holiday {color: $holidayColor;} 無名變色龍的「廣告主題」

47.
狀態 按鈕的多種狀態： 除了正常以外，還有 :hover, :focus, :active, [disabled]

48.
5親和力親和力 ≠ 無障礙

49.
Think ARIA 網頁的本質在傳遞內容 結構、語意正確，SEO也自然會好<a role="button" href="#">Panic</a>

50.
不是每個人視力都很好這行字不重要

51.
tabIndex 很多人沒有滑鼠，或是滑鼠壞了用tab也可以依順序瀏覽不同頁籤和點擊連結

52.
天然的尚好不要再客製化<select>、radio button了你知道<select>可以搜尋第一個字母嗎？ 按T

53.
6漸進式改良（Progressive Enhancement） 想想基本功能，然後再加分

54.
以樣式來說... CSS3已經不是未來，而是現在box-shadow, text-shadow, border-radius keyframe-animation

55.
以行為來說...例如：input的placeholder屬性、required屬性

56.
別再花太多時間fallback了

57.
try caniuse.com

58.
這是一個很大的主題 誠心地建議看這段影片 :pN. Zakas - Progressive Enhancement 2.0 http://youtu.be/hdTxeR90_1E http://webstandardssherpa.com/about/authors/nicholas-zakas

59.
7是介面不是圖人都會犯錯，介面也會遇到錯誤

60.
Poka-yoke! 防呆是很重要的發生錯誤的情況總是被忽略（在設計上） http://www.wufoo.com/html5/types/1-email.html

61.
Web ApplicationAJAX其實也是要等待的，並非一眨眼就完成 AJAX與「回上一頁」、瀏覽器歷史紀錄 (pushState/ PJAX) Single-Page Application (SPA) tab切換頁面的例子 [tab A (default)] -> [tab b]-> [tab b] link -> page -> 回上一頁會到哪？

62.
8 捲軸 above the fold、垂直視差捲動（Parallax Scrolling）

63.
一目了然？ Above the fold，考慮那些在第二屏的訊息Parallax scrolling 網頁設計有可能透過設計師和 前端工程師協力完成嗎？ 可以玩玩stellar.js

64.
9 效能載入時間與介面反應

65.
效能最大的敵人：http request效能有很多面向，在這裡只談圖片載入。 整包下載的時間與觀感： Pinterest的瀑布高度與lazyload。

66.
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

67.
天下武功，唯快不破 Responsive interface.http://www.slideshare.net/nzakas/responsive-interfaces 多久讓你感到慢？ 超過0.1秒，人類普遍可以感覺到 Javascript與UI thread

68.
10跨裝置設計不只有畫面大小，還有使用情境

69.
螢幕大小？ Responsive Web Design (RWD) Media query? 請洽下午場閃光洽 15:40很多人都在zoom-in網頁的奇特現象，為何？

70.
除了畫面，還有情境 不要再用:hover （mouseover）來提示了 請加上:activeMobile first? 或是 "mdot"? (m.webconf.com)

71.
TAKEAWAY拿到Mockup時想想以上幾點搞清楚再開工如果有文件記錄下來當然更好

72.
TAKEAWAY網頁設計師可以不寫CSS但最好要懂 想想水龍頭的例子

73.
希望大家都能順利完成偉大的案子 :)（如果有偉大的案子存在的話）

74.
學習、試驗和分享 經驗主義的信仰者

75.
數位時代報導矽谷的三大搶手人才UI設計師 http://www.bnext.com.tw/article/view/cid/0/id/25610

76.
謝謝大家！ @adamp3 about.me/adamp3facebook: A Damn Thing