Magento项目UI设计规范Prepare by Eric HuangSilk Software08/29/2010Version HistoryNameDateReason for ChangeVersionEric(黄光华)08/29/2010Initial Draft1.0.0Table of Contents1MAGENTO UI设计遵循原则31.1Theme设计原则31.1.1Design设计原则31.1.2Skin设计原则32SVN 使用遵循原则42.1SVN目录结构说明42.2SVN开发人员文件包存放原则52.3SVN设计人员文件包存放原则52.4整合设计人员文件包遵循原则53其它51 Magento UI设计遵循原则1.1 Theme设计原则1.1.1 Design设计原则1.1.1.1 Template设计原则a. 禁止修改appdesignfrontendbasedefaulttemplate中的任何文件。b. 警慎修改 templatepagehtml文件夹下的 .phtml文件,避免覆盖或错改UI设计人员的修改。c. 自定义的Theme统一命名原则，主网站的Theme用网站的名称做为Theme名称，如果有子网店，则用子网店的名称做为子网店的Theme名称.d. 自定义的Theme统一存放到appdesignfrontenddefaulte. 第三方插件的.phtml统一存放到appdesignfrontenddefaultdefaulttemplate中; .xml文件统一存放到appdesignfrontenddefaultdefaultlayout中。f. 需要修改、扩展、重写与业务紧密相关部分的.phtml模板文件，如果原有Theme中对应部分，则可以在原有Theme中修改;如果原有Theme中没有对应的模板，则从appdesignfrontendbasedefaulttemplate中复制对应的模板中，然后才进行修改。1.1.1.2 Layout设计原则a. 禁止修改appdesignfrontendbasedefaultlayout中任何文件b. 需要修改模块的.xml时，首先将对应的.xml文件拷贝到网站对应的Theme中，然后做修改。c. UI设计人员修改layout中的 .xml文件时，需要与项目对应的开发人员协商1.1.2 Skin设计原则1.1.2.1 CSS设计原则a. 自定义.css文件和css的命名必需以网站或网店名称为前缀。比如：“ProjectName-name.css”或“StoreName-name.css”或 “ProjectName-需要重写原css的名称”；CSS的层次结构必需要与Theme中原css的层次结构一致。b. 自定义的css,必需为每一个页面定义一个单独的.css文件，如：asweett-home.css、asweett-contacts.css、asweett-about.css等。c. 单独定义一个css文件，用于存放项目的所有页面公共的css文件，例如asweett-main.css或asweett-all.css。d. 自定义的css文件统一放到skinfrontenddefaultcss中。1.1.2.2 Images设计原则a. Images应统一放到skinfrontenddefaultimages中b. 客户提供的每一个Mockup页面的切图应在images中单独建一个文件夹存放，比如imageshome、imagesaboutus、imagescontacts等等。c. Home Banners的图片,如果客户需要在magento的后台维护图片，则统一存放到mediahomebanners或mediahomebanners中;如果不需要在magento的后台管理中维护图片，则统一存放到skinfrontenddefaultimagesmedia中。d. Images切图时应切成JPG格式，尽量少用PNG格式的图片e. Images切图后的所有的图片都应做优化处理，将图片大小控制在1M以内2 SVN 使用遵循原则2.1 SVN目录结构说明描述Svn中只保存改动过的文件和该版本数据SQL文件, 不包括magento核心代码。Svn目录结构说明权限设置trunk：用于存放当前测试版本全部文件组长/QA - RW,组员/UI - Rrelease: 用于存放已发布版本全部文件。只保存改动过的文件和该版本 数据SQL文件, 不包括magento核心代码。组长/QA - RWtags: 各版本的历史备份。组长 - RWbranch: 为每名成员创建个人文件夹，保存个人提交的代码。组长/组员自己 RW QA - R docs: 保存项目文档资料文件以及SQL脚本。组长/组员/UI/QA - RWDocs-Database: 用于存放DB备分的sql脚本Docs-Download: 用于网上下载的一些技术文章或文档Docs-Email: 用于存放与该项目相关的重要emailDocs-Meeting Minutes: 用于存放做项目过程中产生的各种会议记录Docs-Mockup: 用于存放该项目原始的JPG和PSD文件Docs-Plugin: 用于存放该项目所有用到的插件Docs-Requirement: 用于存入项目相关的一些需要文档Docs-Sourcecode: 用于存放代码备份的.zip或.rar包Docs-Theme: 用于存放项目所用到的Theme和原始版magento的代码2.2 SVN开发人员文件包存放原则a. 开发人员的修改过的程序文件统一存放到trunkCode中,按magento的原有目录层次结构组织内容。b. 开发环境的最新SQL脚本统一存放到trunkSqlScript中,需要指明当前数据库的版本号c. 填写功能开发文件修改清单的清单文件统一存放到trunkCode中注： 新增插件应放入功能文件包;提交的SQL脚本需要替换其 BaseURL,使其指向公司测试机。2.3 SVN设计人员文件包存放原则a. UI设计人员的文件包统一存放到trunkUI中b. 填写UI设计文件修改清单的清单文件统一存放到trunkUI中c. 文件包中只能包括以下类型文件： css, jpg, png, swf, flv, phtml, xml. 其他文件视为非法。2.4 整合设计人员文件包遵循原则a. 从SVN同步UI设计文件包后，整合代码时，禁止开发人员修改UI设计包中的css文件b. 开发人员只能将整合UI设计包的文件Check In到自己的SVN目录下，并填写功能开发文件修改清单c. 开发人员整合UI设计包并已经Check In到SVN中，发现css样式不对，应通知相关的UI设计人员，而不能自己直接修改css文件d. UI设计人员收到开发人员的css样式修改通知后，应从trunkCode中同步已整合前一版的UI的文件包到自己的UI设计环境中，用trunkCodeSqlScript的脚本更新UI设计环境的DB，然后进行css调整。调整完以后，再将新一版的UI文件包放到trunkUI中，并填写UI设计文件修改清单3 其它 4 / 62009-2010 Silk Software Inc.