it-swarm-vi.tech

Những công cụ tạo mẫu nào?

Điều này liên kết rất nhiều vào câu hỏi sau đây:

Tuy nhiên, tôi không muốn giới hạn các đề xuất đối với các công cụ "Dựa trên web", tôi đã tìm và sử dụng các công cụ sau đây để tạo mẫu, tạo khung và mô phỏng trong quá khứ với một số thành công:

Tôi cũng biết rằng một số nhà thiết kế chọn sử dụng các ứng dụng đồ họa như Photoshop và Illustrator cho nhiệm vụ.

Đây là một câu hỏi về Wiki cộng đồng, vì vậy hãy gửi đi những suy nghĩ của bạn, hãy thử và giữ nó thành một gói cho mỗi câu trả lời để chúng tôi có thể xây dựng ý tưởng về cách cộng đồng cảm nhận về các công cụ này.

34
Richard Slater

Điều quan trọng đối với tôi là giữ nguyên mẫu của mình trong ít nhất hai luồng và ba nếu tôi cố gắng hiểu các tương tác chi tiết với hoạt hình.

Chủ đề 1: Lưu lượng, chức năng, hình thức và dữ liệu

  • Bắt đầu trên giấy (thực sự thường là một phiên thiết kế bảng trắng với những người khác). Tập trung vào dòng chảy màn hình, sau đó là các chức năng chính và bố cục tiềm năng của các màn hình đặc biệt quan trọng. Hãy thử ít nhất hai ý tưởng khác nhau.
  • Mức độ trung thực tiếp theo trong Balsamiq. Thêm chi tiết chức năng, điều chỉnh bố cục, thêm dữ liệu mẫu cụ thể, có ý nghĩa vào màn hình (trong bối cảnh kịch bản có thể chứng minh được).
  • Tạo một nguyên mẫu quy trình công việc bằng cách xâu chuỗi từng bước, kịch bản đường dẫn đơn với màn hình và các tương tác dự kiến ​​cụ thể để chuyển sang màn hình tiếp theo. Tôi có xu hướng sử dụng PowerPoint, sắp xếp tất cả các mockup màn hình theo trình tự. Nguyên mẫu này cho phép bạn nhận được phản hồi sớm với người dùng thực bằng hướng dẫn số nhiề , rất hiệu quả để tinh chỉnh các khái niệm, quy trình làm việc, yêu cầu chức năng, thuật ngữ, v.v.
  • Lặp lại sớm, thường xuyên và nhanh chóng.

Chủ đề 2: Chương trình và phong cách trực quan

  • Sử dụng một số mockup chính từ luồng 1, trực quan hóa chúng (dưới dạng comps) trong chi tiết cấp độ pixel bằng Photoshop hoặc một số cơ chế tương tự khác. Khám phá màu sắc, tỷ lệ, ẩn dụ trực quan, kiểu chữ, vv Tạo ra ít nhất 3 ý tưởng.
  • Nhận phản hồi về những độc lập của các nguyên mẫu quy trình công việc. Sử dụng thử nghiệm ưu tiên, thử nghiệm AB, phê bình, charettes , v.v.
  • Lặp lại và tinh chỉnh.

Chủ đề 3: Tương tác và hoạt hình chi tiết

  • Tập trung vào một chuỗi tương tác chi tiết hoặc hoạt hình chi tiết cùng nhau tạo ra một nguyên mẫu chức năng trong bất kỳ công cụ nào phù hợp nhất với bạn: HTML/CSS/JS, Flash, ngôn ngữ lập trình cấp thấp hơn, khung/thư viện thành phần UI, v.v. Ít nhất là hai tương tác thay thế .
  • Chạy một số lượng nhỏ các bài kiểm tra khả năng sử dụng ngắn bao gồm cả thu thập dữ liệu thời gian. Làm các bài kiểm tra so sánh. Đếm tổ hợp phím/mouseclicks/cử chỉ.
  • Lặp lại và tinh chỉnh.

