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
Data + AI Summit 2026 イベントレポート: 「AIがビジネスで意思決定するデータ基盤」へ
nek0128
0
280
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
geekplus_tech
2
400
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい!Databricksのai_queryについて調べてみた
kamoshika
1
220
DMM.com 購入改善推進チーム におけるCodeRabbitを用いた レビューフロー改善の一例
ysknsid25
2
670
インフラと開発の垣根を超えていき!〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
hatahata021
3
300
ソニー銀行におけるビジネスアジリティ向上のためのクラウドシフト戦略
srenext
0
860
ファミコンでPHPを動かす / PHP on the Famicom
tomzoh
2
470
プロダクト開発組織の現在地(Ver.2026/07) / product-organization
kaonavi
0
120
ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi
sue445
PRO
0
150
AI時代のPlaywright活用(システムテストを自動化する ー 実行エンジンにPla ywrightを選んだ理由)
ynisqa1988
1
630
実践!既存 Project への AI-Driven Development 適用〜 一ヶ月で Project 唯一のフロントエンドエンジニアを作り出せ〜
lycorptech_jp
PRO
0
240
OPENLOGI Company Profile for engineer
hr01
1
74k
Featured
See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
340
Optimising Largest Contentful Paint
csswizardry
37
3.8k
Utilizing Notion as your number one productivity tool
mfonobong
4
430
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.5k
Designing Powerful Visuals for Engaging Learning
tmiket
1
450
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
RailsConf 2023
tenderlove
30
1.5k
Deep Space Network (abreviated)
tonyrice
0
230
Documentation Writing (for coders)
carmenintech
77
5.4k
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使用培训; 分享设计资源、技法、心得; 可用性测试,持续改进产品; 新技术的学习和实现,前端规范的制定;
产品需求 交互设计 视觉设计 用户体验反馈 后台开发,整合 前台开发 合理的用户体验工作流程,能使我们变得更加专业 !
感 谢 聆 听