SwitchyAgain 开发杂谈（六）图标

这篇来聊聊 SwitchyAgain 的图标的设计。当前的图标是在原来的 SwitchyOmega 的基础上在内圆里加了两个对称的竖直方向的椭圆图案。除此以外没有加其他元素了。这看起来就变成了一个看起来像是脸的圆环加看起来是一对眼睛的两个椭圆形。

这个设计的过程并不简单，虽然 SwitchyOmega 的图标本身就有公开 SVG 代码，只要在这个代码基础上去修改就好。但难的还是对于这种扩展程序的图标的设计，为了保证其能有是在 SwitchyOmega 的基础上去继续开发的意义，就不能把原有的元素给抹去了。

最简单的图标设计，还是直接重头开始，并且搭配 AI 的设计建议，来做出一个能够用到扩展程序的图标上的设计。就 SwitchyAgain 本身的含义来说，也不会太难，只是直接用字母 S 和字母 A 来设计的话应该也行。

但考虑到 SwitchyOmega 的图标的设计的确很好看，本身也是一种在此基础上的重构迁移，那么就只能这样在这个圆环的基础上去设计新的图标了。这个圆环的设计，实在是很棒，放到扩展列表里辨识程度很高，也很适合放到工具栏。然后使用了不同的代理就换成不同颜色的圆环，有代理混合的情况就把内圆和圆环用不用的颜色去显示。同时这个圆环，又刚好就是 Omega 这个单词的开头首字母，我实在是找不到更合适的这种设计的代替方案了。

最开始，我并不打算重新设计一个新的图标了，只是继续用这个图标也很好，毕竟我不知道还能怎样去设计改进了，任何的改动都显得是画蛇添足。也实在是对这种会自动变色的图标设计很是喜欢。但感觉还是需要去尝试下，继续沿用原图标并不算很好，很容易被认为是一种仿冒或者是故意误导。

那么修改的方向，就初步确定为，只修改这个在扩展列表显示的图标，也是在扩展商店时显示的图标，在工具栏时的图标以及显示代理使用情况的图标，还是继续沿用 SwitchyOmega 的设计，不做任何修改。而要修改或者说要添加的元素，基本就只能是在内圆的这个白色圆形区域。圆环本身，还有圆环外部区域，都并没有很好的一个修改方案了。

就圆环本身来说，有考虑过完全的单独变色或者是渐变的多彩变色，也可以做一个仅仅是某一段的一种变色，整体仍然保留是一个圆环，但实在不好看，也不知道这么做有什么意义。从寓意来说那么就是，代表着一种改变，通过不同的颜色来表达。即使是和 AI 讨论这种设计方案，也依然没有很好的一个思路，原有的这个圆环已经限制住了更多的发挥空间。

于是从它原来的圆环也刚好是 Omega 的首字母来出发，就在这个圆环的右下角加上那么一条线，寓意是字母 a。这个方向的话，就是加一个往下又接着往右上的弯曲的曲线。实际效果很难看，圆环的面积太大了，无法容纳圆环外的其他元素了。即使是把这个尾巴变成抽象一点的直线，或者是其他形状，比如说三角形，但还是难看。也想过那就圆环外的左上角加一段弧线，也可以左下角或者是右下角，或者四周都加。也可以不是弧线而是其他元素，但实际去设计出草稿，都不满意。

圆环外是不可能了，圆环本身也是一样不可能，就只剩下是圆环内部这个白色区域了。这里能做的方向就比较多，也是出的设计稿最多的，可以有更多的变化。最开始的设计，是想着在左下角有一个类似浪花的拍打的元素，然后中间的区域，就会变成是一种类似虾那种的形状，因为蓝色会想到是海洋，于是就很自然想到了海洋生物从海上跃起时的那种摆尾的场景，这样就有一种生命感。原项目已经不再维护，接手后这个项目继续保持活力，从左边的浪花拍打过来，打破了这个宁静，生物跃起到了海面上。

这样的一个设计思路我是很喜欢了，也本来就打算作为最后的定稿。可是实际的显示效果并不满意。会觉得这个左边的拍打的浪花是多余的。那么就从这样的一个需要修改的方向继续去思考，放弃这种跃起的摆尾的设计，只把内部区域变成海浪或者是潮汐这种的感觉。于是又去找了一些灵感，这里难点主要是 SVG 如何设计出这种感觉，需要有很急的浪的那种效果，或者只是简单的潮汐。虽然最后没设计出这种很好的效果，但也接近了。不过最后也还是放弃了。主要还是这里是一个图标的设计，在原有的圆环的基础之上，底部很难再能这种效果了，面积小了看不出是海浪或潮汐，面积大了又吃了太多注意力，已经不知道和代理切换有什么关联性了。

最后就是，回到了自己更熟悉的设计方向去了。图标的话，很明显需要有更突出的一种简洁的设计语言。那么这个圆环，就可以看做是一个圆脸。在这样的设计方向上，就可以在脸部加上表情。表情的话，就不能是太复杂或者是负面情绪的元素。那么就可以参考 emoji 的设计思路。很明显 emoji 是非常优秀的参考素材，它就做到了很小的面积但辨识度很高的这种效果。于是很自然，就想到了直接给这个脸部加上左右对称的眼睛就足够了。

之前都不想按照这样的方向去设计，主要是虽然是很好看，但感觉赋予的意义的关联性很弱。这样的一个带眼睛的表情，要如何能够把 SwitchyOmega 和 SwitchyAgain 联系到一起呢？但如果想要在 SwitchyOmega 的圆环图标原封不动的基础上去修改，这已经是最好的方案了。所以没有什么好纠结了。真要去说的话，那就是原来是一个没有表情的脸，现在有了眼睛，更生动活泼点。

假如说以后还会有根据 SwitchyAgain 来去做其他更重大的修改的另外的一个版本的话，那可能就不能这样去设计图标了。当前这个设计在 32x32 下就已经非常小，添加的元素都快看不清了，可能会从开关的这个设计元素去和圆环的元素进行一个结合，毕竟工具栏仍然还是保持原来的变色圆环的设计，把圆环元素从图标里去掉并不合适。

于是最终的定稿就是现在这样的一个图标，从各方面来说都是最好了的。唯一还需要考虑的就是眼睛的位置、大小和形状。这一点就基本是靠 AI 来解决了，通过 AI 来做出几个各自不同的版本，然后选择效果最合适的那个，恰到好处的位置和大小。

原本是觉得高度不能占据到接近二分之一，但这个面积实在太小，最后实际还是有二分之一，毕竟最上面也还需要留一点空间出来做间隔，靠得太近就难看。大小的话也没有做得很大，整体来说会接近电源插头的那两根金属片的效果，这样就变成看起来像是有眼睛的一个脸部表情，同时又像是插头的插座，尽量在这样的一个设计里包含更多的设计元素进来。

经过了这几个月的使用体验后，也没有对这样的设计有丝毫的不满意和厌恶感，总体来看是一次非常成功的图标设计。

（完）