Download as PDF, PPTX
Week2.how to cooporeate with it
- 4. 1 Situation Brainstorming, Story Board 老師在課堂中會仔細地說明如何透過Situation Brainstorming & Story Board 來探索設計方向的重要環 節，驗證設計概念以及發展每個情境下的特點功能。
- 5. 1 Situation Brainstorming, Story Board 第一步，整理設計思緒的工具 - MindMap MindMap Software : Xmind 在產生UI之前透過MindMap可以整理分支出設計的主要功能特色、設計原由， 探討出設計的核心價值與方向。
- 6. 2 Market Survey 搜集市場相關的APP，找出自己的獨特點: 產生出一個新的方向後，記得要去搜集現有是否有類似的概念產品， 很不巧如果有的話，應該思考與現有產品的不同之處，找出屬於自己的獨特點。 Concept Current Product
- 7. 3 Device & OS 確定Device & OS，並熟悉基本介面操作： Device 的尺寸大小關係到使用者使用的方式，並且設計師也要熟悉每種介面 的使用方式，熟悉基本的架構、GUI 與操作方式在設計規劃上會比較容易些。
- 8. 4 Wireframe Paper Sketch 開始初步繪製簡單的構想 - Wireframe: Paper Sketch 確定主題方向後，下一步進行的就是相互討論或組員發想設計的構想，可以先在 紙上快速簡單的畫出UI的草圖，重點是呈現構想與互動方式。
- 9. 4 Wireframe Paper Sketch 與夥伴一起共同討論 - Wireframe: Whiteboard 當小組討論有初步的結果後，可以與 伴們移動至白板上進行討論， 歸納整合所有組員所提出的構想，畫出定案的畫面與每一頁的連結與互動。
- 10. 5 Prototype Produce UI 草圖繪製 - 1:1 Paper Prototype 將白板上小組討論的定案Wireframe畫到紙張上，並印製1:1的Device的框架模 擬真實大小，將白板上的圖透過此方式整理得更簡潔明瞭，並在更進一步的探 討互動與下一步的連結方式。
- 11. 5 Paper Prototype 進行互動模擬 - iOS APP 製作 Prototype 的互動方法有很多種，也可以選擇高科技結合低科技的媒材，像是 個 APP 可以拍下你畫的UI，幫助你建立每個按鈕所按下去產生的連結效果，方便和 伴以及使用者 進行簡單快速的討論。 POP - Prototyping on Paper
- 12. 6 User Study 使用者訪談與研究 完成可以簡單互動的Prototype後，使用者訪談研究對於設計的成果也很重要，帶著Prototype 和筆記型電腦尋找訪談的Target User，和他們說明概念的初步構想與使用方式，驗證概念的 可行性，並仔細觀察使用的環境。 2012 / 04 NTU Five Senses Cafe
- 13. 7 Improve & Modify 初步構想定案 - 繪製 Flow 訪談後當然需要反覆的修改問題與加入新設計，修正後就可以將手工的 Prototype 重新於電腦中繪製，整理出清楚的架構與GUI編排、按鈕位置等，以 及每一頁畫面連結，繪製完成架構後就可以趕緊先給資工的夥伴們開始進行資料 結構(骨架)的初步 Coding 囉!。
- 14. 8 User Experience Testing 使用體驗設計 - UX Design 當資工夥伴在Coding時，設計師就要開始將原先的介面線稿進行擬真度的繪製，除了繪製之 外，設計師也需要考量使用者經驗(體驗)層面的問題，如 iCon大小合不合適(會不會太小?)、 瞭解使用者該如何操作使用才是順暢的、減少層級、直覺性的操作設計語意等。 設計小 步： 可以將每ㄧ頁的介面畫面存成圖片 ，或直接用Keynote製作， 能實際的在平台裝置上顯示播放，幫助掌握畫面尺寸大小進行修改。
- 15. 8 User Experience Testing 操作模擬設計 - PPT 呈現假介面 如果你不會使用Keynote的話，另外一種方式可以透過PPT換 頁的方式在介面操作上表達想法，但缺點就是完全手動，你 需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模 擬。
- 16. 8 User Experience Testing 操作模擬設計 - PPT 呈現假介面 如果你不會使用Keynote的話，另外一種方式可以透過PPT換 頁的方式在介面操作上表達想法，但缺點就是完全手動，你 需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模 擬。
- 17. 8 User Experience Testing 操作模擬設計 - PPT 呈現假介面 如果你不會使用Keynote的話，另外一種方式可以透過PPT換 頁的方式在介面操作上表達想法，但缺點就是完全手動，你 需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模 擬。
- 18. 8 User Experience Testing 操作模擬設計 - PPT 呈現假介面 如果你不會使用Keynote的話，另外一種方式可以透過PPT換 頁的方式在介面操作上表達想法，但缺點就是完全手動，你 需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模 擬。
- 19. 8 User Experience Testing 操作模擬設計 - PPT 呈現假介面 如果你不會使用Keynote的話，另外一種方式可以透過PPT換 頁的方式在介面操作上表達想法，但缺點就是完全手動，你 需要記住每下一頁會呈現的內容，且不太能呈現出流暢的模 擬。
- 20. 8 User Experience Testing 溝通圖卡與造句 角色 操作模擬設計 - Mac Keynote 簡報動畫 動詞 食物 交通 完成介面的設計後，設計師可以透過動畫製作呈現操作方 我 我們 爸爸 媽媽 他們 妹妹 姊 文具 式， 時候的 UI 可以不用畫得很仔細，要讓過程中方便與 地點 資工夥伴們進行溝通討論，當然也可以在進行一次使用者訪 娛樂 談，讓使用者看到不同階段的呈現結果，給予不同的新想法 時間 爺爺 奶奶 大家 你們 他 弟弟 刺激與建議。 副詞 形容詞 日常用品 情緒狀態
- 21. 8 User Experience Testing 溝通圖卡與造句 角色 操作模擬設計 - Mac Keynote 簡報動畫 動詞 食物 交通 完成介面的設計後，設計師可以透過動畫製作呈現操作方 我 我們 爸爸 媽媽 他們 妹妹 姊 文具 式， 時候的 UI 可以不用畫得很仔細，要讓過程中方便與 地點 資工夥伴們進行溝通討論，當然也可以在進行一次使用者訪 娛樂 談，讓使用者看到不同階段的呈現結果，給予不同的新想法 時間 爺爺 奶奶 大家 你們 他 弟弟 刺激與建議。 副詞 形容詞 日常用品 情緒狀態
- 22. 8 User Experience Testing
- 23. 8 User Experience Testing
- 31.
- 32. 1 2
- 39. 9 Common Sense 先來認識解析度吧！ 對電腦而言，所有人眼所見的影像都是螢幕上一連串的光點的 構成的， 些光點是電腦顯示的最小單位，稱為像素(pixel)， 光點的數量越多，影像提供的細節就越多。 一般的電腦圖片而言，解析度越高表示構成圖片的點數越多。 構成圖片的像素越多，細節就越清楚。
- 40. 9 Common Sense 2048 x 1536 264ppi 1024 x 768 136ppi 2048 x 1536 264ppi 1024 x 768 136ppi
- 41. 9 Common Sense 失敗的解析度設定就會是......
- 42. 9 Common Sense 確定Device & OS，並熟悉基本介面操作 新增 案的那一剎那，就要決定最標準的設備解析度。
- 44. 9 UI/UXDesign Language 在前置設計發想中，會產生一些可 以當作設計依據的設計語彙。就跟 平常做設計一樣，把 些語彙當做 設計的參考。
- 45. 9 Color Plan 依據設計語彙再去尋找一些相關的 配色作為色彩計畫。通常不會用到 太多顏色，一個色為主軸，下去發 展其它輔助的顏色。
- 46. 10 Design Reference 色彩、細節、flow、所有元素都跟整個設計有關。 找到一個最適合 個產品的風格。
- 47. 10 Design Reference 簡潔 工具 資 呈現
- 48. 10 Design Reference 穩重 質感 娛樂
- 49. 11 GUI UI Sketch Sketch 快速產出一些幫助思考的介面草圖，要比初步草圖再精緻一點。 要讓人看得懂，有助於在正式執行繪製圖面之前的溝通，了解每個頁面的資 呈現重點。 避免眼花繚亂找不到資 的狀況。
- 50. 12 How to Make a Beautiful Button?
- 51. 12 How to Make a Beautiful Button?
- 52. 12 How to Make a Beautiful Button?
- 53. 12 How to Make a Beautiful Button?
- 54. 12 How to Make a Beautiful Button?
- 55. 12 How to Make a Beautiful Button?
- 56. 12 How to Make a Beautiful Button?
- 57. 13 Image UI Sketch Deliver 很有耐心的切圖 不同互動，功能，流程 切出來的圖都不一樣 原則 一個 Pixel 都不能錯
- 58.
- 59.
- 62. 13 Image Deliver
- 63. 13 Image Deliver
- 64. 13 Image Deliver 最終出圖： 案夾1. 背景與按 圖 (png) 案夾2. 完整界面設計截圖 界面截圖對應的位置圖 （標上裁切出的圖之位置、大小、 名）
- 65. 14 Last Double Check 釐清所有功能 幫忙把 wireframe 講的更清楚 每個 app 都只要有一個 spotlight 就足夠
- 66. 14 Last Double Check 切下來的圖會影響觸控的範圍 按鈕一定要有反饋 設計師要掌握最終呈現的品質
- 68. 15 Reminds 傾聽別人的意見 新科技的可能性 每個人都可以是設計的其中一員
- 69. 15 A Good UI/UX Designer Design for Natural and Intuitive Interaction. 自然和直觀的互動設計。 Reduce redundancy in your UI. 減少過多的裝飾性。 You are not just a GUI Designer. 設計師的價值不止於圖像界面設計。