UI 아이콘 사이즈 - UI aikon saijeu

주요 콘텐츠로 건너뛰기

이 브라우저는 더 이상 지원되지 않습니다.

최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.

아이콘(디자인 기본 사항)

  • 아티클
  • 09/23/2022
  • 읽는 데 34분 걸림

이 문서의 내용

참고

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션 및 예제는 현재 디자인 지침을 반영하지 않습니다.

아이콘은 개체의 그림 표현이며, 프로그램의 시각적 ID의 일부로 미적 이유뿐만 아니라 사용자가 거의 즉각적으로 인식하는 의미를 전달하기위한 약식으로 실용적인 이유로 중요합니다. Windows Vista는 Windows 더 높은 수준의 세부 사항과 세련미를 제공하는 새로운 도상학 스타일을 소개합니다.

참고:표준 아이콘과 관련된 지침은 별도의 문서에 제공됩니다.

설계 개념

Aero는 Windows Vista의 사용자 환경의 이름으로, 미적 디자인에 구현된 값과 UI(사용자 인터페이스) 뒤에 있는 비전을 모두 나타냅니다. 에어로는 정통, 활기찬, 반사 및 개방을 의미합니다. 에어로는 전문적이고 아름다운 디자인을 확립하는 것을 목표로합니다. 에어로 미학은 사용자 생산성을 촉진하고 감정적 인 반응을 유도하는 고품질의 우아한 경험을 만듭니다.

Windows Vista 아이콘은 다음과 같은 방식으로 Windows XP 스타일 아이콘과 다릅니다.

  • 스타일은 설명보다 더 현실적이지만, 꽤 사진화되지 않습니다. 아이콘은 사진보다 더 잘 보이는 상징적 인 이미지입니다!
  • 아이콘의 최대 크기는 256x256픽셀로, 높은 dpi(인치당 점) 디스플레이에 적합합니다. 이러한 고해상도 아이콘은 큰 아이콘이 있는 목록 보기에서 높은 시각적 품질을 허용합니다.
  • 실제로 고정된 문서 아이콘이 콘텐츠의 썸네일로 대체되어 문서를 보다 쉽게 식별하고 찾을 수 있습니다.
  • 도구 모음 아이콘은 더 작은 크기와 시각적 특징을 최적화하기 위해 세부 정보가 적고 큐브 뷰가 없습니다.

잘 디자인된 아이콘:

  • 프로그램의 시각적 통신을 개선합니다.
  • 프로그램의 시각적 디자인에 대한 사용자의 전반적인 인상과 적합성과 마무리에 대한 감사에 큰 영향을 줍니다.
  • 프로그램, 개체 및 작업을 보다 쉽게 식별, 학습 및 찾을 수 있도록 하여 유용성을 향상시킵니다.

다음 이미지는 Windows Vista의 에어로 스타일이 Windows XP에서 사용되는 것과 어떻게 다른지 보여 줍니다.

UI 아이콘 사이즈 - UI aikon saijeu

Windows Vista 아이콘(왼쪽의 잠금 및 키)은 정통적이고 선명하며 상세합니다. 그리기보다는 렌더링되지만 완전히 사진화되지는 않습니다.

UI 아이콘 사이즈 - UI aikon saijeu

Windows Vista 아이콘(왼쪽에 있는 두 아이콘)은 전문적이고 아름답으며, 아이콘 제작 품질을 향상시키는 세부 사항에 주의를 기울입니다.

UI 아이콘 사이즈 - UI aikon saijeu

이러한 Windows Vista 아이콘은 시각 및 세부 정보에서 광학적 균형과 인식된 정확도를 보여줍니다. 이렇게 하면 크거나 작거나, 가까이 있거나, 멀리서 볼 수 있습니다. 또한 이 도상학 스타일은 고해상도 화면에서도 작동합니다.

UI 아이콘 사이즈 - UI aikon saijeu
UI 아이콘 사이즈 - UI aikon saijeu
UI 아이콘 사이즈 - UI aikon saijeu

이러한 예제에서는 큐브 뷰의 3차원 개체, 전면(평면) 아이콘 및 도구 모음 아이콘을 포함하여 다양한 유형의 아이콘을 보여 줍니다.

