前言

在一个优秀的网站中，源源不断的信息内容是其赖以生存的基石，方便快捷的交互是能留住用户的前提，清晰准确的视觉传达是快速引起受众兴趣的着力点。本书属于网页前端设计的范畴，它涵盖了网站信息架构、界面交互与视觉表现等多个方面。笔者将网页前端设计的理论知识与真实项目相结合，通过重组、分类的方式，以实践工作流程为切入点，由浅及深地剖析了网页前端设计中的主要工作环节。

一、写给初学者的建议

初次接触网页界面布局设计时，学习者的问题多集中在以下两方面。

（1）抓不到学习重点：网页前端设计要学习的知识点太多了，不知道从何下手。

（2）技能过于单一：关于网站的基础理论知识学得不够扎实，大量精力花费在视觉设计或是前端代码的编写上。

以上两个问题，是由初学者未能建立网页前端学习体系，没有找到一个适合自己的学习方法所造成的。建议初学者结合本书，从以下三个方面来学习网页前端设计。

1.养成主动了解业内资讯的好习惯

做个有心人，如关注业界内知名的微信公众号、微博大V号，每天抽出固定的时间，比如20分钟，尝试用所学的理论知识对其界面的优劣予以分析。

2.用全局的观念学习网页界面设计

网页前端设计师一般都出自艺术设计专业或计算机专业。网页前端设计师不仅要有扎实的理论知识，还要能打破专业壁垒，既有专业特长，也能通晓网页设计上下游的其他工作技能。

3.熟练软件，勤于练习

熟悉网页前端设计过程中会使用到的软件，尽可能多地去参与真实项目。网页界面布局中常用的软件如下。

（1）思维导图类软件：如XMind或MindManager等，可帮助用户梳理信息功能架构。

（2）界面标注类软件：如Markman或PxCook等，可帮助用户完成界面视觉信息的数据标注。

（3）视觉设计类软件：如Adobe Photoshop、Adobe Illustrator等，可帮助用户完成视觉设计。

（4）交互原型软件：如Axure（Mac计算机推荐使用Sketch），可帮助用户快速完成界面交互原型。

（5）前端开发软件：如Sublime或Adobe Dreamweaver，可完成前端HTML、CSS、Java Script脚本语言的编写。

二、本书特点

1.分篇章，帮助读者建立网页前端设计的思维体系

本书从网站的设计制作流程出发，分为基础篇、界面交互篇、视觉表现篇和综合案例篇4部分，难易程度适中，以帮助读者循序渐进地学习网页前端设计。

在基础篇中，带领大家认识网站相关的基本概念，了解网页界面设计中所涵盖的内容；在界面交互篇中，引入用户体验设计的概念，讲解网站的信息结构的概念、组织方法和类型，介绍界面布局的原理和类型，着重讲解从信息架构到网站各个页面交互原型呈现再到每个页面布局类型的选择；在视觉表现篇中，详细介绍了网页中每个视听元素的特征和时下主流的视觉风格，并利用视听元素有效、有层次、和谐统一地展现网站背后企业的形象风格；在综合案例篇中，简要介绍了前端代码的编写规则，运用前端代码将网页视觉效果图通过静态页面来呈现。

2.理论与实践案例紧密结合，手把手教你如何设计制作网页布局

在每章的最后一小节都有该章节所对应重要知识点的实践案例，且案例均为网页前端设计常见类型，如Banner设计、登录界面设计、活动页面设计、食品公司网站的界面改版设计、天猫商城店铺界面设计、早教机构网站界面设计、运动品牌首页幻灯片效果的制作及餐饮类网站关键页面的前端设计，笔者将手把手教你如何实现从网页布局到视觉表现。

3.扫码即可学习微课视频

书中的每一个案例都配有微课视频，大家可扫描二维码进行查看。每一个微课视频都由笔者用心录制和剪辑，希望能够为大家提供帮助。

三、感谢

特别感谢UEmo/UElike/UEhtml创始人、著名设计师韩雪冬老师（北京优艺客文化传播公司创始人）悉心审查书稿，并提供了第9章、第10章的案例素材和方案（来源网站：魔艺极速建站）。还要感谢在书稿撰写过程中帮忙整理材料的朋友白雪、徐海婷等。

编者

2017年11月