iOS 및 Android 디자인에서 나쁜 관행 피하기

평균적으로 얼마나 많은 사람들이 iOS와 Android 기기 를 동시에 사용하는 것을 보았습니까? 이 연구에 따르면 공식 수치는 10%에서 20% 사이이지만 이 수치에는 모바일 사용자뿐만 아니라 Mac 사용자도 포함됩니다. 실제로 사람들은 일정 기간 동안 하나의 휴대전화나 태블릿만 사용하는 경향이 있습니다. 두 개의 장치를 사용하는 경우 더 자주 둘 다 동일한 OS를 실행합니다.

이것이 의미하는 바는 앱의 UI 디자인을 픽셀 단위로 완벽하게 복사할 필요가 없다는 것입니다. 두 플랫폼을 모두 수용하기 위해 수십 가지의 서로 다른 화면 크기, 종횡비 및 해상도로 완성됩니다(노치, 상태 표시줄도 불러오지 말자) , 탐색 모음, 하드웨어 버튼 등).

반대로 사용자가 iOS와 Android에서 동일한 앱을 보고 있더라도 둘 다에서 기본 느낌을 경험하는 것을 선호할 가능성이 있습니다. 이것이 모바일 개발에서 많은 프로젝트 관리자와 제품 소유자가 취하는 접근 방식이 종종 최적이 아니며 미세 조정해야 하는 이유입니다.

이것이 여전히 문제인 이유는 무엇입니까?

그러나 이해 관계자와 관리자가 여전히 자주 사용자 경험을 저하시켜 자신의 제품을 손상시키는 결정을 내리는 이유는 무엇입니까? 모든 사람들이 여전히 iOS 및 Android 개발을 이해하고 있던 10년 초에는 이해할 수 있었지만 이 성가신 문제는 오늘날까지 지속됩니다.

이러한 상황이 발생하는 주된 이유는 사용자가 다른 플랫폼에서 동일한 앱을 보고 혼동할 수 있고 완전히 동일한 느낌과 UI를 제공하지 않는다는 것을 깨닫는 경우 프로젝트 관리자와 모바일 개발자가 표현한 우려일 수 있습니다. 어느 정도의 유사성은 필요하고 환영하기 때문에 이러한 사고 방식은 어느 정도 의미가 있다고 말하는 것이 공정합니다. 그러나 너무 멀리 가고 극단적인 경우 다른 플랫폼에 대한 앱의 정확한 복제를 만드는 것은 실제로 득보다 실이 훨씬 더 많은 경향이 있습니다.

궁극적인 목표는 올바른 균형을 유지하는 것입니다. 픽셀의 완벽한 일관성을 강요하지 말고 일반적인 디자인 아이디어를 고수하고 두 플랫폼 모두에서 앱의 탐색 맵을 유사하게 유지하십시오. 동일한 기능과 동일한 워크플로를 제공하되 가능한 한 기본 동작을 고수하려고 합니다.

누구나 여기저기서 사용자 정의 버튼이나 멋진 애니메이션을 좋아하지만 기본 요소는 사람들에게 익숙하고 사용하기 쉽고 직관적인 요소입니다.

외모가 아닌 사용자 중심

이 딜레마를 해결하기 위한 좋은 접근 방식을 찾으려면 줄 끝, 즉 최종 사용자부터 시작해야 합니다. 연구에 따르면 Android와 iPhone 사용자는 매우 다른 사람들이며 최적의 UX를 목표로 한다면 그들의 사용 패턴을 파악하려고 노력해야 합니다.

사람들은 평균 예산부터 시작하여 한 달에 기술에 지출하기로 결정합니다 ( iPhone: $100.88, Android: $50.83 ) , 하루에 찍는 셀카 수 iPhone: 12, Android: 7 그리고 매일 보내는 문자 메시지 보기 iPhone : 57, Android: 26 , 사람들이 기기를 사용하는 방식을 이끄는 행동에 차이가 있다는 결론을 내릴 수 있을 정도로 차이가 상당하다는 것을 쉽게 알 수 있습니다.

그렇다면 동시에 두 플랫폼에 대한 애플리케이션을 설계할 때 무엇에 중점을 두어야 할까요?

