网页设计（一）：拼图游戏
网页设计是什么？
网页设计是平面设计的一种，但是却是和技术关系最密切的。它是技术和艺术的完美结合。如果离开了美感，大家只会想起用户图形界面早期年代，有限的显色情况下的网站，因为那时还没有网页设计的概念，网页都是由工程师进行搭建的。
有人说，网页设计就像一个容器，它把所有的平面设计有关的内容都包含进去了：排版、海报设计、LOGO设计、配图/插画设计等等（这也是为什么我一直没有写网页设计相关文章的原因，因为实在太庞大，只能是一点一滴讲起），但是我依然想尝试从自己的角度来写一系列网页设计的文章，和大家分享关于网页设计的点滴。
交互：平面设计的另一个维度
比起其他的平面设计，网页设计最大的特点就是交互。比如海报的设计一旦确定印刷以后，基本这个设计就定稿了。而网页设计从来没有定稿一说，因为网页的内容是不断在更新的，甚至网页的布局、元素都在不断的调整，包括用户如何与网页元素互动的动效等等这些交互的内容都在说明，网页设计需要考虑的不仅仅是某个时间点上的视觉，而是贯穿整个视觉的迭代过程，它是一连串的视觉，而非某一个片段。
要理解这一点其实很简单，当你看到展示出的很多优秀的网页设计的作品，可惜都没办法找到它们的链接，这就是这个网页的一个片段。没有链接，没有访问，还只是在设计师内部流传的一个视觉分享的，而没有办法真正进入迭代，投入使用。
网站：用来做什么？
网页设计必定需要代码，需要交互，需要url，就像一个人有了头、四肢、躯干，如果没有灵魂，我们会把它叫做body或者尸体，但是有了灵魂，我们就会称其为人。人来到这个世界都会有不同的任务，比如是来做设计的，就叫做设计师，那么网站也是一样，上线后的网站，就需要为其搭配一个职能，也就是它主要是用来做什么的？
按网站的职能，我们大致可以把网站划分为：博客网站、展示型网站、企业网站、商城、论坛等，而其他任何网站，其实都是在这五个网站的基础上的变形或相互的组合。但是无论什么网站：展示，是一个比较根本的目的。
根据展示所衍生出不同的用户对象，比如展示一个楼盘的信息需要放置的内容是图片、地段、面积、户型、周边生活配套等等，这就和展示一张摄影作品需要放置的信息完全不同。信息的不同就会使得网页的排版不同，所组合而成的整体风格自然也就有所差异。
而有的网站因为有了管理层级的需要，有用户注册会员这一系列的功能，比如商城、论坛等，会需要更庞杂的功能来进行管理。
页面：组成网站的大部件
大家知道一个网站不止一个页面，比如进入到某个商城，点击某个商城的产品分类，就会进入不同的分类下的产品列表，点击某个产品又能进入产品。可以说是层层递进，而当你看完一件商品，又能从这个商品返回到首页。
这些不同的页面就组成了网站，而这些页面略微的区分一下最简单就是首页和内页的区分。为了更好了解内页，我们又可以把内页叫做子页面，这些页面按照等级又可以划分为二级页、三级页……
首页：一般来说是重要内容的展示，有凸出品牌形象的作品 二级页：大部分情况下是各种列表页，大家可以在这些列表中看到展示的集合并且进入下一级页面 三级页：大部分情况下是详细页，就是单条项目的最完整的信息展示。
组件：拼图的玩法
不同的页面样式，就是利用组件来进行布局。组件是一个相对能独立出来的部分。比如在首页中，大家可以看到很多大图的轮播banner，有的会有轮播按钮，分别展示不同的图片。这就算作一个组件。这个组件可以放在页面的头部，也可以放在页面的尾部，无论组件在哪里，都不会影响页面组件的功能发挥。它们的位置不同只会产生不同的布局，形成不同的外观。
组件是页面的基本组成部分，我们可以把网页看成一个拼图，组件就是拼图的每一小块，页面最后长成什么样，就看你怎么安排你的组件的位置。比如banner一般最好的体验就是放在页头，如果你放在页尾也可以，但是不太符合用户习惯。有很多用户习惯形成的组件的经典款，这些组件之间的位置不太能有大的调整，就像一个房间基本都有客厅、厨房一样，你也可以设计一个没有客厅的房间，但是这不太符合大部分人的需求。所以这个拼图并非可以随心所欲，而是在一定的用户体验允许的范围内进行调整。
这里还要提到的一点就是组件的功能，除了发挥作为一片拼图的组成部分这一功能外，我们还有一个角度是从功能来看待它。
静态组件与动态组件
静态组件和动态组件是我们对组件在功能上的一个划分，什么是动态和静态的区别呢？很简单理解这一点就是针对组件的内容，就像人的身体有静脉和动脉的区别一样，它们最大的区别是什么呢？静脉的血流速度慢，动脉的血流速度很快（比如往你的动脉扎一刀，就会血流如注一样），那么动态组件和静态组件也是这样的：你的内容更新比较快的就是动态组件，内容更新慢的就是静态组件。
那这个内容更新快慢怎么理解呢？就像一个作品列表，作品在这里更新的内容肯定比你的LOGO、导航这些内容换得更快，需要不断增加，这样就可以知道作品列表、作品详细都是动态组件。相应的，比如关于页面里的内容，你要介绍自己，当然不可能每天或者每周都更新一次，也不需要有个“动态”去展示给用户，因此即使你仍然可能会更新，但是这里的内容却是相对更新比较慢的，因此我们就可以叫它作静态组件。
元素：组件的样式
组件是由什么构成呢？在这里我们会进一步涉及到另一个概念：元素。一个图标可以是一个元素，一个段落也可以是一个元素，元素虽小，五脏俱全，元素的不同组合就形成了不同的组件。
比如作品列表这个组件就是由图片、文字、分类标签、分页按钮所组成，当然不同的作品列表肯定展示的内容会略微的不同，可能会增加摘要或者图标等，但是从这里我们可以看到，这些图片、文字、分类标签、分页按钮就是所谓的不同的元素。
每个元素都会有不同的样式，元素的样式不同，它们所组成的组件样式也就不同。比如文字的样式可以是尺寸、字体、段落间距、位置（布局）等方面的变化，因此也就形成了不同的文字段落样式。
后记
综上，网站、页面、组件、元素这四个层次的关系，构成了种类多样、外观丰富的网页设计，网页设计也不再简单被看作一个大拼盘，而我们在做Pagepan这个产品的时候，就是基于这样的理念，来一层层搭建一个出一个网站。
ifeiwu
作者：飞屋睿UIdesign