Bar Button Icons
iOS는 Refresh, Share, Add 그리고 Favorite 과 같은 표준 바-버튼 아이콘들을 수 많이 제공한다. 최대한 그 버튼과 아이콘들을 당신의 앱에서 표준 테스크를 나타내기 위해 사용하라. (자세한 사항은 Toolbar and Navigation Bar Buttons과 Tab Bar Icons를 보라)
표준 아이콘에 의해 나타낼 수 없는 테스크나 모드를 가지고 있다면 - 또는 표준 아이콘이 당신 앱의 스타일에 적합하지 않다면 - 당신만의 바 버튼 아이템을 디자인 할 수 있다. 하이 레벨에서, 다음과 같은 목표로 아이콘을 디자인한다 :
단순하고 간결한. 너무 많은 디테일은 앱이 단정하지 못해 보이거나 (sloppy: 질척거려) 이해할 수 없게 보인다.
시스템이 제공하는 아이콘들과 너무 쉽게 착각하지 않도록 한다. 사용자들은 한 눈에 표준 아이콘과 당신의 커스텀 아이콘을 구별할 수 있어야 한다.
선뜻 이해 가능하고 폭 넓게 받아들여져야 한다. 대부분의 사용자들이 정확하게 해석하고 어떤 사용자도 공격성을 찾을 수 없는 심볼을 만들기 위해 노력하라.
커스텀 아이콘들만 사용하든, 커스텀과 표준을 섞어 사용하든, 당신 앱의 모든 아이콘들은 사이즈, 디테일 수준, 그리고 시각적인 무게로 볼 때 같은 가족에 속한 것 처럼 보여야 한다.
예를 들어, 아래 iOS 바 아이콘 가족을 보고, 사이즈, 디테일 그리고 무게에 있어서의 유사함이 얼마나 조화로움을 주는지 느껴보라.
일관성(coherent)있는 아이콘의 가족을 만들어 내려면, 일관성(consistency)이 핵심이다 : 가능한, 각각의 아이콘들은 같은 원근감과 동일한 스트록 무게를 가져야 한다. 모든 아이콘이 일관된 인식 사이즈를 가지도록 하기 위해, 어떤 아이콘들은 실제 사이즈에서는 좀 다르게 만들어야 한다. 예를 들어, 아래에 보이는 시스템이 제공한 아이콘 세트를 보면, 모두 같다고 인식되는 크기를 가지지만, Voicemail과 Favorites 아이콘은 다른 세개의 아이콘보다 살짝 크다.
커스텀 탭 바 아이콘을 디자인한다면, 두가지 버전을 제공해야 한다 - 하나는 선택된 모양이며 다른 하나는 선택되지 않은 모양이다. 선택된 모양은 주로 선택되지 않은 모양을 채운 버전이지만, 이 접근법에도 조금의 디자인 변형을 필요로 한다.
내부적인 디테일을 가진 아이콘의 채움-버전을 만드려면 (라디오 아이콘처럼) 그 디테일을 반전해서 그 특징을 선택된 버전에서도 그대로 유지하도록 한다. 키패드 아이콘 또한 내부적인 디테일이 있지만, 선택된 버전에서 배경이 채워지고 원이 흰색 아웃라인을 가지면 인식하기가 어려워진다.
이따금씩, 선택되었을 때 좋게 보이려면 약간의 디자인 변경이 필요하다. 예를 들어, 타이머와 팟 캐스트 아이콘은 열린 공간을 포함하기 때문에, 선택된 버전은 스트록을 조금 압축해서 원형 울타리안에 맞춘다.
만약 아이콘이 채워졌을 때 인식하기 어려워진다면, 좋은 대안은 선택된 버전을 위해 굵은 스트로크를 사용하는 것이다. 예를 들어, 보이스메일과 Reading List 아이콘은 선택되지 않은 버전에서는 2-픽셀 스트로크로 그려졌지만, 선택된 버전에서는 4-픽셀 스트로크로 그려졌다.
가끔, 아이콘의 모양이 디테일을 가지고 있어서 스트로크한 아웃라인으로 좋게 보이지 않는 경우가 있다. 이런 경우 - Music과 Artists아이콘이 이렇다- 양쪽 버전에 모두 채워진 모양의 아이콘을 사용할 수 있다. 사용자들은 선택된 모양과 선택되지 않은 모양을 쉽게 구별할 수 있는데, 선택된 모양이 더 어둡고 틴트를 가지기 때문이다.
툴바나 네비게이션 바, 탭 바를 위해 당신이 만드는 커스텀 아이콘은 템플리트 이미지로 알려져 있다. 왜냐하면, iOS가 앱이 동작할 때 당신이 보는 아이콘을 만들기 위한 마스크로 사용하기 때문이다. 만약 풀-컬러의 템플리트 이미지를 만든다면, iOS는 색상을 무시한다.
커스텀 바 아이콘을 만들기 위해서는 다음 가이드라인을 따른다 :
적당한 알파 투명도를 가진 순수한 흰색을 사용
그림자를 주지 않는다.
앤티 앨리어싱을 사용한다.
iOS 7의 아이콘 가족의 일부처럼 보이는 바 아이콘을 만들고 싶다면, 아주 얇은 스트로크를 이용해 그려라. 구체적으로, 2-픽셀 스트록 (고해상도)이 디테일한 아이콘에 좋고, 덜 디테일한 아이콘에는 3픽셀이 좋다.
아이콘의 시각적인 스타일에 상관없이, 툴바나 네비게이션 바 아이콘을 다음 크기로 만들어라 :
44 x 44 픽셀 정도
22 x 22 픽셀 정도 (표준 해상도)
아이콘의 시각적인 스타일에 상관없이, 탭 바 아이콘을 다음 크기로 만들어라 :
50 x 50 픽셀 정도 (최대 96 x 64 픽셀)
25 x 25 픽셀 정도 (최대 48 x 32 픽셀) 표준 해상도
커스텀 탭 바 아이콘에 텍스트를 포함시키지 마라. 대신, 탭 바 아이템 API를 이용해 각 탭의 타이틀을 설정하라 (예를 들어, initWithTitle:image:tag:
). 타이틀의 자동 레이아웃을 조정할 필요가 있다면, setTitlePositionAdjustment:
와 같은 타이틀 조정 API들을 사용할 수 있다.
Copyright © 2014 Apple Inc. All rights reserved. Terms of Use | Privacy Policy | Updated: 2014-03-10