가변성과 레이아웃

가변성 구축

일반적으로 사람들은 모든 장치의 어느 방향으로 자신이 좋아하는 앱을 사용하고 싶어합니다. iOS8과 그 이상에서, 디스플레이 환경이 바꼈을때 크기 클래스와 스크린의 레이아웃, 뷰컨트롤러와 뷰가 어떻게 적용되어야 하는지 정하여 기대를 충족시키도록 돕는 자동 레이아웃을 사용합니다. (디스플레의 환경의 컨셉은 이러한 팝오버 또는 스플릿 뷰 제어기의 기본 뷰 영역으로써, 전체장치 또는 화면의 일부만을 참조할 수 있습니다.)

iOS 는 두가지 클래스로 정의합니다:일반(regular)과 소형(compact). 일반사이즈 클래스는 넓은 공간과 어울리고소형사이즈의 클래스는 제한된 공간과 어울립니다. 디스플레이 환경을 특징짓기 위해서, 수평 사이즈 클래스와 수직 사이즈 클레스를 지정합니다. 추측하였듯이, iOS장치는 세로방향을 위한 사이즈 클래스 중 한 셋트, 가로로 긴 배치 위한 사이즈 클래스들 중 다른 세트를 사용합니다.

디스플레이 환경의 사이즈 클래스가 바뀌었을때 iOS는 자동적으로 다양한 레이아웃의 변화를 가집니다. 예를들어, 세로 사이즈가 컴팩트에서 기본으로 바뀌었을때, 네비게이션 바와 툴바는 자동적으로 길어집니다.

레이아웃에서 변화를 조정하는 사이즈 클래스에 의존했을때, 당신의 앱은 어느 디스플레이 환경에서도 좋게 보일 수 있습니다. 인터페이스 구축에 있어서 어떻게 사이즈 클래스를 가지고 작업이 되는 것인지 배우고 싶다면, Size Classes Design Help.를 봐주세요.

사이즈 클래스가 다양한 장치의 디스플레이 환경에서 어떻게 나타나는지 시각적으로 표현한 예시가 있습니다. 예시로, 아이패드는 두 치수 두 방향에서 일정한 크기의 클래스를 사용합니다. 즉 iPad 디스플레이 환경은 항상 수평, 수직적으로 일정합니다.

세로방향의 iPad 사이즈 클래스

image: ../Art/ipad_size_class_v_2x.png

가로방향의 iPad 사이즈 클래스

image: ../Art/ipad_size_class_h_2x.png

iPhone의 디스플레이 환경은 장치와 방향에 따라 다양합니다.

image: ../Art/iphone02_size_class_v_2x.png

세로방향에서, iPhone6 Plus는 표준의 수직 사이즈클래스와 작은 크기의 수평사이즈클래스를 사용합니다.

가로형에서, iPhone6 Plus는 표준의 수평과 소형의 수직 사이즈를 사용합니다. 

image: ../Art/iphone02_size_class_h_2x.png

iPhone6를 포함하는 다른 모든 아이폰 모델들이 같은 세트의 사이즈 클래스를 사용합니다.

image: ../Art/iphone01_size_class_v_2x.png

세로방향에서, iPhone 6, iPhone 5 와 iPhone 4s는 표준의 수직 사이즈클래스와 작은 크기의 수평사이즈클래스를 사용합니다.

가로 방향이서 이 장치들은 수평 수직 모든방향에서 소형사이즈클래스를 사용합니다.

image: ../Art/iphone01_size_class_h_2x.png

각각의 환경에서 좋은 경험을 제공하라

가변에 대한 이로움이 잇을때, 당신의 UI가 디스플레이 환경에 적절하게 응답하도록 할 수 있습니다. 모든 장치와 방향에  좋은 경험을제공하기 위해 다음의 가이드라인을 따르세요.

모든 환경의 기본 내용에 중점을 유지하세요. 이것이 가장 우선순위입니다. 사람들은 그들이 관심있는 콘텐츠를 보고 상호작용 위해 앱을 사용합니다. 환경이 바뀌었을 때 중점이 변하는것은 사용자들에게 혼란을 줄 수 있고, 그들이 그 앱을 제어하는 권한을 잃은 것처럼 느끼게 합니다.

레이아웃의 불필요한 변화는 피하세요.  모든 환경에서 유사한 경험은 그들이 그 장치를 회전시키거나 다른 장치에서 앱을 실행시켰을때 그들의 사용패턴을 유지시킵니다. 예를들어, 수평의 기본 환경에서 이미지를 보기위해 그리드를 사용하는 경우, 그리드의 크기를 조절할 수도 있지만, 수평의 소형 환경에서 같은정보를 보여줄 필요는 없습니다. 

