UI制作规范.docVIP

UI制作规范 UI规范文件 这是一个UI模板规范，在做B/S版应用程序时比较适用，其实这样的东西算不上什么正规的规范，只是为了适应我们现在面对的开发环境和组织流程做的一些权宜的努力，和解决了一些与程序沟通和接口的问题，尽量避免误会和摩擦。 一、适用环境和对象 二、必要性 三、技术原则 四、代码编写规范 五、页面模版使用规范 一、适用环境和对象 本规范适用基于浏览器的B/S版软件项目开发工作。开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。 基于客户端的C/S版软件开发工作不适用本技术规范。 二、必要性 本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同 一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协作的水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通 不畅、反复修改、重复劳动、效率低下的现象。 三、技术原则 代码规范化书写 代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期 写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通 的前提。 数据层、结构层、表现 层分离 数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。这里强调的“真正”，是指纯粹的数据信息本身。把信息内容以一种合适的 方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构 (Structure)” 虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西， 称之为“表现(Presentation)” “表现”的作用使内容看上去漂亮、赏心悦目、打动人心！ 所有HTML和XHTML页面就是由“结构、表现和行为”这三方面 组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”, 对于数据、结构与表现 相分离，最早是在软件开发架构理论中提出来的。UI设计师设计出页面模版，程序员负责内容数据的嵌入，数据可能是从数据库中提取出来，也可能是静态写入的 提示性文字，最后形成一个新的页面展示给软件操作者。模版文件的结构利用HTML＋XHTML标签来定义，而所有涉及表现的东西通通剥离出来，把它放到一 个单独的文件里，这个单独的文件就是CSS。 数据、结构与表现相分离的好处是： 程序员不需要过多的思考页面显示问题，而只需要根据模版效果把数 据放入模版相应的位置。界面的结构和表现由UI设计师负责。填入结构的数据自觉套用设计好了的表现效果。最后呈现一个实现功能的完整界面。 表现层 的分离保持整个软件界面视觉的一致性，使改版也变得非常简单，修改样式表就可以了； 由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再 利用也更加方便灵活； 四、代码 编写规范 （一）目录结构及命名 规则 目录结构规范 1、 目录建立的原则：以最少的层次提供最清晰简便的访问结构。 2、根目录一般只存放index.htm以及其他必须的系统文件 3、在根目录中 原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于 存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片 4、所有JS,ASP,PHP等脚本存放在根目录下的 scripts目录 5、所有CGI程序存放在根目录下的cgi-bin目录 6、所有CSS文件存放在根目录下style目录 7、 每个语言版本存放于独立的目录。例如：简体中文gb 8、所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录 9、temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。 文件和目录命名规范 1、文件命名的原则：以最少的字母达到最容 易理解的意义。 2、每一个目录中包含的缺省html 文件，文件名统一用index.htm 3