wireframe là gì ?
Một wireframe là một sơ đồ, một kế hoạch chi tiết, hữu ích để giúp bạn và các lập trình viên và nhà thiết kế của bạn suy nghĩ và truyền đạt về cấu trúc của phần mềm hoặc trang web bạn đang xây dựng.
Cùng một màn hình có thể được xây dựng theo nhiều cách khác nhau, nhưng chỉ một vài trong số chúng sẽ đưa thông điệp của bạn chính xác và dẫn đến một phần mềm hoặc trang web dễ sử dụng. Xây dựng một cấu trúc giao diện tốt có thể là phần quan trọng nhất của thiết kế phần mềm.
Một wireframe là một minh họa trực quan của một trang Web. Nó có nghĩa là hiển thị tất cả các mục được bao gồm trên một trang cụ thể, mà không xác định giao diện (hoặc thiết kế đồ họa). Nó chỉ đơn giản là để minh họa các tính năng, nội dung và liên kết cần xuất hiện trên một trang để nhóm thiết kế của bạn có thể mô phỏng giao diện trực quan và các lập trình viên của bạn hiểu các tính năng của trang và cách chúng hoạt động.
- Wireframes là các bố cục đen trắng đơn giản phác thảo kích thước và vị trí cụ thể của các thành phần trang, tính năng trang web, khu vực chuyển đổi và điều hướng cho trang web của bạn.
- Chúng không có màu sắc, lựa chọn phông chữ, logo hoặc bất kỳ yếu tố thiết kế thực sự nào mà không tập trung hoàn toàn vào cấu trúc của trang web.
- Chúng tôi thường nói rằng chúng giống như một bản in màu xanh cho một ngôi nhà, nơi bạn có thể dễ dàng nhìn thấy vị trí cấu trúc của hệ thống ống nước, điện và các cấu trúc khác mà không cần bất kỳ phương pháp thiết kế nội thất nào.
Lợi ích của wireframe
So với nguyên mẫu hoặc bất kỳ loại thiết kế màn hình chi tiết nào, khung dây có các ưu điểm sau:
- Dễ vẽ: Wireframe có bố cục đơn giản và gọn gàng. Nó được hình thành bởi các yếu tố màn hình đơn giản mà không có bất kỳ kiểu dáng và định dạng chi tiết.
- Dễ hiểu: Wireframe được chào đón bởi cả đội ngũ phát triển và doanh nhân. Nó đơn giản đến mức mọi người đều có thể hiểu mà không cần học.
- Dễ dàng sửa đổi: Bạn không cần bất kỳ chương trình nào để hình dung các ý tưởng thiết kế mới.
- Không yêu cầu mã hóa: Không tạo mẫu nặng và không mã hóa. Bạn chỉ cần vẽ khung dây như thể bạn đang sử dụng một công cụ vẽ.
- Chú thích nội tuyến: Chú thích các ý tưởng thiết kế tại chỗ với sự trợ giúp của các hình dạng chú thích. Những chú thích này cũng có thể được hiển thị trong đặc tả yêu cầu.
Phần mềm vẽ tạo wireframe
- Antetype (Mac)
- Axure RP Pro (Windows)
- Balsamiq Mockups – Công cụ tạo khung nhanh chóng để tạo cả hai kiểu khung dây truyền thống và phác thảo. Có thể được nhúng trong một CMS. (Windows, Mac, Linux, Ứng dụng web)
- Cacoo (Ứng dụng web) – Công cụ vẽ trực tuyến cho phép bạn tạo nhiều loại sơ đồ như sơ đồ trang web, khung dây, UML và biểu đồ mạng.
- Khái niệm Draw (Mac và Windows)
- Draw.io (Ứng dụng web)
- Biểu thức pha trộn (Windows)
- Pháo hoa (Mac và Windows)
- Flairbuilder (Mac và Windows)
- FluidIA – Một công cụ tạo mẫu UI nhanh nhẹn nguồn mở.
- ForeUI – Trình tạo nguyên mẫu tương tác đầy đủ tính năng. (Mac và Windows)
- Framebox (Ứng dụng web)
- Gliffy (Ứng dụng web)
- HotGloo – Cho phép bạn tạo các khung lưới tương tác với các chú thích xem lại và các tính năng xuất PNG.
- Illustrator (Mac và Windows)
- InDesign (Mac và Windows)
- Infragistic Indigo Studio (Mac và Windows)
- iPhone Mockup (Ứng dụng web)
- iPlotz – Dịch vụ web để tạo và quản lý các khung lưới kiểu phác thảo và các protypes nhanh.
- iRise (Windows)
- Lucidchart – Công cụ tạo mẫu / sơ đồ nhanh chóng. Dựa trên web. Công cụ dựa trên HTML5 để tạo các nguyên mẫu trang web / UI tương tác.
- Lumzy (Ứng dụng web) – Công cụ mô phỏng kiểu phác thảo trực tuyến.
- MockFlow – Tạo các khung lưới nhấp qua, thêm nhận xét, xuất thành PNG hoặc PDF.
- Mockingbird – Công cụ dựa trên HTML / JS / CSS để tạo các khung lưới nhấp qua.
- Mockup Tiger (Ứng dụng web)
- Moqups (Ứng dụng web)
- Napkin Look & Feel (Mac và Windows)
- OmniGraffle (Hệ điều hành Mac)
- Oversite (Mac và Windows)
- Pidoco (Ứng dụng web)
- Protonote – Cho phép người dùng chú thích các nguyên mẫu HTML.
- Protoshare – Dịch vụ tạo, chú thích và quản lý khung lưới và nguyên mẫu, cũng như tạo thông số kỹ thuật.
- Serena Prototype Composer (Windows) – Một ứng dụng dự án đầy đủ tính năng cho các thông số kỹ thuật, mô hình hóa, tạo mẫu và quản lý dự án.
- SmartDraw (Windows)
- UXPin , chính thức là JustProto (Ứng dụng web)
- Visio, bởi Microsoft (Windows)
- Plugin Wireframe Sketcher (Mac và Windows, cũng như một plugin Eclipse)
- Wireframe | cc (Ứng dụng web)