2011/09/16 Taiwan UX Summit: App設計實戰：在開始寫程式之前

工作坊 DApp設計實戰：在開始寫程式之前李易修

李易修 Justin Lee·•赫迅互動科技使用者經驗架構師·•UiGathering創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter, plurk: @lis186

請把手機、平板、電腦收起來

需求實作發佈

圖片取自http://www.handyui.com/2007/03/24/compromised_design/

進展快速，但方向錯誤

需求實作發佈

需求實作設計發佈

設計不只是把圖畫漂亮一些

設計是全盤瞭解後產出解決方案視覺介面架構功能目標改繪自"The Elements of User Experience: User-Centered Design for the Web” by Jesse James Garrett

需求實作設計發佈

需求設計實作發佈

需求設計

劇本法設計草圖人活動需求設計境物

動手畫: 視覺元素ABC 各自在A3紙上練習 3分鐘

動手畫: 畫出你的手機畫在便利貼上 1分鐘

動手畫: 畫出你最愛的App 畫在便利貼上 1分鐘

動手畫: 幫隔壁組員畫張半身像畫在便利貼上 2分鐘

代言人: 幫組員自我介紹把前面的素材貼在A3紙上他/她的名字是＿＿＿＿用的手機是＿＿＿＿＿愛用的App有＿＿＿＿＿因為＿＿＿＿ 2分鐘+30秒

心智模式不同

心智模式相符

消費者要什麼？

劇本法設計利用說故事的方式，預測系統的使用情境，在早期發現問題和設計機會。

知識與習慣使用者活動環境物品背景環境與狀況功能與面貌

知識與習慣使用者活動環境？背景環境與狀況功能與面貌

http://www.bonnier.com/en/content/digital-magazines-bonnier-mag-prototype

劇本法設計流程需求分析設計原型製作問題劇本概念劇本規格現狀觀察慣例、設計準則功能清單改繪自"Usability Engineering: Scenario-Based Development of Human Computer Interaction" by Mary Beth Rosson, John M. Carroll

問題解決方案現在未來

4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

故事的元素 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

合理的場景 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

編故事 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

發現需求 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

產生靈感 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo

Brainstorm: 你在哪裡用App？寫在便利貼上 2分鐘

Brainstorm: 你用App用來做什麼？寫在便利貼上 2分鐘

編個合理的故事作為一個通勤族，我在公車亭內等車的時候，用手機查公車還有多久會來，是很合理的一件事。

編故事圖：少林足球

討論: 編5個故事把剛剛的便利貼貼在A3紙上，1個故事1張作為一個___________，我在_______做＿＿＿，用手機_______________________，是很合理的一件事。 3分鐘

Brainstorm: 同理心地圖選1個剛剛編的故事，在全開紙上設想主角的狀況在站牌等公車看想上班族說感覺做 12分鐘

從情境找需求公車還有多久會來？通勤族等車公車亭站牌

從環境看限制公車還有多久會來？通勤族太熱，不想等太久等車公車亭站牌

過去怎麼解決？公車還有多久會來？通勤族太熱，看班次表不想等太久等車有沒有人等車？公車亭站牌靠經驗

解決辦法可以是？公車還有多久會來？通勤族太熱，查詢等候時間不想等太久等車到站提醒公車亭 App

不同情境有不同的需求公車還有多久會來？會不會遲到？坐幾號車可以到？通勤族通勤族等車坐車公車站牌 ? 公車上 ?

Brainstorm:問題與可能解決辦法在全開紙上完成主要情境的問題與可能解決方案 20分鐘

要往哪裡去？青春不老泉海怪印度改繪自"Gamestorming”, page 5 by Dave Gray, Sunni Brown, and James Macanufo

Brainstorm:列出功能清單在A3紙上列出功能改繪自"Gamestorming”, page 245 by Dave Gray, Sunni Brown, and James Macanufo 3分鐘

休息3:40回來

NUF測試:決定重要性新穎性、有用度、可行性取自"Gamestorming”, page 245 by Dave Gray, Sunni Brown, and James Macanufo 3分鐘

Brainstorm:產品定義描述寫在A3紙上，儘量大 BusGoGo 幫助公車通勤族準確預估到站時間，減少無意義的等待。 6分鐘

框架圖(wireframe)http://moobileframes.tumblr.com/post/2761211624/ozon-ru-online-store

草圖(sketch)http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/design-an-iphone-bank-app-in-photoshop-part-1/

原型(prototype)http://katiemccurdy.com/walk/?page_id=207

精確度原型草圖時間

草圖不是原型草圖用於設計原型用於修正“Sketching User Experience”, Bill Buxton

邊畫邊想

草圖速度最重要重點不是好看，而是畫的時候學到的事品質不需要太好，可以傳達概念就好隨時可以丟掉重畫

http://www.flickr.com/photos/d2clon/4402993445/

畫草圖:App主要功能各自畫在A3紙上，至少3個畫面http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 3分鐘

討論:第一次草圖組內討論各草圖的優點、缺點http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 6分鐘

畫草圖:改善各自畫在A3紙上，至少3個畫面http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 3分鐘

討論:第二次草圖組內討論各草圖的優點、缺點http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 6分鐘

App設計小技巧

直接操作http://gesturecons.com/

按鈕大於8x8mm，間距大於5mm i

考慮握持方式 http://gesturecons.com/

小心手指遮擋畫面

哪裡怪怪的？

尊重不同OS的差異

提供剛好足夠的訊息

別忘了sensor

別過度設計

iPhone UI模式

TabBar

NavigationBar

ToolBar

Android UI模式

Hardware Buttons

Action Bar

Workspace

Dashboard

Search Bar

Quick Action

Widget

協同合作:共同發展App畫在便利貼上，再貼到全開紙上安排流程 8分鐘

檢討:共同發展的App討論設計的優點、缺點，寫在小張便利貼上 8分鐘

每組發表2分鐘

複雜性守恆定律(Teslers law) 一個系統的複雜度是固定的，當你想讓操作變得簡單，藏在背後的複雜度便會增加。

將UX融入開發流程http://www.targetprocess.com/blog/wp-content/uploads/2011/02/5.jpg

經驗功能科技

Titanium APITitanium Mobile簡單, 原生, 跨平台

只須維護一套原始碼 Javascript原始碼+素材 Titanium API

謝謝指教！李易修 Justin Lee ·•赫迅互動科技使用者經驗架構師 ·•UiGathering創會成員與工作小組理事 ·•www.lis186.com ·•lis186@gmail.com ·•twitter, plurk: @lis186

http://www.lis186.com	1084
http://abc123jo.blogspot.com	251
http://km.coevo.com.tw	37
http://paper.li	11
http://tweetedtimes.com	6
http://www.techgig.com	4
http://trunk.ly	1
http://webcache.googleusercontent.com	1

2011/09/16 Taiwan UX Summit: App設計實戰：在開始寫程式之前

by Justin Lee on Sep 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 1,395

Statistics

2011/09/16 Taiwan UX Summit: App設計實戰：在開始寫程式之前 — Presentation Transcript