지침

관점

  • Windows Vista의 아이콘은 3차원이며 원근감에 단색 개체로 표시되거나 직선으로 표시된 2차원 개체로 표시됩니다. 문서나 용지 조각과 같이 실제로 평평한 개체 및 파일의 경우 플랫 아이콘을 사용합니다.

    UI 아이콘 사이즈 - UI aikon saijeu

    일반적인 3D 및 플랫 아이콘.

  • 3차원 개체는 큐브 뷰에서 두 개의 소실 지점이 있는 낮은 조감도에서 볼 수 있는 단색 개체로 표시됩니다.

    UI 아이콘 사이즈 - UI aikon saijeu

    이 예제에서는 3D 아이콘의 일반적인 큐브 뷰 및 소실점을 보여 줍니다.

  • 크기가 작을수록 동일한 아이콘이 큐브 뷰에서 직선으로 변경됩니다. 16x16 픽셀 이하의 크기로 아이콘을 직선으로 렌더링합니다(전면). 더 큰 아이콘의 경우 큐브 뷰를 사용합니다.

    • 예외: 도구 모음 아이콘은 더 큰 크기에서도 항상 전면을 향합니다.

    UI 아이콘 사이즈 - UI aikon saijeu

    이 예제에서는 크기에 따라 동일한 아이콘이 어떻게 다르게 처리되는지 보여 집니다.

광원

  • 큐브 뷰 그리드 내의 개체에 대한 광원은 개체의 왼쪽에서 약간 앞, 약간 위입니다.
  • 광원은 개체 베이스의 후면과 오른쪽에 약간 있는 그림자를 캐스팅합니다.
  • 모든 광선은 병렬이며 동일한 각도(예: 태양)를 따라 개체를 공격합니다. 목표는 모든 아이콘 및 스포트라이트 효과에 걸쳐 균일한 조명 모양을 갖는 것입니다. 병렬 광원은 모두 길이와 밀도가 같은 그림자를 생성하여 여러 아이콘에서 더 많은 통합을 제공합니다.

그림자

일반

  • 그림자를 사용하여 개체를 배경에서 시각적으로 들어 올리고 3D 개체가 공간에 어색하게 떠다니지 않고 접지된 것처럼 보이게 합니다.

  • 그림자의 불투명도 범위는 30~50%입니다. 아이콘의 모양이나 색에 따라 다른 수준의 그림자를 사용해야 하는 경우도 있습니다.

  • 필요한 경우 그림자를 페더하거나 줄여 아이콘 상자 크기로 자르지 않도록 합니다.

  • 아이콘의 그림자는 24x24 또는 더 작은 크기로 사용하지 마세요.

    UI 아이콘 사이즈 - UI aikon saijeu

    일반적인 아이콘 그림자입니다.

플랫 아이콘

  • 플랫 아이콘은 일반적으로 문서나 종이와 같은 파일 아이콘 및 플랫 실제 개체에 사용됩니다 .
  • 평평한 아이콘 조명은 왼쪽 위에서 130도로 나타납니다.
  • 더 작은 아이콘(예: 16x16 및 32x32)은 가독성을 위해 간소화됩니다. 그러나 아이콘 내에 리플렉션이 포함되어 있으면(간략하게) 꽉 섀도를 가질 수 있습니다. 그림자 범위는 불투명도가 30~50%입니다.
  • 레이어 효과는 플랫 아이콘에 사용할 수 있지만 다른 평면 아이콘과 비교해야 합니다. 개체의 그림자는 크기 집합 내에서 그리고 Windows Vista의 다른 아이콘과 가장 일치하는 모양에 따라 다소 달라집니다. 경우에 따라 그림자를 수정해야 할 수도 있습니다. 개체가 다른 개체 위에 배치될 때 특히 그렇습니다.
  • 원하는 결과를 얻기 위해 미묘한 범위의 색을 사용할 수 있습니다. 그림자는 개체가 공간에 배치되는 데 도움이 됩니다. 색은 그림자의 인식된 무게에 영향을 줍니다. 이미지가 너무 무거우면 이미지가 왜곡될 수 있습니다.

