Windows 앱 아이콘에 대한 디자인 가이드라인

다음 가이드라인에 따라 Windows에서 집에 있는 듯한 편안한 앱 같은 유용한 앱 아이콘을 만듭니다.

디자인 가이드라인: 은유

아이콘은 앱에 대한 은유여야 합니다. 즉, 제품의 가치 제안, 기능 및 특징을 시각적으로 표현합니다.

표현

아이콘은 간단한 양식을 사용하여 단일 요소에서 앱의 개념을 보여줘야 합니다.

아이콘을 만들 때 명확한 은유를 사용하고 주로 이해되는 개념(예: 메일 봉투 또는 검색을 위한 돋보기)을 활용합니다. 주요 개념은 아이콘의 초점이어야 합니다. 은유를 지원하지 않는 장식 요소를 추가하여 아이콘을 흐리지 마세요. 확실한 의사소통을 위해 단일 아이콘에 2개 이하의 은유를 사용합니다. 하나의 은유를 사용할 수 있다면 더 좋습니다.

문자 그대로의 은유는 목적과 약속을 명확한 방식으로 표현하는 데 가장 적합합니다. 효과적인 아이콘에 대한 좋은 테스트는 사용자가 라벨 없이도 무엇을 나타내는지 알 수 있는 경우입니다.

제품의 핵심 기능을 나타내는 문자 그대로의 자명한 은유를 찾을 수 없는 경우에만 추상적인 은유를 사용합니다.

아이콘은 디자인의 일부로, 타이포그래피를 포함해서는 안 됩니다. 아이콘의 문자와 단어는 피해야 하며 필수인 경우에만 사용해야 합니다. 앱의 이름은 운영 체제 전체에서 아이콘과 연결하여 표시됩니다.

디자인 가이드라인: 모양

그리드 및 둥근 모서리

Microsoft는 초기에 아이콘을 48x48 그리드에 맞추어 사용 가능한 공간을 활용하는 균형 잡힌 아이콘을 보장하면서도 기본 독특한 모양과 실루엣을 유지합니다. 아이콘의 고유한 기능을 그리드에 맞추면 주변의 다른 아이콘과 잘 균형을 맞출 수 있습니다.

접근성은 Microsoft의 퍼스낼리티 원칙입니다. 이 특성을 전달하는 한 가지 방법은 부드럽고 둥근 모서리를 사용하는 것입니다. 앱의 제품 아이콘에 사용되는 모양은 아이콘 그리드에 맞게 작성되어야 합니다. 이러한 모양의 모서리는 아이콘 그리드의 둥근 모서리와 일치해야 합니다. 둥근 모서리가 외부 곡선에 적용되면 48x48에서 반경 2px를 사용하십시오. 둥근 모서리가 내부 곡선에 적용되는 경우 대신 반경 1px를 사용하십시오.

실루엣

시각적으로 균형 잡힌 실루엣을 사용하면 아이콘 확장성이 뛰어나며, 극단적으로 굵고 얇은 도형을 방지할 수 있습니다. 그리드를 사용하여 독특하면서도 작은 크기로 읽을 수 있는 실루엣을 디자인하세요. Windows에서 집에서 느끼는 듯한 편안함을 경험할 수 있도록 제품을 구분하기 위해 가능한 한 적은 수의 모서리가 있는 모양을 사용합니다.

세부 정보

세부 정보를 추가할 때는 기본 작은 크기로 가독성을 유지해야 합니다. 아이콘의 가장 눈에 띄는 레이어에 문자 그대로의 세부 정보만 추가하는 것이 좋습니다.

디자인 가이드라인: 색 및 그라데이션

색을 신중하게 선택하세요, 그리고 색에만 의존하여 의미를 전달하지 마세요. 색과 함께 모양과 은유를 사용하여 통신합니다. 크기 범위에서 아이콘의 크기를 조정하는 경우 복잡성을 방지하려면 색에 대한 처리를 최소화해야 합니다. 색 그라데이션, 다양한 불투명도 오버레이 및 색 색조를 최소한으로 유지해야 합니다.

그라데이션은 대부분 미묘해야 합니다. 그라데이션 램프를 가로 방향과 세로 방향 모두에서 하나 또는 두 단계로만 제한해 보세요.

그라데이션의 기본 각도는 120도입니다. 시작점과 끝점을 적절하게 조정할 수 있습니다. 중요한 것은 원활히 전환하는 것입니다. 반사감 또는 입체감처럼 느껴지는 매우 타이트한 전환을 피합니다.

단색 색상표

다음 단계를 사용하여 단색 색상표를 만듭니다.

1. 동일한 색조에서 세 가지 색을 만듭니다. 대부분의 경우 밝은 색을 더 밝게 조정하고 어두운 색은 채도가 낮도록 조정해야 하지만, 물론 최선의 판단을 내려야 합니다.
2. 각 기본 색 사이에 세 단계를 만들어 보세요. 이것은 당신의 기본 차선책이 될 것입니다. 대부분의 아이콘은 이러한 색으로 구성되어야 합니다.
3. 더 넓은 색상표의 경우 2단계와 동일한 방법을 사용하여 흰색에 색조를 만들고 검은색으로 음영을 만듭니다. 이러한 색조와 음영은 좀 더 대비가 필요한 경우에만 사용해야 합니다.
4. 밝은 색의 음영 및 어두운 색과 색조는 일반적으로 쓸모없고 칙칙해 보입니다. 제거될 수 있습니다.

단색 그라데이션

단색 그라데이션은 일반적으로 왼쪽 위에서 오는 주변 광각에 대한 미묘한 힌트를 제공하는 데 사용됩니다. 하지만 직접 광원으로 취급해서는 안 됩니다. 아이디어는 너무 극적이지 않으면서 모양에 약간의 움직임을 제공하는 것이 됩니다.

