iOS Developer Library

Developer

iOS Human Interface Guidelines

iBooks

iOS를 위한 디자인

iOS는 아래와 같은 테마를 가진다 :

  • Deference. UI는 사용자가 콘텐트를 이해하고 상호작용하는 것을 도와야하지, 경쟁하려 해선 안된다.

  • Clarity. 글자는 모든 크기에서 가독성이 있어야 하며 아이콘들은 정확하고 명료해야 한다. 장식은 섬세하고 적당한 곳에 쓰여야 하며, 기능에 날카롭게 포커스되어 디자인 되어야 한다.

  • Depth. 시각적 계층과 사실적인 움직임이 활력을 전해주며, 사용자의 즐거움과 이해도를 높인다.

image: ../Art/weather_app_7_2x.png

새로 디자인하거나 기존 앱을 재 디자인 하는 경우 애플이 내장 앱을 재 디자인 한 사례를 참고하라 :

  • 먼저 UI를 벗겨내서 앱의 핵심기능이 드러나도록 한 뒤 각각의 적절함을 재확인하라.

  • 그후,iOS 테마를 사용해 UI와 UX를 만든다. 디테일과 장식들을 다시 가져오되 불필요한 부분이 없도록 주의를 기울여라.

  • 마지막으로, 사용가 가능한 많이 즐길 수 있도록 다양한 장치 및 모드에 적용되는지 UI를 확인하라.

이러한 과정을 통해, 선례를 부정할 준비를 하고, 가정에 대해 질문하고, 콘텐츠로의 포커스와 기능성이 모든 디자인 결정에 대한 원동력이 되게 하라.

Defer to Content

간결하지만 아름다운 UI와 유동적인 움직임은 iOS 경험의 하일라이트이고, 사용자 콘텐트가 그 중심에 있다.

당신의 디자인이 기능성을 높이고 콘텐트를 우선시하도록 하는 방법들이 있다.

image: ../Art/weather_focus_2x.png

전체 스크린을 활용하라. 인셋과 프레임의 사용을 다시 생각하라. 그 대신 콘텐트가 화면의 모서리까지 닿도록 늘이자. 날씨 앱은 이러한 접근법을 잘 보여준다. 현재 날씨의 아름다운 묘사는 즉각적으로 가장 중요한 정보를 제공하며, 시간별 데이터를 제공할 여유 공간까지 제공한다.

물리적이고 사실주의적인 시각적 인디케이터들을 다시 생각하라. 베젤, 그라디언트 그리고 그림자들은 이따금씩 콘텐트를 압도하는 무거운 UI 요소들로 이끈다. 그러지 말고 콘텐트에 집중하고 UI는 서포트하는 역할을 하도록 하라.

image: ../Art/restrain_visual_indicators_2x.png
image: ../Art/embrace_translucency_2x.png

반투명한 UI 요소들은 그 뒤의 콘텐트에 대한 힌트를 제공한다. 반투명한 요소들은 - 컨트롤 센터 같은 - 사용자들이 추가적인 콘텐트가 있다는 것을 알 수 있도록 하며 유동적임을 알린다. iOS에서, 반투명한 요소들은 바로 그 밑에 있는 콘텐트만 흐리게 하며 - 라이스 페이퍼를 통해 보는 듯한 인상을 주는 - 다른 영역의 화면은 흐리게 하지 않는다.

명료함을 제공하기

명료함을 제공하는 것은 당신의 앱에서 내용이 제일 중요하다는 것을 보장하는 또 다른 방법이다. 가장 중요한 내용과 기능을 명료하고 인터렉션하기 쉽게 만드는 법은 다음과 같다.

image: ../Art/use_white_space_2x.png

여백을 많이 사용하라. 여백은 중요한 콘텐트와 기능을 보다 알아보기 쉽게 한다. 뿐만 아니라, 여백은 차분하고 평안한 느낌을 전달한다. 그리고 앱이 보다 더 집중되고 효율적으로 보이게 한다.

색상을 통해 UI를 단순화 하라. ‘Notes’에서의 노란색처럼, 키 컬러는 중요한 상태를 강조하고, 섬세하게 상호작용을 표시한다. 또한 앱에 일관된 시각적 테마를 준다. 내장 앱들은 밝거나 어두운 바탕색 모두에 잘 보이는 깨끗한 단색 시스템 컬러를 사용한다.

image: ../Art/notes_color_2x.png
image: ../Art/mail_message_fonts_2x.png

시스템 폰트를 이용해 가독성을 확보하라. iOS 시스템 폰트는 사용자가 어떤 크기를 선택하든 읽기 쉽고 근사하게 보이기 위해 자동적으로 자간과 행간을 조정한다. 반드시 다이나믹 타입을 적용하여 사용자가 시스템 폰트를 사용하든 커스텀 폰트를 사용하든, 앱이 사용자가 선택한 다른 사이즈의 텍스트에 대응할 수 있게 하라.

경계선 없는 버튼을 받아들이라. 베젤에 의존해서 인터렉티비티를 알리기 보다, 의미있는 버튼 제목을 만들고, 컬러와 맥락 이용해 사용자에게 해당 요소가 인터렉티브하다는 것을 보여준다. 이러한 의미가 동했을 때, 콘텐트 영역의 버튼은 버튼의 구별을 위해 얇은 경계선이나 옅은 배경 을 이용할 수 있다.

image: ../Art/contact_card_2x.png

Use Depth to Communicate

iOS는 종종 콘텐트를 계층과 위치를 제공하는 구별된 레이어에 디스플레이 해서 사용자가 스크린 위의 오브젝트들 간의 관계를 이해할 수 있도록 돕는다.

image: ../Art/folder_2x.png

반투명한 배경과 홈 스크린 위에 떠 있는 것처럼 보이게 함으로써, 폴더는 폴더 내의 콘텐트를 스크린과 분리시킨다.

사용자가 ‘Reminders’에서 하나의 아이템을 가지고 작업하는 동안 추가적인 아이템들은 스크린 아래의 레이어에 디스플레이 된다. 모든 아이템을 보려면, 여기 보이는 것 처럼, 그 레이어들을 펼치면 된다.

image: ../Art/layered-reminders_2x.png
image: ../Art/cal_year_2x.png

캘린더는 개선된 트렌지션을 이용해 사용자들이 년, 월, 일로 뷰를 옮겨갈 때 깊이를 느낄 수 있도록 한다. 여기에서 보이는 year 뷰를 스크롤 하면, 사용자는 즉각적으로 오늘의 날짜를 볼 수 있고 다른 캘린더 작업을 할 수 있다.

month 뷰를 선택하면, year뷰에 줌인 되어 month 뷰를 나타난다. 오늘 날짜는 강조되고, 년도는 뒤로가기 버튼에 나타난다. 그래서 사용자들로 하여금 정확히 사용자가 어디있는지, 어디서 왔는지, 그리고 어떻게 돌아가는지를 정확하게 알 수 있다.

image: ../Art/cal_month_2x.png
image: ../Art/cal_day_2x.png

비슷한 트렌지션이 day를 선택할 때 발생한다. : month뷰는 분리되는 것처럼 보이고 현재 주를 화면의 위로 밀어올리고 선택한 날짜의 시간대별 뷰가 드러난다. 칼렌더에서의 모든 장면전환은 년, 월, 일 간의 계층적 관계를 강화한다.