Week2.how to cooporeate with it

1 Situation
Brainstorming,
Story Board

老師在課堂中會仔細地說明如何透過Situation
Brainstorming & Story Board 來探索設計方向的重要環
節，驗證設計概念以及發展每個情境下的特點功能。

1 Situation
Brainstorming,
Story Board

第一步，整理設計思緒的工具 - MindMap MindMap Software :
Xmind
在產生UI之前透過MindMap可以整理分支出設計的主要功能特色、設計原由，
探討出設計的核心價值與方向。

2 Market
Survey

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

Concept Current Product

3 Device
& OS

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

4 Wireframe
Paper Sketch

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

4 Wireframe
Paper Sketch

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

5 Prototype
Produce

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

5 Paper
Prototype

進行互動模擬 - iOS APP
製作 Prototype 的互動方法有很多種，也可以選擇高科技結合低科技的媒材，像是個 APP
可以拍下你畫的UI，幫助你建立每個按鈕所按下去產生的連結效果，方便和伴以及使用者
進行簡單快速的討論。

POP -
Prototyping on Paper

6 User
Study

使用者訪談與研究
完成可以簡單互動的Prototype後，使用者訪談研究對於設計的成果也很重要，帶著Prototype
和筆記型電腦尋找訪談的Target User，和他們說明概念的初步構想與使用方式，驗證概念的
可行性，並仔細觀察使用的環境。

2012 / 04
NTU Five Senses Cafe

7 Improve
& Modify

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

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

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

8 User
Experience
Testing

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

8 User
Experience
Testing

溝通圖卡與造句

角色

操作模擬設計 - Mac Keynote 簡報動畫動詞

食物

交通
完成介面的設計後，設計師可以透過動畫製作呈現操作方我我們爸爸媽媽他們妹妹姊
文具
式，時候的 UI 可以不用畫得很仔細，要讓過程中方便與
地點
資工夥伴們進行溝通討論，當然也可以在進行一次使用者訪
娛樂

談，讓使用者看到不同階段的呈現結果，給予不同的新想法時間
爺爺奶奶大家你們他弟弟
刺激與建議。副詞

形容詞

日常用品

情緒狀態

8 User
Experience
Testing

9 Common
Sense

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

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

9 Common
Sense

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

9 Common
Sense

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

9 Common
Sense

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

9 UI/UXDesign
Language

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

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

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

設計的參考。

9 Color
Plan

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

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

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

展其它輔助的顏色。

10 Design
Reference

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

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

10 Design
Reference

簡潔
工具
資呈現

10 Design
Reference

穩重
質感
娛樂

11 GUI UI Sketch
Sketch

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

12 How to Make
a Beautiful
Button?

13 Image UI Sketch
Deliver

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

13 Image
Deliver

最終出圖：
案夾1. 背景與按圖 (png)
案夾2. 完整界面設計截圖
界面截圖對應的位置圖
（標上裁切出的圖之位置、大小、名）

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

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

15 Reminds

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

15 A Good
UI/UX
Designer

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

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

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

Week2.how to cooporeate with it

Week2.how to cooporeate with it

Recommended

Recommended

More Related Content

Similar to Week2.how to cooporeate with it

Similar to Week2.how to cooporeate with it (20)

More from ditl

More from ditl (7)

Week2.how to cooporeate with it