Tóm lại, xây dựng các loại nguyên mẫu cụ thể cho các mục đích cụ thể ... để trả lời các câu hỏi cụ thể. Không một loại nào hoạt động cho tất cả các tình huống. Giữ các mối quan tâm thẩm mỹ ra khỏi vòng phản hồi công việc/chức năng. Sử dụng các phương pháp phù hợp, hiệu quả cho các loại câu hỏi khác nhau. "Đừng băng qua suối."

Tôi đã thấy rằng hầu hết tất cả các cải tiến thiết kế cơ bản đều đến từ luồng 1 và luồng 2, nhưng luồng 3 là cần thiết nếu bạn vượt ra ngoài các điều khiển tiêu chuẩn hoặc miền của bạn là mới/phức tạp/cụ thể (ví dụ: tương tác cử chỉ, mô hình đa chiều thao tác, điều khiển tùy chỉnh cho một hệ điều hành mới lạ mắt, tối ưu hóa hiệu suất của con người trong một số chiều).

35
Jim Jarrett

Pencil là một công cụ tốt để tạo mockup UI. Nó có sẵn dưới dạng addon Firefox hoặc ứng dụng độc lập .

alt text

Nó có một lợi thế so với một số công cụ khác được đề cập bởi vì nó là nguồn mở và miễn phí.

12
david4dev

Tôi đã đọc một bài viết rất thú vị một thời gian trước đó có tên là "Để phác họa hoặc không phác thảo" - bạn nên có một cái nhìn: câu hỏi phác thảo Bất cứ khi nào cần sáng tạo, bạn không nên giới hạn suy nghĩ của mình bằng các công cụ bạn sử dụng. Lựa chọn cá nhân của tôi cho việc dọn dẹp sau này là một công cụ gần với khu vực tôi đang xử lý. Đối với HTML/CSS tôi thường bắt đầu với các bố cục đơn giản và tăng chi tiết từng bước. Điều tương tự cũng có thể hữu ích cho các lĩnh vực khác. Tạo mẫu từ chi tiết thấp đến cao hơn. Vì vậy, tôi không có một công cụ cụ thể để giới thiệu ... nó phụ thuộc.

Vì vậy, tôi không có một công cụ cụ thể nào để giới thiệu ... nó phụ thuộc .

10
Daniel Bleisteiner

Cá nhân tôi sử dụng Balsamiq cho một vài lần sửa đổi đầu tiên và sau đó chuyển thẳng đến một nguyên mẫu HTML bằng cách sử dụng khung CSS như Blueprint .

8
Michael Warkentin

Thật thú vị khi Adobe Fireworks đã nhận được rất ít tình yêu trên trang web này.

Trong số những thứ khác, tôi đã rất thích

  1. Xây dựng ở các tiểu bang khác nhau
  2. Trang chính
  3. Các đối tượng HTML, như liên kết và biểu tượng, có thể được đánh dấu sẽ xuất (liên kết bên trong & bên ngoài, siêu dữ liệu, tất cả những điều tốt đẹp đó)
  4. Xuất khẩu bố cục dựa trên CSS, tuân thủ tiêu chuẩn với biểu định kiểu thực tế
  5. Tích hợp Illustrator và Photoshop cho logo, v.v.

Tôi thích Balsamiq vì đã giới thiệu IA cho khách hàng, sau đó Pháo hoa cho một nguyên mẫu có thể điều hướng được một khi nhà thiết kế đã hợp tác. Công việc được thực hiện trong Pháo hoa xuất khẩu đủ dễ dàng sang HTML và CSS, dịch đủ dễ dàng vào một trang tĩnh hoàn toàn hoặc dưới dạng trang/chủ đề mẫu cho trang web động.

8
Matt

Tôi sẽ nói chỉ giấy là công cụ nguyên mẫu tốt nhất. Vâng, điều đó là hiển nhiên, nhưng nó tốt hơn là bắt đầu điện tử.

  • Giấy nói với khách hàng rằng đây là một ý tưởng, một trong nhiều khả năng có thể.
  • Giấy không cho phép khách hàng bị cuốn vào phông chữ hoặc màu sắc hoặc hình dạng hoặc hình ảnh. Có một lý do rằng balsamiq đã chọn khung lưới kiểu phác thảo.
  • Các sửa đổi là nhanh
  • Thật dễ dàng để có được chữ viết tay thực sự của họ trên đó và nó không khiến họ sợ hãi khi vẽ lên nó.
  • Bạn có thể quét nó hoặc fax nó nếu bạn cần nó để đi điện tử.

