Diretrizes de identidade visual para aplicativosBranding guidelines for applications

Ao desenvolver aplicativos com o Azure AD (Azure Active Directory), você precisará direcionar os clientes quando eles quiserem usar sua conta corporativa ou de estudante (gerenciada no Azure AD) ou a conta pessoal para inscrição e conexão no seu aplicativo.When developing applications with Azure Active Directory (Azure AD), you'll need to direct your customers when they want to use their work or school account (managed in Azure AD), or their personal account for sign-up and sign-in to your application.

Neste artigo, você vai:In this article, you will:

  • Saber sobre os dois tipos de contas de usuário gerenciadas pela Microsoft e como fazer referência às contas do Azure AD em seu aplicativoLearn about the two kinds of user accounts managed by Microsoft and how to refer to Azure AD accounts in your application
  • Descobrir o que você precisa fazer para adicionar o logotipo da Microsoft para uso em seu aplicativoFind out what you need to do add the Microsoft logo for use in your app
  • Baixar as imagens oficiais de Entrar ou Entrar com a conta da Microsoft a serem usadas em seu aplicativoDownload the official Sign in or Sign in with Microsoft images to use in your app
  • Saber sobre as regras de identidade visual e navegaçãoLearn about the branding and navigation do's and don'ts

Contas pessoais versus contas comerciais ou de estudante da MicrosoftPersonal accounts vs. work or school accounts from Microsoft

A Microsoft gerencia dois tipos de contas de usuário:Microsoft manages two kinds of user accounts:

  • Contas pessoais (anteriormente conhecidas como Windows Live ID).Personal accounts (formerly known as Windows Live ID). Essas contas representam a relação entre usuários individuais e a Microsoft e são usadas para acessar serviços e dispositivos do cliente da Microsoft.These accounts represent the relationship between individual users and Microsoft, and are used to access consumer devices and services from Microsoft. Essas contas são destinadas a uso pessoal.These accounts are intended for personal use.
  • Contas comerciais ou de estudante.Work or school accounts. Essas contas são gerenciadas pela Microsoft em nome de organizações que usam o Azure Active Directory.These accounts are managed by Microsoft on behalf of organizations that use Azure Active Directory. Essas contas são usadas para fazer logon no Office 365 e em outros serviços comerciais da Microsoft.These accounts are used to sign in to Office 365 and other business services from Microsoft.

As contas comerciais ou de estudante da Microsoft normalmente são atribuídas aos usuários finais (funcionários, estudantes e funcionários federais) por suas organizações (empresa, escola, órgão do governo).Microsoft work or school accounts are typically assigned to end users (employees, students, federal employees) by their organizations (company, school, government agency). Essas contas são dominadas diretamente na nuvem (na plataforma do Azure AD) ou sincronizadas para o Azure AD de um diretório local, como o Active Directory do Windows Server.These accounts mastered directly in the cloud (in the Azure AD platform) or synced to Azure AD from an on-premises directory, such as Windows Server Active Directory. A Microsoft tem a custódia das contas comerciais ou de estudante, mas as contas são de propriedade e controladas pela organização.Microsoft is the custodian of the work or school accounts, but the accounts are owned and controlled by the organization.

Fazendo referência às contas do Azure AD em seu aplicativoReferring to Azure AD accounts in your application

A Microsoft não expõe os usuários finais ao Azure ou os nomes de marca do Active Directory, e você também não deve fazê-lo.Microsoft doesn’t expose end users to the Azure or the Active Directory brand names, and neither should you.

  • Depois que os usuários estiverem conectados, use o nome e o logotipo da organização o máximo possível.Once users are signed in, use the organization’s name and logo as much as possible. Isso é melhor do que usar termos genéricos como “sua organização.”This is better than using generic terms like “your organization.”
  • Quando os usuários não estiverem conectados, refira-se às contas deles como "Contas corporativas ou de estudante" e use o logotipo da Microsoft para informar que a Microsoft gerencia essas contas.When users aren't signed in, refer to their accounts as “Work or school accounts” and use the Microsoft logo to convey that Microsoft manages these accounts. Não use termos como “conta comercial”, “conta empresarial” ou “conta corporativa”, que confundem o usuário.Don’t use terms like “enterprise account,” “business account,” or “corporate account,” which create user confusion.

Imagem da conta de usuárioUser account pictogram

