视觉链：互联网产品的视觉设计理念与规范.html.pdf

《视觉链：互联网产品的视觉设计理念与规范.html.pdf》由会员分享，可在线阅读，更多相关《视觉链：互联网产品的视觉设计理念与规范.html.pdf（41页珍藏版）》请在三一文库上搜索。

1、前言 生活中，我常常被问：“你是做什么的？”我会回答：“互联网视觉设计师。”对方很不解，什么叫互联网视觉设计师？我 通常这么解释：在有些公司里，我们被称为UI设计师，但有时也会被称为VI设计师。不管称呼是怎样的，我们的工作都是在电 脑或手机屏幕上针对界面皮肤的设计。我们的设计为互联网产品服务，在针对界面皮肤设计的时候，会对用户体验进行研究分 析。 在平时的工作中，我发现有些合作部门的同事竟然也不太了解我们的工作内容，以及视觉设计的价值。这坚定了我写这本书 的决心。 为什么要写这本书 从包豪斯到Google I/O的Material Design，互联网的视觉设计既继承又颠覆着传统视觉设计理念。

2、每一年都有许许多多的 毕业生或者转行人员开始从事互联网产品的视觉设计师工作。 2015年，我在面试了100多位应聘者后发现，80%90%的设计师应聘者对自己的职业毫无规划，并且对职位定义不清。他 们认为只要是视觉设计的工作，都能胜任。其中有些应聘者是仅对设计抱有兴趣的，但他们没有设计背景，也没有设计方面的正 规培训和工作经验；还有一些刚刚毕业的校招生，由于不清楚互联网公司的职位分配和工作内容，导致求职受到阻碍。这些人可 能在设计领域中会有很不错的发展，但在他们踏入这个领域时，其实已经错过了求职良机，非常可惜。 有些同学在学校里会学习到一些别人制定的设计理念、设计知识。而这些在工作中，往往只是工

3、作内容的一部分，在工作 中，科学的工作流程、合适并能解决当下问题的设计、高效而良好的沟通技巧、有效的解释说明设计才是成功的互联网产品设计 师必须拥有的素质。而这些在学校里是学不到的。 互联网行业是一个发展非常快的行业，也是一个充满创新的行业，技术发展快，商业模式层出不穷，用户的需求也在不断变 化，相似的产品越来越多。对于互联网企业而言，要能让自己的产品在这个快速发展且充满变化的行业里更好地满足不断变化的 用户需求，只有为用户提供越来越好的产品以及更好的用户体验这一条路。所以，近几年，互联网行业中成熟的公司越来越重视 UED团队。在一些UED团队中，已经将设计岗位细分成：交互设计和视觉设计。而这

4、种专业的职业细分，是靠一代又一代设计 师们自己总结摸索得出来的。 有些视觉设计师会误读界面设计，从而把界面设计得“虚”“大”“空”。什么是“虚”“大”“空”？ “虚”：需要突出产品属性和信息的时候，却用设计技巧和手段掩盖了产品真正要表达的功能特点，虚而不实。 “大”：互联网环境下，相似的产品非常多，一些产品或者产品功能是有时效特性的，当产品发布错过了有效时机时，无论 做得多好都会流失用户。所以在设计的时候若总想太多，做得范围太广，往往都会导致产品发布错失良机。 “空”：设计师没有真正了解产品，只是在炫耀自己的技能，设计理念与产品理念矛盾。 “虚”“大”“空”会使工作伙伴对我们的能力产生质疑。在

5、没有任何经验和总结可参考的情况下，设计师的成长往往会受 到阻碍，对自己的职业道路会产生迷茫和质疑。本书就是基于以上原因策划出版的，希望本书能帮助视觉设计师们快速成长，少 走弯路。 读者对象 本书的主要读者包括从事互联网视觉设计的应届毕业生、转行从事互联网产品视觉设计的从业人员，视觉设计师（以互联网 为主）、视觉设计团队管理人员（以互联网为主）、产品经理，以及用户体验从业人员。 刚毕业的同学：阅读这本书，可以理解如何在互联网的环境中开展自己的工作，从学生身份切换到社会人身份，了解视觉设 计师的职能，工作的流程和如何提升专业技能。 转行成为互联网一员的设计师：通过阅读本书，可以了解互联网环境的设计

6、团队是如何合作、如何思考的，帮助转行设计师 快速入门，并融入互联网工作氛围。 和视觉设计师打交道的相关人士：可以了解视觉设计师的工作和思考范畴。本书将感性的设计内容用文字的方式理性地传达 给读者，从而帮读者了解并理解设计师的工作。 公司的高层：通过阅读本书，领导们能更了解视觉设计师的感受、职业发展方向，从而使视觉设计师在工作中可以更好地体 现自己的价值，并且在职业发展道路上有更大的发挥空间。 如何阅读本书 本书的内容基本都是干货，是我的经历、经验的系统总结。书中的观点和论证均在我9年的互联网产品视觉设计工作中得到 了验证和提炼。本书从界面设计逻辑的层级分析到设计的细节分析，从工作沟通的合作方式