Tôi là một fan hâm mộ lớn của các nguyên mẫu chức năng html sau đó, nhưng giấy làm giảm rào cản động não và các bài kiểm tra ui hành lang nhanh.

Thật dễ dàng để dẫn ai đó đi qua một bản phác thảo trên giấy:

"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?"

Nếu bạn không bắt đầu với bản phác thảo và nhận được một số xác nhận của người dùng, bạn sẽ nhảy súng và sẽ tốn kém hơn khi hoàn tác và lặp lại sau này.

5
MattK

Tôi thích thực hiện các mockup Web UI trong HTML/CSS.

  1. Tạo mẫu theo chức năng là một giải pháp tốt hơn nhiều vì người dùng có được trải nghiệm thực tế thay vì trải nghiệm không theo chiều (nhìn vào Photoshop của bạn).

  2. Nguyên mẫu chức năng không phải là công việc vứt bỏ.

  3. Lặp lại nhanh hơn một nguyên mẫu chức năng trong vòng phản hồi

4
abrudtkuhl

Tôi sử dụng Axure .

Mặc dù khá đắt (gần $ 600 mỗi giấy phép), nó cung cấp sự linh hoạt đáng kinh ngạc và cho phép bạn tùy chỉnh hầu hết mọi thứ.

Có thể sử dụng các điều khiển của riêng bạn (hoặc mockup của chúng), thạc sĩ, v.v ... là bắt buộc khi tạo một ứng dụng thay vì một trang web.

4
Dan Barak

Giấy và HTML là tốt nhất.

Phác thảo nhanh trên giấy. Sau đó, xây dựng điều thực sự trong HTML. StaticMatic liên kết văn bản là tuyệt vời cho tạo mẫu.

Trước đây tôi đã sử dụng Axure, nhưng chế tạo khung dây là một sự lãng phí thời gian.

3
Miki

Tôi cũng sẽ bỏ phiếu cho Axure. Văn phòng của chúng tôi sử dụng các công cụ cộng tác để phân chia trách nhiệm giữa các nhà thiết kế IAs và Đồ họa của chúng tôi.

Mặc dù không có Omnigraffle, các tùy chọn khung lưới là quá đủ. Phần mềm này có chức năng làm chủ tuyệt vời, vì vậy chúng tôi có thể tăng tốc độ trung thực của một nguyên mẫu khá nhanh.

Và như Dan đã nói, nó hoàn toàn có thể tùy chỉnh và tạo ra các tài liệu đặc tả chuyên nghiệp.

r.

3
Robert Hamburger

Adobe InDesign. Nó có thể trông lạ một chút nhưng có những tính năng mà tôi thích:

  • Giao diện kiểu Adobe. Nếu bạn đã làm việc với Photoshop hoặc một số sản phẩm Adobe khác, việc chuyển sang InDesign sẽ rất dễ dàng
  • công cụ mạnh mẽ để làm việc với kiểu chữ, bảng, kiểu, lưới và như vậy
  • trong thực tế, bạn có thể tạo ra không chỉ một khung dây mà cả thiết kế đồ họa
  • bạn có thể xuất khung lưới dưới dạng PDF có thể nhấp
3
Kostya

Tôi đồng ý với một số amswers ở trên nhưng tôi muốn thêm một số thông tin và mẹo. Tôi gần như bắt đầu mọi dự án với bảng trắng, bút với các màu sắc khác nhau và một số hậu kỳ. Cách dễ nhất để truyền đạt ý tưởng và nhận phản hồi nhanh. Tùy thuộc vào loại dự án, sau đó tôi cố gắng phác thảo các biểu đồ dòng chính bằng một chương trình có tên yEd . Đó là một cách đơn giản để tôi cấu trúc các ý tưởng. Nếu tôi có máy mac ở gần, tôi sẽ chọn OmniGraffle (một chương trình nổi bật cho nhiều hơn biểu đồ dòng chảy).