앱이 한 방향으로만 실행하는 것이라면 간단하게 하세요. 사람들은 당신의 앱이 다른방향에서도 사용할 수 있을 것이라 생각하고, 그 기대를 충족시킬 수 있는 것이 최선이라고 생각합니다. 하지만 당신의 앱이 오직 한 방향에서만 실행해야하만 한다면, 그렇게 해야합니다:

  • 사용자들에게 장치를 회전시켜달라고 하는 UI의 요소를 보여주는것을 피하도록 하세요.  회전이 요구된다면, UI에 불필요하게 어수선하게 불필요한것을 더할필요 없이 지원되는 방향의 운영으로 사람들에게 이 장치를 회전시킬것을 요구하세요.

  • 방향의 변형을 모두 지원하세요.  예를들어 앱이 가로형에서만 실행된다면 사용자들은 그들이 홈버튼을 오른쪽으로 잡고있든지 왼쪽으로 잡고있든지 사용할 수 있어야 합니다. 또한 앱을 사용하는동안에 장치를 180도 돌린다면 콘텐츠를 180도 돌려줌으로써 앱이 대응할 수 있도록 하는것이 최선입니다.

당신의 앱이 사용자 입력으로써 장치의 방향 변화를 말한다면 앱의 특정한 방법으로 회전을 다루세요.  예를들어, 사람들이 장치를 회전시켜  움직이게 하는 게임은 화면을 돌리는 것으로 장치의 회전에 응답할 수 없습니다. 이 같은 경우, 사용자가 필요한 방향의 모든 변형에서 시작하고 그들이 앱의 주임무을 시작하기까지는 두 변형 사이에서 전환할 수 있도록 해야합니다. 주요 작업을 시작으로, 앱의 특정한 방법에서 장치의 움직임에 응답하세요.

의사소통할 레이아웃을 사용하라

레이아웃은 어떻게 UI요소들이 앱 화면상에서 보여지는지보다 더 많은것을 아우르고 있습니다. 레이아웃으로, 사용자들에게 무엇이 가장 중요한지, 그들이 무엇을 선택할 것인지, 어떻게 그것들이 연관되어있는지를 보여줍니다.

중요한 컨텐츠나 기능을 높임으로써 주 업무에 중점이 맞추어지기 쉽도록 하세요. 이것을 하는 몇가지 좋은 방법들은 화면의 상단 절반-왼쪽에서 오른쪽으로-화면의 좌측근처에 주요 항목을 배치하는 것입니다.

image: ../Art/focus_on_main_task_2x.png

사용자들에게 화면상 요소들 중에 상대적 중요성을 보여주기 위한 시각적 무게와 균형을 사용하세요. 큰 아이템들은 눈에 띄고 작은것들보다 더 중요해보이는 경향이 있습니다. 더 큰 항목들ㅡ사용자들이 보통 주위가 어수선한 상태에서 사용하는 전화와 시계같은ㅡ은 사용자가 누르기 쉽고, 앱중에서 특별이 더 유용하도록 만듭니다.

image: ../Art/phone_hangup_button_2x.png

훑어보기 쉬운 정렬을 사용하고 분류 또는 계층구조와 소통하세요 . 정렬은 앱이 깔끔하고 정리되어보이게 만들며, 그들이 정보로 가득찬 화면을 스크롤하는 동안에 집중 할 공간을 줍니다. 들여쓰기와 다른 정보 분류의 정렬은 어떻게 그 분류가 연관되어있는지 보여주고 사용자가 특정한 항목들을 찾기 쉽게 만들어줍니다.

반드시 사용자가 기본사이즈에서 중요한 콘텐츠를 이해할 수 있도록 하세요. 예로, 사용자들은 중요한 텍스트를 읽기 위해 수직으로 스크롤을 하거나, 중요한 이미지를 보기위해 확대해서는 안됩니다.

텍스트 사이즈의 변화를 준비하세요. 사용자들은 그들이 설정창에서 다른 텍스트사이즈를 선택했을때 대부분에 앱에서 적절하게 반응할 것을 예상합니다. 글꼴크기의 변화에 대응하기 위해서는 레이아웃을 조정하는 것이 필요합니다. ; 당신의 앱에 나타나는 글자에대한 정보를 더 얻고싶다면, Text Should Always Be Legible. 을 봐주세요.

가능한 한, 당신의 UI에 일관되지 않는 모습은 피해주세요.  일반적으로 비슷한 기능을 가진 요소들은 비슷하게 보여야합니다. 사람들은 보통  그들이 알아챈 불일치에는 이유가 있다고 가정을 하고, 그것을 밝혀내기 위해 시간을 들이는 경향이 있습니다.

각각의 상호적인 요소에 충분한 공간을 줌으로써 사람들이 콘텐츠와 컨트롤에 상호작용하기 쉽게 하세요. 누를 수 있는 컨트롤에게 약 44x44 points의 표적공간을 주세요.

image: ../Art/interact_with_content_r_2x.png
image: ../Art/interact_with_content_nr_2x.png


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요