Tôi muốn biết sự khác biệt giữa Wireframes và Mockups. Tôi hy vọng có được sự hiểu biết đơn giản về sự khác biệt hoặc chắc chắn biết rằng cả hai đều giống nhau.
Tôi đã googled nó nhưng tôi không thể hiểu chính xác sự khác biệt là gì, tôi sẽ đánh giá cao nó nếu ai đó có thể giải thích nó cho tôi một cách chính xác.
Câu trả lời:
Một khung dây là về chức năng. Nó có thể là một bản phác thảo thực sự đơn giản thể hiện những thứ bạn có thể làm trong thiết kế của mình. Ví dụ, khung dây của trang web sẽ hiển thị điều hướng, các nút chính, các cột, đặt các yếu tố khác nhau. Bạn có thể nghĩ về nó như một bản thiết kế cho một trang web.
Một mockup là một đại diện thực tế về sản phẩm sẽ trông như thế nào, trong trường hợp này: một trang web. Kết quả cuối cùng có thể trông giống hệt như mockup, hoặc là một biến thể của nó sau khi sửa đổi phiên bản. Trong khi một số người thích vẽ các mockup bằng phần mềm đồ họa, những người khác thực hiện trực tiếp bằng HTML / CSS.
Tôi sử dụng Balsamiq cho khung lưới và Photoshop / Illustrator hoặc HTML + CSS (tùy thuộc vào độ phức tạp) cho mockup.
Một ví dụ về khung dây:
Wireframes là hình dạng hoặc đường thô sơ được sử dụng để chỉ định vị trí và / hoặc kích thước. Mục tiêu của bất kỳ khung dây nào là "khớp" các phần tử vào bố cục, không cho biết các phần tử có thể thực sự xuất hiện như thế nào trong một thiết kế cuối cùng, chỉ nơi chúng sẽ được đặt.
Mockup được xây dựng trên đỉnh của khung lưới và đi xa hơn để hiển thị các khía cạnh tổng thể của thiết kế bao gồm lựa chọn loại, lựa chọn màu sắc, v.v ... Mục tiêu của giả lập là hiển thị càng gần càng tốt, tất cả các lần xuất hiện cuối cùng sẽ được hiển thị như thế nào.
Tôi hỗ trợ trả lời chi tiết của @Yisela, cũng để thêm tầm nhìn này được trình bày trong phần trình bày sau
Dưới đây là một bản tóm tắt ngắn của một bài viết của Marcin Treder :
Dây khung
Một khung dây là một đại diện có độ trung thực thấp của một thiết kế. Nó sẽ hiển thị rõ ràng:
• Cấu trúc thông tin (ở đâu?)
• Mô tả và trực quan hóa cơ bản về tương tác giao diện người dùng (như thế nào?)
Giả lập
Wireframes được sử dụng để xác định khung, phân cấp thông tin, thể hiện quy trình làm việc, cung cấp chi tiết về những gì trên màn hình và mô tả về cách thức hoạt động của một thành phần (chú thích). Tùy thuộc vào mức độ phức tạp của ứng dụng hoặc trang web, khung lưới phải được xây dựng theo yêu cầu khác có thể phân phối được; mô hình quá trình. Wireframes có thể được sử dụng để gợi ra các yêu cầu từ máy khách và cuối cùng xác nhận các yêu cầu với máy khách. Wireframes là một mô hình trực quan về cấu trúc của một trang web hoặc ứng dụng. Họ không xác định phông chữ sẽ được sử dụng, phần đệm, màu sắc, kiểu dáng, v.v. Chúng không theo tỷ lệ và chúng không có tông màu hoặc độ dốc. Tất cả những điều này cần được liên lạc với khách hàng để họ hiểu quy trình và bối cảnh của khung dây có thể phân phối được, kết hợp với các phân phối yêu cầu khác.
Một mock-up thường được tạo ra trong Photoshop và trong khi nó dựa trên cấu trúc hoặc khung của khung dây được xác nhận có thể phân phối được, thì nó có thể phân phối được, với một lịch trình và quy trình phê duyệt riêng biệt. Mock-up hoặc comps, xác định phong cách hình ảnh hoặc tông màu của giao diện. Sau khi được chấp nhận, mock-up dịch thành một số yêu cầu bổ sung hoặc sản phẩm công việc, chẳng hạn như mã CSS, hướng dẫn kiểu, tài sản đồ họa, v.v.
Wireframes không bao giờ là mock-up. Mock-up có thể được sử dụng như khung lưới nhưng điều này sẽ có ý nghĩa đối với bất kỳ sửa đổi nào có thể được yêu cầu và ảnh hưởng đáng kể đến ngân sách của bạn.
Nguồn: 15 năm làm Nhà thiết kế truyền thông, Trưởng nhóm UX, Nhà phân tích kinh doanh trong môi trường doanh nghiệp phát triển các trang web và ứng dụng. Và BABOK yêu dấu
Tôi chưa có tiếng tăm gì để bình luận về phản hồi của Dave Kaye vì vậy tôi đã phải trả lời trực tiếp. Rất đáng để chú ý câu trả lời của anh ấy so với câu trả lời xuất sắc của Rachuru.
Trong một diễn giải các cụm từ hiện đại, lời giải thích của giáo dân có thể / nên là;
Thuật ngữ thực tế bắt nguồn từ những năm 80. Trước đó, bạn không có khả năng tính toán để tạo ra hình ảnh thời gian thực nhưng bạn có thể xem "khung lưới" đồ họa nổi trên màn hình trong thời gian thực. Một "bản demo" thích hợp cần kết xuất qua đêm, v.v.
Trong những thời điểm này, một "khung dây" đại diện cho một "thiết kế" bộ xương và, với quy trình thiết kế lặp tốt, mọi người nên tạo ra các mô hình từ khung dây, nhận phản hồi và chuyển lại để cải thiện thiết kế khung dây.
Thật không may, ngày nay, có rất nhiều phần mềm có sẵn cho khách hàng cho phép họ thiết kế các mô hình không sử dụng bất cứ thứ gì mà các lập trình viên có thể sử dụng trực tiếp. Thông thường, các thiết kế của họ được xây dựng bởi những người khác để mockup được tăng cường riêng tư thay vì được đưa trở lại cho các lập trình viên để đưa vào các thiết kế lớn.
Tôi nghĩ đó chính là điều mà Dave đã lịch sự hơn một chút khi đề cập đến :-)
Keith
Nói một cách đơn giản:
Wireframes : bộ xương / cấu trúc
Mockups : khía cạnh da / thị giác
Như một số người đã lưu ý, ngày nay các khung lưới đang ngày càng trở nên quan trọng hơn trong khi các mockup đang hợp nhất thành các nguyên mẫu.
Phải thêm một điểm mà mọi người chưa đưa ra ... những câu trả lời này đều đưa ra những mô tả kỹ thuật đàng hoàng nhưng trong môi trường làm việc, sự khác biệt không phải lúc nào cũng rõ ràng. Một số công ty có thể thêm chức năng cho một mockup và một số công ty có thể đưa các yêu cầu thiết kế cấp cao vào khung dây. Tôi sẽ cẩn thận về việc bị khóa trong câu trả lời về những điều "nên" là công ty đầu tiên bạn đến có thể làm điều gì đó không phải là một trong những điều này!
Theo kiến thức của tôi, màn hình mockup là sự hồi phục cuối cùng của UI, hãy nhìn và cảm nhận. Dòng chảy bình thường sẽ là gì và dòng chảy thay thế sẽ là gì. Tôi nghĩ rằng đó có thể là loại nguyên mẫu web chủ yếu được tạo bằng HTML và CSS. Chúng tôi thực hiện sau đó chủ yếu trong giai đoạn HLD để hiển thị và có sự chấp nhận từ khách hàng.
Wireframes khi so sánh tập trung nhiều hơn như sơ đồ dòng chảy trong đó có một mô tả chung. Nếu không đại diện cho một vài mô tả chi tiết như những gì xảy ra khi nhấp vào sự kiện, hãy thay đổi sự kiện và những điều tương tự. Chúng chủ yếu được thực hiện bởi SA / BA và giả lập được thực hiện bởi nhà thiết kế / nhà phát triển. Hơn một số người gắn các thông số kỹ thuật với các khung lưới như DB liên quan đến giao diện người dùng cụ thể đó.
Nhưng một lần nữa, nó phụ thuộc vào dự án để dự án. Trong trường hợp của chúng tôi, khung lưới đứng nguồn của sự thật.
Đây là những gì tôi hiểu là một sự khác biệt trong họ
Một khung dây có thể là một mockup. Một mockup một được coi là một khung dây. Mặc dù đôi khi chúng là những thứ riêng biệt (như những người khác đã nêu) nhưng chúng thường không phải là những thứ riêng biệt.
Tại một thời điểm, người ta có thể xem xét các khung lưới mà Visio sẽ tạo ra. Và Mockups sẽ là những gì PhotoShop sẽ tạo ra.
Nhưng ngày nay, với hàng loạt các công cụ chúng ta có, chúng thường là cùng một tài liệu thực tế. Lúc đầu, chúng có thể bắt đầu như các khung dây (hoàn toàn là bố cục và chức năng) nhưng theo thời gian ngày càng trở nên chi tiết hơn đến mức chúng có thể được coi là một mockup. Và nếu sử dụng một công cụ tương tác như Axure, tại một thời điểm nhất định, người ta có thể coi nó là nguyên mẫu.
Vì vậy, nó là một quang phổ với rất nhiều chồng chéo.
Dây điện
Khi bạn có ý định thiết kế một ứng dụng di động hoặc một ứng dụng web, trước tiên bạn sẽ cần một bản phác thảo về việc mỗi trang sẽ trông như thế nào. Chỉ dựa trên các khái niệm kinh doanh, một nhà thiết kế có thể xác định luồng ứng dụng và bản phác thảo thiết kế đầu tiên, có một bản phác thảo về nó sẽ trông như thế nào, nút nào sẽ ở đó, trường nào sẽ ở đó, v.v. có nghĩa là cho.
Mockup
Mockup là hình ảnh sống động hơn. Chúng trực quan hấp dẫn hơn, có màu sắc, phông chữ, chủ đề, nút, logo, v.v ... Ở giai đoạn này nhãn của các trường, ghi chú, loại phông chữ, menu điều hướng, v.v. được chỉ định trong thiết kế. Đây là một đại diện chính xác về cách ứng dụng di động sẽ trông như thế nào hoặc các trang web sẽ trông như thế nào.
Bạn có thể tìm thấy so sánh chi tiết giữa Wireframes và Mockup trong bài viết thông tin này: Sự khác biệt giữa Wireframe, Mockup và Prototype