아이콘은 광의와 협의의 구분이 있다. 광의는 현실에서 명확한 참조 의미를 가진 모든 그래픽 기호를 의미하며, 좁은 의미는 주로 컴퓨터 장치 인터페이스의 이미지 기호를 의미하며, 적용 범위는 매우 크다.
아이콘은 크게 네 가지 범주로 나눌 수 있다.
일반적으로 탐색 및 전환을 위한 명확한 기능과 힌트가 있는 아이콘이지만, 페이지마다 탐색 아이콘은 정보 계층 및 작업의 필요에 따라 비주얼 스타일에 대한 요구 사항이 다릅니다.
탐색 아이콘은 tabbar 아이콘, 금강구 아이콘, 개인 센터 등의 기능 아이콘으로 나눌 수 있습니다.
레이블 막대 아이콘은 일반적으로 선형, 합성, 선 및 면 결합 등입니다. , 하지만 브랜드, 개인화 또는 운영 활동에 초점을 맞추고, 스타일은 브랜드에 가깝거나 최근 시사와 관련이 있습니다.
금강구의 아이콘 스타일은 더욱 다양해질 것입니다. 일반적으로 시각적 수준이 더 무겁고 디자인감이 더 강해집니다. 일반적으로 다색 그라데이션 스타일이 주요 스타일이 됩니다. 음악류 앱은 단색 선형 스타일로 브랜드 음조를 강조하고, 일부 전자상들도 실물로 직접 전시한다.
개인 센터 및 기타 페이지의 아이콘은 주로 장식적이고 설명적입니다. 아이콘을 제거해도 전체 탐색에는 영향을 주지 않습니다. 아이콘 디자인 스타일은 일반적으로 너무 복잡하지 않고 대부분 선형 스타일로 표시됩니다.
주로 장식성과 주석성이며, 시각이 깔끔하고, 신나고, 브랜드감과 분위기감이 더 강해집니다. 일반적으로 운영 활동 및 VIP 권한과 같은 설명 및 설명 인터페이스에 사용되며 시각적 스타일은 페이지 조정을 따릅니다.
브랜드 인식 기능인 부트 아이콘은 제품의 로고 디자인과 동등하며 브랜드 톤을 통합해야 합니다. 장면 사용 제한으로 인해 최소 크기와 작은 인식 상태를 보장하기 위해 시작 아이콘도 설계 사양을 따라야 합니다. 대부분의 아이콘은 다음 형식으로 표시됩니다.
대부분의 시작 아이콘은 너무 복잡하게 설계되지 않습니다. 너무 복잡한 아이콘은 사용자의 인지 비용, 특히 인터넷 정보가 폭발하는 시대에 더욱 그렇습니다. 평면 아이콘을 사용하면 사용자의 인식 비용을 효과적으로 절감하고 색상 인식을 강화하여 사용자의 마음을 사로잡을 수 있습니다.
이벤트 조작 아이콘은 시효성이 있어 디자인 주제와 스타일이 명절과 관련이 있어 주로 명절 분위기를 높이고 조회수를 높이는 데 쓰인다.
디자인 스타일은 고정불변이 아니다. 다른 장면과 사용자 기반에 따라 다른 스타일의 아이콘을 사용해야 합니다. 조작 활동이 있다면, 조작에 따라 관련 음조 스타일을 만들어야 한다.
아이콘 디자인 스타일은 크게 다음 범주로 나눌 수 있습니다.
여기에는 일반적인 디자인 형식, 특정 용도 및 혁신이 필요한지 여부에 대한 구체적인 사용 시나리오만 나와 있습니다.
영역 아이콘은 비컬러, 단색, 다색, 그라데이션 등으로 나눌 수도 있습니다. , 사용 중인 장면에 따라 다릅니다.
이런 디자인 스타일은 일부 작은 게임이나 H5 활동에서 흔히 볼 수 있다.
3d 편평화 스타일이 점차 시야에 들어온다. 운영 요구 사항과 디자이너 기술이 향상됨에 따라 가까운 장래에 점점 더 많은 사람들이 이런 스타일을 보게 될 것으로 믿습니다.
아이콘을 설계하기 전에 아이콘의 사양에 대해 잘 알고 있어야 합니다.
아이콘 설계 사양에서 따라야 할 몇 가지 원칙
아이콘은 탐색과 해석에 많이 사용되기 때문에 의미를 명확하게 표현하는 것이 아이콘의 기본 기능이다. 흔하지 않은 유형의 아이콘의 경우 brain storm 을 통해 키워드를 합리적으로 필터링한 다음 디자인을 시작해야 합니다. 설계가 완료되면 몇 가지 간단한 테스트가 필요합니다. 너는 너의 동료에게 이 아이콘이 관련된 뜻을 표현할 수 있는지 물어봐도 된다. 대답이' 아니오' 라면, 그 이유를 묻거나, 더 많은 방안을 설계하거나, 동료들과 브레인스토밍을 해야 한다.
아이콘의 일관성은 여러 가지 상황으로 나눌 수 있다.
같은 리본의 아이콘은 디자인 스타일의 균일성을 유지해야 합니다. 선형 아이콘을 사용하는 경우 모두 선형 아이콘입니다. 실제 아이콘인 경우 일관되게 사용해야 합니다.
비주얼 디자인에서, 우리는 몇 가지 착시를 만나게 됩니다. 다음은 몇 가지 일반적인 상황과 해결책입니다. 시각적 일관성을 유지하는 방법은 이미지의 길이와 폭을 일치시키는 것이 아니라 그래픽의 물리적 크기가 일치하더라도 시각적 무게감이 다릅니다. 아래 왼쪽 그림에서는 직사각형의 시각적 무게가 훨씬 더 크며 비어 있지 않습니다. 흐릿한 그림에서 볼 수 있듯이 삼각형의 시각적 가중치는 훨씬 작습니다. 오른쪽 아래 그림을 조정하면 시각적 무게가 거의 같다는 것을 알 수 있지만, 시각적 무게의 판단은 디자이너가 더 많이 관찰하고 더 많이 시도해야 한다는 것을 알 수 있다.
프로그램의 기본 중심 정렬은 종종 시각적으로 균형이 맞지 않으므로 일반적으로 시각적으로 균형을 맞추도록 조정해야 합니다. 또한 그래프의 한 부분의 면적이 다른 부분의 면적보다 훨씬 크면 그래프의 중심이 저렴해지므로 균형을 이루기 위해 작은 부분의 방향으로 이동해야 합니다.
Areal 아이콘에서 다음 그림과 같이 양수 및 음수 축척을 고려하여 흰색 영역은 모든 시트에서 일치해야 합니다.
투시가 균일하지 않으면 공간 혼란이 발생할 수 있으므로 아이콘을 그릴 때 어떤 각도에서 볼 것인지 고려해야 합니다.
일부 아이콘은 밝은 점 또는 기능을 추가합니다. 아이콘 디자인 과정에서 폴리라인 스타일과 같은 그림의 전반적인 특징을 일관되게 유지해야 합니다.
구도에서는 아이콘의 전체 리듬과 리듬이 일치하도록 아이콘도 전체적으로 일치해야 합니다.
픽셀 정렬은 진부한 표현이다. 일부 프로젝트에서도 SVG 형식을 사용하거나 그림이 다른 화면 크기에 맞춰진 후 매트 크기가 반드시 픽셀을 정확하게 유지하는 것은 아니지만 최소한 디자인 원고에서는 픽셀 정렬을 유지해야 하기 때문에 개인은 독창적이거나 디테일에 대한 궁극적인 추구라고 생각합니다.
개발자와의 가장 일반적인 의사 소통은 주석과 클립입니다. 개발 및 사용을 용이하게 하기 위해 클리핑은 일반적으로 가로세로가 같은 직사각형 클리핑입니다. 또한 아이콘에 출혈할 공간을 남겨 두어야 한다. 한편으로는 잘린 핫스폿 설정이 효과적인 클릭 범위에 도달할 수 있도록 하고, 다른 한편으로는 아이콘을 위한 조정 공간을 확보할 수 있습니다.
메쉬 시스템을 사용하면 시각적 무게의 균형, 그림의 출혈 등 이러한 문제를 효과적으로 해결할 수 있습니다. 스케치의 기호 기능을 통해 조판을 더욱 편리하게 할 수 있다. Blue lagoon 플러그인을 사용하면 기호 크기를 드로잉 크기로 직접 사용하여 드로잉을 쉽게 할 수 있습니다.
이후 점점 더 많은 제품이 동질화되기 시작했고 브랜드는 점점 더 중시되고 있다. 브랜드 유전자를 아이콘에 융합함으로써 브랜드 인지도가 강화되었다.
브랜드 유전자를 추출하는 방법에는 두 가지가 있다.
로고에서 발췌하다
브랜드 기질에서 추출하여 브랜드 기질을 추출함으로써 아이콘의 개성을 바꾼다.
예를 들어, YEATION icon 은 브랜드 기질을 추출하여 아이콘 개성을 디자인합니다.
요약하면 아이콘 자체 테스트 매뉴얼을 정리하십시오.
1. 정리 기능
2. 명확한 표현
3. 일관성
4. 브랜드 음조
문장 참조:
1. "몸집이 작아서 영향이 크다! 디자이너가 알아야 할 아이콘 기초 (/detail/43605 1.html).
3. 배추아이콘 자체 테스트 설명서-배추 (/p/67239eef3d43)
선언:
사진 자료는 인터넷에서 나왔고, 침범하여 삭제하였다.