02.公用模板重构.pptVIP

公用模板重构 什么是公用模板 “公用”有两层含义 能够运用在不同的web项目上 提供给不同专业背景的人使用 运用在不同的web项目上 供公司内部团队使用的管理系统，用以优化流程，提高工作效率，例如公司人事管理、工作流程管理、销售管理、仓库资源管理等 这类系统主要供内部部门使用，功能繁杂，注重信息的组织和功能的实现，对前台界面个性化要求不高，不用每个系统都重新设计制作界面 供不同专业背景的人使用 一些web页面时效性很强，需要非常快速地制作上线；另外有些页面总量很大，结构相似。 有必要提供一套使用方便的公用模板，供编辑人员、或者后台开发人员直接使用 公用模板制作要求 供多个系统使用 布局结构具有抽象性、代表性 公用模板制作要求 供不同专业背景的人使用 2. 使用方便，易于自学 公用模板制作要求 设计开发人员的专业水准 设计风格统一，保持一致性 合理拆分样式，巧妙组合运用 理念 项目需求为主导 不放弃专业追求 谢谢观看 * 整体规划页面层次逻辑 h1,h2,h3,h4,h5,h6 的整体规划 清晰的导航菜单和面包屑(crumb)标识 代表性的页面布局结构 1.页头 2.导航 3.主体内容 4.页脚 ··· 具有代表性的页面元素 1.Logo、网页大标题 2.导航菜单 层级 3.面包屑导航 4.数据表格、正文文本、分页 5.数据录入表单 6.各类备注、报错、提示信息 7.UI交互组件：下拉菜单、切换标签、模态弹窗等 简单易记的命名规则 1.结构语义性：class=“newsList”| wrapper、nav 2.表现语义性：class=“textLeft” | f12px、cRed 搁置争议，综合运用 简单易理解的嵌套层次 1.布局最好可视化，能通过 IDE 操作，局部运用table 2.table布局的弊端：不符语义性、加载缓慢、重用性 扬长避短，灵活运用 样式组合的理论依据 1.class=“cRed textLeft ” 2.样式的继承覆盖原则，选择器优先级算法 矛盾的普遍性与特殊性 Email：rukey67@163.com