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

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

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

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

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

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

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

左手Vim、右手Photoshop

有人說這是
開發者和設計師
的混種 (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-
guess-in-your-life-gaps/

前端工程師的特異功能
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-wallpaper-wallpaper

臨摹
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沒告訴你的事
（終於到主題了）

1
彈性
i18n、圖片的濫用

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-height
line-height與box-model、字體學的不同
多出的pixel 導致高度是無法預測的

高度對齊？

Do the Math

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

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

三字經？

3
z-index
疊疊樂

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

大亂鬥

大亂鬥

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

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

配色與變數
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了

try caniuse.com

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

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

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

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

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 instantaneously, meaning
that no special feedback is
necessary except to display the
result.”
Jakob Nielsen

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

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

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

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

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

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

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

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

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

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