Home
Explore
Submit Search
Upload
Login
Signup
Check these out next
業者に騙されないデジタルアーカイブシステム開発、デジタル化の調達のために
Masaki Nakayama
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
Hironori Washizaki
Databricksを初めて使う人に向けて.pptx
otato
OpenShiftでJBoss EAP構築
Daein Park
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
kwatch
CSPO、CSM研修に参加して
Arata Fujimura
Rails A/B testing by split gem
Ryuma Tsukano
新呈工業12 s介紹
Yung Jui Chen 陳泳睿
1
of
82
Top clipped slide
那些mockup沒告訴你的事@WebConf.tw 2013
Jan. 11, 2013
•
0 likes
352 likes
×
Be the first to like this
Show More
•
31,766 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Report
Design
大公司小前端的經驗分享,前端工程師如何看mockup,設計師應該怎麼與前端工程師合作。 @adamp3
Adam Wang
Follow
Front-end Engineer at Pinkoi
Recommended
What should you shift left
Yasuharu Nishi
1.3K views
•
27 slides
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
Miki Shimogai
114.6K views
•
88 slides
問合せ最適化インサイド
Takahiro Itagaki
37.1K views
•
67 slides
ユーザーストーリーの分割
Arata Fujimura
6.2K views
•
19 slides
Introducing ODC analysis for Redmine Osaka community
Yutaka KOGURE
664 views
•
25 slides
DXと名の付くプロジェクトで忘れてはならないこと
Hagimoto Junzo
1.1K views
•
50 slides
More Related Content
Slideshows for you
(20)
業者に騙されないデジタルアーカイブシステム開発、デジタル化の調達のために
Masaki Nakayama
•
4.5K views
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
Hironori Washizaki
•
6.8K views
Databricksを初めて使う人に向けて.pptx
otato
•
116 views
OpenShiftでJBoss EAP構築
Daein Park
•
426 views
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
kwatch
•
33.9K views
CSPO、CSM研修に参加して
Arata Fujimura
•
10.3K views
Rails A/B testing by split gem
Ryuma Tsukano
•
5.2K views
新呈工業12 s介紹
Yung Jui Chen 陳泳睿
•
1.2K views
PostgreSQL:行数推定を読み解く
Hiroya Kabata
•
31.1K views
MySQLバックアップの基本
yoyamasaki
•
44.3K views
現場で役立つシステム設計の原則
増田 亨
•
8.5K views
Consistent hash
paulowniaceae
•
12.7K views
鷲崎 メトリクスの基礎とGQM法によるゴール指向の測定 2014年12月18日 日本科学技術連名SQiP研究会 演習コースI ソフトウェア工学の基礎
Hironori Washizaki
•
7.2K views
JaSST'15 Tokyo 初心者向けチュートリアル -初心者からの脱出!-
崇 山﨑
•
4K views
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
•
9.9K views
企業システムにアジャイルは必要か
Hiromasa Oka
•
31.8K views
Demystifying quality management for large scale manufacturing in modern context
Yasuharu Nishi
•
4K views
「伝わるチケット」の書き方
onozaty
•
3.1K views
Standard Edition 2でも使えるOracle Database 12c Release 2オススメ新機能
Ryota Watabe
•
13.5K views
「普通の設計」をするということ
Takuma Watabiki
•
1.4K views
Similar to 那些mockup沒告訴你的事@WebConf.tw 2013
(20)
Dreaming Infrastructure
kyhpudding
•
5.6K views
2016 前端潮玩意兒
Maxis Kao
•
180 views
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
Adam Wang
•
2K views
Java Web框架汇总
yiditushe
•
3.5K views
Csdn Java电子杂志第1期
yiditushe
•
821 views
淘宝网前端开发面试题
Lumend
•
929 views
无名小站首页改版 -渐进增强与css3
taobao.com
•
987 views
Responsive Web UI Design
jay li
•
4.4K views
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
Drupal Taiwan
•
1K views
常用Js框架比较
Adam Lu
•
2.1K views
日新培训
pan quanjin
•
225 views
twMVC#03 | ASP.NET MVC內建驗證活用與擴充
twMVC
•
113 views
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
twMVC
•
2K views
淘宝网前端应用与发展
taobao.com
•
6K views
前端样式开发演变之路
Zhao Lei
•
802 views
成大心理系-Prototyping方法
Souyi Yang
•
2K views
高雄和春資工系-Axure RP基礎課程
Souyi Yang
•
5.3K views
20120524 App開發流程與小工具分享@UI Cafe
Justin Lee
•
13.4K views
程式人雜誌 -- 2013年6月號
鍾誠 陳鍾誠
•
178 views
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
•
1.5K views
Recently uploaded
(20)
206-乔治城大学.pdf
LorettaPrice2
•
0 views
164-圣地亚哥大学.pdf
LorettaPrice2
•
0 views
☀️《CNSM毕业证仿真》
hjhgg1
•
2 views
178-亚利桑那大学.pdf
LorettaPrice2
•
0 views
136-明尼苏达大学杜鲁斯分校.pdf
LorettaPrice2
•
0 views
☀️《斯图加特大学毕业证仿真》
hjhgg1
•
2 views
194-辛辛那提大学.pdf
LorettaPrice2
•
0 views
92加州大学美熹德分校.pdf
LorettaPrice2
•
0 views
197-南密西西比大学.pdf
LorettaPrice2
•
0 views
216-北卡罗来纳州立大学.pdf
LorettaPrice2
•
0 views
224-加州州立大学萨克拉门托分校.pdf
LorettaPrice2
•
0 views
留信网助您快速验证学历真伪添加q薇634068167订做迈阿密大学牛津分校毕业证成绩单#Diploma#留信入库#留才#雅思托福#offer#学生卡#wse认证
AlifAle
•
2 views
163-约翰逊威尔士大学.pdf
LorettaPrice2
•
0 views
☀️《Winchester毕业证仿真》
nhhh4
•
3 views
留信网助您顺利获得正规毕业证成绩单加q威信634068167做麦吉尔大学毕业证外壳#成绩单#信封#加拿大文凭#学生卡#雅思托福#留信留才#offer
AlifAle
•
2 views
203-科罗拉多州立大学.pdf
LorettaPrice2
•
0 views
信任的选择!留信网为您提供可靠学历认证服务加q薇634068167制作圣路易斯大学毕业证成绩单#Diploma#留信入库#留才#雅思托福#offer#学生...
AlifAle
•
2 views
138-明尼苏达大学克鲁克斯顿分校.pdf
LorettaPrice2
•
0 views
111-拉文大学.pdf
LorettaPrice2
•
0 views
226-普瑞特艺术学院.pdf
LorettaPrice2
•
0 views
那些mockup沒告訴你的事@WebConf.tw 2013
那些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