SlideShare una empresa de Scribd logo
1 de 63
Descargar para leer sin conexión
從需求到設計
我要思考什麼?
RICE TSENG | INTERACTION DESIGNER @YAHOO
Interaction Designer @Yahoo
Visual Designer, UI Engineer @Trend Micro
Interaction Designer @Dlink
NCCU - Digital Content and Technologies - TUI, HCI
Web Design - 從需求到設計,我要思考什麼?
UX v.s UI
Product Design Process 
Web Design Process
Skills & Tools
AGENDA
UX UI有⼀樣嗎?
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
PRODUCT設計流程
strategy inspiration implementationideation
strategy inspiration implementationideation
Who & Why?
Empathy
Hypothesis
Meaningful innovation
start with USERS
strategy inspiration implementationideation
Brainstorm/
How Might We
storyboarding
implementation
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
了解使⽤者
誰會造訪這網站|為什麼|核⼼⽬的是什麼
網站地圖
網站架構|流程
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
框線圖
介⾯|內容規劃
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
Web Design - 從需求到設計,我要思考什麼?
DESIGN
開始做設計,應該注意什麼
3
設計與前置作業
TYPOGRAPHY COLOR SCHEME GRID SYSTEM
Web Design - 從需求到設計,我要思考什麼?
design standard
typography
iconography
interaction
Color Palette
善⽤GRID排版
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
思考響應式網⾴的設計
不同平台,導覽也會不同
圖⽚的排版會流動式的改變
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
DEVELOPMENT
設計師沒事了嗎?
4
切圖與溝通
哪邊要切圖|可否⽤CSS 或 ICON FONT 代替
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
原型
PROTOTYPE
Communication
Prototype =
GapDesigner Other
RD
PM
Designer
stakeholders
Gapconcept execution
Language
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
SKILL TOOL
DESIGN
PS | SKETCH | ICON FONT
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
CODING
CSS3 | HTML5 | JS | BOOTSTRAP | WEB FONT
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Thank you
dribbble : https://dribbble.com/ricetseng

Más contenido relacionado

Destacado

雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法NTUST
 
用戶體驗服務設計流程
用戶體驗服務設計流程用戶體驗服務設計流程
用戶體驗服務設計流程NTUST
 
長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑
長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑
長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑Jen-Chieh Yang
 
台灣長照政策與現況
台灣長照政策與現況台灣長照政策與現況
台灣長照政策與現況Jen-Chieh Yang
 
國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人rita
 
Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21CQD
 
APP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCodaAPP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCodaRyan Chung
 
從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合Joel Zhong
 
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构PHP WEB 应用组织与结构
PHP WEB 应用组织与结构HonestQiao
 
TrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTWTrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTWRyan Chung
 
Grpc go-in-php
Grpc go-in-phpGrpc go-in-php
Grpc go-in-php光照 刘
 
教學課程Pdf備份
教學課程Pdf備份教學課程Pdf備份
教學課程Pdf備份楷霖 顏
 
Flexbox版面配置
Flexbox版面配置Flexbox版面配置
Flexbox版面配置景智 張
 
UI guide Example
UI guide ExampleUI guide Example
UI guide ExampleHowlin Yang
 
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事Chieh (Jack) Yu
 
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來Ling-Jyh Chen
 
React踩雷大作戰
React踩雷大作戰React踩雷大作戰
React踩雷大作戰皮馬 頑
 
Stock analysis
Stock analysisStock analysis
Stock analysisHal Chan
 
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊Chen Cheng-Wei
 

Destacado (20)

雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法
 
用戶體驗服務設計流程
用戶體驗服務設計流程用戶體驗服務設計流程
用戶體驗服務設計流程
 
長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑
長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑
長照服務法:保險法與長照產業 1040712 carebest照顧公開課-楊荏傑
 
台灣長照政策與現況
台灣長照政策與現況台灣長照政策與現況
台灣長照政策與現況
 
國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人
 
Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21
 
APP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCodaAPP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCoda
 
從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合
 
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构PHP WEB 应用组织与结构
PHP WEB 应用组织与结构
 
TrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTWTrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTW
 
Grpc go-in-php
Grpc go-in-phpGrpc go-in-php
Grpc go-in-php
 
教學課程Pdf備份
教學課程Pdf備份教學課程Pdf備份
教學課程Pdf備份
 