UI 아이콘 사이즈 - UI aikon saijeu
UI 아이콘 사이즈 - UI aikon saijeu

레이어 스타일 대화 상자의 그림자 옵션과 플랫 아이콘에 대한 일반적인 그림자입니다.

기본 평면 아이콘 그림자 범위

특성범위

검정
혼합 모드
곱하기
불투명도
항목의 색에 따라 22-50%
각도
120-130(글로벌 조명 사용)
거리
256x256의 경우 3, 32x32의 경우 1까지
Spread
0
크기
256x256의 경우 7, 32x32의 경우 2까지

3차원 아이콘

  • 대/소문자 단위로 3D 아이콘에 대한 그림자를 만들고, 캐스트 거리 범위와 페더링에 맞게 완전히 투명하게 만듭니다. 그림자에 대한 공간을 허용하기 위해 필요한 전체 아이콘 크기보다 약간 작은 크기로 이미지를 만듭니다(필요한 크기의 경우). 그림자가 아이콘 가장자리에서 갑자기 끝나지 않는지 확인합니다.

UI 아이콘 사이즈 - UI aikon saijeu

UI 아이콘 사이즈 - UI aikon saijeu

이러한 예제는 개체 자체의 모양과 위치를 기반으로 만든 변형을 보여 줍니다. 아이콘 상자 크기로 잘리지 않도록 그림자를 페더화하거나 줄여야 하는 경우도 있습니다.

색 및 채도

  • 색은 일반적으로 WINDOWS XP보다 채도가 낮습니다.

  • 그라데이션을 사용하여 보다 사실적인 이미지를 만듭니다.

  • 표준 아이콘에 대한 특정 색상표는 없지만 많은 컨텍스트와 테마에서 잘 작동해야 합니다. 표준 색 집합을 선호합니다. 경고 아이콘과 같은 표준 아이콘의 색을 다시 지정하지 마세요. 이는 사용자가 의미를 해석하는 기능을 방해하기 때문입니다. 자세한 지침은 색을 참조 하세요.

  • 아이콘 파일은 원격 데스크톱에서 기본 설정을 지원하기 위해 8비트 및 4비트 팔레트 버전도 필요합니다. 이러한 파일은 일괄 처리 프로세스를 통해 만들 수 있지만 일부 파일은 더 나은 가독성을 위해 수정해야 하므로 검토해야 합니다.

    UI 아이콘 사이즈 - UI aikon saijeu

    엄격한 색상표 제한은 없습니다. 전체 채도(오른쪽 위)만 피할 수 있습니다.

  • 비트 수준: 32비트(알파 포함) + 8비트 + 4비트(가장 중요한 픽셀만 자동으로 디더링됨)에 대한 ICO 디자인입니다. 256x256 픽셀 이미지의 32비트 복사본만 포함해야 하며 파일 크기를 줄이기 위해 256x256 픽셀 이미지만 압축해야 합니다. 여러 아이콘 도구는 Windows Vista에 대한 압축을 제공합니다.

  • 비트 수준: 도구 모음 24비트 + 알파(1비트 마스크), 8비트 및 4비트.

  • 도구 모음 또는 AVI 파일: 배경 투명도 색으로 magenta(R255 G0 B255)를 사용합니다.

크기 요구 사항

