您当前网页浏览器版本较旧,影响您浏览本站的体验。了解更多今天不再显示
En
一起开工大吉,一起偷偷学习
一起开工大吉,一起偷偷学习
分享到:

假期归来,也许你还没找回上班的状态,但别人已经做好了一整年的工作、学习计划,努力向前奔跑了。

想要在新的一年提升自己、多学点技能,不妨了解一下这套详尽的设计 / 编程教程——Design+Code

如果你是一名程序员或设计师,可以利用它巩固你的编程 / 设计能力;如果不是,你也可以通过它一步步学会开发 iOS 应用,将你的 App 创意变成现实,也多一技以傍身。


△ 学习 iOS 11 设计篇:学习用色

2月新年活动期间,大家可在「数码荔枝」以官网 5 折不到的价格入手这套教程,并获赠多款软件订阅授权。

了解「数码荔枝」新年活动详情 >

 

Design+Code 包含 Swift、Sketch、React 等 16 门课程(持续新增中),以视频 + 图文的形式讲解如何为 iOS 系统开发应用,且大部分内容支持中文。即使你是新手,学起来也不会有太大压力。

入手一套 Design+Code 教程,你可以获得 60+ 小时讲解视频、5GB 电子书、10GB 素材包(均可下载至本地)。你可以随时、永久在电脑和手机上学习已下载的内容,或者在电脑网页、iOS 设备 的同名 App 上在线观看视频教程。

△ 16 门课程

△ 50+GB 下载资源

在官网注册 Design+Code 账户后,你有 7 天的时间可以免费观看所有视频教程。如果觉得这套教程很不错(一定会的),不妨在「数码荔枝」拿下它,在下班时间默默学习、成长。

2月新年活动期间,大家可在「数码荔枝」以官网 5 折不到的价格入手这套教程,并获赠多款软件订阅授权。

在前文中,荔枝君给出了 Design+Code 中一集关于色彩的视频教程,即使你无意折腾软件开发,也能从中吸取养分,更好地去制作 PPT 、编辑视频、撰写简历等。

以下,是荔枝君色彩课程学习笔记,跟大家一起分享:

1. 三原色、三间色、三次色

如果一开始不知道用什么颜色,挑选下面这些相对不易出错:

  • 色光三原色 (Primary Color) : 红、绿、蓝 ;
  • 三间色 (Secondary Color) : 橙、紫、绿;
  • 三次色 (Tertiary Color) :紫红、蓝紫、蓝绿、黄绿、橙黄、橙红。

 

例:iOS 系统的用色

色彩选择:

  • 蓝色:整体系统的通用色;
  • 红色:多用于破坏性动作,如「删除」;
  • 绿色:多用于成功动作;
  • 其他颜色:品牌区分(黄——备忘录;粉红——Apple Music)。

色彩用法:

  • 用少量、鲜艳的颜色引导用户的动作;
  • 中性色彩用于无交互的元素;
  • 尽可能尝试使用单一颜色传达主要诉求。

2. 色相、饱和度与明度

推荐使用 HSB 而非 RGB 来调节颜色:

  • RGB 表示红色、绿色和蓝色的比例,让人难以进行颜色的调节和判断;
  • HSB 表示色相(Hue)、饱和度(Saturation)和明度(Brightness),我们可以更明确如何调节颜色。

3. 单色配色

采用不同深浅的单色组合较简单,效果还很好:

方法一:选定主要颜色后,用 10%~90% 的白色或黑色进行遮罩。
方法二:取色器取色时改变「明度」和「饱和度」,只保证「色相」值大概相同(红色还会是红色)。

4. 相似色

运用相似色可以让画面颜色更丰富,且不易出错。

方法一:在色环中选取一个主色,然后加入与它相邻的颜色: 红色旁边是橘色,再旁边是黄色。
方法二:在取色器中调整「色相」值约 30~50 来得到新的相似色。

5. 互补色

互补色对比强烈,可以让画面更有活力,但不好驾驭。

方法一:寻找色环上主色正对面的颜色。
方法二:在取色器上,将色相拖拽约半条光谱的宽度,即可轻松找出互补色。

6. 中性色调

中性色调的使用有利于用户将注意力转移到重要的内容(鲜艳色)上。

方法: 在取色器上选择一个颜色,将其饱和度的数值调到近乎于 0。接着,再调高或降低明度。

7. 颜色对比

将对比明显的颜色前后搭配,有利于用户阅读内容。

8. 运用图片中的色彩

大自然鬼斧神工,总是能创造出和谐而美好的色彩,我们可以从照片中提取色彩搭配。

看到不错的设计作品,也可以萃取其中的配色方案。

9. 配色神器推荐

Eagle [Mac/Win]

Eagle 是一款知名的图片 / 素材管理工具,它能将每一张图片的主要配色提取出来。

现在,在手机淘宝的「数码荔枝」商城中入手Eagle + 坚果云套装,可享受特殊优惠!

Sip [iOS]

Sip 能让你自由选择图片中的色彩,并进行搭配。

Adobe Kuler [Web]

在线导入图片,Adobe Kuler 就会为你提取出主要配色。当然,你还可以手动调整取色点的位置更改颜色,直到满意为止。

Dribbble [Web]

Dribbble 是一个知名的设计网站,它为每一张图片都提供了可下载的色彩搭配(.aco)。

Material Design color system [Web]

来自 Google 的 Material Design 配色指南

uiGradients [Web]

uiGradients 提供了非常多的渐变配色方案。

Skala Color [Mac]

Skala Color 是一款优秀的取色器工具,支持 Swift 和 HEX。

Contrast [Mac]

Contrast 确保你的文字颜色在界面中非常明显,不会因为太淡或对比度不高而看不清。

Coolors.co [Web/iOS]

Coolors.co 能快速生成配色方案,遇到喜欢的颜色,可以将其锁定并继续浏览, 直到你搭配出理想的配色并导出。

Color Juicer [Mac]

只要将图片拖拽到 Color Juicer 中,它就能进行颜色识别,并为你搭配出专属调色板。

文章评论

发表评论

您忘了输入昵称
为了更好地彼此沟通,评论字数不得少于5个

订阅我们
联系我们

点击下方按钮,即可发起对话,通常我们会在 10 分钟内回复您。

( 客服在线时间:上午 9:30 至晚上 9:30 )

QQ 交谈 网页在线咨询
填写有效的邮箱地址
请输入有效的反馈内容,不少于10个字