Các thực tiễn tốt nhất để tạo mẫu nhanh bằng cách sử dụng HTML / CSS / JS độc quyền [đã đóng]

Tôi đang phát triển một nguyên mẫu của một ứng dụng web. Tôi muốn chỉ sử dụng HTML, CSS và Javascript. Tôi thích sử dụng trình soạn thảo văn bản của mình và không phải học (hoặc trả tiền, cho vấn đề đó) một công cụ mới như Axure.

Điều gì sẽ là, theo suy nghĩ của bạn, các thực hành tốt nhất? Đối với tôi có nhiều phẩm chất cho một nguyên mẫu tốt:

• Phát triển nhanh
• Dễ dàng cải thiện
• Độ trung thực công bằng liên quan đến UX (điều này không đủ tiêu chuẩn cho các công cụ như Omnigraffle hoặc PowerPoint dành riêng cho khung lưới)

Tôi cố gắng học càng nhanh càng tốt, nhưng tôi muốn biết, dựa trên kinh nghiệm của bạn, về cách bạn quản lý để nhanh chóng và nhanh nhẹn.

Tài liệu tham khảo:

• http://www.boxesandarrows.com/view/prototyping- với

Nếu bạn sẽ vứt bỏ nguyên mẫu và bắt đầu lại trên ứng dụng thực sau đó, thì tôi sẽ khuyên bạn nên sử dụng một công cụ như PowerPoint hoặc Balsamiq hoặc thậm chí là giấy. Độ trung thực thấp cho phép người dùng của bạn tập trung vào sự tương tác và ít hơn vào màu sắc hoặc các nút sủi bọt. Bạn thực sự nhận được nhiều kinks làm việc nhanh hơn với đầu tư ít hơn như thế này.

Nếu cuối cùng bạn đang nhắm đến việc sử dụng mã của mình làm nền tảng cho một ứng dụng thực sự , thì tôi sẽ khuyên bạn nên xem xét một thứ gì đó nhẹ như Webmatrix hoặc Ruby / Java IDE tương đương. Webmatrix là một công cụ miễn phí là một IDE sẽ giúp bạn thiết kế và mô phỏng trang web của bạn thực sự nhanh chóng và thậm chí sử dụng SQL Express, IIS Express và các phần khác của ngăn xếp web .NET (hoàn toàn miễn phí) cục bộ. Sau đó, nếu bạn quyết định nâng cấp lên Visual Studio sau này, bạn có thể không cần làm gì với ứng dụng của mình.

Bạn có thể đưa một nguyên mẫu vào ứng dụng thực tế khá nhanh nếu bạn chọn đúng công cụ. Gần đây tôi đã tạo ra một công cụ nội bộ mà cuối cùng sẽ thay thế một bộ sưu tập màn hình cổ xưa quản lý dữ liệu nội bộ. Hệ thống cũ không trực quan lắm và cực kỳ khó hiểu cho những nhân viên mới.

Chồng của tôi:

• HTML5 Boiilerplate
• Blueprint CSS cho lưới và bố cục
• jQuery và jQueryUI để xử lý JavaScript và Bố cục
• Xác thực jQuery để xác thực mẫu phía máy khách

Đặt cái này lên trên một khung MVC và buộc nó vào mã ứng dụng phía máy chủ mà bạn chọn và bạn có thể khởi động trong vòng một ngày.

* CÁCH BẢO VỆ RAPIDLY *

Một số người bối rối bởi điều này. Xin hãy đồng ý với tôi, có nhiều mức độ "vận tốc" khác nhau khi nói đến việc bảo vệ, nhưng chỉ có một mức nhanh nhất - và nó sẽ luôn nhanh nhất, vì nó gần nhất với mức độ tương tác; và đó là trình duyệt.

Làm thế nào để nhanh chóng nguyên mẫu?

1 - Cố gắng tìm tất cả những gì có trong "Thiết kế trong trình duyệt" - Các chuyên gia nói rằng cách tốt nhất để thiết kế giao diện người dùng là "lấy mã nhanh nhất có thể" - Chris Coyier.

2 - Để được nhanh chóng có nghĩa là tái sử dụng. - Thủ thuật số 1 để tạo mẫu nhanh là ~ "xây dựng các thành phần có thể xây dựng trên thành phần khác mà bạn đã xây dựng."

Ví dụ: - Điều này có thể giống như Tab được chứng minh trong một trang - Biểu đồ được chứng minh ở trang khác - Sau đó, các hộp tổ hợp phong phú đã được chứng minh ở trang thứ ba

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - Vì lợi ích của pete, nếu bạn đang tạo mẫu nhanh - NÓ CÓ THỂ THOẢI MÁI. Xin đừng tự đùa rằng mã định dạng sẽ là cần thiết. Nguyên mẫu nhanh là mã thowaway, hoặc mã phát triển, trong cả hai trường hợp này có thể được xử lý hoặc tự động lâu sau khi nguyên mẫu được xem xét. Điểm của nguyên mẫu là xác định sức sống kiến ​​trúc. Chúng tôi đang nói về Sản phẩm khả thi tối thiểu trong hầu hết các trường hợp, vì vậy hãy lấy mã làm việc trên trang càng nhanh càng tốt. Đây chỉ là Proof of Concept, không phải là bằng chứng trong pudding.

4 - Tôi đã đề cập đến tự động hóa, một IDE tốt thực sự quan trọng - một IDE có rất nhiều phím nóng. "Để nhanh chóng tạo nguyên mẫu - ngón tay của bạn cần phải bay chứ không phải chuột." - Nhưng có nhiều hơn thế. Nhiều IDE sẽ định dạng mã cho bạn. Nhiều người sẽ lint trong khi bạn làm việc, tìm lỗi khi chúng được thực hiện, một số có thể cập nhật trình duyệt của bạn khi lưu. Cú pháp tô sáng. Nó đơn giản nhưng hiệu quả.

Kết luận: Tạo mẫu nhanh là một bản tổng hợp các loại tính trạng thực hành tốt nhất này. Không ai trong chúng tôi ngay lập tức ra khỏi cổng: vì vậy đây là một quá trình tiến hóa để tăng tốc độ của bạn. Điều này được đo bằng Agile là vận tốc. Bạn phải suy nghĩ - làm thế nào để đi nhanh hơn, sau đó nghiêng về phía trước nhiều hơn.

** Kết hợp mọi tối ưu hóa phát triển mà bạn có thể theo thời gian. ** Xây dựng thư viện các vật dụng, công nghệ và nghĩa địa nguyên mẫu. ** Sau đó, khi thời gian đến, nhân đôi chúng và trộn chúng lại với nhau - duy trì bản gốc trong khi phát triển một cái gì đó mới. ** Điều này đặc biệt đúng với nhiều khung công tác JS.

Mong rằng sẽ giúp.

Bạn đã xem Bootstrap của Twitter hay Yahoo's Pure chưa?

Cả hai đều rất, rất dễ dàng để khởi động và chạy cùng, và bạn có thể tạo ra một số giao diện khá phức tạp chỉ với những gì bạn nhận được "ngoài luồng".

Tôi đã sử dụng Bootstrap để tạo mẫu trong một thời gian dài và thường xuyên hơn là không, các xương tương tự của nguyên mẫu đã đi vào sản phẩm hoàn chỉnh.