우선, 가능한 경우 기본 요소로 이동하십시오. 크로스 플랫폼 프레임워크를 사용하더라도 대부분의 구성 요소는 순수한 기본 보기를 기반으로 합니다. 따라서 사용자 정의가 정말로 필요한 경우가 아니면 기본에 충실하십시오. 사람들은 익숙한 것을 사용하는 것을 좋아하므로 더 중요한 기능 (및 코드 검토!)을 위해 개발 시간을 절약할 수 있습니다.

사용자 정의 보기는 너무 적고 앱이 지루하고 불필요하게 화려하고 사용하기 어려운 일반적인 아이디어와 사용 느낌을 일반적인 것과 동일하게 유지하는 한 앱에 확실히 개성과 고유성을 가져올 수 있습니다.

때로는 사용자 지정 보기가 약간 다른 작은 터치가 앱의 판도를 바꿀 수 있지만 사용자가 탐색할 수 있도록 모든 화면을 새로운 요소로 채우면 사용자가 중요한 정보를 찾는 동안 압도되어 길을 잃을 수 있습니다. 이러한 작은 터치가 "광택"이라고 불리는 것은 우연이 아닙니다.

다양한 디자인 구성 요소에 접근하는 방법

일반적으로 각 플랫폼에는 고유한 디자인 지침이 있다는 것을 항상 기억하십시오. Android의 접근 방식은 Material Design을 기반으로 하는 반면 Apple은 Human Interface Design을 신뢰합니다. 디자인을 계획할 때 고려해야 하는 특정 구성 요소를 살펴보면 다음과 같은 몇 가지 주요 부분에 중점을 둡니다.

1. 일반 스타일: 플랫폼 간 애플리케이션에 대해 이야기하지 않는 한 각 플랫폼에 대한 일반 스타일 지침을 따르는 것을 고려해야 합니다. 전반적으로 iOS 디자인은 더 평평한 경향이 있는 반면 Android는 더 계층화된 접근 방식을 취합니다.

   역사적으로 모바일 플랫폼은 10년 이상 서로에게 영향을 미치며 iOS에서 일부 Android 개념을 쉽게 발견할 수 있으며 그 반대의 경우도 마찬가지입니다. 예를 들어, 지문 센서가 모바일 세계에 등장하기 시작했을 때 제조업체는 가능한 한 많은 사용자가 편안하게 사용할 수 있도록 센서의 크기와 위치를 실험 하고 있었습니다. 동시에 디자이너와 개발자도 새로운 기능에 적응하고 있었기 때문에 시각적 요소와 피드백은 두 플랫폼에서 대부분 동일했습니다(일부 이국적인 접근 방식 제외).

2. 하드웨어 세부 사항 및 탐색 패턴: 이것은 아마도 앱을 완전히 복제하는 것의 가장 두드러진 예 중 하나일 것입니다. 대부분의 Android 기기에는 뒤로 버튼을 포함한 추가 탐색 모음(다른 기기의 하드웨어 또는 소프트웨어)이 여전히 있습니다. iOS는 그것을 제공하지 않기 때문에 애플리케이션은 일반적으로 모든 화면의 왼쪽 상단 모서리에 뒤로 버튼을 제공할 위치와 시기를 고려해야 합니다.

   메뉴 버튼(이 예에서는 사각형 버튼)은 Android 앱에 추가 기능을 제공할 수도 있습니다. 이것은 어디에 관련이 있습니까? 예를 들어, 설정 메뉴 또는 유사한 탐색 기능을 열 때.

   

   최근까지는 아이폰에도 애플의 전통적인 홈 버튼이 있었지만, 아이폰 X가 등장한 이후로는 이 기능이 배제되어 iOS의 흐름은 이제 제스처 기반입니다. 스와이프가 앱의 중요한 부분인 경우 앱 컨테이너의 가장자리와 스와이프 영역 사이에 충분한 쿠션을 제공하여 까다로운 스와이프 우연의 일치를 방지할 수 있도록 하세요.

   앱이 Bluetooth, NFC 또는 유선 헤드폰과 같은 하드웨어 관련 기능에 의존하는 경우 항상 지원하는 다양한 하드웨어 사양을 고려해야 합니다. 사용자가 특정 기능과 상호 작용하려고 할 때 적절한 피드백을 제공하십시오. 어떤 이유로 두 플랫폼 중 하나에만 하드웨어 관련 기능을 제공해야 하는 경우 사용자에게 차이점을 알려야 합니다.

