Adobe XD CC를 사용하여 UI에서 설정에 대한 켜기/끄기 스위치를 디자인하여 앱 사용자에게 명확한 시각적 피드백을 제공할 수 있습니다.
create-ui-switch_1000x560

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

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

create-ui-switch_step1

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

create-ui-switch_step2

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

create-ui-switch_step3

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

create-ui-switch_step4

여러분도 앱에서 사용자 설정에 대한 고유한 UI 스위치를 만들어 보시기 바랍니다.

11/06/2018

Adobe Stock 콘텐츠 제공: Farknot Architect

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