WEB前端设计之我见

郭琳

摘 要：近年来网页制作技术突飞猛进地发展，各种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进行说明它们之间的关系。

用一句话来概括就是“两个构成+3个设计=设计思想”。

而HTML、DIV、CSS和Javascript的作用可以用图2来说明。

用简单的一句话来描述，它们的作用就是“按块就搬、美化外观、实现交互”。

（2）可选：Bootstrap、FlatUI、Ajax、jQuery等。

Bootstrap，是前端框架。它基于HTML、CSS和Javascript，方便易用，使前端开发更加高效。其新颖的布局方法和容易上手的组件和插件尤为实用，在不同客户端的兼容性极佳。Bootstrap已经成为现在前端框架设计的主流技术，值得掌握。

FlatUI是iOS上易用的扁平风格效果，模拟iOS 7的风格，是受欢迎的免费的WEB界面工具组件库。

Ajax和jQuery同JavaScript一样，用于完成WEB前端页面交互性，三者具体介绍详见设计流程部分。

1.2 设计工具

（1）必备：Photoshop、Dreamweaver、Flash、Firework、Illustrator。

（2）可选：Axure、LayoutIt、Kuler等。

必备的工具中Dreamweaver和Flash一个是叠码测试工具，一个是动画工具，分工明确。值得比较的是Photoshop和Illustrator，Firework和Axure。

具体功能比较如表1和表2。

由表1可见，在矢量图绘制、输出上Illustrator占优势，而在图像处理方面Photoshop占优势。所以在WEB前端设计中，logo、图标和Flash动画原型的设计推荐使用Illustrator，其矢量绘图工具丰富，而且矢量图也比位图在制作动画时更节省存储空间，有利于动画的优化输出，从而降低网页载入的时间成本。

由表2可见，Firework作为传统的网页三剑客之一，其功能强大性方面是毋庸置疑的，在网页布局、GIF动画和优化输入及与Flash等Adobe系列软件衔接方便都表现出色，但与Axure比较起来，其在方便易用和交互性演示方面还是略显逊色。在具体设计过程中，可根据不同的需要选择合适的工具。

LayoutIt是Bootstrap的可视化在线布局系统，其可通过简单的拖拽完成布局设置、基本CSS、组件和交互组件的快速布局，并可对已布局好的网页进行预览、原码下载和保存。LayoutIt的好处就是按布局放代码块，然后再根据实际需要修改代码，节省了大量的垒码时间。

Kuler是Adobe的一个实用扩展插件，用户可以很容易在完整安装的Flash、Photoshop等软件中找到它。Kuler是一个关于色彩和灵感的在线社区，设计爱好者们在这里探索、创建和共享颜色主题。Kuler的界面如图3所示。

另外，很多可以快速上手的前端页面生成工具也很吸引人们的注目，它们以新颖的设计理念、丰富的模板库和良好的客户端兼容性广受用户的欢迎。

2 WEB前端设计思想

2.1 遵循设计的四大基本原则

无论是平面设计还是WEB前端设计都是设计，而放之四海而皆准的设计原则是不变的。只要明确设计的四大基本原则并会灵活使用，设计质量一般都会得到基本保证。

2.1.1 亲密性

相关类目放在一个视觉单元内是必须的。这样做有利于理顺浏览者的思路，避免混乱。

2.1.2 对齐

整齐有序的内容有得于建立页面内容间的视觉联系，便于浏览者浏览，而且给人以清晰、清爽的外观印象。

2.1.3 重复

主要是指设计中视觉要素的重复。例如颜色、形状、材质、空间关系、线宽、字体、大小和图片等。使设计既增加了条理性，风格上也趋于统一。

2.1.4 对比

对比可以避免页面上的元素太过相似，并突出页面要强调的重点内容，从而使页面达到引人注目的最终目的。

2.2 注意WEB前端设计与出版物设计的差别

（1）为统一WEB前端设计风格，重复原则往往更为有效。主要体现在配色方案、字体和组件等方面，CSS在这里将发挥巨大的作用。

（2）不要让访问者页面上“滚来滚去”，页面，特别是访问者进入的第一页面，保证其页面内容的精简、完整性是很重要的。

