it-swarm-ko.com

어떤 프로토 타이핑 툴?

이것은 다음 질문에 크게 연결됩니다.

그러나 제안을 "웹 기반"도구로 제한하고 싶지 않았지만 과거에 프로토 타입, 와이어 프레이밍 및 목업을 위해 다음과 같은 도구를 찾아서 사용했습니다.

또한 일부 디자이너는이 작업에 Photoshop 및 Illustrator와 같은 그래픽 응용 프로그램을 사용하기로 선택한다는 것을 알고 있습니다.

이것은 커뮤니티 위키 질문이므로 생각과 함께 게시하고 답변 당 하나의 패키지로 유지하여 커뮤니티가 이러한 도구에 대해 어떻게 느끼는지에 대한 아이디어를 구축 할 수 있도록하십시오.

34
Richard Slater

프로토 타입을 최소한 두 개의 스레드로, 애니메이션과의 세부적인 상호 작용을 이해하려는 경우 세 개의 스레드로 유지하는 것이 중요합니다.

스레드 1 : 흐름, 기능, 형태 및 데이터

  • 종이로 시작 (실제로 다른 사람들과의 화이트 보드 디자인 세션). 화면 흐름, 특히 중요한 화면의 주요 기능 및 잠재적 레이아웃에 중점을 둡니다. 적어도 두 가지 다른 아이디어를 시도하십시오.
  • Balsamiq의 다음 수준의 충실도. 기능적인 세부 사항을 추가하고, 레이아웃을 조정하고, 구체적이고 의미있는 샘플 데이터를 화면에 추가하십시오 (설명 가능한 시나리오의 맥락에서).
  • 화면과 단계별 예상 단일 상호 작용 시나리오 및 다음 예상되는 특정 상호 작용을 함께 묶어 워크 플로 프로토 타입을 만듭니다. 모든 화면 모형을 순서대로 배치하여 PowerPoint를 사용하는 경향이 있습니다. 이 프로토 타입을 사용하면 개념, 워크 플로, 기능 요구 사항, 용어 등을 수정하는 데 매우 효과적인 복수 연습 을 통해 실제 사용자와 조기 피드백을받을 수 있습니다.
  • 일찍, 자주, 빠르게 반복하십시오.

스레드 2 : 비주얼 프로그램 및 스타일

  • 스레드 1의 일부 키 모형을 사용하여 Photoshop 또는 기타 유사한 메커니즘을 사용하여 픽셀 수준의 세부 정보로 시각화합니다 (comp). 색상, 비율, 시각적 은유, 타이포그래피 등을 탐색하십시오. 3 가지 이상의 아이디어를 생성하십시오.
  • 워크 플로우 프로토 타입과 독립적으로 이에 대한 피드백을받습니다. 환경 설정 테스트, AB 테스트, 비평, charettes 등을 사용하십시오.
  • 반복하고 개선하십시오.

스레드 3 : 자세한 상호 작용 및 애니메이션

  • 하나의 세부적인 상호 작용 또는 애니메이션 시퀀스에 초점을 맞추면 HTML/CSS/JS, Flash, 저수준 프로그래밍 언어, UI 구성 요소 프레임 워크/라이브러리 등 가장 적합한 도구로 기능적 프로토 타입을 해킹 할 수 있습니다. .
  • 타이밍 데이터 수집을 포함하여 적은 수의 짧은 사용성 테스트를 실행하십시오. 비교 테스트를 수행하십시오. 키 스트로크/마우스 클릭/제스처를 계산합니다.
  • 반복하고 개선하십시오.

요약하면 특정 목적을 위해 특정 종류의 프로토 타입을 제작하여 특정 질문에 답변 할 수 있습니다. 모든 상황에 적합한 유형은 없습니다. 작업 흐름/기능 피드백 루프에서 미학적 문제를 방지하십시오. 다양한 유형의 질문에 적절하고 효과적인 방법을 사용하십시오. "하천을 건너지 마십시오."

거의 모든 기본 설계 개선 사항이 스레드 1과 스레드 2에서 나왔지만 표준 컨트롤을 넘어서거나 도메인이 새로운/복잡한/특정 (예 : 제스처 상호 작용, 다차원 모델) 인 경우 스레드 3이 필요합니다. 조작, 새로운 OS에 대한 사용자 정의 컨트롤, 일부 차원에서 인간의 성능을 최적화).

