郭琳

摘 要：近年来网页制作技术突飞猛进地发展，各种WEB前端设计技术与工具层出不穷，如何做到设计与技术完美结合，合理利用现有工具提高设计的质量和效率，是专业技术人员不断探讨的问题。该文结合笔者自身多年教学和实践经验，从WEB前端设计的基础知识储备、设计工具选择、设计思想、设计流程等几个方面，从实用性、易用性角度出发进行了较为全面地阐述。

关键词：WEB前端设计 Bootstrap Axure Kuler WEB前端设计流程

中图分类号：TP31 文献标识码：A 文章编号：1672-3791（2016）05（c）-0007-04

通过多年教学和项目实践发现，任何一个学科、一门技术都不是单一知识、单纯技术的罗列。WEB前端设计也是如此，它不仅需要设计人员具备丰富的设计知识储备，还需要通过科学合理的实施步骤及高效的工具将这些设计思想付诸于实践。工欲善其事，必先利其器。不妨从WEB前端设计所需要的知识储备情况和使用工具开始说起。

1 WEB前端设计知识储备与工具

1.1 知识储备

（1）必备：平面构成、色彩构成、字体设计、标志设计、版式设计、HTML、DIV、CSS和JavaScript。

其中，平面构成、色彩构成、字体设计、标志设计和版式设计是做好WEB前端设计的基础理论。都说人是视觉动物，没错，往往人们对第一次访问的网页的关注时间仅为3～10 s，设计得好的网页能在短时间内快速载入并从视觉和内容两个方面吸引浏览者，这样才能让提升网站的点击率和关注度。

同时，HTML、DIV和JavaScript则是将设计好的素材、整理好的文字进行摆放归位和进行动态交互的基础。可以用图1和图2进行说明它们之间的关系。……