全能网页设计师精炼手册

本书通过对网页设计的核心基础进行讲解，使读者全面了解和掌握作为一个网页设计师应掌握的排版、字体、色彩、光影、交互等基础知识，同时通过与实际案例的结合了解设计理论知识如何应用到实际设计工作中，并更好地将这些理论升华转化为判断标准和经验，从而成为一个具有全面应对各类风格和技法的优秀网页设计师。
全书分为4章，第1章（两节）阐述本书的思路和逻辑；第2章（5节）着重介绍核心基础，对排版、字体、色彩、光影、交互等进行详细讲解，附有大量的案例，并在每节后附有应用练习；第3章（6节）为实际作品案例，通过详细的步骤阐述企业站、扁平类、版式型、GUI、场景合成、UI等实际案例的制作过程，并在每节中附有大量的设计思路和过程，起到举一反三的作用；第4章（3节）通过日常的工作经验给新手设计师提供3个良好的建议。
本书适合有志成为优秀网页设计师的入门读者、陷入瓶颈的中级设计师，也适合作为高等院校设计类、交互类等专业学生教材，同时可供对网页设计有需要了解和兴趣的相关行业人员参考。

　　谢思靖，现任全速网络（西安）创意总监

　　曾在DDBIM2.0新意互动等多家国际4A广告公司担任资深美术指导，服务过进口大众、KIA、海尔、杜蕾斯等国际一线品牌。荣获过各类广告以及设计类奖项，擅长创意概念、数字营销、用户体验、美术方向、美术执行，对UI、平面、网页有深刻的理解和认知。

　　安维堂，现任全速网络（西安）创意组长

　　毕业于安徽工业大学工业设计专业，拥有丰富的互联网视觉设计经验。服务过京东、天猫、淘宝、支付宝、阿里金融、招商银行等企业和公司。设计作品被国内知名设计平台站酷、68design、互动中国等收录和推荐。曾受邀参与UISDC设计讲座。

★★ 全新的设计理念与表现方法、一线设计师的成功商业作品、各类风格的UI设计与实现过程、全方位了解图标、按钮、界面、字效整体设计的制作方法，让你零基础无障碍通往成功网页设计师之路。
★★ 滴滴CDX 高级设计总监程峰、5Plus创始人（知名设计师）冯铁、优设哥张鹏、DDB China group 执行创意总监陈楠、VML IM2.0 创意总监金松华等联袂推荐！

　　作为一个“坏学生”能够有机会去写书去影响别人，也是一件非常有压力的事情。

　　古人讲究“白纸黑字”“一字千钧”，比起在网上发表的言论以及话语，书上的每一句话都是要负责任的，以至于我面对“前言”这两个字的时候发呆犹豫了很久，哪怕我自认为还是抬笔如飞的人。

　　我是作为一名以网页设计师这个职位入的行，经历过网络媒体、互动广告公司、4A公司，从一个设计师，到美术指导，再到总监。除了网页设计以外，在广告、营销、UI、平面、交互和文案上也有一定的经验和心得。

　　这其实不是一本单纯的网页设计书

　　拿UI、平面、网页这三类设计类型来说，版式、元素、字体、光影、形式、颜色、调性，这些是构建这三者最基本的条件和形态，信息传递又是这三者最根本的目的，我把这些归纳为一个平面UI网页设计师的核心知识。

　　而我们在撰写这本书的整体思路，就是系统详解设计师的核心知识，然后实践到不同类型的实际作品案例中，展现出这些核心知识是如何应用在不同设计作品当中的，系统地展现出设计理论和设计作品之间的关系。

　　设计是一门杂学

　　著名相声大师郭德纲曾经说过一句话，“相声演员的肚子里是杂货铺。”

　　其实对一个优秀设计师来说同样是这么一个道理。

　　我第一份工作是在腾讯的一个地方站，在那个年头设计师只会设计是不行的，还得会切图、flash，虽然以现在的角度来说很不科学，但是在那段时间让我对动效节奏等有了一定的基础和把握。

　　之后我进入一家互动公司任职，那时候接触了socail，接触了互动广告，接触了产品，用户体验，开始想一些互动创意以及和产品经理一起规划一些产品的原型。

　　随后在4A广告公司任职，虽然当时是在4A的互动部门，但是因为整合营销，我也更加有机会了解传统广告，以及整合营销，明白了什么是bigidea，什么是传播概念，什么是keymessage，也更加明白我们做的这些设计在营销传播上处于哪一个环节，有什么样的功能。

　　当你对这些看似与设计无关的东西了解足够多的时候，你才会更加理解设计的意义，才会明白自己的设计有什么样的功能和意义。

　　跳脱出设计来说，无论是UI、网页、平面，其实都是整体品牌营销中的一部分。

　　就拿一个银行品牌推广自己来讲，需要TVC、平面这种传统广告去告诉消费者我是谁，我值得信赖；需要通过品牌网站、互动网站H5让消费者更好、更细致地了解自己的优势和业务；现在还需要去搭建自己的产品APP更好地服务于自己银行的现有用户、提升资金流动率等。以上每一环节其实都必不可少，并且都是同等重要的。单纯从设计的角度讲，UI、平面、网页这三者没有什么特别界限。

