这是一部能帮助视觉设计师开悟的著作，由携程网UED视觉高级经理撰写，是她9年互联网视觉设计经验的总结和奉献。
　　全书从设计师的专业能力、设计方向、设计技巧、设计理念、设计规范5个维度展开，其中前4项可以构成一个完整的视觉设计工作链，在这个链条上每一环都是后面一环的支撑，缺一不可。但是在这个链条之上必须配以设计规范，才能让这个链条更加稳固。因此本章主要分为5章：
　　第1章：首先介绍了互联网产品及其视觉设计的概念，然后介绍了互联网产品视觉设计师的职业规划、需要知道的5个关键点和需要掌握的4种学习方法，这些是形成设计理念的基础。
　　第2章：首先明确了战略和用户对于互联网产品视觉设计人员来说意味着什么，接着用了较大的篇幅深层剖析了对互联网产品视觉设计人员非常重要的一个概念——层级。只有掌握了层级，才可能成为合格的设计师。最后则系统介绍了视觉设计方法和流程，这部分内容旨在帮助设计师在掌握了层级，有了成为一名合格设计师的潜质之后，知道如何开展设计工作。
　　第3章：围绕细节设计展开，主要包括两大块内容：设计元素和颜色搭配。元素+颜色=作品，所以掌握了这两部分内容就可以设计出令人拍案叫绝的作品。这一章从颜色代表的情感、颜色的模式、颜色选取的2种方法等角度详细介绍了颜色搭配的方法；从图标的类型、像素、体量感、选择、动效设计、使用情况等方面介绍了图标的使用方法。除了这两大块内容外，本章还在最后分别介绍了文字和表单处理方法。
　　第4章：围绕回归设计理念展开，要求设计师能提炼设计理念，论证设计方向，提炼设计技巧，这样不仅能让作品有感性的视觉传达、理性的理论支持，还能让设计师找到不足、积累经验。
　　第5章：在明确了设计规范的重要性之后，给出了制定规范的5大原则和具体流程，最后还辅以具体的案例，让读者在掌握理论层面的知识后，还能通过他人的成功经验知道自己的工作如何落地！
　　

作者简介

吴佳敏
资深视觉设计和研究专家，移动电商设计专家，拥有9年互联网视觉设计和管理经验，在互联网视觉设计的需求分析、用户体验、创新设计等各方面有着极为深刻而系统的理解和认识。拥有多项国家外观设计专利。
现任携程UED视觉高级经理，参与了携程机票事业部各个产品部门的设计工作，并帮助培养视觉设计方面的人才；曾就职于腾讯，先后参与世博官网、腾讯微博、腾讯网等相关产品的设计工作。
UI中国前身Iconfans特攻队的版主之一（ID：Michelle ?E）。

精彩书评

设计的价值不只体现在设计的表现层，更重要的体现在是否能反馈产品的核心诉求。UI中国自创建以来，有上百万的设计师来这里交流，很多视觉设计师常常比拼着设计技法，却少有关注设计背后的理念，以及对产品战略层面的思考。这本书针对视觉设计师的职业成长、能力体系建立以及如何保持良好的产品战略思考等方面进行了详细阐述，很具有实战的借鉴意义，是一本值得放在手边的参考书。
　　—— 董景博　UI中国创始人&CEO;
　　
　　互联网的设计纷繁多样，迭代也快，新的知识和设计趋势不断变化，所以设计师这个群体需要不断地学习和更新原有的知识体系。本书通过专业的讲述，介绍了设计师的职业规划和设计方法，如何突破瓶颈、摸清脉路、由繁化简，如何坚守自己的信念，坚持自己的设计……深入阅读本书可以帮你快速提升和掌握互联网产品设计的专业技巧，从不同维度了解到好的设计是如何产生的，好的团队是如何合作的。这是一本颇有诚意的书，希望能够为你指明方向，并且令你热爱设计这份工作。
　　——　任婕腾讯网UED设计总监
　　
　　市面上关于互联网产品设计的书很多，但关于视觉设计的书还偏少，有“干货”的书就更少了。本书总结了专业设计师的所思所想，是一本让人期待已久的作品。
　　—— 张酉麟（小火）著名设计师
　　
　　视觉设计师的核心价值是专业竞争力。没有一个设计师是可以一天两天炼成的。除了天赋，更需要专研和努力。视觉设计师是公司的产品“解说员”，通过设计让用户理解产品。书中有很多能让设计师共鸣的观点，因此本书让我爱不释手。同时这也是一本设计师的开悟书，希望大家通过本书早日领悟设计师的进阶之道。
　　——　应骏赳（JJ Ying）著名设计师/Anyway.FM主播
　　

