SlideShare une entreprise Scribd logo
1  sur  106
Télécharger pour lire hors ligne
工作坊	 D

App設計實戰:
  在開始寫程式之前

         李易修
李易修	 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
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分鐘
複雜性守恆定律(Tesler's	 law)

 一個系統的複雜度是固定的,
  當你想讓操作變得簡單,
 藏在背後的複雜度便會增加。
將UX融入開發流程




http://www.targetprocess.com/blog/wp-content/uploads/2011/02/5.jpg
經驗

功能

科技
Titanium API



Titanium Mobile
簡單,	 原生,	 跨平台
只須維護一套原始碼
   Javascript原始碼+素材
   Titanium API
謝謝指教!

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

Contenu connexe

En vedette (11)

Introduction to the open policy network and institute for open leadership
Introduction to the open policy network and institute for open leadershipIntroduction to the open policy network and institute for open leadership
Introduction to the open policy network and institute for open leadership
 
2012 Taiwan UX Summit 專題演講(二)簡報
2012 Taiwan UX Summit 專題演講(二)簡報2012 Taiwan UX Summit 專題演講(二)簡報
2012 Taiwan UX Summit 專題演講(二)簡報
 
PHP7 - что ожидать?
PHP7 - что ожидать?PHP7 - что ожидать?
PHP7 - что ожидать?
 
Creative Commons Law and the GeoWeb presentation
Creative Commons Law and the GeoWeb presentationCreative Commons Law and the GeoWeb presentation
Creative Commons Law and the GeoWeb presentation
 
0515 UiGathering Talk - Mobile App by Angel Wu
0515 UiGathering Talk - Mobile App by Angel Wu0515 UiGathering Talk - Mobile App by Angel Wu
0515 UiGathering Talk - Mobile App by Angel Wu
 
2012 Taiwan UX Summit 工作坊B 簡報
2012 Taiwan UX Summit 工作坊B 簡報2012 Taiwan UX Summit 工作坊B 簡報
2012 Taiwan UX Summit 工作坊B 簡報
 
Open licensing workshop at OGP Civil Society Day
Open licensing workshop at OGP Civil Society DayOpen licensing workshop at OGP Civil Society Day
Open licensing workshop at OGP Civil Society Day
 
Symfony 3
Symfony 3Symfony 3
Symfony 3
 
Casserly guest lecture for MIT Open Education class (March 10, 2011)
Casserly guest lecture for MIT Open Education class (March 10, 2011)Casserly guest lecture for MIT Open Education class (March 10, 2011)
Casserly guest lecture for MIT Open Education class (March 10, 2011)
 
Docker 1.9
Docker 1.9Docker 1.9
Docker 1.9
 
Adaptación primeros temas de CONO de 4º de la ESO
Adaptación primeros temas de CONO de 4º de la ESOAdaptación primeros temas de CONO de 4º de la ESO
Adaptación primeros temas de CONO de 4º de la ESO
 

Plus de UXTW(Taiwan User Experience Professional Association)

Plus de UXTW(Taiwan User Experience Professional Association) (16)

2014通訊大賽 - UX Coach機制與專家講座 (簡要版)
2014通訊大賽 - UX Coach機制與專家講座 (簡要版)2014通訊大賽 - UX Coach機制與專家講座 (簡要版)
2014通訊大賽 - UX Coach機制與專家講座 (簡要版)
 
2014通訊大賽 - UX Coach機制與專家講座
2014通訊大賽 - UX Coach機制與專家講座2014通訊大賽 - UX Coach機制與專家講座
2014通訊大賽 - UX Coach機制與專家講座
 
2012 Taiwan UX Summit 工作坊A 簡報
2012 Taiwan UX Summit 工作坊A 簡報2012 Taiwan UX Summit 工作坊A 簡報
2012 Taiwan UX Summit 工作坊A 簡報
 
2012 Taiwan UX Summit 專題演講(四)簡報
2012 Taiwan UX Summit 專題演講(四)簡報2012 Taiwan UX Summit 專題演講(四)簡報
2012 Taiwan UX Summit 專題演講(四)簡報
 
2012 Taiwan UX Summit 微型工作坊 簡報
2012 Taiwan UX Summit 微型工作坊 簡報2012 Taiwan UX Summit 微型工作坊 簡報
2012 Taiwan UX Summit 微型工作坊 簡報
 
2012 Taiwan UX Summit 工作坊C 簡報
2012 Taiwan UX Summit 工作坊C 簡報2012 Taiwan UX Summit 工作坊C 簡報
2012 Taiwan UX Summit 工作坊C 簡報
 
2012 Taiwan UX Summit 專題演講(一)簡報
2012 Taiwan UX Summit 專題演講(一)簡報2012 Taiwan UX Summit 專題演講(一)簡報
2012 Taiwan UX Summit 專題演講(一)簡報
 
UiGathering 2012.07 Slide (Derek Liu)
UiGathering 2012.07 Slide (Derek Liu)UiGathering 2012.07 Slide (Derek Liu)
UiGathering 2012.07 Slide (Derek Liu)
 
UiGathering 2012.07 Slide (Hoper Wang)
UiGathering 2012.07 Slide (Hoper Wang)UiGathering 2012.07 Slide (Hoper Wang)
UiGathering 2012.07 Slide (Hoper Wang)
 
UiGathering 2012.03 Slide (Edgar Liu)
UiGathering 2012.03 Slide (Edgar Liu)UiGathering 2012.03 Slide (Edgar Liu)
UiGathering 2012.03 Slide (Edgar Liu)
 
2011 Taiwan UX Summit_Workshop E
2011 Taiwan UX Summit_Workshop E2011 Taiwan UX Summit_Workshop E
2011 Taiwan UX Summit_Workshop E
 
2011 Taiwan UX Summit_Workshop B
2011 Taiwan UX Summit_Workshop B2011 Taiwan UX Summit_Workshop B
2011 Taiwan UX Summit_Workshop B
 
2011 Taiwan UX Summit_Workshop A
2011 Taiwan UX Summit_Workshop A2011 Taiwan UX Summit_Workshop A
2011 Taiwan UX Summit_Workshop A
 
UiGathering Talk - Visual Design Opening Speech / by David Chen
UiGathering Talk - Visual Design Opening Speech / by David ChenUiGathering Talk - Visual Design Opening Speech / by David Chen
UiGathering Talk - Visual Design Opening Speech / by David Chen
 
UiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan WeiUiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan Wei
 
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen ChanUiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
 

2011 Taiwan UX Summit_Workshop D