35
Jim Jarrett

연필 은 UI 모형을 만들기위한 좋은 도구입니다. Firefox 애드온 또는 독립형 응용 프로그램 으로 사용할 수 있습니다.

alt text

무료이고 오픈 소스 인 경우 언급 된 다른 도구들보다 장점이 있습니다.

12
david4dev

얼마 전에 "스케치하거나 스케치하지 않기"라는 매우 흥미로운 기사를 읽었습니다. sketch question 창의성이 필요할 때마다 도구로 생각을 제한해서는 안됩니다 너는 사용한다. 나중에 정리하기위한 개인적 선택은 내가 다루고있는 영역에 가까운 도구입니다. HTML/CSS의 경우 일반적으로 간단한 레이아웃으로 시작하여 세부 정보를 단계별로 증가시킵니다. 다른 영역에서도 마찬가지입니다. 낮은 세부 정보에서 높은 세부 정보까지 프로토 타이핑 따라서 권장 할 특정 도구가 없습니다 ... 의존합니다.

따라서 권장 할 특정 도구가 없습니다 ... 의존합니다 .

10
Daniel Bleisteiner

개인적으로 처음 몇 가지 수정에 Balsamiq을 사용한 다음 Blueprint 와 같은 CSS 프레임 워크를 사용하여 HTML 프로토 타입으로 바로갑니다.

8
Michael Warkentin

Adobe Fireworks 가이 사이트에서 별다른 사랑을 얻지 못한 것에 흥미가 있습니다.

무엇보다도 즐거웠습니다

  1. 다른 주에 건축
  2. 마스터 페이지
  3. 링크 및 아이콘과 같은 HTML 객체에 내보낼 마크 업을 제공 할 수 있습니다 (내부 및 외부 링크, 메타 데이터, 모든 장점)
  4. 실제 스타일 시트와 함께 표준 호환 CSS 기반 레이아웃을 내 보냅니다.
  5. 로고 등을위한 기본 Illustrator 및 Photoshop 통합.

저는 IA를 고객에게 제공하는 데 Balsamiq을, 디자이너가 공동 작업을 수행 한 후에는 탐색 가능한 프로토 타입을 제작하는 Fireworks를 좋아합니다. Fireworks에서 수행 한 작업은 HTML과 CSS로 쉽게 내 보내져 정적 인 정적 사이트 나 동적 사이트의 템플릿 페이지/테마로 쉽게 변환됩니다.

8
Matt

종이는 최고의 프로토 타입 도구라고 말할 것입니다. 그렇습니다.하지만 전자를 시작하는 것보다 낫습니다.

  • Paper는 고객에게 이것이 가능한 아이디어 중 하나라고 알려줍니다.
  • 종이는 클라이언트가 글꼴이나 색상, 모양 또는 이미지에 걸리지 못하게합니다. balsamiq이 스케치 스타일 와이어 프레임을 선택한 이유 가 있습니다.
  • 개정은 fast
  • 실제 필기를 쉽게 할 수 있으며 그 위에 필기하는 것을 위협하지 않습니다.
  • 전자식으로 이동해야하는 경우 스캔하거나 팩스로 보낼 수 있습니다.

나는 HTML 기능 프로토 타입을 좋아했지만 종이는 브레인 스토밍과 빠른 복도 UI 테스트에 대한 장벽을 낮 춥니 다.

종이 스케치를 통해 누군가를 쉽게 옮길 수 있습니다.

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

스케치로 시작하지 않고 사용자 유효성 검사를 받으면 총을 뛰어 넘고 나중에 실행 취소하고 반복하는 데 더 많은 비용이 듭니다.

5
MattK

HTML/CSS에서 웹 UI 모형을 선호합니다.

  1. 기능적 프로토 타이핑은 사용자가 비차 원적 (Photoshop을 보는) 경험이 아닌 실제 경험을 얻으므로 훨씬 더 나은 솔루션입니다.

  2. 기능적인 프로토 타입은 헛된 일이 아닙니다.

  3. 피드백 루프 중에 기능적 프로토 타입을 반복하는 것이 훨씬 빠릅니다.

4
abrudtkuhl

Axure 를 사용합니다.

상당히 비싸지 만 (라이센스 당 약 $ 600) 놀라운 유연성을 제공하며 거의 모든 것을 사용자 정의 할 수 있습니다.

