11个响应式网页设计案例

11个响应式⽹页设计案例

早在2010年,Ethan Marcotte就开始⿎励设计师和开发者实践“响应式⽹页设计：与其将每个越来越多的⽹络设备定制为不连贯的设计，我们可

以将它们视为相同体验。使我们的设计更⽅便呈现它们。

Ethan Marcotte认为，通过设计就完全可以适配到任何的⽹站，⽽设计师和开发⼈员是可以对他们的⼯作进⾏验证的。

⼋年后，响应式⽹页设计已达到技术⾼峰。现在，标准做法是在每种设备上创建⼀致，量⾝定制，包括那些尚未发布的设备。

但什么是响应式⽹页设计？在实践中，响应式⽹页设计最好的例⼦是什么？

“⼿机和平板电脑占全球互联⽹使⽤量的56.74％。”

什么是响应式⽹站？

严格地说，响应式⽹站有三个明确的特征：

1. 媒体查询

“媒体查询使我们不仅可以定位某些设备类别，⽽且还可以实际检查我们⼯作的设备特征，”（Marcotte的解释）

因此，媒体查询允许开发⼈员使⽤查询条件，检查⽤户设备的属性更改⽹页设计。它为⽤户提供了更加个性化的体验。

2. 流体⽹格

当使⽤CSS创建灵活的⽹格时，⽆论⽤户使⽤的是21英⼨台式计算机，13英⼨笔记本电脑，9.7英⼨平板电脑还是5.5英⼨的⼿机。

“流体布局将我们设计的控制牢牢掌握在我们的⽤户和他们的浏览习中，”（Marcotte的解释）。

这使设计师能够在多个设备上保持⼀致的外观和追梦路上作文600字 感觉。此外，允许设计⼈员更新⽹站的⼀个版本或许多版本，可以节省每个⼈的时间和⾦钱。

3.灵活的视觉效果

Marcotte提到：使⽤代码，防⽌丰富的媒体⽂件从超过其容器的尺⼨。其中的视觉也是如此。

鉴于⽬前存在超过8.48b的独特设备，该功能允许团队创建永恒的设计能够适应任何设备，⽆论其⼤⼩或形状。

这三种类型的功能⼀起使设计⼈员能够制作响应式⽹站。“流动⽹格，灵活的图像和媒体查询是响应式⽹页设计的三⼤技术要素

下⾯，我们列出了11个超出响应式⽹页设计基本标准的例⼦。每个⽹站都提供了适合⽤户的独特体验。

响应式⽹页设计⽰例

1. Dropbox

Dropbox利⽤流畅的⽹格和灵活的视觉效果来设计出⾊的响应式⽹站⽅⾯做得⾮常出⾊。从桌⾯切换到移动设备时，不仅字体颜⾊会随着背景颜

⾊的变化⽽变化，⽽且图像也会改变⽅向。

考虑到上下⽂，Dropbox为每款设备提供量⾝定制的体验。例如，为了防⽌⽤户反弹，⼀个⼩箭头指⽰桌⾯⽤户向下滚动以查看更多内容。但箭

头没有在移动设备中存在，因为根据习惯，⽤户会在具有触摸屏功能的设备上滚动。同样，他们的注册形式在桌⾯设备上是可见的，但它隐藏在平

板电脑和移动设备上的号召性⽤语按钮后⾯，因为移动设备的空间有限。

2. Dribbble

Dribbble的⽹站拥有⼀个响应式⽹页设计的特点：灵活的⽹格，它可以从台式机和笔记本电脑上的五列到平板电脑和⼿机上的两列。

为了防⽌他们的⽹站在移动设备上感到混乱，Dribbble已经删除了多个项⽬。例如，作品不再归因于作者，视图，评论和数⽬尿检白细胞高 不再嵌套在每⼀

项。他们还将菜单隐藏在汉堡图标后⾯，并删除了搜索栏。

3. GitHub

GitHub的⽹站为所有设备提供⼀致的体验。但是，有⼀些明显的差异：

从桌⾯平板设备切换到平板设备时，从两列布局更改为单栏布局的区域，副本位于注册表单上⽅⽽不是旁边。

不同于台式机和平板设备，在他们的注册形式为焦点，GitHub只提出⼀个叫移动动作按钮。⽤户必须单击动作调才能显⽰表单。

和Dribbble⼀样，GitHub也删除了搜索栏，并将菜单隐藏在⼿持设备上的汉堡图标后⾯。这是⼀种⾮常常见的做法，因为它有助于减少空间有

限，防⽌移动设备上的混乱。

4. Klientboost

这是响应Web设计的⼜⼀个极好的例⼦。他们的⽹站在四秒内使⽤3G连接的速度⾮常快。更重要的是，外观和感觉的⽹站保持⼀致klientboost

跨所有设备，并且已经成功的把每个设备量⾝定制其⽤户体验

虽然桌⾯和笔记本电脑可以查看包括“Get Proposal”号召性⽤语按钮和“We're hiring！”的完整菜单，但平板电脑和移动设备可以看到菜单

