
假期归来,也许你还没找回上班的状态,但别人已经做好了一整年的工作、学习计划,努力向前奔跑了。
想要在新的一年提升自己、多学点技能,不妨了解一下这套详尽的设计 / 编程教程——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 中,它就能进行颜色识别,并为你搭配出专属调色板。