Contenu connexe Similaire à 那些mockup沒告訴你的事@WebConf.tw 2013 (20) 那些mockup沒告訴你的事@WebConf.tw 20138. 有人也是拿這本嗎?XD
http://blog.45royale.com/post/31822015848/pepin
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
28. 或者這根本是平面設計
這種例子還不少
http://typedesk.com/2010/11/30/adrian-
shaughnessy-on-his-book-graphic-design-a-users-
manual/
32. 圖片沒有彈性
別再用固定寬度圖片當按鈕了
再想想日後維護和高解析度螢幕 (如retina)
35. 邪惡的半透明陰影
a
*filter:alpha vs. opacity vs. rgb
使用opacity時,半透明底層和文字要分離,然後高度...就壞了
36. 2
對齊
line-height與box-model
43. 寬度對齊?
會不會只是剛好而已?
kerning和letter-spacing決定寬度
text-overflow:ellipsis; /*CSS3*/
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]
55. Think ARIA
網頁的本質在傳遞內容
結構、語意正確,SEO也自然會好
<a role="button" href="#">Panic</a>
60. 以樣式來說...
CSS3已經不是未來,而是現在
box-shadow, text-shadow, border-radius
keyframe-animation
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
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網頁的奇特現象,為何?
82. 謝謝大家!
@adamp3
about.me/adamp3
facebook: A Damn Thing