UI作业流程规范.doc

《UI作业流程规范.doc》由会员分享，可在线阅读，更多相关《UI作业流程规范.doc（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

5、端制作指FLA元件制作和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

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

7、目并注明解决方式和完成度回复给产品，产品人员也要及时向开发及测试补充需求/修改文档，产品需监督整个执行，最后因口述需求的问题没有具体得到执行或偏差由产品负责。产品相关二、 设计方式，规范设计师=瑞士军刀 设计师具备的技能就像工具箱，要学会使用最有效工具解决问题l 参考方案参考方案制作是指找到与需求相近的现成方案做参考，并用截图及拼凑的形式把产品的需求快速转化为设计稿而提交预览。设计师要有预见能力，如果把产品比作一个小孩，设计师要知道这个小孩今后大概会长的啥样，你有权利且有义务规划他。注意：a) 搜集同类产品资料 b) 分析同类产品不同设计的优劣处 c) 取其精华，弃其糟粕d) 重点表达自己产品

8、的特点l 草稿/线框图我敢说就算是达芬奇作画前也是要先打草稿的。我们设计师在得到一个需求时不要立即就photoshop打开作画，先动动脑筋、动动笔头子，不要设计做到一半，才发现理解上有问题。做草稿可以提高几点的能力：一、可以快速勾勒设计思路并展现，有效节省时间提高效率；二、草稿的形式没有颜色的衬托，没有质感的渲染，可以直接触及交互设计的基本构架，有利于及时发现交互问题；三、草稿通常需要口述解释，可锻炼表达能力。注意：a) 线条尽量要做到简洁、清晰b) 基本元素要齐全，该突出的要加重轮廓c) 给出交互的示意l 正式稿正式稿是设计的成品；评审UI质量的载体；前端开发必用的源文件。制作时要更细化考虑

9、色彩、质感、及元素的尺寸，页面布局的栅格化设计等。栅格化原理见文档栅格化布局和黄金分割.doc注意：a) 设置文档基本属性，如：尺寸（UI设计以像素px为单位，印刷品以厘米cm为单位）分辨率（72通常为电脑上用的点阵图分辨率,300通常为印刷用分辨率）色彩模式（RGB通常为显示屏用色标准,CMYK通常为彩喷印刷用色标准）flash帧频（广告banner小于15，动画在2430间）以上具体属性设置基于项目要求而定。b) 以5px或10px做栅格基本单位画参考线及页面布局，避免出现小数或半个像素。c) 源文件注意分层、分组，并为每一块结构取名。PSD档应为Tab层、弹出层设置图层颜色，表示状态切换

10、。d) PS尽量用矢量工具+图层特效的方式画结构和UI元素（button，icon），便于微调子节点修改尺寸；便于图层效果的复制和备份。e) 正式稿设计要把握整体产品的风格，在确定主风格的同时建立设计用例文档，较具体的定义主色调、字体样式及页面各元素的规格和用法，产品需列出交互形式和对话文案清单。f) 正式稿设计时要仔细了解产品的交互，不能遗漏页面元素，除修饰外不能增加多余的页面元素。l 设计用例在设计好主风格时就可以建立一个资源库，把库里的通用设计元素表明用处、用法，并建立一个文档，在后续的页面设计时始终遵守文档的用法，并调用资源库中的设计元素，既减少重复制作又能保持设计整体感。后续新增的通用设计元素时要补充资源库及更新设计用例文档。a) 资源库可以是美术素材、参考图片、源文件、图标、按钮等，但都需与主设计风格相符。b) 设计用例文档需清晰明确指明设计元素的用法和规格。参考dk用例.jpg三、 前端制作规范XHTML CSS详细见切割规范.docFLA SWF详细见fla元件制作规范.doc后续补充