全国免费咨询热线:400-611-9921
 
移动优先的设计

2015-11-25

836

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

创建跨设备的响应式设计

如今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一样,我们试图摒弃一些老的设备使用更小的解决方案。


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
本文来自广州品牌网站建设网站设计制作公司-纵天
关键词:移动网站建设,高端网站建设,企业网站建设,广州响应式网站
热门标签
柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