网页设计师从早年的综合性工作中分化出来，形成了相对独立的专业岗位，网页设计也不再是单纯的软件应用，它衍生出了许多独立的研究方向，当网站策划、交互体验都逐渐独立之后，形式感的突破和表现成为网页视觉设计的一项重要工作。随着时代的发展，网页设计更接近于一门艺术。网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利，而这些也为视觉设计师提供了更多表现的空间。另外多终端用户屏幕（主要是各种移动设备，手机、平板等）的出现，它让网页视觉设计师不得不重新定义原有的视觉规范。这些变化都趋使着设计师对新形式的渴望与进一步的探索。
　　本书就是这样一本速食的设计创意与技巧手册。本书可以帮助有一定基础的网页设计初学者或在职者，在遇到设计创意瓶颈时，能够在较短的时间内解决设计上的创意和视觉形式感的问题。不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。
　　本书读者是网页设计师，包含狭义的、广义的、“圈养”的、“野生”的，以及网站开发其他环节需要了解网页视觉设计或与之协作的人员（如用户体验设计师、前端页面开发人员等）。

网页设计图书还大都停留在10年前的水平上，远远落后与我们的当前设计真实水准，个中缘由这里不深究。老编认为，这本书是13年策划生涯中遇到的最好的一本网页视觉设计书，设计是前沿的设计，文笔是通透的文笔，作者小彦文武双全，德才兼备，乃设计师中的韩寒，作家中的林志玲。这本书，错不了。　　清华大学出版社 栾大成网站蓝图--Axure RP高保真网页原型制作（配光盘）（高效、低成本制作足以乱真的网站模型！）

　　写这份前言的时候，我并不太确定这本书是否能够出版。不论结果如何，都十分感谢策划大成的鼓励，让我一直坚持整理完成。

　　2011年6月因为几篇关于[快速打造网页形式感]的系列文章得到了许多同行的关注，大成在站酷上找到了我，并无写书经验的我，设想着只需简单地将几篇现有文章集合成册就可以交差，于是便欣然答应了，但后来发现，完善工作并不比最初的起稿来得容易……
　　首先，对于网页设计来说，不论是技术还是审美都是一个不断更新迭代的过程，当时认为不错的作品现在看起来并不十分有特色。特别是对专题的形式感来说，布局的形式感在于它的出其不意，如果使用过于频繁也便失去了它的效果。
　　其次，由于个人作品的限制，许多案例的方法上值得举证，但终合评定上来说，它不算是一个完美的作品。
　　第三，话语空间，网络上的文章如果发现问题，发布后也能及时更正，而纸质出版是一次性的成稿，出版后的修正难度就很大。
还有，在整理过程中，不断出现新的想法，所以不断添加新的内容，逐渐发现，原来在网络上与大家分享的文章在本书中所占的比例，几乎可以忽略不计了……
　　最重要的一点，纸质出版物的图片版权比网络文章限定更多，在案例的选择上也很谨小慎微。加上日常工作的压力，这一系列问题也让我在过程中多次打了退堂鼓。到这里，还是想再次感谢大成一直的鼓励。

　　老编大成的插队回复：感谢小彦的信任，不过不认同“没编辑就没这本书”的说法，只不过大家都觉得出版这本书是件有意义的事情，并肩作战到底罢了。从编辑这个门外人来看，国内网页视觉设计与10年前相比，已经有了翻天覆地的变化，很多网页作品的视觉设计、体验设计已经是国际一流水准，但是目前国内原创网页设计图书还大都停留在10年前的水平上，远远落后与我们的当前设计真实水准，个中缘由这里不深究。老编认为，这本书是13年策划生涯中遇到的最好的一本网页视觉设计书，设计是前沿的设计，文笔是通透的文笔，作者小彦文武双全，德才兼备，乃设计师中的韩寒，作家中的林志玲。这本书，错不了。

一定要先看看这里
　　
　　为了能够更好地定位和阅读本书，在大家阅读正文之前，先罗嗦两句。网页设计包含着很多方面的内容：网页前端开发、网页平面设计、界面UI设计、软件使用、用户体验……，本书作为一本速食的网页设计技法手册，它很难覆盖所有的网页设计领域。单从视觉设计来分，就包含了：UI设计、网页图标设计、平面设计、色彩搭配、PS技能表现等等。而这本书主要对哪些内容进行了介绍，它又适合怎样的人群呢？

