Magento项目UI设计规范.docVIP

Magento项目UI设计规范 Prepare by Eric HuangSilk Software08/29/2010 Version History Name Date Reason for Change Version Eric(黄光华) 08/29/2010 Initial Draft 1.0.0 Table of Contents 1 Magento UI设计遵循原则 3 1.1 Theme设计原则 3 1.1.1 Design设计原则 3 1.1.2 Skin设计原则 3 2 SVN 使用遵循原则 4 2.1 SVN目录结构说明 4 2.2 SVN开发人员文件包存放原则 5 2.3 SVN设计人员文件包存放原则 5 2.4 整合设计人员文件包遵循原则 5 3 其它 5  Magento UI设计遵循原则 Theme设计原则 Design设计原则 Template设计原则 禁止修改app\design\frontend\base\default\template中的任何文件。 警慎修改 %theme%\template\page\html文件夹下的 .phtml文件,避免覆盖或错改UI设计人员的修改。 自定义的Theme统一命名原则，主网站的Theme用网站的名称做为Theme名称，如果有子网店，则用子网店的名称做为子网店的Theme名称. 自定义的Theme统一存放到app\design\frontend\default\%Theme Name% 第三方插件的.phtml统一存放到app\design\frontend\default\default\template中; .xml文件统一存放到app\design\frontend\default\default\layout中。 需要修改、扩展、重写与业务紧密相关部分的.phtml模板文件，如果原有Theme中对应部分，则可以在原有Theme中修改;如果原有Theme中没有对应的模板，则从app\design\frontend\base\default\template中复制对应的模板中，然后才进行修改。 Layout设计原则 禁止修改app\design\frontend\base\default\layout中任何文件 需要修改模块的.xml时，首先将对应的.xml文件拷贝到网站对应的Theme中，然后做修改。 UI设计人员修改layout中的 .xml文件时，需要与项目对应的开发人员协商 Skin设计原则 CSS设计原则 自定义.css文件和css的命名必需以网站或网店名称为前缀。 比如：“ProjectName-name.css”或“StoreName-name.css”或 “ProjectName-需要重写原css的名称”；CSS的层次结构必需要与Theme中原css的层次结构一致。 自定义的css,必需为每一个页面定义一个单独的.css文件，如：asweett-home.css、asweett-contacts.css、asweett-about.css等。 单独定义一个css文件，用于存放项目的所有页面公共的css文件，例如asweett-main.css或asweett-all.css。 自定义的css文件统一放到skin\frontend\default\%Theme Name%\css中。 Images设计原则 Images应统一放到skin\frontend\default\%Theme Name%\images中 客户提供的每一个Mockup页面的切图应在images中单独建一个文件夹存放，比如images\home、images\aboutus、images\contacts等等。 Home Banners的图片,如果客户需要在magento的后台维护图片，则统一存放到%root%\media\%Site Name%\homebanners或%root%\media\%Store Name%\homebanners中;如果不需要在magento的后台管理中维护图片，则统一存放到skin\frontend\default\%Theme Name%\images\media中。 Images切图时应切成JPG格式，尽量少用PNG格式的图片 Images切图后的所有的图片都应做优化处理，将图片大小控制在1M以内 SVN 使用遵循原则 SVN目录结构说明 描述 Svn中只保存改动过的文件和该版本数据SQL文件, 不包括magento核心代码。 Svn目录结构 说明 权限设置 trunk：用于存放当前测试版本全部文件 组长/QA -- R