Em uma versão anterior dessas diretrizes, recomendamos usar uma imagem de "crachá azul".In an earlier version of these guidelines, we recommended using a “blue badge” pictogram. Com base nos comentários de usuários e de desenvolvedores, agora recomendamos o uso do logotipo da Microsoft em vez disso.Based on user and developer feedback, we now recommend the use of the Microsoft logo instead. O logotipo da Microsoft ajudará os usuários a entender que eles podem reutilizar a conta que usam com o Office 365 ou com outros serviços corporativos da Microsoft para fazer logon no seu aplicativo.The Microsoft logo will help users understand that they can reuse the account they use with Office 365 or other Microsoft business services to sign into your app.

Inscrever-se e entrar no Azure ADSigning up and signing in with Azure AD

Seu aplicativo pode apresentar caminhos separados para inscrição e login, e as seções a seguir fornecem orientação visual para os dois cenários.Your app may present separate paths for sign-up and sign-in and the following sections provide visual guidance for both scenarios.

Se o aplicativo der suporte à inscrição do usuário final (por exemplo, grátis para avaliação ou modelo freemium) : Você pode mostrar um botão de entrar que permite aos usuários acessar seu aplicativo com sua conta corporativa ou conta pessoal.If your app supports end-user sign-up (for example, free to trial or freemium model): You can show a sign-in button that allows users to access your app with their work account or their personal account. O Azure AD mostrará um prompt de consentimento da primeira vez que acessar seu aplicativo.Azure AD will show a consent prompt the first time they access your app.

Se o aplicativo exige permissões com as quais somente os administradores podem consentir ou se o aplicativo exige licenciamento organizacional: Aquisição de administrador separada de entrada do usuário.If your app requires permissions that only admins can consent to, or if your app requires organizational licensing: Separate admin acquisition from user sign-in. O botão "obter esse aplicativo" redirecionará os administradores para entrar e pedir que eles concedam autorização em nome dos usuários em sua organização, o que tem o benefício adicional da supressão de solicitações de consentimento do usuário final para seu aplicativo.The “get this app” button will redirect admins to sign in then ask them to grant consent on behalf of users in their organization, which has the added benefit of suppressing end-user consent prompts to your app.

Orientação visual para aquisição de aplicativoVisual guidance for app acquisition

O link "obtenha o aplicativo" deve redirecionar o usuário para a página de concessão de acesso (autorização) do Azure AD, para permitir que o administrador da organização autorize seu aplicativo para ter acesso aos dados de sua organização que são hospedados pela Microsoft.Your “get the app” link must redirect the user to the Azure AD grant access (authorize) page, to allow an organization’s administrator to authorize your app to have access to their organization’s data, which is hosted by Microsoft. Os detalhes sobre como solicitar acesso são debatidos no artigo Integração de aplicativos com o Active Directory do Azure .Details on how to request access are discussed in the Integrating Applications with Azure Active Directory article.

