设计师的框架(2)_网页设计教程

推荐：天极产品设计流程
写这个的目地，主要是系统理下目前产品设计的流程,提醒自己尽量去避免一些常见的问题，也能让大家系统的了解天极网的产品设计流程。当然，不保证任何产品都能套

什么是真正的益处?

框架的真正好处是能够快速启动工作，你可以创建一个新的(X)HMTL文件，引入你框架，你不用再处理重置padding 和 margins的事情，漂亮的排版，干净的表单，整洁的布局，有效的widgets，等等。很明显，很明显，虽然，你一定要来定制外观和感觉为每个站点。为实现这一目标,所有你需要做的是复写,并添加到默认的风格是必要的。

很显然，尽管你必须为每个网站定制外观，为了完成这一任务，你所需要做的就是在默认的样式上加几行代码。举个例子，假如在你的框架里，为所有的 class属性为“tabs”的UL标签设置了基本的水平导航样式，并且有一个灰色的边框，你只需要几行CSS代码，就可以定制成你的网站所符合的外观样式。

ul.tabs li {
border: none;
background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);
}

列表左浮动，并且将链接以块的形式置于列表当中，链接也左浮动，字体居中，象烦人的广告一样的这些工作，框架以帮你完成，在你的网站设计工作中，只需集中精力处理非凡的、有趣的网站细节，而不是写已经写过百万次的CSS代码。

如何构建一个CSS框架?

构建一个框架有几种可能的方式，但最常见，可以说是最有用的，抽象通用的CSS放到一个独立样式表文件，该样式表文件只包含整体的一个特有部分。例如,你可以，一个样式处理排版，另一个处理大量重置。这种好的方法能使你选择性引入你需要的样式，在你框架里可能有六七个不同的样式文件，但不需要其中的一两个，只要不引入即可。我们团队创建的框架包含5个样式文件：

• reset.css —处理重置
• type.css —处理排版
• grid.css —处理布局
• widgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮
• base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架

然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充。

忠告

这种方法不错,但也带来新的问题：增加了每一个页面的http链接数。对于大流量和中等流量的网站，每个页面增加5个以上HTTP连接数，系统治理员可能就麻烦大了。两个可能解决办法：

1. 把所有样式都放到一个文件里，而不是分成多个模块。这里的问题是，失去了框架只包含特定文件的灵活性，而且维护也变得麻烦。
2. 有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法，但假如做好了应该是很有效率的。以我上面框架为例，当请求（Request）base.css时候，而不是请求（Request）type.css , grids.css 等的时候，这一动态处理过程触发。这样一来,单个文件仍然可用，而在平台版本上整个框架也有效的。

总之，我们目标不是尽可能的抽象，这点非常重要。相反,其目标是提供了一个快速启动和更有效率的设计过程，这是绝对有可能去做过的。假如你过于的抽象，事情会变得混乱，太多的HTTP链接数会影响你网站的性能。记住：一个好的框架不是把事情搞更难更复杂，而是一个简单的从零的开始。

总结

我们web设计师往往经常重复自己，就像我程序世界里的那些朋友，我们重置浏览器默认样式、设计布局和导航菜单写了一遍又一遍——几乎每个项目。花一点时间整理CSS 框架，可以使你快速的启动每一个网站项目，更轻松的维护网站，并帮助团队里其他的设计师理解你作品。要注重的一点，这些益处的获得必须以不影响网站的性能为前提。

分享：交互行为三部曲
臭鱼的blog：www.chouyu.com.cn之所以会出现“交互设计”这个词儿，很大程度上是alancooper想区别于以往的界面视觉效果设计，重新定义一下基于电脑的软件设