Workshop 모바일 화면 설계

작은 화면과 터치 입력에서는 데스크톱과 다른 배치를 사용합니다. iOS와 Android의 이동 방식, 조직이 사용하는 브라우저와 기기 크기도 함께 고려합니다. Workshop이 일부 위젯을 모바일에 맞게 바꾸더라도 페이지 구성과 입력 흐름은 제작자가 설계합니다.

스크롤할 수 있는 본문

데스크톱의 좌우 접이식 섹션은 모바일에서 조작 지점을 찾거나 누르기 어렵고 펼친 내용이 들어갈 공간도 부족합니다. Flow 레이아웃에 여러 위젯을 세로로 배치하면 사용자가 내용을 스크롤하며 볼 수 있습니다.

요약 정보나 액션 버튼을 화면에 계속 남겨야 한다면 Toolbar 또는 Rows 안에 Flow를 넣습니다. 위나 아래의 고정 영역과 스크롤하는 본문을 나누는 방식입니다.

구성 절차는 항공편 상세 페이지에 설명합니다.

터치하기 쉬운 버튼

Button Group은 대부분의 경우 Large style을 사용하여 터치할 수 있는 크기를 확보합니다. 배치에 맞으면 Fill available horizontal space를 켜서 가로 공간도 활용합니다.

여러 선택지를 제공할 때에는 Menu 버튼 유형을 사용할 수 있습니다. 모바일에서는 상위 버튼을 누르면 하단 드로어가 열리고 그 안에서 구성한 하위 버튼을 선택합니다.

복잡한 입력은 drawer로 분리

텍스트와 숫자 입력 또는 여러 필터를 한꺼번에 조정할 때에는 드로어로 해당 작업에 집중할 공간을 제공합니다. 모바일의 액션 폼도 드로어에서 열립니다. Button Group의 액션 버튼을 사용하면 사용자가 전체 화면에서 폼을 작성할 수 있습니다.

여러 조건으로 목록을 좁힐 때에는 Filter list를 드로어 안에 넣고 여는 버튼을 별도로 둡니다. 목록에는 결과를 보여 주고 조건을 바꿀 때 입력 화면을 여는 구성입니다. 항공편 필터 드로어의 단계를 사용할 수 있습니다.

여러 단계의 작업은 상세 페이지로 이동

특정 객체를 자세히 보거나 그 객체에 액션을 실행할 때에는 별도 페이지를 만듭니다. 관련 정보를 표시할 위젯을 넣고 목록의 객체 선택 같은 이벤트에 페이지 전환을 연결합니다.

Mobile application launcher로 연 앱은 브라우저의 뒤로 및 앞으로 이동을 지원하므로 사용자가 상세 화면에 들어간 뒤 목록으로 돌아올 수 있습니다.

최상위 업무와 앱 나누기

모바일의 최상위 페이지는 대상 사용자의 업무에 맞춰 단순하게 구성합니다. 보통 객체를 찾고 필터링한 뒤 상세 페이지에서 내용을 확인하거나 액션을 실행하는 형태가 적합합니다.

한 사용자 집단에 여러 업무를 제공하려면 Mobile Navigation Bar의 각 항목을 최상위 페이지에 연결합니다. 서로 다른 객체 유형을 보여 주거나 같은 객체 집합을 다른 방식으로 찾는 페이지를 나눌 수 있습니다.

예를 들어 기술자의 업무 앱에서 My tasks는 현재 사용자에게 배정된 진행 중 업무, Task search는 모든 기술자의 업무 검색, History는 사용자가 완료한 업무를 보여 줄 수 있습니다.

하단에는 최대 네 항목을 표시하고 하위 메뉴로 더 많은 항목을 제공할 수 있습니다. 여러 탭이 필요할 정도로 업무가 커지면 목적별 앱으로 분리하는 것도 검토합니다. 사용자는 Launcher에서 앱을 바꿀 수 있으며 각 앱의 기능과 로드 범위를 작게 유지할 수 있습니다.