blog | 业余项目 | 关于Karry | RSS订阅 | 我在阅读 | 管理

Posts Tagged ‘DPL Design Pattern Library 设计模式库’

收藏:淘宝DPL-Design Pattern Library

星期二, 八月 25th, 2009

Taobao DPL

Basic Specification & Usage Guide

  1. 页面基本结构和命名约定
  2. assets 目录组织和文件命名规范
  3. TBra 使用说明

Basic Style Platform

  1. 样式重置 reset.css
  2. 栅格布局 grids.css 栅格使用说明
  3. 基本样式 base.css

Taobao Common Styles

  1. Box
  2. 价格
  3. 图片
  4. 商品信息块
  5. 按钮
  6. 面包屑
  7. 信息提示
  8. 步骤条

Taobao Common Icons

  1. 交易类图标
  2. 会员等级
  3. 杂类图标

Modules

  1. 页头和页尾过渡版本v2简头v2
  2. 反馈页面
  3. 旺旺点灯
  4. 日历
  5. 弹出框
  6. 卡盘
  7. 排行榜
  8. 标签云
  9. 自动完成
  10. 协议
  11. 搜索
  12. 级联列表
  13. 就地编辑

Misc

  1. 2008年Icons年终汇报

原文地址:http://assets.taobaocdn.com/tbra/dpl/

初识DPL(Design Pattern Library)

星期三, 三月 25th, 2009

    由于工作事件不算长,也没有到很庞大的团队工作过,对于DPL是最近才听说。首先看一张图:

 
图片来源:岁月如歌

这是一张关于UED团队中技术层次的模型图,其中DPL是重要的一环。DPL是一份文档化的说明,面向的是UED全体设计人员。DPL的背面是技术实现,一般体现在JS框架里,比如YUI的widgets库,jQuery的UI插件库等等,这些封装好的代码组件面向的是程序开发人员。

在DPL之上,可以构建各种应用。比如Yahoo的首页,Google的GMail. 每个公司的DPL各不相同,体现的是一个公司整体的设计观。

DPL负责的是通用模式。具体应用中的特殊模式,还需要直接根据前端框架、视觉规范、交互规范以及用研数据来完成设计和开发。

DPL初期的构建和维护成本很高,但一旦有效运作起来后,团队将获得丰厚的回报。

对于一个设计团队来说,好的设计模式库能够帮助实现规范化,从而减轻界面开发的工作量,提高一致性。而对于设计师个人来说,设计模式库有助于减少误用、滥用,以及无效的创新。

著名交互设计师Jared Spool曾总结出优秀的设计模式库应有的元素,它们包括:

  1. - 模式名称(Pattern Name)
  2. - 描述(Description)
  3. - 应用场景(Context of Use)
  4. - 在何处使用(Where to Use it)
  5. - 原理(How it Works)
  6. - 规范详情(Specifications)
  7. - 相关模式(Related Patterns)
  8. - 其他实现模式(Competitive Approaches)
  9. - 源代码(Source Code)
  10. - 可用性研究结果(Usability Research)
  11. - 讨论(Discussion)

现在比较成熟的模式库当属雅虎的DPL,再就是UI-Pattern