Magento项目UI设计规范.doc

MagentoVersion1 4 1 0 Magento项目项目UI设计规范设计规范 Prepare by Eric Huang Silk Software 08 29 2010 Version History NameDateReason for ChangeVersion Eric 黄光华 08 29 2010Initial Draft1 0 0 2 5 2009 2010 Silk Software Inc Table of Contents 1MAGENTO UI 设计遵循原则设计遵循原则 3 1 1THEME设计原则 3 1 1 1Design设计原则 3 1 1 2Skin设计原则 3 2SVN 使用遵循原则使用遵循原则 4 2 1SVN 目录结构说明 4 2 2SVN 开发人员文件包存放原则 5 2 3SVN 设计人员文件包存放原则 5 2 4整合设计人员文件包遵循原则 5 3其它其它 5 3 5 2009 2010 Silk Software Inc 1 Magento UI 设计遵循原则设计遵循原则 1 1 Theme 设计原则设计原则 1 1 1 Design 设计原则设计原则 1 1 1 1 Template设计原则设计原则 a 禁止修改 app design frontend base default template 中的任何文件 b 警慎修改 template page html 文件夹下的 phtml 文件 避免覆盖或 错改 UI 设计人员的修改 c 自定义的 Theme 统一命名原则 主网站的 Theme 用网站的名称做为 Theme 名 称 如果有子网店 则用子网店的名称做为子网店的 Theme 名称 d 自定义的 Theme 统一存放到 app design frontend default e 第三方插件的 phtml 统一存放到 app design frontend default default template 中 xml 文件统一存放到 app design frontend default default layout 中 f 需要修改 扩展 重写与业务紧密相关部分的 phtml 模板文件 如果原有 Theme 中对应部分 则可以在原有 Theme 中修改 如果原有 Theme 中没有对应 的模板 则从 app design frontend base default template 中复制对应的模板中 然后才进行修改 1 1 1 2 Layout设计原则设计原则 a 禁止修改 app design frontend base default layout 中任何文件 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 的层次结构 一致 4 5 2009 2010 Silk Software Inc b 自定义的 css 必需为每一个页面定义一个单独的 css 文件 如 asweett home css asweett contacts css asweett about css 等 c 单独定义一个 css 文件 用于存放项目的所有页面公共的 css 文件 例如 asweett main css 或 asweett all css d 自定义的 css 文件统一放到 skin frontend default css 中 1 1 2 2 Images设计原则设计原则 a Images 应统一放到 skin frontend default images 中 b 客户提供的每一个 Mockup 页面的切图应在 images 中单独建一个文件夹存放 比 如 images home images aboutus images contacts 等等 c Home Banners 的图片 如果客户需要在 magento 的后台维护图片 则统一存放到 media homebanners 或 media homebanners 中 如果不需要在 magento 的后台管理中维护图片 则统 一存放到 skin frontend default images media 中 d Images 切图时应切成 JPG 格式 尽量少用 PNG 格式的图片 e Images 切图后的所有的图片都应做优化处理 将图片大小控制在 1M 以内 2 SVN 使用遵循原则使用遵循原则 2 1 SVN 目录结构说明目录结构说明 描述Svn 中只保存改动过的文件和该版本数据 SQL 文件 不包括 magento 核心代码 Svn 目录结构说明权限设置 trunk 用于存放当前测试版本全部文件组长 QA RW 组员 UI R release 用于存放已发布版本全部文件 只 保存改动过的文件和该版本 数据 SQL 文件 不包括 magento 核心代码 组长 QA RW tags 各版本的历史备份 组长 RW branch 为每名成员创建个人文件夹 保存 个人提交的代码 组长 组员自己 RW QA R docs 保存项目文档资料文件以及 SQL 脚本 组长 组员 UI QA RW Docs Database 用于存放 DB 备分的 sql 脚本 Docs Download 用于网上下载的一些技术文章或文档 Docs Email 用于存放与该项目相关的重要 email Docs Meeting Minutes 用于存放做项目过程中产生的各种会议记录 Docs Mockup 用于存放该项目原始的 JPG 和 PSD 文件 Docs Plugin 用于存放该项目所有用到的插件 Docs Requirement 用于存入项目相关的一些需要文档 5 5 2009 2010 Silk Software Inc Docs Sourcecode 用于存放代码备份的 zip 或 rar 包 Docs Theme 用于存放项目所用到的 Theme 和原始版 magento 的代 码 2 2 SVN 开发人员文件包存放原则开发人员文件包存放原则 a 开发人员的修改过的程序文件统一存放到 trunk Code 中 按 magento 的原有目录层次结构组织内容 b 开发环境的最新 SQL 脚本统一存放到 trunk SqlScript 中 需要指明当前数据库的 版本号 c 填写 功能开发文件修改清单 的清单文件统一存放到 trunk Code 中 注 注 新增插件应放入功能文件包 提交的 SQL 脚本需要替换其 BaseURL 使其指向公 司测试机 2 3 SVN 设计人员文件包存放原则设计人员文件包存放原则 a UI 设计人员的文件包统一存放到 trunk UI 中 b 填写 UI 设计文件修改清单 的清单文件统一存放到 trunk UI 中 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 设计人员