안녕하세요 @yimajo 입니다.
이 기사에서는 iOS에 설치된 Apple에서 만든 앱의 UI에 대해 살펴보고 앱 개발에 도움이 되는 것을 목표로 합니다. Apple의 iOS 휴먼 인터페이스 가이드라인을 자주 인용하므로 생략하고 Apple HIG라고 부릅니다.

전제

Apple HIG에 준거하고 있는 내용에 대해서는 링크하고 있습니다만, 기본적으로는 Apple제 앱의 공통점으로부터 HIG에 쓰여지지 않은 UI의 일관성을 바탕으로 고찰하고 있습니다. 만약 다른 패턴이 있다면 코멘트를 주시면 감사하겠습니다.

네비게이션 바에 놓는 세그멘테이션 컨트롤에 대해서

Apple HIG보다 일반적으로 네비게이션 바는 타이틀, 백 버튼, 표시 내용을 컨트롤하는 UI를 포함한다

다른 컨트롤을 가득 채우는 것을 피한다

Apple HIG에서 세그먼트 화 컨트롤에서 각 세그먼트는 등폭

Apple HIG보다, 세그먼테이션 컨트롤은 폭이 넓으면 탭하기 쉽다

세그먼트 수는 5 이하이어야 함

구체적인 예로서, 다음 이미지는 iOS10 iTunes Store.app의 "뮤직"화면

네비게이션 바에 들어가지 않는 세그멘테이션 컨트롤을 네비게이션 바를 아래로 연장해 배치

다음 이미지는 마찬가지로 iOS10의 iTunes Store.app 메뉴를 탭한 화면



비교의 그다지 좋지 않은 예로서, 다음의 이미지도 마찬가지로 iOS10 iTunes Store.app의 「톤」화면. 벨소리를 구입하는 화면.

장르의 위치가 조금 전의 「뮤직」화면과 달리 통일감이 없다

타이틀에 「벨소리/통지음」이라고 표시하기 위해서 세그먼테이션 컨트롤을 아래에 두고 있다

장르가 왼쪽이고 탭 막대가 "착신/알림 소리"라면 세그먼트 화 컨트롤을 연장하지 않고 그대로 둘 수 있습니다.

그렇게 하지 않는 것은 통상의 음악과 벨소리가 분명히 다르기 때문에 구입시에 주의를 끌도록 하고 있는 것일까

세그먼테이션 컨트롤의 배경색을 변경한다면

세그멘테이션 컨트롤의 배경색을 변경한다면 구별할 수 있게 한다

Apple HIG에서 배경색을 변경하면 잘 보이고 깔끔하게 나란히 하도록

Apple에서 만든 앱에서 세그멘테이션 컨트롤을 사용자 지정하는 예제가 없으므로 tumblr의 '메시지'화면에서 메시지가 0개입니다.



나쁜 예 비교로 국내 앱에서

네비게이션 바에 이미 「뉴스/운영으로부터」라고 표시하고 있다

그럼에도 불구하고 네비게이션 바를 확장하고 '뉴스'및 '운영에서'세그먼트 이름이 중복됩니다

어느 쪽이 선택되고 있는지를 주의하지 않으면 판별하기 힘들다

정보가 0개인 경우 특히 무엇이 무엇인지 모른다

참고

iOS 앱 개발을 위해 휴먼 인터페이스 가이드라인을 참고하면서 Apple제 앱을 관찰한다(대화형 요소편)