为什么就谈形式

　　一是行业分工的细化。网页设计师从早年的综合性工作中分化出来，形成了相对独立的专业岗位，网页设计也不再是单纯的软件应用，它衍生出了许多独立的研究方向，而形式感的表现则成为视觉设计师在主要日常工作之一。这也预示着网页设计行业的“改版”。只有在专业领域上更强，才能强强合作从而帮助其他具体产品的展示、营销、盈利等。

　　其次随着时代的发展，网页设计更接近于一门艺术。网页技术的发展为网页视觉艺术提供了更灵活和宽阔的表现空间，而视觉表现上的需求也推动着网页技术进一步发展。
别拿豆包不当干粮，别拿网页不当艺术！

　　网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利，而这些也为视觉设计师提供了更多表现的空间，并以此来帮助网页信息在快速阅读的今天占有一席之地。与此同时，用户对网页使用的经验沉淀，让视觉无需花更多的表现向用户告知基础交互行为，因此也可以余下更多的精力回到视觉形式上来，运用色彩和结构来更好地为网页信息服务。

　　当然矛盾是持续存在的，旧规矩的打破也预示着新规矩的开始。面对信息的泛滥，如何引起用户对当前信息的关注，网页的第一视觉在其中显得尤为重要，它同样需要形式表现的疏导和刺激。

　　另外多终端用户屏幕（主要是各种移动设备，手机、平板等）的出现，它让网页视觉设计师不得不重新定义原有的视觉规范。这些变化都趋使着设计师对新形式的渴望与进一步的探索，让我们一起来迎接吧。

我是一个被圈养的网页设计师

　　圈养当然不是什么光荣的称号，它标志着一个设计师的独立开发和制作能力。

　　圈养的设计师，大多处于分工细致的制作环境，我们首先抛开后台和前端的程序开发（因为设计和程序的分工是大部分网页设计团队的基础架构）。除此之外，一个圈养型的设计师团队，它拥有一个需求交互策划，将抽象的产品目标转化成具体活动内容，并绘制成简易的网页交互稿，网页设计通过交互稿进行页面设计。
　　其次在圈养的团队中，产品一般有一个原画团队，虽然这些原画并不直接服务于网页设计（它们可能是产品开发过程中的草稿原画文件），但还是给网页视觉表现带来很大的帮助。
　　第三，还可能有一个动画制作团队，帮助实现网页设计上的动画需求。在一些设计团队，Flash动画设计和页面设计是由同一个设计师完成的。另外，对于一些大型的门户平台类网站可能还会配有专业的用户体验和调研专员或小组等等。
　　除了以上几个大的分工之外，一些网页设计团队还有会编辑，在网页设计和程序开发完成后负责上传具体的资料内容。

　　在最初工作的几年，我也经历过设计、动画、切片三位一体的人生。在一些团队里，新来的毕业生或实习的同学会专门负责抠图、改尺寸等工作，为主设计师节省了大量的时间，当然我也同样经历过那个每日只改尺寸的设计生活。就像每个发型师都得从洗头小弟干起……。好啦，我们是设计师不是洗剪吹啦，不过话说回来，现在光剪个脑袋要你个590的也不是没有，就看我们是如何定位和看待自己的手艺啦，扯远了，回来回来。

　　话说这些受得住大团队圈养的主儿，一般有自己一定的实力，以为大团队提供着丰厚的资源，也给出了许多标准化的限定，所以有人说圈养的设计师在一些制作的独立性和创意的狼性上不如一些野生派的优秀设计师。这点我们并不否认，但圈养的方式还是成为了大部分企业的常态架构，因为它为产品的网页设计带来了可控的便捷。而大部分的设计就业者也处于这样一个有一定基础分工的设计团队中。而如何在圈养的团队中生存得更好，让我们的设计在众多的标准中脱颖而出，或许本书的一些小小方法能够对同样属于圈养的同胞有所帮助。当然，本书的读者不仅限于“圈养”设计师，“野生动物”同样适用！

这不是一本高大全的教科书

　　本书内容不涉及任何网页前端程序开发或PS操作步骤，也没有精深复杂的平面构成和色彩搭配理论。这是一本速食的设计创意与技巧手册。当然我们很难承诺仅通过本书便马上能从菜鸟转身成网页设计大师。我们应当尊重高大全的理论基础，也相信所有的成功都不是一蹴而就的。本书可以帮助有一定基础的网页设计初学者或在职者，在遇到设计创意瓶颈时，能够在较短的时间内解决设计上的创意和视觉形式感的问题。不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。

