Tôi nên tạo các nguyên mẫu UI lo-fi (không tương tác) như thế nào?


10

Tôi hiện đang làm việc để tập hợp một số nguyên mẫu cơ bản, một phần để thu thập các yêu cầu và một phần để thiết kế giao diện người dùng cuối cùng.

Hiện tại tôi đang cố gắng xây dựng màn hình bằng các ghi chú Post-it, với các ghi chú màu vàng cho thông tin và màu hồng cho các hành động (nút hoặc menu). Ý tưởng là bạn có thể dễ dàng di chuyển, loại bỏ và thêm thông tin. Nhưng tôi chắc chắn có nhiều phương pháp hiệu quả hơn ngoài kia.

Cách được đề xuất cho các nhà phát triển để tạo hiệu quả các nguyên mẫu UI không tương tác là gì?

Và tại sao?


Tôi đã thử một số phiên bản bút, giấy và Post-it và chúng rơi xuống như một quả bóng chì (có thể là kỹ năng vẽ của tôi). Cuối cùng, tôi đã sử dụng Balsamiq , từ đó được hầu hết người dùng yêu thích và họ nhận nó là nguyên mẫu. Than ôi, một số người vẫn gặp vấn đề với ý tưởng rằng người đầu tiên nên có ý tưởng về những gì ứng dụng nên làm thông qua một số nguyên mẫu lo-fi và thực sự muốn "nhìn thấy một cái gì đó trên màn hình" trước khi cam kết bất cứ điều gì.


1
"Than ôi, một số người vẫn gặp vấn đề với ý tưởng rằng người đầu tiên nên có ý tưởng về những gì ứng dụng nên làm" - thực sự một trình soạn thảo hộp thoại có thể là cách nhanh nhất để tạo nguyên mẫu giao diện người dùng. Điều đó không phải lúc nào cũng lý tưởng, nhưng miễn là bạn sẵn sàng vứt bỏ một vài phiên bản đầu tiên và khách hàng của bạn biết rằng bố cục màn hình không có nghĩa là bạn đã hoàn thành 99% ...
Steve314

1
Xin chào @mlk, tôi thấy câu hỏi của bạn đã bị đóng vì đây là cuộc thăm dò ý kiến, vì vậy tôi đã chỉnh sửa câu hỏi để thay đổi câu hỏi từ cách mọi người thực hiện nguyên mẫu của họ thành câu hỏi SE vững chắc về cách tạo nguyên mẫu UI không tương tác hiệu quả . Nếu tôi đã thay đổi quá nhiều, vui lòng chỉnh sửa thêm hoặc khôi phục các thay đổi. Tôi đã bỏ phiếu để mở lại nó, nhưng nó vẫn cần một số phiếu bầu khác từ cộng đồng để được mở lại :)
Rachel

Câu trả lời:


14

Tôi thích một bảng trắng.

Nó giúp bạn dễ dàng thay đổi khi bạn đưa ra quyết định mà không cần vẽ lại toàn bộ. Thật dễ dàng để chia sẻ với các nhà phát triển (gần đó). Thật dễ dàng để chú thích bằng cách sử dụng ghi chú dán hoặc các màu khác.


1
+1. Nhận (và sau đó thử treo vào;) hai (hoặc nhiều hơn !!) màu của điểm đánh dấu. Khi bạn chuyển đổi bánh răng trong cuộc thảo luận (giả sử, khi bạn chuyển từ nói về nơi các vật dụng nên đi, sang nói về cách chúng nên tương tác, thay đổi màu sắc.) Giữ cho chúng tươi, để mọi người thực sự có thể đọc.
Mike Clark

+1 cũng vậy, nó trông không giống như Balsamiq, nhưng sự tự do hơn là bù đắp cho nó - không tìm kiếm một widget hay bị giới hạn bởi những gì chương trình đó có sẵn.
Izkata

7

Balsamiq mockup thường là cổng đầu tiên của cuộc gọi, gần như nhanh chóng như sử dụng bút và giấy và có thể tái sử dụng.

Ngoài ra, bạn có thể thêm một số mức độ tương tác nếu bạn muốn, liên kết các trang với nhau chẳng hạn.

http://balsamiq.com /


5

Dự án Bút chì là một addin Firefox thực hiện các mockup đẹp và đơn giản.

Pencil cung cấp bộ sưu tập hình dạng tích hợp khác nhau để vẽ các loại giao diện người dùng khác nhau, từ máy tính để bàn đến nền tảng di động. Bắt đầu từ 2.0.2, Pencil được cung cấp với các mẫu tô màu UI cho Android và iOS được cài đặt sẵn. Điều này làm cho nó dễ dàng hơn để bắt đầu các ứng dụng kéo dài với một cài đặt đơn giản.

