Google Workspace 부가기능 UI 스타일 가이드

Google Workspace 부가기능은 레이아웃과 스타일을 호스트 애플리케이션 확장할 수 있습니다 UI를 확장해야 함 익숙한 컨트롤과 동작을 사용하여 자연스럽게 자연스럽게 알게 되는 거죠. 여기에 제시된 가이드라인은 여기에서는 스폰서십을 홍보하는 텍스트, 이미지, 컨트롤 및 브랜딩을 사용자 환경을 개선할 수 있습니다

부가기능이 부가기능의 일부인 별도의 웹페이지를 여는 경우 작업 (예: 부가기능 설정 페이지)을 실행하려는 경우 해당 웹페이지가 스타일 가이드라인을 따르세요.

텍스트 및 이미지

이 섹션에서는 부가기능에서 텍스트와 이미지를 올바르게 사용하는 방법을 설명합니다.

부가기능 이름

프로젝트에서 부가기능 이름을 설정해야 합니다. 매니페스트게시를 위해 부가기능을 구성합니다. 이 이름은 Google Workspace Marketplace 등 여러 곳에 표시됩니다. 구성할 수 있습니다. 이름을 선택할 때는 다음 사항에 유의하세요.

  • 단어 첫 글자 대문자를 사용합니다.
  • 브랜드의 일부가 아닌 경우 구두점, 특히 괄호는 사용하지 마세요.
  • 최대한 짧게 작성하세요. 15자(영문 기준) 이하가 가장 좋습니다. 긴 이름은 Google Workspace Marketplace 목록 및 다른 위치에서 자동으로 잘립니다.
  • 'Google', 'Gmail' 또는 기타 Google 제품 이름은 포함하지 마세요. 을 입력합니다.
  • '부가기능'이라는 단어를 포함하지 마세요. 을 입력합니다.
  • 버전 정보는 생략합니다.

작성 스타일

많은 내용을 쓸 필요는 없습니다. 대부분의 작업은 아이콘, 레이아웃, 짧은 라벨을 사용하는 것이 좋습니다 부가기능의 일부분을 발견한 경우 짧은 라벨이 제공할 수 있는 것보다 더 광범위한 설명이 필요하지만 부가 기능을 설명하고 링크를 제공하는 별도의 웹 페이지를 만드는 것이 연습입니다.

UI 텍스트를 작성하는 경우:

  • 첫 글자는 대문자로 표기합니다 (특히 버튼, 라벨, 카드 작업의 경우).
  • 전문 용어나 두문자어를 사용하지 않고 짧고 간단한 텍스트를 사용하는 것이 좋습니다.

유니버설 및 카드 작업

범용 작업을 사용하는 경우 또는 카드 액션 부가기능은 카드에 메뉴 항목으로 표시됩니다. 정의할 수 있습니다 이러한 메뉴에 사용되는 텍스트를 선택하여 있습니다. 사용할 텍스트를 선택할 때는 다음 사항에 유의하세요.

  • 단순히 부가기능의 이름을 반복하는 메뉴 텍스트는 사용하지 않습니다.
  • 각 메뉴 항목을 "Run", "Configure", 또는 '만들기'를 클릭합니다.
  • 작업에서 표시하는 UI 구성요소가 아닌 작업을 설명합니다.
  • 작업이 워크플로를 시작하며 작업을 설명하는 단일 동사가 없는 경우 '시작'이라고 하겠습니다.
  • 메뉴 항목의 수를 적게 유지하여 사용자가 스크롤해야 하는 상황을 방지합니다. 큰 목록을 사용해야 합니다. 실행할 작업이 더 있다면 각각 다른 작업이 표시된 여러 개의 카드

오류 메시지

문제가 발생할 때는 평이한 언어를 사용하는 것이 중요합니다. 다음을 설명해 보세요. 문제를 해결하고 해결 방법을 제안합니다.

  • 코드로 인해 발생한 예외를 사용자가 볼 수 없도록 합니다. 대신 try...catch 문을 사용하여 예외를 가로채고 사용자 친화적인 오류 메시지를 표시합니다.
  • 게시하기 전에 부가기능에 디버그 정보가 표시되지 않는지 확인하세요. 사용할 수 있습니다.

헬프(도움말) 콘텐츠

도움말 정보를 표시하거나 작업을 사용자에게 전달합니다. Google 뉴스 이니셔티브의 도움말 콘텐츠를 다음 사항을 기억하세요.

  • 가능하면 글머리기호 또는 번호 매기기 목록으로 안내를 표시합니다. 걷기 사용자 명명된 UI 요소에 대한 명확한 참조를 포함하여 최종 결과에까지 전달됩니다.
  • 안내에서 설정 등의 요구사항을 명확하게 설명해야 합니다. 스프레드시트를 특정 방식으로 사용합니다.
  • 지원 웹페이지와 같은 외부 도움말 콘텐츠로 연결해도 됩니다.