　　这是一剂速效救心丸，行气活血、祛瘀止痛。你在为网页视觉的平淡无奇感到困扰嘛？你在为大量的专题需求感到疲惫嘛？你正处于每个月那几天的创意瓶劲期嘛？圈圈叉医院佟主任，专注治创二十载，为您推荐！本书将我们日常设计思路与网页技术和审美发展结合，并将方法形象地归纳，入口易、剂量小、起效快，谁用谁知道……。好了好了，再开玩笑就要被开除了，我发誓要好好写书认真做人的。

　　如果一定要为本书做个比喻的话，“速效救心丸”这个称号应该合适。它并非复杂而长期的理论慢性治疗，它是实际工作实践的经验总结，它针对我们日常遇到的现实问题并提出解决方案。

　　由于个人的工作类型和经验的限制，书中还是有许多不完善的地方，欢迎各路同仁指正拍砖，当然，为了不被乱砖拍死，我先为自己竖几道结界防身，以备不时耍赖之需。

日常的活动专题更需要形式感

　　在解释专题页面这个概念之前，我们先来了解一下网站的分类，因为一个网站到底是重信息索引、重交互体验还是重视觉表现必须依网站的类型而定，不同的网站类型侧重点是有区别的。从网站功能上，它分为门户站、平台站、品牌站、专题站等。
　　门户站负责产品资讯建设，它拥有对搜索引擎的友好表现和完好的内容支持，它相对更注重资料的索引。
　　平台站就像一个网络市集，不论是用户端还是产品端都可以在这里传播资讯，并进行频繁的互动，它相对更注重用户的交互体验。
　　品牌站则像外交官，它主要通过视觉包装传达产品概念，随着技术的发展，Flash、HTML5、视频、多媒体因其生动的展示形式成为了品牌站的主要表现手段，对于品牌站的建设来说，设计师在创意和视觉表现上都有极大的空间。
　　专题活动站作为精准营销的重要形式，为产品的针对性推广做出了巨大贡献，早年受到带宽的影响表现形式较为单一，现在真正揭开了广告的本来面目，强烈的视觉表现成为了它最重要的特征。它就像战争中的突击队，精准、迅猛、有力！

　　门户站、平台站、品牌站根据产品的结点更换频繁，多为半年、一年甚至两三年更换一次。而活动专题因为服务于产品活动，所以上站时间都相对较短，多为一个星期到一个月左右，但在数量上较其他类型的网站相对更多。如一款进入稳定期的游戏产品，它的专题页面一个月的数量通常在4～8个左右，公测的攻坚期则更甚，通常每天同时在线的活动在五到十个左右。所以专题页面的设计是在职设计师最常遇到的网页设计类型。

　　我们知道专题的设计是通过它的精准、迅猛、有力来服务于营销活动并最终服务于产品的，所以这就需要设计师在处理这些日常专题时主题要突出、设计速度要快、视觉要惊艳。这也便是本书这十个方法所要解决的问题。本书以视觉设计中的形式感为主线，不以网站的索引设计或用户的交互体验设计为主线，是因为每个类型的网站设计的侧重点不同。关于网页的索引设计或是交互体验设计，不是本书的讲述重点，好好把视觉形式表现技巧说清晰也算是笔者有限能力下的小小愿望。

这本书适合我吗？

　　因为工作和资源的关系，书中动手制作的案例多是游戏网页，但赏析部分的案例类型较多元化。思路与方法可以举一反三、灵活运用，所以它们同样适用于其他产品的专题网页设计，一些思路和方法甚至适用于广告和海报等视觉设计。
　　所以本书的读者是网页设计师，包含狭义的、广义的、“圈养”的、“野生”的，以及网站开发其他环节需要了解网页视觉设计的人员（如用户体验设计师、前端页面开发人员等）。
　
　　作品不甚完美，权当抛砖引玉。网页设计随着带宽的提高以及技术的革新，表现形式也在不断变化，加以每个人对美丑评定不一，如果从多维度来评定书中的案例，它们可能不能算是完美作品，这里就当是为了说明技巧和方法进行的尝试“抛砖”。由于时间的关系，一些较早期的作品也多少有些不够成熟或不符合当前流行趋势的地方也请大家多体谅，如果这些方法能够为大家拓展思路并借此“引玉”也便是我莫大的荣幸了。

