UI 디자인 및 그래픽 디자이너의 관점에서 아이콘 디자인은 우리가 먼저 배워야 할 기술 중 하나이며, 사용자 인터페이스에서 절대적으로 없어서는 안 될 요소입니다. 일반적으로 우리는 아이콘 디자인의 의미를 이해합니다. 즉, 개념을 명확하고 읽기 쉬운 그래픽으로 변환하여 사용자의 이해 비용을 절감하고 인터페이스의 아름다움을 높이는 것입니다. 그리고 많은 작은 파트너들이 아이콘 디자인을 배우는 과정에서 규범적이지 않기 때문에 많은 아이콘 디자인 작품들이 만족스럽지 못하다! 이를 위해 아이콘 설계 규칙을 공유하겠습니다. 아이콘 디자인의 규칙: 1 을 살펴 보겠습니다. 아이콘 크기 아이콘 크기의 일관성을 유지하기 위해 아이콘을 그리기 위한 기본 메쉬 크기를 설정하는 경우가 많습니다. 일반적인 메쉬 크기는16,24,36,48,64,128,512,/kloc-입니다 이러한 치수는 고정되지 않으며 설계에 특수 치수가 있습니다. 예를 들어, 구글이 데스크톱 컴퓨터에서 표지를 설계했을 때, 마우스와 키보드가 주요 입력방식일 때 조밀한 레이아웃을 사용했고, 기본 그리드는 20 개로 줄었다. 다음은 일반적으로 사용되는 24x24 디스플레이입니다. 메시에는 2px 도련 부분이 포함되어 있습니다. 이렇게 하면 내보낼 때 아이콘이 원하는 배율과 주변 공백을 유지하거나 아이콘의 시각적 무게 중심 균형을 조정할 수 있습니다. * 일반 아이콘을 사용할 때 도련 위치의 부품을 피하십시오. * 여러 요소의 아이콘을 사용할 때 아이콘 혼잡을 방지하기 위해 일부 아이콘이 도련 위치에 나타나고 그 사이에 충분한 공간이 있는지 확인할 수 있습니다. 2. 아이콘 키워드의 핵심 선은 원, 사각형, 직사각형, 직교, 삼각형 및 대각선으로 구성됩니다. 아이콘 세트의 기본 모양 또는 비율에 대해 일관된 크기를 제공합니다. 이렇게 하면 시각적 안정성을 쉽게 작성할 수 있으며 비슷한 축척의 아이콘을 설계할 때 * * * 참조를 갖는 데 도움이 됩니다. 크기가 24 인 키 라인 컴포지션은 다음과 같습니다 (크기가 24 인 도련 영역은 2 임). 격자 위에 아이콘을 그릴 때 아이콘을 표준화하는 것이 좋습니다. 이렇게 하면 전체 시각적 관점에서 통일된 것처럼 보입니다. 3.Pixel 3- 1 픽셀 단위 시스템 아이콘 세트를 디자인할 때 아이콘의 픽셀 크기를 주의하고, 같은 메쉬 크기를 사용하고, 선 두께가 같은 아이콘 (곡선, 각도, 안쪽 및 바깥쪽 선 포함) 을 디자인합니다. 이렇게 하면 아이콘이 더 통일되어 보이고 아이콘의 사후 반복에도 도움이 됩니다. 물론 획 픽셀의 두께도 절대적인 것은 아니다. 시스템 아이콘의 선 두께를 3px 로 설정했습니다. 지문 아이콘에 3px 를 적용하면 매우 혼잡해 보이며 다른 아이콘보다 시각적으로 더 무거워 보입니다. 이제 선형 픽셀을 2px 로 줄일 수 있습니다. 3-2 소수점이 벡터 도구를 사용하여 아이콘을 그릴 때 아이콘의 그리드 크기와 아이콘 구조 크기를 자세히 살펴보고 소수점을 피하십시오. 4. 아이콘의 곡률은 원형 아이콘의 코너 수입니다. 모든 둥근 사각형에는 일정한 곡률이 있습니다. 아이콘에 곡률을 나타내는 방법에는 외부 곡률과 내부 곡률의 두 가지가 있습니다. 외부 커브와 내부 커브가 동시에 존재할 필요는 없습니다. 경우에 따라 내부 구조물이 직각일 수 있습니다 (곡률 없음). 다음 그림과 같이 내부 구조가 원형이면 전체 아이콘이 약간 비대해집니다. 이때 일부 내부 모깎기를 직각 (또는 곡률 변경) 으로 직접 변경할 수 있으며, 변경 후 아이콘의 전체 구조가 더욱 조화를 이룹니다. 아이콘이 이렇게 처리되면 같은 상황에서 아이콘도 이렇게 처리해야 한다는 점에 유의해야 합니다. 그렇지 않으면 아이콘이 매우 혼란스럽고 일관되지 않을 수 있습니다. 5. 기울기 각도는 픽셀의 격자 선에 따라 두 개의 대각선을 설정하면 아이콘이 더 선명하게 보입니다. 경사각 선택에서 7.8, 14.2 와 같은 이상한 수치가 나타나면 안 된다. 15 의 증분을 경사 각도 (또는 다른 일반 각도 구성표) 로 사용할 수 있습니다. 이렇게 하면 전체 패턴 변경이 다양한 모양의 각도 요구 사항에 맞게 더욱 규칙적으로 변경됩니다. 6. 중단점 형식 많은 아이콘을 만들 때 중단점의 틈을 이용해' 완전 둘러싸기 아이콘' 의 답답함을 깨고 아이콘을 통풍시킵니다. 아이콘에 중단점을 추가하려면 중단점의 형식이 같아야 합니다. 7. 아이콘 간격 아이콘의 각 세부 사항과 요소에 충분한 공간이 있는지 확인합니다. 아이콘 옆에 있는 요소 사이의 공간은 아이콘 전체에서 너무 작을 수 없습니다. 프로파일을 "고정" 하지 않도록 최소 간격을 정의할 수 있습니다. 24px 이하의 간격은 1px 보다 작을 수 없습니다. 8. 아이콘을 만들 때 투시가 필요한 경우 아이콘의 투시가 일치하는지 확인합니다. 9. 시각중심 물리쌍 정시, 비중심 대칭 도형은 시각적 편차감을 가질 수 있습니다. 모양이 다른 몇 개의 아이콘 시각적 중심이 수평선에 있지 않으므로 균형감을 보장하기 위해 미세 조정이 필요합니다. 10. 간결한 그래픽 그래픽을 처리할 때 불필요한 노드를 남기지 말고 불필요한 노드를 제거하고 도면을 깔끔하게 유지합니다. 1 1. 이름 지정 아이콘의 이름 지정 요구 사항은 비교적 엄격합니다. 이는 편평한 디자인 스타일이 유행함에 따라 아이콘 스타일도 점점 간단해지는 것을 의미합니다. 사실 뜻을 정확하게 표현하려면 많은 세부 사항에 주의해야 한다. 아이콘이 대동소이하고 있는 오늘, 어떻게 당신의 아이콘을 납득시킬 수 있는지도 학문입니다! (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 따라서 위의 아이콘 디자인 규칙을 단단히 배워야합니다 ~