（3）增加可读性。行宽要更小。字体的选择上也要选择易读性强的字体。例如，中文正文一般采用宋体或幼圆。

（4）精简性。界面设计应尽量简洁，便于具体功能实现。

3 设计流程

3.1 了解用户需求，形成设计草图

在设计之前应根据用户的具体页面风格要求和功能需求形成设计草图。为避免重复工作，此处草图应进行反复推敲，在保证简洁美观的前提下，还要考虑后台开发人员的开发难度。

3.2 形成设计图

可利用专业的设计软件来实现，例如PS、AI等，保证尺寸精度和颜色的准确度并细化到位。对颜色、字体、布局最好形成标准化的表格、图解作以说明，方便后续CSS文件的编写。然后辅助以FW、Axuer之类的软件可以选择生成切片、HTML页面和CSS文件，不过CSS文件中的样式名都是默认生成的。

3.3 植入框架，统一外观

（1）植入框架。

根据切片的尺寸利用DIV进行布局，而使用Bootstrap前端框架则更为简单，其可以检测不同的客户端设备进行自适应的布局，而它的网格系统也使用户浏览页面得到更好体验的同时，也降低了用户端的负载。

媒体查询代码示例：

@media （min-width： @screen-sm-min） { … }

自适应布局示例：

…

同时，Bootstrap丰富的布局组件和插件可以快速完成前端页面的交互性布局需要。

（2）统一外观。

这里的统一指的是通过CSS文件编写或修改使前端各页面在文本、颜色、页面布局、组件风格等方面达到外观上的统一，例如Header、Footer等部分。

3.4 体现交互性

实现交互性的主要手段的有JavaScript、Ajax、jQuery。下面将3种技术进行对比。

（1）JavaScript是一种网络脚本语言，被用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

（2）AJAX即Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种组合技术。它可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。

（3）jQuery是一个JavaScript函数库，极大地简化了JavaScript的编程。它包含以下几项特征。

①HTML元素选取。

②HTML元素操作。

③CSS操作。

④HTML事件函数。

⑤JavaScript特效和动画。

⑥HTML DOM遍历和修改。

⑦AJAX。

⑧Utilities。

由此可见，jQuery实际上是完成了对JS的封装，使JS和Ajax使用起来更加方便。

在实际WEB前端设计中，设计者可以根据用户具体需求使用上面的技术。

3.5 完成兼容性

造成WEB前端页面不兼容的本质原因是不同浏览器内核解析同一段代码的方法不一样。比如说margin和padding参数，在不受控制的情况下会被解析成不同的默认值，解决的办法就是让它们都固定下来，例如，都设置为0；再比如说由于为块设置了float而带来的一系列问题等等。解决的办法就是通过不断的摸索，掌握清楚主流浏览器的解析习惯，并通过一些有效的代码（例如CSS Hack）去规避兼容性问题，还要学会利用工具（例如BrowserShots）去测试。

但是，往往严谨的前端设计师很少会遇到棘手的兼容性问题。可见，设计没有捷径可言，只有以严谨认真的设计态度，才能得到令人满意的页面。

3.6 SEO优化

SEO（Search Engine Optimization），即搜索引擎优化，也是WEB前端设计要考虑的重要环节。Head、标题、图片名称及alt还有黑体文字等要素在设计时就要做好文章，不要等到最后完成页面时再去优化。SEO一定要变成设计时的潜意识。

4 结语

WEB前端设计看似简单，实则不然，不仅需要充分了解用户的诉求，还要运用有效的设计思想和设计手段，遵循严谨的设计步骤，秉承严谨的工作作风和不断学习的精神，才能达到预期的设计目标。

参考文献

[1] （美）Robin Williams.写给大家看的设计书[M].3版.苏金国，刘亮，译.北京：人民邮电出版社，2009.

[2] （美）David Cochran，Ian Whitley，著.Bootstrap实战[M].李松峰，译.北京：人民邮电出版社，2015.

[3] 金乌.Axure RP7网站和APP原型制作从入门到精通[M].北京：人民邮电出版社，2015.