Week2.how to cooporeate with it

228 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
228
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week2.how to cooporeate with it

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

×