웹 사이트가 아닌 응용 프로그램을 만들 때는 고유 한 컨트롤 (또는 그 모형), 마스터 등을 사용해야합니다.

4
Dan Barak

종이와 HTML이 최고입니다.

종이에 빠른 스케치. 그런 다음 HTML로 실제 내용을 작성하십시오. StaticMatic 링크 텍스트 프로토 타이핑에 좋습니다.

과거에는 Axure를 사용했지만 와이어 프레이밍은 시간 낭비입니다.

3
Miki

나는 또한 Axure에 투표했다. 본사는 협업 도구를 사용하여 IA와 그래픽 디자이너간에 책임을 분담합니다.

Omnigraffle은 아니지만 와이어 프레이밍 옵션이 적합합니다. 이 소프트웨어에는 뛰어난 마스터 기능이 있으므로 프로토 타입의 충실도를 매우 빠르게 높일 수 있습니다.

Dan이 말했듯이 완전히 사용자 정의 가능하며 전문적인 사양 문서를 만듭니다.

아르 자형.

3
Robert Hamburger

Adobe InDesign. 조금 이상하게 보일지 모르지만 내가 좋아하는 기능이 있습니다.

  • Adobe 스타일의 인터페이스. Photoshop 또는 다른 Adobe 제품으로 작업 한 경우 InDesign으로 쉽게 전환 할 수 있습니다.
  • 타이포그래피, 표, 스타일, 격자 등을 다루는 강력한 도구
  • 실제로 와이어 프레임뿐만 아니라 그래픽 디자인도 만들 수 있습니다
  • 와이어 프레임을 클릭 가능한 PDF로 내보낼 수 있습니다
3
Kostya

위의 Amswers에 동의하지만 추가 정보와 팁을 추가하고 싶습니다. 나는 거의 모든 프로젝트를 화이트 보드, 다른 색상의 펜 및 포스트잇으로 시작합니다. 아이디어를 전달하고 빠른 피드백을 얻는 가장 쉬운 방법입니다. 프로젝트의 종류에 따라 yEd 라는 프로그램으로 메인 플로우 차트를 스케치하려고합니다. 아이디어를 구성하는 간단한 방법입니다. 근처에 맥이 있다면 OmniGraffle (흐름도 이상의 뛰어난 프로그램)을 선택합니다.

Balsamiq , Sketch flowIllustrator 에서 프로토 타입을 계속 사용하여 다양한 종류의 로우 파이 및 하이파이 프로토 타입을 얻습니다.

이 정보와 관련하여 풍부한 도구 상자를 선택하는 것이 적합하다는 것을 알았습니다. 프로젝트 유형에 따라 다른 접근 방식을 취할 수 있어야합니다.

2
Anna

나는 두 번째 Daniel Bleisteiner의 움직임 : "그것은 달려있다."

프로젝트의 90 %는 논문 투표를 고려하십시오. 이 스레드에는 종이에 대한 정당성이 풍부하므로 다시 언급하지 않겠습니다.

디자인은 프로젝트간에 결코 같지 않으며, 확실히 클라이언트 간에는 다릅니다. (저는 모호한 의미, 즉 디자인, 개발, 프로토 타이핑, 와이어 프레이밍으로 디자인에 대해 이야기합니다. 솔직히 말하면, 그들은 서로 점차적으로 병합되고 있습니다.)

따라서 프로젝트의 다른 10 %에 대해서는 protoyping 도구가 프로젝트에 따라 다릅니다. 장거리 협업이 필요한 경우 Axure가 가장 좋습니다. Adobe를 주로 사용하는 고객의 내부 팀과 협력해야하는 경우 Fireworks가 가장 좋습니다. 많은 도구가 있습니다. 불행히도, 정의상 도구는 해결하기 위해 구축 된 문제만큼 빨리 적응할 수 없습니다. 따라서이 제품들 중 다수는 서로 매우 유사하지만 동일하지는 않습니다. 그리고 업무에 가장 적합한 것을 평가하는 것은 우리에게 달려 있습니다.

