UX / UI 디자이너를위한 상위 9 개의 무료 및 유료 프로토 타이핑 툴

UX를위한 최고의 프로토 타이핑 툴 알아보기 & 보다 빠르고 효과적인 제품 제작을 지원하는 UI 디자이너.


UX / UI 디자이너를위한 최고의 프로토 타입 툴

프로토 타입은 천 회의보다 더 잘 작동합니다.

결국, 그것은 미래의 사용자와 이해 관계자가보고 클릭 할 수있는 것입니다. 피드백을 수집하고 제품을 개선 할 수있는 좋은 방법입니다..

그렇기 때문에 디자이너는이 단계에서 최선을 다하고 있으며 올바른 도구가 도움이 될 수 있습니다..

그러나 무료, 유료, 웹 기반 및 데스크톱 앱과 같은 수많은 앱에서 길을 잃기가 어렵습니다..

올바른 소프트웨어를 선택하는 데 도움을주기 위해 2020 년 동안 최신 유행의 효과적인 프로토 타이핑 도구 9 가지를 나열했습니다..

확인해 봅시다.

최고의 무료 프로토 타이핑 툴

무료 프로토 타이핑 도구를 사용할 수있을 때 소프트웨어에 수백 달러를 소비하는 시점?

그러나 무료 도구는 대부분 기능이 제한되어있어 단순합니다. 대규모 개발자 팀과 UI / UX 디자인 작업을하는 경우 작동하지 않습니다..

그래도 비즈니스 웹 사이트와 같은 단일 프로젝트에서 작업하는 경우 무료 도구로 충분할 수 있습니다.

시험해보고 싶은 프로토 타이핑 도구 몇 가지를 모았습니다. 비용이 들지 않습니다..

어도비 XD

플랫폼: macOS, Windows

Adobe XD 프로토 타이핑 도구 스크린 샷

어도비 XD 놀랍도록 간단하지만 사용하기 쉬운 인터페이스를 제공하여 다른 Creative Cloud 앱과 일치.

프로토 타입 섹션에서 디자이너는 대지 또는 화면을 연결하고 완성 된 프로토 타입을보고 고객의 검토를 위해 공유 할 수 있습니다..

핵심 기능 :

  • 와이어 프로토 타입 흐름. 디자이너는 디자인 모드에서 프로토 타입으로 전환하고 대지를 연결할 수 있습니다. 멀티 스크린 앱의 흐름을 전달하고 다른 시나리오 간을 전환하는 데 도움이됩니다..
  • 음성 프로토 타이핑. 제작자는 음성 트리거 및 음성 재생을 사용하여 프로토 타입과 상호 작용합니다. 간단히 말해 Adobe XD 디자이너는 음성 명령을 트리거로 사용할 수 있습니다..
  • 기기 iOS 및 Android 미리보기. iOS 또는 Android 앱용 프로토 타입을 제작할 때 디자이너는 XD 모바일 앱을 사용하여 호환되는 장치에서 자신의 작업을 미리 볼 수 있습니다. 따라서 앱을 동시에 미리보고 테스트 할 수 있습니다..
  • 스케치, Photoshop 및 Illustrator 파일 가져 오기. Adobe 디자인 도구는 서로 호환되므로 Illustrator에서 하나의 요소를 복사하여 Adobe XD에 붙여 넣을 수 있습니다. Adobe 툴 외에도 Sketch 용 플러그인도 있습니다.

초보자 계획 사용자는 무제한 공유 문서, 편집자 및 공유 링크에 액세스 할 수 있습니다 (2020 년 4 월까지).

비전

플랫폼: 웹 기반

프로토 타입 툴 스크린 샷

비전 와이어 프레이밍, 프로토 타이핑 및 목업에 가장 널리 사용되는 도구입니다..

핵심 기능 :

  • 풍부한 대화식 프로토 타입 제작. 디자이너가 InVision을 효율적으로 처리하고 새로운 깔끔한 프로토 타입을 만드는 데 도움이되는 주요 기능.
  • 댓글 남기기. 디자인 팀은 다른 프로토 타입에 대한 의견을 작성할 수 있습니다. 또한 변경 기록을 확인할 수 있습니다. 파일을 편집하자마자 업데이트됩니다..
  • 동기화. 프로젝트는 Google 드라이브 또는 Dropbox와 같은 클라우드 저장소와 동기화됩니다. InVision에는 워크 플로를 효율적으로 구성하기위한 프로젝트 관리 시스템도 있습니다.
  • 플러그인. 사용자가 Sketch 및 Photoshop에서 디자인을 InVision으로 보낼 수있는 일부 플러그인.

무료 요금제는 무제한 화면을 갖춘 하나의 프로토 타입을 제공하며 개별 디자이너에게 충분할 수 있습니다..

마블

플랫폼: 웹, iOS, 안드로이드

마블 프로토 타입 도구 스크린 샷

