HIG는 모든 Apple 플랫폼에서 탁월한 경험을 제공할 수 있도록 도움을 주는 지침과 모범 사례를 포함합니다.
-by. developer.apple.com
HIG를 알아야 하는 이유는..!
..
사용자에게 익숙하고 편리한 경험을 제공하고
애플 생태계에 맞는 고품질 앱을 만들며
앱스토어 심사를 원활히 통과하고
개발.디자인 협업과 의사결정을 효율적으로 하기 위함이다.
근데 HIG 너무 많자나요...
이거 다 언제봐요
일단 내가 당장 필요한거같은거만 골라서 정리해볼게욥
왜??
내가 볼거니까.
일단 시작하기에 있는
iOS용으로 디자인하기 부터 봅시다
...
어.. 음.. 이걸 어떻게 정리해?
모범 사례만 좀 써볼게요
탁월한 iPhone 경험을 제공하려면 사람들이 가장 중요하게 생각하는 플랫폼 및 기기의 기능이 통합되어야 합니다.
iOS와 잘 어울리도록 디자인하려면 다음과 같은 방법을 우선시하여 이러한 기능을 포함하십시오.
- 화면상의 제어기 수를 제한하고, 최소한의 상호작용으로 추가 세부사항 및 동작을 찾을 수 있도록 하여 사람들이 주요 작업과 콘텐츠에 집중할 수 있도록 하십시오.
- 기기 방향, 다크 모드, 다이나믹 타입과 같은 화면 모양 변경 사항을 매끄럽게 적용하여 사람들이 자신에게 가장 적합한 구성을 선택할 수 있도록 하십시오.
- 사람들이 일반적으로 기기를 잡는 방식과 부합하는 상호작용을 지원하십시오. 예를 들어, 대부분의 사람들ㅇ느 디스플레이의 중간 또는 하단 영역에 위치한 제어기가 사용하기 더 쉽고 편하다고 느낍니다. 따라서 사람들이 쓸어넘기기 동작으로 뒤로 이동하거나, 목록 행에서 동작을 실행할 수 있도록 하는 것은 매우 중요합니다.
- 사람들로부터 권한을 받아, 데이터 입력을 요청하지 않으면서 경험을 향상하는 방식으로 플랫폼 기능을 통해 사용할 수 있는 정보를 통합하십시오. 예를 들어, 결제를 수락하거나, 생체 인증을 통해 보안을 제공하거나, 기기의 위치를 사용하는 기능을 제공할 수 있습니다.
앱 아이콘
고유하고 기억하기 쉬운 아이콘은 앱 또는 게임의 목적과 성격을 전달하고 App Store 및 기기에서 상품을 한눈에 알아볼 수 있도록 도와줍니다.
https://developer.apple.com/kr/design/human-interface-guidelines/app-icons
앱 아이콘 | Apple Developer Documentation
고유하고 기억하기 쉬운 아이콘은 앱 또는 게임의 목적과 성격을 전달하고 App Store 및 기기에서 상품을 한눈에 알아볼 수 있도록 도와줍니다.
developer.apple.com
간결한 아이콘을 만들자
너무 많은 세부사항을 추가하지 말고 주요 이미지를 강조하는 간결한 배경을 우선적으로 사용하자
제공하려는 경험 또는 브랜드의 필수적인 부분일 경우에만 텍스트를 포함
사진보다 그래픽 이미지를 우선 사용하고 아이콘에 UI 요소를 반복해서 사용하지 말기
아이콘을 사각형 이미지로 디자인
밝은 앱 아이콘을 어두운 아이콘의 기초로 사용하십시오. 기본 디자인을 반영하는 보색을 선택하고, 과도하게 밝은 이미지는 사용하지 마십시오.
앱 아이콘 크기
iOS 및 iPadOS 앱 아이콘 크기
App Store의 경우 1024x1024px 값의 앱 아이콘을 생성하십시오.
시스템이 자동으로 1024x1024px 앱 아이콘의 크기를 축소하여 다른 모든 버전의 크기를 생성하도록 할 수 있다.
| @2x(픽셀) | @3x(픽셀), iPhone 전용 | 용도 |
| 120x120 | 180x180 | iPhone의 홈 화면 |
| 167x167 | – | iPad Pro의 홈 화면 |
| 152x152 | – | iPad 및 iPad mini의 홈 화면 |
| 80x80 | 120x120 | iPhone, iPad Pro, iPad 및 iPad mini의 Spotlight |
| 58x58 | 87x87 | iPhone, iPad Pro, iPad 및 iPad mini의 설정 |
| 76x76 | 114x114 | iPhone, iPad Pro, iPad 및 iPad mini의 알림 |
색상
색상을 적절하게 사용하면 커뮤니케이션을 향상하고, 브랜드를 드러내고, 시각적 일관성을 제공하고, 상태 및 피드백을 전달하고, 정보를 이해하도록 도울 수 있습니다.
https://developer.apple.com/kr/design/human-interface-guidelines/color
색상 | Apple Developer Documentation
색상을 적절하게 사용하면 커뮤니케이션을 향상하고, 브랜드를 드러내고, 시각적 일관성을 제공하고, 상태 및 피드백을 전달하고, 정보를 이해하도록 도울 수 있습니다.
developer.apple.com
게임이 아닌 앱에서는 색상을 절제해서 사용
동일한 색상으로 서로 다른 항목을 나타내지 마십시오
앱의 색상이 라이트 모드 및 다크 모드에서 모두 잘 표시되도록 하십시오.
앱에서 콘텐츠를 인지하기 어렵게 만드는 색상을 사용하지 마십시오.
앱에 시스템 색상 값을 하드코딩하지 마십시오. Color와 같은 API를 사용하여 시스템 색상을 적용하십시오.
버튼
버튼은 즉각적인 동작을 시작합니다.
https://developer.apple.com/kr/design/human-interface-guidelines/buttons
버튼 | Apple Developer Documentation
버튼은 즉각적인 동작을 시작합니다.
developer.apple.com
다양하고 많은 부분을 사용자화할 수 있는 버튼은 사람들에게 앱에서 작업을 수행할 수 있는 간단하고 친숙한 방법을 제공합니다. 일반적으로 버튼은 해당 기능을 명확하게 전달하기 위해 다음과 같은 세 개의 속성이 결합됩니다.
- 스타일
크기, 색상 및 모양에 따른 시각적 스타일 - 콘텐츠
버튼이 해당 목적을 전달하기 위해 표시하는 기호(또는 인터페이스 아이콘), 텍스트 레이블 또는 둘 다. - 역할
버튼의 의미를 식별하고 해당 모양에 영향을 미칠 수 있는 시스템 정의 역할
버튼이 즉시 인식할 수 있고 이해하기 쉬울 때 앱이 직관적이고 잘 설계되었다고 느껴집니다.
버튼을 사람들이 사용하기 쉽게 만드십시오. 사람들이 주변 구성요소 및 콘텐츠와 버튼을 시각적으로 구별할 수 있도록 버튼 주위에 충분한 공간을 두는 것이 중요합니다.
일반적인 규칙은 사람들이 버튼을 쉽게 선택하는 것을 보장하기 위해 버튼에 최소 44x44pt의 히트 영역이 필요하다는 것입니다.
각 버튼이 해당 목적을 명확하게 전달하는지 확인하십시오. 버튼에는 항상 해당 버튼의 기능을 사람들이 예측하는 데 도움이 되는 텍스트 레이블 또는 기호(또는 인터페이스 아이콘), 때때로 두 개의 조합이 포함됩니다.
일반적으로 보기에서 실행 가능성이 가장 높은 동작의 경우 눈에 보이는 배경이 있는 버튼을 사용하십시오. 채우기 또는 배경 모양이 있는 버튼은 시각적으로 가장 눈에 띌 수 있어 실행 가능성이 가장 높은 동작을 사람들이 빠르게 식별하도록 도와줍니다.
시각적으로 눈에 잘 띄는 버튼의 개수를 보기당 한 개 또는 두 개로 유지하는 것을 고려하십시오. 사람들에게 눈에 띄는 버튼을 너무 많이 제공하면 인지적 부하가 증가하여 선택하기 전에 옵션을 고려하는 데 더 많은 시간이 걸립니다.
여러 옵션 중에 선호하는 선택을 시각적으로 구별하려면 크기가 아닌 스타일을 사용하십시오. 동일한 크기의 버튼을 사용하여 두 개 이상의 옵션을 제공하면 옵션이 일관적인 선택 항목 세트를 형성함을 나타냅니다. 선택 항목 세트에서 선호하거나 실행 가능성이 가장 높은 옵션을 하이라이트하려는 경우 해당 옵션은 더 눈에 띄는 버튼 스타일을 사용하고 나머지 버튼은 덜 눈에 띄는 스타일을 사용하십시오.
짧은 레이블이 아이콘보다 더 명확하게 내용을 전달할 때 텍스트를 사용하는 것을 고려하십시오.
유용한 세부사항을 제공하는 경우에만 레이블 밑에 추가 텍스트를 포함하십시오.
아따 버튼 쓸거 많다잉.. 길다잉..
팝업 버튼, 풀 다운 버튼, 동작 시트 다음에 정리할거임
..
하.. 경고도 써야할거같은데..
텍스트필드... 토글...