현재 위치 - 인적 자원 플랫폼망 - 인적자원 정보 - UI 디자이너가 아이콘 모서리에 대해 알아야 할 사항
UI 디자이너가 아이콘 모서리에 대해 알아야 할 사항

이전 글에서는 아이콘의 사양과 키라인에 대해 알아보았고, 아이콘의 최저 기준도 알고 계셨습니다. 이 글은 아이콘 자체에 초점을 맞추고 로고 디자인에서 이러한 세부 사항을 해체하는 것으로 시작됩니다.

아이콘을 그릴 때 아이콘이 경사를 사용해야 하는지 아니면 호를 사용해야 하는지 의문이 드는 경우가 많습니다. 적절한 반올림 각도는 무엇입니까? 이번 글은 아이콘의 디테일부터 시작하여 아이콘의 모서리 부분에 대해 이야기합니다.

더 나은 "구경 통일"을 위해 48px 아이콘 크기를 예로 들어 보겠습니다. 예에 언급된 다양한 호 값은 물론 제안일 뿐 사양은 아닙니다.

아이콘의 모서리는 호형과 비호형으로 나뉘며, 호형 모서리는 '경사 모서리'와 '비경사 모서리'로 더 나뉩니다.

직각 모서리: 기본 모양이 정사각형인 경우 3X 호를 사용하는 것이 좋습니다. 기본 모양이 직사각형인 경우 2X 호를 사용하는 것이 좋습니다. 기본 그래픽이 작은(높이와 너비의 1/2 미만) 직사각형인 경우 1X 호를 사용하는 것이 좋습니다.

따라서 모든 호 값이 아닌 형태에 따라 독립적으로 고려해야 합니다.

아래 사진의 예: 왼쪽 아이콘의 모서리가 너무 작아서 약간 딱딱해 보입니다.

비직각 모서리: 아이콘 컨텍스트에 따르면 일반적으로 기본 설정은 특별한 경사가 있는 곡선 "모서리" 상황을 제외하고 화각에 관계없이 1X 호입니다. 로고 디자인까지.

아래 사진의 왼쪽 아이콘 모서리에 있는 호가 너무 커서 경사진 아이콘과 함께 배치하면 시각적 효과가 불균형해집니다.

곡률은 모서리가 둥근 도형의 가장자리 각도로 외부 곡률과 내부 곡률로 구분됩니다.

꼭 필요한 경우가 아니면 일반적으로 아이콘의 내부 굴절률을 독립적으로 설정하기가 쉽지 않으며 내부 곡선의 굴절률이 외부 곡선보다 작아야 하며 시각적 효과가 조화를 이루어야 합니다. 아이콘이 느슨해 보이는 것을 방지합니다.

MaterialDesign에서는 아이콘 윤곽선에 2dp(24dp 사양 미만)의 호 반경을 사용할 것을 권장합니다. 획의 모서리를 호 모양으로 만들 필요는 없습니다(너비는 2dp보다 커서는 안 됩니다). 모서리의 첫 번째 부분은 정사각형이어야 하며, 모서리의 첫 번째 부분을 호로 만들 필요는 없습니다.

이제 아이콘 모서리의 기본 특성을 이해했으므로 특정 디자인 솔루션에서 둥근 아이콘과 직각 아이콘을 적용하는 방법을 살펴보겠습니다.

둥근 아이콘

둥근 아이콘은 사람들에게 안정감, 매력, 젊음을 선사하는 동시에 부드러운 면도 갖고 있습니다. 이는 다양한 소셜 미디어, 전자상거래, 아동, 진단 및 치료 및 기타 분야에서 매우 일반적입니다.

직각 아이콘

비스듬한 아이콘은 진지함, 섬세함, 결단력, 깔끔함을 느끼게 하면서도 무자비한 면도 가지고 있습니다. 각종 금융투자상품에서 일반적으로 발생하는 현상으로 투자와 금융투자는 위험하며 투자는 합리적이어야 함을 나타냅니다.

베벨 아이콘

사실 베벨 아이콘은 독립된 유형이 아니며 연결 해제 아이콘과 마찬가지로 아이콘 디자인 스타일에 더 가깝습니다. 설계 시 고려해야 할 사항은 틸트 각도의 일관성과 틸트 각도의 일관성입니다.

아이콘 모서리는 아이콘의 아우라에 영향을 미치며, 일관된 호 반경은 전체 시스템 아이콘 계열을 통합하는 열쇠입니다. 정사각형과 삼각형은 덜 매력적이며, 고리는 가장 매력적이며 대화형 기능이 내장되어 있습니다. 하지만 이것이 모든 아이콘이 호를 사용해야 한다는 의미는 아니며, 호가 클수록 좋다는 의미도 아닙니다. 물론 제품의 포지셔닝도 고려해야 하는데, 비즈니스 호스피탈리티, 하이테크, 하이엔드 분야의 제품은 각진 베벨 아이콘을 사용하여 믿음직스럽고 믿음직한 아우라를 전달하는 것이 더 적합합니다. 일반 대중을 대상으로 하는 소셜 미디어, 유아용, 여성용 제품 등은 호 아이콘을 사용하여 매력을 강조하는 것이 더 적합합니다.