首页 iOS.& Swift Books 应用设计学徒

7
颜色 由Prateek Prasad撰写

在最后一章中,您专注于学习一个更加微妙但却有影响力的设计方面的基本面,排版。您在排版基础上的快速入门开始,然后从头开始构建了印刷量表。

在本章中,您将专注于另一个基本元素:颜色。

笔记:如果您正在阅读在灰度中打印的本书版本,我将通过项目文件从本章的信息部分中包含彩色版本的屏幕截图。在审查信息部分时,我强烈建议在他们看待它们。

像印刷术一样的颜色在设计中起着重要作用 - 以及日常生活中。颜色唤起某些情绪并引起大脑中的深刻心理反应。

颜色传送信息没有单词。

当您正确使用它们时,颜色帮助用户并提供最终交互的视觉反馈,例如突出显示错误并提供确认。

颜色对于建立品牌标识并帮助产品脱颖而出至关重要。它们为一家相关产品带来均匀性和凝聚力。虽然它们是设计的微妙方面,但颜色对用户的感知和记住您的品牌的影响作了很大影响。

利用颜色来建立自己的身份的产品的大实例是可口可乐的辉煌的红色,麦克拉伦的木瓜橙子和苹果在他们的产品中使用白色和包装。经常被低估,颜色建立一个与品牌标识的即时关联。

在建立调色板之前,您将通过一些颜色理论的基本概念来帮助您为您的项目挑选正确的颜色。

颜色理论的基础知识

简单地说,颜色理论是设计人员用于选择颜色的指导方针的集合。这些指南基于人类如何感知颜色,它们传达的情绪和消息以及您在混合时可以实现的视觉效果。

现在,您将通过了解颜色是什么来源的。

颜色是一种感知。当我们的眼睛看到一个物体时,他们向我们的大脑发送信号,我们的大脑用于定义颜色。

这些信号是由物体反射的光的波长。

彩色轮子

第一个色轮是由艾萨克·诺顿的1600岁的设计设计。设计人员今天仍然使用它来混合和匹配颜色来构建调色板。

色调

色调是颜色的名称:红色,蓝色,绿色,黄色,橙色等。

饱和

饱和度是色调的强度或纯度。高饱和度使颜色看起来明亮和充满活力,而不饱和的颜色更加清洗,微妙。

价值

值决定了色调的黑暗度或轻度,从纯白色到纯黑色。

遮荫

阴影是通过在不同量的黑色添加黑色而产生的色调。下面的图像显示了越来越多的黑色的红色红色红色。

着色

色调是通过在不同量添加白色而产生的色调。下面的图像显示了各种红色,随着增加量的白色增加了越来越多的白色。

色温

将色轮垂直分成两半。左半部分的颜色是 温暖的 颜色 - 红色,橘子和黄色。右半部分的那些是 凉爽的 颜色 - 紫色,蓝色和绿色。

对比

在颜色理论中,对比度是对象的视觉属性的差异,其与其他物体和自己的背景区分开。

颜色方案

颜色方案是基于颜色和谐的公式。在颜色理论中,颜色和谐是一组颜色,看起来很好。

单色方案

颜色方案的最简单形式是单色配色方案。您在颜色轮上以单个颜色开始,然后使用饱和度和值的知识创建变化。

类似的方案

类似的配色方案使用在色轮上彼此相邻的颜色,如红色和橙子或绿色和蓝色。

补充计划

互补的配色方案在颜色轮上使用彼此相对的颜色,如蓝色和橙色或红色和绿色。

分裂补充方案

分体式互补颜色方案在基色补充的两侧使用颜色。该方案提供与补充方案相同的对比度水平,但为您提供更多颜色以与之合作。

三合一计划

三合一配色方案使用三种颜色在色轮上均匀间隔,形成完美的三角形。

四分之四方案

四彩色方案使用在色轮上形成矩形的四种颜色,并且对角线是互补的对。

为您的项目找到合适的计划

虽然颜色是设计的重要组成部分,但它们决不是对每个项目的必需要求,无论是打印还是数字。一个信息网站,如博客或在线日记,可以提供伟大的体验,同时坚持使用白色背景上的黑色文本的单色调色板。

建立你的调色板

与构建类型的规模相比,您的调色板更加直接,因为您只需转换您已经使用的颜色即可重复使用的样式。这为您节省了手动复制粘贴前进的十六进制代码的麻烦。

将颜色转换为可重复使用的风格

现在,是时候完成这个应用程序的颜色样式了。创建一个新页面并命名它 颜色.

创建文本颜色样式

继续移动以创建文本颜色样式。加上另一个 30×30 ellipse (O)并给它一个 #000000 填充并创建一个名为的风格 文字/小学.

使用颜色样式的渐变

颜色款式不限于固体填充物;他们还可以举行渐变。应用程序中的电影海报使用渐变稀硫瓜剪辑使文本更加可见。你的下一步是使这个渐变是一个风格,所以如果你稍后需要更换件事,你只需要在一个地方做到这一点。

造型评分组件

有关定义调色板的最后一步,您将为评分组件创建样式。

应用颜色样式

前往你的 成分 页面以应用您刚刚创建的颜色样式。首先:海报。选择 背景渐变 从这一层 海报/捕食鸟类 component.

造型图标

在解决导航组件之前,需要时刻才能使用图标。选择各个图标路径 图标 frame.

更新详细信息屏幕

到目前为止,款式的款式很棒。由于该应用程序在大多数地方使用组件,因此Figma将自动制作更改的更改。您只需要更改应用程序的详细信息屏幕。

色彩样式的优点

毕竟该工作后,应用程序中的任何视觉效果都没有变化。但是,您已经介绍了灵活性,允许您更改调色板,然后反过来,应用程序的造型 - 而不会影响其余的设计。

关键点

  • 您学习了色彩理论的基础及其在设计方面的重要性。
  • 然后你了解了无障碍设计对比的重要性。
  • 您为应用程序的UI元素创建了颜色样式。
  • 然后,您将颜色样式应用于组件。
  • 最后,您了解了使用可重复使用风格的好处。

有一个技术问题?想报告一个错误吗? 您可以向官方书籍论坛中的书籍作者提出问题和报告错误 这里.

有反馈分享在线阅读体验吗? 如果您有关于UI,UX,突出显示或我们在线阅读器的其他功能的反馈,您可以将其发送到设计团队,其中表格如下所示:

© 2021 Razeware LLC

您可以免费读取,本章的部分显示为 混淆了 文本。解锁这本书,以及我们整个书籍和视频目录,带有Raywenderlich.com的专业订阅。

现在解锁

要突出或记笔记,您需要在订阅中拥有这本书或自行购买。