추가 생각 : iPad는 대면 클라이언트 협업과 대면 클라이언트 감시 손목 간의 경계를 허물어 뜨리기 시작했습니다. Omnigraffle, SketchBook, TouchDraw, Draft 및 기타 iPad 앱은 향상된 협업 경험을위한 길을 열었습니다. (저는 클라이언트가 종이에서하는 것처럼 iPad에서 편안하게 그림을 그릴 수 있도록하는 궁극적 인 목표를 향해 노력하는 것으로 개선을 말합니다. 이는 클라이언트가 정적 페이지 대신 기능적인 protoype를 사용할 수 있다는 이점입니다. 궁극적 인 목표는 저의 의견입니다.)

2
Tyler Hayes

다음 단계를 따릅니다.

1. 프로토 타이핑. Balsamiq Mockups 사용하기 쉽기 때문에 사용합니다. 프로토 타이핑의 요점은 사물의 기본 레이아웃을 파악하는 것입니다. 이것은 당신이 급격한 변화를 만들고있는 단계입니다. 다행스럽게도 Balsamiq은 사용하지 않는 것으로 가장하지 않습니다. Balsamiq을 사용하는 것이 그리는 것보다 빠릅니다. 또한 요소를 지우고 다시 그리는 대신 화면에서 요소를 끌 수 있다는 이점이 있습니다.

2. 디자인 마무리. Photoshop을 사용하고 때로는 작은 Illustrator를 사용하여 코드를 작성하기 전에 그래픽을 완성 할 수 있습니다.

픽셀 효과로 인해 사라지는 경향이 있으므로 Photoshop에서 디자인을 대폭 변경하기가 더 어렵습니다. 그리고 일단 응용 프로그램에 있으면 더 어려워집니다. 이것이 제가 발전한 이유이며 가능한 가장 쉬운 도구로 시작하는 이유는 : Balsamiq.

2
Steve Wortham

저는 스케치 패드/연필-첫 번째이고 Balsamiq -두 번째 남자입니다. 그 후, Photoshop은 HTML과 CSS로 넘어갈 때까지 세부 사항을 구체화합니다.

1
blackant

발사믹. 데스크톱 기반 소프트웨어에도 적합하며 배우기 매우 쉽습니다.

1
franz976

또한 베타에서 나오는 gomockingbird

1
Paul McKeever

아내의 대화식 대행사는 다음과 같은 성공을 거두었습니다.

http://www.mockflow.com/

빠른 시작과 프로토 타입 및 와이어 프레임을위한 합리적인 양의 내장 컨트롤 및 스크린.

1
noluckmurphy

이 질문에는 프로토 타입 도구가 필요하지만 프로토 타입이 얼마나 현실적이어야하는지 언급하지는 않습니다. 스케치, 와이어 프레임 유형의 프로토 타입의 경우 펜/페이퍼, Balsamiq 또는 Visio가 유용한 도구라는 의견에 동의합니다. 그러나 좀 더 사실적으로 보이는 프로토 타입이 필요할 때는 그렇지 않습니다. 그러면 Axure 또는 Adobe Fireworks/Catalyst (iRise는 가격이 너무 비쌉니다)와 같은 것을 살펴 보는 것이 좋습니다. .

0
Geert

필자는 연필을 사용하지만 몇 가지 단점이 있습니다.

  • 테이블 데이터 처리 없음 : 테이블을 와이어 프레임하려는 경우 손실됩니다.
  • 텍스트 상자에 워드 랩이 없습니다. lorem ipsum을 배치하려고 할 때 포장을 직접 만들어야합니다. 짜증나.

그러나 저는이 도구를 매우 좋아합니다.

0
cukabeka

때로는이 도구를 사용합니다 http://www.hotgloo.com/

0
512x512

귀하의 질문은 프로토 타이핑에 관한 것이기 때문에 스케치와 같은 프로토 타이핑에 앞서 필요한 단계를 수행하고 있다고 가정합니다.

제품이 웹을 통해 제공 될 경우 웹 (HTML, CSS, JS)을 사용하여 프로토 타입을 만듭니다. 결국 다른 어떤 것보다 더 빠르고 저렴하며 정확합니다. Axure와 같은 도구는 간단한 작업에는 적합하지만 약간 복잡한 작업을 수행하려면 가파른 학습 곡선이 필요합니다. 그 시점에서, 당신은 장기적으로 더 유익한 웹 표준을 배울 수있을 때 독점 도구를 배우는데 시간을 소비하고 있습니다.

고객이 "완료"되었다고 생각하는 것에 대해 걱정이된다면 끝까지 스타일링을 생략 할 수 있지만 프로토 타입이 "실제"일수록 더 쉽게 평가됩니다.

