在这篇客座文章中，漯河vi设计公司解释了如何为具有活跃用户群的现有流行产品设计功能。Ben 向我们介绍了最佳实践，并分享了他在设计Boards 时的轶事，这是Todoist 的最新功能——一个拥有数百万用户的待办事项列表应用程序。

使用Todoist 和Twist 设计更好的工作和生活方式。

向人们已经喜欢的应用程序添加新功能很难。人们已经习惯了他们现有的工作流程，他们对事情的运作方式有期望，他们不喜欢任何形式的变化，并且您的新功能必须符合您之前版本的标准。在产品生命周期的早期，您可以在没有太多影响的情况下做出重大转变。对成熟产品进行改进完全是另一回事。让每个人都开心是不可能的，那么您如何做出设计决策以推动您的产品向前发展以吸引更广泛的受众，同时又不会疏远您当前的用户群？

您如何做出设计决策以推动您的产品向前发展以吸引更广泛的受众，同时又不疏远您当前的用户群？

在漯河vi设计公司，每次我们对Todoist进行更改时，产品设计团队都会应对这些挑战——这是一个每天有2500 万人用来保持生活井井有条的待办事项列表应用程序。在本指南中，我将以我们最近发布的新版块视图为例，引导您为拥有热情用户群的现有产品设计功能。Boards 是一个新的基于卡片的视图，允许您从Todoist 的传统任务列表视图切换到看板式的列视图。

在本文中，漯河vi设计公司将分享我从设计过程中学到的东西，从问题开始，定义我们的目标，早期设计迭代，反馈和研究，这些都导致我们的设计决策一直到交付我们的最终功能。

让我们深入了解我们的设计学习和实践，以及如何将这些课程应用到您自己的产品中。

第1 步：定义您要解决的问题

对于每个新的主要功能，我们首先创建一个产品规格文档以供内部共享。它可以帮助我们定义我们的功能试图解决的问题。我们使用该文档作为我们设计解决方案的起点。我们的产品规格通常由以下结构组成：

这些细节有助于我们阐明设计应该实现的目标。例如，我们对Boards 的问题陈述如下所示：

在处理任务时，人们无法跟踪任务在执行过程中所经历的不同阶段。例如，很高兴知道某项任务是处于“新建”、“进行中”还是“完成”阶段。

在项目级别上，人们缺少一种有效的方式来可视化他们的进度并随着项目的发展重新组织任务。

在Doist，当我们在小团队中工作时，我们自己也感受到了这种痛苦，这些团队每次在特定项目上协作1-3 个月。虽然我们能够使用过滤器和标签来保持井井有条，但Todoist 并没有提供简单的解决方案来跟踪任务状态或项目进度。我们同意研究这个问题的解决方案，这意味着提出一个重要的新功能，它不会妨碍人们对Todoist 的喜爱。

第2 步：为更新设定明确的目标和参数

对于要解决的问题，我们通常会尝试明确产品的目标，我们将在整个过程中回顾这些目标：

一个保持Todoist 简洁性的简单视图

能够将任务拖放到您需要的任何地方

默认情况下查看按Todoist 部分分组的项目

轻松与队友合作，无需复杂的单人游戏使用

您的组织可能有您遵循的标准，这些标准有助于告知您将如何设计解决方案。对于Boards，以下是我们遵循的一些参数以符合Todoist 的标准：

所有平台的一致性和均等性

主题间无缝切换

适用于各种语言

有了这些目标，我们开始设计我们的解决方案。

第3 步：从现有的用户反馈和指标中学习

在设计新功能之前，我们会花时间查看当前的产品反馈。这有助于指导我们的决策并最终确定我们的设计。反馈来自许多来源：支持票、社交媒体评论、分析工具、用户测试和观察。

这是要求我们在Todoist 中提供看板的无数支持票之一：

“Todoist 擅长管理个人任务，但我的绝大多数工作都是在团队中完成的。看板对查看任务状态更有帮助。如果每个项目都可以有“持有”任务的板子，那就太棒了！”

漯河vi设计公司发现人们项目的可视化、看板式视图是我们要求最高的功能之一，但这还不足以实现一个功能。一段时间以来，我们一直在考虑Boards 是否真正符合我们的产品愿景，而这只是增加了一个继续前进的理由。

