形式感+：网页视觉设计创意拓展与快速表现

海报：

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

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

★腾讯游戏从10年前默默无闻到目前占据整个中国游戏市场半壁江山，这来自于整个研发团队和发行团队对产品各个细节层面的追求及坚持，而支撑我们一直以饱满的热情继续下去的，往往正是最初时单纯的对游戏行业或专业的执着和热爱。很高兴今天看到小彦作为我们众多设计师中的典型代表，在自身的学习摸索过程中而出品的这样一本书，它从设计创意技巧、理论、案例乃至设计师的自身价值定位等层面层层解析，汇聚了小彦从业以来在游戏类页面视觉设计方面的个人经验所在及设计师的价值感悟，定能对期望踏入网页设计领域的新人或者是其他设计类领域的资深从业者非常多的帮助和共鸣（从我本人来说，我所从事的游戏类界面设计工作，在阅读该书以及和小彦的交流过程中获取到非常多共通的设计法则和创意启发），相信能成为设计师桌边的常用必备书籍之一！！同时期望能带动国内设计领域的经验分享氛围，共同创建更加良性、自由、诚恳的设计交流环境，将腾讯游戏的影响力扩展至整个行业领域！
——腾讯互动娱乐业务系统QQ游戏产品部 （GDC） 设计总监 刘刚（manrana）

★推荐奋斗在设计一线的小伙伴们工作之余仔细研读，书里都是笔者的亲身经验和心血，很有诚意。
——腾讯用户研究与体验设计部（CDC） 陈妍（Enya）

★作者新锐的想法非常的及时，在国内网页设计环境大同的情况下，需要更多不同的声音，更多新锐的创意！
——腾讯电商用户体验设计部（ECD）总经理 刘轶（rayliu）

★小彦透过自己的细微观察和个人经验分析，整理成独特的方法论与众同乐，令人鼓舞。国内需要更多像她那样主动推动设计的传道人！
——腾讯社交用户体验设计（ISUX）总经理 jonathan wong

★小彦之前在站酷发表的系列设计文章就受到了设计师们的热情追读，这次成书后，更是进一步系统化的规整了内容。没有枯燥的理论知识，只有好学好用的私家绝招。虽然名为形式感，但其中包含了从思考方式到实现手段的全流程引导。读者完全可以举一反三，掌握到流行的设计手法，并把它们立刻应用到日常的工作中。代表小彦在站酷的百万人气和粉丝们，向奋战在网页设计一线的设计师们推荐。
——站酷网 主编 纪晓亮

★书中的几篇干货文章优设网曾推荐过，吸引了很多网页设计师追捧学习。作者对网页形式分析独到，语言深入浅出，是一本有趣而实用的设计书。
——优设网 优设哥

★《形式感》一书由浅入深的向大家讲述了一些网页设计的方法和理念，并且例举了作者自己很多的优秀案例。以自己设计师的亲身经历向大家言传施教，这是一件很了不起的事情，因为这同时证明了作者在网页设计这行一定是久经沙场却仍然屹立不倒，并依然大步流星的正能量。如果我还是当年那个为设计稿而苦恼的设计师，那么，我一定不会错过这本书。
——优艺客 创始人 韩雪冬

★相比较，这是一本我更建议广大准网页设计师看一看的书，书中很多精彩的表现手法和实例，对于当前技术和想法的提高有很大的帮助， 对于那些正处在瓶颈期，却苦于突破的设计师也非常受用。网页设计发展瞬息万变，也包罗万象，设计师不应刻意追求某种固定或流行的形式，适合的、感觉对了才重要，<<形式感+>>一书贴切、生动的阐述了这一理念。
——网页设计师联盟 主编 江六八

★这本书是对网页设计日常工作经验的提炼和点化，语言形式轻松，入口易消化，功效快速直接，对于网页视觉设计的从业者来说相当受用。
——巨人副总裁 彭程

★书中许多版式方法结合了现代网络技术的发展，越过传统的边界，走过固化的禁区，是一本有前瞻性的设计书，欧巴墙裂推荐！
——漫画家 郭斯特

★虽然我不是做网页的，但是放之设计皆可用。里面的许多视觉表现的创意和形式对于设计来说都是互通互用的，值得一读。
——青年导演 蒙青

