15 个响应式网页设计的例子

既然我们前面已经介绍了什么是响应式网页设计，那么就已经知道现在的整体趋势，本文 WooCommerce 店群美国虚拟主机商再从一些详细例子上面来介绍一下响应式网页设计的效果。下面是一些企业的例子，它们明白这个道理并建立了响应式商业商店。
1 、 CliftonLarsonAllen LLP
作为金融、外包和税务公司，CliftonLarsonAllen 是商店视觉层级的一个很好的例子。他们的响应式商店的所有这个三个主要版本都以相同的影象、讯息和行动召唤（CTA）按钮为中心。您能说出他们希望访问者做什么吗？每个商店版本还提供了许多清晰的连结，可以根据访问者感兴趣的服务型别了解更多资讯，所有这些都很容易在滚动时发现（某些情况下就在第一个萤幕上）。视觉层次在响应式设计中的一个很好的例子。
2 、 The Living Well
女性健康和保健公司，The Living Well 有一个以图片为中心的简单商店，在不同的装置型别上提供相同的资讯。最初的商标、横幅和选单项在所有版本中都是可见的，并传达了企业的全部内容。潜在客户可以通过向下滚动、点选页面上明显的相关连结，或者点选所有萤幕大小都可见的社交按钮，了解更多关于企业背后的女性和特定的服务。
3 、 Yard Bar
Yard Bar 也有一个响应式的商店，以影象为中心。滑动的图片突出显示了您需要了解的关于这个企业的主要内容：所有都是关于食物、饮料和狗的。在不同的装置上，向下滚动检视更多关于这三个主要类别的资讯以及欢乐的时光。通过任何装置访问商店的人都可以快速了解该公司的业务内容以及他们在访问前需要了解的主要资讯。
4 、 Bonsai
自由投稿的店群软件公司 Bonsai 有一个干净和清晰的响应式商店。像 CliftonLarsonAllen 一样，他们通过不同的装置在商店上明确了主要资讯和 CTA 。该商店提供了一个移动或删除某些在较小萤幕上不那么重要的元素的很好的例子。虽然在大多数情况下，页面在所有装置上是相同的，但较大的萤幕上有一个表格，在那里可以提供您的电子邮件。为了节省空间，移动版本将表格移出主页，但保留了 CTA（单击后，将进入表格）。这样使得空间看起来更整洁，并且仍然提供相同的基本资讯和选项。
5 、 Salt Lick Cellars
Salt Lick Cellars 酒庄是另一个以图片为中心的商业商店，对于一个经常以美景吸引顾客的行业来说，这是有意义的。智慧手机萤幕上主影象裁剪变小——虽然看不出图片扩大的样子，却仍然可以得到它的主要思想，凭著直觉进入选单（右上角汉堡选单），并有影象来引导您向下滚动以获取更多资讯。
虽然商业商店的最终目标是销售产品或服务，但 WooCommerce 电子商务商店正试图以一种更直接的方式进行销售——就在商店本身。我们有必要看看不同的 WooCommerce 电子商务商店如何使用它们的响应式设计来跨装置实现这一点。当设计一个 WooCommerce 电子商务商店时，让商店移动响应和易于使用是特别重要的。
6. 、纸& 墨艺术
纸& 墨艺术的手机主页有著与桌上型电脑和平板电脑相同的元素，但由于相同的元素占用了不同的空间，在不同的装置之间，主页会带给人一些不同的感受。影象幻灯片在较大装置上支配著萤幕，为了给其它促销腾出空间，在移动手机上成为了一个较小的横幅。选单被压缩成汉堡选单，以便在顶部留出空间，以便轻松访问搜索、联络资讯以及购物车。这些选择明确了该公司销售的首要任务，并使访问者很容易与之取得联络。
7 、 Penzeys
Penzeys 看起来像他们涉及的主选单，考虑到了移动体验。选单有四种简单的分类，在大萤幕上只占了很小的空间，并且完全适合智慧手机萤幕的尺寸。这三个萤幕的结帐按钮都以橙色显示，右上角免运费服务以红色显示。所有版本都让主导萤幕的中心影象成为使用该公司香料制作的看起来美味的食谱图片（这是一个不可抗拒的购买理由）。
8. Bon Bon Bon
和许多商业商店一样，巧克力店 Bon Bon Bon 的图片前后也带有明显的 CTA 。它有一个影象滑块，所以影象和 CTA 会改变，但是 CTA 总是在一个鲜红色的按钮中。就像 Paper & Ink 一样，Bon Bon Bon 让主影象变得更小，更像一个横幅广告，以便让其他一些页面元素出现在手机萤幕上。而在手机萤幕的顶部，购物车和寻找联络资讯的连结依然保持清晰。
9. Chewy.com
线上宠物用品商店 Chewy.com 在这三种装置上看起来非常相似，主要的区别是将选单变成压缩汉堡选单的常见响应选项。这是一个很少见的响应式商店，手机上的主影象无法载入到适应萤幕尺寸的大小程度——它会被切断，但访问者可以选择从左到右滚动检视照片中所看不到的部分。这三个版本都突出了搜索栏的功能，便于访问者找到明确的产品。而且所有的橙色标识都明显有 30% 的折扣。
10. Pacha Soaps
Pacha Soaps 在不同装置上的外观非常相似。正如我们在其他商店上看到的一样，这三个版本的萤幕上都有占主导作用的滑动影象。与其他一些例子不同，影象在智慧手机萤幕上占用的萤幕空间更大，而不是更小。缩小时，棕色选单依然为免运费，社会处理资讯呈现在整个萤幕上，同时在较小的萤幕上切换到适合主选单的汉堡选单。即使您正在建立一个个人商店，分享您的酷爱，而不是销售产品或促进业务，让商店响应是值得的。这里有一些来自人们建立在激情之上的个人商店响应式网页设计的例子。
11 、 The April Blake
April Blake 的 WooCommerce 商店主要是分享她的食谱和偶然的感言。她的商店在萤幕大小上看起来非常相似，只有一些小的差别。桌面页面顶部的社交图示在较小的萤幕上被移除，主选单被压缩为汉堡包选单。此外，只需重新排列页面上的元素以更好地适应萤幕即可。
12. House of Hipsters
Kyla Herbes 的家居设计 WooCommerce 商店 House of Hipsters 在不同的装置型别之间变化不大。选单切换到下拉选单，顶部的标题横幅变小，右边的选单在较小的装置上向下移动页面。但除此之外，无论来自哪里，商店本质上是一样的。
13. Aileen
生活方式和旅游 WooCommerce 商店我是 Aileen 的响应式商店在所有大小的装置上都有一个图片幻灯片，上面有一个明显的搜索栏和社交图示。主选单在移动装置上变成了汉堡选单，主影象下方的内容和影象框堆叠在较小的萤幕上。
14 、 The Frugal Gir
The Frugal GirWooCommerce 商店使商标和标语在商店型别的顶部一直可见的，并且顶部 WooCommerce 商店文章集中在这三个版本中。主选单在最小萤幕上变成汉堡选单，右侧选单中的资讯和影象被推到底部。
15 、 Budget Bytes
最后，Budget Bytes 将在所有尺寸装置上的最新菜谱的影象和详细资讯集中在一起，但却将移动装置上的详细资讯和名称移动到影象下方。在这三个版本中，商标和商店名称都显示在顶部。而且，正如我们的示例中常见的那样，移动版的主选单被替换为汉堡选单，以及搜索图示，以便在萤幕顶部留出更多空间。虽然在两个较大的萤幕上，附加食谱的图片和名称并排显示在主影象的下方，并堆积在移动装置上。
正如这些例子所展示的，有许多方法可以组织一个响应式商店，使其在所有的装置型别上都能很好地工作。此外，不一定只有拥有大预算的大企业才能建立响应式商店——这其中的许多例子都是小型企业或个人的。如果想要一个简单的，负担得起的方式来建立响应式商店，GatorWooCommerce 商店构建器有超过 100 个响应式模板，为构建一个看起来不错且跨装置型别工作的商店提供了一个良好的前驱。要开始构建商店，可以访问 WooCommerce 店群美国虚拟主机商官方商店，我们专业人员为您找到合适的虚拟主机选项。