SharePoint 加载项的用户体验设计UX design for SharePoint Add-ins

作为开发人员,应该在创建外接程序时始终高度重视用户体验 (UX)。SharePoint 外接程序模型提供了许多 UX 组件和机制,可帮助你营造出色的用户体验。外接程序模型中的用户体验也足够灵活,使你能够使用最能满足最终用户需求的技术和平台。As a developer, you should always give high priority to the user experience (UX) when you are creating add-ins. The model for SharePoint Add-ins offers many UX components and mechanisms that help you build a great user experience. The user experience in the add-in model is also flexible enough to let you use the techniques and platforms that best adapt to the needs of end users.

SharePoint 中的加载项用户体验简要概述High-level overview of add-in UX in SharePoint

作为外接程序开发人员,您必须知道您的外接程序的体系结构。在确定您的外接程序在远程和 SharePoint 平台中的分发方式后,您可以从可用的外接程序 UX 构建备选方案中做出选择。您可能会问自己以下问题:As the add-in developer, you have to know the architecture of your add-in. After you determine how your add-in will be distributed in remote and SharePoint platforms, you can decide among the available alternatives for building your add-in UX. You might ask yourself the following questions:

下图展示了设计加载项用户体验时可以考虑的主要方案和选项。The following diagram shows the main scenarios and options to consider when you are designing your add-in UX.

图 1. 外接程序 UX 主要方案和选项Figure 1. Add-in UX main scenarios and options

应用程序 UX 主要方案

在选择您的设计时,您应该从根本上考虑在 SharePoint 中托管您的外接程序的哪些部分,以及不托管哪些部分。您还应考虑您的外接程序与主机 Web 的交互方式。In choosing your design, you should fundamentally consider which parts of your add-in are hosted in SharePoint and which are not. You should also consider how your add-in interacts with the host web.

云托管加载项中的加载项用户体验方案Add-in UX scenarios in cloud-hosted add-ins

假设您确定在 SharePoint 中不托管您的部分用户体验。在这些方案中,预计您的最终用户会在 SharePoint 网站和云托管外接程序之间来回移动。您可以使用平台中的技术和工具,但 SharePoint 还提供了资源以帮助您设计更出色的用户体验。Suppose that you determine that some of your user experience is not hosted in SharePoint. In these scenarios, it is expected that your end users go back and forth between a SharePoint website and the cloud-hosted add-in. You can use the techniques and tools in the platform, but SharePoint also provides resources to help you design a smooth experience for users.

下列用户体验资源适用于 SharePoint 中的云托管加载项:The following UX resources are available for cloud-hosted add-ins in SharePoint:

  • 部件版式控制: 借助部件版式控制,可以在加载项中使用特定 SharePoint 网站的导航标题,而无需注册服务器库或使用特定技术/工具。Chrome control: The chrome control enables you to use the navigation header of a specific SharePoint site in your add-in without needing to register a server library or use a specific technology or tool. 必须通过标准 <script> 标记注册 SharePoint JavaScript 库,才能使用此功能。To use this functionality, you must register a SharePoint JavaScript library through standard <script> tags. 可以使用 HTML div 元素提供占位符,也可以使用可用选项进一步自定义部件版式控制。You can provide a placeholder by using an HTML div element and further customize the control by using the available options. 部件版式控制继承指定 SharePoint 网站的外观。The control inherits its appearance from the specified SharePoint website. 有关详细信息,请参阅在 SharePoint 加载项中使用客户端部件版式控制For more information, see Use the client chrome control in SharePoint Add-ins.

  • 样式表: 您可以在您的 SharePoint 外接程序中引用 SharePoint 网站的样式表,并使用该样式表和可用的类来设置您的网页的样式。此外,如果最终用户更改 SharePoint 网站的主题,您的外接程序可采用新的样式集而无需修改外接程序中的引用。有关详细信息,请参阅 在 SharePoint 外接程序中使用 SharePoint 网站的样式表Stylesheet: You can reference a SharePoint website's style sheet in your SharePoint Add-in and use it to style your webpages using the available classes. In addition, if the end users change the SharePoint website's theme, your add-in can adopt the new set of styles without modifying the reference in your add-in. For more information, see Use a SharePoint website's style sheet in SharePoint Add-ins.

