分散布局和矛盾:响应式设计可以是一个痛苦。为了缓解它,我们正在一个轻松,自动化工作流程 – 我们已经拿到了第一个插件准备。
我们都在那里在一些点:你设计了多种屏幕尺寸和你在所有这些不同的屏幕,文本样式和符号的混乱迷路。
在十一月五,我们一直在努力,现在来解决这个问题相当长的一段时间。我们的许多项目让事情变得非常简单:我们往往只需要设计了两个断点,或涉及一个简单的单页,独特的屏幕的量是有限的。这使得它比可行保持文本的样式和符号整个项目。
但是,当你要设计出超过200多页的网站,5个断点?然后,它就会变得混乱。非常快。
当然,原型设计布局解决了一些问题,帮助你发现问题及时处理,但原型的主要目标仍然只是来验证设计系统前面。
让我们描述了一些细节问题,我们 – 他们可能会听起来很熟悉?
扫描的不一致性
大多数时候,我们在二重奏工作:一个UX设计师,一个UI设计。然而,这种方法可以使其很难被发现不一致迅速,当你同时创建一个项目的不同阶段。东西似乎很小,但随后的发展过程中产生的各种问题。作为一个例子,电网可能有不可预见的问题,或者间隔可能已经在特定的断点不同的定义。
合模断点之间这种差异可能会非常耗时。
多文件对单个文件的方法
此外,还有具有增加难度多个文件。通常情况下,我们会为每一个我们设计设备的文件。对于应用程序或专用平台,这种方法效果很好。但是,当你设计一个敏感的应用或网站,这似乎只是分散你的项目被遗忘。这就是为什么我们一直在转变周围的事物最近,它减少到所有设计工作单个文件,并包含所有线框另一个。
解决方案:大局观
现在,我们不相信说教,我们仍然发现我们的理想流自己 – 但我们一直在思考,我们想从这里走。
一方面,素描和灵气,介绍了一些有趣的约束选项,这将让你轻松扩展或重新设计。这是一个巨大的进步!然而,它并没有解决我们的屏幕管理和不一致的问题。并非一切都可以是一个符号,有时特定的返工需要做的事情。
最近以来,我们已经确信,我们的开发团队有一些专门的时间来工作的插件为我们的设计团队。我们现在正处在一个探索阶段,测试一些小系统和工作流程-毕竟,我们有一些很酷的想法,包括符合我们目前设计的工作,自动生成特定的屏幕。
我们正在考虑的一些想法:
- 自动生成Flexbox的和固定的栅格结构
- 具体断点的布局改造
- 模板生成项目的断点
同时,插件的时间!
虽然与理想的流量实验,设计为响应布局,我们发现,我们可以建立一个简单的排序插件已经解决了一堆我们头疼的。
因为现在我们在一个文件中的设计,我们可以很容易地代表我们的画板,我们想要的任何方式。因为有时你要专注于一个单一的功能,它的比较,这是有用的所有断点一次,而其他时候,你想查看整个项目或对单个流特定的设备或断点。
我们开发的插件可以让你在这两个表述你的画板进行排序,从而轻松切换设置。
怎么运行的
首先,我们有自己的方式,我们怎么会在这里十一月五命名我们的画板。所有画板使用的命名惯例如下:
断点形部Screennumber,屏幕名。即:X-010-020-主页或M-250-013-Searchwindow空
这允许我们使用画板命名排序。我们提供两种选择:
排序上一节(快捷键^⌥⌘C)
这将根据部分号码你的屏幕进行排序,从而更容易组层流或部分内。这样,你仍然会为你正在设计中的所有断点流的概述。
排序上设备(快捷^⌥⌘X)
这种模式将整理通过首先由断点将它们分组屏幕,和部分第二。这使得它更容易在一次查看所有的桌面屏幕。
当然,这仅仅是个开始!我们已经有了一些更多的东西计划在这个插件…
- 我们仍然有大项目(250个+屏幕),我们需要解决一些小的性能问题
- 手机屏幕往往比他们的桌面变种更长的时间,所以我们要解决我们查看这些方式。
如果你想给它一个去,看看它是否让您的工作更容易,你可以下载插件在这里。或者,你可以来源,并加入我们的团队- 我们仍然在寻找一个UI设计师!