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
500
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
170
解读HTML5
cssrain
2
190
基础CSS(1)
cssrain
0
180
基础CSS(2)
cssrain
0
130
高效的CSS
cssrain
0
180
高级CSS—继承
cssrain
0
150
PhoneGap分享和交流
cssrain
0
120
PhoneGap实践
cssrain
0
93
Zen Coding.
cssrain
0
120
Other Decks in Technology
See All in Technology
[ChatGPT Work LT]事務作業が苦手な人のための バックオフィスの「半」自動化
chimaki_iot
0
250
モノリス Rails でも日中に rails db:migrate を走らせたい! / Daytime rails db:migrate on Monolithic Rails!
euglena1215
4
550
FORENSIA: ローカルLLMフォレンジックハーネス
sumeshi
2
350
【CEDEC2026】ゲームシナリオライターを支援するAIツール開発の実践 ― 設計とプロンプトの工夫 ―
cygames
PRO
1
770
LLM・AIエージェントシステムベストプラクティス
shibuiwilliam
2
580
修正PRを食べてレビュースキルが賢くなる:Claude Codeによる自己改善サイクル
yuyaumetsu
6
1.4k
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
hatappi
0
240
AWS ネットワーク構築でハマった(ハマりかけた) 5選とそこから得た教訓
nagisa53
4
200
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
19k
【CEDEC2026】専門性の高いデフォルメチームが挑んだ人材育成戦略 〜Cygames Academiaの企画から実施まで〜
cygames
PRO
0
530
事業価値と Engineering 2026年度版
recruitengineers
PRO
45
22k
AI駆動開発は個人技からチーム戦へ:組織でAIを使いこなすための実践設計
moongift
PRO
0
480
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
230
HDC tutorial
michielstock
2
790
GraphQLとの向き合い方2022年版
quramy
50
15k
Google's AI Overviews - The New Search
badams
0
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
Being A Developer After 40
akosma
91
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
73
41k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
360
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
460
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使用培训; 分享设计资源、技法、心得; 可用性测试,持续改进产品; 新技术的学习和实现,前端规范的制定;
产品需求 交互设计 视觉设计 用户体验反馈 后台开发,整合 前台开发 合理的用户体验工作流程,能使我们变得更加专业 !
感 谢 聆 听