　　终于唠叨完了，算是能够比较安心地和您一同翻书打开话茬了。

版权声明
为了顺利展开主题，本书在编写过程中参考了并截取了部分国内外著名网站的功能和效果，在此感谢原作者的创意和设计为本书提供了参考。由于部分内容来源于互联网，因此无法一一查明原创作者，无法一一准确列出出处，敬请谅解。如有内容引用了贵机构、贵公司或您个人的作品或技术资料却没有注明出处，欢迎及时与出版社或作者本人联系，我们将会在博客或相关媒体中予以说明、澄清或致歉，并会在下一版中予以更正及补充。
　　
特别鸣谢
　　感谢所在团队腾讯TGideas一直以来的培养和帮助，书中有许多经验分享也来源于集体的智慧和团队成员间相互的灵感激发。此外十分感谢我们的Leader李若凡为团队成员争取了更多的话语权和设计空间，才使我们有机会不断突破设计的局限，让网站设计表现更加生动，并让设计有效地辅助产品的发展。也感谢每一位TGideas的成员，努力工作拼命玩，是大家的工作态度，也是团队给设计师和设计作品最好的礼物。

　　你可能已经注意到本书大体的结构，每个方法的架构基本一致，它分为“说说、想想、看看、做做”四个部分对方法进行诠释、解构、分析、尝试，在阅读过程中大家可以留心，或根据自己的需要进行针对性的翻阅。

四个结构的样式如下。
　

晋小彦
　　一个网页设计手艺人，入行早年曾与朋友一同组建工作室经历过两年不太专业的野生派设计生活，后受圈养于国内游戏公司。从三位一体的技术混沌派到团队合作的专业分工体系，从单纯的视觉执行到系统的品牌包装，从标准化的PC端网页到多样化的移动设备网页，经历了不同时期不同形式的网页视觉变化，至今仍然执迷不悟的驻足于网页设计阵营，始终关注网页形式变化，未曾改嫁。在这六年的网页设计工作中积累了一些值得分享的经验，部分文章在网络上获得了设计同行的认可和大量转发。现受圈于腾讯游戏官方设计团队TGideas 任高级视觉设计师。

01 超现实（就是抄袭现实中的物体）
02 园、方、三角（童年的七巧板也能给我们设计的灵感）
03 断臂手术（因为残缺而拥有了令人震撼的美）
04 欲擒故纵（内容多也能看起来很简洁）
05 乾坤大挪移（歪脑袋看世界果然与众不同）
06 杂志化版式（消除设计边界向杂志版式学习）
07 宽屏大视野（不做1000小切糕还给宽屏大视野）
08 文字衣橱（是时候收拾一下那长篇大论的文字了）
09 你看起来很好吃（挑动厌食宝宝们的食欲）
10 钉钉铆铆（小装饰的正能量不容忽视）
附录A 一个视觉设计师的职业世界观
附录B 网站建设新元年的设计趋势
附录C 设计中的“好有爱”

01 超现实（就是抄袭现实中的物体）
02 园、方、三角（童年的七巧板也能给我们设计的灵感）
03 断臂手术（因为残缺而拥有了令人震撼的美）
04 欲擒故纵（内容多也能看起来很简洁）
05 乾坤大挪移（歪脑袋看世界果然与众不同）
06 杂志化版式（消除设计边界向杂志版式学习）
07 宽屏大视野（不做1000小切糕还给宽屏大视野）
08 文字衣橱（是时候收拾一下那长篇大论的文字了）
09 你看起来很好吃（挑动厌食宝宝们的食欲）
10 钉钉铆铆（小装饰的正能量不容忽视）
附录A 一个视觉设计师的职业世界观
附录B 网站建设新元年的设计趋势
附录C 设计中的“好有爱”