7、到设计语言的表达解释均有深刻阐 述。具体来说，本书从以下三个层面进行了讲述： 第一层讲解了互联网产品视觉设计师的职业规划、需要具备的能力，这部分内容可以帮助入门级的设计师进行技能储备，帮 助中级设计师对自己的职业生涯进行规划，帮助设计管理者确定招聘准则。 第二层讲解了设计方向和设计方法，一些设计方法可以帮助大家在互联网的工作中快速论证和自省设计是否是准确合适。同 时还讲解了大型改版设计前期调研该如何开展。 第三层讲解了深入设计和确立视觉理念的相关知识，这部分内容比较专业，技术性更强，书中会用大量的例子来说明和解释 视觉理念及一些确立视觉理念的方法论。 本书一共分五章，具体内容安排如下： 第1章

8、讲述互联网产品及其视觉设计概念，旨在让读者对互联网产品有一个整体的了解。作为一名合格的互联网产品视觉设 计人员，了解这些内容有助于形成正确的设计观，也就是找到设计方向和设计理念。这一章还讲解了互联网产品视觉设计师的职 业规划、需要知道的5个关键点和需要掌握的4种学习方法，这些都是形成设计理念的基础。 第2章是在第1章的基础上对设计的方向和理念进行宏观性的剖析。这一章首先明确了战略和用户对于互联网产品视觉设计 人员来说意味着什么，接着深层剖析了对互联网产品视觉设计人员非常重要的一个概念层级，包括什么是层级、为什么要 掌握层级、如何建立层级等。只有掌握了层级，才可能成为一名合格的设计师。本章最后系

9、统介绍了视觉设计的方法和流程，这 部分内容旨在帮助设计师在掌握了层级，有了成为一名合格设计师的潜质之后，知道如何开展设计工作。这一章的内容既能够帮 助个人快速处理和制作设计，又可以帮助团队规范设计流程和方法，提高团队效率。 在掌握了第2章的宏观知识后，第3章开始围绕细节设计展开讲解。这一章主要包括两大块内容设计元素和颜色搭配， 元素颜色作品，所以掌握了这两部分内容就可以设计出令人拍案叫绝的作品。这一章从颜色代表的情感、颜色的模式、颜色 选取的两种方法等角度详细介绍了颜色搭配的方法；从图标的类型、像素、体量感、选择、动效设计、使用情况等方面介绍了图 标的使用方法；同时还对文字和表单的设计进行了详

10、细分析。 在了解了设计的方方面面之后，本书指出让设计师进一步提升的方法，也就是第4章要介绍的内容回归设计理念。这一 章告诉视觉设计师在设计完毕后要进行反思、自省，提炼设计理念，论证设计方向，这样不仅能让作品有感性的视觉传达、理性 的理论支持，还能让设计师找到不足、积累经验。要想进阶为更高级别的视觉设计师，本章内容是必学的。 前面4章是视觉设计师进行创作的完整流程，是一个完整的视觉设计工作链，在这个链条上每一环都是后面一环的支撑，缺 一不可。但是在这个链条之上必须配以设计规范，才能让其更加稳固，这就是第5章要讲解的内容。第5章在明确了设计规范的 重要性之后，给出了制定规范的5大原则和具体流程，最

11、后还辅以具体的案例，让读者在掌握理论层面的知识后，还能通过他人 的成功经验知道自己的工作如何落地！ 希望本书能够唤起读者在互联网产品的视觉设计过程中的一些思考，同时也希望本书能使读者比较深入地了解我想要表达的 对互联网产品的视觉设计的理解。 资源和勘误 书中的图片都是进行示意的设计稿，价格和数字都仅为举例需要。由于经验和精力有限，本书难以全方位从点滴细节中深入 而系统地解释互联网产品的视觉设计。如果能帮助大家认识视觉设计师的岗位，理解视觉设计师，那么对于视觉设计师以及我本 人来说，已经足够了。 如果你有任何针对本书的宝贵意见或建议，欢迎发送邮件至邮箱naonao_。期待能够得到你的真挚反馈。

12、致谢 首先要感谢我的家人在我写作过程中给予的支持，他们是我坚强的后盾。 我还要感谢在我的工作过程中帮助我的朋友和同事。刚毕业时，我遇到了一位非常负责的领导王索夫，在他的指引下我做了 一年的交互设计，这为我的设计逻辑打下了非常扎实的交互基础。他曾经说：如果你“吃透了”产品逻辑，那么你的设计层次将 与别人不同。感谢陈扉、郑砾在腾讯工作时对我的设计作出的非常细致的点评，特别是郑砾不厌其烦地和我一次次看稿子，细细 探讨修改，给出了非常专业的意见。 感谢张振虎和邓佳佳让我的设计变得更加专业。特别感谢nikita彭晓红，让我的设计理论得到实践和认可。 感谢杨晓平。在2014年的时候我就有写一本书的想法，但

