調適型卡片概觀Adaptive Cards Overview

調適型卡片是開放式卡片交換格式,可讓開發人員透過通用且一致的方式交換 UI 內容。Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way.

運作方式How they work

卡片作者將其內容描述為簡單的 JSON 物件。Card Authors describe their content as a simple JSON object. 接著,該內容可以在主應用程式內原生轉譯,自動調適為主機的外觀與風格。That content can then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host.

例如,Contoso Bot 可以透過 Bot Framework 撰寫調適型卡片,當傳遞至 Skype 時,外觀和風格看起來就像 Skype 卡。For example, Contoso Bot can author an Adaptive Card through the Bot Framework, and when delivered to Skype, it will look and feel like a Skype card. 將相同的承載傳送至 Microsoft Teams 時,外觀和風格看起來就像 Microsoft Teams。When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. 隨著越來越多的主應用程式開始支援調適型卡片時,相同的承載會由內自動啟動這些應用程式,但仍認為完全是應用程式原生的。As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app.

使用者獲利,因為所有的項目都很熟悉。Users win because everything feels familiar. 主應用程式也獲利,因為其控制了使用者體驗。Host apps win because they control the user experience. 卡片作者也獲利,因為不需要額外的工作就可以擴大其內容的範圍。And Card Authors win because their content gets broader reach without any additional work.


調適型卡片的目標是:The goals for Adaptive Cards are:

  • 可攜式 -適用於任何應用程式、裝置及 UI 架構Portable - To any app, device, and UI framework
  • 開放式 - 程式庫和結構描述是開放原始碼並共用Open - Libraries and schema are open source and shared
  • 低成本 - 輕鬆地定義,輕鬆地取用Low cost - Easy to define, easy to consume
  • 清楚表達 - 以開發人員想要產生的內容為目標Expressive - Targeted at the long tail of content that developers want to produce
  • 純宣告式 - 不需要或不允許使用代碼Purely declarative - No code is needed or allowed
  • 自動樣式 - 主應用程式 UX 和品牌指導方針Automatically styled - To the Host application UX and brand guidelines

對於卡片作者For Card Authors

調適型卡片非常適合卡片作者:Adaptive Cards are great for card authors:

  • 單一結構描述 - 您取得單一格式、將建立卡片的成本降至最低,並將可以使用卡片的地點數目最大化。One schema - You get a single format, minimizing the cost of creating a card and maximizing the number of places it can be used.
  • 豐富的運算式 - 您的內容可以更貼近想要說的,因為可以使用更豐富的調色盤。Richer expression - Your content can more closely align with want you want to say because you have a richer palette to paint with.
  • 廣泛覆蓋面 - 您的內容會用於廣泛的應用程式,而不必學習新的結構描述。Broad reach - Your content will work across a broader set of applications without you having to learn new schemas.
  • 輸入控制項 - 您的卡片可包含正在檢視卡片之使用者所收集資訊的輸入控制項。Input controls - Your card can include input controls for gathering information from the user that is viewing the card.
  • 更好的工具 - 開放卡片生態系統即代表每個人都可以共用之更好的工具。Better tooling - An open card ecosystem means better tooling that is shared by everyone.

對於體驗擁有者For Experience Owners

如果您想要利用第三方內容生態系統的應用程式開發人員,就會喜歡調適型卡片,因為:If you are an app developer who wants to tap into an ecosystem of third-party content you will love Adaptive Cards because:

  • 一致的使用者體驗 - 您保證為使用者提供一致的體驗,因為您擁有轉譯卡的樣式。Consistent user experience - You guarantee a consistent experience for your users, because you own the style of the rendered card.
  • 原生效能 - 您可以取得原生效能,因為其直接鎖定您的 UI 架構。Native performance - You get native performance as it targets your UI framework directly.
  • 安全 - 以安全的承載傳遞內容,因此不需要開啟 UI 架構來進行原始標記和撰寫指令碼。Safe - Content is delivered in safe payloads so you don't have to open up your UI framework to raw markup and scripting.
  • 輕鬆實作 - 取得現有的程式庫以輕鬆地與任何支援的平台整合Easy to implement - You get off the shelf libraries to easily integrate on any platform you support
  • 免費文件 - 由於不需要發明、實作和記錄專屬結構描述而可以節省時間。Free documentation - You save time because you don't have to invent, implement, and document a proprietary schema.
  • 共用工具 - 由於不需要建立自訂工具而可以節省時間。Shared tooling - You save time because you don't have to create custom tooling.

核心設計原則Core Design Principles

調適型卡片由一組指導原則所驅動,這些原則對於保持設計正常運行很有用。Adaptive Cards are driven by a set of guiding principles that have been useful for keeping the design on track.

重視語意而不是像素完美Semantic instead of pixel-perfect

我們盡可能致力於研究語意價值和概念,而不是僅僅是像素完美的版面配置。We have striven as much as possible for semantic values and concepts as opposed to pure pixel-perfect layout. 語意運算式的範例顯示在色彩、大小,以及如 FactSet 和 ImageSet 等的元素。Examples of semantic expression show up in colors, sizes, and in elements like FactSet and ImageSet. 這些都可讓主應用程式制定更佳的決策,來決定實際的外觀與風格。These all allow the host application to make better decisions about the actual look and feel.

卡片作者擁有內容,主應用程式擁有外觀與風格Card Authors own the content, Host App owns the look and feel

卡片作者擁有他們想說的內容,但應用程式顯示其擁有自己應用程式內容中之卡片的外觀與風格。The card authors own what they want to say, but the application displaying it owns the look and feel of the card in the context of their application.

保持簡單,但清楚表達Keep it simple, but expressive

我們希望調適型卡片具有清楚表達的能力和適應一般用途,但我們不想要建置 UI 架構。We want Adaptive Cards to be expressive and general purpose, but we don't want to build a UI framework. 目標是要建立一個「能夠清楚表達」的中繼層,就像 Markdown 可以清楚表達文件的方式相同。The goal is to create an intermediate layer which is "expressive enough" in the same way Markdown is expressive enough for documents.

藉由專注於保持簡單且清楚表達的能力,Markdown 建立了一個簡單且一致的文件內容描述。By focusing on keeping it simple and expressive, Markdown created an easy and consistent description of document content. 同樣地,我們相信調適型卡片可以建立簡單易懂的方法來描述卡片內容。In the same way, we believe that Adaptive Cards can create a simple, expressive means of describing card content.

如有疑問,則不予採用When in doubt, keep it out

與其現在建立錯誤的內容,不如稍後再進行修改。It is easier to add later then it is to live with a mistake. 如果發現自己在爭論是否應該添加某些內容,則我們選擇不予採用。新增一個屬性比擁有一個不希望支援的舊版更容易。If we found ourselves debating whether we should add something or not, we opted to leave it out. It is always easier to add a property than to live with a legacy we wish we didn't have to support.

Build 2019 研討會Build 2019 Session

Microsoft Build 會議的下列研討會中將展示各種使用案例中的調適型卡片。The following session at the Microsoft Build conference showcases Adaptive Cards in a variety of use cases.