利用框架来支持设计规范

来源：西风坊 作者：犷野西风 时间：2009-04-20 点击：
欢迎加入酷秀网Web设计师QQ群 10895718 Tag：框架设计标准规范

一直以来我都不是同为设计也是有规则可寻的（至少是有原则可依的）。现在整个UED都BU掉了，各条产品线基本上是各自为战状态，网站产品也越发显得散乱。此时设计规范对UED也显得越发重要。昊歌有句话说得很对，那么多年来我们一直在担心，担心规范被人挑战，担心标准本身的问题，结果发现担心到最后我们什么都没有……

所以，先统一标准，再优化标准。

之前也看了淘宝的DPL，其实这些绝大多数都有，个人觉得这些东西没有很好的执行的最大问题在于缺少一个终端的解决方案：我们定了icon库，但在使用的时候还要去专门库里寻找，前端还要切割，重新定义背景……

这里想说的是，设计规范（标准）的推广也应该有一个适合终端框架。于是，结合目前自己正在做的fdevlib库来谈下框架和标准之间的依存关系：

· 视觉方面：1、形、色、质上的约定，产物应该是类似于淘宝“淘斯基”或是原先社区方面做过的色彩标准之类的约定，对应在框架上就应该是皮肤。（目前fdevlib里还缺少皮肤这一块的内容）2、固定标识的制定，比如所有的icon及其含义的确定，这方面对应于框架中的icon.css。

· 交互方面：1、归纳出相应的产品原型 - 对于在框架中就是组件（css+js的widgets）；2、设定页布局和样式的基本规范 -对于在库中就是type和grid。

· 前端方面：html，css和js的代码规范：fdevlib的初衷是来解决代码上的规范问题的。在js方面，既然选定了YUI作为最底层的库，就应该对如何来用这个库做一个约定，core部分就是做这件事情的。util里又扩展的ali相关的一些特殊方法，比如贸易通浮出等等……css方面以前讲过就不再多说了。

把以上的东西结合现有的fdevlib画成图如下：

fdevlib

至于具体怎么结合，那就要看实际情况了：

举两个例子：

1、icon库和icon.css的结合：

为icon库中的每一个icon定义一个特殊的ID，对于在icon.css里一个唯一的class，前端工程师开发的时候只需要照着表给相应的元素加上class就ok了

icon库：

icon

对应icon.css文件：

.a003xl,
.a003l,
a003m{
     background-image:url(××.png);
     background-repeat:no-repeat;
}
 
.a003xl{
     background-position:-8px -8px;
}

2、栅格系统和grid.css的结合：gird栅格系统

^{<div class="grid-c3-s6e6a">
<div class="main-wrap">
<div class="col-main">.col-main (auto / 472px)</div>
</div>
<div class="col-sub">.col-sub (232px)</div>
<div class="col-extra">.col-extra (232px)</div>
</div>}