적응 형 아이콘 디자인

Android O는 적응 형 아이콘이라는 새로운 앱 아이콘 형식을 도입했습니다. 적응 형 아이콘을 사용하면 모든 앱 아이콘의 모양을 통합하고 흥미로운 시각 효과의 문을 열어 장치의 일관성을 높일 수 있습니다. 이 포스트는 그들이 어떻게 작동하는지 설명하고 그것들을 디자인하기위한 기술을 탐구합니다.

이 기능의 출처를 다시 살펴 보려면 다음을 참조하십시오.

기초

크기와 모양

적응 형 아이콘의 크기는 108dp * 108dp이지만 최대 72dp * 72dp로 마스킹됩니다. 다른 장치는 다른 마스크를 제공 할 수 있으며 모양이 볼록해야하며 중앙에서 최소 33dp에 도달 할 수 있습니다.

적용되는 다른 모양의 마스크의 예

마스크의 최소 도달 거리 때문에 중심 66dp 직경의 원을 안전 영역으로 간주하여 잘리지 않도록 할 수 있습니다.

둥근 사각형 마스크 내의 안전 영역

키라 인

아이콘 키라 인

키라 인 모양은 아이콘의 시각적 비율이 다른 앱의 아이콘과 일치하도록 돕는 아이콘 격자의 기초입니다. 키라 인 모양은 다음과 같습니다.

  • 서클 : 52dp 및 36dp 직경
  • 정사각형 : 44dp * 44dp, 4dp 코너 반경
  • 사각형 : 52dp * 36dp 및 36dp * 52dp, 4dp 모서리 반경

이 기사 끝에 포함 된 템플릿을 참조하십시오.

레이어

적응 형 아이콘은 실제로 두 개의 레이어로 구성됩니다. 전경과 배경. 두 층 모두 108dp * 108dp; 전경은 투명도를 포함 할 수 있지만 배경은 완전히 불투명해야합니다. 이 층들은 서로의 위에 쌓입니다.

표시된 (즉, 마스킹 된) 크기보다 큰 두 개의 개별 레이어에 요소를 제공하면 흥미로운 시각적 처리 및 애니메이션을위한 기회가 만들어집니다. 정확히 어떤 효과를 적용 할 수 있으며 언제 여전히 미심쩍은 질문인가? 결정하는 것은 장치 및 실행기 제작자에 달려 있습니다. 다음은 상상할 수있는 몇 가지 간단한 예입니다. 마스크를 적용하기 전에 각 레이어를 독립적으로 변환하거나 크기를 조정하여 시차 또는 펄스.

108dp * 108dp 아이콘이 최대 72dp * 72dp로 마스킹되므로 각면의 바깥 쪽 18dp는 "추가"내용으로 간주 될 수 있으며 동작 중에 만 나타납니다.

디자인 고려 사항

제품 아이콘을 만들기위한 재료 설계 지침이 여전히 많이 적용됩니다. 특히 아이콘 해부학, 그림자 및 마무리는 그대로 유지되지만 이제 전경 또는 배경 레이어에 요소를 배치하여 다른 효과를 낼 수 있습니다.

이제 브랜드 아이콘을 전경에 단색 배경으로 배치하고 하루에 호출하면 많은 아이콘이 제대로 제공됩니다. 이렇게하면 아이콘이 장치에 잘 맞습니다. 나를 흥분시키는 것은 커뮤니티로서 우리가 이러한 새로운 제약을 탐구하고 유쾌한 아이콘을 만드는 흥미롭고, 유쾌하며 혁신적인 방법을 찾는 방법입니다. 다음은 명심해야 할 몇 가지 사항과 잠재적으로 탐색해야 할 몇 가지 아이디어입니다.

깎는

적응 형 아이콘의 동적 특성으로 인해 적용 할 정확한 마스크 모양을 알 수 없습니다. 따라서 브랜드 마크와 같은 중요한 요소를 안전 영역에 배치하고 마스크 가장자리에서 멀리 떨어져있는 것이 가장 좋습니다.

배경 정박

실제로는 배경에 전경으로 보일 수있는 일부 요소를 배치하면 독립적으로 움직입니다. 예를 들어 계산기 앱은 대부분의 요소를 전경에 배치하지만 배경의 악센트 색상 블록에있는 같음 버튼은 다음과 같습니다.

다른 레이어의 요소는 레이어링을 강조

이것은 밝은 색상 블록에 시각적으로 고정되는 모션에 대한 흥미로운 기회를 제공하지만 전경 요소보다 덜 이동하여 깊이 감을 만듭니다.

마스크 마스크

