改进网页设计工作流程的 6 种方法

mimparvin1

在我成为一名开发人员之前，在我成为一名社交媒体营销人员之前……我在北京的一家酒店工作。 我在前厅部工作，负责迎接抵达的客人（其中大多数是当地人）并在他们走进大堂时回答他们的问题。

我有没有提到我只是一名实习生？ 哦，我有没有提到我不会说普通话？ 说这是一个挑战是准确的，但说它是瘫痪也是准确的。当中国客人走进来时，我会低声对自己说：“请不要问我任何事情，请不要问我任何事情。”

入职第一周，我微笑着点头，把客人带到前台，讲普通话的同事一次又一次地帮助我摆脱困境。

在北京的第一周，无声地将客人带到前台后，我在我的工作流程中添加了一句普通话：  

他们可以帮忙。

翻译：“他们可以在那里帮助你。”


这在一段时间里起了作用，每次有客人走近我时，我都会自豪地“说中文”，同时指着前台。 所以虽然我不再沉默了，但我仍然很没用。

最终，我回顾了我有限的工作流程，并意识到在中国……在一家中国酒 爱沙尼亚手机号码列表 店工作时能够真正说中文可能是我最好的举动。所以我决定改善我的情况的最好方法就是实际学习这门语言。那么，所有这些与工作流程有什么关系呢？

花时间审查您的工作流程并愿意改变流程是改善您所处的任何情况（在线和离线）的最佳方法之一。

当我上周去旧金山参加Smashing Conference时，我确实想到了这一点。这是整整两天（在有史以来最伟大的城市！），充满了关于 Web 性能、API、设计系统、CSS 预处理器和一堆极客好东西的讨论。


以下是我对此次活动的总结和笔记，以及我的想法和一些例子，说明我们在 Salted Stone 的团队如何整合会议上讨论的一些想法。

1. 创建元素拼贴

Smashing 大会以SuperFriendly创始人兼设计总监Dan Mall作为第一位演讲者拉开了帷幕。丹谈到了元素拼贴，它们是网站的块或片段，专注于客户目标。他将它们描述为“战略与设计之间有记录的联系”，我很喜欢这一点。

这与我们的入站团队为客户制定网站策略的方式非常相似；不仅关注网站的外观或功能，还包括如何设计和开发网站的每个元素，以帮助我们的客户实现其特定的转化目标。

2. 标准化代码中的模块

关于设计系统和保持模块化的讨论很多，其中多次引用了 Brad Frost 的《原子设计》一书。模块化设计将网站分解为更小的部分或模块，这些部分或模块可以独立创建，然后重复使用整个网站。关于设计系统的讨论对我来说最大的收获是模块应该在开发过程中标准化更好的组织。

一个具体的例子可以在Salted Stone网站上反复出现的设计元素/内容块中找到：

电子书资源

我们将此示例称为“特色资源”块。当您有一个像这样的重复块时，您可以使用以下类来帮助组织其中的必要元素。

→ 特色资源
。资源标题→ 寻找圣杯：向最高管理层进行营销
源-克塔→ 下载电子书链接
source-image → 向最高管理层进行营销电子书封面图片
以这种方式设计和构建站点元素使开发团队能够在站点的多个页面上创建这种类型的特色资源块，但可以灵活地更改每个元素中显示的内容。


会议第二天，Filament Group合伙人Patty Toland谈到了如何提高网络性能。事实证明，最大的问题之一是负面影响影响页面加载时间以及随后的用户体验取决于图像大小。虽然优化图像是大多数开发人员工作流程中众所周知的一部分，但还有一些可能不那么明显的优化页面加载时间的其他方法：

每个断点使用不同的图像- 这涉及在所有屏幕尺寸上使用一张图像变化，但根据所使用的版本调整图像的大小。因此，您可以将桌面版本图像的大小调整为较小的文件药片,然后在应用于移动应用程序时再次缩小尺寸。此方法与工作流程相反，在工作流程中，您只需使用一张仅响应式缩放的大图像。
根据字符需求限制字体- 正如您在下面的屏幕截图中看到的，每个 Proxima Nova 字体粗细会为您的网站额外增加 24-26kB。虽然这可能看起来不多，但各种字体和字体粗细加起来。因此，请花时间检查并删除那些不需要的内容。这有点像吃冰淇淋——你想限制你点的冰淇淋的数量，因为重量会增加。


4. 使用 CSS 预处理器
样式表可能会变得极其重复，这已经不是什么秘密了。我们无意让他们成为这样的人，但我知道我已经不止一次地违反了 DRY（不要重复自己）原则。

像 Sass 或 LESS 这样的 CSS 预处理器可以更好地组织我们的 CSS，特别是臃肿的样式表。它们本质上允许网站通过 mixins（可重用的样式块）和变量（因此您可以在一个地方更改样式并在多个地方更新它）等功能来实现更大的可扩展性。

改进 HubSpot 上的 CSS 工作流程的简单解决方案就是让自己周围有一支出色的开发人员团队，他们基本上能够在类之外创建“变量”。但并不是每个人都像我一样幸运。

5. 打造创意文化我最喜欢的演讲之一是True Ventures的设计合伙人Jeffrey Veen的演讲。他讨论了Google 的亚里士多德项目，该项目检查了 多个团队，试图找出某些团队比其他团队更成功的原因。亚里士多德项目小组直到开始检查团队的心理方面才发现了一种模式，此时他们发现最成功的团队感到安全。

在那些感到安全的团队中，有一种自信，团队不会因为某人的发言而让他们难堪、拒绝或惩罚。我觉得这很有趣，但它完全有道理。

我认为 Salted Stone 开发团队非常酷，因为我们的文化非常协作和开放。我们在 Slack 中有一个开发频道，我们可以在其中互相发送代码花絮、有用的文章以及有关我们正在开发的项目的任何问题。

开发团队广告




然而，提高的唯一方法就是对变化持开放态度，自从我回来后，杰弗里在演讲中说的一句话一直在我的脑海里：“文化是你每天积极致力于的事情。” （主题标签在博客文章中起作用吗？因为＃真相。）

6. 遵循（或不遵循）上述所有步骤

人们很容易被这次会议的硅谷风格所吸引。尤其是当我在世界上最伟大的城市时。（此外，旧金山巨人队统治。）

所以我回来时充满了关于如何改进我们的开发流程和工作流程的想法团队，因为我学到的一切似乎都是个好主意。但伟大的想法的问题在于，它们并不总是普遍的好想法。并非每个伟大的想法都适用于所有场景或情况。

保持行业领先地位并了解新想法和做事方式非常重要，但在结尾这实际上取决于什么对你的团队有用。