Các tính năng vẽ phổ biến cũng được triển khai trong Bút chì để đơn giản hóa các thao tác vẽ ...


5

Tôi sử dụng kết hợp MS Paint và Visual Studio. Tôi sử dụng VS để kéo / thả tất cả các điều khiển tôi muốn vào một biểu mẫu, sau đó chụp màn hình nó vào sơn MS để sắp xếp lại chúng cho đến khi tôi thích giao diện của nó.

Bằng cách này, tôi có thể sử dụng các công cụ đơn giản, quen thuộc, miễn phí và luôn có thể truy cập (đối với tôi) để giả lập giao diện người dùng của mình và khách hàng có thể thấy giao diện người dùng vì nó có thể sẽ xuất hiện sau khi ứng dụng kết thúc. Ngoài ra, thường thì VS kết thúc có chứa phần đầu dự án của tôi cho tôi.

Chỉnh sửa: Câu trả lời của Toby dẫn tôi đến Balsamiq , và đó hiện là công cụ lựa chọn chính của tôi cho các mockup UI để trình bày cho người khác.

Thỉnh thoảng tôi vẫn rút MSPaint hoặc bút / giấy, nhưng điều đó thường chỉ khi tôi phác thảo thiết kế UI cơ bản để tham khảo cho riêng mình hoặc nếu tôi muốn trình bày cho khách hàng hai tùy chọn cho một màn hình hoàn chỉnh (ví dụ : "Bạn có muốn các nút ở đây hay ở đây? " )


2

Nghe có vẻ như bạn đang sử dụng các phương pháp tốt, nhưng bạn đang gặp phải sự kháng cự khi mọi người chấp nhận tiện ích tạo mẫu nhanh. Mọi người đều thích viết mã, nhưng nếu nửa giờ sau, họ vẫn chiến đấu với JScrollBars và bạn đã tạo ra 12 mockup, họ có thể hiểu rằng sức mạnh của các công cụ này là ở tốc độ lặp lại nhanh chóng .

Điều đó đang được nói, các cách tiếp cận low-fi khác nhau có những điểm mạnh khác nhau:

  • Tạo mẫu bảng trắng rất hữu ích vì bất kỳ ai cũng có thể tham gia và nó giúp ích cho các ý tưởng, nhưng nó chỉ là một công cụ thảo luận. Bạn muốn một cái gì đó tiến thêm một bước nếu bạn sẽ lặp đi lặp lại trên một thiết kế, nếu chỉ vì nó khó xóa được điểm đánh dấu cũ. ;)

  • Tạo mẫu bằng giấy rất hữu ích vì mọi người hiểu nó là vô thường và mở để thay đổi, và bạn có thể lặp lại nhanh chóng, và bạn vẫn có thể nhận được kết quả rất tốt. Thực hiện kiểm tra khả năng sử dụng với một số người dùng trên một nguyên mẫu giấy và bạn có thể nhận được phản hồi tuyệt vời về một thiết kế rất nhanh chóng, với chi phí khá thấp. Mọi người thực sự tham gia khi họ có thể nhìn và cảm nhận giao diện trên giấy.

  • Balsamiq là một phím tắt để nhanh chóng tạo ra các nguyên mẫu giấy có thể tái sử dụng. Tôi in ra các ảnh chụp màn hình và sử dụng chúng như các nguyên mẫu giấy. Tôi cũng sử dụng nó trong các cuộc họp để giúp mô phỏng các ý tưởng khi chúng ta có chúng - tương tự như tạo mẫu bảng trắng. Tôi cũng đã sử dụng Visio và OmniGraffle cho việc này.

  • Cắt và dán các nguyên mẫu rất tốt cho việc lặp lại trên một thiết kế hiện có - chụp ảnh màn hình, cắt nó trong trình chỉnh sửa hình ảnh, trộn và kết hợp với các điều khiển mới (từ Balsamiq hoặc các nơi khác). Một lần nữa, mục tiêu của bạn là lặp lại nhanh chóng của nguyên mẫu, không phải là thứ gì đó có vẻ tốt.

Tôi không bao giờ làm nguyên mẫu với người dùng. Tôi làm điều đó với đội ngũ thiết kế, dựa trên dữ liệu người dùng chúng tôi có. Người dùng không phải là nhà thiết kế ; nếu bạn coi họ là nhà thiết kế, bạn sẽ có nước sốt cà chua, cà phê đắng (cảm ơn Malcolm Gladwell) và chiếc xe Homer. Tập hợp người dùng nhập vào thiết kế của bạn và sử dụng nó để tinh chỉnh thiết kế với nhóm thiết kế.


2