★简单实用的工具书，朴实的语言让我很容易就可以看懂～
——知名职业画师 阮佳

★我很喜欢作者以简单、幽默的语言来表达对于设计的理解。让我对网页设计有了更深层次的理解与领悟。无论是内行还是外行都能在这本书中汲取到自己想要学习的内容而得到提高。
——知名职业画师 周觉先

★本书的网页设计方法充分将内容和视觉融汇贯通。对于品牌视觉表现和网站策划来说也有很不错的启发性。
——google品牌经理 李大鹏

★设计是一件需要包容的事，心灵的空间有限，物质的欲望太满就容不下更多美感。三年前头一次见到小彦的时候，我就因为她干净的内心和五彩斑斓的思想力而震惊。作为本书的头一个读者，我相信你将会有和我一样的阅读体会：因为纯净的世界观，你的心会装下整个世界的设计感。
——腾讯游戏产品经理 陈静

★打造视觉形式感是每个游戏推广视觉包装的设计师必有的思路，也是能否第一时间吸引玩家眼球的必要手段，每个人都有自己的方法，书中介绍的几大方法论，通过实战案例详尽的介绍了作者对各种形式感的理解，以及如何实践，必然会让你在设计思路中起到立竿见影的效果。
——腾讯高级视觉设计师 蔡望东

★这书是在高强度、日常实际案例工作环境下，提取出来的，能有效提高你页面设计效果的经验精华。
——腾讯高级视觉设计师 高立

★十个绝顶聪明的提升网页设计形式感问题的方法。每一个都通过,说,想,看,做,四个部分，配合详尽案例，以轻松的行文风格为我们娓娓道出。作者将其丰富的实战经验分享给广大设计师，以解决实际工作中遇到创意思维枯竭、作品表现力平淡的问题。是一本能让设计师释放无尽灵感的好书。
——空中网艺术总监 吴黄溪

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

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

