Tạo mẫu trang web tương tác

Question

Tôi muốn thử nghiệm nhanh các tính năng mới cho trang web. Tôi đang tìm kiếm một cách để:

• xây dựng xung quanh một hiện có, trang web phức tạp
• Cho phép tương tác
• Ridiculously nhanh và dễ dàng để thử những điều mới

Tôi tưởng tượng cái gì đó cho phép tôi nói "hiển thị trang web này, nhưng trên các trang có URL như thế này, hãy gắn thẻ vào điều này mà tôi đang vẽ bằng hình dán trên trang và nếu ai đó nhấp vào trang đó, hãy di chuyển chúng ở đây".

Hoặc có thể, "đây là ảnh chụp màn hình của trang web. Nếu ai đó nhấp vào hộp này, hãy hiển thị cho họ ảnh chụp màn hình khác này".

Bạn làm gì để sử dụng các tính năng giao diện người dùng trang web mẫu?

Answer 1

Balsamiq Mockups. Vì thế. Freaking. Tốt.

EDIT: Vì vậy, đây là một chủ đề với nhiều thông tin về mẫu: https://stackoverflow.com/questions/720191/web-ui-prototyping-tools

Answer 2

Tôi không phải là fan hâm mộ của Balsamiq, nhưng rất nhiều người thích nó. Nếu Napkee ra mắt, cùng với Balsamiq nó sẽ là những gì bạn đang tìm kiếm.

Phương án thay thế sẽ là Pháo hoa - nó có thể dễ dàng xuất sang HTML, nhưng đường cong học tập thì dốc hơn Balsamiq.

Answer 3

Nếu bạn muốn nó được interractive và được xây dựng trên một trang web hiện có, bạn có thể thử sử dụng greasmonkey với firefox: https://addons.mozilla.org/fr/firefox/addon/748

Tôi không chắc chắn nhanh như thế nào bạn có thể làm nguyên mẫu với điều này, nhưng bạn chắc chắn có thể làm cho chúng tương tác. Greasemonkey cho phép bạn sửa đổi bất kỳ trang web nào bằng javascript.

Answer 4

Bạn có thể thử protoshare.

Nhược điểm: hơi chậm chạp, yêu cầu chi tiết thẻ tín dụng để dùng thử miễn phí. Tính năng cộng tác: rẻ hơn so với trục.

Answer 5

thử clickframes - cách viết các mẫu văn bản trong xml, hiển thị cho các trang web mà bạn có thể nhấp qua.

đáng ngạc nhiên hiệu quả- tại một bản demo họ đã viết lên một đặc tả ứng dụng (appspec) và sau đó tạo ra một trang web dựa trên đường may.

họ đã thử balsamiq và nó không hoạt động cho họ.

từ trang web của họ:

"Đối với nhà thiết kế

tài kinh nghiệm chuyên gia sử dụng Clickframes để nhanh chóng spec và mẫu thử nghiệm các tương tác của thiết kế của họ, và để giao tiếp thiết kế cho cộng tác cũng như các bên liên quan dự án Khi. thiết kế đã được tinh chế, Clickframes tạo điều kiện giao tiếp với các nhà phát triển sẽ triển khai ứng dụng."

Answer 6

Bạn có thể thử ForeUI, đây là một tạo sample prototype

Answer 7

Tôi thích http:. /www.iplotz.com - nó có UX tốt đẹp và thiết kế http://www.justproto.com là công cụ cũng inetersting của nó rất nhanh, có nó sạch nhìn và nó siêu dễ dàng để tạo ra nguyên mẫu với nó

chceck ra wireframes.linowski.ca đó là một blog noice trên wireframes

Answer 8

Pencil là khá tốt và miễn phí! nó có thể được tải về như một ứng dụng độc lập hoặc như một firefox plugin

http://www.evolus.vn/Pencil/

Answer 9

Sử dụng Mockuptiger, Bạn có thể nhập ảnh chụp màn hình hoặc ảnh chụp màn hình trang web của bạn và sau đó liên kết chúng với nhau bằng các nút hoặc liên kết có thể nhấp.

MockupTiger là một ứng dụng dựa trên web mà bạn có thể lưu trữ nó trên máy chủ của riêng bạn. Nó có các tiện ích để xây dựng các ứng dụng web và Trang tổng quan Wireframes.

LƯU Ý: chỉ hoạt động với các trình duyệt mới nhất. Bạn cũng có thể tải xuống và sử dụng trên máy tính để bàn của mình.

PS: Tôi là nhà phát triển của phần mềm này

Answer 10

Check-out ProtoShare một lần nữa: nhanh hơn nhiều từ khoảng năm 2010, giấy nến và các vật dụng thư viện và linh hoạt hơn nhiều so với balsamiq. Nếu bạn muốn kiểm soát cách nguyên mẫu của bạn trông như thế nào, và muốn tương tác và dễ dàng cộng tác và xem xét sử dụng ProtoShare thay vì Balsamiq.

Answer 11

Tôi làm nguyên mẫu của mình khi nói đến các chủ đề/trang web WordPress có plugin từ colorfully.me Đó là cách nhanh nhất tôi nghĩ để xem trang web trông như thế nào trong thực tế, thử nghiệm và cảm nhận giao diện . Ngoài ra đôi khi tôi sử dụng nó để sản xuất.

UI for prototype CSS