3. 전역 요소 (상태 표시줄, 헤더 등): 상태 표시줄, 탐색 헤더 등과 같이 디자인의 모든 페이지에 나타나는 구성 요소는 기본 느낌을 전달하는 것을 엄격히 목표로 해야 하므로 변경해서는 안 됩니다. 그 막대의 높이와 스타일. 두 플랫폼에서 전역 요소의 스타일이 지정되는 방식에는 약간의 차이가 있습니다. 예를 들어, Android는 왼쪽 정렬된 텍스트를 사용하고 iOS는 가운데 정렬된 제목을 사용합니다. 상태 표시줄은 기본 구성 요소이므로 걱정할 필요가 없지만 앱의 상단 섹션을 계획할 때 다른 노치와 화면 종횡비를 염두에 두십시오.

   

   

4. 탐색: Google의 오래된 머티리얼 디자인 가이드라인은 Android 애플리케이션에서 서랍 메뉴 탐색을 제안하고 하단 탐색은 뒤에 있지만 여전히 실행 가능한 옵션입니다. iOS는 탭 표시줄만 사용하는 경향이 있어 최상위 탐색 옵션을 제한할 수 있지만 모든 항목을 한 번에 명확하게 볼 수 있습니다. 이 경우 두 운영 체제는 앱의 복잡성에 따라 사용할 수 있는 유사한 구성 요소를 제공하지만 두 시스템의 시각적 차이는 자연스럽게 안내해야 합니다(예: Android의 전역 탐색 모음 및 iOS의 부족).

   최근 몇 년 동안 모바일 하드웨어의 급속한 발전으로 인해 전체 화면 전화기, 다양한 모양과 크기의 노치, 장치 전체 탐색을 위한 제스처 사용 증가 등 많은 변수와 알려지지 않은 사항이 도입되었습니다. 이러한 모든 변경 사항은 사용자에게 전례 없는 힘을 제공하지만 앱에서 주어진 화면의 모든 사용 사례를 파악하려고 할 때 고통스러울 수 있습니다. 이러한 우려를 감안할 때 사용자의 혼동을 피하기 위한 좋은 접근 방식은 너무 많은 제스처, 막대 및 다방향 스와이프 옵션으로 앱에 과부하를 주지 않고 탐색 패턴을 단순하고 일관되게 유지하는 것입니다.

   

5. 타이포그래피: 두 플랫폼 모두 iOS용 San Francisco 및 Android용 Roboto 와 같은 기본 서체를 가지고 있습니다. 일반적인 앱 스타일과 밀접하게 일치하는 사용자 정의 글꼴을 사용하려는 경우가 아니면 기본값을 고수해야 합니다. 사용자는 기본 시스템 글꼴을 변경할 수 있으며 이는 특정 서체로 사용자 정의한 보기에는 영향을 미치지 않습니다.

   예를 들어, 난독증 사용자가 기본 글꼴을 자신의 요구에 특별히 맞는 글꼴로 교체한 경우 앱에서 최고의 시간을 보내지 못할 수 있습니다. 비라틴 글꼴(키릴 자모, 아랍어 등)을 사용하는 사용자를 지원하는 경우 사용자 정의 글꼴이 이러한 추가 문자도 제공하는지 확인하십시오. 게임에 관심이 있다면 다른 글꼴로 인해 이름이 눈에 띄는 러시아 플레이어가 달성한 높은 점수의 리더보드를 본 적이 있을 것입니다. 이것은 특정 플레이어를 위한 "기능"이 아니라 개발 단계에서 저지르는 사소한 실수에 불과하며 사용자가 앱을 버리게 만들지는 않겠지만 확실히 사용자 경험이 저하되거나 불만이나 리뷰가 좋지 않을 수 있습니다.

   

6. 다른 구성 요소: 버튼, 화면 전환, 애니메이션, 마이크로 상호 작용, 작업 시트, 경고 및 기타 모든 유형의 흐름 제어는 이 기사의 범위를 벗어나지만 지금까지 다른 디자인 요소에 적용한 일반 원칙을 따라야 합니다. 두 플랫폼 모두 사용자의 주의를 산만하게 하고 혼란스럽게 할 수 있으므로 과도한 사용자 정의 요소를 권장하지 않습니다. 디자인에 관해서는 일반적으로 많은 사용자에게 첫인상이 마지막이기 때문에 처음부터 사용자의 관심을 끌고 집과 같은 편안함을 느끼게 하는 것이 중요합니다.