마블 플랫폼에 따라 사전 설치된 요소 (버튼, 메뉴)가있는 또 다른 프로토 타입 도구입니다..

핵심 기능 :

  • 현실적인 프로토 타입 제작. 설계자는 몇 분 안에 디자인 모형을 대화 형 모바일 또는 웹 프로토 타입으로 전환 할 수 있습니다. 한 줄의 코드를 작성하지 않고.
  • 사용자 테스트. UX는 모든 디지털 제품을 만드는 데 중요한 역할을하므로 베타 테스트 중에 설계자가 사용자로부터 피드백을 받고 고객의 요구에 맞게 변경할 수 있습니다..
  • 자동화 된 설계 사양 생성. Marvel에는 디자이너가 URL을 보내서 개발자에게 디자인을 전달할 수있는 통합 된 Handoff 도구가 있습니다..

Marvel 앱을 사용하는 것은 매우 쉽습니다. – 인터페이스가 명확하여 초보자도 처리 할 수 ​​있습니다..

또한 Marvel에는보다 나은 상호 작용과 생산적인 작업을위한 Sketch 용 플러그인이 있습니다..

피그 마

플랫폼: 웹 기반

피그 마 프로토 타입 툴 스크린 샷

피그 마 스케치와 유사한 클라우드 기반 디자인 도구이지만 팀 협업에 훨씬 좋습니다.

Firma는 전환을 사용하여 프로토 타입을 제작하는 것을 매우 간단하게 해주 며,이를 위해 단일 타사 앱을 다운로드 할 필요가 없습니다..

핵심 기능 :

  • 부드러운 핸드 오프. UI / UX 팀이해야 할 일은 개발자와 링크를 공유하는 것 뿐이며, 정보, 그래픽 자산, 내보낼 준비가 된 측정 값에 액세스 할 수 있습니다..
  • 올인원 플랫폼. 설계자는 설계 파일과 라이브 프로토 타입간에 쉽게 전환 할 수 있습니다. 수정 사항은 프로토 타입에 즉시 나타납니다..
  • 협동. 고객을 포함한 팀원은 완성 된 설계를 쉽게 검토하고 실시간으로 피드백을 남기며 Figma에 통합 된 Slack을 통해 통신 할 수 있습니다..
  • 플러그인. 디자이너는 Unsplash, Figmotion, Color Bling 등과 같은 플러그인을 사용하여 Figma의 핵심 기능을 확장 할 수 있습니다. 현재 100 개 이상.

피그 마는 최대 2 명의 편집자와 3 개의 프로젝트로 개별 디자이너에게 무료입니다..

웹 플로우

플랫폼: 웹 기반

Webflow 프로토 타입 도구 스크린 샷

웹 플로우 다목적 도구이며, 알고 싶다면 최선의 선택이 될 것입니다 웹 디자인을 만드는 방법 – 그리고 많은 연습.

Webflow를 사용하면 웹 사이트 UI, 애니메이션 및 레이아웃 및 추가 게시를 만듭니다..

핵심 기능 :

  • 나타나게 하다&디자인. 설계자는 필요한 모든 표준을 준수하는 깨끗한 코드로 설계를 변환합니다. 또한 디자이너도 개발자가됩니다.
  • 3D 애니메이션 / 변환. UI / UX 팀은 코드를 작성하지 않고도 3D CSS 변환을 만듭니다..
  • 광범위한 구성 요소. Webflow에는 사용자 정의 가능한 양식, 드롭 다운 메뉴, 탭, 반응 형 웹 사이트 탐색 등이 포함됩니다..
  • 웹 플로우 CMS. Webflow CMS를 사용하면 웹 사이트 소유자가 모든 브라우저 또는 장치에서 사이트를 관리 할 수 ​​있습니다.
  • 통합. 본격적인 웹 사이트 빌더 인 Webflow는 Google Analytics, Google Optimize, MailChimp, Zapier와 통합되었습니다..

따라서 Webflow는 모든 것을 스스로 수행해야하는 설계자에게 탁월한 선택입니다..

최고의 유료 프로토 타이핑 툴

유료 소프트웨어를 사용하면 무제한 디스크 공간, 새로운 유용한 기능, 전용 플러그인 및 글꼴 등의 혜택을 누릴 수 있습니다..

2020 년에 프로토 타이핑 툴이 어떤 가치가 있는지 알아 봅시다.

스케치

플랫폼: 맥 OS

스케치 프로토 타입 도구 스크린 샷

UI 디자인에 익숙해 졌다면 이것에 대해 들어 본 적이 있습니다. 오늘, 스케치 가장 인기 있고 강력한 프로토 타이핑 도구 중 하나입니다..

스케치를 통해 사용자는 와이어 프레임, 모형 및 프로토 타입을 제작하고 여러 플러그인으로 인해 다른 프로토 타입 도구와 상호 작용할 수 있습니다. 

