티스토리 뷰

내비게이션 설계하기

운영체제(OS) 플랫폼 별 UI 패턴 파악

운영체제(OS) 플랫폼 별 UI 패턴을 분석하여 사용자에게 편의성이 높은 내비게이션을 제공할 수 있다.

운영체제(OS)별 UI 요소와 기능 이해

특정한 목적을 가지고 모바일 앱을 이용하는 사용자의 입장에서 화면의 레이아웃 구성은 사용자가 원하는 작업을 수행하기 위해 어떤 기능을 선택하고 결정하게 하는 중요한 부분 이다. 사용자는 내비게이션, 탭, 메뉴, 툴 바, 액션 바, 각종 버튼 등의 UI 구성 요소를 통 해 앱을 경험하기 때문에 사용자의 작업을 효율적으로 지원할 수 있어야 한다. 따라서 대 표적인 운영체제(OS)별 UI 요소와 기능에 대한 이해를 통하여 디자인을 진행하여야 한다.

iOS UI 필수 요소와 기능
  • 바(bar)
    • 상태 바(status bars)
    • 내비게이션 바(navigation bars)
    • 툴 바(toolbars)
    • 탭 바(tab bars)
    • 검색 바(search bars)
  • 뷰(views)
  • 콘트롤(controls)
안드로이드 UI 필수 요소와 기능
  • 내비게이션(navigation)
  • 메인 액션 바(main action bars)
  • 콘텐츠 영역(contents area)
  • 분할 액션 바
  • 고정 탭

iOS와 Android의 UX/UI 차이점

내비게이션과 탭 차이

iOS와 안드로이드 앱의 UI 디자인에서 가장 눈에 띄는 차이점은 내비게이션의 위치가 확 연히 다르다는 점이다. iOS에서는 내비게이션 영역이 상단에 있지만, 안드로이드의 경우에 는뒤로가기, 홈, 다중작업버튼이있는하단바를내비게이션바라고부르며iOS의내비 게이션 바라는 용어 대신에, 액션 바라는 명칭을 사용한다. 또 안드로이드에서는 액션 바 를 위쪽에 배치하는데 그 이유는 안드로이드 화면 하단 내비게이션 바가 항상 고정되어 있기 때문에 탭을 하단에 중복해서 배치할 경우 사용자의 조작 실수가 발생할 수 있기 때 문이다. 또 안드로이드 사용자들은 작업 도중 이전 작업으로 되돌아가고자 할 때, 화면 하 단의 뒤로 가기 버튼을 누르면 되기 때문에 하단 영역에 탭을 배치하지 않는다.

검색 바(search bars)

iOS에서는 내비게이션 바 바로 아래에 검색 바를 제공하지만, 안드로이드에서는 검색 버 튼을 액션 바 내에 포함해 감색 기능을 제공한다.

목록보기 메뉴(drop down menu)

iOS의 경우, 화면 전체에 드롭다운 목록을 표시하는 UI 디자인을 사용하지만, 안드로이드 에서는 드롭다운 목록이 팝업(pop up) 형식으로 화면의 일정 영역에만 표시되는 UI 디자 인을 적용한다. 또 iOS 앱에서는 사용자가 목록 표시 메뉴를 가릴 수 있도록 취소 버튼을 제공하지만, 안드로이드 앱에서는 하단 내비게이션의 되돌아가기 버튼을 사용할 수 있으 므로 화면에는 취소 버튼을 별도로 제공하지 않는다.

옵션과 폰트 크기

iOS 앱에서는 사용자에게 여러 가지 선택 옵션을 제공하여 사용자의 직접 선택을 유도하 는 UI 디자인 방식을 사용한다. 하지만, 안드로이드 앱에서는 드롭다운 목록을 제공하는 UI 디자인 방식을 사용한다. 또 폰트 크기에서도 운영체제별 차이가 나타나는데, iOS에서 제공하는 폰트 크기보다 안드로이드 앱에서의 폰트 크기가 훨씬 큰 것을 알 수 있다.

댓글
댓글쓰기 폼
공지사항
Total
9,907
Today
37
Yesterday
40
링크
«   2018/09   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
글 보관함