全球电商SaaS平台「店小秘」再获1亿美元C轮融资，领跑电商SaaS赛道

我今天要讲的是前台网站，也就是客户点击或者输入我们的网址看到的内容。我相信，一个页面流畅、设计美观、功能完善的网站一定能更好的助力我们出海掘金。
从我自己的学习历程来说，一开始设计网站的时候，简直是一筹莫展，看着哪里都会，哪里又都不会。最后发现，一个星期过去了，前台还是默认模板的模样。而今非昔比啦，今天我也可以分享一下我自己的Shopify网站设计思路，希望能给小伙伴们一点启发。以下内容全部来自于个人经验和个人工作习惯，请酌情参考。

有一句话说，“让你模仿，没让你超越啊”，我觉得我们要做的就是，不仅要模仿，还要超越，或许能得到更多启发。
        我的建议是，在设计网站之前就要有一个总体的框架，不要想到哪里设计哪里，最后发现四不像，只好从头再来。而且我每建一个网站，都会做一个完整的建站记录，从沟通过程、需求整理、网站设计到关键数据等等，这样不管我什么时候需要什么资料，直接在我的笔记里面就能找到。这个习惯尤其是在面对客户的时候，不仅专业，而且省时省力。
说回建站，如果你说，我没做过独立站，也没做过品牌，对网站设计丝毫没有概念，这个怎么破？

那很简单，去找同行，模仿他们的网站。这是最快也是最保险的途径。接下来我主要从两个角度阐述网站设计的思路，一是总体框架，二是内容和细节。

一、总体框架的确定
1.方法：竞品网站学习模仿
2.关键点：设计风格、品牌形象、网站功能、购物流程
3.实操过程
首先，打开你习惯使用的Shopify网站查询工具，比如https://www.shopistores.com/，输入我们的类目关键词，比如clothes，或者精准的产品关键词，比如T-shirt，点击搜索，我们就可以看到同行业的店铺数据。

我们点击排名，进行降序排列。可以看到店铺的排名，上架时间，所在国家和Best Selling几个数据。我一般会选择20-30个先简单浏览下，看下哪些和我自己的风格比较吻合，这里主要是从产品风
格的角度，比如说我卖的是日系文艺风的T-shirt，那么夸张奢华的欧美风可能就不适合我；如果我卖的是儿童用品，那么可能温馨和童趣两种风格都可以考虑。

所以一般别人来问我怎么建站的时候，我也会直接问他，你有参考的竞品网站么？其实这个也适用于团队工作，我们总不能一个小组坐在这里空想，哪个版块怎么做，怎么设计。我们就直接找到一个适合的模仿对象，参考来设计就好了，可以取其精华，去其糟粕，在以后的运营过程中再根据需求不断的完善。或者你可以先给老板看一个参考网站，不然辛辛苦苦做好了，其实并不符合他的预期。

基本上浏览过一些网站以后，我们就对自己想要的网站风格有了一个初步的概念，这时我会挑选5个左右的网站出来，去学习这些网站。这个过程中不要盲目的进去随便点击，走马观花，记得你是来学习的，你要分析它每一个细节，要相信他们的每个细节都是经过优化和实践验证的，这对我们自己来说，可以省下很多做Test的精力和时间。
在做这个事情的时候，我觉得可以两步走，第一次你要模仿自己是一个客户，比如你从Facebook看到了该店铺的广告，点进网站，你会有什么反应，然后有什么对应的操作，网站又是如何应对你的操作的。第二次以设计者的角度来观察这个网站，那么从你进入网站开始，是否有弹出Welcome newsletter popup，首页有哪些Banner，是否引起了你的兴趣，你点击以后，Collection和Product页面是如何设计的，是否有Fake sale、Social proof、Trust badge、Time Count Down等内容，是否明显的物流政策、退换货政策，是否可以迅速找到咨询的位置等等，最重要的是整个版面是否让你有信任感（品牌感是否强烈），是否让你心动，有下单的冲动，然后点击加入购物车，看对方购物车是如何处理的，是Mini cart，还是直接跳转到Checkout页面。接下来查看购物车页面和checkout页面的优化，是否有品牌形象的强化设计。
这样5个店铺看下来，你就基本上知道同行业的网站特点有哪些了，那么我们结合自己的产品特色、营销方向，就可以迅速的确定自己的风格、结构和功能了。
二、内容细节剖析
       接下来我从刚才搜索到的网站中，找一个来解析整个网站的结构和内容细节。下面这个网站，主要产品是瑜伽服，它在网站设计、品牌形象和内容方面我觉得有很多细节都值得我们参考，我们可以比较完整的观察很多元素。

 
