老師在課堂中會仔細地說明如何透過Situation

Brainstorming & Story Board 來探索設計方向的重要環節，驗證設計概念以及發展每個情境下的特點功能。

Situation Brainstorming,

Story Board

1

MindMap Software : Xmind

第一步，整理設計思緒的工具 - MindMap

在產生UI之前透過MindMap可以整理分支出設計的主要功能特色、設計原由，探討出設計的核心價值與方向。

Situation Brainstorming,

Story Board

1

Concept Current Product

2 MarketSurvey

搜集市場相關的APP，找出自己的獨特點:

產生出一個新的方向後，記得要去搜集現有是否有類似的概念產品，很不巧如果有的話，應該思考與現有產品的不同之處，找出屬於自己的獨特點。

確定Device & OS，並熟悉基本介面操作：Device 的尺寸大小關係到使用者使用的方式，並且設計師也要熟悉每種介面的使用方式，熟悉基本的架構、GUI 與操作方式在設計規劃上會比較容易些。

3 Device & OS

開始初步繪製簡單的構想 - Wireframe: Paper Sketch

確定主題方向後，下一步進行的就是相互討論或組員發想設計的構想，可以先在紙上快速簡單的畫出UI的草圖，重點是呈現構想與互動方式。

4 Wireframe Paper Sketch

與夥伴一起共同討論 - Wireframe: Whiteboard當小組討論有初步的結果後，可以與伙伴們移動至白板上進行討論，歸納整合所有組員所提出的構想，畫出定案的畫面與每一頁的連結與互動。

4 Wireframe Paper Sketch

UI 草圖繪製 - 1:1 Paper Prototype

將白板上小組討論的定案Wireframe畫到紙張上，並印製1:1的Device的框架模擬真實大小，將白板上的圖透過此方式整理得更簡潔明瞭，並在更進一步的探討互動與下一步的連結方式。

5 PrototypeProduce

POP - Prototyping on Paper

進行互動模擬 - iOS APP

製作 Prototype 的互動方法有很多種，也可以選擇高科技結合低科技的媒材，像是這個 APP

可以拍下你畫的UI，幫助你建立每個按鈕所按下去產生的連結效果，方便和伙伴以及使用者進行簡單快速的討論。

5 PaperPrototype

2012 / 04NTU Five Senses Cafe

使用者訪談與研究完成可以簡單互動的Prototype後，使用者訪談研究對於設計的成果也很重要，帶著Prototype

和筆記型電腦尋找訪談的Target User，和他們說明概念的初步構想與使用方式，驗證概念的可行性，並仔細觀察使用的環境。

6 UserStudy

初步構想定案 - 繪製 Flow

訪談後當然需要反覆的修改問題與加入新設計，修正後就可以將手工的Prototype 重新於電腦中繪製，整理出清楚的架構與GUI編排、按鈕位置等，以及每一頁畫面連結，繪製完成架構後就可以趕緊先給資工的夥伴們開始進行資料結構(骨架)的初步 Coding 囉!。

7 Improve & Modify

使用體驗設計 - UX Design

當資工夥伴在Coding時，設計師就要開始將原先的介面線稿進行擬真度的繪製，除了繪製之外，設計師也需要考量使用者經驗(體驗)層面的問題，如 iCon大小合不合適(會不會太小?)、瞭解使用者該如何操作使用才是順暢的、減少層級、直覺性的操作設計語意等。

設計小撇步：可以將每ㄧ頁的介面畫面存成圖片檔，或直接用Keynote製作，能實際的在平台裝置上顯示播放，幫助掌握畫面尺寸大小進行修改。

8 User Experience

Testing

操作模擬設計 - PPT 呈現假介面如果你不會使用Keynote的話，另外一種方式可以透過PPT換頁的方式在介面操作上表達想法，但缺點就是完全手動，你需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模擬。

8 User Experience

Testing

操作模擬設計 - PPT 呈現假介面如果你不會使用Keynote的話，另外一種方式可以透過PPT換頁的方式在介面操作上表達想法，但缺點就是完全手動，你需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模擬。

8 User Experience

Testing

操作模擬設計 - PPT 呈現假介面如果你不會使用Keynote的話，另外一種方式可以透過PPT換頁的方式在介面操作上表達想法，但缺點就是完全手動，你需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模擬。

8 User Experience

Testing

操作模擬設計 - PPT 呈現假介面如果你不會使用Keynote的話，另外一種方式可以透過PPT換頁的方式在介面操作上表達想法，但缺點就是完全手動，你需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模擬。

8 User Experience

Testing

操作模擬設計 - PPT 呈現假介面如果你不會使用Keynote的話，另外一種方式可以透過PPT換頁的方式在介面操作上表達想法，但缺點就是完全手動，你需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模擬。

8 User Experience

Testing

妹妹

弟弟 哥哥

姊姊我 我們 爸爸 媽媽 他們

爺爺 奶奶 大家 你們 他

溝通圖卡與造句

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品

操作模擬設計 - Mac Keynote 簡報動畫完成介面的設計後，設計師可以透過動畫製作呈現操作方式，這時候的 UI 可以不用畫得很仔細，要讓過程中方便與資工夥伴們進行溝通討論，當然也可以在進行一次使用者訪談，讓使用者看到不同階段的呈現結果，給予不同的新想法刺激與建議。

8 User Experience

Testing

妹妹

弟弟 哥哥

姊姊我 我們 爸爸 媽媽 他們

爺爺 奶奶 大家 你們 他

溝通圖卡與造句

動詞

文具

食物

角色

交通

地點

副詞

娛樂

時間

情緒狀態

形容詞

日常用品

操作模擬設計 - Mac Keynote 簡報動畫完成介面的設計後，設計師可以透過動畫製作呈現操作方式，這時候的 UI 可以不用畫得很仔細，要讓過程中方便與資工夥伴們進行溝通討論，當然也可以在進行一次使用者訪談，讓使用者看到不同階段的呈現結果，給予不同的新想法刺激與建議。

8 User Experience

Testing

8 User Experience

Testing

8 User Experience

Testing

1

1 2

先來認識解析度吧！對電腦而言，所有人眼所見的影像都是螢幕上一連串的光點的構成的，這些光點是電腦顯示的最小單位，稱為像素(pixel)，光點的數量越多，影像提供的細節就越多。

一般的電腦圖片而言，解析度越高表示構成圖片的點數越多。構成圖片的像素越多，細節就越清楚。

9 CommonSense

9 CommonSense

2048 x 1536 264ppi 1024 x 768 136ppi 2048 x 1536 264ppi 1024 x 768 136ppi

失敗的解析度設定就會是......

9 CommonSense

確定Device & OS，並熟悉基本介面操作新增檔案的那一剎那，就要決定最標準的設備解析度。

9 CommonSense

在前置設計發想中，會產生一些可

以當作設計依據的設計語彙。就跟

平常做設計一樣，把這些語彙當做

設計的參考。

9 UI/UXDesign

Language

依據設計語彙再去尋找一些相關的

配色作為色彩計畫。通常不會用到

太多顏色，一個色為主軸，下去發

展其它輔助的顏色。

9 ColorPlan

色彩、細節、flow、所有元素都跟整個設計有關。

找到一個最適合這個產品的風格。

10 DesignReference

簡潔工具資訊呈現

10 DesignReference

穩重質感娛樂

10 DesignReference

UI Sketch

快速產出一些幫助思考的介面草圖，要比初步草圖再精緻一點。要讓人看得懂，有助於在正式執行繪製圖面之前的溝通，了解每個頁面的資訊呈現重點。避免眼花繚亂找不到資訊的狀況。

11 GUI Sketch

12 How to Makea Beautiful

Button?

12 How to Makea Beautiful

Button?

12 How to Makea Beautiful

Button?

12 How to Makea Beautiful

Button?

12 How to Makea Beautiful

Button?

12 How to Makea Beautiful

Button?

12 How to Makea Beautiful

Button?

UI Sketch13 Image Deliver

很有耐心的切圖不同互動，功能，流程切出來的圖都不一樣原則 一個 Pixel 都不能錯

UI Sketch

UI Sketch

13 Image Deliver

13 Image Deliver

13 Image Deliver

最終出圖：檔案夾1. 背景與按鍵圖檔 (png)

檔案夾2. 完整界面設計截圖

界面截圖對應的位置圖 （標上裁切出的圖之位置、大小、檔名）

14 LastDouble

Check釐清所有功能幫忙把 wireframe 講的更清楚每個 app 都只要有一個 spotlight 就足夠

切下來的圖會影響觸控的範圍按鈕一定要有反饋設計師要掌握最終呈現的品質

14 LastDouble

Check

傾聽別人的意見新科技的可能性每個人都可以是設計的其中一員

15 Reminds

Design for Natural and Intuitive Interaction.自然和直觀的互動設計。

Reduce redundancy in your UI.減少過多的裝飾性。

You are not just a GUI Designer.設計師的價值不止於圖像界面設計。

15 A GoodUI/UX

Designer