UI作业流程规范

《UI作业流程规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、UI作业流程规范目录：一、作业流程和观念2l设计前2l设计中2l设计后3二、设计方式，规范4l参考方案4l草稿/线框图4l正式稿4l设计用例5三、前端制作规范5XHTMLCSS5FLASWF5版本内容编辑时间V1.0共分2大部分7条内容切割（xhtml）规范，fla元件制作规范见另文档WAVE2009.12.16作业流程和观念设计=解决问题，让设计师成为产品的第二个cpu，而不只是photoshopl设计前设计前期不要盲目的做方案，要了解清楚需求，沟通是基本。a)在产品只是有个idea的时候并没有具体的原型及PRD时，设计人员配合产品人员做市场调研，给出同类产品的参考方案，并进行讨论。b)经

2、过讨论，设计人员把对需求的理解转换成图形化草稿，这时可用线框稿加口述表达的方式把自己的解决方案告诉产品人员，并表达自己的观点。合理的地方要坚持，不合理的地方要快速改正。合理性分析见下‘表01’c)设计前是产品的创意阶段，是设计的准备阶段，这时思维要开阔，要经常头脑风暴，尽可能提出多种解决方案，多搜集相关素材，在确定风格的同时建立起该产品的资源库。表01：如何衡量设计的合理性，避免个人倾向？l本着设计是解决问题的思路去想，设计要解决的问题很多，先要与产品一起列出哪些问题，先诊后治，对症下药；分清问题的表象和本质，分清问题主次，治标更要先治本。l了解你的用户使用习惯，习惯性用法并不是抄袭，而是尊

3、重你的用户。通常创新是带有一定风险，需具备足够的自信和依据做支撑。创新是踩在别人的肩膀上爬楼梯。l以结果为导向，当你有份可视化的设计稿时，如果条件允许尽量让你的目标用户（3-5个）参与体念（也可请对产品不知情的公司其他部门同事如行政等参与）。其中不要对用户在体念时做太多干预，只要记录下用户的行为和反馈的信息，了解他为什么这么做或想。讨论时跳出设计，敢于否定设计，别总把自己当典型用户。l设计中设计中期即具体设计阶段，要仔细、严谨、规范。a)这个阶段通常已经有产品的原型和PRD，且产品人员会演示原型并做讲解。设计人员要对原型中不清楚的地方向产品咨询，不能把问题留在设计中。原型版本与需求不同步且有

4、些细节的地方原型难以表现时，产品会在PRD里用文字做详细描述，因此设计师在也要翻阅PRD。b)在有原型时设计人员即投入到正稿设计阶段，这时的设计稿要严谨且设计结果要符合产品需求。其中要注意，原型是产品需求或交互的一种解决方案，并不是唯一性的，设计师可对原型方案提出质疑并提供更有效的解决方式。UI设计的布局或风格用色等需由设计师自己把握，但一定要符合产品的特性，迎合用户的体验需求。c)在确认主体风格时设计负责人要建立设计用例并形成文档。如产品主辅色调定义；按钮、图形规格及用例，CSS用例。设计用例见目录‘二.4’d)设计正稿要经产品负责人确认后才开始前端制作并提交给开发。前端制作指FLA元件制

5、作和PSD图片切割、xhtml、css编写等。其中产品有新需求或者对原需求有改进时要向产品负责人索要需求文档，并对文件版本备份。e)设计正稿（psd/ai）、前端源文件(fla/html/css)、素材(jpg/swf/png/gif)等要分类提交到CVS上，保持文件最新版本，并列出内容清单通知其他协作人员（开发/设计）。文件存放目录及命名规则见‘表02’表02：CVS文件存放目录及命名目录说明命名按“功能+特征/编号”images/存放网站布局的图片文件，gif/jpg/pngbutton_red.gifbanner_01.jpgtitle_bg.giflogo.png…css/存放网站引

6、用的css文件base.csslayout.cssproduct.css…素材资源按具体素材种类分scene_01.swfcharacter_02.swfmap_01.swf…l设计后设计后是指完成设计并提交开发后，配合产品对开发部署的版本进行UI审核和优化a)开发部署版本后不仅要立即通知产品/测试负责人也要通知设计负责人。设计师可参照部署版本的内容对照设计稿，发现异样记录问题并提交给产品负责人，由产品负责人协调开发人员修复问题。<产品相关b)提交设计后也会有产品的新需求或变更，这时需要向产品提供需求/修改文档，需立即修改或简便修改的口头需求可立即执行，但设计人员要记录修改条目并注明解决方式

7、和完成度回复给产品，产品人员也要及时向开发及测试补充需求/修改文档，产品需监督整个执行，最后因口述需求的问题没有具体得到执行或偏差由产品负责。<产品相关一、设计方式，规范设计师=瑞士军刀设计师具备的技能就像工具箱，要学会使用最有效工具解决问题l参考方案参考方案制作是指找到与需求相近的现成方案做参考，并用截图及拼凑的形式把产品的需求快速转化为设计稿而提交预览。设计师要有预见能力，如果把产品比作一个小孩，设计师要