1.颜色
网站主要颜色是黑白为主，使用紫色进行强调，首先这个颜色与产品的颜色十分契合，其次，紫色是女性非常喜欢和信任的颜色（调查数据显示女性最信任的颜色之一，淘宝橙色反而是最反感的颜色，也有理论认为橙色可以促进购买欲望），这种颜色会给人一种安心、专业又时尚的感觉。
那我们如何来确定自己的主题颜色呢，我觉得有几个方面：一是产品，比如这个瑜伽服他有特定的颜色；二是Logo颜色，也就是品牌形象颜色保持一致；三是行业颜色，比如医疗行业或者咨询行业多用蓝色，而环保等内容常用绿色。
配色我一般使用下面的三个网站，寻找灵感：
https://nipponcolors.com/
https://www.colorhexa.com/
http://colorsafe.co/
一般我们可以使用黑白色作为主要颜色，再使用一个主要强调色在Header、链接、按钮及购物车部分进行强调。
如果我们喜欢对方的用色，我们可以使用一个插件直接取色，我常用的是colorpick-eyedropper。

2.字体
       字体一般优先选择Shopify或者Google字体，尽量减少字体数量，一般控制在3种以内，字体过多容易拖慢网站速度。如何查看竞品网站的字体呢？我们右击，选择“检查”，然后确保截图中右上角的两个按钮都选中，此时你将鼠标放到每段文字上，就可以直接看到字体的名称。 

 
 
3.Header
 
 
我们来分析它的组成，首先是最醒目的是第一行紫色的Info bar，我们一般将店铺重要的公告或者促销信息放在这个位置 (比如这里的Free shipping & Free Returns)，这样客户一进来首页就可以优先看到这条信息。

接下来看Menu部分，我们可以看到这个网站的Menu层级比较多（一般网站不用这么多），我们可以说他有三级，第一级是黑色行SHOP开始的四个主要内容，分别是Shop和项目信息（瑜伽课程和项目等），包括右侧About Us性质的介绍内容。 
接下来是二级Menu，也就是Shop的子菜单。

最左侧的是网站的Logo，一般Logo置于左侧或者居中（RTL除外），主要看我们的Menu数量和内容，也可以根据喜好设置，欧美一般喜欢放在左侧多些。右侧是Main Menu，一共有六个分类，这里我们也是可以根据自己的产品特性来进行分类，比如他有按照男女款式、产品类目来分类。还有一种做法是放关键信息，比如有些网站这里是About us，Contact us, Order track等，有些网站会选择将这些内容放到Footer部分。
我们看这个子菜单，它是使用了Mega menu的方式，包括子菜单，图文形式的Collection和Banner，在Beauty上面还有 New的标签，这样在菜单部分我们基本就将产品的结构罗列清晰，客户也可以迅速导航到所需要的类目，Mega menu的图片Collection也会增强客户的视觉冲击。Mega menu很多新的主题也都是直接内置支持。

接下来我们看到右侧的三个主要Icon，分别是搜索，账户和购物车，简单明了，目前很多主题的搜索都是支持自动补齐和Ajax搜索功能的，这样顾客可以迅速找到想要的产品。有些主题同样在这个部分也做了优化，比如当你点击这里时，它会直接跳出一个建议的产品列表（可以自己设置），给客户一些建议，你是不是想搜索这些内容啊，这里也是一个促进销售的方式，我们称为Search popup。

 
4.Main Page
接下来我们看到的部分我觉得才可以称之为主页，这里的每个部分都是由一个Section组成，每个主题支持的Section不同，但主要功能的Section都会有。

我们看到这里是用Slideshow来展示主要的产品或者促销活动，这里可以理解为海报页，是客户第一眼看到的内容。当然一般用slideshow会降低网站速度，客户一般也不会滑动页面查看，所以目前我会选择使用Banner来代替。

这里是一个Collection List，也就是说每一个图片链接的都是一个Collection（产品的一个类目称为一个Collection，我们可以无限制建设子类目，然后利用Menu功能将他们联系起来）。
这里是一个Collection products，我们可以将同一属性的产品放入一个collection（比如T-shirt），也可以将同一功能的产品放到一个collection，比如New、Best Seller。这是我们直接展示给客户的产品，相当于我们产品的在首页的第一次曝光，可以精选利润款和引流款加入。

    上面的Ins Shop功能，目前我们很多Ins是没有这个功能的，但是我们也可以添加INS展示的功能，展示我们的社交属性，增强信任感。
接下来是Blog List，比如这里有瑜伽的活动和知识，那么对于一些专业型产品的卖家来说，这里的文章可以很好的展示我们的专业水平，这些内容也会是我们进行SEO的良好素材。

5.Footer
 