的精简版本。从平板电脑访问其⽹站的⽤户会看到⼀个汉堡菜单图标和标注，⽽从⼿机访问的⽤户可以看到菜单图标和号召性⽤语按钮。

5. Magic Leap

Magic Leap设计了⼀个简单移动⽹页，并带有视差滚动功能，为他们带来了惊⼈的插图。鉴于⼿机和平板电脑现在负责全球互联⽹使⽤量的

56.74%，他们的⽅法是有道理的。

Magic Leap的⽤户体验在所有设备中都是⼀致的，但有⼀个例外：引导⽤户滚动的显微镜，是包括在台式电脑和平板电脑，但不包括移动设备，

⽤户可以⾃然滚动。

即使有3G连接，他们的⽹站也会在7秒内加载 - 远低于22秒全球平均值。对于⼀个具有响应式动画的⽹站来说，这是⾮常棒的体验。

6. Shopify

Shopify的⽤户体验在所有设备中都是⼀致的。只有号召性⽤语按钮和插图在桌⾯到移动设备之间发⽣了变化。

在个⼈电脑和平板电脑上，号召性⽤语按钮位于表单字段的右侧。在移动设备上，它在下⾯。

同样，插图位于个⼈计算机和平板电脑上的副本右侧，⽽它们位于移动设备上副本的下⽅。

像⼤多数⽹站⼀样，Shopify的菜单也被移动设备上的汉堡图标取代。

尽管使⽤图像轮播来炫耀他们的客户，但他们已经设法将他们的页⾯加载速度保持五秒以下。

7. Smashing Magazine

Smashing Magazi愚公移山英文 ne,为所有设备提供量⾝定制的体验。他们的⽹站在桌⾯上采⽤了两列布局，全部菜单和组合标记，可将其转换为平板电脑和

移动设备上带有字母标记的单列布局和浓缩菜单。

Smashing杂志的⽹站也是⼀个包容性设计的榜样。显⽰给桌⾯⽤户的菜单同时具有标签和图标。不是使⽤普通的菜单图标，⽽是选择了带有“菜

单”⼀词和搜索图标的号召性⽤语按钮。数字原⽣态从移动设备导航⽹站没有问题，但其他⼏代⼈不⼀定知道汉堡包图标代表什么。

他们的⽹站加载在3G⽹络设备上也只有短短2秒内与3G⽹络设备，GSMA说将⼿机连接到2020年的70%可以防⽌⽤户因等待过久⽽离开。

8. Slack

Slack的品牌以简单和⼈性⽽著名。毫⽆疑问,他们的⽹站遵循相同的指导⽅针。其灵活的⽹格很容易适应各种尺⼨和形状的视⼝。例如，尽管客户

标识在台式机和笔记本电脑上的三列布搽的意思 局中显⽰，但它们在移动设备上以单列布局显⽰。

Sl苹果dns ack的⽹站设计也被称为易于使⽤。例如，他们的号召性⽤语按钮覆盖平板电脑和⼿机上的整个专栏，这有助于⽤户避免点击下⾯的“登录”超

链接。

9. Treehou

Treehou提供跨所有平台的⽆缝体验。他们的菜单在各种设备上逐渐变⼩ - 台式机和笔记本电脑具有四项菜单，平板电脑具有两项菜单和汉堡

包图标，⼿机提供单项菜单和图标。

他们的表单域经历了相同的变化。它们在桌⾯和笔记本电脑上以两列显⽰，在平板电脑和⼿机上显⽰为⼀列。

10. WillowTree

与其他公司⼀样，WillowTree在桌⾯设备上包含完整菜单，在移动设备上包含精简菜单。但与其他⼈不同的是，他们在页⾯顶部引⼊了⼀个静态

导航栏，为使⽤⼿持设备的⽤户带来更愉快的体验。他们还在其⽹站的移动版本上添加了基于⽂本的号召性⽤语，以增加便利性。

与其他响应式⽹站⼀样，他们为展⽰客户标识⽽构建的⽹格⾮常灵活。它从台式电脑上的五列折叠到平板上的四列到⼿机上的两列。

与Treehou类似，折叠区域上⽅的区域从桌⾯上的两列转换为⼿机上的⼀列，并且号召性⽤语按钮从副本旁边转移到下⽅。

11. WIRED

WIRED的⽹站具有动态布局，在桌⾯设备上具有多列和侧栏，可在移动设备上转换为单列。

从平板电脑切换到移动设备时，它们的菜单会缩⼩，仅包含其标识，菜单图标和订阅链接。为了保持简单，搜索功能和按部分筛选WIRED新闻源

的功能在移动设备上不可⽤。

WIRED最厉害的⼀个领域是使⽤灵活的图像。他们的功能图像可以跨平台变化。在台式机和笔记本电脑上，图像在正⽅形和长⽅形之间变化，让

⽤户可以充分利⽤⾃⼰的眼睛去探索。然⽽，在移北京专科学校排名 动设备上，所有特征图像都以16：9的⽐例裁剪。

原⽂链接