workflow and design guideline

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

(demo)

模型mockup: design, visual, form

能看不能開

能看不能開

blasamiq mockup

雛型prototype

Hanmail Paper Prototype

polypage

polypage

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/

hlb@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++