　　这是我理解的一个优秀设计师的知识构架。

　　下面举一些例子来展示这些核心知识是如何应用在不同设计上的。

　　例1：渐变色的应用

　　UI

　　平面

　　例2：配色

　　UI

　　网页

　　例3：线条塑造图形的手法

　　Logo

　　Icon

　　例4：版式、图片处理手法

　　UI

　　网页

　　例5：构图、结构、浏览变化节奏

　　网页

　　画册

　　例6：形式元素类型

　　UI

　　极简海报设计

　　上面就是设计师核心知识在不同领域的应用，大家看到这里不知道是不是有所启发？

　　如果你有过硬的核心知识储备，只要稍加转化其实就可以在不同领域的设计上游刃有余。

　　在看到上面这个画册时，或许你的脑子里能够感受的已经不仅仅是一个画册，而是一个网页或者一个UI界面的形式。积累这些设计中共生的这部分核心知识，而不是一眼只盯着自己的领域，网页设计只看网页作品，平面设计师只看平面作品，其实这些都是收益很小的事情。

　　无论是文字、网页、UI、平面设计还是视频Video，我们做的这些设计与创作的最根本意义都是一样的，就是通过设计和创意与用户交流我们想要传达的信息和内容，由于信息和内容不同，我们选择合适的渠道和方法。

　　所以好的网页设计师去做平面，又或者好的UI设计师去做网页，很多上手很快而且能够很快地提到一定的高度，原因在于这些优秀的设计师在核心知识的积累上本身就是很丰富的。

　　本书除了案例以外对核心知识也进行了大量的阐述，所以希望大家不要把这些信息单纯停留在网页的层面，而是将这些核心知识运用到更多、更广的设计中。

　　这是一本有很多鸡汤的设计书

　　人的成长与进步和自身的努力是分不开的，我也很庆幸自己有好运气遇到很多对我有帮助的人，听到很多激励我一直前进的话，这才使得今天我有机会去做这件事，去写这本书，同时在这本书中我也会为大家分享这些心灵鸡汤的小故事。

　　有时候我会觉得信念比一些教程干货更加重要，因为这些信念会驱使人们进步和成长。

　　这本书适合我吗？

　　刚入行的时候看过一本设计书叫做《写给大家看的设计书》，时至今日偶尔翻阅依然觉得受益良多，所以我觉得我们现在撰写的这本书依然是一本写给大家看的设计书，书中的理论知识让入门设计师可以了解到设计理轮是如何应用在实际设计工作中，而这些理论知识同时也可以让有一定经验的设计师能够更好的对理论知识进行升华转化为判断的标准和经验。而实际案例部分我们也是挑选了一些有一定执行难度的案例进行拆分分解，用最简单的方法告知如何处理每一个步骤和细节。

　　因为网页、UI、平面共有的核心知识的存在，无论处于什么阶段，专注于什么领域的设计师，如果你用心看这本书一定能让你吸取和获得有用的知识和内容。

　　素材下载

　　为防止随书光盘因夹带在销售过程中损坏，本书将同时制作网盘文件供读者下载。

　　下载网盘文件的方法如下：

　　（1）下载并安装百度云盘客户端（请根据不同系统下载安卓、iPhone、Windows版或Mac版，下载网址为http://pan.baidu.com/download）。

　　（2）注册并登录账号。

　　（3）利用手机扫描二维码，进入文件分享地址，将文件转存到自己的百度网盘中（因文件多为图片和PSD格式并且内容较多，推荐在计算机端下载并阅读使用）；也可直接输入分享的网址进行下载，网址为http://pan.baidu.com/s/1pKYxvF9密码为ckht。

　　（4）扫描下方第一个二维码进入微信公众号——贪才好设，扫描第二个二维码加入“贪才好设设计分享群”，我们将定期推出各种设计分享和免费设计公开课。扫描下方第三、第四个二维码也可获得所需素材文件。

　　友情提示：若网盘链接地址失效，请通过以上官方QQ群索取光盘，如果QQ群已满，请发送邮件索要新QQ群账号和网盘链接。

　　感谢您选择了本书，希望我们的努力对您的设计和工作有所帮助，也希望并诚恳地期待您对本书提出宝贵的意见和建议。

　　微信公众号：贪才好设

　　官方QQ群：贪才好设设计分享群162903032

　　官方邮箱：[email protected]

　　编辑邮箱：[email protected]

　　作者邮箱：[email protected]

第1章贪恋之徒001

1.1我们面临的发展2

1.2为什么要说全能型4

第2章必备之才005

2.1设计的第一堂课排版6

2.2提升细节的法宝字体23

2.3感觉要靠积累色彩38

2.4塑造画面的基础光影52

2.5引诱整理的艺术交互65

第3章好学之人075

3.1网页设计的第一步

品牌网站建设76

3.2将插画带入设计

插画扁平风页面91

3.3质感GUI我也要玩一点

质感式游戏页面设计108

3.4合成魔术手

场景打造合成型页面119

3.5从平面中获取灵感

版式型页面设计135

3.6缩小的网页设计

移动端UI设计145

第4章设技之道161

4.1不同创意设计公司的区别162

4.2作为设计师，在面试时到

底是在面试什么164

4.3设计师的一些好习惯167