일반

  • 기본 응용 프로그램 아이콘, Windows 탐색기에 표시할 수 있는 파일 아이콘, 시작 메뉴 또는 바탕 화면에 표시되는 아이콘과 같은 높은 표시 유형 아이콘에 특히 주의하세요.
    • 애플리케이션 아이콘 및 제어판 항목: 전체 집합에는 16x16, 32x32, 48x48 및 256x256이 포함됩니다(코드 크기는 32에서 256 사이). .ico 파일 형식이 필요합니다. 클래식 모드의 경우 전체 집합은 16x16, 24x24, 32x32, 48x48 및 64x64입니다.
    • 목록 항목 아이콘 옵션: 파일 형식의 라이브 썸네일 또는 파일 아이콘을 사용합니다(예: .doc). 전체 집합입니다.
    • 도구 모음 아이콘: 16x16, 24x24, 32x32. 도구 모음 아이콘은 32x32 크기에서도 항상 3D가 아니라 평평합니다.
    • 대화 상자 및 마법사 아이콘: 32x32 및 48x48
    • 오버레이: 코어 셸 코드(예: 바로 가기) 10x10(16x16), 16x16(32x32), 24x24(48x48), 128x128(256x256의 경우). 이들 중 일부는 약간 작지만 모양과 광학 균형에 따라 이 크기에 가깝습니다.
    • 빠른 실행 영역: 아이콘은 Alt+Tab 동적 오버레이에서 48x48에서 축소되지만 더 선명한 버전의 경우 .ico 파일에 40x40을 추가합니다.
    • 풍선 아이콘: 32x32 및 40x40
    • 추가 크기: 다른 파일(예: 주석, 도구 모음 스트립, 오버레이, 높은 dpi 및 특수한 경우) 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 및 8x8과 같은 다른 파일을 만드는 데 유용합니다. 해당 영역의 코드에 따라 .ico, .png, .bmp 또는 기타 파일 형식을 사용할 수 있습니다.

높은 dpi의 경우

  • Windows Vista는 96dpi 및 120dpi를 대상으로 합니다.

다음 표에서는 두 가지 일반적인 아이콘 크기에 적용되는 배율의 예를 보여 줍니다. 이러한 크기 중 일부가 .ico 파일에 포함되어야 하는 것은 아닙니다. 코드는 더 큰 코드를 축소합니다.

dpi아이콘 크기배율
96
16x16
1.0 (100%)
120
20x20
1.25 (125%)
144
24x24
1.5 (150%)
192
32x32
2.0 (200%)
dpi아이콘 크기배율
96
32x32
1.0 (100%)
120
40x40
1.25 (125%)
144
48x48
1.5 (150%)
192
64x64
2.0 (200%)

.ico 파일 크기(표준)

UI 아이콘 사이즈 - UI aikon saijeu

.ico 파일 크기(특수한 경우)

UI 아이콘 사이즈 - UI aikon saijeu

주석 및 오버레이

  • 주석은 아이콘의 오른쪽 아래 모서리로 이동하며 아이콘 영역의 25%를 채워야 합니다.
    • 예외: 16x16 아이콘은 10x10 주석을 사용합니다.
  • 아이콘 위에 두 개 이상의 주석을 사용하지 마세요.
  • 오버레이는 아이콘의 왼쪽 아래 모서리로 이동하며 아이콘 영역의 25%를 채워야 합니다.
    • 예외: 16x16 아이콘은 10x10 오버레이를 사용합니다.

세부 수준

  • 이러한 아이콘의 16x16 크기는 여전히 널리 사용되므로 중요합니다.

  • 이 크기의 아이콘에 있는 세부 정보는 아이콘의 핵심 지점을 명확하게 표시해야 합니다.

  • 아이콘이 작아지면 더 큰 크기의 투명도와 일부 특수한 세부 정보를 희생하여 점을 단순화하고 건너야 합니다.

  • 특성과 색을 과장하고 키 형식을 강조하는 데 사용해야 합니다.

    UI 아이콘 사이즈 - UI aikon saijeu

    16x16에서 휴대용 오디오 장치의 아이콘은 휴대 전화로 쉽게 오인될 수 있으므로 귀 조각은 표시할 주요 시각적 세부 정보입니다.

  • 단순히 256x256 크기에서 축소하는 것은 작동하지 않습니다.

  • 모든 크기에는 관련 수준의 세부 정보가 필요합니다. 아이콘이 작을수록 정의 세부 정보를 더 과장해야 합니다.

    UI 아이콘 사이즈 - UI aikon saijeu

    UI 아이콘 사이즈 - UI aikon saijeu

아이콘 개발

