Navigation

앱 내에서 가장 중요한 기능을 포함하며, 메뉴간의 이동을 위해 사용되기 때문에 어디에서든 쉽게 접근이 가능하도록 해야 합니다. 모바일 및 태블릿 환경에서 사용합니다.

Anatomy

  • Top navigation

    anatomy

    • Container (Optional)
    • Leading icon
    • Title (Optional)
    • Trailing icon (Optional)

  • Bottom navigation

    anatomy

    • Container
    • Icon
    • MY button (User menu)
    • Container line

Type

  • Basic

    Basic

    주로 사용되는 형태로 좌우 영역에 각 최대 2개의 아이콘 버튼을 사용할 수 있습니다. 타이틀 영역은 언제나 중앙에 정렬되어 나타나야 합니다.

  • Backgrand

    Backgrand

    상품 상세 등 컬러 또는 어두운 명도의 배경이 사용되는 경우에 화이트로 반전되어 border없이 사용합니다.

Spec

  • Spacing

    Spacing

    가운데 정렬을 기본으로 하며 아이콘은 특수 사이즈 26을 사용합니다.

  • State

    State

    MY button은 서비스 강조를 위해 다른 버튼과 달리 그림자 효과가 적용된 버튼으로, 다른 아이콘과 동일하게 컨테이너와 결합된 상태로 고정됩니다. 프로필 사진 유무에 따라 다른 스타일로 나타나며, 사용자가 지정한 이미지는 버튼 사이즈에 맞게 크롭되어 노출됩니다.

© KYOBO BOOK CENTRE교보문고 바로가기