UI作业流程规范.docVIP

UI作业流程规范 目录： 一、 作业流程和观念 2 ? 设计前 2 ? 设计中 2 ? 设计后 3 二、 设计方式，规范 4 ? 参考方案 4 ? 草稿/线框图 4 ? 正式稿 4 ? 设计用例 5 三、 前端制作规范 5 XHTML CSS 5 FLA SWF 5  版本 内容 编辑 时间 V1.0 共分2大部分7条内容 切割（xhtml）规范，fla元件制作规范见另文档 WAVE 2009.12.16 作业流程和观念 设计=解决问题，让设计师成为产品的第二个cpu，而不只是photoshop 设计前 设计前期不要盲目的做方案，要了解清楚需求，沟通是基本。 在产品只是有个idea的时候并没有具体的原型及PRD时，设计人员配合产品人员做市场调研，给出同类产品的参考方案，并进行讨论。 经过讨论，设计人员把对需求的理解转换成图形化草稿，这时可用线框稿加口述表达的方式把自己的解决方案告诉产品人员，并表达自己的观点。合理的地方要坚持，不合理的地方要快速改正。合理性分析见下‘表01’ 设计前是产品的创意阶段，是设计的准备阶段，这时思维要开阔，要经常头脑风暴，尽可能提出多种解决方案，多搜集相关素材，在确定风格的同时建立起该产品的资源库。 表01：如何衡量设计的合理性，避免个人倾向？ 本着设计是解决问题的思路去想，设计要解决的问题很多，先要与产品一起列出哪些问题，先诊后治，对症下药；分清问题的表象和本质，分清问题主次，治标更要先治本。 了解你的用户使用习惯，习惯性用法并不是抄袭，而是尊重你的用户。通常创新是带有一定风险，需具备足够的自信和依据做支撑。创新是踩在别人的肩膀上爬楼梯。 以结果为导向，当你有份可视化的设计稿时，如果条件允许尽量让你的目标用户（3-5个）参与体念（也可请对产品不知情的公司其他部门同事如行政等参与）。其中不要对用户在体念时做太多干预，只要记录下用户的行为和反馈的信息，了解他为什么这么做或想。讨论时跳出设计，敢于否定设计，别总把自己当典型用户。 设计中 设计中期即具体设计阶段，要仔细、严谨、规范。 这个阶段通常已经有产品的原型和PRD，且产品人员会演示原型并做讲解。设计人员要对原型中不清楚的地方向产品咨询，不能把问题留在设计中。原型版本与需求不同步且有些细节的地方原型难以表现时，产品会在PRD里用文字做详细描述，因此设计师在也要翻阅PRD。 在有原型时设计人员即投入到正稿设计阶段，这时的设计稿要严谨且设计结果要符合产品需求。其中要注意，原型是产品需求或交互的一种解决方案，并不是唯一性的，设计师可对原型方案提出质疑并提供更有效的解决方式。UI设计的布局或风格用色等需由设计师自己把握，但一定要符合产品的特性，迎合用户的体验需求。 在确认主体风格时设计负责人要建立设计用例并形成文档。如产品主辅色调定义；按钮、图形规格及用例，CSS用例。设计用例见目录‘二.4’ 设计正稿要经产品负责人确认后才开始前端制作并提交给开发。前端制作指FLA元件制作和PSD图片切割、xhtml、css编写等。其中产品有新需求或者对原需求有改进时要向产品负责人索要需求文档，并对文件版本备份。 设计正稿（psd/ai）、前端源文件(fla/html/css)、素材(jpg/swf/png/gif)等要分类提交到CVS上，保持文件最新版本，并列出内容清单通知其他协作人员（开发/设计）。文件存放目录及命名规则见‘表02’ 表02： CVS文件存放目录及命名 目录 命名按“功能+特征/编号” images/ 网站布局的图片文件，gif/jpg/png button_red.gifbanner_01.jpg title_bg.gif logo.png … css/ 存放网站引用的css文件 … 素材资源按具体素材种类分 scene_01.swf character_02.swf map_01.swf … 设计后 设计后是指完成设计并提交开发后，配合产品对开发部署的版本进行UI审核和优化 开发部署版本后不仅要立即通知产品/测试负责人也要通知设计负责人。设计师可参照部署版本的内容对照设计稿，发现异样记录问题并提交给产品负责人，由产品负责人协调开发人员修复问题。产品相关 提交设计后也会有产品的新需求或变更，这时需要向产品提供需求/修改文档，需立即修改或简便修改的口头需求可立即执行，但设计人员要记录修改条目并注明解决方式和完成度回复给产品，产品人员也要及时向开发及测试补充需求/修改文档，产品需监督整个执行，最后因口述需求的问题没有具体得到执行或偏差由产品负责。产品相关 设计方式，规范 设计师=瑞士军刀 设计师具备的技能就像工具箱，要学会使用最有效工具解决问题 参考方案 参考方案