那些mockup沒告訴你的事@WebConf.tw 2013

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

臨摹 Norman Rockwell Triple Self-Portrait, 1960

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

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

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

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

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

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

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

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

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

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

2 對齊line-height與box-model

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

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

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

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

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

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

"Consistency is one of the most powerful usability principles." Jakob Nielsen http://quotesondesign.com/jak...

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

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

5親和力親和力 ≠ 無障礙

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

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

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

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

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

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

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

別再花太多時間fallback了

這是一個很大的主題誠心地建議看這段影片 :pN. Zakas - Progressive Enhancement 2.0 http://youtu.be/hdTxeR90_1E http://webstandards...

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

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

Web ApplicationAJAX其實也是要等待的，並非一眨眼就完成 AJAX與「回上一頁」、瀏覽器歷史紀錄 (pushState/ PJAX) Single-Page Application (SPA) ...

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

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

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

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

How Long Is Too Long? “ 0.1 second[100ms] is about the limit for having the user feel that the system is reacting instan...

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

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

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

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

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

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

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

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

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

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

那些mockup沒告訴你的事@WebConf.tw 2013