0
Craig Villamor

그것은 실제로 프로젝트가 무엇인지에 달려 있습니다.

프로토 타이핑하는 웹 사이트가 정적 컨텐츠가 포함 된 몇 페이지에 불과한 경우 Photoshop 또는 Fireworks와 같은 그래픽 편집기를 사용하는 것이 좋습니다. 디자인 요소를 "모든 비용으로"프로토 타이핑하지 않도록하는 조언은 여기서 적절하지 않을 수 있습니다.

그러나 많은 유스 케이스가있는 대형 애플리케이션을 구축하는 스펙트럼의 다른 쪽 끝에서 Jim Jarrett의 답변과 같은 것을 권장합니다. 대규모 응용 프로그램은 반복적 인 프로세스 (또는 최소한 있어야 함)를 추가 할 것입니다. 1 단계에서 프로토 타입을 만든 다음 2 단계 릴리스에서 다시 프로토 타입을 만들어야합니다. 이러한 각 프로토 타이핑 단계에는 서로 다른 세부 수준이 필요할 수 있습니다. . 현재 단계의 빌드/프로토 타입에서 작업하고 싶거나 첫 번째 원칙으로 돌아가 처음부터 다시 시작해야 할 때가 있습니다.

0
skybondsor

Axure는 훌륭한 와이어 프레임/프로토 타이핑/사양 툴입니다. 그것은 당신이 만들고있는 것에 집중할 수있게하며 주석, 메모, 상호 작용과 같은 것들을 매우 쉽게 지정할 수있게합니다.

또한 상호 작용을 지정할 때 와이어 프레임에서 프로토 타입을 생성 할 때 이러한 상호 작용이 실제 작동하는 위젯으로 변환됩니다. (Axure는 HTML 프로토 타입을 생성합니다)

또한 화면 디자인 (예 : JPEG)으로 이미지를 가져오고 "이미지 맵"도구를 사용하여 이미지 영역을 활성화하면 충실도가 높은 프로토 타입을 효과적으로 얻을 수 있습니다!

또한 Axure에서는 변수를 기반으로 작업을 만들 수 있습니다 (설정하거나 읽을 수 있음). 위젯을 생성하여 이벤트를 생성한다는 개념도 있습니다. 다른 위젯이 이벤트를 수신하도록 한 다음 해당 위젯이 어떤 방식 으로든 응답 할 수 있습니다.

나는 계속해서 갈 수 있습니다 ... 단점은 ~ $ 550의 비용이지만 시간 절약은 그만한 가치가 있습니다. 이메일을 통한 고객 지원은 훌륭합니다. 그들은 보통 몇 시간 안에 나에게 돌아옵니다.

0
milesmeow

간단한 와이어 프레임에 대한 Mockingbird ok를 발견했습니다. 언제라도 omnigraffle을 떠날 필요는 없지만 웹 기반 도구에는 꽤 좋습니다. http://gomockingbird.com/

0
fluxd

App Sketcher (현재 릴리스 후보)을 살펴보고 필요에 맞는지 확인하십시오. 와이어 프레임 및 대화식 웹 애플리케이션 프로토 타입을 작성하기위한 빠른 HTML 프로토 타이핑 도구입니다. 내장 된 WebKit 브라우저를 디자인 화면으로 사용하여 HTML 컴포넌트, jQuery UI 컴포넌트, 웹 위젯 (예 : Google지도 및 YouTube 플레이어)을 추가하고 jQuery 테마 및 CSS 특성으로 스타일을 지정할 수 있습니다. 간단한 동작도 정의 할 수 있습니다. 사용자는 기본 브라우저에서 프로토 타입을 실행/테스트하고 디자인에 만족하면 HTML/CSS/JavaScript 소스를 내보낼 수 있습니다. 이 도구는 Axure와 같은 경험에보다 적합하지만 웹 기술을 사용하여 개발 단계에서 모형/와이어 프레임을 실현할 수 있도록 "브라우저에서 실행하기위한 브라우저 디자인"에 중점을 둡니다.

이 응용 프로그램의 개발자입니다. 이 부끄러운 자기 홍보에 대해 죄송합니다. 그럼에도 불구하고, 그것이 좋은 HTML 프로토 타이핑 도구가 될 수 있다고 생각합니다.

0
Feng Chen