这里就是我们通常称为的页脚部分，很多关键和必要的信息都展示在这里。以下内容是通常情况下需要
1）必须项
——Legal pages
包括Privacy policy、Refund policy、Shipping policy、Terms of Service，关于如何生成和修改，大家可以参考我之前写的从0 到1建站的文章。这里不仅是必要的Legal Page，也是我们在Facebook开户的时候会被审核的内容，还有就是如果出现争议，那么收单机构会以我们这里的政策为依据来解决争议。
——Contact us
包括客服邮件（用腾讯或者阿里企业邮箱更为专业）、客服电话（Google Voice开始起作用了），还可以增加在线聊天工具的链接。
（2）  建议项
Customer Service、About Us、Order Track、FAQ、Newsletter Signup、Follow Us社交平台、返回顶部按钮

 
（3）    参考项
例如，货币切换、语言切换
首页还有三项内容，属于整个页面，一是即时聊天工具，不管是Tawk 这样通用的还是Massager这样社交属性的；
 
二是Newsletter popup
是Privacy popup，尤其是面向欧洲市场

6.Collection Page
类目页是我们分类展示产品的重要部分，以下图为例，一般有几个部分，Banner（看主题是否支持），Filter（筛选功能，根据颜色、尺寸、价格等等，配合产品的Tag生成选项内容），Sort（产品展示排序，价格、销量等）、产品标签（如New/Hot）、产品颜色属性。有些还增加了Quick view功能，不过不推荐，因为会影响网站速度。

同时产品较多时，我们也可以选择Infinite scroll, 采用Ajax方式的产品加载，客户只要下滑就会继续展示该类目下面的产品，提供加载速度和视觉效果，选择主题时也可关注是否支持Ajax。

7.Product Page
产品页是举足轻重的页面，作为落地页，将是影响我们转化率最主要的页面。
 产品页主要分为几个部分：
第一部分是产品信息，如上图。左侧图片有多种显示方式，我们可以根据需求修改，右侧信息这里一般是产品标题、价格、属性（颜色、尺寸等，颜色可以使用文字、色彩或者图片展示）、Add to cart按钮，运输、退换货信息等。现在很多主题支持非常丰富的fake sale和social proof功能，我们根据需求增减即可。一般主题或者品牌店铺反而不会使用这些内容，当然使用也尽量设置的不要太假。
第二部分是Description（描述），同样我们一般分为几个Tab，Description、Shipping info 和Review

第三部分就是关联销售功能，包括Upsell、Cross sell、Bundle Sell等等，比如我们常见的You may also like, people bought these frequently, recently viewed等等。
8.Cart Page
接下来我们来看下购物车这块的设计，我们要确保在产品页，我们的购物车是最显眼或者是唯一显眼的部分

加入购物车以后有几种方式：文字信息提醒，选项弹出提醒、侧边弹出提醒和直接跳转结账，根据产品性质进行选择。我们可以看到这个网站，在这里也做了Bundle Sell。
 
9. Checkout Page
我们在这里可以增加品牌信息、对关键步骤颜色和按钮颜色进行强调，有助于引导用户结账，这里还包括允许客户注册账户，默认勾选Signup按钮等，都是为后期二次营销做准备。
 

以上就是我们对该网站主要页面的解析，关注所有有助于促进转化的细节，并进行取舍设计，相信我们一定可以做出让人满意的网站。最后，网站做好以后，务必对网站速度和性能进行测试和优化。（PS: 这个网站的性能测试分数很低）
10.速度与性能
目前几个测试网站（Gtmetrix、Pingdom、Google PageSpeed Insights 这个可以从Google ads 培训课件里面找到、Webpagespeed)都会从几个角度给出速度测评的结果，包括整体速度，Yslow，加载速度等，Request数量和Page Size等。Shopify后台使用的是Google Insight数据，可以点击View more查看更详细的数据。
速度测试最好用工具全面分析测试，我们自己测试感受的话，IP和位置都比较单一，不够准确，不能作为准备的测试依据。
速度优化我觉得有几点可以分享：一是看主题，好的主题是做了速度优化的，尤其是手机端优化；二是主题设计时的Section优化，尽量不要使用Slideshow，改用Banner；三是图片，必须要压缩优化，动辄几百K这种肯定要不得的，可以使用Tinypng进行无损压缩；四是插件，从测试数据Waterfall看下是否有插件导致加载时间过长，还有些插件卸载后可能有代码残留,所以我如果要测试插件的时候，都会用partner账号或者注册一个新店铺，利用免费期去测试，不会直接在运营的店铺上随意安装；五是产品页，描述内的图片也不宜过多，并且要进行优化；六是字体，尽量使用Shopify和Google字体；七是优化网站结构。

有些主题的Quick shop或者Quick View功能也会严重拖慢加载速度，可以禁用；个人建议如果功能要求比较多的话，选择一款集成功能多的主题，不然各种功能都靠补充插件实现，必然会拖慢整体速度。同时及时更新主题，更新前注意复制主题并备份，上传新主题后，根据主题指导文件复制旧主题的设置到新主题，这样就不会丢失原本的网站内容了。

那么现在这个Shopify网站就可以进行Google ads 推广了。文章转自：http://www.googleadsem.com/