01 of 09
UXPin으로 시작하는 법
모바일 디자인, 앱 디자인 및 반응 형 디자인의 영역으로 이동함에 따라 UX (User Experience) 및 와이어 프레임 , 대화 형 프로토 타이핑 및 모형에 대한 관심이 증가하고 있습니다. 이 틈새 시장을 겨냥한 수많은 도구가 있으며 복잡하고 기능이 많은 거물급 기업에서 스파 스와 간신히 유용하게 사용할 수 있습니다. 내 눈을 사로 잡은 도구 중 하나는 UXPin은 디자이너가 디자이너를 위해 개발했기 때문입니다.
우리가 앞으로 나아 가기 전에 ... 경고. 귀하가 소프트웨어를 소유하고자하는 조직이라면 UXPin은 귀하를위한 것이 아닙니다. 이 응용 프로그램에서 수행 된 모든 작업은 브라우저에서 수행되며 저장 한 프로젝트는 계정에 저장됩니다.
UXPin을 시작하려면 브라우저를 실행하고 UXPin으로 이동하십시오. 여기에서 무료 평가판에 가입하거나 예상되는 필요에 따라 월간 계획을 준비 할 수 있습니다. 등록 과정은 매우 쉽습니다. 일단 사용자 이름과 암호를 설정하면 시작할 준비가 된 것입니다.
02 of 09
UXPin에서 프로젝트를 시작하는 방법
로그인하면 대시 보드에 도착하고 여기에서 새 와이어 프레임, 새로운 모바일 프로젝트 또는 반응 형 웹 디자인 프로젝트를 만들 수 있습니다. 또한 UXPin 용 플러그인을 통해 Photoshop 또는 Sketch 프로젝트를 가져올 수 있습니다. 이 방법은 일부 텍스트 배너를 만들고 배너에 이메일 버튼을 추가하는 방법입니다. 이를 위해 새 와이어 프레임 만들기를 선택했습니다.
03 of 09
UXPin 인터페이스 사용법
디자인 표면은 네 영역으로 나뉩니다. 왼쪽 검은 영역에는 대시 보드로 돌아가서 사용할 요소를 열고 스마트 요소 패널을 열고 요소를 검색하고 페이지에 메모를 추가하고 팀 구성원을 추가 할 수있는 일련의 도구가 있습니다. 하단에는 간단한 자습서를 여는 버튼과 계정에 액세스 할 수있는 버튼, FAQ에 액세스 할 수있는 버튼이 있습니다. 질문을하고 피드백을 제공합니다.
상단의 파란색 영역에는 일련의 도구와 속성이 있습니다. 오른쪽에있는 더 어두운 버튼을 사용하면 디자인을 반복하고 프로젝트 설정을 조정하고 페이지를 공유하고 페이지의 브라우저 내 시뮬레이션을 수행 할 수 있습니다.
요소 패널은 디자인 표면의 조각을 잡고 프로젝트 이름을 지정하고 페이지를 추가하거나 제거하는 곳입니다.
Elements 라이브러리는 UX 디자이너에게 즐거운 놀라움입니다. 이 팝 다운을 통해 iOS에서 Android Lolipop에 이르는 30 개 라이브러리 중에서 선택할 수 있습니다. 또한 글꼴 썸네일 아이콘, 모바일 용 제스처 아이콘 및 소셜 위젯 모음과 함께 부트 스트랩 및 파운데이션 요소에 액세스 할 수 있습니다.
04 of 09
요소를 UXPin 페이지에 추가하는 방법
시작하려면 Box 요소를 디자인 화면으로 드래그하고 마우스를 놓으면 속성 패널이 열립니다. 속성 버튼을 사용하여 요소의 이름을 지정하고 요소의 폭 높이 및 위치 값을 설정할 수 있습니다. 요소에 패딩을 추가하고 모서리를 반올림하고 불투명도를 조정할 수도 있습니다. 배경색 버튼을 클릭하면 RGBA 색상 선택기가 열립니다.
선택한 요소에 글꼴, 테두리 및 패턴을 지정할 수도 있습니다. Lightning Bolt는 선택한 요소에 상호 작용 기능을 추가 할 수있는 기능을 제공합니다.
09 년 5 월
UXPin에서 텍스트를 추가하고 서식을 지정하는 방법
텍스트를 추가하려면 텍스트 요소를 디자인 화면으로 드래그하고 텍스트를 입력하십시오. 텍스트 속성 단추를 클릭하여 글꼴 속성을 열고 텍스트 서식을 지정합니다. 더미 텍스트 블록이 필요한 경우 텍스트 요소를 추가하고 글꼴 속성에서 LOREM IPSUM 생성 버튼을 클릭하십시오.
06 년 6 월
UXPin 페이지에 이미지를 추가하는 방법
이 작업을 수행하는 데는 몇 가지 방법이 있습니다. 도구 모음에서 이미지 도구 를 사용하거나 라이브러리에서 이미지 요소를 추가하거나 위에 표시된 것처럼 바탕 화면의 이미지를 디자인 화면의 요소 위에 끌어서 놓기 만하면됩니다.
07 09
UXPin 페이지에 단추를 추가하는 방법
Button 요소가 있지만 위에 표시된 것처럼 검색 영역에 " Button "을 입력하면 모든 라이브러리에있는 모든 단추가 열립니다. 당신을 위해 작동하는 것을 디자인 화면으로 드래그하고 속성을 사용하여 색상, 글꼴 및 테두리 반경을 변경하십시오. 버튼 안의 텍스트를 변경하려면 텍스트를 한 번 클릭하고 새 텍스트를 입력하십시오.
08 년 9 월
UXPin 페이지에 대화 형 작업을 추가하는 방법
이것은 처음 나타나는 것처럼 복잡하지 않습니다. 전자 메일 입력의 경우 입력 요소를 추가하고 크기를 조정하고 텍스트를 입력 한 다음 텍스트 서식을 지정했습니다. 입력 요소를 선택한 상태 에서 속성 버튼을 클릭하고 요소 속성이 표시되면 패널의 오른쪽 위 모서리에있는 가시성 버튼 - 안구 -을 클릭합니다.
버튼을 선택하고 속성에서 Interactions 버튼 - Lightning Bolt를 클릭하십시오. 상호 작용 패널이 열리면 새 상호 작용을 선택하십시오. 트리거 팝업에서 클릭을 선택하십시오. 작업 영역에서 요소 표시를 선택합니다. 표시 할 요소를 묻는 메시지가 표시됩니다. 총 사이트를 한 번 클릭하고 입력 요소를 클릭하십시오. 요소가 식별되면 요소를 애니메이션화할지 여부를 결정할 수 있습니다. 이 경우 입력 상자를 쉽게 표시하고 기본 지속 시간 값 300ms를 사용하기로 결정했습니다.
또한 단추를 클릭 할 때 오른쪽으로 약 65 픽셀 이동해야합니다. 버튼을 선택하고 상호 작용 패널을 열고 새 상호 작용을 선택했습니다. 나는이 설정을 사용했다 :
- 방아쇠 : 클릭
- 액션 : Move By
- 이동 방향 : x 축에서 65 픽셀
- 애니메이션 : 선형
- 소요 시간 : 300 ms
상호 작용을 제거하려면 요소를 선택하고 상호 작용 패널을 엽니 다. 패널에서 상호 작용을 선택하고 휴지통을 클릭하여 삭제하십시오.
09 09
UXPin에서 페이지를 테스트하는 방법
브라우저에서 작업 중이므로 테스트는 간단합니다. 디자인 시뮬레이션 버튼을 클릭하십시오. 페이지가 브라우저에서 열리고 테스트 할 수 있습니다. 또한, 페이지, 사용성 테스트, 라이브 공유, 편집 및 대시 보드로 돌아 가기 등 여러 페이지가있는 경우 댓글, 사이트 맵을 허용하는 페이지의 왼쪽에 패널이 추가됩니다.
페이지 하단에는 대화 형 요소를 표시하고, 주석을 표시하거나 숨기고, 다른 사람들과 프로젝트 링크를 공유 할 수있는 또 다른 작은 패널이 있습니다.