유사 색상표

유사한 색상표를 만드는 것은 단색 팔레트를 만드는 것과 똑같지만 색상의 종류가 더 많습니다. 이러한 유형의 색상표의 핵심은 이를 과도하게 처리하지 않는 것입니다. 색 전환에 신중해야 합니다.

1. 한 가지 대신 세 가지 색 집합을 만듭니다.
2. 세 가지 색 집합에서 세로 경사로를 만듭니다.
3. 흰색과 검은색을 사용하여 색조와 음영을 만드는 대신 두 번째와 세 번째 색을 사용합니다.

유사 그라데이션

유사 그라데이션은 단색과 동일한 각도여야 하지만 항상 그래야 하는 것은 아닙니다. 일반적으로 밝은 색조는 지나치게 극적인 모습을 피하고 단색과 가능한 한 일관성을 유지하려면 왼쪽 위에 있어야 합니다.

디자인 가이드라인: 대비, 그림자 및 원근감

색 대비

접근성은 Microsoft의 높은 우선 순위가 됩니다. 앱 아이콘은 주로 밝고 어두운 배경에 표시되지만 바탕 화면 배경 이미지와 색조 또는 시스템 강조 색의 음영에 표시됩니다. 모든 배경에서 아이콘에 100% 액세스할 수 있도록 하는 것은 어렵지만 아이콘에 가능한 한 액세스할 수 있도록 하기 위해 수행할 수 있는 몇 가지 작업이 있습니다.

• 세 가지 범위인 어두운, 중간의, 밝은 색 값을 모든 곳에서 사용합니다.
• 아이콘의 절반 이상이 밝은 테마와 어두운 테마에서 3.0:1 대비 비율을 통과하는지 확인합니다.
• 일부 색조 값은 다른 값보다 더 까다롭습니다. 노란색은 갈색이 될 때까지 밝은 테마에 액세스 가능한 대비 비율을 통과할 수 없습니다. 빨간색은 어두운 테마에서 더 까다롭습니다.
• 필수는 아니지만 Windows의 작업 표시줄, 시작 및 기타 테마 구분 영역에 대해 별도의 밝은 테마와 어두운 테마 자산을 제공하는 옵션이 있습니다.

고대비

팁

Windows 11에서는 더 이상 앱 아이콘에 고대비 자산이 필요하지 않습니다.

고대비 아이콘은 흑백이며 앱 아이콘을 직접적으로 표현해야 합니다. 고대비 아이콘은 단색 채우기와 선을 사용하여 유색 버전에서 만들 수 있는 경우가 많습니다. 고대비 아이콘에서 그라데이션을 사용하지 마세요. 앱 내 환경에 모노라인 아이콘 이 필요한 경우도 있습니다.

레이어링 및 그림자

위쪽/전면 보기입니다.

z-깊이를 설명하는 등각 뷰입니다. 설명용으로만 사용되며, 해당 옵션은 제안된 디자인 옵션이 아닙니다.

아이콘은 아래 레이어 위에 있는 평평한 개체로 구성됩니다.

• 가능한 한 적은 수의 레이어를 사용하고 도형 간의 극단적 대비를 최소화합니다.
• 아이콘 내의 그림자를 사용하여 개체 레이어 간에 정의를 만들고 아이콘 디자인 내에서 구성 요소를 시각적으로 서로 연결합니다.
• 일반적으로 빛에서 어두운 모양으로 캐스팅된 그림자는 최상의 결과를 제공합니다.
• 내부 그림자는 주변 배경이 아니라 그래픽 기호에만 그림자를 드리우면 됩니다.
• 두 가지 유형의 내부 그림자가 있으며 둘 다 각각 두 개의 그림자가 있습니다.

그림자 생성

이러한 모든 값은 48x48 px로 렌더링되고 여기에서 확장 또는 축소됩니다. 이를 준수하지 않으면 아이콘 시스템 전체에서 그림자가 일치하지 않습니다. 개체 그림자에는 각각 두 개의 그림자가 있으며, 두 가지 유형의 개체 그림자가 있습니다. 동일한 은유 내의 개체에는 약간 덜 흐리게 표시된 그림자가 있습니다.

동일한 은유

이 그림자는 깊이가 필요한 단일 은유 내에 콘텐츠가 있는 경우에 사용됩니다. 이 작업은 항상 수행할 필요는 없지만 단일 개체 은유는 시스템의 일부처럼 느껴지기 위해 깊이가 필요합니다. 그림자 2의 파란색이 유일한 차이점입니다.

분리된 은유

이 그림자는 서로 겹치는 두 개체가 있지만 반드시 같은 은유의 일부는 아닐 때 사용됩니다. 그림자는 그 아래 도형으로 마스킹되어야 합니다.

관점

왼쪽의 아이콘은 매우 간단합니다. 큐브 뷰는 권장되지 않지만 여기서는 적절할 수 있습니다. 오른쪽의 아이콘은 큐브 뷰에 너무 복잡하므로 이 아이콘에 사용하지 않는 것이 좋습니다.

아이콘은 이해하기 쉬운 간단한 방법으로, 은유를 제시하기 위해 직선 관점으로 그려야합니다. 예외는 은유의 다른 쪽을 보지 않고 잘 읽지 않는 경우입니다. 예를 들어 직사각형으로 표시된 실린더는 직사각형이므로 볼륨이 있음을 표시하기 위해 위쪽을 추가할 수 있습니다. 다른 예외로 앱이 차원을 표시하는 것이 적합한 3d와 관련된 경우를 꼽을 수 있습니다. 두 경우 모두 평면 개체에 대한 이전 지침은 여전히 적용됩니다. 레이어는 항상 평면적이고 시야각에 수직이어야 합니다.