关于响应式设计(移动设计)规划的设备规格图解

 

作者简介：Adam Edgerton，供职于Metal Toad，高级项目经理。Adam对于web开发、移动设备/软件开发和社交媒体方面的新技术，都饱含着浓厚的兴趣。

........................................................可 - 恶 - 又 - 不 - 得 - 不 - 有 - 的 - 分 - 割 - 线........................................................

在Metal Toad，我们都是响应式设计的大批粉丝，但是在响应式规划的过程中，我们经常会碰钉子，到底选择何种设备宽度比较适合呢？就在昨天，我们刚经历过一场浩大的内部争论：最佳宽度应该规划为三分式设计，四分式设计，等等。我在下面写出了得到的结论，然而却产生了另一个重大的区分——每种布局都有两个方面要考虑：对于特殊布局的像素宽度，范围在多少比较合适，以及设计师们应该创建的PSD文件的像素宽度是多少。

对于响应式设计，需要考虑各种不同分辨率的设备。为此，我们做了一个简单而又便利的图表，其中罗列了目前为止最常见的设备，其中涵盖了一些潜在设备的宽度范围。另外在这里也应该公开源自于Sisu(一个设计工作室)的妙想，它是个很有创意的伙伴。


图解
下面就是图解了。你可以下载PSD格式的文档并随着新设备的出现对文件进行更新，或者在视觉风格上根据你自己的响应式宽度范围进行尝试性的体验。



几点注解：

• 由标识可知，图示将设备分为上面的纵向和下面的横向两种。我们曾经考虑过做个更直观的高度/宽度图解，但相比之下，宽度才是我们在响应式设计中所关切的。因此，最有意义的，莫过于在一条轴线上把所有东西都标识出来。
• iPhone和iPad(在响应式设计中，这两种设备经常被拿来当经典案例)分别被列为320X480和768X1024两种。从开发意图上来说，这两种设备如何渲染布局也是很敏感的。尽管新的iPhone 4/4S和“牛排(the new iPad)”的retina视网膜(Retina)屏幕，在水平和垂直方向上都增加了2倍于以前的像素数量，但是谈及到PSD文件，应该还是尽可能地把宽度设计为640px和1536px，因为你的宗旨是要让视网膜屏幕上的图像的等比缩放操作更加轻快简洁。设计为640px和1536px，就好像它们天生就该用在320px/768px的设备上。

建议的布局方式
争论从昨天就开始了，因为我们遇到的情况是只需要三分式布局，但与之相对地，Metaltoad.com就是四分式布局。于是，我们的决定如下：


三分式布局
三分式布局看起来似乎有些复杂，因为按常理来说，手持设备一般分为竖向手机、横向手机、竖向平板以及横向台式机/横向平板。最简单的解决方案是把横向手机和更大分辨率的纵向手机和平板设备归为一类：

• 0-519像素：绝大多数手机的竖向模式都参照极窄布局的方式，这种“流式宽度”布局能够精确适应屏幕宽度。横向模式的Iphone仍然参考这种极窄布局方式。
• 520-959像素：一些大屏、高分辨率的新新安卓手机在竖向模式上，就参考这种中间式的布局，那些Kindle Fire、iPad和大多数的Android平板设备亦是如此。大多数的安卓手机在横向模式上也会参考这种布局。
• 960+像素：新的大屏安卓手机、Kindle Fire、iPad和大多数的Android平板设备在横向模式上会参考这种全屏宽度的布局台式设备也是这样。

设计指标：

• 布局方案一(Layout 1)：对于PSD文件来说，竖向显示模式的iPhone(320/640px)是个不错的候选。自从“流式宽度”流行开来，这种布局在宽度上可以很好地适应其他设备。
• 布局方案二(Layout 2)：对于PSD文件来说，iPad (768/1536px) 是个很好的选择。这种布局方式能够在其他设备上以相同的布局自适应缩放。
• 布局方案三(Layout 3)：对于固定宽度，又含有背景的的台式设备(960px) ，这种布局方式是最有意义的。

