안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

App Intro(가이드 도움말) 화면 꾸미기

27 Jan 2017 | Android UX Open Source

일반적인 AppIntro 화면은 대략 다음과 같은 형태를 하고 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

많은 사람들이 사용하고 있는 오픈소스가 있으며, 여기에서 확인할 수 있습니다.

Dependency 설정

Android Studio에서는 간단히 gradle에 다음 라인만 추가하면 AppIntro 컴포넌트를 사용할 수 있습니다.

dependencies {
    compile 'com.github.paolorotolo:appintro:4.1.0'
}

사용하는 코드는 다음과 같습니다. AppIntro 클래스를 상속받은 Activity를 구현하면 됩니다. 그리고 중요한 점은 onCreate() 함수 내에서 setContentView() 함수는 지워야 한다는 점입니다. 각각의 Intro 화면들은 Fragment를 상속받아서 구현할 수 있습니다.

SplashActivity.java

import android.content.Intent;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;

import com.github.paolorotolo.appintro.AppIntro;

public class SplashActivity extends AppIntro {

  Fragment mSplash2 = new SplashFragment1();
  Fragment mSplash2 = new SplashFragment2();
  Fragment mSplash3 = new SplashFragment3();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.activity_splash);

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      Window w = getWindow(); // in Activity's onCreate() for instance
      w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
          WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

    addSlide(mSplash2);
    addSlide(mSplash2);
    addSlide(mSplash3);
  }

  @Override
  public void onSkipPressed(Fragment currentFragment) {
    super.onSkipPressed(currentFragment);
    startMainActivity();
  }

  @Override
  public void onDonePressed(Fragment currentFragment) {
    super.onDonePressed(currentFragment);
    startMainActivity();
  }

  @Override
  public void onSlideChanged(@Nullable Fragment oldFragment,
      @Nullable Fragment newFragment) {
    super.onSlideChanged(oldFragment, newFragment);
  }

  @Override
  protected void onResume() {
    super.onResume();
  }

  private void startMainActivity() {
    Intent intent = new Intent(SplashActivity.this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}

이 문서는 Android 플랫폼 설정, GMS 핵심 설정(Google 설정)을 설계하는 사람 또는 Android 앱의 설정을 설계하는 개발자를 위한 원칙과 지침을 강조합니다.

설계 원칙

좋은 개요 제공

사용자는 설정 화면을 한 눈에 보고 모든 개별 설정과 해당 값을 이해할 수 있어야 합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 1. 설정 및 현재 값이 최상위 화면에 표시됨

직관적인 아이템 정리

자주 사용하는 설정을 화면 상단에 배치하세요. 한 화면의 설정 수를 제한합니다. 10-15개 이상의 항목을 표시하는 것은 압도적일 수 있습니다. 일부 설정을 별도의 화면으로 이동하여 직관적인 메뉴를 만들 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 2. 공통 설정은 화면 상단에 있습니다.

설정을 쉽게 찾을 수 있습니다.

경우에 따라 두 개의 다른 화면에서 개별 설정을 복제하는 것이 도움이 될 수 있습니다. 다양한 상황에 따라 사용자가 설정을 변경할 수 있으므로 여러 위치에 설정을 포함하면 사용자가 이 항목을 찾는 데 도움이 됩니다.

중복 설정의 경우 설정에 대한 별도의 화면을 만들고 다른 위치에서 진입점을 가져옵니다.

그림 3 & 4. "알림" 및 "소리" 화면 모두에 "기본 알림 소리"가 나타납니다.

명확한 제목과 지위 사용

설정의 제목을 짧고 의미 있게 만드십시오. "일반 설정"과 같은 모호한 제목을 사용하지 마십시오. 제목 아래에 상태를 표시하여 설정 값을 강조 표시합니다. 제목을 설명하는 대신 구체적인 세부 정보를 표시합니다.

제목은 다음과 같아야 합니다.

  • 라벨의 가장 중요한 텍스트를 먼저 배치하세요.
  • "하지마" 또는 "절대"와 같은 부정적인 단어를 "차단"과 같은 중립적인 용어로 바꾸십시오.
  • "알림" 대신 "알림"과 같은 비개인적인 레이블을 사용하십시오. 예외: 설정을 이해하기 위해 사용자를 지칭할 필요가 있는 경우 1인칭("나")이 아닌 2인칭("당신")을 사용합니다.

제목은 다음을 피해야 합니다.

  • 설정, 변경, 편집, 수정, 관리, 사용, 선택 또는 선택과 같은 일반 용어.
  • 섹션 구분선 또는 하위 화면 제목에서 단어를 반복합니다.
  • 기술 용어.

페이지 유형

설정 목록

이것은 가장 일반적인 유형의 화면입니다. 여러 설정을 함께 배치할 수 있습니다. 설정 목록은 스위치, 메뉴 및 슬라이더와 같은 컨트롤이 혼합되어 있을 수 있습니다.

한 범주에 여러 설정이 있는 경우 함께 그룹화할 수 있습니다. 자세한 내용은 그룹화 및 구분선 을 참조하세요.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 5. 설정 목록의 예

목록보기

목록 보기는 앱, 계정, 장치 등과 같은 항목 목록을 표시하는 데 사용됩니다. 필터링하거나 정렬하는 컨트롤을 화면에 추가할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 6. 목록 보기의 예

엔티티 화면

엔터티 화면은 앱, 계정, 장치, Wi-Fi 네트워크 등과 같은 개별 항목의 설정을 표시하는 데 사용됩니다.

시각적으로 엔터티는 아이콘, 제목 및 부제목과 함께 맨 위에 표시됩니다. 이 화면의 모든 설정은 이 엔터티와 관련되어야 합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 7. App info에 사용된 Entity 화면의 예

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 8. Storage에서 사용하는 Entity 화면의 예

마스터 설정

마스터 설정은 Wi-Fi 또는 Bluetooth와 같이 전체 기능을 켜거나 끌 수 있을 때 가장 잘 사용됩니다. 사용자는 화면 상단의 스위치를 이용하여 이 기능을 쉽게 제어할 수 있습니다. 마스터 설정을 사용하여 기능을 비활성화하면 다른 모든 관련 설정이 비활성화됩니다.

기능에 더 긴 텍스트 설명이 필요한 경우 이 화면 유형에서 더 긴 바닥글 텍스트를 허용하므로 마스터 설정을 사용할 수 있습니다.

설정을 복제하거나 여러 화면에서 연결해야 하는 경우 마스터 설정을 사용합니다. 마스터 설정은 별도의 화면이므로 동일한 설정에 대해 여러 스위치가 다른 위치에 있는 것을 피할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 9. 앱 알림 화면에서 사용된 마스터 설정의 예. 마스터 토글을 끄면 이 앱의 전체 기능이 꺼집니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 10. 마스터 토글이 꺼진 앱 알림 화면에서 사용된 마스터 설정의 예

라디오 버튼 선택 화면

이 화면은 사용자가 설정을 선택해야 할 때 사용됩니다. 라디오 버튼은 대화 상자나 별도의 화면에 표시할 수 있습니다. 라디오 버튼은 슬라이더, 메뉴 또는 스위치와 함께 사용하면 안 됩니다.

라디오 버튼 화면의 상단에는 이미지가 있고 하단에는 바닥글 텍스트가 포함될 수 있습니다. 개별 라디오 버튼에는 제목과 함께 하위 텍스트가 포함될 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 11. 설정 목록에서 라디오 버튼을 사용하면 안 됩니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 12. 설정에서 라디오 버튼을 올바르게 사용하는 방법입니다.

구성품

Android 8.0부터 작업 도구 모음은 다른 관련 작업과 함께 검색 및 도움말을 제공합니다. 사용자가 이러한 메뉴에 숨겨진 작업을 발견하지 못할 수 있으므로 오버플로 메뉴는 권장되지 않습니다.

화면별 작업이 없는 도구 모음의 경우. 검색 및 도움말 작업을 표시합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 13. 검색 및 도움말 작업이 있는 도구 모음

하나의 작업이 있는 도구 모음의 경우 : 검색 전에 작업을 표시합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 14. 검색 및 도움말 작업 전에 하나의 작업이 있는 도구 모음

2개 이상의 작업이 있는 도구 모음 의 경우: 검색 전에 기본 작업을 배치하고 오버플로 메뉴에 고급 작업을 배치하는 것이 좋습니다.

모든 작업이 고급이거나 소수의 사용자에게만 유용한 경우 오버플로 메뉴에 모든 작업을 배치하는 것이 좋습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 15. 작업에 대한 오버플로 메뉴가 있는 도구 모음

엔터티 헤더는 제목만 표시하거나 하위 텍스트가 있는 제목을 표시할 수 있습니다(하위 텍스트에는 여러 줄이 허용됨). 아래 작업은 선택 사항입니다. 최대 2개의 작업을 수행할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 16. 엔터티 헤더

아이콘과 머리글(App1) 부분은 머리글(앱 정보) 아래로 스크롤됩니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 17. 여기에서 앱 정보 제목은 도구 모음의 일부이고 나머지 화면은 그 아래에서 스크롤됩니다.

제목은 필수입니다. 또한 설정 상태를 강조하는 하위 텍스트를 표시해야 합니다. 아이콘 사용은 선택 사항입니다.

제목 텍스트를 간결하게 유지하십시오. 제목이 길면 잘리지 않고 다음 줄에 계속될 수 있습니다. 길게 누를 때 메뉴 또는 작업을 활성화하지 마십시오.

예:

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 18. 아이콘, 제목 및 하위 텍스트가 있는 메뉴 링크

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 19. 제목 및 하위 텍스트가 있는 메뉴 링크

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 20. 제목만 있는 메뉴 링크

오른쪽에 아이콘, 제목, 하위 텍스트 및 별도의 히트 타겟이 있는 메뉴 링크

다른 탭 대상은 테마 색상을 사용해야 합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 21. 투탭 타겟 메뉴의 예

아이콘, 제목, 하위 텍스트 및 통계/숫자/경고 아이콘이 있는 메뉴 링크

백분율 및 시간과 같은 숫자 값은 하위 텍스트와 함께 오른쪽에 표시될 수 있으며 막대 그래프는 아래에 표시될 수 있습니다.

일반적으로 사용자가 쉽게 보고 비교할 수 있도록 숫자 값이 오른쪽에 표시됩니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 22. 아이콘, 제목, 통계 및 그래프가 있는 메뉴의 예

그룹화 및 구분선

화면에 많은 설정이 있는 경우 구분선으로 그룹화하고 구분할 수 있습니다. 이전 Android 버전과 달리 구분선은 이제 개별 설정을 분리하는 대신 그룹의 설정을 클러스터링하는 데 사용됩니다.

그룹의 설정이 밀접하게 관련된 경우 그룹 제목을 추가할 수 있습니다. 그룹 제목을 사용하는 경우 항상 구분선을 포함해야 합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 23. 구분선으로 그룹화된 설정

스위치

아이콘, 제목 및 하위 텍스트로 전환

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 24. 아이콘, 제목 및 하위 텍스트가 있는 스위치

제목 및 하위 텍스트로 전환

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 25. 제목 및 하위 텍스트가 있는 스위치

제목만 있는 전환

제목은 왼쪽에 아이콘과 함께 표시할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 26. 제목만 있는 스위치

목록 항목 + 스위치

목록 항목을 스위치와 결합할 수 있습니다. 세로선의 왼쪽을 탭하면 링크처럼 작동하여 사용자를 다음 화면으로 이동합니다. 오른쪽은 표준 스위치처럼 작동합니다.

왼쪽 목록 항목의 경우 제목은 필수입니다. 아이콘과 하위 텍스트는 선택 사항입니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 27. 목록 항목과 스위치

슬라이더

아이콘은 슬라이더에서 선택 사항입니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 28. 슬라이더

화면 버튼

긍정적인 작업은 테마 색상을 사용하고 부정적인 작업은 회색입니다. 긍정적인 작업에는 앱 열기, 앱 설치, 새 항목 추가 등이 포함될 수 있습니다. 부정적인 작업에는 데이터 지우기, 앱 제거, 항목 삭제 등이 포함됩니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 29. "제거" 및 "강제 중지"에 대한 회색 버튼

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 30. "지금 켜기"의 파란색 버튼

점진적 공개(고급)

자주 사용하지 않는 설정은 숨겨야 합니다. 숨길 항목이 3개 이상인 경우에만 "고급"을 사용하십시오.

여기에서 하위 텍스트는 숨겨진 설정의 제목을 표시합니다. 하위 텍스트는 한 줄이어야 합니다. 추가 텍스트는 줄임표로 잘립니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 31. "디스플레이'" 화면에서 사용되는 고급

드롭다운 메뉴를 사용할 수 있지만 이상적으로는 대화 상자나 라디오 버튼 선택 화면을 대신 사용해야 합니다. 현재 단일 선택에 대해 세 가지 다른 패턴이 있으므로 설정을 단순화하는 것이 좋습니다.

필요한 경우 설정에 간단한 옵션이 있는 경우 드롭다운 메뉴를 사용할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 32. 드롭다운 메뉴

체크박스

가능하면 체크박스 대신 스위치를 사용하세요.

확인란을 사용할 수 있습니다.

  • 앱 제한 또는 서비스 차단과 같은 부정적인 작업의 경우.
  • 화면에 너무 많은 스위치가 있는 것을 피하기 위해.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 33. 체크박스는 이 화면의 스위치 수를 줄이는 데 사용됩니다.

연결

설정에서 링크를 사용하는 것은 권장하지 않습니다. 절대적으로 필요한 경우에만 링크를 사용하십시오. 링크는 밑줄이 없는 강조 색상을 사용해야 합니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 34. 설정에 사용된 링크

바닥글 텍스트를 사용하여 설명 콘텐츠를 추가할 수 있습니다. 바닥글은 항상 상단에 구분선이 있어야 합니다. 바닥글은 화면 하단에 표시됩니다. 필요한 경우 바닥글에 링크가 포함될 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 35. 바닥글 텍스트

패턴

데이터

중요한 데이터는 막대 또는 파이 차트와 같은 그래프로 표시할 수 있습니다. 이 데이터는 엔터티 헤더에 표시될 수 있습니다. 예로는 모바일 데이터 및 스토리지가 있습니다.

다른 덜 중요한 데이터는 일반 목록 보기를 사용하여 표시할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 36. 스토리지를 보여주는 예

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 37. 네트워크를 보여주는 예

사용자 교육

일부 기능은 설명이나 사용자 교육이 필요할 수 있습니다. 텍스트와 함께 애니메이션이나 이미지를 사용할 수 있습니다. 애니메이션이나 이미지는 화면 상단에 표시되어야 하며 바닥글 텍스트를 사용하여 설명을 추가할 수 있습니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 38. 애니메이션과 바닥글 텍스트를 이용한 설정

양식

양식에 하나의 입력 필드가 있는 경우 일반 대화 상자를 사용하십시오. 이것은 사용자가 단일 입력을 입력하는 쉬운 방법을 제공합니다.

그러나 양식에 여러 필드가 있는 경우 전체 화면 대화 상자 를 사용하는 것이 좋습니다. 이렇게 하면 필드를 명확한 패턴으로 정렬할 수 있는 더 많은 화면 공간이 제공됩니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 39. 일반 대화 상자가 있는 양식

검색 결과

검색 결과에는 제목, 하위 텍스트(사용 가능한 경우) 및 설정의 이동 경로 위치가 표시됩니다.

안드로이드 가이드 화면 - andeuloideu gaideu hwamyeon

그림 40. 검색 결과