정밀도 테마 아이콘 및 표시기

정밀도 테마 아이콘은 2차원 정투상도를 유지하는 간단한 선 양식을 사용합니다. 아이콘과 색상은 기능적 요소이며, 배경은 정서적 효과를 가져옵니다. 이 아이콘은 차원 테마 아이콘의 조직적 디자인과 비교해볼 때 좀 더 기하학적 디자인을 갖습니다.

그림 1. 원본 정밀도 테마
이 화면에는 원본 정밀도 프로그램 아이콘이 표시됩니다.
그림 2. 업데이트된 정밀도 테마
이 화면에는 업데이트된 정밀도 프로그램 아이콘이 표시됩니다.

터치 스크린이 없는 BlackBerry® 단말기에서는 아이콘 레이블이 화면 아래쪽에 나타납니다. 원본 정밀도 테마를 사용하는 BlackBerry 단말기에서 사용자가 프로그램 아이콘을 강조 표시할 경우 불투명도가 바뀌고 파란색 윤곽선이 뒤에 나타납니다. 업데이트된 정밀도 테마를 사용하는 BlackBerry 단말기에서 사용자가 프로그램 아이콘을 강조 표시할 경우 파란색 배경이 아이콘 뒤에 나타납니다.

그림 3. 포커스가 없는 정밀도 아이콘
이 이미지는 포커스를 벗어난 프로그램 아이콘을 나타냅니다.
그림 4. 포커스가 있는 원본 정밀도 아이콘
이 이미지는 포커스가 있는 원본 정밀도 프로그램 아이콘을 나타냅니다.
그림 5. 포커스가 있는 업데이트된 정밀도 아이콘
이 이미지는 포커스가 있는 업데이트된 정밀도 프로그램 아이콘을 나타냅니다.

터치 스크린이 있는 BlackBerry 단말기에서는 아이콘 레이블이 아이콘 아래에 표시됩니다. 사용자가 프로그램 아이콘을 강조 표시하면 아이콘 뒤에 파란색 배경이 나타납니다. 파란색 배경과 아이콘의 파란색 요소를 구분하기 위해 그림자 효과가 적용됩니다.

그림 6. 터치 스크린이 있는 BlackBerry 단말기의 포커스가 없는 아이콘
이 이미지는 포커스를 벗어난 프로그램 아이콘을 나타냅니다.
그림 7. 터치 스크린이 있는 BlackBerry 단말기의 포커스가 있는 아이콘
이 이미지는 포커스가 있는 프로그램 아이콘을 나타냅니다.

표시는 일직선으로 나타나는 2차원 객체입니다. 배너나 프로그램에 표시기를 포함할 수 있습니다(예: 메시지 목록에 메시지 표시 포함).

그림 8. 배너 표시
읽지 않은 메시지 수 표시
그림 9. 프로그램 표시
읽지 않은 메시지 수 표시

모범 사례: 정밀도 테마에 대한 아이콘 및 표시기 디자인

  • 기본 아이콘과 크기, 가중치 및 가운데 맞춤 상태가 일치하는 아이콘을 만듭니다.
  • 각 아이콘 및 표시 주변에 여백을 둡니다. 예를 들어, 아이콘이 80x80 픽셀 캔버스에 표시될 경우 68x68 픽셀의 아이콘 객체를 만듭니다.
  • 아이콘의 흰색 부분에는 위쪽에서 아래쪽 방향으로 그라데이션을 사용합니다. 아이콘 위쪽은 80% 불투명도 흰색으로 지정하고 아이콘 아래쪽은 60% 불투명도 흰색으로 지정합니다.
  • 강조된 아이콘에는 그림자 효과를 추가합니다. 다음 속성을 사용합니다.
    • 각도: 120
    • 블랜딩 모드: 보통
    • 불투명도: 49%
    • 거리: 2픽셀
    • 확산: 0%
    • 크기: 4픽셀
  • 강조된 아이콘의 흰색 부분에 9픽셀 후광을 추가합니다. 이 후광에는 RGB 121, 175, 255를 사용합니다. 강조된 아이콘의 색상 부분에는 9픽셀 후광을 추가합니다. 이 후광에는 강조 색상의 RGB 값과 75%의 불투명도를 사용합니다.

선에 대한 지침

  • 두 선의 가중치가 2.5:1 비율인 아이콘을 만듭니다. 예를 들어, 한 선은 2.5픽셀 두께로, 다른 선은 1픽셀 두께의 선 가중치를 사용합니다.
  • 기본 기능을 나타낼 때는 두꺼운 선을 사용하고 보조적인 기능을 나타낼 때는 가는 선을 사용합니다. 아이콘을 가는 선만으로 나타내는 것은 바람직하지 않습니다. 객체를 자세히 나타내지 않을 때는 두꺼운 선만 사용합니다.
  • 두꺼운 선의 경우 반원을 마무리 모양으로 사용합니다.

색상 지침

  • 아이콘을 강조하기 위해 색상을 사용합니다. 사용자에게 알릴 때는 빨간색을 사용하고, 사용자의 주의를 끌 때는 주황색을 사용하고, 사용자가 계속 작업할 수 있음을 나타낼 때는 녹색을 사용하고, 정보나 엔터테인먼트를 강조하거나 나타낼 때는 파란색을 사용합니다.
  • 무광이고 불투명도가 100%인 색상 부분을 만듭니다. 아이콘의 흰색 부분에는 색상을 사용하지 않도록 합니다. 아이콘의 흰색 부분이 흰색 배경 위에 나타날 경우 흰색 부분이 전혀 보이지 않게 됩니다.

모양에 대한 지침

  • 둥근 직사각형, 원, 작은 알 모양, 호 및 직선을 사용합니다. 원호를 전환 부분으로 사용합니다. 자유롭게 변형되는 곡선과 특수한 모양은 사용하지 않도록 합니다.
  • 둥근 모서리의 반지름을 이미지 크기의 1/16로 지정하여 아이콘의 둥근 모서리를 만듭니다. 예를 들어, 아이콘 폭이 34픽셀이면 둥근 모서리의 반지름은 2픽셀입니다.
  • 사운드를 나타낼 때는 두꺼운 웨이브를 사용합니다. 무선 통신을 나타낼 때는 가는 웨이브를 사용합니다.
  • 데이터 전송이나 무선 통신을 나타낼 때는 두꺼운 화살대와 V자형 화살촉이 있는 화살표를 사용합니다. UI의 작업을 나타낼 때는 가는 화살대와 긴 삼각형 화살촉이 있는 화살표를 사용합니다.
  • 수정용 객체를 사용하여 새로운 의미를 만들거나 아이콘 집합 간 관계를 설정합니다. 수정용 객체는 다른 객체 위에 겹쳐지는 더 작은 보조 객체입니다. 예를 들어, 설치 폴더의 아이콘에는 기어를 수정용 객체로 사용합니다.
관련 참조

이 정보가 도움이 되었습니까? 의견을 보내 주십시오.