ICAN CO-DESIGN PROCESS

• 操作動畫

• Hierarchy

• Desktop Logo Design

• iCon .PNG

• RGB 數值

• Layout size

• XCode

• Bugs & ISSUES

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

跨領域合作的第⼀一次Meeting (設計角度)製作 Working Prototype 最初版本，跨領域合作的過程：

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

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.

iCAN Intelligent Communication Board for iPad2

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

設計特點 1操作容易，且系統性地分類圖卡，可快速找到所需的圖片。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

設計特點 1操作容易，且系統性地分類圖卡，可快速找到所需的圖片。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

設計特點 1操作容易，且系統性地分類圖卡，可快速找到所需的圖片。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

設計特點 2可切換為真實照片，更能貼近於真實生活環境中。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

設計特點 2可切換為真實照片，更能貼近於真實生活環境中。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

設計特點 3輕按⼀一下圖卡即可播放單字音效。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

蘋果

設計特點 4圖卡造句練習，幫助孩童訓練口語能力。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

去學校上學

分類欄

我想上廁所

我要蘋果

我想洗澡

吃炸雞排

常用溝通語

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

蘋果

設計特點 5可儲存常用的句子，增加學習使用的效率。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

新增圖卡與編輯

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

設計特點 6可依使用者喜好，利用鏡頭拍照、相簿匯入等功能新增圖卡與編輯。

操作動畫製作 Working Prototype 前，透過操作動畫可以更完整表達需要的功能。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

Hierarchy透過樹狀圖地呈現，可以更清楚地表達各個UI之間的相互連結位置：

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

For iPhone, create icons that measure:

57 x 57 pixels114x114 pixels(Retina display)

For iPad, create an icon that measures:

72 x 72 pixels 144x144 pixels (Retina display)R: 5 pixels

Desktop Logo Design在圖示的設計上有⼀一定的規格限制，iPhone & iPad 的Logo大小也不相同。

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

Desktop Logo Design在圖示的設計上有⼀一定的規格限制，iPhone & iPad 的Logo大小也不相同。

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

http://0123456789.tw/?p=1596

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

分類欄

溝通圖卡與造句

溝通圖卡與造句 常用溝通語 新增圖卡與編輯

iCon .PNG如果你的物件不是內建的話，需要另外存成PNG與PSD檔，在給資工的夥伴。

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

RGB 數值先與資工夥伴討論哪些是可內建出的介面，如果你的物件不是內建的話，需要給資工夥伴們icon按下前跟按下後的顏色，RGB數值為主。

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

0 1024 Pixels

768 Pixels

Layout Size把設計的介面標注上坐標尺寸位置，並從左上角開始。

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

開始撰寫程式 - XCode 將必要的UI元件與設計圖傳達給資工領域的夥伴們，就可以開始進行初步的程式撰寫了。

• 操作動畫• Hierarchy• Desktop Logo Design• iCon .PNG• RGB 數值• Layout size• XCode

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

iOS Human Interface GuidelinesiOS Human Interface Guidelines是在開發iOS時Apple給開發者介面設計的規範，Apple希望UI設計可以遵守裡面的準則（例如：icon的設計、button的大小等等）。

所以在⼀一開始，自己和設計夥伴⼀一起讀過⼀一遍 iOS Human Interface Guidelines，可以⼀一邊討論目前的設計是否有遵守 Guideline，也可以更了解iOS的UI的設計哲學。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

檔案和資料如何分享雙方在合作時，⼀一定會有許多資料需要分享，在這個Project有許多聲音檔和圖檔，我們選擇了Dropbox來作為互相共享資料的工具。

National Taiwan University of Science and Technology /Department of Industrial and Commercial Design

2011 NSC DESIDN

iCAN ProjectDesign Process /

issue和bug的處理如果測試有問題，⼀一定把發現的bug或issue給記錄下來。

本次合作我們是以往返email的形式來做issue的管理（但應該有更好的issue track的工具）

1. 使用此溝通學習版的優點、缺點

優點:@小朋友⼀一開始手部訓練不協調，所以媽媽會用筆記型電腦的觸控版還教導孩子所以覺得改變成觸碰面板的話會很不錯，可以訓練小孩手部協調。@不會再有貼紙、溝通卡、配件…容易不見的問題@解決貼紙亂貼的問題@需要想要的圖卡不用找半天，若有這樣的軟體分類會比較好找@最需要的就是教導造句能力@老師、父母容易教學生，因為所需要教學內容都在裏頭很方便@可以掃描自己想要的實體故事書和拍照功能不錯，因為小孩很需要認識實體物，因為他們不相信圖片上的東西與真實的⼀一樣，所以會希望卡通圖片能夠與實體物做切換。

缺點與改進:@有背帶、背包，更輕薄更好@如果可有小型攜帶式的會不錯，如果侷限於只要溝通的話。

建議:能夠有不同年齡層的套裝版本: 學齡前1~4歲 學齡後:5~8歲產品需要指揮控制孩子，而不是像現有產品孩子控制產品

*能夠真實圖片與插圖切換 會比較好*需要可以錄音的功能

遊戲-*可以有動物園、超市、廚房、蔬菜水果、的空白形狀拼圖，然後拼上去形狀可以唸出聲音久了也知道東西要放哪，例如毛巾就要掛牆上。

2. 現優溝通板的缺點、優點

優點:@訓練小孩對物品的認知、造出句子的能力、貼紙可重複撕下缺點:@太重、太厚3~4CM、難攜帶、不好拿、帶出門太麻煩因為要找很久@還要帶⼀一本貼紙簿、很難找到想要的圖卡、沒有的圖卡還要自己錄音@圖卡容易不見、溝通板配件容易遺失@小朋友會把圖卡貼紙亂貼，綠色都全部貼⼀一起@難操作，用幾次就不用了，⼀一度懷疑很沮喪自己是不是沒耐心還是不會教。

3. 甚麼情況下會使用溝通板教導小朋友學習認識物品 與 造句溝通

4. 除了溝通板還有甚麼學習方式訓練小朋友算數、寫字、玩積木遊戲、畫畫、圖卡、認識物品…等等

5. 小孩的症狀:沒有辦法明確表達自己的需求，語言發展上不健全講話不清楚、有些症狀不同語言會⼀一直重複可是並不是所有自閉症患者症狀都⼀一致，不過有溝通板的需求是需要的。有些更重度的自閉症患者，因器官上的缺陷連語言都沒辦法溝通，所以只好用比的…

6.媽媽與老師的話:很少數的人在關心這部分需要關心的族群，為何都沒人使用好用的溝通板，現有溝通板買來只是增加自己的負擔，因為難操作使用，但都沒人注意到也沒去改良。父母希望與孩子之間能藉由溝通板的學習互動來讓自己的小孩未來能夠順利開口說話，與他人溝通，訓練句子的能