图 2 显示了 SharePoint 外接程序模型中用于云托管的外接程序的资源。Figure 2 shows the resources in the model for SharePoint Add-ins for cloud-hosted add-ins.

图 2. 用于云托管的外接程序的外接程序 UX 资源Figure 2. Add-in UX resources for cloud-hosted add-ins

可用于开发人员托管应用的应用用户体验资源

SharePoint 托管加载项中的加载项用户体验方案Add-in UX scenarios in SharePoint-hosted add-ins

如果在 SharePoint 中托管您的外接程序,则当用户在主机 Web 和外接程序 Web 之间来回移动时,用户体验不太可能有很大改变。部署外接程序时,外接程序 Web 从主机 Web 提取样式表和主题。您仍可以在 SharePoint 托管的外接程序中使用部件版式控件与样式表,但与云托管方案最显著的差别是外接程序模板的可用性。If your add-in is hosted in SharePoint, the user experience is less likely to change very much when users move back and forth between the host web and the add-in web. When the add-in is deployed, the add-in web takes the style sheet and theme from the host web. You can still use the chrome control and style sheet in a SharePoint-hosted add-in, but the most significant difference with cloud-hosted scenarios is the availability of the add-in template.

以下 UX 资源可用于 SharePoint 托管的外接程序:The following UX resource is available for SharePoint-hosted add-ins:

  • 加载项模板: 加载项模板包括 app.master 母版页。这是创建加载项 Web 时的默认选项。Add-in template: The add-in template includes the app.master masterpage. It is the default option when you create an add-in web.

SharePoint 托管加载项还可以利用 SharePoint 中的现有资源和技术,如功能区、Web 部件基础结构和客户端呈现。SharePoint-hosted add-ins also benefit from existing resources and technologies in SharePoint such as the Ribbon, web part infrastructure, and client-side rendering.

将加载项用户体验连接到主机 Web 的方案Scenarios for connecting the add-in UX to the host web

外接程序的部分用例可以从主机 Web 内触发。SharePoint 提供了从文档库或列表中打开外接程序的方法,以及在 SharePoint 托管的网页内显示部分外接程序 UX 的方法。Some of the use cases for your add-in can be triggered from within the host web. SharePoint provides ways to open your add-in from a document library or list in addition to ways to show some of your add-in UX within SharePoint-hosted pages.

以下用户体验资源可用于将加载项用户体验连接到主机 Web:The following UX resources are available to connect your add-in UX to the host web:

  • 自定义操作:可以使用自定义操作来连接主机 Web 用户体验与加载项。Custom actions: You can use custom actions to connect the host web UX with your add-in. 自定义操作分为以下两种类型:功能区或 ECB。There are two types of custom actions: Ribbon or ECB. 自定义操作可以将表示调用位置的参数(如列表或项)发送到远程页面。A custom action can send parameters such as the list or item on which it was invoked to a remote page. 有关详细信息,请参阅创建与 SharePoint 加载项一起部署的自定义操作For more information, see Create custom actions to deploy with SharePoint Add-ins.

  • 加载项部件: 您可以通过使用加载项部件在主机 Web 中包括您的部分加载项用户体验。在您部署加载项时,主机 Web 中的 Web 部件库中提供了加载项部件。用户可以通过使用 Web 部件添加器控件向网页添加加载项部件。有关详细信息,请参阅 创建加载项部件以安装 SharePoint 加载项Add-in parts: You can include some of your add-in user experience in the host web by using add-in parts. The add-in part is available in the Web Part Gallery in the host web when you deploy the add-in. Users can add the add-in part to a page by using the Web Part Adder control. For more information, see Create add-in parts to install with your SharePoint Add-in.

图 3 显示了 SharePoint 外接程序模型中用于将外接程序 UX 连接到主机 Web 的资源。Figure 3 shows the resources in the model for SharePoint Add-ins to connect your add-in UX to the host web.

图 3. 用于主机 Web 的外接程序 UX 资源Figure 3. Add-in UX resources for the host web

用于主机 Web 的应用程序 UX 资源

另请参阅See also