跨境电商小工具系列 - ColorZilla 快速提取竞争对手网站颜色代码
08 May 2020
我们在很早之前的Shopify主题如何选择一文中有简单说过色彩对在线营销的意义。并强调说，在网站建站前期，可以通过研究学习，甚至照搬你行业里面大牌竞争对手的网站色彩搭配来快速上线自己的独立站（至少我就是这么干的）。
就比方说，我的Shopify网站的配色最一开始就是完全按照电商巨头Amazon的配色来的，顶部是深蓝色背景，主题是白底加黑色字体，链接文字是蓝色的，Review Rating Star是黄色的，以及，最最重要的，购物车按钮和BUY NOW按钮是橙色的。
要知道，Amazon这种体量的公司会进行非常多的AB测试的，至少有段时间我是见过Amazon的购物车按钮是下图这个样子的，而且就我个人审美上来讲，我是更喜欢下图中的加入购物车按钮的颜色和样式的，不过最终，Amazon还是调整回了原来的Add to Cart的颜色和样式。至于为什么调整，官方没有明确的说法，不过个人猜测是经过AB测试，发现还是亚马逊原来的购物车按钮转化效果要更好一些。
不管怎么说，在我自己还没有能力通过超大流量去进行AB测试然后得出结论说哪个按钮样式或者颜色转化率更高的时候，能做的，就是照搬别人现成的经验。
当然，行业里面是有一个说法的，叫Big Orange Button，当你不知道为你的Call to Action按钮设置为什么颜色的时候，遵循BIG ORANGE是准没有错的，不过，你也可以结合你行业里面的巨头他们的网站来做出更好的选择。比方说随意翻看了下脑子里面记下来的几个之前做宠物用品的时候经常去逛的卖宠物用品的几个行业里面的大网站，发现他们的购买按钮基本上可以分为两个色系，Orange 和 Blue。那我如果现在要做宠物用品的话，网站的购物车按钮肯定就是基于蓝色或者橙色来选择了，网站整体配色也同样会围绕着购物车按钮，参考竞争对手来设置。
那么问题来了，你说的橙色到底是什么颜色，你说的蓝色又到底是什么颜色呢？
在使用ColorZilla这一工具之前，我都是借助PS来提取颜色代码的，首先要使用截图工具把竞争对手网站给截下来，然后PS打开图片，用吸管工具获取想要提取的颜色代码，一一记录下来，再去设置自己的Shopify完整。
后来一位做设计的朋友推荐我使用ColorZilla，发现确实好用！
ColorZilla是一款基于谷歌浏览器Chrome和火狐浏览器Firefox的插件，因此要使用ColorZilla，你就要先确保你的电脑上下载安装了Chrome或者Firefox。另外，访问Chrome的应用商店是需要搭梯子才能访问的，因此请确保你有可用的梯子可以正常打开应用商店的网页。
使用谷歌浏览器点击下面的链接打开ColorZilla应用商店的安装页面，然后点击“添加至Chrome”安装到你的谷歌浏览器即可。
安装成功之后打开你要研究的竞争对手的网站，然后点击浏览器中ColorZilla的吸管小图标，在下拉选项中点击 选项 “Pick Color From Page”按钮，然后鼠标指针就会变成一个小“+”号
将加号挪动到你要提取的颜色的网页部分，单击即可提取出该颜色的代码，如下图，Paw这个网站的加购按钮的颜色代码为 #054DAE。你也可以再次点击浏览器中的习惯按钮，然后点击 “Copy to Clipboard”直接将刚刚提取的颜色代码复制下来
下一步我们要做的，就是打开我们自己的Shopify网站的后台，在主题设置页面，将购物车按钮的颜色代码修改为 #054DAE，就能获得和Paw这个网站一模一样的按钮颜色来，其他部分颜色设置，例如顶部Announcement Bar的绿色背景颜色，Review Star的颜色，标题描述的文字颜色等等都可以一一提取出来，并应用到自己的网站上。
很简单对吧？！
Happy ColorZilla
Sample Image Gallery
930 x 520px
SPRING SUMMER LOOKBOOK
Sample Block Quote
Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis.
Sample Paragraph Text
Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis deli denimes, suspendisse vestibulum lectus in lectus volutpate.
Tags: