Interaction Concepts for Collaborative Visual Analysis of ...
Intern Training Human-Computer Interaction and Visual Design
description
Transcript of Intern Training Human-Computer Interaction and Visual Design
![Page 1: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/1.jpg)
Intern TrainingHuman-Computer Interaction and
Visual Design
2012.07.11
![Page 2: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/2.jpg)
OutlineHCI(Human-Computer Interface)Our Project: ANTrip Design ProcessYour project: how to design?Tools
Adobe Edge/MuseDreamwaverIllustratorPhotoshopVisio
Visual Design on my WorkComment to InternQ&A
![Page 3: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/3.jpg)
HCI(Human-Computer Interface)How it works? Can be Usable?
![Page 4: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/4.jpg)
What is Design?Design is not just what it looks like and feels like. Design is how it works. – by Steve.J
Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. – by Steve.J
Design is not someone’s business, it’s about yourself thinking to face your life.
![Page 5: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/5.jpg)
ANTrip DesignWhy ANTrip? = a(an) Trip = ant trip
Chinese: 雲水途誌 = 雲水 ( 行腳 = 步行旅行的意思, it is like a ant walking step by step)
Logo Transformation
Do not give up to change!
![Page 6: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/6.jpg)
ANTrip DesignEdit Page Transformation
![Page 7: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/7.jpg)
How to startBe Simple
Everything is simple.Be Empathy
Thinking what of other’s thinking.Be Patience
Design is not only supported by Passion. It needs Productivity.
That is just do it!
![Page 8: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/8.jpg)
Your Device Handheld
Display is smaller than 7 inch.Target User?
Multi-TouchGPS/Wifi ?Awareness
Location、Motion、 Temperature
![Page 9: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/9.jpg)
Your SoftwareFunctions
What is you think it can be improved? It’s can be better? Connecting People and know how to help them.Just drawing concrete units
on the paperroughly sketch layout、 button、manipulation、what you may think about.Mind Map
![Page 10: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/10.jpg)
Software Design Flow ChartA business Company around 200 people PRD •Production Request Document
•Updated by Product Manager
Review •Reviewed by Product Manager, Project Manager and Sales Manager.
SRS •Software Request Specification•Updated by Software Engineer Leader or SA(Software Analyst)
Review •Reviewed by Software Engineer Leader(SA) and Project Manager.
Design Doc •Design Document•Updated by Software Engineer or SD(Software Designer)
Review •Reviewed by Software Engineer (SD) and Software Engineer Leader.
Implement •Update by Software Engineer(SE).
1st Code Review •Reviewed by Senior Software Engineer.
2st Code Review •Reviewed in meeting by more than one Software Engineers .
Component Testing •Testing by Quality Analyst.
Integration Testing •Testing by Senior Quality Analyst.
Postmortem •Done by Project Manager.
UX (User Experience) Engineer
![Page 11: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/11.jpg)
Software Design Flow ChartUnder 20 people
![Page 12: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/12.jpg)
ToolsEdge / Muse / Dreamwaver
Tools is not to let us stop thinking.Tools flexibility is based on what u have known
HTML5Ajax conceptJQueryMVC architecture
![Page 13: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/13.jpg)
IllustratorVector diagram
Can change to any size without blur.Logo or Poster design.
![Page 14: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/14.jpg)
PhotoshopThe right tool for the right job.
Photoshop can make any truth you ever saw.
Power Functions you need to know.Erasing background BrushLayer BlendingFilter
![Page 15: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/15.jpg)
VisioBuild up your system flow chartIt is related about how data exchange
![Page 16: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/16.jpg)
Visual Design on my WorkHow to image on your demand?
Simple and Simple again.Users don't want things too complicated.
![Page 17: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/17.jpg)
ExampleCorel work experience
![Page 18: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/18.jpg)
ExampleHP work experience
![Page 19: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/19.jpg)
ExampleFilm experience
![Page 20: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/20.jpg)
Suggestion to YouThink it different!Everything you ever encountered is meaningful for your future design.Work hard and more care.
![Page 21: Intern Training Human-Computer Interaction and Visual Design](https://reader036.fdocuments.us/reader036/viewer/2022062310/56816371550346895dd44f3e/html5/thumbnails/21.jpg)
BACKUP
Presented by Ivan Chiou