多年来，网页设计发生了很大变化

一开始，网页设计的主要目标

是为桌面用户创造流畅的浏览体验

毕竟这是人们访问互联网的唯一方式

但今天，

移动革命已经彻底改变了我们为网络设计的方式。

当设计师建立一个新网站时，

他们需要确保它视觉良好，

功能良好，

并能在各种浏览器和设备上传达正确的信息，

另外所有的网站设计客户也都会要求

移动端版本，

响应式网页设计原则、工具和模板使之

成为可能

响应式网页设计是一种设计网站的方法，

可以在各种屏幕尺寸上呈现网页。

下图是用户界面可塑性的一个例子——

界面的流动性并根据可用的屏幕空间

以理想的排列方式呈现自身。

▲ 响应式网页设计改变了网站的布局，以最适合用户正在查看的视口

但响应式设计不仅仅是一种技术方法，

更是良好用户体验的支柱。

与其将屏幕尺寸和分辨率视为设计约束，

不如视为流畅的，

让用户完全控制他们想要查看的方式。

为响应式网页设计调整图像大小

图像是现代网络的基本元素。

图像的质量极大地影响了设计的感知：

不相关的图像或像素化

可能会给访问者留下不好的印象。

不仅要精心挑选相关图片

（向观众传达正确信息的图片），

还要确保图片能够很好地缩放

以适应任何浏览器大小。

有两种类型的图像，

光栅图像（JPG、PNG、TIFF）

和矢量图像（SVG）。

第一组代表网络上的大多数图像，

而这组的关键问题是它们不是自然流动的，

与可以在不损失质量的情况下

按比例缩放的矢量图像不同，

光栅图像必须针对不同的分辨率进行修改。

响应式使用排版 

人们访问网站是为了获取内容，

而书面文本占了其中的绝大部分。

这意味着文本在任何视口大小下

都清晰易读是必不可少的。

因此，当涉及到响应式类型时，

需要牢记：

通过将文本放入图形中，会立即降低网页的响应速度。文本无法在不损失质量的情况下放大，因此网站要为每个断点重新创建视觉资产。

选择可缩放的字体：

为响应式网页设计优化排版的过程始于选择正确的字体。为此，网页设计师需要确保字体大小足够大，以便一目了然。这对于移动设备来说尤其重要：用户永远不必为了能够阅读文本而双击或捏合缩放。同时，最好选择在大电视屏幕和智能手表的小屏幕上清晰缩放且同样易读的字体。一般来说，建议使用像 Helvetica 这样的网络安全字体，因为它们经过优化，可以在不同的分辨率下呈现良好的效果。

正确调整文本大小：

在 Web 上可以通过两种不同的方式调整字体大小：绝对值（像素、点）；相对值（百分比、视口宽度或高度）；像素是绝对值，像素为单位的字体大小基于用户屏幕的像素大小。当使用 px 时，现代浏览器能够使设计在不同分辨率下看起来相似。大多数设计师使用像素，但像素不会使用户根据自己需要调整文本，并且会使设计更难访问。另一个流行的选项是称为em的相对值。使用 em 时，元素 em 的实际大小是相对于其父元素的 font-size 计算的。Em 相对值提供了两个显着的好处：对设计师来说更方便，对用户来说有更多的选择

在过去十年中，

移动设备在我们的日常生活中所扮演的角色

发生了巨大变化。

事实上，56%的网站流量来自智能手机。

移动设计优化是设计过程中的关键部分：

没有针对移动端设备进行优化的网站

会损失大约一半的流量。

移动端和桌面端设计的区别：

（1）显示尺寸

在移动设备上，

内容空间较小，

需要仔细确定要显示的内容的优先级

（2）交互方式

由于用户在移动设备上

使用手指与内容进行交互，

因此悬停效果之类的动画效果不佳。

（3）使用环境

人们可以在旅途中与内容进行交互，

因此移动网站应该设计用于更短的用户会话

和更小的注意力跨度。 

使用移动端优先的好处：

使响应式设计更容易，

有利于搜索引擎优化。

 如何利用移动端优先策略来设计？

（2）舒适的交互设计

用户通过点击与桌面网站进行交互，

而移动版本则通过手指点击和滑动进行交互。

人们也只用一只手使用他们的移动设备，

优化网页布局非常重要，

以便所有关键功能元素（例如号召性用语按钮）

都位于拇指友好区域

所有点击目标的大小都应适当。

动作按钮等功能元素的大小应至少为 9mm，

相当于用户拇指的大小。

如果并排放置两个交互控件，

则需要在这些交互选项之间添加足够的空白。

（3）减少打字

响应式网页设计不仅仅是让内容适合，

它还为用户创造更舒适的交互。

对于移动设备，

打字是用户旅程中最痛苦的部分之一。

小屏幕使在移动设备上打字变得困难且容易出错。

只要有可能，

尽量在在线表格中使用预填数据。

移动设备的伟大之处在于

可以利用它的一些硬件功能，

比如iOS中的Touch ID / Face ID

（4）针对移动设备

以加载时间缓慢为例，

加载缓慢是人们放弃网站的常见原因。

Jakob Nielsen 定义了三个响应时间限制：

0.1 秒给人瞬间响应的感觉。

理想情况下，

网站应在 0.1 秒内响应。

一秒钟让用户的思路顺畅无阻。

10 秒大约是保持用户注意力的极限。

但根据谷歌的研究，

随着页面加载时间从 1s 变为 3s，

跳出的概率增加了 32%。

优化移动端则可以通过：

定义关键指标

评估动画过度和运动效果

优化图像传递

对图像和视频延迟加载

衡量网站性能等来优化

（5）在真实设备和不同浏览器中测试设计

一般在测试过程中，

可以看到网站在不同平台上的运行情况，

以及它的跨浏览器兼容性

- END -

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。