IOS 설계 사양 시리즈 *** 10 편. 이것은 여덟 번째 문장, IconsandImages 를 소개합니다.
첫 번째는 imagesizeandreresolution (imagesizeandreresolution) 입니다
IOS 화면에 내용을 배치하는 좌표계는 모니터 픽셀에 매핑되는 포인트 단위의 측정을 기준으로 합니다.
표준 해상도 모니터의 인치당 픽셀은 1: 1 (또는 @ 1X) 이며, 그 중 한 픽셀은 한 점과 같습니다. 고해상도 모니터는 인치당 픽셀 수가 더 많으며 2.0 또는 3.0 의 배율 요소 (@2x 및 @3x 라고 함) 를 제공합니다. 따라서 고해상도 디스플레이에는 더 많은 픽셀이 필요한 이미지가 표시됩니다.
예를 들어 100px 의 표준 해상도 (@ 1x) 이미지가 있다고 가정합니다. 그림의 @2x 버전은 200px×200px 이고 @3x 버전은 300px×300px 입니다. 지원되는 모든 장치에 모든 아이콘/그림의 고해상도 이미지를 제공합니다.
장치에 따라 각 그림의 픽셀 수에 특정 축척 비율을 곱하여 이 작업을 수행할 수 있습니다.
고해상도 작품을 디자인하다
1) 8 픽셀 x 8 픽셀 격자를 사용합니다.
메쉬는 선을 선명하게 유지하고, 모든 크기의 내용을 최대한 선명하게 하며, 수정도와 각진 부분을 줄일 수 있습니다. 이미지 경계를 격자에 맞춰 축소할 때 발생할 수 있는 반픽셀 및 흐림 디테일을 최소화합니다.
2) 작품을 적절한 형식으로 만든다.
일반적으로 PNG 파일의 비트맵/래스터 아트웍은 한 줄씩 스캔됩니다.
PNG 는 투명성을 지원합니다. 무손실 상태이기 때문에 가공물을 압축하면 중요한 세부 사항을 흐리게 하거나 색상을 변경하지 않습니다. 어두운 영역, 텍스처, 밝은 영역과 같은 효과가 필요한 복잡한 예술 작품에 적합합니다.
사진용 JPEG. 압축 알고리즘은 일반적으로 무손실 형식보다 작은 크기를 생성하며 사진에서 가공물을 구분하기가 어렵습니다. 그러나 실제 응용 프로그램 아이콘은 PNG 가 가장 좋습니다. 고해상도 비율이 필요한 글리프 및 기타 평면 벡터 아트웍의 경우 PDF 를 사용합니다.
3) 모든 24 비트 색상이 필요하지 않은 PNG 그래픽의 경우 8 비트 팔레트를 사용합니다.
8 비트 팔레트를 사용하면 이미지 품질을 저하시키지 않고 파일 크기를 줄일 수 있습니다. 이 팔레트는 사진에 적합하지 않습니다.
4) JPEG 파일을 최적화하여 크기와 품질의 균형을 찾습니다.
대부분의 JPEG 파일은 최종 이미지의 품질을 크게 떨어뜨리지 않고 압축할 수 있습니다. 소량의 압축이라도 많은 디스크 공간을 절약할 수 있습니다. 각 이미지에 대해 압축 설정 실험을 수행하여 허용 가능한 최상의 값을 찾습니다.
5) 이미지 및 아이콘에 대체 텍스트 레이블을 제공합니다.
대체 텍스트 레이블은 화면에 표시되지 않지만 VoiceOver 가 화면 내용을 사운드로 설명할 수 있도록 하여 시각 장애자가 쉽게 탐색할 수 있도록 합니다.
둘째, 응용 프로그램 아이콘 (AppIcon)
모든 앱은 앱스토어에서 눈에 띄고 메인 화면에서 눈에 띄는 아름다운 기억에 남는 아이콘이 필요하다. (윌리엄 셰익스피어, 앱스토어, 앱스토어, 앱스토어, 앱스토어, 앱스토어, 앱스토어, 앱스토어, 앱스토어) 너의 아이콘은 너의 신청 목적을 처음으로 전달하는 것이다. 또한 설정 및 검색 결과와 같은 시스템 전체에도 나타납니다.
1) 포옹은 간단합니다.
응용 프로그램의 본질을 파악할 수 있는 요소를 찾아 간단하고 독특한 모양으로 표현합니다. 디테일을 꼼꼼히 보충하다. 아이콘의 내용이나 모양이 너무 복잡한 경우 특히 작은 크기의 경우 세부 사항을 구분하기가 어려울 수 있습니다.
2) 초점을 제공합니다.
중심점이 하나뿐인 아이콘을 설계하면 즉시 주의를 끌고 응용 프로그램을 명확하게 식별할 수 있습니다.
3) 인식 가능한 아이콘을 디자인합니다.
사람들은 분석하지 않고도 아이콘의 의미를 알 수 있다. 예를 들어, 메일 응용 프로그램 아이콘은 봉투를 사용하며 일반적으로 메시지와 연결됩니다. 시간을 내어 아름답고 매력적인 추상적인 아이콘을 디자인하고, 예술적인 방식으로 응용 프로그램의 목적을 나타낸다. (조지 버나드 쇼, 예술명언)
4) 배경을 단순하게 유지하고 투명성을 피하십시오.
너의 아이콘이 불투명한지 확인하고 배경을 어지럽히지 말아라. 근처에 있는 다른 응용 프로그램 아이콘에 영향을 주지 않도록 간단한 배경을 제공합니다. 전체 아이콘을 채울 필요가 없습니다.
5) 필요한 로고 또는 로고의 일부에만 텍스트를 사용합니다.
응용 프로그램 이름이 기본 화면 아이콘 아래에 표시됩니다. 불필요한 단어로 이름을 반복하거나 "보기" 나 "놀이" 와 같이 앱이 무엇을 해야 하는지 다른 사람에게 말하지 마세요. 디자인에 텍스트가 포함되어 있는 경우 응용 프로그램에서 제공하는 실제 내용과 관련된 텍스트를 강조하십시오.
6) 사진, 스크린 샷 또는 인터페이스 요소를 포함하지 마십시오.
작은 사이즈의 사진은 디테일을 보기 어려울 수 있습니다. 응용 프로그램 아이콘에는 스크린 샷이 너무 복잡하여 응용 프로그램의 목적을 전달하는 데 도움이 되지 않습니다. 아이콘의 인터페이스 요소는 오해와 혼동을 일으킬 수 있습니다.
7) 애플 하드웨어 제품의 복제품은 사용하지 마십시오.
Apple 제품은 저작권으로 보호되며 아이콘이나 이미지에 복사할 수 없습니다. 일반적으로 디스플레이 장치의 복사본은 피해야 합니다. 하드웨어 설계가 자주 변경되어 아이콘이 오래된 것처럼 보일 수 있기 때문입니다.
8) 전체 인터페이스에 응용 프로그램 아이콘을 두지 마십시오.
응용 프로그램 전체에서 다양한 용도의 아이콘을 보는 것은 혼란스러울 수 있습니다. 대신 병합 아이콘의 색상 구성표를 고려해 보십시오. 색깔을 보다.
9) 다른 벽지의 아이콘을 테스트합니다.
사람들이 메인 화면에 어떤 벽지를 선택할지 예측할 수 없으므로 연한 색이나 어두운 색만을 위해 응용 프로그램을 테스트하지 마십시오. 다른 사진의 모양을 확인하십시오. 동적 배경이 있는 실제 장치에서 장치를 사용하는 경우 동적 배경은 장치가 이동함에 따라 시야각을 변경합니다.
10) 아이콘 정사각형을 유지합니다.
마스크가 적용되어 아이콘의 모서리가 자동으로 둥글게 됩니다.
1 ..? 응용 프로그램 아이콘 속성
모든 응용 프로그램 아이콘은 다음 사양을 준수해야 합니다.
2. 응용 프로그램 아이콘 크기
응용 프로그램이 설치되면 각 응용 프로그램은 주 화면과 전체 시스템에 사용되는 작은 아이콘과 AppStore 에 표시되는 큰 아이콘을 제공해야 합니다.
장치마다 크기가 다른 아이콘을 제공합니다. 응용 프로그램 아이콘이 지원하는 모든 장치에서 잘 보이는지 확인하십시오. AppStore 아이콘을 작은 아이콘과 페어링합니다. 앱스토어 아이콘의 사용법과 작은 아이콘은 다르지만 여전히 응용 프로그램 아이콘입니다. 시각적 효과가 적용되지 않기 때문에 더 풍부하고 상세할 수 있지만 일반적으로 더 작은 버전의 모양과 일치해야 합니다.
3.Spotlight 검색, 설정 및 알림 아이콘
각 응용 프로그램은 응용 프로그램 이름이 Spotlight 검색의 키워드와 일치할 때 iOS 가 표시할 수 있는 작은 아이콘도 제공해야 합니다.
또한 시스템 내장 "설정" APP 에 표시할 수 있는 작은 아이콘을 제공하고 알림 기능을 지원하는 APP 는 알림에 작은 아이콘을 제공합니다. 모든 아이콘이 응용 프로그램을 명확하게 식별할 수 있는지 확인하십시오. 이상적으로는 응용 프로그램 아이콘과 일치해야 합니다.
이러한 아이콘을 제공하지 않으면 iOS 가 주 응용 프로그램 아이콘을 축소하여 해당 위치에 표시할 수 있습니다.
설정 아이콘에 오버레이 또는 테두리를 추가하지 마십시오. IOS 는 모든 아이콘에 1 스케치 가장자리를 자동으로 추가하여 설정된 흰색 배경에서 더욱 친근하게 보입니다.
4. 사용자 선택적 애플리케이션 아이콘
일부 app 의 경우 사용자 정의는 사용자가 윙윙거리는 소리를 내고 사용자 경험을 향상시킬 수 있는 기능입니다. 애플리케이션에 가치를 제공할 수 있다면 애플리케이션에 포함된 미리 정의된 아이콘 중 하나를 백업 애플리케이션 아이콘으로 선택할 수 있습니다.
예를 들어 스포츠 앱은 다른 팀의 아이콘을 제공하거나 음영 패턴이 있는 앱이 해당 음영 아이콘을 제공할 수 있습니다.
응용 프로그램 아이콘은 사용자의 요청에 따라서만 변경할 수 있으며, 이러한 변경 사항에 대한 확인은 항상 사용자에게 제공됩니다.
다양한 크기와 시각적 일관성을 제공하는 대체 아이콘입니다. 기본 응용 프로그램 아이콘과 마찬가지로 각 대기 아이콘은 크기가 다른 관련 이미지 세트로 제공됩니다. 사용자가 대체 아이콘을 선택하면 해당 크기의 아이콘이 주 화면, 스포트라이트 및 시스템과 같은 다른 위치의 아이콘을 대체합니다.
대기 아이콘이 시스템 전체에서 균일하게 표시되도록 하기 위해 기본 화면에 한 버전의 아이콘이 표시되지 않도록 하고 설정에서는 완전히 다른 버전의 아이콘이 표시됩니다. 예를 들어 기본 응용 프로그램 아이콘과 크기가 같은 아이콘 (AppStore 아이콘 제외) 을 제공합니다.
셋. System cons)IOs 12+02 및 이전 버전.
IOS 13 이상에서 SF 기호는 APP 의 작업과 패턴을 나타내는 데 더 많이 사용됩니다. 응용 프로그램이 iOS 12 또는 이전 버전에서 실행 중인 경우 다음 지침을 따르십시오. 이 시스템은 다양한 사용 사례에서 일반적인 작업 및 컨텐츠 유형을 나타내는 내장 아이콘을 제공합니다.
IOS 12 및 이전 버전을 실행하는 어플리케이션에서는 이러한 내장 아이콘을 가능한 한 많이 사용하는 것이 좋습니다. 이는 이미 사용자에게 친숙하기 때문입니다.
예상대로 시스템 아이콘을 사용합니다. 각 시스템에서 제공하는 이미지는 구체적이고 보편적인 의미를 가지고 있다. 사용자를 혼동하지 않도록 각 이미지는 해당 의미와 제안된 용도에 따라 사용해야 합니다. 아이콘에 텍스트 레이블을 제공합니다. 대체 텍스트 레이블은 화면에 표시되지 않지만 내레이터가 화면의 내용을 시각적으로 설명할 수 있도록 하여 시각 장애자가 쉽게 탐색할 수 있도록 합니다. 시스템 제공 아이콘에서 요구 사항에 맞는 아이콘을 찾을 수 없는 경우 사용자 정의 아이콘을 디자인합니다. 시스템에서 제공하는 아이콘을 남용하는 대신 직접 설비를 설계하는 것이 낫다.
1. 탐색 막대와 도구 모음 아이콘
탐색 막대와 도구 모음에서 다음 아이콘을 사용합니다.
참고: 아이콘 대신 텍스트를 사용하여 탐색 모음이나 도구 모음의 항목을 나타낼 수 있습니다. 예를 들어 캘린더는 도구 모음에서 오늘, 캘린더 및 받은 편지함을 사용합니다.
고정 간격 요소를 사용하여 탐색 아이콘과 도구막대 아이콘 사이에 채우기를 제공할 수도 있습니다.
2. 탭 표시줄 아이콘
탭 모음에서 다음 아이콘을 사용합니다.
3. 기본 화면 빠른 작업 아이콘
기본 화면의 빠른 작업 메뉴에서 다음 아이콘을 사용합니다.