아이콘 디자인 및 생성

  • 숙련된 그래픽 디자이너를 고용합니다. 훌륭한 그래픽, 이미지 및 아이콘은 전문가와 함께 작동합니다. 벡터 아트 또는 3D 프로그램을 사용하는 일러스트레이션 환경이 권장됩니다.
  • 초기 개념 스케치부터 컨텍스트 내 모의 작업, 최종 프로덕션 검토 및 작업 제품의 아이콘 적합 및 완성에 이르기까지 일련의 반복을 수행하도록 계획합니다.
  • 미리 아이콘 만들기는 비용이 많이 들 수 있다고 생각합니다. 필요한 아이콘의 전체 집합과 같은 모든 기존 세부 정보 및 요구 사항을 수집합니다. 각각에 대한 주 함수 및 의미; 명확하게 표시하려는 집합의 패밀리 또는 클러스터 브랜드 요구 사항; 정확한 파일 이름; 코드에 사용되는 이미지 형식 및 크기 요구 사항 디자이너를 사용하여 시간을 최대한 활용할 수 있도록 미리 확인합니다.
  • 디자이너는 제품에 익숙하지 않을 수 있으므로 기능 정보, 스크린샷 및 사양 섹션을 적절하게 제공합니다.
  • 적절하게 지정학적 및 법적 검토를 계획합니다.
  • 시간 범위를 매핑하고 정기적인 통신을 수행합니다.

개념 스케치에서 최종 제품까지

UI 아이콘 사이즈 - UI aikon saijeu

  • 개념 스케치를 만듭니다.
  • 다양한 크기의 개념을 사용해 보세요.
  • 필요한 경우 3D로 렌더링합니다.
  • 다양한 배경색에서 크기를 테스트합니다.
  • 실제 UI의 컨텍스트에서 아이콘을 평가합니다.
  • 최종 .ico 파일 또는 기타 그래픽 리소스 형식을 생성합니다.

Tools

  • 연필 및 종이: 초기 개념 아이디어, 나열 및 스케치.
  • 3D Studio Max: 큐브 뷰에서 3D 개체를 렌더링합니다.
  • Adobe Photoshop: 컨텍스트에서 스케치 및 반복하고, 모의 작업하고, 세부 정보를 마무리합니다.
  • Adobe Illustrator/Macromedia Freehand: 스케치하고 반복하고 세부 정보를 마무리합니다.
  • 가마니 Gif 무비 기어: .ico 파일을 생성합니다(필요한 경우 압축 포함).
  • 악시알리스 아이콘 워크샵: .ico 파일을 생성합니다(필요한 경우 압축 포함).
  • Microsoft Visual Studio Windows Vista 아이콘을 지원하지 않습니다(알파 채널 또는 256개 이상의 색은 지원되지 않음).

프로덕션

다음 단계에 따라 여러 이미지 크기와 색 깊이를 포함하는 단일 .ico 파일을 만듭니다.

1단계: 개념화

  • 가능한 경우 설정된 개념을 사용하여 아이콘에 대한 의미의 일관성과 다른 용도와 관련성을 보장합니다.
  • 아이콘이 UI의 컨텍스트에 표시되는 방법과 아이콘 집합의 일부로 작동하는 방법을 고려합니다.
  • 기존 아이콘을 수정하는 경우 복잡성을 줄일 수 있는지 여부를 고려합니다.
  • 그래픽의 문화적 영향을 고려합니다. 아이콘에 문자, 단어, 손 또는 얼굴을 사용하지 마세요. 필요한 경우 사용자 또는 사용자의 표현을 가능한 한 일반적으로 표시합니다.
  • 여러 개체를 아이콘의 단일 이미지로 결합하는 경우 이미지 크기를 더 작은 크기로 조정하는 방법을 고려합니다. 아이콘에 3개 이하의 개체를 사용합니다(두 개체가 선호됨). 16x16 크기의 경우 개체를 제거하거나 이미지를 단순화하여 인식을 개선하는 것이 좋습니다.
  • 아이콘에 Windows 플래그를 사용하지 마세요.