目录
前言
致谢
第1章· 认识互联网产品视觉设计/1
1.1　什么是互联网产品的视觉设计　/2
1.1.1　了解互联网产品　/2
1.1.2　什么是互联网产品的视觉设计　/8
1.2　互联网产品视觉设计师5项关键能力　/10
1.3　提升视觉设计师能力的4种学习方法　/23
1.4　视觉设计师的职业规划　/31
1.4.1　专业线　/32
1.4.2　P线　/34
1.4.3　M线　/37
1.5　视觉设计与其他岗位同事之间的配合　/39
1.5.1　团队合作　/39
1.5.2　工作沟通　/41
第2章· 设计方向和设计理念/43
2.1　产品战略与目标用户对设计方向的影响　/44
2.1.1　为什么要确定设计方向　/45
2.1.2　确定设计方向的调研方法　/49
2.2　贯穿全局的思维—层级概念　/61
2.2.1　为什么要掌握分析层级的能力　/62
2.2.2　建立信息层级的视觉方法　/66
2.3　视觉设计流程与方法　/74
2.3.1　研究分析　/74
2.3.2　设计草案　/81
2.3.3　设计辩证　/90
2.3.4　设计提案　/97
第3章· 细节深入/101
3.1　细节设计的两个关键点　/102
3.1.1　设计元素　/102
3.1.2 　颜色搭配　/107
3.2　颜色　/108
3.2.1　色彩的情感　/110
3.2.2　在UI设计中运用RGB颜色模式　/119
3.2.3　理性和感性的两种取色方法　/123
3.3　图标　/129
3.3.1　图标类型　/129
3.3.2　图标像素　/135
3.3.3　图标统一体量感　/136
3.3.4　图标的隐喻选择　/137
3.3.5　图标色彩与视觉反馈　/139
3.3.6　图标的动效设计　/139
3.3.7　在适当的情况下使用图标　/143
3.4　文字　/144
3.4.1　字体和字号　/145
3.4.2　色值　/146
3.4.3　衬线体与非衬线体　/147
3.4.4　文字行距　/148
3.4.5　边距和缩进　/148
3.4.6　行为召唤　/149
3.5　表单　/151
3.5.1　情感化的表单　/151
3.5.2　清晰的视线流　/151
3.5.3　合理的排布　/153
3.5.4　更多地为用户考虑　/155
3.5.5　有效地引导　/157
第4章· 回归设计理念/159
4.1　提炼设计理念　/160
4.1.1　点、线、面理念　/162
4.1.2　直线与浪线理念　/163
4.1.3　抽屉理念与卡片设计　/165
4.1.4　负层级理念　/166
4.2　设计中的法则　/167
4.2.1　7±2法则　/167
4.2.2　费茨法则　/168
4.3　参考线的价值　/169
第5章· 设计规范/173
5.1　规范的重要性　/176
5.1.1　统一产品的用户体验　/176
5.1.2　方便设计　/178
5.1.3　形成备案和文库　/179
5.1.4　提高工作效率　/180
5.2　制定规范的5大原则　/181
5.2.1　把握制定规范的时机　/181
5.2.2　需要确定规范的范围　/183
5.2.3　避免规范一成不变，需要迭代　/184
5.2.4　避免规范过于详尽　/184
5.2.5　大指引、小规范的制定思路　/185
5.3　制定规范的流程　/187
5.3.1　注意积累和归纳　/188
5.3.2　制作规范　/189
5.3.3　汇总和微调　/196
5.4　Web规范制定的案例　/197
5.4.1　页面颜色规范　/199
5.4.2　文字规范　/200
5.4.3　按钮规范　/201
5.4.4　单选框和复选框规范　/201
5.4.5　控件规范　/202
5.4.6　命名规范　/204

前言/序言

