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

《视觉链：互联网产品的视觉设计理念与规范.html》由会员分享，可在线阅读，更多相关《视觉链：互联网产品的视觉设计理念与规范.html（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章开始围绕细节设计展开讲解 这一章主要包括两大块内容 设计元素和颜色搭配 元素 颜色 作品 所以掌握了这两部分内容就可以设计出令人拍案叫绝的作品 这一章从颜色代表的情感 颜色的模式 颜色 选取的两种方法等角度详细介绍了颜色搭配的方法 从图标的类型 像素 体量感 选择 动效设计 使用情况等方面介绍了图 标的使用方法 同时还对文字和表单的设计进行了详细分析 在了解了设计的方方面面之后 本书指出让设计师进一步提升的方法 也就是第4章

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

11、工作如何落地 希望本书能够唤起读者在互联网产品的视觉设计过程中的一些思考 同时也希望本书能使读者比较深入地了解我想要表达的 对互联网产品的视觉设计的理解 资源和勘误 书中的图片都是进行示意的设计稿 价格和数字都仅为举例需要 由于经验和精力有限 本书难以全方位从点滴细节中深入 而系统地解释互联网产品的视觉设计 如果能帮助大家认识视觉设计师的岗位 理解视觉设计师 那么对于视觉设计师以及我本 人来说 已经足够了 如果你有任何针对本书的宝贵意见或建议 欢迎发送邮件至邮箱naonao mail 期待能够得到你的真挚反馈 致谢 首先要感谢我的家人在我写作过程中给予的支持 他们是我坚强的后盾 我还要感谢在我

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

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

14、既是对互联网产品的包装 也是对互联网产品的一种解释 越来越多的人对界面的视觉设计产生浓厚的兴趣 想进一步 了解什么是互联网的视觉设计 1 2 互联网产品视觉设计师5项关键能力 互联网产品的视觉设计师不只是对界面或软件进行配色排版 Icon设计等 更需要对用户 界面或软件使用者 使用环 境 使用方式进行定位 并最终为界面或软件用户服务 设计 这类视觉设计师进行的是集科学性与艺术性于一身的设计 简 单来说 他们需要完成的正是一个不断为用户制造视觉效果 并使之满意的过程 有些设计师说 我从小学习美术 素描 色彩都很棒 参加过国家级美术大赛 获得了很高的奖项 这些只能证明你的色彩 和构图能力得到了认可

15、 基础扎实 但与互联网视觉设计师所要掌握的能力还是有一定差距的 许多选择成为视觉设计师的从业者 是对设计富有热情和兴趣的 那么一名优秀的视觉设计师需要具备怎样的能力 才能胜 任互联网产品的视觉设计工作呢 一个优秀的互联网产品视觉设计师能力模型如下 视觉设计师能力模型 1 专业核心知识 作为一名视觉设计师 需要具有扎实的美术功底和创造力 极好的色彩把握能力 布局能力和审美能力 能判别美感和设计 的优劣 不管是业余爱好者 还是受过专业训练的从业人员 专业技能这个核心竞争力都是不能缺失的 视觉设计师的核心竞争力 专业本身的核心能力 如前文所说 视觉设计中包含了 LOGO banner icon 界面

16、设计 活动专题 为介绍产品功能而进行的动画设计 等 那么美观 隐喻准确 容易令人识别的icon就需要塑形能力 色彩的搭配 构图的完整 字体的设计等是设计banner的基础能力 排版 配色 对比等是设计界面的基本能力 为什么要掌控这些能力 排版是把文字 表格 图形 图片等进行合理的排列调整 使版面达到美观的视觉效果 最常见的网页布局错误之一是定义 了不正确的行高 行高是定义一行文本的高度 所以我们必须按照文本字体大小来设定行高 另外需要定义标题周围的margin值 标题其实是与它下面的段落相关联的 而不仅仅是两个段落的分割符 所以标题与下 面段落的距离应该小于它与上方段落的距离 为了确保可读性和专业性 在界面中尽量避免出现3种以上的字体 使用过多的字体会干扰用户而且让界面看起来很乱 相 反 较少的字体让界面显得干净易读 配色简单来说就是将颜色摆在适当的位置 做一个最好的安排 色彩是通过人的印象或者联想来对人产生心理上的影响 而 配色的作用就是通过改变空间的舒适程度和环境气氛来满足消费者的各方面要求 配色主要有两种方式 一是通过色彩色相 明 度 纯度的对比来控制视觉刺激 达到配色的效果 二