2단계: 설명

  • Windows 에어로 스타일 아이콘을 설명하려면 Macromedia Freehand 또는 Adobe Illustrator와 같은 벡터 도구를 사용합니다. 이 문서의 앞부분에서 설명한 대로 색상표 및 스타일 특성을 사용합니다.
  • Freehand 또는 Illustrator를 사용하여 이미지를 보여 줍니다. 벡터 이미지를 복사하여 Adobe Photoshop에 붙여넣습니다.
  • Photoshop에서 템플릿 계층을 만들고 사용하여 규제된 크기의 제곱 영역 내에서 작업이 수행되도록 합니다.
  • 그림자에 대한 공간을 허용하기 위해 필요한 전체 아이콘 크기보다 약간 작은 크기로 이미지를 만듭니다(필요한 크기의 경우).
  • 디렉터리의 모든 아이콘이 일관되게 배치되도록 사각형 아래쪽에 이미지를 배치합니다. 그림자를 차단하지 마십시오.
  • 이미지 또는 계열에 다른 개체를 추가하는 경우 주 개체를 고정된 위치에 유지하고 사례에 따라 왼쪽 아래 또는 오른쪽 위와 같은 고정된 위치에 더 작은 크기의 플랫 이미지를 배치합니다.

3단계: 24비트 이미지 만들기

  • Photoshop에서 크기를 붙여넣은 후에는 특히 16x16 및 더 작은 크기에서 이미지의 가독성을 확인합니다. 색의 백분율을 사용하여 픽셀을 찌르는 것이 필요할 수 있습니다. 투명성 감소도 필요할 수 있습니다. 핵심 요소에 집중하기 위해 더 작은 크기로 측면을 과장하고 측면을 제거하는 것이 일반적입니다.
  • 8비트 아이콘은 32비트 미만의 색상 모드로 표시되며 8비트 알파 채널이 없으므로 앤티앨리어싱이 없기 때문에 가장자리가 정리되거나 정리되어야 할 수 있습니다(가장자리가 들쭉날쭉하고 이미지를 읽기 어려울 수 있음).
  • Photoshop에서 24비트 이미지 레이어를 복제하고 레이어 이름을 4비트 이미지로 바꿉니다. Windows 16 색 팔레트에 4비트 이미지를 인덱싱합니다.
  • 16가지 색상표의 색만 사용하여 이미지를 정리합니다. 개체 색의 어둡거나 밝은 버전으로 만든 윤곽선은 일반적으로 회색 또는 검은색보다 좋습니다.
  • 비트맵에서 작업하는 경우 투명한 색이 될 색이므로 배경색이 이미지 자체에서 사용되지 않는지 확인합니다. Magenta(R255 G0 B255)는 종종 배경 투명도 색으로 사용됩니다.

4단계: 8비트 및 4비트 이미지 만들기

  • 이제 24비트 이미지를 32비트 아이콘으로 만들 준비가 되었으므로 8비트 버전을 만들어야 합니다.
  • 상황에 맞는 스크린샷을 테스트하기에 좋은 시기입니다. 컨텍스트에서 다른 아이콘 또는 아이콘 제품군을 보면 검색할 수 있는 것이 놀랍습니다. 이 단계에서는 시간과 비용을 절약할 수 있습니다. 파일이 프로덕션을 거치고 전달되기 전에 문제를 파악하는 것이 훨씬 낫습니다.
  • 필요한 크기로 이미지에 그림자를 추가합니다.
  • 그림자와 24비트 이미지를 병합합니다.
  • 각 크기에 대해 새 Photoshop 파일을 만듭니다. 적절한 이미지를 복사하여 붙여넣습니다. 각 파일을 .psd 파일로 저장합니다.
  • 이미지 계층을 배경 계층과 병합하지 마세요. 작업하는 동안 파일 이름에 크기 및 색 깊이를 포함하는 것이 유용하지만 궁극적으로 파일 이름을 바꿔야 할 수도 있습니다.