最终，团队同意继续前进并构建该功能。

第4 步：研究这个想法

看板是一种生产力方法，我们希望将其集成到Todoist 中，以便向更多喜欢这种处理任务方式的人开放产品。我们研究了方法并研究了最流行的看板工具来理解和适应常见的约定。我们开始考虑看板的哪些方面可以在Todoist 中运作良好。具体来说，我们想要一种解决方案，既能保留Todoist 的简单性，又能在各种工作流程中提供可视化项目和跟踪任务的可能性。

第5 步：以低保真方式概述解决方案

在我们的产品规范文档中，我们首先以书面形式定义了一个提议的解决方案。我们澄清提议的想法、要求，并让设计和产品团队进来提供他们的反馈。随着时间的推移，我们可能会包括视觉探索、纸上草图、数字绘图或粗略模型，以帮助阐明功能的选项和整体愿景。

对于Boards，我们的解决方案是这样的：

板视图将提供一种有效的方式来跟踪和可视化任务的状态。因此，跟踪项目的每个步骤、根据需要重新安排优先级并轻松了解项目的最新进展将变得更加容易。在更高层次上，看板视图将有助于巩固Todoist 作为顶级项目管理工具的地位。

第6 步：测试您的模型并尽早获得反馈

一旦你为你的设计确定了方向，没有什么比模型更能真正将一个想法变为现实并知道它是否感觉正确。

漯河vi设计公司开始为Web 平台的Todoist Boards 设计一个模型，看看我们是否能找到一种行之有效的UX 方法。一旦我们对Web 的设计语言有了基本的了解，我们就会转向移动设备，看看该设计是否适用于iOS 和Android。

一旦我们对第一次设计迭代感到满意，我们就会在内部与整个设计团队和公司的其他成员分享，以获得第一轮反馈。

早期的董事会模型

正是在这里，Boards 进行了许多详细的更改，从背景颜色值到角半径再到填充更改。这些调整符合我们的目标，即保持列表和看板视图之间的一致性，并在所有平台上调整功能。

根据与项目目标一致的反馈迭代设计

在整个功能开发过程中，我们通过不同的方式收集内部团队和用户的反馈：

设计评论

开发反馈

来自公司的更广泛的反馈

个人用户测试会话

测试版推出

当我们向团队的其他成员开放我们的设计模型时，会收到大量反馈。我们会在反馈中寻找模式来帮助指导设计。对于Boards，我们使用指定的Todoist 项目将所有反馈收集到一个地方，然后优先考虑我们想要更改和改进的内容。

反馈项目

为了评估反馈并确定它如何适合我们的功能，我们会参考原始产品规范并检查哪些反馈符合功能的原始目标。在设计过程中，作为我们一开始就设定的目标和参数的一部分（参见上面的列表），我们还首先关注伟大的平台平价。优先考虑一致的体验有助于我们跨平台发布更好的第一版功能。

例如，在项目开始时，漯河vi设计公司讨论了移动设备上的缩小功能的需求，以便在较小的设备上获得鸟瞰图。该功能将提供强大的附加功能，但也会引入额外的复杂性和开发时间。我们的产品规范要求规定任务和部分应该是可移动的，并且我们已经在没有缩小功能的情况下实现了这一目标。最后，我们认为这是一个不错的功能，并且我们希望确保在转向不错的功能之前，我们花了足够的时间来获得核心功能。

根据内部小队的反馈，我们选择放弃缩小功能并进一步完善核心功能。在第一个版本发布后，我们仍然可以在未来的积压工作中收集所有相关的想法和建议。

反馈很容易让人不知所措和偏离方向，因此最好为可以实现或不可以实现的目标设定某些期望和目标——实现规范中列出的目标的核心是什么，什么是可以拥有的。

第7 步：创建与当前产品一起使用的一致组件

新功能是为用户提供额外价值的令人兴奋的机会，但保持与产品传统的一致性仍然至关重要。

对于板视图，我们尝试了许多不同的样式、组件和变体，但最终我们希望人们在多年来默认的经典列表视图和新的板视图之间切换时有宾至如归的感觉。我们希望这种体验感觉像是Todoist 的自然演变。

因此，我们尽可能多地重复使用元素（颜色、大小、文本样式、填充、阴影），并且只在绝对必要时才引入新组件。这使我们能够在新功能和熟悉的体验之间找到平衡点。