Depois que os administradores derem consentimento ao seu aplicativo, eles podem optar por adicioná-lo à experiência do inicializador de aplicativos do Office 365 de seus usuários (acessível do waffle e de https://portal.office.com/myapps).After admins consent to your app, they can choose to add it to their users’ Office 365 app launcher experience (accessible from the waffle and from https://portal.office.com/myapps). Se você deseja anunciar essa funcionalidade, você pode usar termos como "Adicione esse aplicativo para sua organização" e mostrar um botão como o exemplo a seguir:If you want to advertise this capability, you can use terms like “Add this app to your organization” and show a button like the following example:

Botão que mostra o logotipo da Microsoft e o texto "Adicionar à minha organização"

No entanto, recomendamos que você escreva um texto explicativo em vez de depender de botões.However, we recommend that you write explanatory text instead of relying on buttons. Por exemplo:For example:

Se você já usa o Office 365 ou outro serviço corporativo da Microsoft, pode conceder o acesso <nome_aplicativo> aos dados de sua organização. Isso permitirá que os usuários acessem o <nome_aplicativo> com suas contas de trabalho existentes.If you already use Office 365 or other business service from Microsoft, you can grant <your_app_name> access to your organization’s data. This will allow your users to access <your_app_name> with their existing work accounts.

Para baixar o logotipo oficial da Microsoft para uso em seu aplicativo, clique com o botão direito do mouse naquela que você deseja usar e salve-o em seu computador.To download the official Microsoft logo for use in your app, right-click the one you want to use and then save it to your computer.

AtivoAsset Formato PNGPNG format Formato SVGSVG format
Logotipo da MicrosoftMicrosoft logo Logotipo da Microsoft para download no formato PNG Logotipo da Microsoft para download no formato SVG

Orientação visual para logonVisual guidance for sign-in

Seu aplicativo deve exibir um botão de logon que redireciona os usuários ao ponto de extremidade de logon, que corresponde ao protocolo que você usa para integrar com o Azure AD.Your app should display a sign-in button that redirects users to the sign-in endpoint that corresponds to the protocol you use to integrate with Azure AD. A seção a seguir fornece detalhes sobre como deve ser esse botão.The following section provides details on what that button should look like.

Ícone e “Entrar com a Conta da Microsoft”Pictogram and “Sign in with Microsoft”

É a associação do logotipo da Microsoft e dos termos para “Entrar com a Conta da Microsoft” que representa exclusivamente o Azure AD entre outros provedores de identidade aos quais seu aplicativo pode oferecer suporte.It’s the association of the Microsoft logo and the “Sign in with Microsoft” terms that uniquely represent Azure AD amongst other identity providers your app may support. Se você não tiver espaço suficiente para “Entrar com a Conta da Microsoft”, é possível reduzir para “Entrar.”If you don’t have enough space for “Sign in with Microsoft,” it’s ok to shorten it to “Sign in.” Você pode usar um esquema de cores escuras ou claras para os botões.You can use a light or dark color scheme for the buttons.

O diagrama a seguir mostra as linhas vermelhas recomendadas da Microsoft ao usar os ativos com seu aplicativo.The following diagram shows the Microsoft-recommended redlines when using the assets with your app. As linhas vermelhas se aplicam a “Entrar com a conta da Microsoft” ou à versão mais curta “Entrar”.The redlines apply to "Sign in with Microsoft" or the shorter "Sign in" version.

Mostra as linhas vermelhas de "Entrar com a conta da Microsoft"

Para baixar as imagens oficiais para uso em seu aplicativo, clique com o botão direito do mouse naquela que você deseja usar e salve-o em seu computador.To download the official images for use in your app, right-click the one you want to use and then save it to your computer.

AtivoAsset Formato PNGPNG format Formato SVGSVG format
Entrar com a Microsoft (tema escuro)Sign in with Microsoft (dark theme) PNG do tema escuro do botão "Entrar com a conta da Microsoft" para download SVG do tema escuro do botão "Entrar com a conta da Microsoft" para download
Entrar com a Microsoft (tema claro)Sign in with Microsoft (light theme) PNG do tema claro do botão "Entrar com a conta da Microsoft" para download SVG do tema claro do botão "Entrar com a conta da Microsoft" para download
Entrar (tema escuro)Sign in (dark theme) PNG do tema escuro do botão curto "Entrar" para download SVG do tema escuro do botão curto "Entrar" para download
Entrar (tema claro)Sign in (light theme) PNG do tema claro do botão curto "Entrar" para download SVG do tema claro do botão curto "Entrar" para download

Regras de identidade visualBranding Do’s and Don’ts

USE “conta corporativa ou de estudante” em combinação com o botão "Entre com a Conta da Microsoft" para fornecer uma explicação adicional que ajude os usuários finais a reconhecer se podem usá-lo.DO use “work or school account” in combination with the "Sign in with Microsoft" button to provide additional explanation to help end users recognize whether they can use it. NÃO USE outros termos, como "conta comercial", "conta empresarial" ou "conta corporativa".DON’T use other terms such as “enterprise account”, “business account” or “corporate account.”

NÃO use “ID do Office 365” ou “ID do Azure.”DON’T use “Office 365 ID” or “Azure ID.” Office 365 também é o nome de uma oferta ao consumidor da Microsoft que não usa o Azure AD para autenticação.Office 365 is also the name of a consumer offering from Microsoft, which doesn’t use Azure AD for authentication.

NÃO altere o logotipo da Microsoft.DON’T alter the Microsoft logo.

NÃO exponha os usuários finais às marcas do Azure ou Active Directory.DON’T expose end users to the Azure or Active Directory brands. No entanto, é possível usar esses termos com desenvolvedores, profissionais de TI e administradores.It’s ok however to use these terms with developers, IT pros, and admins.

Forneça uma maneira de os usuários fazerem logout e trocarem para outra conta de usuário.DO provide a way for users to sign out and switch to another user account. Embora a maioria das pessoas tenha uma única conta pessoal da Microsoft/Facebook/Google/Twitter, as pessoas geralmente são associadas a mais de uma organização.While most people have a single personal account from Microsoft/Facebook/Google/Twitter, people are often associated with more than one organization. O suporte a vários usuários conectados estará disponível em breve.Support for multiple signed-in users is coming soon.