Mock-up đầu tiên của tôi luôn là bút chì & giấy hoặc bảng trắng, nhưng một khi những điều cơ bản bị đóng đinh, tôi thường chuyển sang HTML. Tôi có một loạt các hình ảnh giữ chỗ chỉ đơn giản nói "Tiêu đề", "Biểu ngữ", "Hình ảnh", "Biểu đồ" và những thứ tương tự. Một số CSS đơn giản để sắp xếp mọi thứ một cách an toàn và tôi đã hoàn thành. Một chút JS được xử lý để kiểm soát có thể cung cấp cho bạn một số ngữ nghĩa của chức năng và mọi người dường như "hiểu rõ hơn".

Vấn đề duy nhất với điều này là tôi có lẽ là nhà thiết kế UI sống tồi tệ nhất thế giới, và đôi khi phải nhắc nhở mọi người rằng tôi chỉ thu thập các yêu cầu, không cho họ thấy những gì đã hoàn thành sẽ như thế nào. Tôi thường đặt nền là màu hồng hoặc một cái gì đó, vì vậy bất cứ khi nào bất cứ ai hỏi "Nó có phải là màu hồng không?" Tôi có thể phản bác lại với "Đây chỉ là một bản nhái, thực tế sẽ khác" (hoặc "Bạn sẽ phải thảo luận điều đó với nhà thiết kế").


1

Tôi sử dụng bút và giấy trước, sau đó sau khi vẽ UI vài lần, tôi cố gắng làm cho nó ở powerpoint 2 hoặc 3 lần. Có 5 hoặc 6 lần lặp trước khi vào trình chỉnh sửa thực tế giúp tôi cắt giảm các UI không thể thực hiện được (chẳng hạn như tạo nội dung Y dựa trên hộp văn bản X khi người dùng chưa nhìn thấy X). Tôi thấy đó là một cơ hội để thoát khỏi sự ngu ngốc ngay lập tức.


1

Bút & giấy / bảng trắng, và bạn cũng có thể sử dụng Visio hoặc một cái gì đó tương tự (Visio đi kèm với các mẫu UI cho các điều khiển chung). Đôi khi tôi chụp ảnh giao diện người dùng (tương tự) hiện có mà chúng tôi có và cắt và dán giao diện người dùng mới lên nó bằng chương trình vẽ như Paint.NET.


1

Tôi đã thực hiện tạo mẫu nhanh ở Delphi nhiều lần. Nó giúp bạn dễ dàng nhanh chóng kết hợp bố cục màn hình, nhanh hơn nhiều so với powerpoint hoặc visio. Exe kết quả có thể được gắn vào e-mail mà không yêu cầu bất kỳ phụ thuộc. Vì tôi sử dụng nó cho các ứng dụng web nguyên mẫu, không có nguy cơ mọi người nhầm lẫn nguyên mẫu với phiên bản đã hoàn thành một nửa.

Tôi đã cố gắng làm điều tương tự với Sencha Ext Designer, nhưng hệ thống bố cục của Ext JS khó sử dụng hơn và nó cảm thấy giống như một gánh nặng hơn là sự tiện lợi để nhanh chóng lặp lại ý tưởng.


1

Tôi không luôn luôn sử dụng cùng một cách tiếp cận. Một số kỹ thuật tôi sử dụng là (theo thứ tự tần số thô):

  • Bảng trắng (để tạo mẫu tương tác / thảo luận. Chụp ảnh sau đó!)

  • Trình thiết kế GUI kiểu RAD (Visual Studio, NetBeans, Delphi)

    • Làm tốt điều này và nó thực sự có thể trở thành một trong những cách nhanh nhất để tạo các nguyên mẫu của ứng dụng "cửa sổ, vật dụng và biểu mẫu". Phần thưởng: các nguyên mẫu có thể trông khá chuyên nghiệp, tùy thuộc vào mức độ nhanh chóng bạn ném nó lại với nhau. Chúng đôi khi thậm chí có thể đóng vai trò là điểm khởi đầu để tạo ra vật thật, một khi nguyên mẫu được phê duyệt.

  • Giấy và bút / bút chì (thường để tự động não)

  • Các tệp HTML / CSS / JS tĩnh trên đĩa

    • Tôi tưởng tượng một ứng dụng thiết kế WYSIWYG sẽ không bị tổn thương ở đây, nhưng tôi thường chỉ hack vào HTML thô. Dù sao thì tôi cũng không làm nhiều thứ như vậy.

  • Công cụ vẽ vector - Illustrator / Inkscape / Visio / PowerPoint / Impress

  • Công cụ đồ họa raster - Photoshop / Gimp

  • Nghệ thuật ASCII ;-)

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.