Adobe XD를 사용하여 UI에서 설정에 대한 켜기/끄기 스위치를 디자인하여 앱 사용자에게 명확한 시각적 피드백을 제공하세요.
배송 업데이트에서 끄기로 된 스위치가 표시된 스마트폰을 든 손

따라 하려면 실습용 샘플 파일을 다운로드하거나 직접 디자인해 보십시오. 

기본 모양을 결합하여 UI 스위치의 켜기 및 끄기 상태를 만들 수 있습니다. 이 스위치의 경우 모서리가 둥근 사각형과 원으로 구성되어 있습니다. 먼저 사각형의 앞 왼쪽에 원을 만들어 끄기 상태를 디자인합니다. 그런 다음 두 모양을 복사하고 원을 오른쪽으로 이동하여 켜기 상태를 디자인합니다.

사각형과 타원 툴, 안에 원형이 있는 두 타원, 테두리 반경이 18임

모양 패널에서 색상, 모양, 음영을 다양하게 적용하여 원하는 스타일을 만들어 보십시오. 또한 텍스트를 스위치 요소에 직접 추가하여 다른 상태의 레이블을 지정할 수 있습니다.

4개의 스위치 스타일, 2개는 텍스트로, 2개는 색상으로 상태 표시

다음은 이 앱 디자인에 맞게 만든 스위치 요소 스타일입니다.

나란히 있는 앱 화면에서 왼쪽은 회색 끔 UI, 오른쪽은 노랑 켬 UI

각 스위치의 구성 요소를 하나의 그룹으로 결합하고 아트보드 디자인에 놓습니다. 프로토타입 모드로 이동하고 끄기 스위치는 켜기 아트보드로, 켜기 스위치는 끄기 아트보드로 연결합니다. 스크롤 위치를 그대로 유지하여 매끄러운 사용자 경험을 만듭니다.

회색 스위치가 선택됨, 전환은 디졸브, 이징은 서서히 끝내기 설정

앱에서 사용자 설정으로 사용할 나만의 UI 스위치를 만들어 보시기 바랍니다.

09/02/2020

Adobe Stock 컨트리뷰터: Farknot Architect

이 페이지가 도움이 되었습니까?