本文共 8821 字，大约阅读时间需要 29 分钟。
fsm状态设计
Life can be tough sometimes for UI designers. While they get to create great designs, they also get to deal with pressure from clients or PMs. They’re required to consider user experience and user flow. And they often struggle to find an effective way to communicate with developers.
对于UI设计师而言，有时生活可能会很艰难。 他们不仅可以创建出色的设计，还可以应对来自客户或PM的压力。 他们需要考虑用户体验和用户流。 他们经常努力寻找与开发人员进行交流的有效方法。
To relieve some of the pressure from my fellow designers, I want to help by introducing a better way of handling UI components with state variations. I believe this is one of the biggest challenges designers face.
为了减轻设计人员的压力，我想通过引入一种更好的处理状态变化的UI组件的方法来提供帮助。 我相信这是设计师面临的最大挑战之一。
Dealing with state variations of UI components is painful. At first, I thought it was so difficult because you need to create different views, which can be boring. But then I realized that design is not the terrifying part. Rather, missing states and telling developers exactly what you want are. So, this article will address these two issues.
处理UI组件的状态变化很痛苦。 一开始，我认为这很困难，因为您需要创建不同的视图，这可能很无聊。 但是后来我意识到设计不是可怕的部分。 而是缺少状态，并告诉开发人员确切的需求。 因此，本文将解决这两个问题。
To prevent the design team from failing to prepare necessary states, have been proposed as the norm for designers to follow. But for the sake of accuracy, I’d like to point out the difference between a state and a matching view first.
为了防止设计团队无法准备必要的状态，已建议 作为设计人员遵循的规范。 但是出于准确性的考虑，我想先指出状态和匹配视图之间的区别。
State is in fact the output of a UI component after receiving an input. One state might or might not need a matching view to interact with users.
状态实际上是UI组件在收到输入后的输出。 一个州可能需要匹配视图，也可能不需要匹配视图才能与用户交互。
Therefore, a UI component can only have , but each state can actually have various versions of the views. Confused? Let’s take a look at an everyday example of a submit button, and I think you’ll grasp it immediately.
因此，UI组件只能具有 ，但是每个状态实际上可以具有视图的各种版本。 困惑？ 让我们看一下“提交”按钮的日常示例，我想您会立即理解它。
But how do we know that there are three others states besides the initial one? And how do these states switch between each other? It’s easier to understand this question by looking at a flowchart.
但是我们如何知道除了最初的状态外还有其他三个状态？ 这些状态如何在彼此之间切换？ 通过查看流程图，更容易理解这个问题。
The method that helps us manage UI states is crucial. It should convey the message of what state the component should switch to after receiving certain input. But even though that flowchart is a powerful tool in most cases, it’s not ideal for detailed state variations, because of these disadvantages:
帮助我们管理UI状态的方法至关重要。 它应该传达在收到某些输入后组件应切换到什么状态的消息。 但是，尽管该流程图在大多数情况下是一个强大的工具，但由于以下缺点，对于详细的状态变化也不是理想选择：
Inconvenience. It requires the help of software or plugins (other than classic office or design software) to draw, modify, or maintain the chart. And it’s huge.
不便之处 。 它需要软件或插件(传统的Office或设计软件除外)的帮助才能绘制，修改或维护图表。 而且很大。
Impreciseness. It’s hard to tell which states require a view, and which inputs switch the states.
不精确 。 很难说出哪些状态需要视图，哪些输入可以切换状态。
Complexity. It requires extra attention when choosing correct symbols and colors.
复杂性 。 选择正确的符号和颜色时，需要格外注意。
To sum up, it’s inefficient and inaccurate to manage the states of UI components using a flowchart. I believe most designers would agree. So, I’m now going to propose a better way here.
综上所述，使用流程图管理UI组件的状态效率低下且不准确。 我相信大多数设计师都会同意。 因此，我现在将在这里提出一种更好的方法。
Designers, don’t get freaked out by the tech-sounding name! Let me break it down.
设计师们，不要被听起来像是高科技的名字吓到了！ 让我分解一下。
Finite state machine (FSM) is an abstract machine that organizes all possible states and inputs. This methodology is commonly applied in programming and all kinds of devices. Take a look at the finite state machine example of a turnstile illustrated in , and you’ll have a better idea right away.
有限状态机(FSM)是组织所有可能状态和输入的抽象机。 这种方法通常用于编程和各种设备。 看一下所示的十字转门的有限状态机示例，您马上就会有了一个更好的主意。
Again, the FSM is just a collection of states and inputs. It’s that simple. Let’s take a deeper look at the usage of this table, and experience the power of it.
同样，FSM只是状态和输入的集合。 就这么简单。 让我们更深入地了解此表的用法，并体验它的强大功能。
There are three columns in the table: From State, Input, and To State.
该表中有三列： 从状态 ， 输入和到状态 。
In the column From State, each cell represents one possible state the component can have.
在“ 状态 ”列中，每个单元格代表组件可能具有的一种状态。
The Input column contains the most important information in the table: what limited actions can be executed or inputs to receive in each state.
“ 输入”列包含表中最重要的信息：在每种状态下可以执行哪些有限的动作或接受哪些输入。
Finally, the To State column is in fact the output state according to the corresponding input.
最后，“ To State”列实际上是根据相应输入的输出状态。
The table clearly lists three things:
该表清楚列出了三件事：
Comparing this to the flowchart, text notes, or interactive prototype, I believe most developers would be glad to receive this table. It covers almost all the information a developer needs!
将其与流程图，文本注释或交互式原型进行比较，我相信大多数开发人员都会很高兴收到此表。 它涵盖了开发人员所需的几乎所有信息！
Besides lowering communication costs, the FSM table encourages a mindset as well. It helps build a clear connection between cause and effect, preventing you from making decisions without the support of sound logic.
除了降低通信成本外，FSM表还鼓励一种思维定势。 它有助于在因果之间建立清晰的联系，从而防止您在没有合理逻辑支持的情况下做出决策。
Now, after this brief introduction to the FSM table, let’s consider a more practical and complicated example so we can really see the power of it. Let’s look at a login page.
现在，在对FSM表进行简要介绍之后，让我们考虑一个更实际，更复杂的示例，以便我们真正看到它的强大功能。 让我们看一个登录页面。
The page contains a header, a main heading, a form group with two input fields, and a submit button. To get an overview of the authentication functions, we still need a clear flowchart. But it can’t express the detailed variations of the components, because of the disadvantages mentioned above.
该页面包含标题，主标题，具有两个输入字段的表单组和一个提交按钮。 为了获得认证功能的概述，我们仍然需要一个清晰的流程图。 但是由于上述缺点，它无法表达组件的详细变化。
For example, if a user clicks the submit button and the validation fails, we get an error message — and we get this information from the flowchart. But what about specific input validation messages when the user tries to focus, blur, or click against each input field? When should the input validation function init? Should the submit button be locked until the user’s input in the form is validated?
例如，如果用户单击“提交”按钮而验证失败，我们将收到一条错误消息，并且将从流程图中获取此信息。 但是，当用户尝试聚焦，模糊或单击每个输入字段时，特定的输入验证消息又如何呢？ 输入验证功能何时应初始化？ 在验证用户在表单中的输入之前，是否应该锁定提交按钮？
These are all detailed decisions that might affect user experience, and they shouldn’t be ignored. But how do you, as a designer, tell the developer exactly what you’re thinking? Interactive prototypes, lists of notes, and face-to-face meeting can all be ineffective.
这些都是可能影响用户体验的详细决定，因此不应忽略它们。 但是，作为一名设计师，您如何确切地告诉开发人员您的想法呢？ 交互式原型，笔记列表和面对面的会议都可能无效。
But by preparing an FSM table, things instantly become crystal clear. You can even prepare numerous versions rapidly according to different user experience concerns.
但是，通过准备FSM表，事情立即变得清晰起来。 您甚至可以根据不同的用户体验问题快速准备多个版本。
If you want the submit button to be disabled before all input fields are correctly completed, the table would look like this:
如果要在正确完成所有输入字段之前禁用提交按钮，则表将如下所示：
Or if you follow , the table then looks like this:
或者，如果您遵循 ，则表格如下所示：
Isn’t that easy, fast, and clear? I think it’s way better than other methods!
这不是那么容易，快速和清晰吗？ 我认为它比其他方法更好！
Furthermore, an FSM table can take care of components that aren’t related to data processing as well. Say that the designer wants the header to behave like . The FSM table can help provide thresholds and views of each state.
此外，FSM表还可以处理与数据处理无关的组件。 假设设计师希望标头的行为像 。 FSM表可以帮助提供每个状态的阈值和视图。
That’s it! Congratulations on completing a simple yet understandable document for your authentication page, by combining a wireframe, flowchart and FSM table!
而已！ 祝贺您通过组合线框，流程图和FSM表为认证页面完成了一个简单但易于理解的文档！
In a big company with specialized teams that collaborate intimately on one product, designers might not be required to think about state management problems. I’ve just never been a part of this kind of team before. In general, I think most UI designers still need to communicate with developers, managers, or other designers about state transition in their careers.
在一家拥有专门团队密切合作开发一种产品的大型公司中，可能不需要设计师考虑状态管理问题。 我以前从未参加过这种团队。 总的来说，我认为大多数UI设计师仍然需要与开发人员，经理或其他设计师就职业过渡问题进行沟通。
I sincerely hope that the FSM table helps designers reduce precious time resources on dealing with communication obstacles, and even helps them discover a new way of thinking.
我衷心希望FSM表可以帮助设计人员减少处理沟通障碍的宝贵时间，甚至可以帮助他们发现新的思维方式。
Finally, please let me know if you have any thoughts about this!
最后，如果您对此有任何想法，请告诉我！
( / Read more of my work on
( /在上阅读我的更多作品
翻译自:
fsm状态设计
转载地址：http://zcwzd.baihongyu.com/