今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程,我们可以把一个页面的完整设计过程分为7个步骤,如下图所示。
![网页设计流程](http://learning.artech.cn/uploads/blog-images/work-flow.gif)
在图中,这个过程分为了7个步骤,并且说明了这7个步骤相应使用的工具。这7个步骤依次为:
1. 内容分析:仔细研究需要在网页中的展现的内容,梳理其中的逻辑关系,分清层次,以及重要程度。
2. 结构设计:根据内容分析的成果,搭建出合理的HTML结构,保证在没有任何CSS样式的情况下,在浏览器保持高可读性。
3. 原型设计:根据网页的结构,绘制出原型线框图,对页面进行合理的分区的布局,原型线框图是设计负责人与客户交流的最佳媒介。
4. 方案设计:在确定的原型线框图基础上,使用美工软件,设计出具有良好视觉效果的页面设计方法。
5. 布局设计:使用HTML和CSS对页面进行布局。
6. 视觉设计:使用CSS并配合美工设计元素,完成由设计方法到网页的转化。
7. 交互设计:为网页增添交互效果,如鼠标指针经过时的一些特效等。
下面具体解说一下,例如要设计出一个如下图所示的页面。这是为一个假想的名为“Baby Housing”的儿童用品网上商店制作的一个网站首页。
![网页设计流程-首页](http://learning.artech.cn/uploads/blog-images/last.png)
今天开始来看一看具体是如何进行的。
第1步要先想清楚这个网站的内容是什么?通过一个网页要传达给访问者什么信息?这些信息中哪些是最重要的?哪些是相对比较重要的?以及哪些是次要的。这些信息应该如何组织呢? 我们可以参考一些网上商店的网站,比如下图所示的是卓越沿马逊网上商店的首页,读者在研究一些成功网站的时候,不要仅仅关注这些网站的设计风格和技术细节,更要从更深的角度观察它们,这样才能更好地掌握核心的东西。例如从图中可以看到,这个页面尽管内容非常多,但简单来说,就分为两大类——“分类链接”和“推荐商品链接”。
![网页设计流程-卓越](http://learning.artech.cn/uploads/blog-images/amazon.png)
这样回到我们自己的网站,比如说,可以确定出需要在首页展示如下一些信息:
- 网站标题
- 网站标志
- 主导航栏
- 自身介绍和用户帮助的链接
- 账号登录与购物车
- 今日推荐商品(1种)
- 最受欢迎商品(1种)
- 分类推荐商品(3种)
- 搜索框
- 类别菜单
- 特别提示信息
- 版权信息
在理解了网站的基础上,我们开始构建网站的内容结构。现在完全不要管CSS,而是完全从网页的内容出发,根据上面列出的要点,通过HTML搭建出网页的内容结构。
如下图所示的是搭建的HTML在没有使用任何CSS设置的情况下,使用浏览器观察的效果。在图中,左侧使用线条表示了各个项目的构成。实际上图中显示的就是前面的图在不使用任何CSS样式时的表现。
![网页设计流程-html](http://learning.artech.cn/uploads/blog-images/html.png)
提示读者一点,任何一个页面,应该进可能保证在不使用CSS的情况下,依然保持良好结构和可读性。这不仅仅对访问者很有帮助,而且可以有助于你的网站被Google、百度这样的搜索引擎了解和收录,这样对于网站提升访问量可是至关重要的。
在设计任何一个网页之前,都应该先有一个构思的过程,对网站的完整功能和内容作一个全面的分析。如果有条件,应该制作出线框图,这个过程专业上称为“原型设计”,例如,在具体制作页面之前,我们就可以先设计一个如下图所示的网页原型线框图。
![网页设计流程-原型](http://learning.artech.cn/uploads/blog-images/prototype.png)
网页原型设计也是分步骤实现的,先把一个页面分为若干个大部分,然后分别逐步细化。
如果是为客户设计的网页,那么使用原型线框图与客户交流沟通是最合适的方式,既可以清晰地表明设计思路,又不用花费大量的绘制时间,因为原型设计阶段,往往要经过反复修改,如果每次都使用完成以后的设计图交流,则反复修改需要大量的时间和工作量,而且在设计的开始阶段,往往交流沟通的中心并不是涉及的细节,而是功能、结构等策略性的问题,因此使用这种线框图示非常合适的。
这里向读者推荐一种绘制圆形线框图非常方便的软件——“Axure RP”,这个软件是专门用来作原型设计的,而且可以方便地设计动态过程的原型,读者有兴趣可以实践一下。这个软件的网址是:http://www.axure.com/。这个软件目前没有中文版。
如果没有Axure RP这样的软件,普通的绘图软件,例如微软公司的Visio,Adobe公司的Fireworks、甚至Photoshop等软件,都可以胜任。
在与客户讨论,确定了原型以后,可以进行实际的页面方案设计了,这一步通常使用Photoshop或者Fireworks等软件完成。如下图所示的是在Fireworks中的效果。
![网页设计流程-fireworks](http://learning.artech.cn/uploads/blog-images/fireworks.png)
进行下一步工作。
下面应该进行的步骤是页面布局这一步骤,任务是把各种元素放到适当的位置,暂时不用涉及非常细节的因素。
具体来说,首先应该对页面的整体进行一些设置,把个各种浏览器中默认值不同的元素属性都设置为统一的值等等,以保证这些内容在各个浏览器中有相同表现。
接下来就依次对网页的各个部分进行布局设置,入页头、中间部分、页脚等等,此时的主要任务是把位置定好,例如下图中,可以看到,网页中间的内容已经实现了两列布局的效果,而具体的样式细节还没有设置。
![网页设计流程-布局](http://learning.artech.cn/uploads/blog-images/layout.png)
在各个部分布局完成以后,就开始对每个部分依次设置视觉细节效果,例如在页面的页头部分,就可以如图下所示地在Fireworks中进行切片,把需要的图像切出来。
![网页设计流程-切片](http://learning.artech.cn/uploads/blog-images/slide.png)
在例如,在网页右侧的圆角框,也是在这一步中实现的,如下图所示。
![网页设计流程-圆角](http://learning.artech.cn/uploads/blog-images/rounded.png)
此外还有很多细节都需要仔细设置,例如圆角框中的目录列表、搜索表单等等,这些设置就都是只涉及局部的样式了。从图中可以看到,到这里已经接近胜利了。
进行下一步工作,也是这个系列的最后一次内容了。
接下来我们进行一些交互性的动态设计,这里主要是为网页元素增加鼠标经过时的效果。如下图所示,在鼠标指针经过主导航栏和次导航栏的时候,相应的菜单项会发生变化,鼠标经过“登录帐号”或者“购物车”图像时,颜色也会变浅,这都是为了提示用户所进行的选择。此外,当鼠标经过图像时,图像周围的边框也会发变化。
![网页设计流程-交互](http://learning.artech.cn/uploads/blog-images/hover.png)
到这里,这个页面的静态设计就算完成了,接下来还需要进行相应程序的开发,无论是由程序员进行开发,还是使用CMS系统,都应该相关的开发人员来继续工作了,设计师的工作到这里基本就结束了。
希望读者可以通过5天来的讲解,对网页设计从无到有,从策划构思到设计实施,有一个比较完整的概念了!
最后,谈一谈使用这种方法设计出来页面具有哪些优点。做到这里,读者可能还没有完全意识到使用这种CSS进行布局的优点。这种布局方式的最大优点是非常灵活,可以方便地扩展和调整。例如,当网站随着业务的发展,需要在页面中增加一些内容,那么不需要修改CSS样式,只需要简单地在HTML中增加相应的模块就可以了。
如下图所示的就是对页面扩展了内容以后的效果,在“主要内容”部分,增加了“特色促销”和“优中选优”两个模块,再右侧栏中增加了“送货服务”和“热门信息”两个模块,在前面的页面基础上,增加这些内容之需要几分钟的时间就可以完成。
![网页设计流程-增加模块](http://learning.artech.cn/uploads/blog-images/add.png)
不但如此,充分设计合理的页面,可以非常灵活地修改样式,例如,只需要将两列布局的浮动方向交换,就可以立即得到一个新的页面,如下图所示,可以看到,左右两列交换了位置。
![网页设计流程-交换顺序](http://learning.artech.cn/uploads/blog-images/col-order.png)
试想如果没有从一开始就有良好的结构设计,那么稍微修改一下内容都是非常复杂的事情。如果读者曾经使用表格进行页面布局,就会发现这里列出的优点了,对于表格布局的网页,这些都是不可想象的。
好了,5天的讲解到这这里就全部完成了,希望通过以上的介绍,能够给读者在设计思路上有一些帮助!