lo-fi (비 대화식) UI 프로토 타입을 어떻게 작성해야합니까?

현재 일부 기본 프로토 타입을 함께 작성하여 부분적으로 요구 사항을 수집하고 최종 UI를 디자인하는 작업을하고 있습니다.

현재 Post-it 메모를 사용하여 정보를 나타내는 노란색 메모와 작업 (단추 또는 메뉴)을 나타내는 분홍색을 사용하여 화면을 구축하려고합니다. 정보를 쉽게 이동, 제거 및 추가 할 수 있다는 아이디어입니다. 그러나 더 효율적인 방법이 있다고 확신합니다.

개발자가 비 대화식 UI 프로토 타입을 효율적으로 만드는 데 권장되는 방법은 무엇입니까?

그리고 왜?

나는 펜, 종이 및 포스트잇 노트 버전을 시험해 보았고 리드 풍선처럼 떨어졌습니다. 결국 나는 Balsamiq을 사용 했는데 , 지금까지 대부분의 사용자가 좋아하고 프로토 타입입니다. 아아, 일부 사람들은 여전히 ​​첫 번째 사람이 일부 lo-fi 프로토 타입을 통해 응용 프로그램이 무엇을해야하는지에 대한 아이디어를 얻어야하고 실제로 무엇인가를 저지르기 전에 "화면에서 무언가를보고 싶어"한다는 생각에 문제가 있습니다.

나는 화이트 보드를 선호합니다.

전체 내용을 다시 작성하지 않고도 결정을 내릴 때 쉽게 변경할 수 있습니다. 다른 (가까운) 개발자와 쉽게 공유 할 수 있습니다. 스티커 메모 또는 다른 색상을 사용하여 주석을 달기가 쉽습니다.

Balsamiq 모형은 일반적으로 펜과 종이를 사용하는 것만 큼 빠르고 재사용이 가능한 첫 번째 전화 포트입니다.

또한 원하는 경우 페이지를 서로 연결하여 원하는 정도의 상호 작용을 추가 할 수 있습니다.

http://balsamiq.com/

연필 프로젝트 는 훌륭하고 간단한 모형을 만드는 Firefox 애드 인입니다.

Pencil은 데스크탑에서 모바일 플랫폼에 이르는 다양한 유형의 사용자 인터페이스를 그리기 위해 다양한 내장 모양 모음을 제공합니다. 2.0.2부터 Pencil은 Android 및 iOS UI 스텐실이 사전 설치되어 제공됩니다. 이를 통해 간단한 설치로 앱 프로토 타입을보다 쉽게 ​​시작할 수 있습니다.

인기있는 그리기 기능은 연필에서도 구현되어 그리기 작업을 단순화합니다.

MS Paint와 Visual Studio의 조합을 사용합니다. VS를 사용하여 원하는 모든 컨트롤을 폼에 끌어다 놓은 다음 MS 페인트로 스크린 샷을 찍어 모양이 좋아질 때까지 다시 정렬합니다.

이렇게하면 간단하고 친숙하며 무료이며 항상 액세스 가능한 도구 (나를 위해)를 사용하여 UI를 조롱 할 수 있으며 클라이언트는 응용 프로그램이 완료되면 UI를 볼 수 있습니다. 또한 종종 VS는 내 프로젝트의 시작 부분을 포함합니다.

편집 : Toby의 대답 으로 Balsamiq 으로 이끌었습니다 . 이제 UI 모형이 다른 사람들에게 제시 할 수있는 주요 도구입니다.

여전히 MSPaint 또는 펜 / 종이를 꺼내는 경우가 있지만 일반적으로 참조 용으로 기본 UI 디자인을 스케치하거나 완성 된 화면에 대해 두 가지 옵션을 고객에게 제시하려는 경우에만 해당됩니다 (예 : "Do you 여기 또는 여기에 버튼을 원하십니까? " )

좋은 방법을 사용하는 것처럼 들리지만 사람들이 빠른 프로토 타이핑 유틸리티를 받아들이도록 저항하는 경향이 있습니다. 모두가 코딩하는 것을 좋아하지만 30 분 안에 JScrollBars와 계속 싸우고 있으며 12 개의 모형을 생성 한 경우 이러한 도구의 장점이 빠르게 반복 된다는 것을 이해할 수 있습니다 .

즉, 다양한 저 음질 접근 방식은 서로 다른 장점이 있습니다.

• 화이트 보드 프로토 타이핑 은 누구나 참여할 수 있고 기초적인 아이디어를 제공하기 때문에 유용하지만 토론 도구 일뿐입니다. 오래된 마커를 지우기가 어렵 기 때문에 디자인을 반복하려면 한 단계 더 나아가고 싶을 것입니다. ;)

• 종이 프로토 타이핑 은 사람들이 그것이 영구적이고 변화에 개방적이라는 것을 이해하고 신속하게 반복 할 수 있고 여전히 좋은 결과를 얻을 수 있기 때문에 유용합니다. 종이 프로토 타입으로 일부 사용자와 함께 사용성 테스트를 수행하면 매우 저렴한 비용으로 설계에 대한 훌륭한 피드백을 신속하게 얻을 수 있습니다. 사람들은 종이의 인터페이스를보고 느낄 수있을 때 실제로 참여합니다.

