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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
cssrain
September 02, 2014
Technology
480
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
180
基础CSS(1)
cssrain
0
170
基础CSS(2)
cssrain
0
120
高效的CSS
cssrain
0
170
高级CSS—继承
cssrain
0
140
PhoneGap分享和交流
cssrain
0
120
PhoneGap实践
cssrain
0
91
Zen Coding.
cssrain
0
110
Other Decks in Technology
See All in Technology
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
findy_eventslides
2
200
ぼっちではじめた登壇が「51名」「241件」の発信に化けた
subroh0508
1
310
Agile and AI Redmine Japan 2026
hiranabe
4
480
When Platform Engineering Meets GenAI
sucitw
0
170
【2026年版】 ベクトル検索とEmbedding最前線
mocobeta
24
7.5k
AIAU_UMEMOGU_ninomiya_slide
ninomiya_ii
0
260
AIのReact習熟度を測る
uhyo
2
680
千葉での単身赴任からAWSをやり続け、千葉に戻ってきた話
yama3133
1
120
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
bash0c7
0
120
LayerX コーポレートエンジニアリング室におけるサプライチェーンセキュリティへの取り組み / Supply Chain Security at LayerX Corporate Engineering
yuyatakeyama
3
840
AIをフル活用してオンコール機能のプロトタイプを2日で作った話 / Building an AI-Powered On-Call Prototype in Just Two Days
nari_ex
0
130
秘密度ラベル初心者が第1歩でつまづかないための「設計・運用」ポイント
seafay
PRO
1
480
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Paper Plane (Part 1)
katiecoart
PRO
0
9.2k
How to Ace a Technical Interview
jacobian
281
24k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Embracing the Ebb and Flow
colly
88
5.1k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
870
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Claude Code のすすめ
schroneko
67
230k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
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使用培训; 分享设计资源、技法、心得; 可用性测试,持续改进产品; 新技术的学习和实现,前端规范的制定;
产品需求 交互设计 视觉设计 用户体验反馈 后台开发,整合 前台开发 合理的用户体验工作流程,能使我们变得更加专业 !
感 谢 聆 听