响应式网页设计最佳实践和技巧

随着谷歌继续优先考虑适合移动设备的网站，为您的企业提供响应式网站变得越来越重要。 当您的网站具有响应性时，它在所有设备（移动设备、平板电脑、台式机等）上都会看起来很棒

虽然对现有网站进行大修似乎令人生畏，但响应式网站设计并不难。 以下是一些方便的技巧和最佳实践，它们将帮助您轻松、轻松地制作出色、可用的网站产品。

定义你的风格

创建调色板

无论您是使用预定义的品牌调色板还是创建自己的调色板，请记住包含足够的对比色，以便您可以建立明确定义的视觉层次结构。 添加各种色调的中性色将为您的设计提供很大的灵活性。

首先考虑移动

首先考虑您的 Web 元素在小型移动设备上的外观，然后再应用于更大的视口尺寸。 例如，您的按钮是否足够大以供手指按下，并且与其他可点击元素的距离是否足够远？

在初始布局之后创建样式指南，而不是之前

有些人喜欢在开始高保真原型或模型之前创建样式指南并定义他们的 Web 元素样式。 然而，一旦元素被定位在页面上并且相对于彼此被查看，页面的整体设计可能会丢失。 创建一些模型开始，建立您的样式，然后在必要时计算剩余的页面。

一致并不一定意味着无聊

可用性启发法很重要，但从网络上的数十亿其他网站中脱颖而出也是如此。 不要害怕尝试不同的东西，更令人难忘，并帮助您的网站品牌脱颖而出。 您的网站可以很有创意，也很实用。 出色的 UI 设计师或数字艺术总监应该能够平衡这两个元素。

您可能想要样式化和标准化的一些元素包括：

• 标题级别：H1、H2、H3…
• 主要或英雄形象
• 主要导航
• 二级导航
• 正文副本
• 编号和项目符号列表
• 标注或徽章
• 内容图像的处理
• 拉引号样式
• 小部件（旋转器、社交嵌入、日历等）
• 大型号召性用语按钮
• 辅助按钮或文本链接
• 表单元素
• 脚注和合法鼠标类型
• 社交分享

类型

复制块

使用字母间距（跟踪）、边距和行间距（前导）来帮助重新定义您的层次结构。 间距越小，文字就会显得越重、越幽闭。

请记住，从桌面屏幕的左侧一直延伸到右侧的长文本块可能会非常难看。 尽可能使用较窄的复制块。 然而，太多的间距会产生一种干燥、分散的感觉。

不要害怕打破它

如果您的网页内容非常繁重，请使用拉引号、标注、图像、样式列表、表格等将内容分解一下。您还可以合并手风琴、下拉菜单和轮播，以保持页面有趣和信息丰富.

是的，人们确实向下滚动

不要落入认为网页上的所有内容都必须出现在数字折叠之上的老派陷阱。 将最重要或最引人注目的内容放在页面顶部附近，以引导用户走得更远。 这可能是一个有创意但描述性的标题、一个引人注目的引导句或一个强大的图像。

有关的

2020年领先的设计趋势

调整类型

一般来说，对于响应式网站，请坚持使用 14 -18 像素的字体大小。 一般来说，对于那些较大的副本块，使用简单的无衬线或衬线字体，并将其保持在浅色背景上，字体颜色对比度适中。 主标题可以更大，但请记住，在遇到移动大小的断点后，它可能需要稍微变小一点。

类型 颜色

字体颜色的诀窍是它应该与背景有足够的对比度，你可以很容易地看到它，但许多设计师不知道的是，有时字体可能有太多的对比度并且对眼睛很刺眼，使它看起来像振动查看时。 尝试在较暗的背景上谨慎使用较浅的类型，并且仅用于较小的文本块。

类型 重量

较重的字体样式在较小的尺寸下可能难以阅读，并且可能会使页面在较大的尺寸下感觉黑暗和沉重。 细而浅的字体样式在 Retina 和 Retina 类型的屏幕上看起来很棒，但在许多标准分辨率的屏幕上看起来很模糊。

导航

汉堡包！

Navicon 是一个图标，看起来也像一个带有三个堆叠线的小三明治或汉堡包。 如果您觉得您的一般用户群对在线技术并不那么精通，请始终在Navicon上方或旁边添加“菜单”一词。 迄今为止的用户研究表明，如果您在 Navicon 旁边或上方添加“菜单”或“导航”一词，用户更倾向于浏览您的网站。

在长滚动页面的底部包含一个“返回顶部”按钮

研究告诉我们，许多移动设备用户不知道如何在他们的移动网络浏览器中轻松跳转到网页顶部。 要解决此问题，请在网页底部提供一个“返回顶部”按钮。 如果未在页脚中镜像，这将允许用户轻松访问站点导航。

另一种选择是创建一个粘性导航。 这是一个顶级站点导航栏，无论您滚动页面多远，它都始终位于屏幕顶部。 如果您选择走这条路，请确保您的粘性导航高度不超过 100 像素，否则您可能会在较小的视口尺寸上耗尽页面内容的空间。

设计词汇：

大喊
一小段文字设置比页面的其余部分更强烈，旨在吸引注意力。

复制块
分组的段落或一系列文本段落。

（数字）折叠
用于网站设计（与“滚动上方”一起），指的是无需滚动即可看到的网页部分。 由于屏幕尺寸变化很大，因此对于定义折叠的像素数没有固定定义。

衬线
在某些字体中完成一个字母笔划的轻微投影。

无衬线字体
无衬线、无衬线、哥特式、无衬线或简单的无衬线字体是一种在笔画末端没有称为“衬线”的小突出特征的字体。 该术语来自法语单词sans ，意思是“没有”，而“ serif ”来自荷兰语 schreef，意思是“线条”。

类型（印刷）重量
由笔画的相对粗细引起的字体字符的相对暗度，表示为浅色、粗体、超粗体等。

用户
使用或操作某物的人，尤其是计算机、设备或其他机器。

视口
显示屏上用于查看信息的带框区域。

白色空间
在页面布局、插图和雕塑中，空白通常被称为负空间。 它是页面中未标记的部分：页边距、装订线和列之间的空间、文字行、图形、图形或绘制或描绘的对象。