Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UED工作流程分享和交流
Search
cssrain
September 02, 2014
Technology
490
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
UED工作流程分享和交流
UED工作流程分享和交流
cssrain
September 02, 2014
More Decks by cssrain
See All by cssrain
解读HTML
cssrain
0
160
解读HTML5
cssrain
2
190
基础CSS(1)
cssrain
0
180
基础CSS(2)
cssrain
0
120
高效的CSS
cssrain
0
170
高级CSS—继承
cssrain
0
150
PhoneGap分享和交流
cssrain
0
120
PhoneGap实践
cssrain
0
93
Zen Coding.
cssrain
0
110
Other Decks in Technology
See All in Technology
カードゲーム作りが教えてくれた プロダクトオーナーシップ
moritamasami
0
110
第67回コンピュータビジョン勉強会CVPR2026読会前編
tsukamotokenji
0
150
Webアプリ認証の全体像 / The Big Picture of Web App Authentication
kitano_yuichi
0
210
ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi
sue445
PRO
0
150
しくみを学んで使いこなそう GitHub Copilot app
torumakabe
2
290
ヘルスケア領域における AI 活用と その安全性担保のための取り組み (Leveraging AI in Healthcare and Our Efforts to Ensure Its Safety) - Google I/O Extended Tokyo 2026, July 11, 2026
zettaittenani
0
430
ボーイスカウトルールでメモリやスキルを改善しよう
azukiazusa1
4
1.5k
最適な自走を最小限の支援で — M&Aで拡大する組織で少人数SREが挑んだ1年 / SRE NEXT 2026
genda
0
1.5k
ファミコンでPHPを動かす / PHP on the Famicom
tomzoh
2
450
個人開発で育てる「大規模設計の苗床」 - AI時代の1人開発から始める業務への知識接続 / The Seedbed for Large-Scale Design - From AI-Era Solo Projects to Professional Knowledge
bitkey
PRO
1
280
AI時代の開発生産性は、個人技からチーム設計へ
moongift
PRO
4
2.4k
企業でAWS Organizationsを動かすための組織設計の考え方
nrinetcom
PRO
1
110
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Practical Orchestrator
shlominoach
191
11k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
490
Skip the Path - Find Your Career Trail
mkilby
1
170
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
750
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
AI: The stuff that nobody shows you
jnunemaker
PRO
8
830
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
Building the Perfect Custom Keyboard
takai
2
810
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.4k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
150
Transcript
UED工作流程 分享和交流 单东林 2012年05月 UED分享 · 交流 http://cssrain.github.io
UED是什么 UED团队的协作流程 UED团队的角色构成、职责、输入物和输出物 UED团队如何面向开发人员 UED团队的工作比重 内容: 1 2 3 4
5
UED是什么 UED = User Experience Design 用户体验设计 指用户访问网站或者使用产品时的全部体验。 用户的印象和感觉,是否成功,是否享受,是否还想再来使用。他们能够忍受的问 题,疑惑和BUG的程度。
我们呢 谁在做用户体验
UED团队的组成 用户 体验 设计 交互 设计 图形 界面 设计 Flash
开发等 …… 前端 开发 UED团队 User Experience Design Team JavaScri pt 性能 优化 CSS 压缩 优化 协助后 台开发 等等 ……
U E D 团 队 的 协 作 流 程
需求调研 需求/交互设计 前端开发 前后端整合 视觉设计 写测试用例 后台接口开发 需求/交互设计评审 未通过 输出PRD&Prototype 跟踪用户反馈 提交bug 需求 开发 跟踪 需求范围沟通 输出需求大纲 需 求 有 问 题 输出视觉效果图 输出静态页面 迭代开发 测试上线 迭代测试
视觉设计师 1 前端工程师 3 交互设计师 1 参与产品前期的规划构 思,完善产品概念
归纳产品界面的人机交 互需求,了解产品设计逻 辑 设计产品界面的信息架 构、用户操作流程等,给 出产品原型 参与DEMO的原型确认 了解产品设计逻辑及符 合产品的商业表达习惯 在交互DEMO 的基础 上完成产品页面的视觉设 计 参与DEMO的原型确认 了解产品设计逻辑及交互设计方案 与交互设计师一起进行交互设计方案的技术可行性评估 在视觉DEMO戒交互DEMO的基础上完成前端开发,并负责与后台 交互的传递 UED团队的角色构成、职责、输入物和输出物 需求说明书 产品概念模型 交互设计稿 交互设计稿 视觉效果图 视觉效果图 静态页面
UED团队如何面向开发人员 传统模式 UED模式 美工 开发人员 视觉效果图 JSP页面 视觉设计师 前台开发人员 后台开发人员
视觉效果图 HTML页面 JSP页面
UED团队如何面向开发人员 传统模式 UED模式 项目前期:帮助后台人员开发静态页面 项目后期:协助后台人员修改CSS和JavaScript 其他时间:为后台人员提供前台技术培训 美工 开发人员 视觉效果图 JSP页面
视觉设计师 前台开发人员 后台开发人员 视觉效果图 HTML页面 JSP页面
15% 培训,分享,改进 25% 分析,调研 评估,原型 60% 设计,页面 性能,体验 UED团队的工作比重 视觉设计,关注用户界面的美观度,包括整个产品的风格
等; 前端代码实现:用XHtml/CSS/Js等前端技术实现静态页 面,前端交互功能实现; 优化前端页面性能和流程,改善前端用户体验; 产品前期的用户研究、市场调研、竞品分析、产品设计; 过程和后期的用户调研、易用性测试和评估等; 业务流程和概念化的界面原型制作; 培训戒协助各部门进行各种培训:如VI使用培训; 分享设计资源、技法、心得; 可用性测试,持续改进产品; 新技术的学习和实现,前端规范的制定;
产品需求 交互设计 视觉设计 用户体验反馈 后台开发,整合 前台开发 合理的用户体验工作流程,能使我们变得更加专业 !
感 谢 聆 听