用流体类型和空间尺度设计和建造

mdruhul13

通过系统化排版和空间的基础知识，并利用网络的内在流动性，一个名为Utopia的免费新CSS 工具提供了断点驱动设计的替代方案。设计和开发之间的这种共享语言简化了沟通，并鼓励为您的项目创建定制约束，以确保一致和谐的设计。
二十年前，当我们踏上从舒适、可预测的印刷设计海岸到万维网流动和不断变化的公海的航程时，John Allsopp 鼓励接受“事物的潮起潮落”。十年后，Ethan Marcotte创造了“响应式网页设计”一词，开启了从固定宽度的桌面网站——及其独立的移动网站——​​到灵活设计的单一代码库的巨大转变。

但我们没有拥抱潮起潮落。并不真地。相反，我们选择了一个任意断点的系统，探险就此结束。与现实世界设备相关的严格“神奇数字”困扰着我们的 CSS 并指导着我们的设计过程。当今的开发人员通常会收到一组适用于移动设备 (320px)、大型移动设备 (400px)、平板电脑 (768px)、小型桌面设备 (1024px) 和大型桌面设备 (1440px) 的模型。花费在生成这么多离散工件上的努力是对时间和资源的低效利用。它还延续了创建特定于设备的网站的古老做法。

此外，由于有这么多独特的参考资料，开发人员通常只能猜 阿联酋电话号码列表 测设计过程中使用的逻辑（如果有的话）。这会导致看似无限数量的相似值进入代码库，不必要地增加 CSS 的重量和项目维护的复杂性。随着生成的特定于设备的模型数量以及涉及的设计贡献者数量的增加，这种卷积呈指数级增长。

乌托邦的承诺 #
确保我们的设计在更多设备上感觉自如的一种方法是添加更多断点，从而在更多屏幕尺寸下实现更细微的设计调整。这伴随着更费力的设计过程、更多模型生成、更多代码和更多文档的成本。

另一种方法是利用媒体的流动性，认识到这种感知到的限制是它真正的优势。我们可以放手，放弃一些控制并让媒体分担负载，而不是通过加载断点来加强我们的控制。我们可以通过更流畅和系统的方法来处理我们的设计基础。



在与客户和同事的对话中，我们发现自己很难清楚地表达出这些有些模糊的概念。为了将这个想法变为现实，我们给它起了个名字：乌托邦。一个词来指代思考流畅响应式网页设计基础的特定方式。以下是我们看到的好处：

使用少量相关规则快速设计和开发，构建系统，而不是在任意断点处对其内容进行每一次排列。
为您的项目创建定制约束，以确保一致和谐的设计。
简化设计和开发之间的沟通和协作。
可视化不可见的：组件化响应空间，编码其实现和行为。
将不和谐的断点跳换为平滑的插值，为每个屏幕尺寸提供编程定制的类型和空间比例。