0 芝士堆堆🧀

0.1 艺术设计。

可参考《极地湾基本艺术设计》系列教程！

(o゜▽゜)o📕

0.2 作品优化。

0.2.1 优化占用空间。

图像：倘若风格允许，不妨将所有的位图换画成矢量图形。相比位图，矢量图可以节约大量空间，同时显示清晰、便于编辑；

音频：

音效：杜绝重复，所有音效可统一放在独立角色里管理，通过广播的方式召唤音频播放；有些时候（不求音质），可以利用其他音频处理软件（最简单的：Format Factory）压低音频码率，节省更多空间；

音乐：若是已有成曲，照↑处理即可；若是追求极致，不妨用 Scratch 音乐拓展作原生音乐，这样既保证音质，又节约空间；

极地湾（Scratch音乐+音效）：3,309,279 bytes极地湾（Scratch音乐+无音效）：1,183,451 bytes

↑附对比↑音频占用的空间↑

程序：需要一定编程技术，可用自制积木节约重复代码，用克隆节约角色。

Liny 是个理科黑洞，就不在这里丢人现眼了（（

0.3 创作技巧。

0.3.1 编辑器。

• 你知道吗？可以通过 Ctrl + 或 Ctrl – 调整画面缩放。

默认

放大（Ctrl＋）

缩小（Ctrl－）

0.3.2 绘画技巧。

1、锚点：单击添加，双击删除

2、这个框框其实可以输入小数的

0.3.3 Gandi Bug。

Gandi IDE 充满了 Bug，但也是协同创作的唯一平台，诸位莫得选择。

有时候上传文件后，SVG造型会变成问号：

心　肺　骤　停

解决这个问题的方法：清除浏览器数据

『★Gandi·奥义·清除浏览器数据★』

之后刷新 Gandi 网页再上传一次就好。

没想明白是什么原理，但是确实有用（魔法、是魔法！）

---

1 景物画风

1.1 颜色：纯色（+无描边）。

这是Scratch里最简单的画风之一，用内嵌编辑器即可轻松创作。更进一步，甚至可以完全抛弃图形描边，获得极其简洁的画面。

默认角色　→　纯色、无渐变、无描边

那到底如何配色呢？

极地湾作例，颜色设计淡雅，纯色+轻渐变。

1.1.1 颜色和谐。（至少看起来）

调色需要一点点美术积累。调得颜色不扎眼睛，就算设置成壁纸看一天都不会累就成功啦！！

恰到好处的颜色

格外突出

1.1.2 饱和度适中。

很好的教科书级淡雅

很好的纯精神污染（极高饱和）

1.1.3 亮度统一。

亮度需要根据光照设定，倘若真需要变暗，请务必让它们一起变暗。

要黑一起黑

整个串最亮的崽崽

1.1.4 透明度按需取用。

透明度就需要按需取用了，这里举一个有意思的实用案例：光。

1、取亮黄色画圆

2、辐射渐变至圆周透明

3、适当降低中心处不透明度

4、喜提光晕一圈

1.2 阴影：善用渐变。

同时可辅以轻阴影来表现立体感，丰富画面。设定好光源位置（光从哪里照过来？）后就可以动手添加了。

那么如何绘制这样的阴影呢？只需要设置一个由深色到浅色的渐变色即可。

还是以这个丸子为例：设定光从右上方照射过来。

1、给丸子们加上简单阴影（此时阴影在左边）

2、丸子带阴影 旋转到需要的角度（此时阴影在左下方）

3、完成！（极地湾里好多东西都是这么画的阴影）

1.3 图形：善用变形工具。

辅以上述阴影技巧，变形工具可以帮助我们画出平面的3D图形。

芝士变形工具

这里以一个棱角分明的柱子为例：

画一个柱子

1、变形工具可选中多点

2、按Shift有方向地移动锚点

3、也可以单独选定任意点移动

4、复制一个，水平翻转

5.1 既可以用线段工具直接画一个小平行四边形（不标准的）

5.2 也可以画一个正方形

5.2 然后用变形工具变形

5.2 旋转

5、可见两种方法效果相差无几。

6、无轮廓，加填充

我们假设光从左上方来。

几个面里，一般正对光源最亮，背对最暗。

7、微调各方面亮度（需要一定美术基础）

8、设定轻渐变，画龙点睛

9、成品

今日技巧堆 ( •̀ ω •́ )✧

配色：颜色和谐、饱和中等、明暗统一、透明按需取用；

妙用中心渐变至透明绘制光晕。

画轻阴影，只需微调亮度即可；

画重阴影，阴影处亮度很低时会发灰，可为其提高饱和度以缓和；

Scratch 编辑器的颜色渐变只有水平或垂直，可设置完渐变色后再旋转图形。

变形工具：按着shift可以多选锚点（就是棱角那种小蓝点）；

按着shift拖动锚点可以有一定轨道方向性（Liny 描述不出来www自己去体会体会……）；

选中一个锚点即可调整为曲线/折线：

曲线/折线

在拼合图像出现小缝隙时可以微调锚点位置以填补。

小问题

现在好了

这篇文章的赠品：一个金币

那么这个金币是怎么画出来的呢？

1、取一个合适的填充色，设置轮廓为 0

2、画个椭圆

3、复制一个，往上平移

4、把下层的颜色调深

5、简单渐变（1）

6、简单渐变（2）

7、把底层的图形复制，稍偏移，以达到填充厚度的目的

8、完工

---

2 用户界面

2.1 图形：直角+扁平。

不论是原版还是 Gandi 编辑器，画直角的图形永远是最简单的。极地湾的UI设计即全直角化，简洁而高效（不论是制作上还是使用上）。

1、画一个正方形很简单吧

2、按住Alt键再拉动小圆点可以对称变形图形（实用技巧+1）

3、放字上去

↑这就是个对话框↑

2.2 文字：字号+间距+排列

文字排版是影响视觉观感的关键要素。好的排版可让用户轻松阅读大段文字。

那么，如何利用排版，让大段文字显得井井有条呢？

2.2.1 字号。

把重点（标题、编号）放大↗↗↗　把内容（正文）收紧↙↙↙

一致的字号

上帝赋予了人类不同的字号

2.2.2 间距。

控制合理的间距会让画面显得高级，同时便于阅读。

留意行间距，避免造成文字堆积；

保持页边距（即内容到舞台边缘的距离），让画面大气从容；

控制板块间距（即文字段落/图片之间的距离），让布局分明易读。

【一开始的样子】还能读？要展开详细介绍的话就不一定了

【行间距 ON】好些了吧？（注意：一段文本里的行间距要一致）

【页边距 ON】高级起来了？（可适当缩小内容留出页边距～）

【板块边距 ON】文字排版基础完全体！

除了以上所讲的简单排版之外，根据需要压缩（精炼）文段内容也是很有用的技能。能否应用高效精简这个技能就看诸位的语文水平了（（（（

2.2.3 排列。

应用类文字需要排列整齐。这可以让页面显得工整。

【×】行首不对齐

【×】段首不对齐

2.3 图画排版：间距+平衡

图画排版还是很简单的。主要让版面看起来和谐就好。同时，这个“图画”所指的也不一定是图画，还可以是其他装饰元素。

平衡／重心

平衡：比方说，要在右下角添加装饰元素，那么左上角就应该有合适的（如：相似大小、相似设计）的元素与之呼应。同时注意间距问题。

右下、左上对角平衡

重心：让画面看起来稳定。这也不失为一种好方法，特别是在展示需要认真阅读的内容时。

重心在下

今日技巧堆 ( •̀ ω •́ )✧

UI窗口：直角矩形。

文字排版：字号有致，标题可适当放大、加粗，正文字号保持一致；

间距到位，保有合适的行间距（一般间距比字高矮一点点就好），留出页边距、板块间距，不要让东西堆积在一起；

排列整齐，一定、一定要对齐文字。

如果能给字体加粗，那就更好了。（小技巧：可以通过其他矢量软件编辑完，字体转轮廓后导入回 Scratch 实现）（进阶技巧，按需学习取用！）

画面平衡：画面中心与元素中心构成一条直线，直线上元素应平衡而互相呼应；

画面重心：使重心稳定在某处，适用于文本需要认真阅读时。

最重要、最重要的：以上设计的最终目标是『看着舒服』，只要达到这个目的的，就是好的设计！

---

3 更多配色

3.1 有什么用？

从游戏内容到UI都需要颜色，搭配好可让人耳目一新，不当的则略显诡异。

√（淡雅）

×（万恶之源：高饱和）

3.2 自然的颜色

怎么获取自然的颜色？　→　答案自在其问之中：从自然来。

大自然赋予这个世界缤纷的颜色，赤橙黄绿青蓝紫，皆可为我所用。

和谐而美好

一般来说，取任意纯色即可满足需要↓

很好的颜色

你看，多和谐（#6fbe00）

相比于自己无中生有，这简单多了。

3.3 更多颜色

有了一个基本颜色之后，就可以在其基础上调出更多颜色了。

颜色、亮度、饱和度、不透明度，都是可以调的。

调！都可以调！

然后你就能得到很多颜色：

小色卡

3.4 有什么用？

棒！我们已经知道了好颜色的来龙去脉，现在将它们运用起来吧！

3.4.1 画UI。

亮度低，饱和度适中的适合当作文本颜色：

就像这个深一点的绿色（#6fbe00）

同时，这个颜色也可作为程序的主题色，应用在窗口、按钮边框等地方。

亮度高，饱和度低的适合当作大面积底色：

差点找不到你

