색상, 글꼴, 아이콘, 그래픽 모양, 이미지 및 공간은 그래픽 디자인에서 매우 중요한 6 가지 요소입니다. UI 디자인의 경우 아이콘은 전체 제품의 마무리라고 할 수 있으며 한 제품의 이미지와 기질에도 직접적인 영향을 줄 수 있습니다.
분명히 아이콘은 인터페이스 디자이너가 발명한 것이 아닙니다. 교류의 대상으로서, 그들은 오래되고 다양한 역사를 가지고 있으며, 고대에 뿌리를 내리고 있다. 지도, 로고, 프로그램, 설명서 및 기타 많은 정보 출처에 나타납니다. 그러나 새로운 기술과 그래픽 사용자 인터페이스가 등장함에 따라 아이콘은 새로운 전환점을 경험했습니다.
역사적으로, 1970 년대 초, 제록스는 첫 번째 그래픽 사용자 인터페이스의 아이콘을 언급했다. 아이콘은 제록스 알토 (Xerox Alto) 라는 기계에서 이뤄졌으며, 가격이 매우 비싸서 사용자들에게 실제로 보급되지 않았다. 그러나 이것은 긴 이야기의 시작일 뿐이다: 198 1 년, 제록스 스타 출시, 아이콘을 인터페이스의 일부로 사용하는 최초의 소비자 컴퓨터라고 불린다. 특히 지금까지 폴더와 쓰레기통을 적용한 아이콘입니다. 이것들은 1980 년대의 아이콘들이다.
도식 아이콘 (설명 아이콘이라고도 함)
표의기호는 원래 존재하지 않았던 기호이며, 발전 과정에서 만들어진 기호로, 어떤 특정한 의미나 조작 행위를 표현하는 데 사용된다. 그리고 이 기호들은 발전 과정에서 점차 상형기호의 특징을 계승하여 기호 자체를' 실물' 로 간주하고 진화하고 있다. 예를 들어, "화살" 은 이미 최초의 "활과 화살" 에서 점차 특정 표의 기호로 파생되었다.
대화형 아이콘
사용자에게 일부 정보를 전달하고, 사용자에게 특정 작업을 안내하며, 사용자가 프로그램에 제어 정보를 전달할 수 있도록 하는 양방향 정보 전달 기능이 있습니다. 이는 기능적 중요성에서 가장 중요합니다. 로그인 등록 버튼, 전환 버튼, 수량 버튼, 좋아하는 버튼, 전달, 공유는 모두 상호 작용 아이콘입니다.
장식 및 엔터테인먼트 아이콘
일반적으로 전체 인터페이스의 아름다움을 높이고, 개인화된 디자인 스타일을 심화시키고, 뚜렷한 기능을 갖추지 못하는 데 사용됩니다. 이 아이콘은 대상 청중의 취향과 기대에 부응하고, 특정한 외관을 가지고 있으며, 사용자의 온라인 사용 환경을 향상시키고, 청중의 취향에 부합하며, 디자인의 친화력을 높인다. 데코레이션 아이콘은 일반적으로 계절적 및 주기적 피쳐를 표시합니다. 온라인 활동, 사용자 점수, 빈 페이지 등
응용 프로그램 아이콘
다양한 운영 체제 플랫폼에서 다양한 디지털 제품의 입구와 브랜드 전시의 로고가이 디지털 제품의 정체성 상징입니다. 대부분의 경우 브랜드 로고와 브랜드 색상을 아이콘 디자인에 통합합니다. 일부 아이콘은 마스코트와 회사 시각 인식 색상의 조합도 사용합니다. 정말 우수한 응용 프로그램 아이콘 디자인은 실제로 시장 조사와 브랜드 디자인의 결합으로, 사용자가 화면에서 빠르게 찾을 수 없는 눈에 띄는 디자인을 만드는 것을 목표로 하고 있습니다.
상형아이콘
Ios 는 오랫동안' Skeumorphic 디자인 컨셉' 을 유행해 왔으며 초현실적 디자인이다. 응용에서 실용과 물리의 위도를 높일 수 있다면 현실과 비슷할수록 조작과 동일할수록 사용자가 조작 방식을 더 쉽게 이해할 수 있고 수용도도 높아진다고 믿는다. 예를 들어 일본 후지산이라는 유명한 아이콘은 좋은 디자인이 미관일 뿐만 아니라 기능적일 뿐만 아니라 특히 여행과 관련된 디자인은 사람들이 언어를 뛰어넘는 장애를 필요로 한다는 것을 보여준다. (윌리엄 셰익스피어, 윈스턴, 여행명언) (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), 예술명언)
은유 아이콘
Icon 의 은유 요소는 매우 중요하기 때문에 이 아이콘을 보면 그 의미를 알 수 있다. 예를 들어 집은 홈페이지를 나타내고 포크는 오류나 폐쇄를 나타냅니다. 아이콘을 축소할 때, 나는 항상 은유의 요소를 유지하여 아이콘이 여전히 정확하게 정보를 전달할 수 있도록 한다.
도구 아이콘
주로 업종 범주별로 분류하여 광범위하게 응용하고, 대중이나 업계 인사들의 인지도가 높고, 사용 시간이 길다. 예를 들면 건축업, 의료업, 화학산업 등이다.
혼합 아이콘
즉, 처음 세 가지의 조합은 서로 다른 시각 효과와 응용 구조를 얻기 위한 것이다. 그동안 유행했던 MBE 굵은 획 스타일 아이콘은 종합 아이콘의 산물, 디자이너의 개인 디자인 스타일, 혹은 어떤 디자인감이 강한 소프트웨어에 적용된다.
문자 아이콘
"글리프" 라는 단어는 조판 분야에서 유래한 것으로, 오늘날 디지털 디자인이 발전함에 따라 디지털 디자인 분야에서도 뿌리를 내리고 싹을 틔우고 있다. 그것은 "조각" 을 의미하는 그리스어에서 왔다. 조판 분야에서 기호 아이콘은 일반적으로 표현과 쓰기를 할 수 있는 특정 의미와 기능을 가진 쓰기 시스템입니다. 문자, 그래픽, 때로는 두 가지의 조합일 수 있습니다.
이런 아이콘 디자인에서는 날씨 아이콘이 비교적 전형적이다. 단일 아이콘부터 콤비네이션 아이콘까지 충분히 표현할 수 있습니다.
평면 아이콘
평면 아이콘에는 선, 평면, 선+평면 및 평면+평면이 포함됩니다. 다양하고, 확장 가능하며, 개인화되고, 더 젊은 아이콘은 디자인 스타일이 같은 경우 색상을 변경한 후 다양한 정보를 반영하고 전달할 수 있습니다.
구체화 아이콘
아바타 아이콘은 평면 아이콘의 반대입니다. 아바타 아이콘의 디자이너가 종종 말하듯이, 실제 모양, 텍스처, 그림자를 전체 아이콘의 디자인에 통합하려는 "복제 현실" 입니다. 이것이 그 특징이다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 준물화 아이콘의 디자인 추세는 Macintosh 의 탄생과 진화를 동반한 다음 UI 디자인 분야에서 편평한 디자인으로 대체되었다. 그러나 준물화 아이콘은 여전히 다양한 분야, 특히 게임 디자인과 게임 제품의 아이콘 디자인에 널리 사용되고 있습니다. 2.5D 아이콘 및 데스크탑 응용 프로그램 아이콘입니다.
Windows, iOS 등. , 중국어판, 영어판, 심지어 각종 언어판까지 메뉴를 열기 전까지는 거의 똑같다. 많은 아이콘이 곧 대부분의 사용자에 의해 인정되고 심지어 국제 아이콘까지 되었다. 예를 들어 Windows UI 를 들 수 있습니다.
아이콘이 의미를 명확하게 표현할 수 있는 경우 한 문자만 차지하면 사용자에게 작업 정보를 전달할 수 있습니다. 예를 들어, 메일을 스캔한 후 성공적으로 보내면 3-4 자, 영어 또는 기타 언어가 더 길어질 수 있지만 1 자 위치만 필요한 대신 아이콘을 사용합니다.
알리페이의 오른쪽 위 모서리에 있는+는 더 많은 기능을 나타내며, 이 경우 문자 위치는 의미가 명확함을 나타냅니다. 위챗 다음의 유사한 음파 아이콘은 음성을 나타내며 직관적이고 이해하기 쉽다.
조각화 시대에 접어들면서 그림을 읽는 것은 거의 같은 리듬이다. 사진 내용은 단기간에 큰 영향력을 행사할 수 있다. 연구에 따르면 뇌는 그림 내용을 처리하는 속도가 텍스트 내용보다 60,000 배 빠르고, 인간의 뇌는 그래픽과 이미지에 대한 기억이 텍스트보다 훨씬 낫다는 연구결과가 나왔다. 그래서 브랜드를 홍보할 때, 사진 내용은 천 마디 말보다 한 장의 그림이 낫다고 할 수 있다. 아이콘을 사용하여 시각적 안내를 통해 정보를 신속하게 식별할 수 있습니다.
Tik Tok 과 ins 에 대한 서면 설명이 없습니다. 우리는 다섯 번째 라벨이 개인 센터라는 것을 알고 있습니다.
과학은 뇌의 시각 정보 처리와 관련된 뇌 영역이 다른 감각에 비해 우세하다는 것을 증명했다. 인간의 뇌는 문자에 대한 기억보다 이미지에 대한 기억이 훨씬 높다. 아이콘은 대부분 형상을 사용하며 대칭적이고 일관된 설계 목표로 설계됩니다. 고도로 집중된 특징으로 인해 아이콘이 더욱 간결하고 기억하기 쉽다.
아이콘의 최하위 논리: 선형 아이콘, 평면 아이콘, 선+평면 아이콘, 평면+평면 아이콘, 2.5D 아이콘, 준물체 아이콘. 인터넷상의 각종 아이콘은 모두 이러한 기초 위에서 시각적으로 구별되며, 아이콘을 설계할 때 생각해야 한다.
1, 제품 비주얼 스타일 포지셔닝 (산업 분야)
2, 아이콘 특정 응용 프로그램 인터페이스
제품의 사용자 인구는 무엇입니까?
먼저 스타일이 다른 아이콘 세트를 보세요. 위의 다른 APP 아이콘을 보면 업종, 장면, 사용자, 아이콘의 디자인과 표현이 다르다는 것을 알 수 있습니다. 그래서 디자인하기 전에, 당신이 표현해야 할 디자인 아이디어, 제품의 위치 등을 생각해야 합니다.
1, 해체 키워드 및 키워드 연결
수요 정보의 키워드를 해체하고 분산시켜 생활에서 흔히 볼 수 있는 것으로 만들어 그것이 대표하는 내적 의미를 풀어준다. 동의어, 동의어, 관련 모양이 있는 객체 또는 키워드와 관련된 연관입니다.
예를 들어 명예에 관해서는 트로피, 자격증, 금메달, 왕관 등을 바로 생각할 수 있다. 그런 다음 이 단어들의 연상을 통해 기질이 같은 사진을 찾아 감정판을 만들어 제품의 음조를 느낄 수 있도록 한 다음 모양과 색깔을 제품 아이콘의 주요 모양으로 추출할 수 있다.
2, 키워드 연관에 따라 도면을 출력합니다.
이전 단계에서 해체된 문자나 물체에 따라 간단한 기본 모양을 통해 생활에서 흔히 볼 수 있는 그래픽으로 변환됩니다. 일반적으로 사용되는 2-in-2 방법은 AI 펜 도구 (스케치 베지어 도구) 또는 부울 연산으로 그리는 것입니다.
3, 장면 출력에 따라
여기서 장면은 대중의 리뷰 레이블 바, 리본 (분류 영역), 조작 아이콘 등과 같은 실제 응용 프로그램 장면일 수 있으며, 사용자가 클릭하도록 안내해야 하므로 시각적으로 더 풍부합니다. 개인 센터, 분류 구역, 상세 페이지는 기능 안내에 더 중점을 두고 비교적 간단하며 2 차 사용 장면에 속하며 선형 아이콘이 더 많습니다.
일반적인 아이콘 문장 분석은 10 시에 주의해야 하지만, 이러한 불규칙성과 논리는 기억하기 어렵고, 일단 기억하면 잊기 쉽다. 이러한 요약은 실제로 재질 설계 또는 iOS 사양에서 비롯됩니다. 만약 네가 이 세부 사항들을 자세히 연구한다면, 아이콘을 만드는 것은 어렵지 않다.
아이콘 끝점은 직각과 모깍기로 구분됩니다. 아이콘 끝점을 통일하여 설계 과정에서 일관된 설계 언어를 유지해야 합니다.
구석
중앙 오목은 인간의 눈 생리 구조에서 망막에 가장 민감한 영역이기 때문에 인간의 눈은 다른 도면보다 둥근 사각형을 더 쉽게 식별할 수 있습니다. 직사각형의 가장자리를 처리하려면 뇌에 더 많은 "신경 이미징 도구" 가 필요합니다. 따라서 사람의 눈은 일반 직사각형보다 원에 더 가깝게 보이기 때문에 모깎기를 쉽게 처리할 수 있습니다.
생선 필레 자체의 둥근 부분은 둥글고 귀엽고 안전하며 더 친절한 느낌을 준다. (윌리엄 셰익스피어, 햄릿, 원어민, 원어민, 원어민, 원어민, 원어민, 원어민) 그래서 사교, 오락, 생방송, 음식 등 아이콘들은 모두 모깍기 아이콘을 사용한다.
직각은 날카로운 느낌을 준다. 아이콘 전체 디테일이 많아 금융 등 업무 속성이 강한 제품에 자주 등장한다. 예를 들면: 36Kr, 금융 상품 등.
균일 기울기 각도
내부 공간 비율의 불일치로 인해 아이콘의 시각적 초점이 일치하지 않을 수 있습니다. 아래 그림에서 왼쪽의 두 번째 아이콘은 약간 낮고 네 번째 아이콘은 무게 중심이 높습니다. 오른쪽에는 이전 PP 도우미의 탭 표시줄 아이콘이 있습니다. 아이콘 내부의 펀칭 영역 백분율은 동일하며 전체 시각적 조화가 균일합니다.
획 아이콘을 그릴 때는 항상 아이콘의 획 두께가 균일한지 주의해야 한다. @ 1x 디자인 모드에서 24px 를 메쉬 기준으로 사용하는 경우 일반적으로 사용되는 아이콘 두께는 1px, 1.5px, 2px, 3px, 입니다
가는 획은 더욱 정교한 시각감을 주고, 굵은 획은 상대적으로 거칠다. 현재의 유행 추세의 발전으로 굵은 획과 가는 획을 결합한 디자인 스타일이 자주 등장한다.
동일한 시각적 무게를 유지하는 것 외에도 픽셀 수준의 균일성을 위해 아이콘의 획 너비도 일치해야 합니다. 요소 사이의 최소 간격은 획 폭보다 크거나 같아야 합니다.
애플, 구글, IBM, 국내 알리 개미 디자인은 모두 관련 아이콘 그리드 사양을 발표했다. 구글의 물질 시스템 아이콘 그리드로 설명할게요. 24*24px 아이콘 크기에서 위, 아래, 왼쪽, 오른쪽 안전 여유는 2px 이고, 키 모양의 네 가지 기본 모양은 원 20*20px, 정사각형 18* 18px 입니다 중요한 모양의 규칙을 통해 아이콘의 크기와 위치를 통일하여 시각적 균형을 이루다.
픽셀 점 정렬
선명도 (완벽한 픽셀 정렬) 아이콘 왜곡을 방지하기 위해 x 축과 y 축 좌표를 정수로 설정하여 픽셀에서 아이콘 위치를 지정할 수 있습니다. 소프트웨어 AI 또는 스케치를 사용할 때 기본 그래픽을 그릴 때 소수점과 홀수를 사용하지 말고 짝수를 사용하십시오.
Icon 의 기본 사항을 알고 있습니다. icon 이 적합한지, 전체 제품에 적합한지 어떻게 판단할 수 있습니까? 우리는 좋은 아이콘이 무엇인지 알아야 한다. 검사 기준도 우리가 얻은 기준, 즉 식별성, 규범성, 전체적인 스타일, 브랜드감에 기반을 두고 있다.
사물의 가치를 판단하는 것은 그것이 무엇을 하는 데 쓰이고, 아이콘의 목적은 사용자가 정보를 이해하는 데 도움이 되는 것이다. (알버트 아인슈타인, 지식명언) 따라서 정확한 표의표현 (명확하고 정확한 정보 전달) 은 아이콘이 가장 중요하고 가치가 가장 낮다. 사용자가 읽을 수 없는 아이콘을 디자인하면 시각이 아름다워도 아무런 가치가 없다.
의미 인식: 시각적 언어가 서면 언어를 대체하는지 여부는 간단히 말해서, 사용자가 애매모호함을 일으키지 않고 아이콘을 이해할 수 있도록 하는 것입니다. 일반 레이블 막대 나침반은 발견을 나타내고 집은 홈페이지를 나타냅니다.
시각적 인식: 아이콘의 크기, 색상, 선 두께로 시각적 인식에 영향을 주며 특정 스타일에서 시각적 인식을 높입니다.
시각적 크기에서 아이콘의 일관성을 보장하기 위해 아이콘의 풍만도 (포지티브 및 네거티브 모양) 는 동일한 규칙과 세부 사항의 균일성을 따릅니다. 이곳의 4 점은 이전 드로잉 과정에서 이미 상세하게 쓰여졌다.
전체적인 스타일은 아이콘이 전달하는 성격이 앱의 기조와 일치하는지 주의해야 한다. 각 제품의 위치 때문에 전체 app 의 기조는 사람마다 다르다. 예를 들어 텐센트 애니메이션은 만화를 좋아하는 스타일이기 때문에 아이콘 디자인도 이런 성격을 표현해야 하고, 가능하면 만화 모깎기로 디자인해야 한다. 슬로건: 복잡한 세상에서 하나면 충분하다. 전체 APP 는 시동 아이콘부터 전체 음조까지 간결하고 깨끗하며, 절제된 색상 사용은 제품의 음조를 전달한다.
브랜드 감각은 위에서 언급한 브랜드 이념과 일치해 사용자에게 같은 느낌을 전달하는 것이다. 브랜드 색상을 흡수하고, 브랜드 요소를 추출하고, 브랜드 마스코트와 브랜드 그래픽을 사용하여 브랜드 유전자를 추출합니다. 우리는 브랜드 디자인의 관점에서 이해하고, 우리 제품의 독특한 브랜드 기질을 찾고, 적절한 수법을 선택해야 한다. 그런 다음 이러한 요소를 시각화하고 인터페이스 설계에 통합합니다. 다음 제품은 제품명에서 부팅 아이콘 디자인까지 고도로 통합되어 있습니다.
아이콘 가용성 테스트는 아이콘 검증에서 파생된 기본 규칙입니다.
승인 수준:
1. 사용자가 아이콘의 의미를 이해할 수 있습니까?
2. 사용자에게 익숙한 아이콘입니까?
3. 다른 아이콘과 충돌이 있습니까?
4. 당신은 5 초 원칙을 통과할 수 있습니까?
5. 아이콘의 확장성은 어떻습니까?
6. 텍스트 라벨을 추가해야 합니까?
디자인이 통일되어 있나요?
1. 비주얼 언어 통일인가요?
아이콘의 설계 복잡성이 통일되어 있습니까?
3. 전체적인 디자인이 시각시스템에서 조화되고 통일되고 고도로 집중되어 있습니까?
4. 아이콘 전체 배색이 통일되어 있습니까?
브랜드 정보:
아이콘이 독특합니까, 브랜드 정보를 전달할 수 있습니까?
일반적으로 JPG, PNG, GIF 및 SVG 의 네 가지 전달 형식이 있습니다. 여기서 JPG, PNG, GIF 는 모두 비트맵이며 그림 자체의 해상도에 따라 유연하게 수정할 수 없습니다. SVG 는 무손실 크기 조절을 지원하는 벡터 포맷입니다.
SVG 전에 HD 장치에 맞게 다양한 배수의 아이콘을 잘라야 합니다. 하지만 현재 개발 소프트웨어와 플러그인에는 블루 석호와 같은 여러 장의 사진을 자르는 자체 기능이 있습니다.
JPG: 호환성, 배경 포함, 확대/축소 지원 안 함.
PNG: 투명 형식이 지원되지만 확대/축소는 지원되지 않습니다. 아이콘 주위의 투명 영역 크기를 확인합니다.
GIF: 간단한 동적 아이콘이 사용되었습니다. 배경이 투명할 때 가장자리가 들쭉날쭉해서 풍부한 색상을 지원할 수 없습니다.
SVG: 무손실 배율 조정 벡터 그래픽, 작은 크기, 단색 모드에서 색상 개발 및 자체 수정을 지원하며 스타일 매개변수를 수정할 수 있습니다.
또 다른 배치 방법은 SVG 형식의 아이콘을 iconfont 와 같은 웹 사이트에 업로드하고 아이콘 배치를 완료하는 것입니다. 지적해야 할 것은 다음과 같습니다.
1, SVG 는 그라데이션 색상 채우기를 지원하지 않습니다.
2.SVG 는 획을 지원하지 않으므로 획을 닫힌 이미지로 변환해야 합니다.
3. 아이콘 크기가 같으면 아이콘 아래에 같은 크기의 투명 사각형을 추가하고 아이콘과 함께 업로드를 익스포트해야 합니다.
아이콘 제작에 대한 Iconfont 요구 사항은 비교적 엄격하므로 업로드 시 자신의 아이콘이 요구 사항을 충족하는지 확인해야 합니다. 상호 연결
데이터 소스
UI 디자이너는 아이콘 디자인을 잘하고 싶습니까? 아이콘의 역사를 아십니까?
영상학의 약사
아이콘 설계 안내서 (icon design guide)
《아이돌 유토피아》
인터페이스 아이콘 세트 최종 안내서
Svg 로고 라이브러리 및 아이콘 글꼴과의 비교