Tôi tiếp tục thực hiện các nguyên mẫu trong Balsamiq , Phác thảo dòng chảyIllustrator để có được các loại nguyên mẫu thấp và hi-fi khác nhau.

Về thông tin này, tôi thấy nó phù hợp để có một hộp công cụ phong phú để lựa chọn. Điều quan trọng đối với tôi là có thể thực hiện các phương pháp khác nhau tùy thuộc vào loại dự án.

2
Anna

Tôi thứ hai chuyển động của Daniel Bleisteiner: "Nó phụ thuộc."

Đối với 90% dự án, hãy xem xét phiếu bầu của tôi cho bài báo. Biện minh cho rất nhiều giấy trên chủ đề này, vì vậy tôi sẽ không lặp lại.

Thiết kế không bao giờ giống nhau giữa các dự án, và chắc chắn không phải giữa các khách hàng. (Tôi nói về thiết kế theo nghĩa mơ hồ, nghĩa là thiết kế, phát triển, tạo mẫu, tạo khung - hãy thành thật mà nói, tất cả chúng đang dần hợp nhất với nhau.)

Vì vậy, đối với 10% dự án khác, công cụ protoyping sẽ phụ thuộc vào dự án. Nếu nó đòi hỏi sự hợp tác đường dài, Axure có thể là tốt nhất. Nếu nó yêu cầu làm việc với nhóm nội bộ của khách hàng, những người sử dụng chủ yếu Adobe, Pháo hoa có thể là tốt nhất. Có nhiều công cụ. Thật không may, theo định nghĩa, các công cụ không thể thích ứng nhanh như các vấn đề chúng được xây dựng để giải quyết; do đó, nhiều sản phẩm trong số này có vẻ rất giống nhau, nhưng không hoàn toàn giống nhau. Và chúng ta phải đánh giá cái nào là tốt nhất cho công việc.

Suy nghĩ bổ sung: iPad đang bắt đầu giúp làm mờ đi ranh giới giữa sự hợp tác giữa khách hàng trực tiếp với khách hàng trực tiếp xem bạn qua vai. Omnigraffle, SketchBook, TouchDraw, Draft và các ứng dụng iPad khác đang mở đường cho trải nghiệm cộng tác được cải thiện. (Tôi nói về sự cải thiện khi làm việc hướng tới mục tiêu cuối cùng là khiến khách hàng cảm thấy thoải mái khi vẽ trên iPad như họ làm trên giấy, lợi thế của việc khách hàng có thể sử dụng một protoype chức năng thay vì trang tĩnh. Điều đó mục tiêu cuối cùng chỉ là ý kiến ​​của tôi.)

2
Tyler Hayes

Tôi làm theo các bước này ...

1. Tạo mẫu. Tôi sử dụng Balsamiq Mockups vì nó dễ. Toàn bộ quan điểm của tạo mẫu là tìm ra bố cục cơ bản của sự vật. Đây là giai đoạn mà bạn đang thực hiện những thay đổi mạnh mẽ. May mắn thay, Balsamiq không giả vờ là bất cứ thứ gì không phải và vẫn cực kỳ dễ sử dụng. Tôi sử dụng Balsamiq nhanh hơn so với vẽ nó. Và nó đi kèm với lợi ích là có thể kéo các yếu tố trên màn hình thay vì xóa và vẽ lại chúng.

2. Hoàn thiện thiết kế. Tôi sử dụng Photoshop và đôi khi là một Illustrator nhỏ cho việc này để tôi có thể hoàn thiện đồ họa trước khi viết bất kỳ mã nào.

Thật khó khăn hơn để thực hiện các thay đổi mạnh mẽ cho thiết kế của bạn trong Photoshop khi chúng ta có xu hướng bị cuốn theo sự hoàn hảo về pixel. Và nó vẫn khó khăn hơn một khi nó trong ứng dụng của bạn. Vì vậy, đây là lý do cho sự tiến bộ của tôi và tại sao tôi bắt đầu với công cụ đơn giản nhất có thể ... Balsamiq.

