iOS 4개의 iPhone 화면 적응 솔루션(참고용)

어서! 주류 적응 솔루션을 살펴보자

Apple이 두 가지 새로운 크기의 대형 화면 iPhone 6을 출시하면서 마침내 iOS 플랫폼 크기 적응 문제가 대두되었습니다. 전면적으로 모바일 디자인은 '혼합 화면' 시대에 완전히 진입했습니다. 화면이 얼마나 복잡한지 확인하려면 아래 세 iPhone의 크기와 해상도 데이터를 살펴보세요.

물론 이 3가지 종류 외에 아이폰4도 있습니다. 화면이 640*960이라 화면이 4가지나 늘어나서 복잡해보이시거나 고민되시죠? 천천히

p>

Android 생태계의 다양한 이상한 크기와 결합하여 이제 앱 디자인 및 개발은 대형, 중형, 소형 화면에 적응하는 것을 고려해야 합니다. 그렇다면 세 가지 대형, 중형, 소형 화면에 적응하는 문제를 해결하기 위해 일련의 디자인 초안을 제공하는 방법은 무엇입니까? 디자인과 개발의 협업 모델은 무엇인가요? 기본 아이디어는 다음과 같습니다.

1. 디자인 및 개발 벤치마크로 한 가지 크기를 선택합니다.

2. 나머지 두 가지 크기에 자동으로 적응하도록 적응 규칙 세트를 정의합니다. p>

3. 특별한 적응 효과는 디자인 효과를 줍니다.

아이폰6/아이폰6 플러스용 타오바오 모바일이 채택한 협업 모델을 살펴보고, 전체 이야기를 천천히 설명해보자.

첫 번째 단계인 시각 디자인 단계에서는 디자이너가 너비 750px(iPhone 6)의 디자인 초안을 만들고, 사진을 제외한 모든 디자인 요소에 벡터 경로를 사용합니다. 디자인이 확정된 후 750px 디자인 초안에 주석을 달아 주석도면을 출력합니다. 동시에 1.5배 확대하여 너비 1125px의 디자인 초안을 생성하고 이미지를 1125px 초안으로 자릅니다.

두 번째 단계에서는 개발 엔지니어에게 두 가지 결과물을 출력합니다. 하나는 프로그램에서 사용하는 @3x 절단 리소스이고 다른 하나는 너비가 750px인 설계 주석 도면입니다.

세 번째 단계에서는 개발 엔지니어가 750px 주석 이미지와 @3x 컷 이미지 리소스를 획득하여 iPhone 6(375pt)의 인터페이스 개발을 완료합니다. 이 단계에서는 고정된 너비로 인터페이스를 개발할 수 없습니다. 이후에 다른 크기에 맞게 조정하려면 자동 레이아웃을 사용해야 합니다.

네 번째 단계는 적응 및 디버깅 단계로 아이폰6의 인터페이스 효과를 바탕으로 아이폰6 플러스(414pt)와 아이폰5S 이하(320pt)의 인터페이스 효과를 각각 상향 디버깅한다. . 이로써 대형, 중형, 소형 세 가지 화면에 대한 적응이 완료되었습니다.

iPhone 6를 기본 크기로 선택한 이유는 무엇입니까?

대형, 중형, 소형 세 가지 유형의 화면에 적응해야 할 필요성에 직면했을 때 먼저 한 가지 유형의 화면을 만든 다음 나머지 두 화면에 적응하는 것을 생각하기 쉽습니다. 첫 번째 결정은 디자인 및 개발의 기준으로 사용할 화면 크기입니다. 여러 가지 이유로 중간 크기 iPhone 6(750px/375pt)를 벤치마크로 선택했습니다.

1. 중간 크기에서 위쪽 및 아래쪽으로 적응할 때 인터페이스 조정이 최소화됩니다. 375pt 이하의 디자인 효과는 414pt와 320pt에 적용해도 크게 벗어나지 않습니다. 414pt를 기준으로 매우 우아한 디자인을 만든다고 가정하면 320pt에서는 요소 간의 비율이 같지 않을 수 있습니다. 예를 들어 그림과 텍스트 간의 시각적 비율이 맞지 않을 수 있습니다.

2. iPhone 6 plus에는 두 가지 디스플레이 모드가 있습니다. 표준 모드 해상도는 1242x2208이고 확대 모드 해상도는 1125x2001(즉, iPhone 6의 1.5배)입니다. 공식 시스템에서는 아이폰6와 아이폰6 플러스의 해상도 사이에 1.5배 확대 관계가 있는 것을 알 수 있다. 대부분의 경우 이 두 크기는 1.5배를 사용하여 서로 정비례할 수 있습니다.

3. 1242x2208이라는 이상한 값은 애플 관계자들이 공개적으로 홍보하고 싶지 않은 해상도이며, 래스터를 기억하고 계산하는 것이 불편합니다. 640x1136은 널리 사용되는 해상도이지만, 대형 화면 시대에 여전히 작은 크기를 디자인 벤치마크로 사용하는 것은 분명히 부적절합니다.

따라서 iPhone6의 750x1334가 가장 적합한 벤치마크 크기입니다.

한 세트의 디자인 초안만 제공되며 기본적으로 어떤 규칙이 사용됩니까?

앞서 언급했듯이 적응 전략은 먼저 iPhone 6를 기본 디자인 크기로 선택한 다음 일련의 적응 규칙을 통해 다른 두 가지 크기에 자동으로 적응하는 것입니다. 이러한 적응 규칙 집합은 텍스트 흐름, 제어 탄력성, 이미지 크기 조정이라는 한 문장으로 요약됩니다.

제어 탄력성은 탐색, 셀, 바의 적응 과정에서 수직 방향의 높이 차이를 의미합니다. 등이 변경되며 가로 방향으로 너비가 변경되면 요소 간격을 조정하거나 요소를 오른쪽 정렬하여 조정할 수 있습니다. 이와 같이 화면이 클수록 큰 화면의 장점을 활용하여 세로 방향으로 더 많은 콘텐츠를 표시할 수 있습니다.

위의 기본 적응 규칙에 따라 대형, 중형, 소형 화면의 디스플레이 효과는 동일합니다. 때로는 큰 화면에 더 많은 콘텐츠를 표시하려면 특별한 적응 효과를 디자인해야 합니다. 예를 들어 iPhone 6부터 iPhone 6 plus까지 App Store 홈페이지의 포커스 이미지를 적용할 때 포커스 이미지의 크기와 레이아웃이 특수하게 처리되었습니다. 하단의 애플리케이션 목록도 3개 이상 연속에서 4개 이상 연속으로 변경되어 큰 화면에 더 많은 콘텐츠를 표시한다는 개념을 그대로 구현했습니다. 이를 위해서는 디자이너가 해당 디자인 초안을 제공해야 합니다.

읽어보시고 이해되셨나요? 궁금하신 점은 메시지 남겨주시면 상담해드리겠습니다╰(￣▽￣)╮

원본주소