Your SlideShare is downloading. ×
Week2.how to cooporeate with it
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week2.how to cooporeate with it

73
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
73
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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