Embed Size (px)
Citation preview
從需求到設計 我要思考什麼？RICE TSENG | INTERACTION DESIGNER @YAHOO
Interaction Designer @Yahoo
Visual Designer, UI Engineer @Trend Micro
Interaction Designer @Dlink
NCCU - Digital Content and Technologies - TUI, HCI
UX v.s UI
Product Design Process
Web Design Process
Skills & Tools
AGENDA
UX UI有⼀樣嗎?
PRODUCT設計流程
strategy inspiration implementationideation
strategy inspiration implementationideation
Who & Why?Empathy
Hypothesis
Meaningful innovation start with USERS
strategy inspiration implementationideation
Brainstorm/ How Might We storyboarding
implementationideation
ideation
idea
prototype build
measure
learn
build
measure
iterate
design concept interaction design
visual design design language usability testing development bucket test
data analysis user night
WEB設計流程
常常我們會聽到 ⼀種需求
「要做⼀個...網站, 要做漂亮⼀點...」
但身為⼀個 設計師
我們應該思考的是...
使⽤者 網站⽬的
時程 合作對象
價錢 案例分析
REQUIREMENTS客⼾需求
1
我們那些聰明的客⼾ 永遠都不知道⾃⼰需要什麼
「滑動起來很活潑的...那種」
我的理解是 滑動 = scroll
活潑 = 有互動性，按鈕或是前後背景的層次
RWD? Parallax scrolling? Flat design style?
PLANNING規劃
2
了解使⽤者誰會造訪這網站｜為什麼｜核⼼⽬的是什麼
網站地圖網站架構｜流程
框線圖介⾯｜內容規劃
UsernameSearch Keyword
System info
Client
Dashboard
Processes
Service
Application
Interaction User
Drivers
StartupTask
File Manager
Reboot
Note
Remote
Logo
CPU information
Core 0
Core 1
Disk Drives
50GB 60GB
C:\ D:\
30GB
E:\
Processes ( Top 5 per GPU ) sort sort
Memory Information
UsernameSearch Keyword
System info
Client
Dashboard
Processes
Service
Application
Interaction User
Drivers
StartupTask
File Manager
Reboot
Note
Remote
Logo
CPU information
Core 0
Core 1
Disk Drives
50GB 60GB
C:\ D:\
30GB
E:\
Processes ( Top 5 per GPU ) sort sort
Memory Information
DESIGN開始做設計，應該注意什麼
3
設計與前置作業TYPOGRAPHY COLOR SCHEME GRID SYSTEM
design standard
typography
iconography
interaction
Color Palette
善⽤GRID排版
思考響應式網⾴的設計不同平台，導覽也會不同
圖⽚的排版會流動式的改變
DEVELOPMENT設計師沒事了嗎？
4
切圖與溝通哪邊要切圖｜可否⽤CSS 或 ICON FONT 代替
原型PROTOTYPE
CommunicationPrototype =
GapDesigner OtherRDPMDesignerstakeholders
Gapconcept execution
Language
SKILL TOOL
DESIGNPS | SKETCH | ICON FONT