• Balsamiq 는 재사용이 가능한 종이 프로토 타입을 빠르게 만들기위한 지름길입니다. 스크린 샷을 인쇄하여 종이 프로토 타입으로 사용합니다. 또한 회의 중에도 사용 하여 화이트 보드 프로토 타이핑과 유사한 아이디어를 얻을 수 있습니다. 나는 이것을 위해 Visio와 OmniGraffle을 사용했다.

• 잘라 내기 및 붙여 넣기 프로토 타입 은 기존 디자인을 반복하는 데 유용합니다. 스크린 샷을 찍고 이미지 편집기에서 잘라 내고 새로운 컨트롤 (Balsamiq 또는 다른 곳)과 혼합 및 일치시킵니다. 다시 한 번 당신의 목표는 프로토 타입을 빠르게 반복하는 것입니다.

나는 사용자와 프로토 타입을 만들지 않습니다. 우리가 가진 사용자 데이터를 기반으로 디자인 팀과 함께합니다. 사용자는 디자이너가 아닙니다 . 디자이너로 취급하면 물이 많은 토마토 소스, 쓴 커피 (말콤 글 래드 웰 덕분에) 및 호머 자동차가 생깁니다. 디자인에 대한 사용자 입력을 수집하고이를 사용하여 디자인 팀과 함께 디자인을 세분화하십시오.

첫 번째 모형은 항상 연필과 종이 또는 화이트 보드이지만 기본 사항이 정해지면 보통 HTML로 이동합니다. 나는 단순히 "헤더", "배너", "이미지", "차트"등과 같은 많은 자리 표시 자 이미지를 가지고 있습니다. 사소한 것을 배치하기위한 간단한 CSS가 완성되었습니다. 컨트롤에 고정 된 약간의 JS는 기능과 유사 할 수 있으며 사람들은 "더 잘"얻는 것처럼 보입니다.

이것에 대한 유일한 문제는 아마도 세계에서 가장 최악의 생활 UI 디자이너 일 것입니다. 때로는 완성 된 것의 모습을 보여주지 않고 단지 요구 사항을 모으고 있음을 사람들에게 상기시켜야합니다. 나는 종종 배경을 분홍색 또는 무언가로 설정했다. 그래서 누군가가 "분홍색이어야합니까?" "이것은 실물 모형 일뿐입니다. 실제 상황이 다르게 보일 것입니다"(또는 "디자이너와 논의해야합니다")와 맞설 수 있습니다.

펜과 종이를 먼저 사용한 다음 UI를 몇 번 빠르게 그린 후 파워 포인트에서 2 ~ 3 번 만들어 봅니다. 실제 편집기에 들어가기 전에 5 ~ 6 회 반복하면 실행 불가능한 UI를 줄일 수 있습니다 (예 : 사용자가 X를 보지 못했을 때 텍스트 상자 X를 기반으로 컨텐츠 Y 생성). 나는 바보 같은 사람들을 바로 얻을 수있는 기회로 본다.

펜 및 종이 / 화이트 보드 등 Visio를 사용할 수도 있습니다 (Visio에는 공통 컨트롤을위한 UI 템플릿이 제공됨). 때때로 우리가 가지고있는 기존 (유사한) UI를 촬영하고 Paint.NET과 같은 페인트 프로그램을 사용하여 새 UI를 잘라 붙여 넣습니다.

델파이에서 여러 번 빠른 프로토 타이핑을했습니다. 파워 포인트 나 visio보다 훨씬 빠르게 화면 레이아웃을 매우 빠르게 던질 수 있습니다. 결과 exe는 종속성없이 전자 메일에 첨부 할 수 있습니다. 웹 응용 프로그램을 프로토 타이핑하는 데 사용하므로 사람들이 프로토 타입을 반쯤 완성 된 버전과 혼동 할 위험이 없습니다.

Sencha Ext Designer와 동일한 작업을 시도했지만 Ext JS의 레이아웃 시스템은 사용하기가 어려웠으며 아이디어를 신속하게 반복하는 것이 편리함보다 더 큰 부담으로 느껴졌습니다.

항상 같은 접근법을 사용하지는 않습니다. 내가 사용하는 기술 중 일부는 대략적인 빈도입니다.

• 화이트 보드 (대화식 / 토론 시제품 제작 용. 나중에 사진 촬영)

• RAD 스타일 GUI 디자이너 (Visual Studio, NetBeans, Delphi)

  • 이를 잘 활용하면 실제로 "창, 위젯 및 양식"응용 프로그램의 프로토 타입을 만드는 가장 빠른 방법 중 하나가 될 수 있습니다. 보너스 : 프로토 타입을 얼마나 빨리 던지는가에 따라 프로토 타입이 정말 전문적으로 보일 수 있습니다. 프로토 타입이 승인되면 실제 제품을 만들기위한 시작점으로 사용되기도합니다.
    
    

• 종이와 펜 / 연필 (보통 자신에게 브레인 스토밍하기 위해)

• 디스크의 정적 HTML / CSS / JS 파일

  • WYSIWYG 디자인 응용 프로그램이 여기에 해를 끼치 지 않을 것이라고 생각하지만 일반적으로 원시 HTML을 해킹합니다. 어쨌든 나는 이것들을 많이하지 않습니다.
    
    

• 벡터 그리기 도구-일러스트 레이터 / 잉크 스케이프 / Visio / PowerPoint / Impress

• 래스터 그래픽 도구-Photoshop / Gimp

• ASCII 아트 ;-)