跳到主要内容

使用元素和模块进行设计

作为一名数字设计师,我一次又一次地重新审视的一个热门话题是“在浏览器中进行设计”的想法。

在我们努力改进流程,提高工作效率和提供更好产品的方法时,在浏览器中进行设计已成为一种更快进入浏览器的方式,并消除了我们对已签署的PSD交付项的依赖。这种方法有很多好处,我相信它突出了我们依赖图形编辑软件的许多问题。然而,这种做法留下了传统的可视化设计方法,这是我们许多人尚未完全熟悉的。此外,我们不能完全脱离向客户提供表明我们意图的有形和可见的东西。

但是当谈到在Photoshop中工作时,我们都知道我们的设计与浏览器中的设计不同。由于我们在图形编辑器中拥有更强的控制权,因此字体不会呈现相同的效果,并且我们很少复制PSD中实现的完美程度。我们花了很多时间来完善每个页面和状态,这往往最终被浪费掉了。决定应该在浏览器中做出。

尽管如此,我相信图形编辑仍然在我们如何可视化和交付我们的网站方面发挥重要作用。有一种方法,我们可以利用两种方法中的最佳方法,允许我们的图形编辑器和浏览器之间的流体转换,然后我们可以做出最终决定。对于这种方法,我们需要开始将我们的设计视为“元素”和“模块”。

我建议我们开始使用我们的图形编辑器来设计网站的“元素”和“模块”。元素是按钮,表单,输入,链接等,模块是元素组和它们的交互方式 - 以及定制设计的区域。

我们通过创建全局样式指南,单个页面的设计,然后在其他页面上创建感兴趣的特定区域来实现此目的。

全局样式指南将概述所有表单,输入,链接和按钮样式以及常见分组。通过设计一个页面,我们然后展示了网站的整体感觉。我们不需要担心设计每一页,因为线框将决定意图。

我们已经看到前端开发采用了类似的方法。布拉德弗罗斯特在他的文章中提到'原子设计'我们应该看看我们设计的模块化元素。同样,Robin Rendle也有讨论主题。我对罗宾的文章感到痛苦的是,他讨论了如何使我们的代码更加面向对象可能会造成失去“独一无二的装饰”的风险,这使得项目变得独一无二。

我觉得直接在浏览器中设计会产生相同的风险。当你进入浏览器的那一刻,就很难脱离开发思维。您开始根据浏览器的功能和编码预期视觉效果的能力来限制自己。为了解决这个问题,我建议使用特定页面来设计线框中标识的特定感兴趣区域。我们使用此页面来识别和设计我们认为页面所需的独特装饰。无论是一次性造型还是内容块,我们都觉得在放入浏览器之前需要“搞清楚”。此外,如果我们使用BEM原则对于设计的命名惯例,它还意味着在设计,用户体验和开发方面有明确的对话。

我现在已经将这种技术用于了几个项目,虽然还需要改进,但它对我来说是成功的。我们在图形编辑器中花费的时间大大减少了,但它变得更有价值。我们让线框决定架构决策,并在浏览器中花费更多时间。最重要的是,这种方法为客户提供了明确而清晰的文档,说明了将要设计的内容。



翻译字数超限