【发布时间】：2019-08-11 11:29:04
【问题描述】：
我正在尝试创建用户交互图表。在许多情况下，我必须采用一些参数，例如：mousePosition.x 或 touchDown.duration 等，并通过一些 f(x) 函数将其传递给使用这些参数作为接口属性来呈现不同的 UI。
让我们以基本的滑块界面为例。 [-----o-----]
我想绘制一个操纵滑块旋钮的简单行为图。我的逻辑如下：
pre condition: mousePosition.x = knobPosition.x; knobPosition.x = n
event: mosuseDown
event: mouseMove.x
if knobPosition.xMin < mousePosition.x < knobPosition.xMax
render: knobPosition.x = mousePosition.x
if ( mousePosition.x > knobPosition.xMax )
render: knobPosition.x = knobPosition.xMax
if ( mousePosition.x < knobPosition.xMin )
render: knobPosition.x = knobPosition.xMin
我的第一个想法是通过状态机来绘制这种行为，尽管对于更复杂的示例它会变得混乱。也许有一些建模语言被设计来模拟这些行为？
【问题讨论】：
-
我认为这更像是一个设计问题。有很多方法可以实现这种行为。你的目标是什么？
-
@qwerty_so 我的目标是找到一种一致的方法来通过图表实际设计这些行为。我知道有很多方法可以实现类似于我在 Slider 示例中展示的行为。作为一名设计师，我想非常清楚我打算为特定组件设计什么。这对我正在构建的产品很重要，因为有许多 UI 元素具有非标准行为。总而言之 - 我正在寻找一种建模语言/图表类型，它允许对 UI 行为进行建模，尤其是当某些用户事件值映射到 UI 外观时。
-
我猜想序列图是设计这种行为的最佳选择。它侧重于具体的编码。该示例的状态机不会那么富有表现力，因为您只有 2 或 3 个状态：空闲、拖动和拖动结束。