Godzilla. 2018-11-08 网站建设

响应式网站设计的一些建议（二）

关于响应式网站的技术提示

　　我很好地解释了为什么引导客户很重要，现在我要告诉你设计响应式网站的最佳方法。

　　你可能会理解你的开发和编码，在应对响应式网站时，每个人的工作流程都是不同的。这本身就很好，因为这意味着我们总能产生新的工作方式。

　别担心，我将给你一些设计响应式网站的建议，在结合上一篇响应式网站设计的一些建议（一）的内容，你应该可以很容易地付诸行动。你可以选择使用它们，并在你认为合适的时候组合应用它们。尝试各种不同的方式来设计响应性网站，看一看哪些方法最适合你。

　　视觉稿

　　在Photoshop（或其他任一款设计软件）中为静态宽度的站点创建一系列视觉稿曾经是大多数设计师设计网站的方式，对一些设计师来说，现在仍然使用这一工作流程。如果你喜欢使用图形设计软件来设计网站的视觉稿，这确实很好。

　　但不要试图为每一个分辨率或宽度设计一个视觉稿，大量的视觉稿会让你抓狂。相反，回想一下有关线框图的技术文章。考虑一下我们是如何看待这些线框图的内容流的，以及我们是如何决定将所有内容布局在设计稿上的。试着将它们转换到你的设计中，并考虑当屏幕大小改变时，这些元素将如何流动和移动。

　　内容的变化将是重要的,可以创建几个不同尺寸范围内的展示模型。但对一些其他变化,例如文本编辑区域,我认为最好保持为初始的编码原型。如果你喜欢为每个主要阶段设计一个模型，那么无论如何，请继续，只要你知道这将增加到你的项目时间。

　　在浏览器中设计

　　你可能听说过在过去围绕着浏览器设计的争论。在浏览器中设计是指你从一个线框图阶段直接进入浏览器开始设计阶段，而不是使用任何图形软件设计视觉稿。如果你使用很多在线工具来帮助你创建你的设计层级元素，这也可以很好地工作。然而，许多设计师会认为在浏览器中进行设计很困难，这是因为他们觉得这么做限制了他们的创造力，让他们更难想出有创意的、独特的、视觉上令人兴奋的构思。但作为一名开发人员，你很可能非常喜欢使用代码，因此乐于在浏览器中尝试进行设计，并看看会得到什么结果。

　　在浏览器中做决定

　　这可能是我个人最喜欢的。在浏览器中做决定意味着你可以在图形设计软件和浏览器中做同时工作。就我个人而言，我认为你想要得到一个更好的设计结果，必须将它放置在浏览器中进行验证。视觉稿在图形设计软件中的呈现方式总是与在浏览器中的呈现方式有些不同，在浏览器中验证创建原型和并快速迭代阶段效果要好得多。

　　混合使用图形设计软件和浏览器的工作意味着你可以为你的设计和你必须做出的决策提供很大的灵活性。虽然在图形软件中可以做出许多重大的创造性决策，但浏览器是你最终选择的产出环境。

　　内容为先，电脑端为先或是移动端为先？

　　首先，如果你还没有从上文中学到什么-先开始你的设计工作吧。这意味着你要确保你使用的是真实的内容和你设计的网站上要使用的内容。

　　其次，你是在移动设备上工作(从更小的布局开始)还是在桌面自顶向下(从全宽的桌面布局开始)完全取决于你自己。网上有很多相关争论，但实际上这是你自己的决定。如果你觉得从更大的尺寸到更小的尺寸更有创意，即使你以相反的方式建造网站，那也没关系。

　　一些有用的响应式设计工具

　　让我总结一下一些有用的工具资源，有很多工具可以帮助你设计响应式网站，看看吧：

　　网格

　　·Gridset（http://www.gridsetapp.com/）

　　·ZURB Foundation（https://foundation.zurb.com/）

　　·Inuit.css（https://github.com/inuitcss）