Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to cooporeate with IT partners from a designer's viewpoint

1,398 views

Published on

This slide describes how to cooperate with IT students from a designer's point of view for UOID, a multidisciplinary cooperative course for innovative design. The content is co-created by drhhtang's students, Kevin, Ameng, Diona, Liya. They all have worked on multidisciplinary collaborative design projects and accomplished 100% working APP with IT professionals, under the supervision of drhhtang.

Published in: Design

How to cooporeate with IT partners from a designer's viewpoint

  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.設計師的價值不⽌止於圖像界⾯面設計。

×