핵심 기능 :

  • 프로토 타이핑. 사용자는 Sketch를 사용하여 대화 형의 강력한 프로토 타입을 만들고 디자인을 미리 보면서 실제 작동 방식을 확인할 수 있습니다.
  • 벡터 편집. Sketch는 벡터 기반 디자인 도구이므로 UI ​​팀은 벡터 편집 기능을 사용하여 기존 모양을 만들고 편집합니다..
  • 프리셋 추가, 저장, 내보내기. 디자이너는 즐겨 찾는 사전 설정을 만들어 Sketch에 저장합니다. 그런 다음이 사전 설정을 내보내 팀 구성원과 공유 할 수 있습니다..
  • 코드 내보내기. 디자인을 코드로 내보낼 수 있습니다. 따라서 디자이너와 개발자 간의 협업에 기여합니다..
  • 수백 개의 플러그인. Sketch는 설계 프로세스를 단순화하고 전반적인 경험을 향상시키는 유용한 플러그인을 많이 제공합니다..

비용: 개인 라이센스의 경우 $ 99

원리

플랫폼: 맥 OS

기본 프로토 타입 도구 스크린 샷

원리 애니메이션 및 대화식 인터페이스를 구축하는 데 널리 사용되는 프로토 타이핑 도구.

핵심 기능 :

  • 애니메이션 인터페이스 구축. 원리를 통해 디자이너는 대화 형 및 애니메이션 사용자 인터페이스를 만들 수 있습니다.
  • 프로토 타입 내보내기 및보기. 설계자가 전화기에서 프로토 타입이 어떻게 보이는지 확인해야하는 경우 iPhone 용 Principle 앱을 다운로드하고 스마트 폰을 Mac에 연결하여 미리보기를 테스트 할 수 있습니다..
  • 여러 화면. 다중 화면 앱에 대해 여러 화면을 만들 수 있습니다.
  • 수입. 디자이너는 스케치 파일을 가져 와서 정적 인 경우 애니메이션으로 만듭니다..

비용: $ 129

플랫폼: macOS, Windows

Axure 프로토 타입 도구 스크린 샷

디자이너가 웹 및 모바일 플랫폼 모두에 대한 프로토 타입을 제작할 수 있도록하는 진보적 인 UX 프로토 타입 도구.

핵심 기능 :

  • 프로토 타이핑. 최신 Axure 버전 (RP 9)에는 터치 커서 및 모바일 스크롤바가 포함 된 모바일 모드가 제공되어 모바일 환경, 스케일링 옵션, 다음 / 이전 페이지의 바로 가기 등을 향상시킵니다..
  • 양식 위젯. Axure는 타이포그래피, 테두리 및 채우기 등의 스타일을 사용자 정의하여 디자이너가 사용자 정의 요소를 추가 할 수있는 스타일 효과를 제공합니다..
  • 문서 추가. 설계자는 프로토 타입 및 다이어그램에 문서를 포함 할 수 있습니다. 프로토 타입의 작동 방식, 앱의 주요 구성 요소 등 각 프로토 타입 또는 다이어그램에 대한 자세한 정보를 작성하는 데 도움이됩니다..
  • 높은 수준의 협업. 디자이너는 Axure에서 동료와 함께 동일한 프로토 타입으로 작업합니다. 주주 또는 잠재적 사용자와 디자인을 쉽게 공유하여 피드백을받을 수 있습니다..

비용: 매월 Axure RP 9 Pro 버전의 경우 29 달러 (495 달러 – 영구)

JustInMind

플랫폼: macOS, Windows

Just In Mind 프로토 타입 도구 스크린 샷

의 가장 큰 장점 중 하나 JustInMind 프로토 타이핑 도구는 데스크탑 버전입니다. 인터넷에 연결되어 있지 않아도 컴퓨터에 설치하여 오프라인 모드로 작업 할 수 있습니다.

핵심 기능 :

  • 사전로드 된 UI 키트. JustInMind에는 웹 및 모바일 버전의 프로토 타입을보다 쉽고 빠르게 만들 수있는 UI 키트가 포함되어 있습니다..
  • 요구 사항 관리. 디자이너는 모든 프로젝트 요구 사항을 프로토 타이핑 프로세스 및 링크 텍스트에 추가 할 수 있습니다. 이러한 방식으로 모든 요구 사항을 관리하고 각 요구 사항이 수행되도록합니다..
  • 완성. JustInMind는 Sketch, Adobe Suite, JIRA와 통합되어 협업 프로세스를 확장 할 수 있습니다.
  • 협동. 디자이너는 팀 구성원과 작업을 공유하고 신속하게 협업하며 의견을 남깁니다..

비용: 월 $ 29 (연간 $ 228)

그게 다야! 보시다시피 개별 디자이너 및 팀 플레이어를위한 다양한 프로토 타이핑 도구가 있습니다..

사용하는 것은 귀하에게 달려 있으므로 현명하게 선택하십시오.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map