13、是苦于不知道如何写，如何出版。2015年年初，我将这个想法告 诉了他，是他让我认识了杨福川。 最后感谢杨福川和孙海亮，一次次为本书出谋划策，引导我，使我能将所想、所得付诸文字，直至付梓。 第1章 认识互联网产品视觉设计 1.1 什么是互联网产品的视觉设计 互联网的发展，让我们的生活越来越便利。用户在追求产品功能便利的同时，对界面品质的追求也越来越高。互联网产品的 视觉设计既是对互联网产品的包装，也是对互联网产品的一种解释。越来越多的人对界面的视觉设计产生浓厚的兴趣，想进一步 了解什么是互联网的视觉设计。 第1章 认识互联网产品视觉设计 1.1 什么是互联网产品的视觉设计 互联网的发展，让我们的

14、生活越来越便利。用户在追求产品功能便利的同时，对界面品质的追求也越来越高。互联网产品的 视觉设计既是对互联网产品的包装，也是对互联网产品的一种解释。越来越多的人对界面的视觉设计产生浓厚的兴趣，想进一步 了解什么是互联网的视觉设计。 1.2 互联网产品视觉设计师5项关键能力 互联网产品的视觉设计师不只是对界面或软件进行配色排版、Icon设计等，更需要对用户（界面或软件使用者）、使用环 境、使用方式进行定位，并最终为界面或软件用户服务（设计）。这类视觉设计师进行的是集科学性与艺术性于一身的设计，简 单来说，他们需要完成的正是一个不断为用户制造视觉效果，并使之满意的过程。 有些设计师说，我从小学习美

15、术，素描、色彩都很棒，参加过国家级美术大赛，获得了很高的奖项。这些只能证明你的色彩 和构图能力得到了认可，基础扎实，但与互联网视觉设计师所要掌握的能力还是有一定差距的。 许多选择成为视觉设计师的从业者，是对设计富有热情和兴趣的。那么一名优秀的视觉设计师需要具备怎样的能力，才能胜 任互联网产品的视觉设计工作呢？ 一个优秀的互联网产品视觉设计师能力模型如下： 视觉设计师能力模型 1.专业核心知识 作为一名视觉设计师，需要具有扎实的美术功底和创造力，极好的色彩把握能力、布局能力和审美能力，能判别美感和设计 的优劣。不管是业余爱好者，还是受过专业训练的从业人员，专业技能这个核心竞争力都是不能缺失的。

16、视觉设计师的核心竞争力专业本身的核心能力 如前文所说，视觉设计中包含了“LOGO、banner、icon、界面设计、活动专题、为介绍产品功能而进行的动画设计 等”，那么美观、隐喻准确、容易令人识别的icon就需要塑形能力。 色彩的搭配、构图的完整、字体的设计等是设计banner的基础能力。排版、配色、对比等是设计界面的基本能力。 为什么要掌控这些能力？ 排版是把文字、表格、图形、图片等进行合理的排列调整，使版面达到美观的视觉效果。最常见的网页布局错误之一是定义 了不正确的行高。行高是定义一行文本的高度，所以我们必须按照文本字体大小来设定行高。 另外需要定义标题周围的margin值。标题其实是与

17、它下面的段落相关联的，而不仅仅是两个段落的分割符。所以标题与下 面段落的距离应该小于它与上方段落的距离。 为了确保可读性和专业性，在界面中尽量避免出现3种以上的字体，使用过多的字体会干扰用户而且让界面看起来很乱。相 反，较少的字体让界面显得干净易读。 配色简单来说就是将颜色摆在适当的位置，做一个最好的安排。色彩是通过人的印象或者联想来对人产生心理上的影响，而 配色的作用就是通过改变空间的舒适程度和环境气氛来满足消费者的各方面要求。配色主要有两种方式，一是通过色彩色相、明 度、纯度的对比来控制视觉刺激，达到配色的效果；二是通过心理层面感观传达，间接性地改变颜色，从而达到配色的效果。 视觉设计的运

18、用手法由图形、色彩、排版、构图、布局等穿插结合而成。对这些手法的把控力越强，设计核心能力越高。 界面排版 创造力人类特有的一种综合性本领。一个人是否具有创造力，是一流人才和三流人才的分水岭。它是知识、智力、能 力及优良的个性品质等复杂因素综合优化构成的。创造力是指产生新思想，发现和创造新事物的能力。它是成功地完成某种创造 性活动所必需的心理品质。 对于一名视觉设计师来说，发现和创新是基本要素之一，没有创造力，设计师的生命力也就没有了。 审美能力即艺术鉴赏能力，它让我们认识到什么是美，并且能评价美。审美能力是可以培养和提高的。多收集一些好的设计 作品，多去参观一些好的设计展览，有效地评价设计，都

