移动优先的设计.pdfVIP

移动优先的设计 小编推荐 ：越来越多的手机访问使得很多网站开始考虑专门做 版手机版 ，耗费了不少人力 不说还要考虑和电脑版的视觉统 ，于是有人提出了跨屏设计 ，今天小编给大家推荐的是国 外研究人士撰写的以移动优先原则制作跨屏页面的方法 ，共从业者参考~ 创建跨设备的响应式设计 如今25%的网站流量来自于手机。如果你不建立个响应式网站 ，你将损失1/4 的用户。好消息是借 助Sket ch、Web Inspect o rs和CSS3等工具 ，你将很容易的完成设计。你仅仅需要知道如何开始和 如何使用。 最近 ，我为Carshare.hk, Ripplechat .io 和 Canvaspo .io做移动设计。在此文中 ，我将带你 起体会 我的工作流程。 在Sket ch中建模 （原型 －译者注 ）： 如果你的设计可以很好的适应iPho ne的屏幕 ，那么它将可以在其他大部分的设备上看起来很棒。由 于我的目标用户是全年龄段的人群 ，他们喜欢更大的字体和图片。适合在舒适的距离来阅读。这便 是我们追求的目标。我们的目标是建立响应式的专注内容的网站。 在Sket ch中 ，我建立2个相邻的画板 ， 个针对iPho ne设计 ，另 个针对iPa 设计 （也适应更高的 分辨率 ） 对于移动端 ，我们设计了宽度为64 0px ，0.5比例显示 （Vew po rt ）。我们试图在实现完美的用户体 验的前提下尽量避免出现视觉差异。你不必设计两个不同的网站 ，而是创建 个适应不同设备宽度 的设计。 针对Hero 内容 ，在手机端将其居中对齐 ；但在桌面端 ，将其居左对齐。同样 ，汽车的数量将根据浏 览器的宽度动态的增减。最后 ，在移动端标题略大。 移动端的上下滚动是很有趣的 ，但我们不能在内容很少时仍然过度使用滚动功能。这就是为什么我 将图标设计的小 些、文字更紧凑 些的原因。如果我在这里仅仅放三个大圆 ，那么阅读同样的内 容将需要滚动三次。 内容需要在任何地方都看起来非常 致。不要有改变。 以点触为标准的设计 如果你有 些设计iO S应用的经验 ，你应该熟悉最小尺寸 ：文字 （24 px ，最佳阅读尺寸 ：32px ）、 按钮 （44 px至88px ）和导航栏 （72px至98px ）。这些尺寸与安卓设备是 致的。 当调整宽度小于720px时 ，应选择60px的按钮使标题过渡到更大尺寸更舒适。 尺寸、对齐、菜单中元素的数量以及按钮应与设备的宽度相适应。 如果你知道比例 ，你可以定位中基准 （mi le gro un ）以适应移动端和桌面端。例如局部标题。 文字尺 和比例 某种程度上来讲 ，大即好。但更重要的是 ，在比例上与内容和谐。如果主体的文字设置为24 px ，那 么确保网站的其他部分与它 致。虽然这些没有硬性的规定 ，但行间距应该为字体的1.2至1.4倍。 设置尺寸、文字粗细和色彩范围都应基于优先级。上述这些要素很多都取决于直觉和专业素养。 标题通常是正文的1.5至2倍大小 ，但文字更细——否则将过度吸引用户的注意力。 行应该有4 5至90个字母 （英文字母 －译者注 ）。请阅读 《排版微指南》 （英文网页 －译者注 ）以 获取更多信息。 支持SV G SV G是 种独立文件格式。它可以在设备间无缝的兼容任意像素密度的显示。 在Sket ch中 ，你可以将文件以SV G格式输出。非常的实用。 SV G同样使用起来难以置信的简单——就像img 样。 （详见下图 ） SV G可以用于IE9以上版本、Firef ox、Saf ari和Chro me浏览器。但是如果你 定需要兼容 些老浏 览器 ，请点击 《如何支持图片》 （英文网页 －译者注 ） 使用网页套件 （Webkit ）来创建动效 展现形式非常重要——它直接影响用户体验。如果它运行缓慢 ，人们不会感激于你设计了副标题。 因为他们只会纠结于运行得如此之慢。 当车启动时 ，在底部我使用网页套件过渡效果 （Webkit -t ransf o rm ）来替代使用jQ uery动效。展现 形式的效果是显著的。此外 ，在移动端的Saf ari和Chro me上表现出色。 为了达到视差效果 ，我为三个不同的元素赋予不同的速度。我使用网页套件过渡效果 （Webkit - t ransf o rm ）来代替CSS顶部位置。滚动起来更顺滑正是得益于此。 设置视图 （View po rt ） 我们需要告诉iO S和安卓设备我们是以0.5比例来设计的。因此以64 0