web设计流程有哪些-响应式设计流程-注意什么

Web前端页面的设计流程：确定网站主题——网站整体规划——整合素材——网站开发与动态效果。如果想具体了解web设计流程有哪些，那不妨接着往下看吧!

1、确定网站主题

每个网站都有自身以及对用户的定位。针对网站定位确定网站的主题是整个网站运营的核心。

一般从网站建设的目标、网站用户群体、网站产品内容以及企业服务四个方面确定网站主题。此外还需要注意，每个页面不但要承载整体企业的定位，同时还要侧重其中某一个特定主题。

2、网站整体规划

为了提高用户体验以及提高网站在搜索引擎收录率，在网站建设初期建议能够理清网站机构，增加不同页面之间的关联性，从而更好规划页面的布局以及网站功能。

一般情况下，产品经理在设计网站初期就会提供完整的业务逻辑图，设计师和前端工程师根据业务逻辑架构完成相关页面的设计开发。

需要重点考虑的内容包括：网站的功能、网站的结构、拌面布局等等。尤其在网站功能需求较多的情况下，网站整体规划更加重要。

3、整合素材

在网站整体架构完成后，就可以开始整合收集素材了。网站开发和网站内容筹备同步进行，可以大大提高网页开发的效率。

主要收集的素材包括文本素材(一般由公司内容运营提供相应的文字素材，需要注意的是，这些文字素材的准确性以及版权问题)、图片素材(现在很少有纯文字性的网站，往往需要大量的图片素材，甚至还有视频素材等)。

4、网站开发与动态效果

前端页面开发主要用到HTML、CSS、JavaScript技术。在确定网站结构以及页面设计图齐全的情况下，前端开发工程师就可以进行页面开发了。这个过程中主要完成页面搭建以及动态效果实现。

第一步：确定需要兼容的设备类型、屏幕尺寸。

通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。 设备类型：包括移动设备(手机、平板)和pc。对于移动设备，设计和实现的时候注意增加手势的功能。

 屏幕尺寸：包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。

需要考虑的问题：某个页面进行响应式设计时其适用的尺寸范围是哪些?比如，1688搜索结果页面，跨度可以从手机到宽屏，而1688首页，由于结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的首页。

结合用户需求和实现成本，对适用的尺寸进行取舍。比如一些功能操作的页面，用户一般没有在移动端进行操作的需求，没有必要进行响应式设计。

第二步：制作线框原型。针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。

第三步：测试线框原型。将图片导入到相应的设备进行一些简单的测试，可帮助我们尽早发现可访问性、可读性等方面存在的问题。

第四步：视觉设计。注意，移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。

第五步：前端实现。与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。

1、网站设计内容问题

内容是所有网站的灵魂，也是客户关心的东西，打开因特网看看企业网站，我们很容易发现，大多数中小企业网站栏目划分趋于一致：公司简介、产品介绍、联系方式等，在版式设计上也基本上是上下分栏、左右分栏等方式，在内容上要从客户考虑，要了解客户想从你页面上了解些什么，总之要贴近客户。

2、网站设计技术问题

首先应该说明的是，我们并非鼓动企业在自己的网站中加大技术含量。实际上，最重要的是所使用技术在多大程度上实现了预期的功能，或者说所要的功能需要什么样的技术实现比较经济划算。

而我们在与企业接触中，常常碰到这种情况：网站中使用了先进的技术，当然进行了大笔的投资，但实际上所实现的功能通过其他方式，很低的投入就可以实现!但是企业并不了解这些。

3、网站设计交互问题

您的网站是否实现了与客户的交互，在多大程度上实现了这一功能，值得您仔细考虑，在我们接触的客户中，甚至有的客户抱怨：他的信箱至今还没有收到mail!经过我们的检查，是因为留言簿中有关信息提交的设置有问题!使得与客户之间的交流出现很大的问题，这也是很多企业应该注意的问题。

(1)对每一个超级链接点击之后采用新开窗口还是直接跳转，必须认真对待。如果用户点击一个link之后是要放弃当前页面开始新的体验，则应用直接跳转。

如果用户点击link是要了解更多的信息，但是当前页面的信心仍然有用，则应新开窗口。

(2)在每一个用户可能需要帮助的地方提供帮助信息或帮助按钮。完善的帮助系统是一个产品，网站成功很重要的因素。