19、能逐渐提高审美能力。 怎样有效地评价设计呢？大家有没有这样一种经历：看到一个设计稿，想到一点说一点，观点非常发散，最后变成了“指点 江山的大神”？ 评价设计先从设计的整体概况入手，第一印象让人接受是设计的第一步，从自己的角度看看用户是不是对这个设计有兴趣， 并且愿意阅读内容。这里所说的内容就是要表现给用户的主要信息，看看是不是完整表达了这些信息，有些设计师为了美感的表 现，往往会缺失对商业价值的表达。 界面整体的评判 下面的事例是当设计师接收到全场五折需求时，应该表现出全场五折，但是设计师很有可能烘托的是活动气氛，忘记或觉得 没有必要把五折信息放进设计里。就“五折命题”来说，下图中左边的分图表

20、达是准确的。 准确表达商业价值 整体分析后，就是细节分析了。从排版、流程、颜色等角度去判别内容是否安排合理，流程是否通畅，颜色和风格方向是否 一致。另外还有没有缺失的设计和多余的设计，并进行调整。 细节分析 当将这些都分析后，我们就能总结性地做出评价，看这个设计是不是有效和有价值。 2.产品&交互逻辑 为产品进行设计的时候，需要了解业务和产品需求。这些业务知识、产品逻辑或交互逻辑，能帮助视觉设计师更准确地将产 品理念和交互理念结合起来，通过视觉设计的包装，精确地传达给用户。 富有上下游知识，让设计循环，使产品更稳定和成熟 另外，准确地把握用户心理，对用户体验有深入的研究，具有对可用性测试结果评

21、估的能力，对用户操作流程及用户使用习 惯有深入理解，这些工作是需要团队协作的。例如可用性测试和评估，需要从事用户研究的专业人员对用户进行观察，进行结论 分析。只有在这些论点的基础上产出的设计才能满足用户的需求和诉求。 用户体验设计，最终是要落实到用户身上的。客观、中立的验证、分析、评估能力是一个视觉设计师的重要素质。无论个人 还是团队，设计的成果都需要通过客观测试才能算是合乎标准。 3.判别需求的能力 视觉设计师是一个非常看重专业度的岗位，相信所有的设计师都想工作伙伴认可自己的专业能力。一个经常采用盲目跟进产 品需求和交互设计稿这类工作方法的视觉设计师，是无法让人信服的。因为你的核心能力（创造

22、力、审美等）他们无法理解，而 和他们之间的逻辑沟通是缺失的，工作伙伴会潜移默化地认为这个视觉设计师是对交互稿进行色彩搭配的“美工”。视觉设计师 设计出的稿件，往往会被挑战和质疑，而视觉设计师即使在核心能力角度据理力争，也无法让他们改观，双方在两条平行线上交 流。那么视觉设计师的专业度又体现在哪些地方？ 判别需求的各个层面 专业度不等同于核心能力。在我们提供“核心能力”给我们需要设计的对象的同时，进行逻辑分析和用户体验研究之后，我 们还需要做一个具有判别需求能力的视觉设计师。对不符合逻辑的产品需求提出质疑，对缺失的交互逻辑进行补充，并能给出相 应的解决方案。 我问过一些设计师：“这个地方为什么这

23、么设计？它似乎不符合常理。”设计师回答：“产品经理要求这么做的。”或 者“交互稿上这么设计的”。这样的回答，好像是在撇清设计责任，但视觉设计师往往忘记自己也是这个项目或任务的一分子， 自己承担着为用户带来更方便或合乎常理设计的责任。 明确逻辑和步骤 请设计师大胆地向你的伙伴提出你的观点，和他们一起探讨，将更好的设计带给用户吧！ 4.精确的解说能力 设计师是设计作品的翻译官，我们需要把产品语言转化成用户能理解的方式进行传递，让使用它的人能读懂它、喜爱它。不 要吝啬自己的表达能力，该为自己设计说明的地方，释放自己的口才吧。 只有设计师是最了解自己设计意图的人，也是这个产品设计的第一个用户，设计师需

24、要对自己设计的界面有解说和包装的能 力，让别人能一眼看到设计中的特点和精髓。有些设计师设计完界面之后十分“吝啬”，没有设计说明，没有设计分析，发出一 封设计完毕的邮件后“任人宰割”，把自己的观点深埋在心里。接收方不知道设计师的意图，于是用自己的主观喜好去评判设 计。这样就导致设计师背后有一群指点江山的“大神”，设计师的工作积极性受到打击，对团队信任度和融洽度也造成影响。设 计师如果能够充分地说出自己的设计意图，让接收方理解，以及使理解不产生偏差，就可以省去不必要的沟通成本。 精确的解说能力 有时候设计师不知道怎么表达自己的设计意图，我们常常会听到这样的说明：“从用户体验的角度出发做出这样的设计