현실 세계에서 우리가 논의한 규칙에 대한 매우 인기 있는 예외를 볼 수 있습니다. 즉, Material Design 지침을 따르는 iOS 애플리케이션과 Apple의 휴먼 인터페이스 지침을 따르는 일부 Android 제품이지만 이러한 앱에는 자체적으로 입증된 스타일이 있습니다. 사용자는 앱과 디자인에 익숙하며 사용자에게는 약간 더 맞춤화된 느낌을 제공하는 것이 좋습니다.

올바른 교차 플랫폼 접근 방식

반면에 프로젝트가 플랫폼 간 솔루션(예: React Native, Flutter, Xamarin 등)을 기반으로 하는 경우 집중하고 싶은 기본 플랫폼이 무엇인지 고려하고 거기에서 시작해야 합니다.

최근 몇 년 동안 이러한 새로운 프레임워크는 플랫폼 간 애플리케이션 개발에서 생산성을 크게 향상시켰습니다. 점점 더 많은 회사가 이 개발 패러다임으로 전환하고 있습니다. 출시 기간이 단축되고 비용 효율성이 우수하며 기술적 장벽이 줄어들고 기능 지원이 제한되고 경우에 따라 UX가 최적화되지 않는다는 주요 단점이 있기 때문입니다.

크로스 플랫폼 개발을 위한 거의 모든 이전 솔루션은 웹 보기를 기반으로 하므로 많은 장치에서 응답성에 심각한 문제가 발생했지만 오늘날에는 크로스 플랫폼 접근 방식에서도 기본 구성 요소를 사용할 수 있습니다. 이 주요 개선 사항은 여러 면에서 시장에 영향을 미쳤고 모든 모바일 플랫폼을 다양한 장치 및 플랫폼에서 사용자 시각적 경험을 통합하는 데 한 걸음 더 다가갔습니다.

플랫폼 간 솔루션을 사용하기로 결정했다면 앱의 골격을 구축하여 표준 기본 앱에서처럼 시작할 수 있습니다. 기본 우선 순위를 설정하고 실행(기본 종속성 설정, MVP 구축, 프로젝트별 마일스톤 달성, 첫 번째 버전 출시 등)하고 나면 플랫폼을 사용하여 두 애플리케이션의 기본 디자인을 쉽게 분리할 수 있습니다. 각 프레임워크가 제공하는 특정 도구. 팀의 규모와 사용 가능한 기간에 따라 주어진 플랫폼 버전에서 상황이 더 이상 동일하지 않을 때 미래의 혼란을 피하기 위해 버전 1에 이러한 조정을 포함하는 것을 고려할 수도 있습니다.

모든 것을 말하고 완료한 후에는 이러한 원칙 중 어느 것이 앱에 유효한지 평가해야 합니다. 업계의 거의 모든 노력과 마찬가지로 지침을 따르고 특정 요구 사항에 맞게 약간 조정해야 합니다. 예를 들어, 서랍 탐색이 간단한 5개 화면 앱에 정말 적합한 것이라면 각 플랫폼에 대해 복잡한 솔루션을 제시할 필요가 없습니다. 핵심 구성 요소이든 사소한 사용자 정의이든 사용자가 사용자 정의 버튼과 도구를 명확하고 쉽게 인식할 수 있도록 합니다.

좋은 디자인은 사용자 습관을 존중합니다

요약하자면, 우리는 이미 알고 있는 것을 반복할 수 있습니다. 좋은 디자인은 각 운영 체제에서 사용자의 습관을 존중하는 디자인입니다. 마지막에 약간의 수정만으로도 평균 앱과 훌륭한 앱을 구분할 수 있습니다.

많은 경우 앱은 콘텐츠만으로는 사용자를 사로잡기에 충분한 고유한 기능을 제공하지 않습니다. 대부분의 사람들은 한 제품을 다른 제품보다 선택하기로 한 결정을 "직감"으로 설명합니다. 이 범주의 사용자는 응답성, 일반적인 스타일 선택, 색상 팔레트 및 화면에서 보는 개별 시각적 구성 요소를 암시적으로 평가하여 앱을 사용할 때 주로 어떻게 느끼는지 에 따라 선택합니다.

따라서 제품의 놀라운 기능뿐 아니라 제품이 제공하는 서비스 품질에 맞는 고급 포장으로 제품을 돋보이게 하십시오.