于是一个配色和谐的窗口就诞生了：（底色甚至可以再淡点）

3.4.2 画画。

从画里来的颜色自然要回到画里去！

取几个相邻色，拼在一起就是新的画啦！

还过得去的树

今日技巧堆 ( •̀ ω •́ )✧

颜色从哪里来？　→　拍照取色；

获得更多颜色？　→　调颜色、亮度、饱和度、不透明度；

颜色有什么用？　→　画UI、画画。

收藏积灰，动手去试试（（（

---

4 临摹仿真

4.1 有什么用？

若需要的元素在现实中有原型，不妨从临摹入手创作。现举一例↓

真的极地湾

画的极地湾

这样一来，画面会足够自然。相比自己无中生有，这样简单多了。

4.2 怎么入手？

找到临摹对象，置于底层。

安置原图

笔加粗，描轮廓

发现选中点之后，没有手柄出现

点击上方的 曲线 按钮

变成这样就可以了

• 小技巧*

这个时候发现：动一个手柄，两手柄却一起转动，且始终保持在一条直线上（就是没法单独调），那么只需要切换到另一个角色，再回来即可分别调整。

每到转折处：多点一个点，再调整

拐角只设一个锚点容易产生锐角

多点一个就好了

就这样，轮廓画出来了

填色，删除轮廓：

然后就是微调了

今日技巧堆 ( •̀ ω •́ )✧

选好图片：要轮廓分明，颜色准确（尽可能纯）的；

控制好遮挡关系；

重点：追求看着像

最后，需要耐心！

祝成！！！

(o゜▽゜)o☆

教辅资料：极地湾芝士锦囊+艺术设计+交互设计[教程配套材料]

这篇文章将以极地湾为例，展示一种人性化的交互设计。

---

5 交互

5.1 前言－是何物、有何用？

是何物？　→　简而言之：你和程序的互动，如程序对按钮点击的反应、弹窗等。

有何用？　→　是软件体验的核心，合理、人性化的交互设计使软件易于使用。

（以上非严谨释义，有误敬指！）能力有限，详阅　→　什么是交互设计？

5.2 按钮

按钮很重要：使用频繁，功能关键。

按钮的设计关键：让用户知道『这是个按钮，点击会发生更多事情』。

一般来讲，只需要为按钮设计一个别于背景的边框/底色即可：

有能力的还可以为其绘制投影。

按钮（底色+边框）

如果点击这个按钮会跳转到新的页面，不妨试试『→』和『>』：

带箭头的按钮

在一般为键鼠设计的软件中，还可以让按钮在接触鼠标时作出反应（变大/变色……），告诉用户：这个别致的小方块不是普通文本！

前往体验　→　教辅资料：极地湾芝士锦囊+艺术设计+交互设计[教程配套材料]

供参考　↓　（涉及到简单非线性变化：+【终值-现值】÷【速度】）

特效堆

5.3 窗口

从大窗口讲起。大窗口的主要用途是展示内容、进行操作。

大窗口的组成：窗口本体+关闭按钮+更多内容元素……

普通的大窗口

可以通过底垫一层半透明以表达层级关系：这个窗口在上层。

这样也顺便能暗示用户：不用分心，不必管原本的界面里有什么，现在只需操作这个窗口即可，有点稳定、踏实的感觉。（？）

5.4 弹窗

这是小弹窗。

5.4.1 与大窗口的异同？

同：弹出在最顶层，都展示内容。

异：

小弹窗：简单小巧，目的为『告知』；轻点即去。

大窗口：声势浩大，目的为『大量展示』和『寻求操作』；一般有单独的关闭按钮。

5.4.2 小弹窗的特性？

轻巧：窗口面积小，轻点窗口/屏幕即可关闭，不影响其他任何内容：

就是一个迷你的、呼之即来、挥之即去的全屏小提示罢了。

长这个样子

其意义即告知，类似积木『说……』。

5.5 重要弹窗

一个显示重要内容的、操作后会产生关键影响的、需要反复确认的弹窗。

特性：会有强制倒计时和确认按钮。

实现思路：显示弹窗→等待五秒→显示按钮，并且唯点击按钮才能继续操作。

强制倒计时，迫使用户阅读说明，充分思考。

等待后才显示确定按钮

怎么关闭重要弹窗：设置取消按钮或让用户绿旗重启

（→参考极地湾：开启新游戏并丢失旧存档的重要弹窗提示）

今日技巧堆 ( •̀ ω •́ )✧

按钮：让用户知道『这是个按钮，点击会发生更多事情』；

窗口：大窗口：底层垫深色半透明；

小弹窗：轻轻地走，正如它轻轻地来；

重要弹窗：强制倒计时。

按钮的边框粗细应与文本笔画粗细相近！

附赠教辅资料：极地湾芝士锦囊+艺术设计+交互设计[教程配套材料]