25、。 ”什么是用户体验？它是一句口号吗？或是万能回答的解释？设计师完全可以把自己分析的经过、考虑的各个方面解说给伙伴和 团队。 如果解说对象比较多，需要向领导汇报等，可以制作PPT进行演示，将设计过程、分析都详细演示。如果是小范围的解说， 可以在会议室或电脑前进行演示。在解说对象不适合面对面演示的情况下，可以运用邮件形式，将需要解说的局部突出说明。 PPT展示自己的设计和设计过程 在邮件中说明局部设计意图 小贴士：这既是表达设计的时机，也是体现个人专业度的时机！ 5.工具掌控能力 在这本书里我不会详细介绍这些软件该怎么运用，设计师的核心能力从来不会因为软件的限制而受到限制，希望设计师明 白，软件

26、只是实现效果的工具。但掌控工具却是不可忽视的能力，一个设计师很有创意想法，却不知道怎么实现，用哪种工具实 现最有效、最合适，也是不可取的。 众所周知，视觉设计师常用的软件包括：Photoshop、Illustrator、Sketch等。 设计师常用软件 这3类工具特点的比较： Photoshop是图像处理软件，它的专长在于图像处理，而不是图形创作，虽然最新的版本将矢量功能加入了这个软件，但 在矢量绘制上Illustrator更专业一些。不过Sketch绘制图片的曲线品质比Illustrator好。 现在是无线时代，App的诞生催发SVG格式的兴起，它是可缩放的矢量图形，可将矢量图形数字化，文件

27、也非常小。而这个 格式Photoshop是不支持的，Illustrator支持，Sketch也支持。 随着iphone手机的热卖和iOS7之后界面理念的诞生，毛玻璃背景效果受到广泛运用，这种酷炫视觉效果在Sketch中是可轻 易获得的，而在Photoshop中则需要一些复杂的制作过程。最新的Photoshop版本加入了手机端的尺寸和插件，使设计更加方 便。 Sketch最近成为一款火爆的设计工具，很多公司开始使用。对于App的设计来说，这款软件是设计利器，操作方便，功能 强大。当然它在创意图形时是有利的，而在创意图像效果时需要在Photoshop中制作完毕，并导入到Sketch作为元件使用。

28、毛玻璃设计效果 这3类软件各有利弊，是界面视觉设计中常用的软件，大家可以自行选择制作方式。 界面视觉设计师需要掌握：Photoshop或者Sketch，Illustrator，After Effects或者Flash。 界面视觉设计师技能等级划分 运营视觉设计师需要掌握：Photoshop，Illustrator，MAYA或者3ds Max,Flash。 运营视觉设计师技能等级划分 1.3 提升视觉设计师能力的4种学习方法 很多人不了解视觉设计师的价值，更直接地说，大多数视觉设计师没有体现出足够的、令人信服的专业度。那么如何提升视 觉设计师的能力呢？ 1.多看 视觉设计不是一蹴而就的创造工作，

29、它是不断迭代、不断更新的过程。这里的“看”指的是设计师能博览，能广泛涉猎，看 过好的设计、差的设计，能评判设计的优劣，这样视觉设计才会变得很美。 知识是瑰宝，如今与互联网相关的书籍非常多，视觉设计师可以通过多阅读用户体验的要素点石成金一目了然 等用户体验的书籍来提高相关用户体验的知识。或许你已经看过了，但反复看几遍你会发现每次理解都有不同，将现实中的案例 与书中知识结合，会有不同的思考维度。 用户体验相关书籍 经理用户力等书籍拓展了互联网相关知识，讲解了产品经理的工作情况、用户需求的挖掘。当然也可以参与一些 互联网交流的线上线下论坛。 2.多记 做记录或笔记是设计师一直忽略的积累方式。记得在大

30、学一年级的时候，我的专业课老师和我们分享了她保持30多年的习 惯做记录。她每到一个地区或国家，看到有趣的设计或者建筑，都会速写下来、记下来，或拍下来，这是对素材的积累。 互联网知识相关书籍 “好记性不如烂笔头”，每当你话到嘴边，却说不出口，觉得好像有什么事情要做却想不起来的时候，你肯定是感同身受 的。笔记对于设计师意味着什么？它可以帮助我们整理思路，积累和总结经验。 笔记不拘泥于形式 1）思路 作为一个设计师，笔记对我最大的帮助是让我清晰地看到整个设计过程。互联网产品的视觉设计在我眼中像是数学应用题， 解题过程就是设计过程，有它需要达到的目标和目的对象，清晰的思路使我能一步一步得出结论和答案。

31、你去做项目调研和竞品 分析后，才会确定最主要的设计痛点在哪里，才会知道你的竞争对手都在做什么，怎样才会做得与他们不一样，怎样做到更好。 而在这些过程中，笔记对于你的意义在于理清设计思路，记下你觉得是重点的地方，进行下一步的分析。视觉设计师可以分析色 彩，对比大小，计算在设计中运用过几种设计手法，做出判断，在设计中做加减法，确保自己的设计简洁而不简单。 2）积累 有时候你看到一些东西，当时觉得很有意思，但是不知道能用在什么地方，先记下来，等以后需要做某个设计的时候，记下 来的这些东西都可以为你的头脑风暴或是设计灵感带来很多启发。所以这个时候笔记的意义就是，帮助设计师积累。当你从各种 渠道发现灵感