이미지

부가기능에 사용된 이미지는 기본 제공 아이콘 유형 URL로 지정된 공개적으로 호스팅된 이미지일 수 있습니다. 호스팅된 이미지를 사용할 때는 애드온을 사용하는 모든 사용자가 액세스할 수 있도록 해야 합니다.

컨트롤

이 섹션에서는 대화형 위젯입니다.

버튼

버튼을 사용하여 사용자 인터페이스의 기본 작업을 제어하는 것이 아니라 있습니다.

  • 대부분의 텍스트 버튼 라벨은 동사로 시작해야 합니다.
  • 대부분의 경우 버튼 행은 3개 이하로 제한되어야 합니다.

DecoratedText

DecoratedText 위젯 아이콘, 버튼 또는 스위치가 있는 텍스트 콘텐츠를 표시할 수 있습니다.

  • 텍스트 콘텐츠에서는 문장 첫 글자 대문자를 사용합니다.
  • DecoratedText 위젯의 텍스트는 여유 공간을 확보할 수 있습니다. 따라서 텍스트 콘텐츠는 항상 최대한 최대한 짧게 만드세요.

선택 입력

다양한 선택 입력 위젯 드롭다운 선택 상자, 체크박스, 라디오 버튼이 표시됩니다.

  • 사용자가 여러 옵션을 선택할 수 있거나 옵션을 전혀 선택할 수 없을 때 체크박스를 사용합니다. 정확히 하나의 옵션을 선택해야 하는 경우에는 라디오 버튼 (또는 선택 메뉴)을 사용합니다. 시도 중에 짧은 대안 목록을 제공할 때 드롭다운을 사용하세요. UI의 공간을 절약할 수 있습니다.
  • 각 옵션에 할당된 텍스트에는 첫 글자 대문자를 사용합니다.
  • 되돌리기 어려운 주요 작업을 트리거하는 데 선택 변경을 사용하지 마세요. 선택할 때 실수를 하는 경우가 많기 때문입니다. 대신 현재 선택 값을 읽고 있습니다.
  • 드롭다운의 경우 옵션을 알파벳순 또는 논리적 스키마에 따라 정렬합니다. 모든 사용자가 이해할 수 있는 내용 (예: 요일 표시) 일요일 또는 월요일부터 순서대로 표시됩니다.
  • 특정 선택 입력의 옵션 수 제한 적절한 수로 설정해야 합니다. 옵션이 너무 많으면 사용자가 앱을 사용하기가 어렵습니다. 이러한 경우에는 다양한 카테고리와 여러 위젯으로 분류할 수 있습니다

텍스트 입력

텍스트 입력은 사용자가 문자열 데이터를 입력할 수 있는 장소를 제공합니다.

  • 사용자가 특정 유형의 집합 중 하나를 입력하도록 하기 위해 텍스트 입력을 사용하지 마세요. 개의 항목이 있습니다. 대신 드롭다운 선택을 사용하세요.
  • 힌트와 제안을 사용하여 사용자가 올바른 단어로 텍스트를 입력하도록 돕습니다. 확인할 수 있습니다.
  • 입력할 텍스트가 많으면 여러 줄로 텍스트를 입력합니다. 학습합니다.

브랜딩

이 섹션에서는 브랜드 요소를 추가하는 사용자 환경 가이드라인을 제공합니다. 부가기능 인터페이스에 추가할 수 있습니다

부가기능에서

부가기능 UI에 브랜딩을 포함하려면 간결하고 가볍게 유지하세요. 이렇게 하면 사용자가 부가기능 기능에 집중할 수 있습니다.

  • 부가기능의 모든 측면은 브랜드 가이드라인을 따라야 합니다.
  • 'Google', 'Gmail' 또는 기타 Google 제품 이름은 포함하지 마세요.
  • Google 제품 아이콘은 변경되더라도 포함하지 않습니다.
  • '부가기능'이라는 단어를 포함하지 마세요. 넣는 것이 좋습니다.
  • 브랜딩 텍스트는 몇 단어 이내여야 합니다.

Google Workspace Marketplace

게시를 위해 부가기능을 구성할 때 다양한 그래픽 및 텍스트 애셋을 제공하여 Google Workspace Marketplace 등록정보

스토어 등록정보와 애셋의 모든 측면은 브랜드 가이드라인을 따라야 합니다.