How to cooporeate with IT partners from a designer's viewpoint
•
15 gostaram•1,022 visualizações
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.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (14)
Semelhante a How to cooporeate with IT partners from a designer's viewpoint
Semelhante a How to cooporeate with IT partners from a designer's viewpoint (20)
Mais de NTUST
Mais de NTUST (20)
How to cooporeate with IT partners from a designer's viewpoint
- 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. 1
- 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. UI Sketch
- 59. UI Sketch
- 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. 設計師的價值不⽌止於圖像界⾯面設計。