32、的时候，收藏下来，记下来，写一些当时的想法，可能暂时用不到，但是有可能会成为今后你的设计项目中一个很 好的发展方向。现在有一些不错的网站可以帮助我们积累素材。 （1）花瓣网（）。“花瓣网”几乎是我每天必登录的一个网站，是一个帮你收集、发现网络上你喜欢 的事物的网站，一个简单的采集工具。用户可以将网上看见的一切信息都保存下来，简单上手。通过专属于“花瓣网”的浏览器 插件“采集到花瓣”快速完成信息的收集。不论是在家里，还是在办公室，只要有一台拥有网络的终端，只要拥有“花瓣 网”的账号，你就能轻松收集你喜欢的信息。这些信息不但附带原始的网页链接，还会以图片/视频的形式美轮美奂地呈现 在“画板”里。用

33、户在“花瓣网”会拥有多个自定义“画板”，用来收藏并分类展示“采集”成果。这个过程比我们在电脑里新 建一个文件夹还要简单实用，且看上去很美。“花瓣网”可以比作一个工具，一个帮助你收藏互联网上喜欢的东西的工具。采集 是第一步，是一个聚合的过程。 花瓣网 （2）站酷网（）。“站酷网”聚集了中国绝大部分的专业设计师、艺术院校师生、潮流艺术家等年轻 创意设计人群。其经常会举办一些有影响力的界面设计大赛。“站酷网”一直致力于促进设计师之间的交流与互励。同时，“站 酷网”还为设计师与企业搭建互相促进的桥梁，帮助优秀企业与优秀设计人才更好对接。 站酷网 （3）UI中国（）。UI中国的前身是iconfans，简

34、称IF，是一个以“设计师”为中心，本着“小圈子，大分 量”的原创理念，以沙龙、聚会、学习、交流、分享为核心，为设计师的工作与学习提供更多创作灵感和参考资料的网站。 UI中国 （4）Dribbble（）。Dribbble的口号是：你正在创作什么？它鼓励创作者上传个人作品，以及将正在 创作的作品发到Dribbble网站上。Dribbble是通过提供付费账户服务盈利，普通用户可以成为观察者，并且有机会去雇用作品 的创作者。一般来说，用户贡献作品的网站往往内容、质量、水平参差不齐，但Dribbble的作品整体质量却非常高，它有概念 稿、“飞机”稿，也有产品稿。多样性的内容让许多摄影师、设计师和其他创意

35、产业人士都喜欢在这里展示其未完成的设计，通 过与其他设计师的共同探讨来激发自己的灵感。 Dribbble （5）Behance（）。behance是著名设计社区，在它上面，创意设计人士可以展示自己的作品，看别 人分享的创意作品（上面有许多质量上乘的设计作品），还可以进行互动（评论、关注、站内短信等）。 （6）优秀网页设计（）。优秀网页设计里有众多设计总监、资深网页设计人员、设计爱好者等分享他们关 于职业的技术、理念、思考和探索，同时为经验丰富的专家和积极努力的设计师提供一个良好的展示自我的平台。 Behance 优秀网页设计 总结：当你翻看笔记和记录时，里面有清晰的、每一步的设计过程，还有你的

36、思考和草稿。当你回头去翻的时候，会有一种 成就感，感觉自己做了很多事情，沉淀了很多事情。这是一种回顾方式，在下次设计的时候，你就能对之前的设计进行进一步的 提炼和提升。 3.多做 做视觉设计师专业度的核心表现。对于设计师来说，看得再多，记得再多，这些环节做得再好、再完美，也只是停留 在设计师自己的脑子里。有些设计师在设计前的沟通夸夸其谈，把想要做的设计说得非常好，结果理论落实不到实际，所有的想 法都只是空中楼阁，之前所有的努力都只是在佐证设计师思想的空泛和不切实际。所以我们不仅要能“做”，更要“做”得漂 亮。如果一天做一稿，那么一年就是300多稿，在多做的训练中，可以提升自己的专业水平。我一直

37、都是这样认为的：“做”决 定了一个视觉设计师是不是专业，“多做”是一个设计师最根本的专业素质。 4.多磨 磨一个设计，不断地迭代，在更新中“磨”制而成，是耐心、技巧、热情的综合表现。在一个项目的进程中，不可避 免地面临很多的挑战，优秀的设计师善于发挥“磨”的精神，他们拥有对视觉设计专业的无比热情，以无所不用其极的技巧，耐 心地磨一个又一个质疑方，最终让大家认同并帮助推动设计的实现。 1.4 视觉设计师的职业规划 我曾经在面试中遇到过带着移动硬盘来面试的应征者，打开文件夹后密密麻麻的设计文件呈现在我面前，作品质量参差不 齐。在听过几个作品阐述后，我不得不打断他，要求他在这些文件中挑选自己认为最好