《一个视觉设计师的职业世界观》
　　——关于商业视觉设计师的自我定位
　　
　　
　　做为一个设计师，我们并不需要成为一个策划人，
　　但如果我们了解我们所经历的这些事，
　　它们是从哪里来到哪里去，
　　或许我们能够在自己这个环节上做得更好。
　　这便是本文所要说的一个视觉设计师的基本职业世界观。
　　
　　这篇文章无关乎视觉美丑，无关乎技法表现，它不能让我们的作品变得漂亮，却能让我们的设计精准有效。作为商业团队中的一个成员，在完成一件商业作品时，明确自己和产品的定位是十分关键的，它直接影响到设计作品的准确性。只有准确的了解了这两个定位，我们才能繁杂的职业认识人群中的自己，并让我们的作品正真为产品提供帮助。
　　
　　
　　一、自我定位
　　1.我是谁？
　　
　　
　　首先是自我定位。我是谁，我是来做什么的呢？这两个问题直接影响到我们之后的行为目标，目标的指向越明确，我们的行为才越有效。如果将网页设计师的成长分为三个阶段的话。从第一次接触设计工作到逐渐开始理解设计理解产品并最终成为一个相对成熟的网页设计师，我们可以如何定义这三个过程中的自己。
　　第一阶段：我是一个艺术设计者
　　在从事设计这个职业前，我们也许在学校都受过正规或非正规的平面设计和艺术理论的训练。待到进入工作岗位后，我们都急切的希望能够展现自己的特点，并将先前之所学所见应用于我们的工作中并证明自己。所以许多刚入职的设计师，通常本着自我证明的目标来从事手上的工作，希望能通过良好视觉表现来证明自己的工作能力，然而广义的艺术理论及视觉表现与狭义的独特商品视觉包装并不可能恰好对口，也许我们展示了艺术性的视觉，但却与产品毫无关系。
　　第二阶段：我是一个翻译者
　　在无数次的飞机稿过后，我们开始思考，并希望能做一些真正有效的东西。我们开始试图理解文案信息，并通过图形将信息翻译出来。这时候的我们认为自己是一个产品信息的视觉翻译者。然而就于文案的翻译正如机械的翻译软件一般，它是生硬的、不易懂的、不够人性的。
　　第三阶段：我是一个传达者
　　渐渐的我们发现，如果只将视角限定在眼前的几个信息文字上是不够的，我们必需结合语境对它进行翻译，也就是我们必需对产品、产品周期、产品营销等多纬度的产品处境有所了解。才能真正准确的传达出产品的话语。这时候我们不再是机械的翻译软件，而成为一个真正的通过视觉去传达产品话语的人。我们是鲜活的，人性的用图像语言去传达产品信息的视觉传达设计师。
　　
　　
　　
　　
　　
　　2.他是谁?
　　
　　
　　不同的产品、不同的规模、不同的运营模式它们在公司组织架构上都有一定的差异。就腾讯现阶段的游戏产品运营模块而言，与设计师接触最多的人有：产品经理、项目经理、重构师、动画师、程序员、CP、开发商、制作人等等，而他们的主要工作是什么，他们与设计师的关系又是怎么样的？将这些关系梳理清晰我们才能更好的合作并合理的利用资源。
　　
　　
　　
　　从产品营销的角度来划分的话，可以分为产品和市场两个方向，产品经理负责产品内容的更新和推广，市场项目经理则从市场角度树立产品的品牌形像，增强产品市场曝光率和产品的美誉度。举个例子，假设，我们的产品是一道红烧茄子，那么产品经理负责的是菜品本身的推广，比如，这个茄子的选材怎么怎么讲究，辅料怎么怎么地道，厨师的手艺如何如何专业。而项目经理则是从市场价值观出发给受众正面的品牌感受，比如吃了这红烧茄子，皮肤白了，牙齿好了，精神头足了，夫妻关系也合睦了等等，当然这是个玩笑，不过产品经理和品牌经理的着力点基本上就是以这样分类的。而我们在制作不同类型的专题时，也需要有同样明确的目标，二者概念不能混淆。
　　说完了产品经理和品牌经理的工作，我们从服务和技术支持的角度出发，可以将其分为决策层、策划层、实现层。决策层包括产品的制作人和市场总经理，他们决定了产品的研发方向和市场定位。产品经理和项目经理则是将这种方向和定位落实成具体的产品表现和营销事件策划。最后由设计师、动画师、重构师、程序师等组成的技术层队伍将其转换成用户接触和感知产品和活动。在这里，设计师们用理性的思考和艺术的大脑，在产品的不同阶段从不同的方向用不同的方式为用户们传达有趣的、可吸收、可消化的产品信息。