workflow and design guideline
Post on 21-Oct-2014
3.298 views
DESCRIPTION
2008/12/12TRANSCRIPT
hlb, 布丁
Handlino和多 — 和而不同，少就是多
2.0
工作流程與設計規範Workflow and Design Guideline
工作流程Workflow
人
亂
How Projects Really Work (version 1.5) Create your own cartoon at www.projectcartoon.com
How the customerexplained it
How the project leaderunderstood it
How the analystdesigned it
How the programmerwrote it
What the beta testersreceived
How the businessconsultant described it
How the project wasdocumented
What operationsinstalled
How the customer wasbilled
How it was supported What marketingadvertised
What the customerreally needed
溝通Communication
Idea Wireframe Mockup Prototype Product
示意圖wireframe: functional & layout
模型mockup: design, visual, form
能看不能開
能看不能開
雛型prototype
Hanmail Paper Prototype
polypage(demo)
例: [略]
使用情境
Idea Wireframe Mockup Prototype Product
台灣
Idea Mockup Product
Idea Prototype Product
“why we skip Photoshop”, 37signals
設計規範Design Guideline
一起工作
規範
程式風格Coding Style
4 spaces / 2 spaces / 1 tab
doctype?html or xhtml?
standard modeor
quirks mode
id or class?
#div { p1: v1; p2: v2; }or#div { p1: v1; p2: v2;}
命名原則Naming Rules
名詞、動詞、形容詞noun. , verb. , adj.
#doc, #hd, #bd, #ft#salution, #search#nav, #main, #side.first, .last.left, .right.has-submenu
#popular-lists.tabview .tab-nav .tab-content
.error-messageor
.message-error?
.vertical-tabviewor
.tabview.vertical?
模組化Module
Live Demo
漸進強化Progressive Enhancement
[略]
Q & A
謝謝ご清聴ありがとうございましたhttp://handlino.com/
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。
http://www.flickr.com/photos/88864835@N00/48713348/http://www.flickr.com/photos/35468151759@N01/184032078/http://www.flickr.com/photos/63641363@N00/2648414123/http://www.flickr.com/photos/76877398@N00/130960238/http://www.flickr.com/photos/32729422@N00/2192411612/http://www.flickr.com/photos/7423705@N02/452860780/http://www.flickr.com/photos/95785418@N00/527971656/http://www.flickr.com/photos/95785418@N00/2580478427/
CC++