2
Steve Wortham

Tôi là người vẽ phác thảo/bút chì đầu tiên và Balsamiq - loại thứ hai của anh chàng. Sau đó, Photoshop đưa ra các chi tiết cho đến khi có đủ để nhảy vào HTML và CSS.

1
blackant

Balsamiq. Nó cũng tốt cho phần mềm dựa trên máy tính để bàn và rất dễ học.

1
franz976

Cũng đáng để kiểm tra gomockingbird sắp ra mắt bản beta

1
Paul McKeever

Cơ quan tương tác của vợ tôi đã thành công với:

http://www.mockflow.com/

Nhanh chóng để bắt đầu và một số lượng hợp lý các điều khiển và màn hình tích hợp cho các nguyên mẫu và khung lưới.

1
noluckmurphy

Câu hỏi đề cập đến sự cần thiết của một công cụ tạo mẫu nhưng không phải là nguyên mẫu của bạn cần thực tế đến mức nào. Đối với một nguyên mẫu sơ sài, khung dây, tôi đồng ý với hầu hết các ý kiến ​​ở đây rằng bút/giấy, Balsamiq hoặc thậm chí Visio là những công cụ tốt. Tuy nhiên, khi bạn yêu cầu một nguyên mẫu trông thực tế hơn, những thứ này sẽ không làm được và sau đó tôi sẽ đề nghị xem xét các loại như Axure hoặc Adobe Fireworks/Catalyst (iRise có giá cao hơn) và mặc dù nó có vấn đề với tôi .

0
Geert

Tôi cũng sử dụng Pencil, mặc dù nó có một số nhược điểm:

  • không xử lý dữ liệu bảng: Nếu bạn muốn tạo khung cho bảng, bạn sẽ bị mất.
  • không có WordWrap trong hộp văn bản. Khi cố gắng đặt một số lorem ipsum, tôi phải tự làm gói. Đó là hút.

tuy nhiên, tôi rất thích công cụ này.

0
cukabeka

Đôi khi tôi sử dụng công cụ này http://www.hotgloo.com/

0
512x512

Vì câu hỏi của bạn là cụ thể về tạo mẫu, tôi giả sử bạn đang làm bất cứ bước nào bạn thấy cần thiết trước khi tạo mẫu như phác thảo, v.v.

Nếu sản phẩm của bạn sẽ được phân phối qua Web, hãy tạo các nguyên mẫu của bạn bằng cách sử dụng Web (HTML, CSS, JS). Cuối cùng, nó nhanh hơn, rẻ hơn và chính xác hơn bất cứ thứ gì bạn có thể sử dụng. Tôi đã thấy rằng các công cụ như Axure rất tốt cho những thứ đơn giản, nhưng sau đó yêu cầu một đường cong học tập dốc để làm bất cứ điều gì phức tạp vừa phải. Vào thời điểm đó, bạn đang dành thời gian học một công cụ độc quyền khi bạn có thể học các tiêu chuẩn Web sẽ có lợi hơn cho bạn về lâu dài.

Nếu bạn lo lắng về một khách hàng nghĩ rằng nó đã "xong", bạn có thể bỏ qua kiểu dáng cho đến khi kết thúc, tuy nhiên tôi đã thấy rằng nguyên mẫu của bạn càng "thật" thì càng dễ đánh giá.

0
Craig Villamor

Nó thực sự phụ thuộc vào những gì dự án là.

Nếu trang web mà bạn tạo mẫu sẽ chỉ là một vài trang có nội dung tĩnh, sử dụng trình chỉnh sửa đồ họa như Photoshop hoặc Fireworks có thể sẽ ổn. Lời khuyên để giữ cho các yếu tố thiết kế không phải là nguyên mẫu "bằng mọi giá" có thể không phù hợp ở đây.