38、的3个作品向我阐述设计理念和思路。而 我的面试时间从原本计划的30分钟，被迫延长至一两个小时，而且阐述的设计思路不明。而事实上在他打开文件夹的一瞬间我 对他的面试印象已经打了折扣，因为这是一类没有面试规划的应征者，更甚至于面试互联网界面视觉设计师的岗位，却希望从事 互联网运营视觉设计工作。而有些人根本不知道这两者的区别。那么如何确立自己的互联网产品职业规划呢？ 1.5 视觉设计与其他岗位同事之间的配合 1.5.1 团队合作 在互联网环境的工作中，视觉设计的工作是其中一个环节。以视觉为主要项目的工作流程与普通项目工作流程稍有不同。 有些公司省去“交互设计”这个环节，由产品和视觉分担这个角色。 普

39、通项目 以视觉为主要项目 可以发现，视觉设计师的存在，不是工作环节的全部。一个产品，需要各个环节的配合与合作，才能呈现给用户。而视觉设 计师所从事的不单单是对界面进行美化工作，而是结合了研究、探讨、沟通等综合工作。要更早地向合作伙伴秀出自己的设计， 以便于及时修正设计，并理解和思考合作提出的问题与方案。团队之间的合作需要互相理解、支持和信任。 第2章 设计方向和设计理念 2.1 产品战略与目标用户对设计方向的影响 要做出好的设计，你需要了解产品，并且知道你针对的设计目标人群。如果一名设计师连产品本身都没有去了解过的话，那 做出来的东西往往会一直徘徊在修改、审核、修改、审核这种无尽的循环当中。

40、在拿到原型图以后，我们要对整个产品的信息结构有一定的了解，要通过原型图充分地去理解每一个区域所要承载的信息类 型以及信息量。产品的信息框架越清晰，那么你做出的设计成功率就越高。 工作流程为产品需求交互设计视觉设计，对于这一点前文有图片演示，也就是说一般我们接到的是交互稿。 设计方向的定位是帮助分析页面信息优先级、核心行为的前提。 当设计师接到一个新的设计项目，并已经有了交互设计或产品需求文档时，首先需要考虑的是： 这是什么互联网产品？ 它的目标人群是哪一类？ 需要达到什么目的？ 信息内容重点是什么？ 这些问题决定了这个界面呈现出来是给谁看的、用的，给公司带来什么利益，以便决定设计方向。 第2章

41、 设计方向和设计理念 2.1 产品战略与目标用户对设计方向的影响 要做出好的设计，你需要了解产品，并且知道你针对的设计目标人群。如果一名设计师连产品本身都没有去了解过的话，那 做出来的东西往往会一直徘徊在修改、审核、修改、审核这种无尽的循环当中。 在拿到原型图以后，我们要对整个产品的信息结构有一定的了解，要通过原型图充分地去理解每一个区域所要承载的信息类 型以及信息量。产品的信息框架越清晰，那么你做出的设计成功率就越高。 工作流程为产品需求交互设计视觉设计，对于这一点前文有图片演示，也就是说一般我们接到的是交互稿。 设计方向的定位是帮助分析页面信息优先级、核心行为的前提。 当设计师接到一个新的

42、设计项目，并已经有了交互设计或产品需求文档时，首先需要考虑的是： 这是什么互联网产品？ 它的目标人群是哪一类？ 需要达到什么目的？ 信息内容重点是什么？ 这些问题决定了这个界面呈现出来是给谁看的、用的，给公司带来什么利益，以便决定设计方向。 2.2 贯穿全局的思维层级概念 互联网产品视觉设计其实是将很多的产品思维和逻辑条，通过梳理，串联起来成为一个完整逻辑，用美观的形式体现出来。 这些逻辑条都是有层级的，有的重要，有的次要。有的需要主动发现，有的是被动发现。有的可以阅读，有的可以操作。 就像我们写一本书的时候需要目录、大纲，画一幅画时需要从大框架开始打基础，而一个网站则具备网站地图，每个产品的

43、 每个页面和模块中都包含着层级思维。 2.3 视觉设计流程与方法 视觉设计流程是：研究分析，设计草案，设计辩证，设计提案。 视觉设计流程 第3章 细节深入 在确定好设计方向之后，接下来要做的就是深入设计，或者说细节设计。细节设计决定了界面的精致程度，一个界面要体现 的氛围基本都是通过细节实现的。所以说，细节设计是设计方向的一种具体表现。细节设计一般包括两个方面，一是添加设计元 素，二是进行颜色搭配。 3.1 细节设计的两个关键点 设计元素相当于设计中的基础符号，在界面设计中，它是一些小的装饰性模块，包括概念元素、视觉元素、关系元素、实用 元素。 3.2 颜色 对于互联网产品来说，转化率是产品做

