The simple process of APP Design Part III for the course of UOID, uoid.drhhtang.net A multidisciplinary collaboration course for user-oriented innovative APP design. by drhhtang@NTUST

1. ICAN CO-DESIGN PROCESS
• 操作動畫 • RGB 數值
• Hierarchy • Layout size
• Desktop Logo Design • XCode
• iCon .PNG • Bugs & ISSUES

2. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
跨領域合作的第⼀一次Meeting (設計角度)
製作 Working Prototype 最初版本，
跨領域合作的過程：
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode
iCAN Intelligent Communication Board
for iPad2
Individuals with autism are often unable to use oral communication to express themselves comprehensively
and thus suffered from many communicational obstacles. Current solutions are heavy communication
books where numerous pictures stored in order to prepare their oral presentation skills. With clear
interface, easy operations, and lightweight, iCan integrates sounds, figures, words to smoothen the learning
process for autistic children. Its functions include the help to pronounce words correctly, to structure
sentences, and to collect personal database for figures. Through the aid of iCan, hopefully autistic children
can learn basic oral communicational skills.

3. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 1
操作容易，且系統性地分類圖卡，
可快速找到所需的圖片。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

4. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 1
操作容易，且系統性地分類圖卡，
可快速找到所需的圖片。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

5. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 1
操作容易，且系統性地分類圖卡，
可快速找到所需的圖片。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

6. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 2
可切換為真實照片，
更能貼近於真實生活環境中。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

7. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 2
可切換為真實照片，
更能貼近於真實生活環境中。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

8. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 3
輕按⼀一下圖卡即可播放單字音效。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

9. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 溝通圖卡與造句
分類欄
操作動畫
蘋果
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 4
圖卡造句練習，幫助孩童訓練口語能力。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

10. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 常用溝通語
分類欄
我要蘋果
操作動畫 我想上廁所
製作 Working Prototype 前，透過操作動 蘋果
去學校上學
畫可以更完整表達需要的功能。
我想洗澡
吃炸雞排
設計特點 5
可儲存常用的句子，增加學習使用的效率。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

11. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / 新增圖卡與編輯
分類欄
操作動畫
製作 Working Prototype 前，透過操作動
畫可以更完整表達需要的功能。
設計特點 6
可依使用者喜好，利用鏡頭拍照、
相簿匯入等功能新增圖卡與編輯。
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

12. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Hierarchy
透過樹狀圖地呈現，可以更清楚地表達各
個UI之間的相互連結位置：
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode

13. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Desktop Logo Design
在圖示的設計上有⼀一定的規格限制，
iPhone & iPad 的Logo大小也不相同。 For iPhone, create icons that measure:
• 操作動畫 57 x 57 pixels
• Hierarchy 114x114 pixels(Retina display)
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode
For iPad, create an icon that measures:
72 x 72 pixels
144x144 pixels (Retina display)
R: 5 pixels

14. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Desktop Logo Design
在圖示的設計上有⼀一定的規格限制，
iPhone & iPad 的Logo大小也不相同。
http://0123456789.tw/?p=1596
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode

15. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCon .PNG
如果你的物件不是內建的話，需要另外存
成PNG與PSD檔，在給資工的夥伴。 溝通圖卡與造句
分類欄
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode
溝通圖卡與造句 常用溝通語 新增圖卡與編輯

16. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
RGB 數值
先與資工夥伴討論哪些是可內建出的介
面，如果你的物件不是內建的話，需要給
資工夥伴們icon按下前跟按下後的顏色，
RGB數值為主。
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode

17. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Layout Size
把設計的介面標注上坐標尺寸位置，
0 1024 Pixels
並從左上角開始。
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode
768 Pixels

18. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
開始撰寫程式 - XCode
將必要的UI元件與設計圖傳達給資工
領域的夥伴們，就可以開始進行初步
的程式撰寫了。
• 操作動畫
• Hierarchy
• Desktop Logo Design
• iCon .PNG
• RGB 數值
• Layout size
• XCode

19. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iOS Human Interface Guidelines
iOS Human Interface Guidelines是在開發iOS時
Apple給開發者介面設計的規範，Apple希望UI設
計可以遵守裡面的準則（例如：icon的設計、
button的大小等等）。
所以在⼀一開始，自己和設計夥伴⼀一起讀過⼀一遍
iOS Human Interface Guidelines，可以⼀一邊討論
目前的設計是否有遵守 Guideline，也可以更了解
iOS的UI的設計哲學。

20. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
檔案和資料如何分享
雙方在合作時，⼀一定會有許多資料需要分享，在這個
Project有許多聲音檔和圖檔，我們選擇了Dropbox來作
為互相共享資料的工具。

21. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
issue和bug的處理
如果測試有問題，⼀一定把發現的bug或issue給記
錄下來。
1.
使用此溝通學習版的優點、缺點
2.
現優溝通板的缺點、優點
優點:
@小朋友⼀一開始手部訓練不協調，所以媽媽會用筆記型電 優點:
@訓練小孩對物品的認知、造出句子的能力、貼紙可重
本次合作我們是以往返email的形式來做issue的管 腦的觸控版還教導孩子
所以覺得改變成觸碰面板的話會很不錯，可以訓練小孩手
部協調。
複撕下
缺點:
@太重、太厚3~4CM、難攜帶、不好拿、帶出門太麻煩
@不會再有貼紙、溝通卡、配件…容易不見的問題
@解決貼紙亂貼的問題 因為要找很久
理（但應該有更好的issue track的工具） @需要想要的圖卡不用找半天，若有這樣的軟體分類會比
較好找
@最需要的就是教導造句能力
@還要帶⼀一本貼紙簿、很難找到想要的圖卡、沒有的圖
卡還要自己錄音
@圖卡容易不見、溝通板配件容易遺失
@老師、父母容易教學生，因為所需要教學內容都在裏頭 @小朋友會把圖卡貼紙亂貼，綠色都全部貼⼀一起
很方便 @難操作，用幾次就不用了，⼀一度懷疑很沮喪自己是不
@可以掃描自己想要的實體故事書和拍照功能不錯，因為 是沒耐心還是不會教。
小孩很需要認識實體物，因為他們不相信圖片上的東西與
真實的⼀一樣，所以會希望卡通圖片能夠與實體物做切換。 3.
甚麼情況下會使用溝通板
教導小朋友學習認識物品 與 造句溝通
缺點與改進:
@有背帶、背包，更輕薄更好 4.
除了溝通板還有甚麼學習方式訓練小朋友
@如果可有小型攜帶式的會不錯，如果侷限於只要溝通的 算數、寫字、玩積木遊戲、畫畫、圖卡、認識物品…等
話。 等
建議: 5.
小孩的症狀:
能夠有不同年齡層的套裝版本: 學齡前1~4歲 學齡後:5~8 沒有辦法明確表達自己的需求，語言發展上不健全
歲 講話不清楚、有些症狀不同語言會⼀一直重複
產品需要指揮控制孩子，而不是像現有產品孩子控制產品 可是並不是所有自閉症患者症狀都⼀一致，不過有溝通板
的需求是需要的。
有些更重度的自閉症患者，因器官上的缺陷連語言都沒
*能夠真實圖片與插圖切換 會比較好 辦法溝通，所以只好用比的…
*需要可以錄音的功能
遊戲- 6.媽媽與老師的話:
*可以有動物園、超市、廚房、蔬菜水果、的空白形狀拼 很少數的人在關心這部分需要關心的族群，為何都沒人
圖，然後拼上去形狀可以唸出聲音 使用好用的溝通板，現有溝通板買來只是增加自己的負
久了也知道東西要放哪，例如毛巾就要掛牆上。 擔，因為難操作使用，但都沒人注意到也沒去改良。
父母希望與孩子之間能藉由溝通板的學習互動來讓自己
的小孩未來能夠順利開口說話，與他人溝通，訓練句子
的能