　　生活中，我常常被问：“你是做什么的？”我会回答：“互联网视觉设计师。”对方很不解，什么叫互联网视觉设计师？我通常这么解释：在有些公司里，我们被称为UI设计师，但有时也会被称为VI设计师。不管称呼是怎样的，我们的工作都是在电脑或手机屏幕上针对界面皮肤的设计。我们的设计为互联网产品服务，在针对界面皮肤设计的时候，会对用户体验进行研究分析。
　　在平时的工作中，我发现有些合作部门的同事竟然也不太了解我们的工作内容，以及视觉设计的价值。这坚定了我写这本书的决心。
　　为什么要写这本书从包豪斯到Google I/O的Material Design，互联网的视觉设计既继承又颠覆着传统视觉设计理念。每一年都有许许多多的毕业生或者转行人员开始从事互联网产品的视觉设计师工作。
　　2015年，我在面试了100多位应聘者后发现，80%～90%的设计师应聘者对自己的职业毫无规划，并且对职位定义不清。他们认为只要是视觉设计的工作，都能胜任。其中有些应聘者是仅对设计抱有兴趣的，但他们没有设计背景，也没有设计方面的正规培训和工作经验；还有一些刚刚毕业的校招生，由于不清楚互联网公司的职位分配和工作内容，导致求职受到阻碍。这些人可能在设计领域中会有很不错的发展，但在他们踏入这个领域时，其实已经错过了求职良机，非常可惜。
　　有些同学在学校里会学习到一些别人制定的设计理念、设计知识。而这些在工作中，往往只是工作内容的一部分，在工作中，科学的工作流程、合适并能解决当下问题的设计、高效而良好的沟通技巧、有效的解释说明设计才是成功的互联网产品设计师必须拥有的素质。而这些在学校里是学不到的。
　　互联网行业是一个发展非常快的行业，也是一个充满创新的行业，技术发展快，商业模式层出不穷，用户的需求也在不断变化，相似的产品越来越多。对于互联网企业而言，要能让自己的产品在这个快速发展且充满变化的行业里更好地满足不断变化的用户需求，只有为用户提供越来越好的产品以及更好的用户体验这一条路。所以，近几年，互联网行业中成熟的公司越来越重视UED团队。在一些UED团队中，已经将设计岗位细分成：交互设计和视觉设计。而这种专业的职业细分，是靠一代又一代设计师们自己总结摸索得出来的。
　　有些视觉设计师会误读界面设计，从而把界面设计得“虚”“大” “空”。什么是“虚”“大”“空”？“虚”：需要突出产品属性和信息的时候，却用设计技巧和手段掩盖了产品真正要表达的功能特点，虚而不实。
　　“大”：互联网环境下，相似的产品非常多，一些产品或者产品功能是有时效特性的，当产品发布错过了有效时机时，无论做得多好都会流失用户。所以在设计的时候若总想太多，做得范围太广，往往都会导致产品发布错失良机。
　　“空”：设计师没有真正了解产品，只是在炫耀自己的技能，设计理念与产品理念矛盾。
　　“虚”“大”“空”会使工作伙伴对我们的能力产生质疑。在没有任何经验和总结可参考的情况下，设计师的成长往往会受到阻碍，对自己的职业道路会产生迷茫和质疑。本书就是基于以上原因策划出版的，希望本书能帮助视觉设计师们快速成长，少走弯路。
　　读者对象本书的主要读者包括从事互联网视觉设计的应届毕业生、转行从事互联网产品视觉设计的从业人员，视觉设计师（以互联网为主）、视觉设计团队管理人员（以互联网为主）、产品经理，以及用户体验从业人员。
　　刚毕业的同学：阅读这本书，可以理解如何在互联网的环境中开展自己的工作，从学生身份切换到社会人身份，了解视觉设计师的职能，工作的流程和如何提升专业技能。
　　转行成为互联网一员的设计师：通过阅读本书，可以了解互联网环境的设计团队是如何合作、如何思考的，帮助转行设计师快速入门，并融入互联网工作氛围。
　　和视觉设计师打交道的相关人士：可以了解视觉设计师的工作和思考范畴。本书将感性的设计内容用文字的方式理性地传达给读者，从而帮读者了解并理解设计师的工作。
　　公司的高层：通过阅读本书，领导们能更了解视觉设计师的感受、职业发展方向，从而使视觉设计师在工作中可以更好地体现自己的价值，并且在职业发展道路上有更大的发挥空间。
　　如何阅读本书本书的内容基本都是干货，是我的经历、经验的系统总结。书中的观点和论证均在我9年的互联网产品视觉设计工作中得到了验证和提炼。本书从界面设计逻辑的层级分析到设计的细节分析，从工作沟通的合作方式到设计语言的表达解释均有深刻阐述。具体来说，本书从以下三个层面进行了讲述：
　　第一层讲解了互联网产品视觉设计师的职业规划、需要具备的能力，这部分内容可以帮助入门级的设计师进行技能储备，帮助中级设计师对自己的职业生涯进行规划，帮助设计管理者确定招聘准则。
　　第二层讲解了设计方向和设计方法，一些设计方法可以帮助大家在互联网的工作中快速论证和自省设计是否是准确合适。同时还讲解了大型改版设计前期调研该如何开展。
　　第三层讲解了深入设计和确立视觉理念的相关知识，这部分内容比较专业，技术性更强，书中会用大量的例子来说明和解释视觉理念及一些确立视觉理念的方法论。
　　本书一共分五章，具体内容安排如下：
　　第1章讲述互联网产品及其视觉设计概念，旨在让读者对互联网产品有一个整体的了解。作为一名合格的互联网产品视觉设计人员，了解这些内容有助于形成正确的设计观，也就是找到设计方向和设计理念。这一章还讲解了互联网产品视觉设计师的职业规划、需要知道的5个关键点和需要掌握的4种学习方法，这些都是形成设计理念的基础。
　　第2章是在第1章的基础上对设计的方向和理念进行宏观性的剖析。这一章首先明确了战略和用户对于互联网产品视觉设计人员来说意味着什么，接着深层剖析了对互联网产品视觉设计人员非常重要的一个概念—层级，包括什么是层级、为什么要掌握层级、如何建立层级等。只有掌握了层级，才可能成为一名合格的设计师。本章最后系统介绍了视觉设计的方法和流程，这部分内容旨在帮助设计师在掌握了层级，有了成为一名合格设计师的潜质之后，知道如何开展设计工作。这一章的内容既能够帮助个人快速处理和制作设计，又可以帮助团队规范设计流程和方法，提高团队效率。
　　在掌握了第2章的宏观知识后，第3章开始围绕细节设计展开讲解。这一章主要包括两大块内容—设计元素和颜色搭配，元素＋颜色＝作品，所以掌握了这两部分内容就可以设计出令人拍案叫绝的作品。这一章从颜色代表的情感、颜色的模式、颜色选取的两种方法等角度详细介绍了颜色搭配的方法；从图标的类型、像素、体量感、选择、动效设计、使用情况等方面介绍了图标的使用方法；同时还对文字和表单的设计进行了详细分析。
　　在了解了设计的方方面面之后，本书指出让设计师进一步提升的方法，也就是第4章要介绍的内容—回归设计理念。这一章告诉视觉设计师在设计完毕后要进行反思、自省，提炼设计理念，论证设计方向，这样不仅能让作品有感性的视觉传达、理性的理论支持，还能让设计师找到不足、积累经验。要想进阶为更高级别的视觉设计师，本章内容是必学的。
　　前面4章是视觉设计师进行创作的完整流程，是一个完整的视觉设计工作链，在这个链条上每一环都是后面一环的支撑，缺一不可。但是在这个链条之上必须配以设计规范，才能让其更加稳固，这就是第5章要讲解的内容。第5章在明确了设计规范的重要性之后，给出了制定规范的5大原则和具体流程，最后还辅以具体的案例，让读者在掌握理论层面的知识后，还能通过他人的成功经验知道自己的工作如何落地！
　　希望本书能够唤起读者在互联网产品的视觉设计过程中的一些思考，同时也希望本书能使读者比较深入地了解我想要表达的对互联网产品的视觉设计的理解。
　　资源和勘误书中的图片都是进行示意的设计稿，价格和数字都仅为举例需要。由于经验和精力有限，本书难以全方位从点滴细节中深入而系统地解释互联网产品的视觉设计。如果能帮助大家认识视觉设计师的岗位，理解视觉设计师，那么对于视觉设计师以及我本人来说，已经足够了。
　　如果你有任何针对本书的宝贵意见或建议，欢迎发送邮件至邮箱naonao_mail@126.com。期待能够得到你的真挚反馈。
　　致谢首先要感谢我的家人在我写作过程中给予的支持，他们是我坚强的后盾。
　　我还要感谢在我的工作过程中帮助我的朋友和同事。刚毕业时，我遇到了一位非常负责的领导王索夫，在他的指引下我做了一年的交互设计，这为我的设计逻辑打下了非常扎实的交互基础。他曾经说：如果你“吃透了”产品逻辑，那么你的设计层次将与别人不同。感谢陈扉、郑砾在腾讯工作时对我的设计作出的非常细致的点评，特别是郑砾不厌其烦地和我一次次看稿子，细细探讨修改，给出了非常专业的意见。
　　感谢张振虎和邓佳佳让我的设计变得更加专业。特别感谢nikita彭晓红，让我的设计理论得到实践和认可。
　　感谢杨晓平。在2014年的时候我就有写一本书的想法，但是苦于不知道如何写，如何出版。2015年年初，我将这个想法告诉了他，是他让我认识了杨福川。
　　最后感谢杨福川和孙海亮，一次次为本书出谋划策，引导我，使我能将所想、所得付诸文字，直至付梓。