44、得是否成功的衡量标准之一。在这个消费者只有3秒注意力的时代，我们应该最大化 地利用色彩、图片和文字信息来提高转化率。颜色作为情感表现的重要艺术语言之一，在视觉传达中起着至关重要的作用，颜色 能在短时间内传递信息和情感。合适的颜色能对用户产生情感影响，帮助我们将用户带到下一步行动中。 多媒体发展和读图时代的到来使得用户对于视觉设计的质量要求提高。我们更应该努力地寻求色彩情感的力量，在各个方面 寻求可以借鉴的营养，从内到外地提高我们的设计质量。 我们先来看一下以下这些图片的颜色给大家的感觉。 （1）哪条路一个人更敢走？ 色彩情感的影响力（一） （2）哪份食物更易引起食欲？ 色彩情感的影响力（二）

45、（3）哪个孩子你更想帮助他？ 所以色彩表达的感情非常直观，让人第一眼就能感受到设计师要传达给用户的感情，及其想要表达的设计方向。色彩让用户 的大脑发生化学变化，引导人们进行下一步行为。 色彩情感的影响力（三） 3.3 图标 图标的英文是icon，在桌面图标上代表的是软件标识，在界面中的图标一般是功能标识。图标是设计中经常使用的元素之 一，图标精致、细致，会使整个设计感观提升，让设计的档次得到提高。 3.4 文字 文字是传达信息最直观的表达方式之一，它是组成页面排版的基本模块。字体、字号的运用不同，可以给页面带来不同的气 质和页面关系。 界面中的字体，很少会做在图上，大多数字体由前端工程师来实现

46、，设计师一般会选择用户设备里自带的字体来进行设计。 如果在页面中用了兰亭黑、正黑等大量第三方字体，用户的设备没有这些字体就会以默认字体来显示，最终效果会和视觉稿有很 大出入。 文字的层级一般用字号去区分，如果既用字号、又用不同字体去区分信息，会显得凌乱、缺乏美感，因此字体的数量应做减 法，能用两种就不要用3种，能用一种就不要用两种。 了解字体设计的基础术语非常重要，这些术语在介绍字体设计的相关文章中经常出现。比如x-height（X字高）指的是从字 母的基准线开始往上到最矮字母的顶端的距离，当X字高的比例相对大一些时就能增加易读性。 在大多数情况下我们都选择使用系统自带的字体，如微软雅黑、宋体

47、、黑体等来定义标题和内容。但有时，我们在做 LOGO、banner设计时也需要通过对字体进行改造，来达到更加理想的效果。这时我们就需要掌握字体的一些最基本的设计原 则。 字体的基础术语 3.5 表单 在设计过程当中，随着设计经验的积累，表单的设计也越来越有讲究，以致形成一套设计准则或者规范。表单设计的重要 性，有时候会影响一个产品的成败。 第4章 回归设计理念 4.1 提炼设计理念 对设计方向、方法、过程进行提炼，发现共鸣处也进行提炼，这样更能巩固和得出设计理念。 提炼设计理念的闭环过程 例如在Material Design中，提炼的设计理念最重要的信息载体就是魔法纸片。 Material D

48、esign的设计理念魔法纸片 让这个可以层叠、合并、分离，拥有现实中的厚度、惯性和反馈的魔法纸片，拥有液体的一些特性，能够自由伸展变形。这 个设计理念突出纸片的魔法特性，这些是真实纸片所不具备的能力。例如：纸片可以伸缩、改变形状；纸片变形时可以裁剪内 容，当纸片缩小时，内容大小不变，而是隐藏超出部分；多张纸片可以拼接成一张；一张纸片可以分裂成多张；纸片可以在任何 位置凭空出现。 限制魔法纸片的个别效果：一项操作不能同时触发两张纸片的反馈；层叠的纸片，海报高度不能相同；纸片不能互相穿透； 纸片不能弯折；纸片不能产生透视，必须平行于屏幕。 这套理念引入了Z轴的概念，让Z轴垂直于屏幕，用来表现元素的

49、层叠关系。Z值（海拔高度）越高，元素离界面底层（水平 面）越远，投影越重。这里有一个前提，就是所有元素的厚度都是1dp。 所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，应该落回默认海拔高度。同一种元素，同 样的操作，抬升的高度是一致的。 Material Design的Z轴设计概念 所以，在设计前会有一些理论支持自己的设计，再从自己的设计中提炼出适合这套设计的理念。 第4章 回归设计理念 4.1 提炼设计理念 对设计方向、方法、过程进行提炼，发现共鸣处也进行提炼，这样更能巩固和得出设计理念。 提炼设计理念的闭环过程 例如在Material Design中，提炼的设计理念最重要的信息载体就是魔法纸片。 Material Design的设计理念魔法纸片 让这个可以层叠、合并、分离，拥有现实中的厚度、惯性和反馈的魔法纸片，拥有液体的一些特性，能够自由伸展变形。这 个设计理念突出纸片的魔法特