Tuy nhiên, ở đầu kia của quang phổ nơi bạn đang xây dựng một ứng dụng lớn với nhiều trường hợp sử dụng, tôi sẽ đề xuất một cái gì đó giống như câu trả lời của Jim Jarrett. Tôi sẽ nói thêm rằng các ứng dụng quy mô lớn là (hoặc ít nhất nên là) một quy trình lặp: bạn sẽ tạo nguyên mẫu cho giai đoạn I và sau đó thử nghiệm lại để phát hành giai đoạn II, v.v ... Mỗi giai đoạn tạo mẫu này có thể yêu cầu các mức độ chi tiết khác nhau . Cuối cùng, bạn có thể muốn làm việc từ bản dựng/nguyên mẫu của giai đoạn hiện tại hoặc có lẽ đã đến lúc quay lại các nguyên tắc đầu tiên và bắt đầu lại từ đầu.

0
skybondsor

Axure là một công cụ tạo khung/tạo mẫu/đặc tả kỹ thuật tuyệt vời. Nó cho phép bạn tập trung vào những gì bạn đang tạo và làm cho những thứ như chú thích, ghi chú, tương tác, rất dễ chỉ định.

Điểm cộng là khi bạn chỉ định các tương tác, khi bạn tạo các nguyên mẫu từ các khung lưới của mình, các tương tác đó sẽ chuyển sang các widget hoạt động thực sự. (Axure tạo nguyên mẫu HTML)

Bạn cũng có thể thiết kế màn hình (ví dụ bằng JPEG) nhập hình ảnh, kích hoạt các khu vực của hình ảnh bằng công cụ "bản đồ hình ảnh" và sau đó bạn có một nguyên mẫu có độ trung thực cao hơn!

Axure cũng cho phép bạn tạo các hành động dựa trên các biến (bạn có thể đặt hoặc đọc chúng). Ngoài ra còn có khái niệm lấy một widget để tạo sự kiện, bạn có thể có một widget khác lắng nghe sự kiện và sau đó widget đó có thể phản hồi theo một cách nào đó.

Tôi có thể tiếp tục và tiếp tục ... Mặt trái là chi phí ~ 550 đô la, nhưng tiết kiệm thời gian là hoàn toàn xứng đáng. Hỗ trợ khách hàng của họ, qua email, là tuyệt vời; họ thường quay lại với tôi trong vòng vài giờ ... đôi khi ngay lập tức.

0
milesmeow

Tôi thấy Mockingbird ok cho các khung dây đơn giản. Nó sẽ không khiến tôi rời khỏi omnigraffle bất cứ lúc nào sớm nhưng nó khá tốt cho một công cụ dựa trên web: http://eimockingbird.com/

0
fluxd

Hãy xem App Sketcher (hiện đang là ứng viên phát hành) để xem nó có phù hợp với nhu cầu của bạn không. Nó là một công cụ tạo mẫu HTML nhanh chóng để tạo các khung mẫu và ứng dụng web tương tác. Nó sử dụng trình duyệt WebKit nhúng làm bề mặt thiết kế nơi bạn có thể thêm các thành phần HTML, thành phần UI jQuery, các tiện ích web (như Google Maps và trình phát YouTube) và tạo kiểu cho chúng với các thuộc tính jQuery và CSS. Hành động đơn giản cũng có thể được định nghĩa. Người dùng có thể chạy/kiểm tra nguyên mẫu trong trình duyệt mặc định của họ và xuất nguồn HTML/CSS/JavaScript sau khi họ hài lòng với thiết kế. Công cụ này thiên về Axure như trải nghiệm nhưng nhấn mạnh vào "thiết kế trong trình duyệt để chạy trong trình duyệt" vì nó đảm bảo các mockup/khung dây có thể thực hiện được trong giai đoạn phát triển với các công nghệ web.

Tôi là nhà phát triển của ứng dụng này. Vì vậy, xin lỗi về sự tự quảng cáo không biết xấu hổ này. Tuy nhiên, tôi nghĩ rằng nó có thể là một công cụ tạo mẫu HTML tốt và đáng xem.

0
Feng Chen