B2B、B2C、C2C的网站设计有何不同？
本文将电子商务网站分为C2C、B2B和B2C三类，并选取淘宝网、阿里巴巴、天猫这三个有代表性并且属于同一家网络公司同时运营的网站进行分析。
一、简述1. 电子商务网站概念电子商务网站就是企业、机构或者个人在互联网上建立的一个站点，是企业、机构或者个人开展电商的基础设施和信息平台，是实施电商的交互窗口，是从事电商的一种手段。
其分类方式有多种：
按商务目的和业务功能分类：基本型电商网站、宣传型电商网站、客户型电商网站、综合型电商网站。按构建网站的主体分类：行业型电商网站、企业型电商网站、政府型电商网站、组织型电商网站。按商务网站开办者分类：流通型电商网站、生产型电商网站。按网站运作广度和深度分类：垂直型电商网站、水平型电商网站、专门型电商网站、公司型电商网站。按业务范畴和运作方式分类：非交易型电商网站、半交易型电商网站、全交易型电商网站。而本实验报告主要根据买家和卖家的类别将电子商务网站分为C2C、B2B和B2C，并选取淘宝网、阿里巴巴、天猫这三个有代表性并且属于同一家网络公司同时运营的网站进行分析。
2. 淘宝网（C2C）淘宝网淘是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立，中国深受欢迎的网购零售平台。拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。
在淘宝网上，个人可以开店铺将自己的商品放在平台中进行售卖，普通用户可以在淘宝网中找寻到心仪的商品，是一个典型的C2C平台。
3. 阿里巴巴（B2B）马云于1999年创办了阿里巴巴网站，阿里巴巴网站又名1688，现为阿里集团的旗舰业务，是中国领先的小企业国内贸易电子商务平台。
作为阿里集团旗下子公司，1688在CBBS电子商务体系中代表企业的利益，为全球数千万的买家和供应商提供商机信息和便捷安全的在线交易，也是商人们以商会友、真实互动的社区。
4. 天猫（B2C）“天猫”（英文：Tmall，亦称淘宝商城、天猫商城），是一个综合性购物网站。天猫和淘宝其实都是阿里巴巴旗下的电商平台，两者之间是也算是互通的，在淘宝上是可以买天猫商家的产品的。
两者之间最大的差别也集中在商家之间，在淘宝大部分商家都是个人的商铺，就像街头的小店一样，有的甚至没有店面，普通大众都可以注册成为淘宝卖家，审核门槛相对更低，集中了各种各样的卖家。
而天猫的入驻资格比较严格，入驻类型只能是企业，而非个人，没有注册公司的店铺是不可能在天猫中开店铺的。
另外，入驻天猫商城需要缴纳一定数量的保证金，除了需要提交注册费用外，天猫商城的店家每年还需要向天猫缴纳一定的服务费用。
二、深入分析及对比1. 主页样式三个网站的主页样式比较类似，最上栏是一些快捷键如个人中心、收藏夹等，向下是搜索框。
再向下就有了一些不同，淘宝和阿里巴巴采取左中右三栏的分布模式，从左向右分别是分类系统、滑动广告栏和个人页面图标，而天猫采取的是左右两栏的模式，从左至右分别是分类栏和滑动广告栏。
淘宝首页：
阿里巴巴首页：
天猫首页：
这一个页面模板的划分很好理解，天猫因为是B2C平台，弱化了用户在平台表现层中的占比，天猫的用户只能从天猫平台购买商品，而淘宝的用户除了在平台中购物还可以通过用户图标处点击开店，阿里巴巴网站中用户的采购情况十分重要，故在首页右栏设置用户栏，可以便捷的看到进货相关的情况。
再往下拉，这三个电子商务网站首页的布局就有了较大的区别：
淘宝网首页下拉有爱逛好物、好店直播、品质特色、实惠热卖、猜你喜欢五个部分；阿里巴巴首页下拉后有特色货源、主题货源、好物推荐、猜你喜欢和以商会有五个部分；天猫首页下拉后有天猫超市、天猫国际、美丽人生、潮流酷玩、居家生活、打造爱巢、户外出行和猜你喜欢八个部分。
这些板块的具体布局其实是比较类似的，其板块的具体设置也是从网站的属性和定位出发。比如“猜你喜欢”板块在三个网站的首页板块中都有，天猫网站的板块更为多样，首页板块有按照用户品质需求来细分的板块，如打造爱巢板块专门展示家具商品、户外出品主要展示运动户外商品。
2. 外观风格淘宝和阿里巴巴网站页面的主色调是橙色，天猫网站页面的主色调是红色，页面设计风格是比较类似的，采用模块式布局，主题和栏目导航突出，页面中图片比例非常高，但是从简洁度来讲天猫的页面更为简洁。
3. 分类目录系统这三个网站分类目录系统在首页的位置是相同的，淘宝和阿里巴巴网站采用的分类等级是二级分类结构（即如想选择衬衫，进入该分类的方法是女装-衬衫），而天猫采用的是三级分类结构（即如想选择衬衫，进入该分类的方法是女装-当季流行/精选上装-女装）。
此外，淘宝和阿里巴巴网站的分类目录系统显示的是具体分类和猜你喜欢部分或者商品排行榜（本质是类似的），天猫网站中的分类目录系统显示的是具体分类和品牌logo。
淘宝网站分类目录：
阿里巴巴网站分类目录：
天猫网站分类目录：
这种区别其实跟网站的属性是密切相关的，从这三个网站来看（不代表该类型网站的全部情况），C2C和B2B网站的分类目录结构较为扁平，直接点击分类可以看到想要的商品类别。而B2C的分类目录层级则相对复杂，加入了一级分类，可以更加精细化的运营，而且品牌意识更加强烈，给用户传递了品牌意识和品质消费意识。
4. 商品内容页淘宝网站商品内容页：可以看到淘宝的内容页突出的是图片和价格这些基本信息，对于店铺信息主要给出它的等级信誉等内容。
阿里巴巴网站商品内容页：可以看到阿里巴巴网站商品内容页和淘宝网站相比就有了区别和相同点，首先商品图片毋庸置疑还是放在最突出的部分，一样弱化了买家的信息（只是相对于B2C平台来说），但是阿里巴巴网站因为是C2C平台，购买量和其他网站有很大区别，所以在商品加购物车处的设计和其他两种网站完全不一样，可以同时选择多款不同样式的商品一起加入购物车或这直接购买。
天猫网站商品内容页：天猫网页的商品显示明显更加强调品牌，而且一般直接用品牌名用作店铺名，此外更加强调服务承诺如退换、急速退款、正品保证等等，其他设计和淘宝网站没有太多区别。
5. 客户服务保障与支持淘宝网站：淘宝网站首页或者商品详情页底端是服务保障等信息内容，可以看到淘宝提供的保障具体有消费者保障、新手指导、付款方式和淘宝特色介绍。相对来说给出的内容较少。
阿里巴巴网站：阿里巴巴网站的底部用户保证和服务方面，从划分来看较多与淘宝网站，共有新手指南、采购商服务、供应商服务、阿里巴巴服务和交易安全六个板块。因为阿里巴巴网站中采购商和供应商二者都是非常重要、复杂且需要平台大力经营的，故在底部为这两类用户提供了服务便捷链接。
天猫网站：天猫网站的底部用户保障与服务贯彻了一贯的简约大气的风格，包含了品质保障、七天无理由退换货、特色服务体验、帮助中心四个板块。
6. 浮动固定栏这三个电子商务网站都有设计浮动固定栏，相同点是都有固定的搜索栏和导航栏，但也有不同的地方。
淘宝网站向下拉后可以看到，搜索栏固定在页面上方，而导航栏则固定在页面的右侧，此外右侧的导航栏还有回到顶部的快捷键及反馈、举报的快捷链接。
阿里巴巴网站则有些不同，其左侧固定栏是页面导航，而右侧固定栏有个人主页、个人足迹、消息、上新、回到顶部等快捷方式。可以看到阿里巴巴网站因为是B2B平台，用户的个人中心是比较重要的存在，在采购的过程中，采购商可能要随时查看自己的采购情况等信息，所以相较于淘宝网站它增加了一个有关个人中心的浮动固定栏。
天猫网站也有三个固定栏，分别是固定在上方的搜索栏，固定在左侧的导航栏及固定在右侧的个人中心快捷键部分，但是天猫的个人中心快捷键跟阿里巴巴网站又有些不同，阿里巴巴强调采购清单及常采购的店铺的上新优惠情况等，天猫则是个人购物车、会员卡、充值服务等。
相较于淘宝，天猫更注重品牌捆绑和用户粘性，所以它的会员机制和会员服务是其与淘宝有区分的很重要的一部分，从网站首页的布局就可以窥见一端。
三、总结分析根据上述的对比分析，我们从这三个网站的对比分析来看，他们的布局、风格及细节设计方面有相似点也有不同点，而这些设计及逻辑的区别是这些网站的性质所决定的。
B2B、B2C、C2C网站服务的用户和提供交易的商品或服务都是差异化的，这些不同点可以保证每一个用户享受到平台最优质的服务。
本文由 @朱凡欣月 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
10项实践技巧，创建一个成功的B2B网站
B2B公司数不胜数，然而让大众熟知的品牌却非常少。笔者告诉我们：营销推广不一定要用促销手段，对于B2B公司而言，网页设计也是一个很好的选择。下面来看看笔者是如何分析的吧：
据美国国税局称，目前全球有520万家B2B企业。这是个令人印象深刻的数字。但是，它提出了一些相关的问题——市场上有如此之多的公司，为什么我们叫得出名字的这么少？
对市场营销的最低关注度是保持B2B网站在灰色地带发展的原因。虽然一些促销策略可能会花费一大笔钱，但其他一些则相对便宜且简单明了。
对于B2B公司而言，网页设计是一个很好的营销方式，这样可以使其可以在数百个类似的公司中脱颖而出。但问题是——B2B网站设计的概念甚至不应该很昂贵。设计上必须让人感到舒适，而且所有功能都要有意义。即便是当地的企业也能负担得起。
一、成功的B2B网页设计的10个技巧1. 了解你的用户流在B2B领域，企业很少会努力实现品牌意识本身的目标，更重要的是把你的访客转化为潜在客户和买家。无论你的目标是什么——一个联系人、一个电话或一个销售，你都应该知道用户的切实需求，并考虑用何种方式才能帮助他们做到这一点。
在市场营销中，将用户行为从A映射到Z的过程称为“用户流”。简单用户流如下图所示：
上面的清单并不复杂或完善，但这里的目标并不太复杂，其简单的目的是让用户订阅博客。
现在您已经为自己的网站制定了用户流程，重要的是要考虑用户在途中可能遇到的所有异议（点击网站链接，跳转至博客页面，最后是订阅）。您可以使用网站副本或设计写下解决这些问题的方法。我们稍后会介绍一些可能对此有所帮助的提示。
2. 使用面包屑导航（文章底部有该名词解释1）可以使用不同的工具和设计方法来安排用户浏览网站的方式。对于提供大量服务的B2B网站，面包屑导航是最佳解决方案。
快速总结：一个面包屑导航起源于童话汉斯和格雷特。就像在故事中一样，面包屑（在本例中，是前一页的列表）帮助用户跟踪他们在网站上的所有动作，以便他们可以随时返回任何页面。
上图中的导航系统是面包屑导航的教科书示例：
看看用户如何返回到他们以前访问过的任何页面？——这样很方便，对吗？
有些设计师对面包屑导航有异议，因为它看起来不太时尚美观。然而，你总是可以用一种创造性的方式接近“踪迹”的。
3. 遵循“黄金比例法则”对于那些在设计或艺术理论方面没有太多经验的人来说，这里简要介绍一下“黄金比例”的含义。在不深入研究它背后的数学知识的情况下，科学家们曾一度计算出一个完美的矩形的参数——它的长度必须等于它宽度的1.6倍。因此300×485像素的矩形被认为是很完美的。
如果要从该三角形中绘制一个正方形，则会看到以下图形：
然后，您可以通过从每个较小的矩形中绘制一个正方形来保持相同的速度。
这是“黄金比例”的视觉表现——一种创造美学上吸引人的比例的方式。有一点可能还不清楚，在设计网站时如何使用黄金比例？
下面是Mashable的实现方法：主页使用比例矩形和正方形以获得更好的视觉效果。
4. 使用进度条指示页面的加载状态众所周知，页面加载时间太长会使用户降级。然而，即使你的网站还没有达到火箭速度的程度，也不意味着你一定失去访客。
解决这种情况的可靠方法是通知用户加载页面的进度。你可以通过设置最低限度的进度条来实现这一点，这样既不会减慢你的网站速度，又能让用户放心，他们不会白白等待。
5. 将核心数据保留在第一个滚动条范围内根据尼尔森诺曼集团（NielsenNormanGroup）的研究：74%的用户关注的是网站上的前两个滚动条范围的页面。事实上，只有6-8%的人有足够的兴趣、时间或精力去阅读页面的内容。
网页设计师的教训在于内容优先级。虽然你的页面应以一个介绍开始并慢慢滑入CTA（行为召唤）（文章底部有该名词解释2）似乎合乎逻辑，但往往情况并非如此。务必在第一个滚动条中展示所有商品/最佳功能/最方便的建议。一旦最有吸引力的报价吸引到了真正的买家，如果他们需要你的其他信息，就会进一步阅读。这样你就可以节省访问时间并获得更多潜在客户。
6. 用户完成重要操作后使用感谢页面无论是在现实生活中还是在网上，说“谢谢”似乎都是无关紧要的细节。然而在这两种情况下，要赢得别人的信任并以一种良好的态度表现自己，这可能是至关重要的。当涉及到网站设计时，感谢页面会起到重要的作用：
增添一丝个性化。一个用户在你的谷歌分析中并不仅仅是一个数字，在你的底线上也不只是一个销售额，一点充满人情味的感激之情会让每个人感受到关心。提高品牌知名度。你可以用一种创造性的、难忘的风格来设计你的“感谢”页面。这将是一个很好的惊喜，给用户另一个记住你的机会。状态跟踪器。如果用户下载了电子书或白皮书、订阅了时事通讯或留下了一条信息，那么让他们知道操作成功是很重要的。将访问者重定向到“感谢”页面是一种表达“一切正常”的方式。 7. 概述主要和次要用户行为召唤用语作为面向转换的页面的创建者（引导用户朝向特定目标），存在“最期望的结果”的原则。要详细说明页面上可能会有一些号召性用语，但其中一个显然比其他的更重要。
如果您的网站属于这种情况，请考虑明确区分最理想的CTA。可以通过更改CTA本身的位置或导致下一步的按钮大小来完成。区分CTA允许您引导用户获得最期望的结果，而不会将他们的选择限制在一个选项中。
8. 更改已访问链接的颜色任何让你的网站访问者感到不适的行为，都已经使网站本身变得不那么友好了。为了确保每一页都能尽可能舒适地使用，你必须注意一些细节。
访问链接的颜色是这些小细节之一，可以很容易地传达重要信息。最低估的设计细节之一，就是知道他们已经看过一个页面，这样可以帮助用户避免恼人的“似曾相识”效果。
在研究这篇博文时，我们点击了左栏中尼尔森诺曼集团作者的个人资料页面。然后，看到我们已经访问了链接，因为它变成紫色非常方便（见上图）。
9. 善于利用404页面当您的网站出现错误时，第一个念头是深入到技术层面，这样你就可以解释代码中出现的错误。然而，就像量子物理学一样，高级编码也不容易理解。因此，您不应该用它来解释错误。
相反，用清晰的语言传达错误，即使您没有完全解释问题，用户至少也会了解发生了什么。有几种方法可以处理404页面：
要有创造力。如果网站上有错误，为什么不利用这种不幸的情况开几个玩笑呢？这将显示用户的个性，并可能减轻用户对错误的失望。具有建设性。如果某件事不起作用，请解释用户应该做什么，以及他们如何解决问题。无论你选择哪种方式，都不要隐藏在代码和模棱两可的短语后面，比如：“亲爱的用户，出现了一个错误#5505”。在上图中，TechCrunch是404中大量运用且具有建设性对话的一个例子。
10. 使用块和表来构造信息通过将内容组织成块和表来构建内容是确保用户阅读副本的好方法。你可以通过这种方式完成很多事情。首先，页面不再那么长了。此外，表格为需要比较的任何内容提供了很好的演示。出于这个原因，这种形式目前正在掀起新的风潮。
二、4个优秀B2B网页设计案例推荐为了更好地了解当前的企业对企业网站设计趋势，持续寻找创意至关重要。最优秀的设计师经常浏览不同的网页，以了解现代设计中使用怎样的实践方法。
我们想确保你不会没有灵感，因此我们收集了4个B2B电子商务网页设计的案例，敬请观看：
1. Quid网址：
关于Quid，首先吸引你的是它主页的极简主义。没有过多的噱头和花样，网站确保了一个短的加载时间和良好的移动优化。Quid网站是B2B公司的一个企业页面所期望的样子——优雅、精确、全业务。
2. Blake Envelopes网址：
布雷克信封看起来像是一个完全不同的网站——Quid的颜色是深色的，Blake信封的颜色是浅色的；在其B2B电子商务网站设计中大量使用了白色空间。然而，这两个网站的趋势都是一样的——精确到极简主义。
布雷克信封本身就应该有一个单独的“哇”搜索机制，有一个巨大的过滤器系统，允许用户通过一个简单的设计找到他们一直在寻找的东西。
3. D.FY网址：#!/en/
无论是谁设计的这个网站，人们都能非常清楚地了解他们的工艺。乍一看，D.FY就像一个单页般令人惊叹。这种B2B网页设计巧妙地使用视频内容来展示他们正在做的事情，并不是每个B2B公司都将其视为一种习惯。
另外，请注意看它从头到尾有多少小的细节。例如：在页面的底部有许多滚动条，这样用户就可以预估页面的长度。且滑块上的文本保持一致，不会在页面上留下混乱的样子。
4. Shipwise网址：
即使不测试公司的出货情况，你也可以从首个滚动视图页面中看出他们有一个聪明的设计师。一个带有视觉效果、标题和标题的极简主题简单地提供了有关ShipWise的所有基本信息。进一步滚动，你可能会惊讶于这家公司是如何使用字体和颜色来展示其风格和品牌的。白色和蓝色的组合以及偶尔的黑色触摸确实起到了作用，这的确是个超级经典且一流的网站。
还有其他一些细节需要注意，设计师如何将字体与图片良好地配合起来展示。例如：通过非常规地合并文本与图像，使得网站看起来没有传统与刻板的感觉，这正是你在B2B公司的定制Web设计中所追寻的效果。
三、总结目前市场上有超过500万家的B2B企业，让销售变得更容易的关键是你不能完全像你的竞争对手。最容易脱颖而出的方法之一就是去了解如何设计一个令人惊叹的B2B网站。
充分利用网站的导航功能是关键，要确保用户在浏览网站时能够轻松自如。为此，你需要总结出一个用户流，使用导航模型进行试验，并指导访客完成其浏览的每一步。一些视觉噱头也可以证明是有用的。例如：通过遵守“黄金分割率”，从视觉上将会对你的用户群更具吸引力。你甚至可以创造性地设计“404”页来给人增加印象。
名词解释1. 面包屑导航
“面包屑”一词来自汉塞尔和格莱特尔的童话故事，他们在穿过树林时会留下一些面包，这样他们就可以沿着面包屑的路径返回。在网站导航中使用相同的技术，其中向用户显示链接的踪迹以准确地告知该网页在网站上的位置。面包屑跟踪的示例显示在本文页面的顶部。面包屑跟踪为用户提供了一种快速了解此网页所属部分或分支的方法。如果网站有很多类别且每个类别都有几个级别，则面包屑很有用。
2. CTA
CTA 即 CalltoAction，这里把它翻译为行为召唤，或者说是用户行为号召。简言之，就是在网站页面、电子邮件等地方会出现的按钮，希望使用者进行的行为，例如注册会员、立刻购买等行为。
原文作者：Fireart设计工作室
原文地址：
翻译：慕羽
本文由 @慕羽 翻译发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
