# 设计 UI 原型 (/zh/use-cases/design/ui-interaction-design)



复制粘贴下面这句话，快速开始你的第一个任务：

<Prompt>
  我需要给『[某个功能]』做一套 UI：目标用户是[谁]，主要使用场景是[什么场景]，设备是[网页/客户端/移动端]，可以参考[已有的界面风格]。先做信息架构和用户流程，不用做视觉，我想先确认结构对不对，再往下走。结构没问题之后，你再做一个可以点击查看的高保真原型，并把每个页面的交互说明逐屏写清楚，包括点击、悬停，以及空状态、加载、错误、权限拒绝这些状态切换，方便工程直接照着做，不用再猜、也不用来回确认。
</Prompt>

<LivePreview component="NewThread" scenario="{ draft: &#x22;我需要给『[某个功能]』做一套 UI：目标用户是[谁]，主要使用场景是[什么场景]，设备是[网页/客户端/移动端]，可以参考[已有的界面风格]。先做信息架构和用户流程，不用做视觉，我想先确认结构对不对，再往下走。结构没问题之后，你再做一个可以点击查看的高保真原型，并把每个页面的交互说明逐屏写清楚，包括点击、悬停，以及空状态、加载、错误、权限拒绝这些状态切换，方便工程直接照着做，不用再猜、也不用来回确认。&#x22; }" />

## 这个工作流是什么 [#这个工作流是什么]

"设计 UI 原型"把一份功能简报变成工程能直接拿去开发的东西，顺序是固定的：先做信息架构——屏幕和流程结构——再动视觉设计。结构确认后，低保真原型会被做成高保真，交互说明也会逐屏写清楚：点击/触摸行为、悬停，以及每种状态切换，包括空状态、加载、错误和权限拒绝的情况，工程不用再猜。

## 怎么用这个工作流 [#怎么用这个工作流]

<Steps>
  <Step>
    ### 雇用一位设计师 [#雇用一位设计师]

    打开左侧边栏的 **AI Teammates**，点击 **Hire AI Teammate**，选择**设计师**模板，专为把产品意图转化成连贯的流程、界面和状态而设计。默认 bio 是通用的交互设计工作，在 Profile 步骤把它换掉，让它知道这份工作从结构开始，不是先做视觉：

    <Prompt>
      你把功能简报变成信息架构，先做屏幕和流程结构，供评审，之后再动视觉。结构确认后，你把它做成高保真原型。你还会写工程不用再猜的交互说明：点击/触摸行为、悬停、以及每种状态切换，包括空状态、加载、错误和权限拒绝的情况，逐屏写清楚。
    </Prompt>

    确认名字后点击**创建队友**，它会落到自己的频道里，之后下面的内容都在那里发给它。[雇用详情 →](/ai-teammates/hire-an-ai-teammate)

    <LivePreview component="CreateAssistantPage" scenario="{ focus: &#x22;profile&#x22;, initialState: { start: &#x22;template&#x22;, templateRef: &#x22;@helio/designer&#x22;, name: &#x22;设计师&#x22;, bio: &#x22;你把功能简报变成信息架构，先做屏幕和流程结构，供评审，之后再动视觉。结构确认后，你把它做成高保真原型。你还会写工程不用再猜的交互说明：点击/触摸行为、悬停、以及每种状态切换，包括空状态、加载、错误和权限拒绝的情况，逐屏写清楚。&#x22; } }" />
  </Step>

  <Step>
    ### 连接 Notion [#连接-notion]

    交互说明和设计决策会记录在这里，作为工程可以对照的持续更新文档。[连接 Notion →](/connect/connect-tools-to-ai-teammates)

    <LivePreview component="AssistantIntegrations" />
  </Step>

  <Step>
    ### 给它简报 [#给它简报]

    <Prompt>
      我们需要『[某个功能]』的 UI：[它做什么，一句话说清楚]。目标用户是[他们是谁、会怎么用]。参考风格：[已有的、可以参照的界面]。先做信息架构，不用做视觉。我想先评审结构，你再去打磨细节。
    </Prompt>

    <LivePreview
      component="AssistantChat"
      scenario="{ assistantName: &#x22;设计师&#x22;, messages: [
    { author: &#x22;user&#x22;, text: &#x22;我们需要\&#x22;保存搜索\&#x22;功能的 UI：用户可以保存一个筛选视图，有新的匹配结果时收到通知。目标用户是每天刷候选人列表的招聘人员。参考风格：我们现有的筛选面板。先做信息架构，不用做视觉。我想先评审结构，你再去打磨细节。&#x22; },
    { author: &#x22;assistant&#x22;, text: &#x22;先做结构不做视觉，按你说的来。我会把保存搜索→通知→查看匹配这条流程的信息架构对照你现有的筛选面板画出来，评审完结构再去打磨细节。&#x22; },
  ] }"
    />
  </Step>

  <Step>
    ### 确认结构后再要交互说明 [#确认结构后再要交互说明]

    低保真结构确认后：

    <Prompt>
      把这个做成高保真，然后逐屏走一遍，写清楚每个元素点击、悬停和每种状态切换时会发生什么，包括空状态、加载、错误和权限拒绝的情况。
    </Prompt>
  </Step>
</Steps>

<Callout type="info">
  如果你们还没有设计系统，给它参考风格，它会提议一套，之后设计的每个屏幕都会一致地应用这套系统。
</Callout>

## 用得更好的几个提示 [#用得更好的几个提示]

| 提示               | 说明                                                            |
| ---------------- | ------------------------------------------------------------- |
| 先结构，后视觉          | 先确认信息架构——屏幕和流程结构——再开始任何视觉设计。针对结构提反馈，比针对做好的原型再返工要快得多。          |
| 提前给参考风格          | 如果你们有想参照的现有界面，一开始就说清楚。没有设计系统的话，队友会根据你给的参考风格提议一套，之后每个屏幕都一致地套用。 |
| 明确要交互说明          | 点击/触摸行为、悬停，以及各种状态切换（空状态、加载、错误、权限拒绝），只有在结构确认后你明确提出，才会逐屏写清楚。    |
| 连接 Notion 留一份活文档 | 交互说明和设计决策会记录在 Notion 里，工程可以对照查阅，而不是只能翻聊天记录。                   |

## 常见问题 [#常见问题]

<Accordions type="single">
  <Accordion title="这个流程一开始就做视觉设计吗？">
    不会。会先做信息架构——屏幕和流程结构——供评审，之后才碰视觉。
  </Accordion>

  <Accordion title="如果我们还没有设计系统怎么办？">
    给它参考风格，它会提议一套设计系统，之后设计的每个屏幕都会一致地应用这套系统。
  </Accordion>

  <Accordion title="它会给工程留下什么文档？">
    逐屏写清楚的交互说明：点击/触摸行为、悬停，以及每种状态切换，包括空状态、加载、错误和权限拒绝的情况。
  </Accordion>

  <Accordion title="哪位队友能做这件事？">
    默认从**设计师**模板开始，它是专为把产品意图转化成连贯的流程、界面和状态而设计的。
  </Accordion>

  <Accordion title="为什么要连接 Notion？">
    这样交互说明和设计决策会作为一份持续更新的参考文档记录下来，工程可以对照查阅，而不是散落在聊天记录里。
  </Accordion>
</Accordions>

<Cards>
  <Card title="Design" href="/use-cases/design" description="返回设计场景总览。" />

  <Card title="把 UI 反馈变成修复" href="/use-cases/design/usability-review" description="每天一份晨报，把反馈分诊成当天的 PR 或者设计师的待办。" />
</Cards>