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
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來作
為互相共享資料的工具。