마스킹 요소를 포 그라운드에 배치 할 수있는 흥미로운 기회가 있다고 생각합니다. 즉 영역이 잘려진 견고한 요소입니다. Google Play 스토어에서 사용할 수있는 아이콘을 고려해보십시오.이 아이콘은 '명백한'방식으로 구성 될 수 있습니다.

흰색 배경 위에 놓인 '표준'전경

이 대신 화려한 배경과 흰색 전경을 사용하여 삼각형을 빼고 동일한 정적 출력을 생성 할 수 있습니다.

마스킹 전경과 대체 화려한 배경

이 설정을 사용하면 '피킹 스루'색상이 마스크와 독립적으로 이동하여 번역 또는 배율 조정시 배경의 다른 부분을 나타냅니다.

왼쪽은 규칙적인 구성입니다. 마스킹 전경과 함께

빛과 그림자

별도의 레이어에 배치 된 조명 효과와 그림자의 상호 작용으로 흥미로운 결과를 얻을 수 있습니다. 예를 들어 전경 요소에 긴 그림자 기술을 사용하면 마스크 영역 내에서 움직일 때 재미있는 상호 작용을 할 수 있습니다. 마찬가지로 조명 효과는 배경에 구워지지 않고 전경 레이어에 배치 할 수 있습니다. 예를 들어 '마무리'레이어를 전경에 배치하여 광원을 에뮬레이션 할 수 있습니다. 이것을 포 그라운드에 두는 것은 움직임이있을 때 배경 레이어 위에서 다른 속도로 이동한다는 것을 의미합니다.

배경에 뿌려진 전경 그림자 및 (과장된) 광원의 예

예를 들어 의미가없는 효과를 만들지 않도록주의하십시오. 전경 요소에서 분리되거나 배경 요소 뒤에서 이동하는 그림자. 또한 많은 아이콘이 함께 표시 될 수 있으므로 맞춤형 조명 효과로 보수적이고 재료 지침에 충실해야합니다.

뒤에 남겨주세요

전경 레이어에 의해 완전히 가려지고 움직임이있는 경우에만 배경 레이어에 요소를 배치 할 수 있습니다.

움직이는 상태에서만 드러나는 요소

리소스 및 도구

다음은 적응 형 아이콘을 만드는 동안 템플릿으로 사용할 수있는 스케치 파일입니다. 아이콘 그리드, 키라 인 모양 및 안전 영역이 포함됩니다. 마스터 요소를 변경하면 사본이 업데이트되어 다른 마스크가 적용된 미리보기가 제공됩니다.

또한 Adobe Illustrator 템플릿을 더 많이 업로드했습니다.

또한 내가 본 다른 리소스를 확인하십시오.

  • 적응 형 아이콘 미리보기 도구
  • 선호도 디자이너 템플릿
  • Bjango 템플릿에는 적응 형 아이콘이 포함되어 있습니다.
  • 피그 마 템플릿 (로그인 필요)
  • Adobe XD 템플릿

적응 형 아이콘 놀이터

적응 형 아이콘을 개발할 때 모션 효과를 적용 할 때 전경과 배경 요소의 상호 작용에서 많은 미묘함이 발생한다는 것을 알게되었습니다. 장치와 런처 제작자가 어떻게 이것을 구현하는지 아직 알지 못하기 때문에 이것은 여전히 ​​열린 질문입니다. 이 공간을 조사 할 수 있도록 아이콘을 만들면서 평가하는 데 도움이되는 작은 테스트 앱을 만들었습니다.

아이콘에 적용된 마스크 및 모션 효과 실험

응용 프로그램은 장치에 설치된 모든 응용 프로그램을 적응 형 아이콘으로 표시합니다. 격자를 스크롤하면 시차 효과가 아이콘에 적용되고 아이콘을 터치하면 배율 효과가 적용됩니다. 효과의 강도를 구성하고 모든 아이콘에 적용된 마스크를 변경할 수 있습니다. 이 도구를 사용하면 아이콘이 어떻게 나타나고 다른 장치에서 움직일 수 있는지 알 수 있습니다.

github에서 APK를 다운로드하거나 소스를 확인하십시오.

가서 적응

이 글이 앱에 대한 멋진 적응 형 아이콘을 디자인하기위한 정보와 영감을 모두 얻었기를 바랍니다. 사용자는 내 앱이 더 일관성있게되기를 기다릴 수 없습니다. 더 흥미 진진한 것은 우리가 커뮤니티로서 어떤 창의적인 솔루션을 만들어 내는지 보는 것입니다.

적응 형 아이콘을 구축하려는 개발자 인 경우 3 부 : 적응 형 아이콘 구현에 참여하십시오.