移动优先的设计

创建跨设备的响应式设计

如今25%的网站流量来自于手机。如果你不建立个响应式网站，你将损失1/4的用户。好消息是借助Sketch、Web Inspectors和CSS3等工具，你将很容易的完成设计。你仅仅需要知道如何开始和如何使用。

最近，我为Carshare.hk, Ripplechat.io 和 Canvaspod.io做移动设计。在此文中，我将带你一起体会我的工作流程。

在Sketch中建模（原型－译者注）：

如果你的设计可以很好的适应iPhone的屏幕，那么它将可以在其他大部分的设备上看起来很棒。由于我的目标用户是全年龄段的人群，他们喜欢更大的字体和图片。适合在舒适的距离来阅读。这便是我们追求的目标。我们的目标是建立响应式的专注内容的网站。

在Sketch中，我建立2个相邻的画板，一个针对iPhone设计，另一个针对iPad设计（也适应更高的分辨率）

对于移动端，我们设计了宽度为640px，0.5比例显示（Vewport）。我们试图在实现好的用户体验的前提下尽量避免出现视觉差异。你不必设计两个不同的网站，而是创建一个适应不同设备宽度的设计。

针对Hero内容，在手机端将其居中对齐；但在桌面端，将其居左对齐。同样，汽车的数量将根据浏览器的宽度动态的增减。最后，在移动端标题略大。

移动端的上下滚动是很有趣的，但我们不能在内容很少时仍然过度使用滚动功能。这就是为什么我将图标设计的小一些、文字更紧凑一些的原因。如果我在这里仅仅放三个大圆，那么阅读同样的内容将需要滚动三次。

内容需要在任何地方都看起来非常一致。不要有改变。

以点触为标准的设计

如果你有一些设计iOS应用的经验，你应该熟悉最小尺寸：文字（24px，阅读尺寸：32px）、按钮（44px至88px）和导航栏（72px至98px）。这些尺寸与安卓设备是一致的。

当调整宽度小于720px时，应选择60px的按钮使标题过渡到更大尺寸更舒适。

尺寸、对齐、菜单中元素的数量以及按钮应与设备的宽度相适应。

如果你知道比例，你可以定位中基准（middle ground）以适应移动端和桌面端。例如局部标题。

文字尺寸和比例

某种程度上来讲，大即好。但更重要的是，在比例上与内容和谐。如果主体的文字设置为24px，那么确保网站的其他部分与它一致。虽然这些没有硬性的规定，但行间距应该为字体的1.2至1.4倍。设置尺寸、文字粗细和色彩范围都应基于优先级。上述这些要素很多都取决于直觉和专业素养。

标题通常是正文的1.5至2倍大小，但文字更细——否则将过度吸引用户的注意力。

一行应该有45至90个字母（英文字母－译者注）。请阅读《排版微指南》（英文网页－译者注）以获取更多信息。

支持SVG

SVG是一种独立文件格式。它可以在设备间无缝的兼容任意像素密度的显示。

在Sketch中，你可以将文件以SVG格式输出。非常的实用。

SVG同样使用起来难以置信的简单——就像img一样。（详见下图）

SVG可以用于IE9以上版本、Firefox、Safari和Chrome浏览器。但是如果你一定需要兼容一些老浏览器，请点击《如何支持图片》（英文网页－译者注）

使用网页套件（Webkit）来创建动效

展现形式非常重要——它直接影响用户体验。如果它运行缓慢，人们不会感激于你设计了副标题。因为他们只会纠结于运行得如此之慢。

当车启动时，在底部我使用网页套件过渡效果（Webkit-transform）来替代使用jQuery动效。展现形式的效果是显著的。此外，在移动端的Safari和Chrome上表现出色。

为了达到视差效果，我为三个不同的元素赋予不同的速度。我使用网页套件过渡效果（Webkit-transform）来代替CSS顶部位置。滚动起来更顺滑正是得益于此。

设置视图（Viewport）

我们需要告诉iOS和安卓设备我们是以0.5比例来设计的。因此以640px宽度显示时可以好呈现。对于iPad，我们将比例设为1。

iOS 智能横幅（Smart Banner）

如果你拥有一部iPhone，你可以用一段代码将你的网站和你的应用链接起来并在你的网站顶部呈现你的应用。

当人们用他们的iPhone或者iPad访问你的网站，他们将看到一个漂亮的横幅，它链接到App Store。

使用iOS模拟器

如果你学习了一些Xcode，你可以使用一个简洁的工具来预览你的网站在iPhone和iPad上的效果。

在Safari中检查元素

如果你的iPhone中有开发工具、iOS模拟器和Safari，你可以直接检查HTML和CSS元素。这样对于调试功能、性能测试和即刻应用样式的检查有巨大的帮助。想了解更多信息，请点击这里（英文网页－译者注）。

这里我可以检查iPhone中的Safari浏览器。

在安卓系统的Chrome检查

有一半的移动端用户来自安卓设备。为了检查在安卓系统的Chrome浏览器中各元素的表现，你需要遵循下面的《帮助指南》（英文网页－译者注）。

我花费了一点时间来找到它：菜单 > 工具 > 检查设备（Hamburger Menu > Tools > Inspect Devices）

后记

建立一个真正跨浏览器和设备的响应式网站绝非易事。这就是为什么我们需要高效的完成工作同时避免将过多的时间浪费在一些令我们抓狂的事情上。就像我们学着放弃IE6一样，我们试图摒弃一些老的设备使用更小的解决方案。

文章标题：移动优先的设计
网页地址：/news17/166767.html

成都网站建设公司_创新互联，为您提供微信小程序、Google、虚拟主机、网站维护、建站公司、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联