5단계: .ico 파일 만들기

  • 아티스트의 요구 사항과 기술을 가장 잘 충족하는 애플리케이션을 선택합니다. 배송 제품에 사용할 아이콘은 구입하거나 라이선스가 부여된 도구에서 만들어야 합니다. 즉, 평가판 버전을 사용할 수 없습니다.
  • 아래에 나열된 두 제품은 모두 Windows Vista용 아이콘을 생성한 디자이너에서 사용되었으며, 각각 Adobe Photoshop CS로 내보낼 수 있는 기능을 제공합니다.
    • 가마니 Gif 무비 기어: .ico 파일 생성
    • 악시알리스 아이콘 워크샵: .ico 파일 생성
  • Visual Studio Windows Vista 아이콘을 지원하지 않으므로(알파 채널 또는 256개 이상의 색에 대한 지원 없음) 사용하지 않는 것이 좋습니다.
  • 아이콘(.ico 형식) 파일에는 4비트 및 8비트 버전과 24비트 + 알파가 포함되어야 합니다.
  • 사용할 아이콘 만들기 프로그램에 관계없이 파일을 "Windows 아이콘(.ico)"으로 저장합니다.
  • 일부 아이콘 자산은 실제로 비트맵 스트립일 수 있으며, 알파 채널(예: 도구 모음)이 필요하거나 투명도로 저장된 파일을 .png 수 있습니다. 모든 형식이 반드시 .ico 형식인 것은 아닙니다. 코드에서 지원되는 형식을 확인합니다.

6단계: 평가

  • 모든 크기를 살펴봅니다.
  • 가족을 함께 살펴보고 가족의 유사성, 광학적 균형 및 구별을 평가합니다.
  • 컨텍스트에서 상대 가중치 및 가시성을 평가합니다(해당 가중치가 지배하지 않는지 확인).
  • 지금은 사용되지 않을 수 있지만 가까운 장래에 있을 수 있는 경우를 고려합니다. 이 아이콘에 주석을 추가하거나 오버레이를 사용할 수 있나요?
  • 코드에서 살펴보십시오.

목록 보기, 도구 모음 및 트리 뷰 컨텍스트의 아이콘

목록 보기

  • Windows Vista의 경우 사용자가 찾고 있는 파일을 직접 인식할 수 있도록 작은 규모로 시각적으로 구별되는 콘텐츠를 보유하는 파일에 썸네일을 사용합니다. (이를 위해 Windows 미리 보기 애플리케이션 프로그래밍 인터페이스를 사용합니다.)

    UI 아이콘 사이즈 - UI aikon saijeu

  • 썸네일의 애플리케이션 아이콘 오버레이(여기에 표시되지 않음)는 파일의 미리 보기를 표시하는 것 외에도 파일 형식에 대한 애플리케이션과 연결하는 데 도움이 됩니다.

참고: 시각적으로 고유한 콘텐츠가 없는 파일의 경우 썸네일을 사용하지 마세요. 대신 개체 표현 및 연결된 애플리케이션 또는 형식을 보여 주는 기존 기호 파일 아이콘을 사용합니다.

도구 모음

  • 도구 모음에 표시되는 아이콘은 크기, 색 및 복잡성의 광학 균형이 있어야 합니다.
  • 원치 않는 지배 또는 불균형을 방지하기 위해 상황별 스크린샷에서 잠재적 아이콘을 테스트합니다.
  • 스크린샷에서 테스트하면 코드에서 비용이 많이 드는 반복을 쉽게 방지할 수 있습니다.
  • 코드의 아이콘도 검토합니다. 동작 및 기타 요소는 아이콘의 성공에 영향을 미칠 수 있습니다. 경우에 따라 추가 반복이 필요할 수 있습니다.

UI 아이콘 사이즈 - UI aikon saijeu

위의 예에서 광학 균형은 아직 달성되지 않았습니다.

UI 아이콘 사이즈 - UI aikon saijeu

컨텍스트에서 반복을 시도합니다.

트리 보기

  • 트리 뷰 컨트롤에서 계층 구조를 유지하려면 광학 균형이 필요합니다.
  • 따라서 이 컨텍스트에서 일반적으로 사용되는 아이콘은 여기서 평가되어야 합니다. 경우에 따라 특정 16x16 아이콘의 모양이 다른 아이콘보다 광학적으로 우위를 점하기 때문에 더 작게 만들어야 합니다.
  • 광학 불균형에 대한 보상은 최고 품질의 아이콘을 생성하는 데 중요한 부분입니다.

UI 아이콘 사이즈 - UI aikon saijeu