记录边缘情况和所有可能的交互状态

我们最初的解决方案通常会根据我们定义的目标记录最常见的用例，但人们使用应用程序的方式多种多样。我们试图预测人们使用产品的所有可能路径，以确保体验是一致的。

详细记录边缘案例有助于为开发团队创建更强大的框架，并最终带来更好的体验。对于Boards，我们记录了许多不同的情况，从任务卡的交互状态（空闲、悬停、按下、拖动）到空视图、编辑和滚动状态等等。

交互状态

由于Todoist 支持18 种语言，因此也可以通过本地化出现极端情况。不同的语言字符串可能不适合设计者想要的空间。所以对于板子，我们用不同的语言字符串进行了测试，并确保元素会被截断或换行，并且内容会很好地重排。

在所有平台上进行测试并与开发团队一起迭代

在每个平台上本地测试设计是必不可少的——你不能简单地从桌面上观察你的设计。我们使用我们的设计工具中的镜像应用程序来预览最新的模型，以发现在我们的计算机显示器上进行设计时并不立即明显的尺寸、颜色和交互问题。

在设计实现的后期阶段，我们还会审查实时构建的内部实现，以发现与文档设计的任何差异，或者测试我们不确定的想法和价值观。

阴影值

对于Boards，我们跨平台测试了任务卡组件的多个阴影值，以找到合适的对比度，同时尽量保持最小的美感。

第8 步：遵循最新的平台指南和可访问性标准

在设计新功能时，我们会回顾最新的平台指南。苹果、谷歌、微软都有记录良好的资源，可以帮助设计师创造更好的体验。

了解最新标准有助于我们为设计解决方案做出正确选择，并在平台和产品之间创建混合解决方案。除了最新的平台指南，我们还经常在设计过程中讨论和检查可访问性标准。

在我们所有的产品中，我们都试图找到一个任何人都可以使用的解决方案——良好的颜色对比度、大小合适的文本样式和舒适的触摸目标，等等，这些都应该是任何新功能的默认设置。

第9 步：创建跨平台的一致性

漯河vi设计公司的产品Todoist 和Twist 可在桌面、网络、iOS 和Android 上运行。跨平台创建一致性和同等性非常重要，以便为不同设备类型的人们提供可靠和无缝的体验。

虽然我们通常从一个平台开始并完全定义解决方案，但我们很快就会转向其他平台，看看解决方案是否成立。例如，对于Boards，我们经历了“添加任务”按钮的许多不同迭代，它应该位于哪里，以及所有平台是否应该采用相同的解决方案。对于我们的“添加任务”按钮，我们从FAB（浮动操作按钮）中移开，因为我们需要为每一列提供一个专用的“添加任务”按钮，以便可以直接内联添加任务。在移动设备上，FAB 仍然可以工作，但在平板电脑上，单个FAB 会导致混淆任务将添加到哪个部分。我们尝试了不同的颜色和样式来弥合FAB 和常规按钮之间的差距，但最终我们选择了与桌面上的内联“添加任务”按钮最一致的解决方案。有时会进行权衡，但我们会尽可能保持组件相同。

第10 步：考虑您的设计如何在暗模式下工作

Todoist 带有一系列可供人们选择的主题。暗模式是已证明非常受我们用户欢迎的主题之一。

当我们开始设计新的电路板视图时，我们知道它也必须在暗模式下工作良好。我们有一组现有的暗模式颜色值，我们可以将其重用于板视图，但需要调整一些值（如边框样式和阴影）以与新的任务卡组件很好地配合。

记录暗模式并支持它的新功能有助于我们为用户提供额外的润色，以便他们可以在一天中的任何时间利用新功能或简单地切换以根据自己的喜好自定义应用程序。

设计新功能是一种平衡行为。它通常需要仔细考虑当前产品的设计意图、开发影响、用户需求和期望。在过快地深入你的设计之前，试着澄清你的可交付成果并在做出新的决定或权衡时参考你的目标，从现有用户那里找到反馈，尝试不同的想法，看看哪一个最适合这个问题。

可能没有完美的解决方案，但效果足够好。不断迭代该功能并随着时间的推移对其进行改进。设计从未完成