UE工作流程

一、 编写目的

界面的质量要靠所有环节的人员来保证所以制作人员一定要了解整个部门工作内容和项目流
程清楚自己所处位置这样才能减少问题找到好的解决方案进一步提高界面的质量。
此文档描述了制作人员的定位所需技能及自身的职业发展。

二、 适用人员

UE员工

三、 部门工作流程

以下是文字说明
1. 第一步交互设计
交互人员根据需求规格说明书(需求人员提供)的内容进行界面交互稿的制作。
交互人员参与视觉图和HTML界面的检查工作以保证界面的质量。
交互人员会参与项目工作中的规划需求策划和测试共4个阶段的工作。
2. 第二步视觉设计
视觉设计师根据交互稿(交互人员提供)或需求规格说明书(需求人员提供)进行界面视觉设计。
视觉设计师参与HTML的检查工作以保证界面的视觉质量。
视觉设计师会参与项目工作中的规划需求和测试共3个阶段的工作。
3. 第三步界面制作
制作工程师根据交互稿(交互人员提供)、视觉图(视觉设计师提供)或需求规格说明书(需求人员提
供)进行HTML界面制作。成果HTML页面
制作工程师与交互人员、视觉设计师一道进行HTML的检查工作以保证HTML界面的质量。
制作工程师会参与项目工作中的需求和测试共2个阶段的工作。
4. 第四步规范检查
可用性工程师对完成的交互稿(交互人员提供)、视觉图(视觉设计师提供)、HMTL界面(制作人员提
供)进行规范化检查工作以保证界面的质量。
可用性工程师参与项目工作的规划需求测试共3个阶段的工作。
5. 第四步可用性评估
可用性工程师对完成的交互稿、视觉图、HMTL界面进行评估检查以保证界面的易用性。
可用性工程师参与项目工作的规划需求测试共3个阶段的工作。

四、 项目工作流程

1. 规划阶段
参与人员可用性工程师 成果交互稿\模板_界面可用性评估报告yymmdd.dot

视觉设计师 成果首页+二级界面的风格设计图1-2张
2. 需求分析阶段
参与人员可用性工程师 成果
交互稿\界面交互说明\
视觉设计师 成果二级页面设计图\模板_某项目界面视觉设计说明yymmdd.doc

制作工程师      成果HTML界面\模板_某项目界面制作说明yymmdd.doc

3. 策划阶段
参与人员可用性工程师 成果UE工作计划的制定
4. 编码阶段
参与人员可用性工程师、视觉设计师、制作工程师进行界面检查和修改支持。
5. 测试阶段
参与人员可用性工程师、视觉设计师、制作工程师进行界面检查和修改支持。
对发现的界面问题在系统测试阶段可提交BUG。
成果模板_某项目界面走查记录表yymmdd.doc

6. 交付
无

五、 涉及工具软件

原型工具Axure RP Pro 5.6
视觉工具Adobe Photoshop CS4
制作工具Adobe Dreamweaver CS4
Zen.Coding-Dreamweaver.v0.6.zip 快速编写代码的插件
调式工具fire bug (火狐浏览器使用)
IEDevToolBar (IE浏览器使用)

六、 周边知识介绍

交互知识
参看书籍《
人机交互以用户为中的设计和评估第2版
》

《
GUI设计禁忌2.0
》

视觉知识
参看书籍
《导向系统设计
》
素材网http://www.zcool.com.cn
http://www.sj63.com/
http://www.mymxp.cn/
可用性知识
参看书籍《
用户体验的要素以用户为中心的Web的设计
》
《就这么简单——Web开发中的可用性和用户体验
》

《UCD火花集——有效的互联网产品设计
》
前端开发知识

jQuery
《锋利的jQuery
》
FLEX
《Flex 第一步——基于ActionScript3.0的Flex 2应用开发含盘
》

七、 技能列表

良好的Web产品开发团队在团队成员基础能力上一定要下功夫。结合自己的团队配备特此罗
列了Web前端产品工程师所涉及的技能列表如下
一个完备的前端产品开发团队必须拥有如下的人才配备才能达到项目任务要求

团队全体成员达到所有技能中的A级标准
团队全体成员必须掌握两项技能中的B级标准并保证所有的b级标准在该团队中有50%以
上成员能达到
团队全体成员必须掌握一项技能中的C级标准并保证所有的c级标准在该团队中有25%以
上成员能达到
1. XHTML/CSS制作工程师
A - 基本的layout实现
B - 严格跨平台的layout实现以
C - 优雅的HTML code尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本
保持一致。不要求了解各种CSS的hacks但要求知道遇到问题应该如何查阅资料以在第一
时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构让JS开发人员在开发
的时候认为”一切都已经准备就绪了”而不是”捉襟见肘”。
2. PhotoShop/Fireworks Design制作工程师
A - 配合美工将草图形成具体的符合WebPage的设计
B - 有快速制作分层高品质PSD、PNG的能力
C - 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
3. Flash Design制作工程师
A - 基本动画效果
B - 复杂的交互体系设计了解第三方swf辅助设计软件
C - 复杂的交互体系设计以及较强的对各类外埠资源PNG、JPG、MP3、WAV等的整合
能力。精通部分第三方辅助设计软件AE、SwishMax、Swift3D等
4. JavaScript/Ajax/DOM前端工程师
A - 基本的DOM操作了解AJAX可以实现数据通信
B - 基本的DOM操作能写高效率的OOP代码以降低维护成本
C - 基于需求进行不同的开发选择合适的框架做到代码效率最高用户体验最好代码
下载量最小并且可以在单独甚至更多产品线中最大限度重用代码
5. Flash Development前端工程师
A - 基于Timeline的ActionScript操作能实现简单交互
B - 掌握a外能实现数据层通信与服务器以及本地SharedObject
C - 精通AS1-3能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的还是FlashPlayer9的都能做到开发效率最高、灵活性最大比如对HTML层的接口设计等等。