形式感，这个说法在近两年的网页视觉设计圈子中大概是最常出现的词汇之一。
关于这个书名，许多朋友谈起时会说，是否带有一些形式主义、形式化的贬意色彩，感受上相对偏主观。就“形式感”这个词的本意来说，它的确是由主观意识出发的设计表现，然而任何一种输出和表达都是经过个人的意识和知识梳理形成的，从一定意义上讲，不论是谈形式设计还是谈体验设计，其实都是根据主观认识造就而最终输出的形式表现，不同的只是正确的形式和不够正确的形式。
何谓正确的形式，如何能更接近正确的形式？专业的网页视觉形式关联了整体营销的需要、信息内容的传达和网页技术的更新以及审美标准的变化。书中的几个方法论综合了这些基础要素，并将其通过易理解可操作的表达方式进行整理输出。因此，“形式感”做为视觉评定的第一感受，它在一定程度上涵盖了上述影响视觉呈现的几大要点，也逐渐成为了设计师们在日常工作交流中的常用词汇。
“形式感”一词的广泛使用在另一方面是基于网页设计专业化分工的，网页设计在最初类计算机学科的基础上延伸出了它独有的艺术性、体验性、互动性等专业体系。它伴随着“网页视觉设计师”这一职业称谓成为了艺术类分支中最常使用到的沟通词汇。从一定意义上讲，网页视觉“形式感”的出现也标志着网页视觉设计的进一步专业化。与此同时，我们也期待着网页视觉设计在整个网络化的浪潮中有更多优秀的、惊艳的形式表现。
记得在两年前，我们的设计作品在游戏行业内具备了一定的影响力，因为行业属性的缘故，关注用户体验的同时，团队在形式感打造方面经常有出色的内容产出，欣喜之余，也开始考虑如何能把这些出色的设计经验沉淀下来，形成方法论，长久、良性的支持团队工作，同时进一步提升团队效率。
带着这个目的，便拉上团队骨干小彦一起探讨这个问题，让人惊讶的是，小彦针对形式感打造方法的计划早已启动，并已经具备了一些可行的设计方法归纳，于是我们利用两个月的时间，进行反复的碰撞，收集了大量行业资料，并结合实战项目，完成了打造形式感课程的内部开发，后来成为了团队的招牌课程，获得了腾讯学院、互动娱乐事业群学习组织、腾讯设计通道等组织颁发的优秀课程奖。这些方法吸收并结合了摄影、建筑、绘画等知识，将常见的形式感打造方法用深入浅出的方式进行了说明。使得游戏运营、策划、美术相关工作人员都能够简单有效的理解设计方法。部分技巧发布在互联网后，也受到很多相关从业人员的学习和认可。
得知这些方法会成为纸质书出版后，很感激出版社对于我们专业能力的认可，更感谢这其中的关键角色小彦，能够在方法沉淀的过程中，针对其内容进行反复的迭代与优化，并追求尽善尽美的专业态度。
设计是一门需要手脑并用的学科，没有深刻的洞察和理论支撑，仅单纯的追求视觉效果会显得如此浅薄，其奥义在于真正投入的思考与执行，这是大前研一所强调的不断学习，不断思考，不断总结的专业主义精神，也正式设计工作独特的魅力所在之处。
——腾讯游戏官方设计团队TGideas 设计总监 李若凡
2013年11月6日
这几天花了点时间看完了《形式感+》这本书 ，这是一本关于网页设计的教程，一本别具一格风格的教程书籍，抛弃死板的教材模式，而以一种轻松愉快地方式讲解网页设计理论、方法与案例，有一种吸引力使我看下去，讲解新意，更能贴近观看者想要获取的方法、知识点，而不是单单的阐述某种理论，此书值得一看。这剂网页设计的“速效救心丸”确实能在你创意枯竭、审美疲劳、设计瓶颈的时候好好的补上一口回神气。像帝都雾霾天出现的一股清风，魔都排骨汤时期手握的一支纯净水。当身为网页设计师的你陷身于无的放矢的苦恼中，请翻翻这本书，也许会产生头脑风暴，也许就能把杂乱的思绪理顺，总之相信你确实会收获不小。
现在的网页设计水准较10年前已经是翻天覆地的变化，作者谦虚的作风并不影响他将这些知识宣扬给更多人，可以说此书是造福的，为那些投身于这个科技横行的行业的行者们造福。相比较现在的网页设计水准，针对网页设计的教科书远远跟不上脚步，然而正缺少像作者这样，用平实的言语，调理得当的顺序，贴近时代的案例，生动的演绎了一场网页设计的艺术制造。它也许不会让你阅读完立刻成为网页设计的大师，这里也没有严肃的教科书理论，没有条条框框的要求。但作者从说、想、看、做这几点出发，通过生动的举例比拟，圈画了一张通向成功的网页设计的地图，让读者在这条道路上走得踏实，眼前尽是明媚光景，心情畅爽且脚下生风，一步步走得安稳妥当，既有有柳暗花明又一村的惊喜，更有停车坐爱枫林晚的惬意。
《形式感+》是一本适合于网页设计相关的高校生、网页设计初学者和刚刚工作的设计师学习的一本设计类图书，当然，它也是一本值得业内同行收藏的一本好书。本书的系统性很强，而且以一种容易理解、轻松愉快的方式诠释网页设计的知识，这种方式的叙述是我第一次在网站设计类书籍中见到， 看完此书，能很快掌握理论知识、创意与技巧的书籍，能让你快速成为成熟的网页设计师。
《形式感+》是本速食书籍，能快速掌握方法，而不是讲大道理而没有实际可操作性，这本书而是把设计理论和网站元素分解的一一对应，具有很强的可操作性，而且以幽默风格展现出来，你能从它的命名方式感受到。
设计是服务于用户，用户体验很重要，如果一个网站设计不能让用户轻松愉快的点击，获取信息，那么，这个网站不够完美，这本工具书，值得你拥有。
李海滔 2013年11月11日 写于上海
前言
写这份前言的时候，我并不太确定这本书是否能够出版。不论结果如何，都十分感谢策划大成的鼓励，让我一直坚持整理完成。
2011年6月因为几篇关于[快速打造网页形式感]的系列文章得到了许多同行的关注，大成在站酷上找到了我，并无写书经验的我，设想着只需简单地将几篇现有文章集合成册就可以交差，于是便欣然答应了，但后来发现，完善工作并不比最初的起稿来得容易……
首先，对于网页设计来说，不论是技术还是审美都是一个不断更新迭代的过程，当时认为不错的作品现在看起来并不十分有特色。特别是对专题的形式感来说，布局的形式感在于它的出其不意，如果使用过于频繁也便失去了它的效果。
其次，由于个人作品的限制，许多案例的方法上值得举证，但终合评定上来说，它不算是一个完美的作品。
第三，话语空间，网络上的文章如果发现问题，发布后也能及时更正，而纸质出版是一次性的成稿，出版后的修正难度就很大。
还有，在整理过程中，不断出现新的想法，所以不断添加新的内容，逐渐发现，原来在网络上与大家分享的文章在本书中所占的比例，几乎可以忽略不计了……
最重要的一点，纸质出版物的图片版权比网络文章限定更多，在案例的选择上也很谨小慎微。加上日常工作的压力，这一系列问题也让我在过程中多次打了退堂鼓。到这里，还是想再次感谢大成一直的鼓励。
老编大成的插队回复：感谢小彦的信任，不过不认同“没编辑就没这本书”的说法，只不过大家都觉得出版这本书是件有意义的事情，并肩作战到底罢了。从编辑这个门外人来看，国内网页视觉设计与10年前相比，已经有了翻天覆地的变化，很多网页作品的视觉设计、体验设计已经是国际一流水准，但是目前国内原创网页设计图书还大都停留在10年前的水平上，远远落后与我们的当前设计真实水准，个中缘由这里不深究。老编认为，这本书是13年策划生涯中遇到的最好的一本网页视觉设计书，设计是前沿的设计，文笔是通透的文笔，作者小彦文武双全，德才兼备，乃设计师中的韩寒，作家中的林志玲。这本书，错不了。
一定要先看看这里
为了能够更好地定位和阅读本书，在大家阅读正文之前，先罗嗦两句。网页设计包含着很多方面的内容：网页前端开发、网页平面设计、界面UI设计、软件使用、用户体验……，本书作为一本速食的网页设计技法手册，它很难覆盖所有的网页设计领域。单从视觉设计来分，就包含了：UI设计、网页图标设计、平面设计、色彩搭配、PS技能表现等等。而这本书主要对哪些内容进行了介绍，它又适合怎样的人群呢？
为什么就谈形式
一是行业分工的细化。网页设计师从早年的综合性工作中分化出来，形成了相对独立的专业岗位，网页设计也不再是单纯的软件应用，它衍生出了许多独立的研究方向，而形式感的表现则成为视觉设计师在主要日常工作之一。这也预示着网页设计行业的“改版”。只有在专业领域上更强，才能强强合作从而帮助其他具体产品的展示、营销、盈利等。
其次随着时代的发展，网页设计更接近于一门艺术。网页技术的发展为网页视觉艺术提供了更灵活和宽阔的表现空间，而视觉表现上的需求也推动着网页技术进一步发展。
别拿豆包不当干粮，别拿网页不当艺术！
网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利，而这些也为视觉设计师提供了更多表现的空间，并以此来帮助网页信息在快速阅读的今天占有一席之地。与此同时，用户对网页使用的经验沉淀，让视觉无需花更多的表现向用户告知基础交互行为，因此也可以余下更多的精力回到视觉形式上来，运用色彩和结构来更好地为网页信息服务。
当然矛盾是持续存在的，旧规矩的打破也预示着新规矩的开始。面对信息的泛滥，如何引起用户对当前信息的关注，网页的第一视觉在其中显得尤为重要，它同样需要形式表现的疏导和刺激。
另外多终端用户屏幕（主要是各种移动设备，手机、平板等）的出现，它让网页视觉设计师不得不重新定义原有的视觉规范。这些变化都趋使着设计师对新形式的渴望与进一步的探索，让我们一起来迎接吧。
我是一个被圈养的网页设计师
圈养当然不是什么光荣的称号，它标志着一个设计师的独立开发和制作能力。
圈养的设计师，大多处于分工细致的制作环境，我们首先抛开后台和前端的程序开发（因为设计和程序的分工是大部分网页设计团队的基础架构）。除此之外，一个圈养型的设计师团队，它拥有一个需求交互策划，将抽象的产品目标转化成具体活动内容，并绘制成简易的网页交互稿，网页设计通过交互稿进行页面设计。
其次在圈养的团队中，产品一般有一个原画团队，虽然这些原画并不直接服务于网页设计（它们可能是产品开发过程中的草稿原画文件），但还是给网页视觉表现带来很大的帮助。
第三，还可能有一个动画制作团队，帮助实现网页设计上的动画需求。在一些设计团队，Flash动画设计和页面设计是由同一个设计师完成的。另外，对于一些大型的门户平台类网站可能还会配有专业的用户体验和调研专员或小组等等。
除了以上几个大的分工之外，一些网页设计团队还有会编辑，在网页设计和程序开发完成后负责上传具体的资料内容。
在最初工作的几年，我也经历过设计、动画、切片三位一体的人生。在一些团队里，新来的毕业生或实习的同学会专门负责抠图、改尺寸等工作，为主设计师节省了大量的时间，当然我也同样经历过那个每日只改尺寸的设计生活。就像每个发型师都得从洗头小弟干起……。好啦，我们是设计师不是洗剪吹啦，不过话说回来，现在光剪个脑袋要你个590的也不是没有，就看我们是如何定位和看待自己的手艺啦，扯远了，回来回来。
话说这些受得住大团队圈养的主儿，一般有自己一定的实力，以为大团队提供着丰厚的资源，也给出了许多标准化的限定，所以有人说圈养的设计师在一些制作的独立性和创意的狼性上不如一些野生派的优秀设计师。这点我们并不否认，但圈养的方式还是成为了大部分企业的常态架构，因为它为产品的网页设计带来了可控的便捷。而大部分的设计就业者也处于这样一个有一定基础分工的设计团队中。而如何在圈养的团队中生存得更好，让我们的设计在众多的标准中脱颖而出，或许本书的一些小小方法能够对同样属于圈养的同胞有所帮助。当然，本书的读者不仅限于“圈养”设计师，“野生动物”同样适用！
这不是一本高大全的教科书
本书内容不涉及任何网页前端程序开发或PS操作步骤，也没有精深复杂的平面构成和色彩搭配理论。这是一本速食的设计创意与技巧手册。当然我们很难承诺仅通过本书便马上能从菜鸟转身成网页设计大师。我们应当尊重高大全的理论基础，也相信所有的成功都不是一蹴而就的。本书可以帮助有一定基础的网页设计初学者或在职者，在遇到设计创意瓶颈时，能够在较短的时间内解决设计上的创意和视觉形式感的问题。不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。
这是一剂速效救心丸，行气活血、祛瘀止痛。你在为网页视觉的平淡无奇感到困扰嘛？你在为大量的专题需求感到疲惫嘛？你正处于每个月那几天的创意瓶劲期嘛？圈圈叉医院佟主任，专注治创二十载，为您推荐！本书将我们日常设计思路与网页技术和审美发展结合，并将方法形象地归纳，入口易、剂量小、起效快，谁用谁知道……。好了好了，再开玩笑就要被开除了，我发誓要好好写书认真做人的。
如果一定要为本书做个比喻的话，“速效救心丸”这个称号应该合适。它并非复杂而长期的理论慢性治疗，它是实际工作实践的经验总结，它针对我们日常遇到的现实问题并提出解决方案。
由于个人的工作类型和经验的限制，书中还是有许多不完善的地方，欢迎各路同仁指正拍砖，当然，为了不被乱砖拍死，我先为自己竖几道结界防身，以备不时耍赖之需。
日常的活动专题更需要形式感
在解释专题页面这个概念之前，我们先来了解一下网站的分类，因为一个网站到底是重信息索引、重交互体验还是重视觉表现必须依网站的类型而定，不同的网站类型侧重点是有区别的。从网站功能上，它分为门户站、平台站、品牌站、专题站等。
· 门户站负责产品资讯建设，它拥有对搜索引擎的友好表现和完好的内容支持，它相对更注重资料的索引。
· 平台站就像一个网络市集，不论是用户端还是产品端都可以在这里传播资讯，并进行频繁的互动，它相对更注重用户的交互体验。
· 品牌站则像外交官，它主要通过视觉包装传达产品概念，随着技术的发展，Flash、HTML5、视频、多媒体因其生动的展示形式成为了品牌站的主要表现手段，对于品牌站的建设来说，设计师在创意和视觉表现上都有极大的空间。
· 专题活动站作为精准营销的重要形式，为产品的针对性推广做出了巨大贡献，早年受到带宽的影响表现形式较为单一，现在真正揭开了广告的本来面目，强烈的视觉表现成为了它最重要的特征。它就像战争中的突击队，精准、迅猛、有力！
门户站、平台站、品牌站根据产品的结点更换频繁，多为半年、一年甚至两三年更换一次。而活动专题因为服务于产品活动，所以上站时间都相对较短，多为一个星期到一个月左右，但在数量上较其他类型的网站相对更多。如一款进入稳定期的游戏产品，它的专题页面一个月的数量通常在4～8个左右，公测的攻坚期则更甚，通常每天同时在线的活动在五到十个左右。所以专题页面的设计是在职设计师最常遇到的网页设计类型。
我们知道专题的设计是通过它的精准、迅猛、有力来服务于营销活动并最终服务于产品的，所以这就需要设计师在处理这些日常专题时主题要突出、设计速度要快、视觉要惊艳。这也便是本书这十个方法所要解决的问题。本书以视觉设计中的形式感为主线，不以网站的索引设计或用户的交互体验设计为主线，是因为每个类型的网站设计的侧重点不同。关于网页的索引设计或是交互体验设计，不是本书的讲述重点，好好把视觉形式表现技巧说清晰也算是笔者有限能力下的小小愿望。
这本书适合我吗？
因为工作和资源的关系，书中动手制作的案例多是游戏网页，但赏析部分的案例类型较多元化。思路与方法可以举一反三、灵活运用，所以它们同样适用于其他产品的专题网页设计，一些思路和方法甚至适用于广告和海报等视觉设计。
所以本书的读者是网页设计师，包含狭义的、广义的、“圈养”的、“野生”的，以及网站开发其他环节需要了解网页视觉设计的人员（如用户体验设计师、前端页面开发人员等）。
作品不甚完美，权当抛砖引玉。网页设计随着带宽的提高以及技术的革新，表现形式也在不断变化，加以每个人对美丑评定不一，如果从多维度来评定书中的案例，它们可能不能算是完美作品，这里就当是为了说明技巧和方法进行的尝试“抛砖”。由于时间的关系，一些较早期的作品也多少有些不够成熟或不符合当前流行趋势的地方也请大家多体谅，如果这些方法能够为大家拓展思路并借此“引玉”也便是我莫大的荣幸了。
终于唠叨完了，算是能够比较安心地和您一同翻书打开话茬了。
版权声明
为了顺利展开主题，本书在编写过程中参考了并截取了部分国内外著名网站的功能和效果，在此感谢原作者的创意和设计为本书提供了参考。由于部分内容来源于互联网，因此无法一一查明原创作者，无法一一准确列出出处，敬请谅解。如有内容引用了贵机构、贵公司或您个人的作品或技术资料却没有注明出处，欢迎及时与出版社或作者本人联系，我们将会在博客或相关媒体中予以说明、澄清或致歉，并会在下一版中予以更正及补充。
特别鸣谢
感谢所在团队腾讯TGideas一直以来的培养和帮助，书中有许多经验分享也来源于集体的智慧和团队成员间相互的灵感激发。此外十分感谢我们的Leader李若凡为团队成员争取了更多的话语权和设计空间，才使我们有机会不断突破设计的局限，让网站设计表现更加生动，并让设计有效地辅助产品的发展。也感谢每一位TGideas的成员，努力工作拼命玩，是大家的工作态度，也是团队给设计师和设计作品最好的礼物。
你可能已经注意到本书大体的结构，每个方法的架构基本一致，它分为“说说、想想、看看、做做”四个部分对方法进行诠释、解构、分析、尝试，在阅读过程中大家可以留心，或根据自己的需要进行针对性的翻阅。