사용자 인터페이스 레이아웃

복사하려면 클릭

UI 레이아웃을 구축하기 위한 5가지 필수 팁.


편집기에서 시각적 부분을 완전히 디자인하고 언제든지 원하는 대로 조정 및 변경할 수 있습니다. 앱을 게시하고 사용자가 앱을 사용하기 시작한 후에도 데이터 손실 위험 없이 모양과 페이지 레이아웃을 완전히 변경할 수 있습니다!

따라서 편집기로 전환하기 전에 프로젝트를 어떤 형식으로 제시하느냐는 그다지 중요하지 않습니다. Figma의 프로토타입이나 Photoshop의 이미지, 그림판의 그림이나 프리핸드 스케치, Excel 스프레드시트의 다이어그램이 될 수도 있습니다. 가장 중요한 것은 작동 방식에 대한 명확한 아이디어가 있다는 것입니다.

그러나 고려해야 할 몇 가지 중요한 사항이 있습니다.

필요한 앱 결정: 웹 또는 모바일

상호 연결되는 두 가지 버전의 응용 프로그램을 만들 수 있습니다. 일부 사용자는 모바일 장치에서 작업하고 일부는 개인용 컴퓨터에서 작업하며 데이터는 공유됩니다. 디자인이 다를지라도.

다양한 편집기가 모바일 및 웹 응용 프로그램을 구축하는 데 사용되므로 시작하기 전에 작업의 세부 사항을 일반적인 용어로 이해하는 것이 중요합니다.

사용자 그룹 정의

어떤 기능을 사용할 수 있는지에 따라 사용자를 그룹으로 나누고 얼마나 다른지 분석합니다.

우리는 사용자와 관리자로 나누는 것에 대해서만 이야기하는 것이 아닙니다. 다른 액세스 수준을 가진 클라이언트나 다른 부서의 직원이 애플리케이션을 사용하는 경우 특정 사용자가 사용할 수 있는 기능과 데이터에 따라 개별 요소와 전체 페이지를 숨기거나 표시할 수 있습니다.

실례가 필요합니다

귀하와 유사한 앱을 최대한 많이 찾으십시오. 원하는 기능을 추가하여 그 중 하나를 기반으로 사용할 수도 있고 여러 응용 프로그램의 기능을 하나로 결합할 수도 있습니다. 장점과 단점에 대한 설명과 함께 후보 목록을 만드십시오. 레이아웃을 작성할 때뿐만 아니라 기술 지원에 문의하여 조언을 구하고, 프로젝트 수행자와 투자자를 찾고, 새로운 아이디어를 생성할 때에도 유용합니다.

페이지를 자세히 설명

지원서에 어떤 페이지가 포함될 것인지, 각 페이지에 어떤 정보가 표시되어야 하는지 명확하게 이해해야 합니다.

일반적으로 응용 프로그램에는 다음이 포함됩니다.

  • 홈 페이지: 등록 여부에 관계없이 모든 사용자가 이 페이지를 방문합니다.
  • 관리자 포털: 설정 및 계정을 관리합니다.
  • 액세스 수준이 다른 사용자를 위한 별도의 페이지.
  • 특정 작업을 수행하면 팝업 페이지가 나타납니다.
  • 사용자에 대한 서비스 메시지와 작업 확인(예: 데이터 전송 동의)이 있는 별도의 창을 잊지 마세요.

데이터 교환을 잊지 마세요

애플리케이션이 데이터를 가져갈 위치와 데이터를 보낼 위치를 생각하십시오. 모든 정보가 사용자로부터 나오나요? 어떤 프로세스를 자동화할 수 있습니까?

일부 데이터는 사이트에서 가져오거나 회계 프로그램에서 다운로드할 수 있습니다. 애플리케이션 로그인을 단순화하려면 Google 또는 Facebook과 같은 대규모 서비스의 인증을 사용하십시오. 이를 위해서는 "데이터 업로드" 또는 "Facebook으로 로그인" 버튼과 같은 별도의 인터페이스 요소가 필요합니다.

한번에 다 생각하기 어렵다면 최소한의 필요한 기능으로 레이아웃을 만들고 앞으로 추가하고 싶은 생각을 따로 적어보세요. 어려움이 있는 경우 기술 지원의 텔레그램 채널에 글을 남겨주세요. 항상 기꺼이 도와드리겠습니다!