아이콘

 

Tizen 애플리케이션은 다양한 아이콘을 사용할 수 있습니다.

기본 아이콘

이러한 유형의 아이콘은 애플리케이션을 나타냅니다. Tizen 플랫폼 아이콘에는 원형을 사용하는 것이 좋지만 필수 사항은 아닙니다. 일반적으로 홈 화면에서 사용됩니다. 그러나 이 아이콘을 다른 애플리케이션에서 사용하는 경우에는 배경에서 기본 아이콘이 눈에 띄어야 합니다.

다른 배경에서의 기본 아이콘 표시
다른 배경에서의 기본 아이콘 표시

 

기본 아이콘은 다음과 같은 속성을 갖습니다.

  • 파일 형식: 투명 배경의 PNG 파일
  • 모바일 장치 크기: 117 x 117 픽셀(HD 해상도 기준)
  • Tizen 저장소 크기: 512 x 512 픽셀
  • 효과: 기본 아이콘 위에서 90도 각도로 빛을 비추어 아이콘에 입체감을 줍니다. 일관성을 주기 위해 아이콘을 만들 때마다 동일한 빛의 각도를 적용해야 합니다. 다음 그림의 왼쪽과 오른쪽에는 각각 올바른 빛의 각도(90도)와 잘못된 빛의 각도(120도)가 나와 있습니다.
올바른(L) 빛의 각도와 잘못된(R) 빛의 각도
빛의 각도

 

메뉴 화면의 각 아이콘은 원 가장자리에 둥근 프레임을 갖지만 해당 프레임은 메뉴 화면에만 나타나는 UI 요소입니다. 애플리케이션의 기본 아이콘을 만들 때는 이러한 유형의 프레임을 사용하지 마십시오.

참고: 각 아이콘은 항상 2 픽셀의 투명한 여유 공간으로 둘러쌉니다. 

기본 아이콘 주변
기본 아이콘 주변

2D 아이콘

이러한 아이콘은 둥근 가장자리와 흰색 톤의 색상이 특징이며 세 가지 다른 상태(정상, 누름 및 희미함) 중 하나로 나타날 수 있습니다. 또한 애플리케이션 내 위치에 따라 플레이트 또는 조각 형식으로 나타나야 합니다. 

2D 아이콘

 

애플리케이션 아이콘은 브랜드 정체성 또는 특성에 따라 디자인할 수 있습니다. 그러나 시각적 일관성을 유지하기 위해서는 항상 Tizen 2D 스타일을 우선해야 합니다. 아이콘을 배치하는 영역의 색상과 크기를 신중하게 고려하고 세 가지 상태(정상, 누름 및 희미함) 중 하나로 표시되는지 확인합니다. 

머리글, 바닥글 또는 탭에 단일 아이콘을 배치하는 경우에는 기본적으로 조각 형식을 나타냅니다. 그러나 미묘한 효과를 적용하여 보다 큰 영향을 줄 수 있습니다.

2D 아이콘을 디자인할 때는 다음 그림과 같이 올바른 색상으로 상태(정상, 누름 또는 희미함)를 나타내야 합니다.

2D 아이콘 상태 색상
 
 
표: 2D 아이콘 상태 색상

상태 색상 효과
 정상  #fafafa 검은 그림자               

방향: 90

거리: 2px

 누름  #5d83ff 검은 그림자               

방향: -90

거리: 2px

 희미함  #fafafa 검은 그림자               

방향:90

거리: 2px

(정상 상태 + 60% 불투명도)

목록 아이콘

이러한 아이콘은 사각형 또는 원형이며 중앙에 그래픽이 나타납니다. 전반적인 색조와 규칙은 다른 영역의 아이콘과 유사합니다.

목록 아이콘의 상태가 변경되면 아이콘 모양도 영향을 받을 수 있습니다. 예를 들어, 아이콘 상태가 '정상' 또는 '희미함'이면 다른 영역의 아이콘에 동일한 색상 및 효과 값이 적용됩니다.

그러나 상태가 '누름'이면 모양 색상이 변경되고 아이콘 색상은 배경과 동일한 색상 값을 나타냅니다.

목록 아이콘 상태 변경
목록 아이콘 상태 변경
 
 
표: 목록 아이콘 상태 색상

상태 색상 내부 그림자
 정상  #fafafa 검은 그림자              

방향: -90

거리: 2px

 누름  #212d8d 검은 그림자              

방향: -90

거리: 2px

 희미함  #fafafa 검은 그림자              

방향:-90

거리: 2px

(정상 상태 + 60% 불투명도)