四分式布局
Metaltoad.com采用的就是这种布局方式，具体实现详情可以参见“我们是如何让Metal Toad对于移动搜索更加友好”这篇文章。近来一段时间新设备层出不穷，对于站点Metaltoad.com，我们依然采用这种四分式的布局：

• 0-519像素：绝大多数手机的竖向显示模式都参照极窄布局的方式，这种“流式宽度”布局能够精确适应屏幕宽度。横向模式的Iphone仍然参考这种极窄布局方式。
• 520-759像素：一些高分辨率的手机在和低分辨率的平板设备(包括Kindle Fire)在竖向显示模式上，参照的就是这种布局。
• 760-959像素：iPad和大多数的Android平板设备在竖向显示模式上会参考这种布局，大多数的Android手机在横向显示模式上，也是如此。
• 960+像素：一些新的大屏Android手机、Kindle Fire、iPad以及很多Android平板设备在横向显示模式时或参考这种全屏宽度的布局，台式设备也是这么采用的。

设计指标：

• 布局方案一(Layout 1)：对于PSD文件来说，竖向显示模式的iPhone(320/640px)是个不错的候选。自从“流式宽度”流行开来，这种布局在宽度上可以很好地适应其他设备。
• 布局方案二(Layout 2)：对于PSD文件来说，Kindle Fire(600px)是个很好的案例。
• 布局方案三(Layout 3)：对于PSD文件来说，iPad(768/1536px) 是个很好的选择。这种布局方式能够在其他设备上以相同的布局自适应缩放。
• 布局方案四(Layout 4)：对于固定宽度，又含有背景的的台式设备(960px) ，这种布局方式是最有意义的。

六分式布局
要么就不玩，要玩就玩大的，对吧？如果你的项目预算就像个无底洞，并且想最大程度地定制化，那么六分式布局正合你心。

• 0-240像素：老式的可上网手机和一些小规格的设备参照这种极窄布局。由于可用空间有限，，这些设备主要采用基于文本的布局。
• 241-399像素：竖向显示模式的iPhone有它们自己的布局方式，同样地，那些老式的具有上网功能的手机，在横向显示模式上的布局也是如此。
• 400-540像素：横向模式的iPhone和很多竖向模式的Android手机采用这种布局。
• 541-767像素：这种布局只适用于竖向显示的Kindle Fire！
• 768-959像素：iPad和大多数竖向显示的平板设备采用这种布局，很多横向显示模式的Android手机也会采用之。
• 960+像素：最后，这种最宽的布局方式会被很多横向显示模式的平板设备采用，还有台式设备。

设计指标：

• 布局方案一(Layout 1)：针对240px宽度范围的设备的PSD文档设计，大多会使用这种流式布局。
• 布局方案二(Layout 2)：其次，对于竖向显示模式的iPhone (320/640px)，200-400像素的宽度范围是个不错的选择。
• 布局方案三(Layout 3)：这种布局方式跟上一条很相似，但主要适用于竖向显示模式的Android(480px宽度)手机。
• 布局方案四(Layout 4)：只适合竖向显示模式的Kindle Fire(600px)。
• 布局方案五(Layout 5)：对于 iPad (768/1536px)的PSD文档设计，这是个很好的选择。
• 布局方案六(Layout6)：对于带有背景的定宽(960px)设计的台式设备，这种布局方式是最爽的！

你该作何选择呢？
如果你正在针对各种设备的宽度进行规划或者开发，希望以上这些内容能对你有所帮助。恰巧在急需之时，这个PSD规划图稿值得珍藏使用哦~如果你对于响应式设计方面很有经验，想交流，亦或想吐槽，欢迎在文章后面留下您宝贵的评论！

原文地址：http://www.metaltoad.com/blog/si ... ive-design-planning