Flexbox版面配置
Flexbox版面配置Flexbox版面配置
Flexbox版面配置
 
UI guide Example
UI guide ExampleUI guide Example
UI guide Example
 
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
 
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
 
React踩雷大作戰
React踩雷大作戰React踩雷大作戰
React踩雷大作戰
 
Stock analysis
Stock analysisStock analysis
Stock analysis
 
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
 
PHP教材
PHP教材PHP教材
PHP教材
 

Similar a Web Design - 從需求到設計,我要思考什麼?

设计资料总结
设计资料总结设计资料总结
设计资料总结yamingd
 
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計Charles (XXC) Chen
 
用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16John Woo
 
创新工厂 -用户体验报告.
创新工厂 -用户体验报告.创新工厂 -用户体验报告.
创新工厂 -用户体验报告.VImLai
 
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享Justin Lee
 
使用者經驗設計初探
使用者經驗設計初探使用者經驗設計初探
使用者經驗設計初探George Chang
 
資策會 從洞察需求到交互原型溝通
資策會 從洞察需求到交互原型溝通資策會 從洞察需求到交互原型溝通
資策會 從洞察需求到交互原型溝通Gainshin Hsiao
 
以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)悠識學院
 
20191014-林金祥-UIUX
20191014-林金祥-UIUX20191014-林金祥-UIUX
20191014-林金祥-UIUXneochen2701
 
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)悠識學院
 
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Tim Xia
 
视觉设计
视觉设计视觉设计
视觉设计o0runner
 
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远IxDC
 
悦人设计咨询服务2012
悦人设计咨询服务2012悦人设计咨询服务2012
悦人设计咨询服务2012Douglas Wang
 
用工具方法來輔助創新
用工具方法來輔助創新用工具方法來輔助創新
用工具方法來輔助創新Ian Jang
 
設計思考讀書會: 一些很少人在談的東西 深入服務設計思考
設計思考讀書會: 一些很少人在談的東西 深入服務設計思考 設計思考讀書會: 一些很少人在談的東西 深入服務設計思考
設計思考讀書會: 一些很少人在談的東西 深入服務設計思考 小均 張
 
ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法悠識學院
 
UCD在游戏行业中的生存与发展
UCD在游戏行业中的生存与发展UCD在游戏行业中的生存与发展
UCD在游戏行业中的生存与发展top idea
 

Similar a Web Design - 從需求到設計,我要思考什麼? (20)

设计资料总结
设计资料总结设计资料总结
设计资料总结
 
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
 
用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16
 
创新工厂 -用户体验报告.
创新工厂 -用户体验报告.创新工厂 -用户体验报告.
创新工厂 -用户体验报告.
 
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
 
使用者經驗設計初探
使用者經驗設計初探使用者經驗設計初探
使用者經驗設計初探
 
資策會 從洞察需求到交互原型溝通
資策會 從洞察需求到交互原型溝通資策會 從洞察需求到交互原型溝通
資策會 從洞察需求到交互原型溝通
 
以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)
 
Ux for ym
Ux for ymUx for ym
Ux for ym
 
20191014-林金祥-UIUX
20191014-林金祥-UIUX20191014-林金祥-UIUX
20191014-林金祥-UIUX
 
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
 
服務設計(Service design)顧客洞察
服務設計(Service design)顧客洞察服務設計(Service design)顧客洞察
服務設計(Service design)顧客洞察
 
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
 
视觉设计
视觉设计视觉设计
视觉设计
 
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
 
悦人设计咨询服务2012
悦人设计咨询服务2012悦人设计咨询服务2012
悦人设计咨询服务2012
 
用工具方法來輔助創新
用工具方法來輔助創新用工具方法來輔助創新
用工具方法來輔助創新
 
設計思考讀書會: 一些很少人在談的東西 深入服務設計思考
設計思考讀書會: 一些很少人在談的東西 深入服務設計思考 設計思考讀書會: 一些很少人在談的東西 深入服務設計思考
設計思考讀書會: 一些很少人在談的東西 深入服務設計思考
 
ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法
 
UCD在游戏行业中的生存与发展
UCD在游戏行业中的生存与发展UCD在游戏行业中的生存与发展
UCD在游戏行业中的生存与发展
 

Web Design - 從需求到設計,我要思考什麼?