Hế lô 500 anh emmmm 🙂
Hằng ngày đi làm việc, có lẽ rằng đồng đội hoặc nghe những loại như Wireframe, Mockup, hoặc Prototype.
Bạn đang xem: Phân biệt Sketch, Wireframe, Mockup, và Prototype?
Mình tin cậy là ai ai cũng biết bao nhiêu loại này nói tới gì. Nhưng nhằm hiểu rõ ràng từng loại một, đặc tính và mục đích sử dụng của từng loại thì ko nên đồng đội nào thì cũng tóm.
Bài note này bản thân tiếp tục chém dông một trong những loại về UI, hy vọng chung đồng đội phân biệt rõ: Như thế nào là là Sketch, Wireframe, Mockup và Prototype? 😎
1. Khác biệt cơ bản
Thật đi ra khi đầu tôi cũng thấy khá rối ở bao nhiêu định nghĩa này. Gì nhưng mà tùm lum tùm la, ông nào thì cũng như ông nào là, chả thấy không giống gì nhao.
Nhưng nhằm đơn-giản cu-te hột-me hơn vậy thì đồng đội cứ tưởng tượng như sau.
Có ông phong cách thiết kế sư, người tao mướn ổng design một ngôi nhà. Ổng tiếp tục nghiên cứu và phân tích, vẽ vời những loại nhằm đi ra được một loại, gọi là: BẢN THIẾT KẾ.
Bản design mái ấm (Nguồn: xaynhasaigon.vn)
Vẽ đoạn, ổng mới nhất đem phiên bản design này cho tới bao nhiêu anh nghệ thuật 3 chiều, phác hoạ thảo mái ấm đi ra hình – đi ra dáng vẻ, để lấy cho tới người tiêu dùng coi và duyệt..
Đây, phiên bản phác hoạ thảo mái ấm 3 chiều (Nguồn: baophat.com)
Rõ ràng cả hai bản: Bản design và Bản phác hoạ thảo không giống nhau vượt lên trên đúng không nào anh em?
- Một cái là design sơ khởi, chỉ bao gồm những phần chủ yếu, và thể hiện nay tổng quan mái ấm.
- Còn một chiếc thì lên màu, nội thất, chi tiết 3 chiều đẹp tươi những loại.
Đó là chuồn từ “thiết nối tiếp sơ cỗ >> design chi tiết”.
Mỗi loại đều thể hiện một nội dung không giống nhau, và truyền tải một thông điệp không giống nhau.
Bản design vs. Bản phác hoạ thảo
Sketch, Wireframe, Mockup, hoặc Prototype vô ứng dụng cũng vậy.
Về cơ phiên bản, nhằm xây một ứng dụng thì đồng đội cũng nên chuồn kể từ thiết nối tiếp sơ cỗ >> design chi tiết.
Và khoảng cách thân thuộc “thiết nối tiếp sơ cỗ >> design chi tiết” chính là ở gói gọn vô 4 chữ: Sketch >> Wireframe >> Mockup >> Prototype, với cường độ cụ thể tăng dần dần bám theo từng loại.
Khoảng cơ hội kể từ Sketch cho tới Prototype
Phần tiếp sau đây đồng đội bản thân tiếp tục nằm trong tìm hiểu từng loại và từng loại nó khác gì nhau? Lét sờ gâuuuu!
SKETCH giản dị là PHÁC HỌA. Phác họa tức là vẽ nhanh chóng, phác hoạ thảo nhanh chóng một hình hình họa nào là bại. Keyword ở đấy là nhanh, rất nhanh nhé đồng đội. Hoàn toàn ko thể hiện nay tè tiết.
Vì sao lại vẽ nhanh?
Mục đích của Sketch là nhằm capture nhanh những ý tưởng khi đồng đội ngồi suy nghĩ 1 mình hoặc đang được brainstorm cùng nhau.
Đó là những khi đồng đội ngồi trao thay đổi cùng nhau bám theo kiểu:
“Thế này, vị trí này còn có cái lưới, bao gồm n loại ở trên đây, được chưa…
Chắc nút X nhằm vị trí này, nhấp vào cái bặccccc, là đi ra popup như vậy này;
Đây trên đây, popup tiếp tục hiện nay vị trí này, một viên ngay lập tức trên đây nha…, cạnh lưới hình hình họa khi nãy, ở trên đây nè, sao, ổn định chưa……”
(đại loại vậy)
Đấy, sketch chỉ giản dị là phác hoạ thảo (UI) vài ba đàng cơ phiên bản, thong dong quệch quạc bám theo phát minh của tôi thôi đồng đội.
Thường bản thân hoặc sử dụng bút lông vẽ lên bảng trắng nhằm trao thay đổi với đồng bọn. Ít khi sử dụng giấy tờ cây bút như bao nhiêu hình Sketch xinh xinh bên trên mạng.
Vì Lúc đồng đội sử dụng giấy tờ cây bút, khi vẽ sai sót thì khó khăn bôi lắm >> nhưng mà ko bôi được thì xóa cho tới xóa lùi >> xấu xí.
Mà ko xóa cho tới xóa lùi >> vẽ lại cái không giống >> tốn thời hạn >> đứt mạch suy nghĩ
Do bại, best nhất là cứ sử dụng cây bút lông vẽ lên bảng white. Sai cho tới đâu, vẽ lại cho tới bại. Nếu lỡ với sai thì quẹt một vạc vẽ là white láng ngay lập tức, cứ đà này mà vẽ tiếp.
Và thông thường thì bản thân hoặc sử dụng Sketch nhằm trao thay đổi về những tính năng enhancement. Tức system lúc này vẫn với, người tiêu dùng ham muốn thực hiện thêm thắt tính năng này, cái bại. Giờ bê cái bại lên khối hệ thống thì nó sẽ bị chạy đi ra sao?
Phương pháp Sketch không những chung đồng đội “hườm hườm” được màn hình hiển thị của công dụng bại ngay lập tức tức thì, nhưng mà còn làm cả team nằm trong tâm trí đúng-thứ-mình-đang-nói*.
*Tức, thay cho tôi chỉ nói: “à à, cái nút bại phía trên, cái lưới ở bên dưới. Bấm vô cái nút thì popup hiện thị lên, cạnh cái lưới zậy nè….”. Thì đặc biệt rất có thể, từng người tiếp tục hiểu một loại không giống nhau. Tới khi confirm, ông thì hiểu A, bà thì hiểu Á >> lộn xì ngầu lên không còn.
Nên, tóm gọn gàng ở mục này:
SKETCH là phiên bản phác thảo nhanh chóng UI của ứng dụng, nhằm mục đích ghi nhận nhanh chóng ý tưởng về một công dụng nào là bại.
Ví dụ về Sketch (Nguồn: mynameischad.design)
Ví dụ về Sketch (Nguồn: ticalin.com)
3. Wireframe
Ô kê, lịch sự Lever thứ hai, này là Wireframeeeeeeee!!!
Wireframe thì cụ thể rộng lớn Sketch đôi lúc. Và sự “chi tiết hơn” ở trên đây thể hiện nay rõ ràng được cấu trúc của skin ứng dụng.
Cấu trúc là sao? Tức Wireframe sẽ hỗ trợ đồng đội thể hiện nay được:
- Luồng chuồn cơ phiên bản của user (User Flows)
- Và cấu tạo group vấn đề bao gồm những gì?
Thường Lúc vẽ wireframe cho tới trang web hoặc trang web apps, bản thân tiếp tục luôn luôn cấu tạo những phần consistent như sau:
Xem thêm: 50+ mẫu thiệp cảm ơn khách hàng đẹp ấn tượng
- Header: bao gồm group vấn đề tổng quan tiền như: Name, Owner, và Status.
- Body: bao gồm “X” section (các phần tài liệu => thể hiện nay vấn đề của wireframe này ham muốn tế bào miêu tả về cái gì)
- Footer: thông thường bản thân tiếp tục nhằm những ngôi trường vấn đề cơ phiên bản như: Created By, Created On, Modified By, và Modified On.
Ví dụ Wireframe của một dự án công trình bản thân làm
Theo bản thân, Wireframe là bước cần thiết nhất, vì thế nó và đúng là bộ khung của UI. Không cần thiết quan hoài cho tới sắc tố, font text, nhiều ít, cảm giác thế nào; cái cần thiết nhất của Wireframe là ở cấu tạo và group vấn đề nhưng mà nó thể hiện nay.
Wireframe là bố cục của UI, tuy nhiên không vượt lên trên chi tiết tuy nhiên nó thể hiện nay rõ được luồng thao tác của người tiêu dùng và cấu tạo những nhóm thông tin với bên trên UI bại.
Một trong mỗi khí cụ cực tốt nhằm đồng đội vẽ Wireframe là Balsamiq. Trực quan tiền, dễ dàng học tập, dễ dàng xài, tác dụng giản dị, thao tác nhanh chóng gọn gàng. Đủ nhằm capture nhanh chóng cấu tạo của một màn hình hiển thị.
Wireframe nên luôn luôn được design ở tầm mức Low Fidelity và thông thường là output của những UX Designer. Thông thường rất có thể là BA, bởi chúng ta hiểu expectation của người tiêu dùng về User Flows. Nhưng nếu như vận dụng chính trình độ và trách cứ nhiệm thì người thực hiện Wireframe ngay lập tức từ trên đầu nên là UX Team.
Như bản thân rằng phía trên, Wireframe nên thể hiện nay được: luồng thao tác của người tiêu dùng, và cấu tạo những group vấn đề đi ra sao. Nên phần nào là nó sẽ bị đánh giá bộ khung cho tới toàn bộ màn hình hiển thị với vô thành phầm.
Do bại nhằm thực hiện chất lượng tốt Wireframe, yên cầu đồng đội nên thiệt sự hiểu User và vấn đề bản thân giải quyết ở đấy là gì. Thường tất cả chúng ta tiếp tục nên thực hiện User Research đặc biệt kỹ nhằm đi ra được những cỗ User Personas. Để kể từ bại ra những quyết định về luồng thao tác và những component với bên trên UI của tôi.
Sau Lúc chốt được cỗ khuông, đồng đội tiếp tục qua loa một loại nhiều cụ thể rộng lớn, bại là…
4. Mockup
Nhiều đồng đội hoặc tiến công đồng Wireframe với Mockup là 1 trong những về độ chi tiết của chính nó. Nhưng ko, Mockup cụ thể rộng lớn Wireframe đặc biệt, đặc biệt, và thật nhiều.
Chi tiết rộng lớn, cả về: màu sắc, địa điểm field, form size, font text, hình hình họa, đàng kẻ, phân lô, phân luồng. Thậm chí là cả validation của những ngôi trường tài liệu.
Tức ngôi trường nào là thì được input, ngôi trường nào là thì bị disable. Các ngôi trường dựa vào cùng nhau ra làm sao. Khi ngôi trường A có mức giá trị 1, thì ngôi trường B có mức giá trị gì… đại loại vậy.
Ví dụ Mockup từ là một dự án công trình bản thân thực hiện (phát triển kể từ Wireframe mặt mày trên)
So với Wireframe chỉ thể hiện nay bố cục tổng quan, cấu tạo của màn hình hiển thị là đa phần. Thì Mockup lại thể hiện nay rõ ràng màn hình hiển thị nó với gì ở trỏng, cụ thể cho tới từng field, lốt chấm, lốt phẩy.
Mockup đó là Wireframe, tuy nhiên ĐẦY ĐỦ vấn đề và thể hiện nay được NHIỀU CHI TIẾT HƠN
Trong 4 loại: Sketch, Wireframe, Mockup và Prototype, phỏng cụ thể bên trên màn hình hiển thị của Mockup và Prototype là tối đa. Do bại Lúc thực hiện Mockup, đồng đội vẫn nên rất rõ ràng User Requirement.
“Rất rõ” là sao, là nên tóm được:
- Màn hình này nằm trong chức năng/ group công dụng nào?
- Màn hình này còn có nằm trong Business Process Flow nào là không?
- Màn hình này thể hiện nay nội dung gì?
- Input/ Output bên trên màn hình hiển thị này là gì?
- Những validation với bên trên màn hình hiển thị này?
Thì chỉ Lúc tóm được những vấn đề này, đồng đội mới nhất đầy đủ dữ khiếu nại nhằm thực hiện Mockup khớp với requirement được. Chính người tiêu dùng tiếp tục phụ thuộc vào những Mockup này nhằm sign-off cho tới đồng đội thực hiện tiếp. Để đáp ứng rằng: khách mặt hàng tiếp tục sẽ có được chính cái chúng ta cần.
Hoặc ngầu lòi rộng lớn, chúng ta rất có thể đòi hỏi không những Mockup. Không đơn thuần những màn hình hiển thị tĩnh, vô tri vô giác – đơn điệu – nhạt nhẽo nhẽo – ngán òm này.
Mà chúng ta cần thiết một cái gì đó: sống động rộng lớn, linh động rộng lớn, thực tiễn rộng lớn, và thể hiện nay một cơ hội đúng chuẩn – chân thực cho tới từng mi-li-mét, loại nhưng mà người tiêu dùng ham muốn.
Khi bại, loại đồng đội cần thiết thực hiện chủ yếu là… 😎
5. Prototype
Dòm phía bên ngoài thì Prototype ko không giống Mockup là bao nhiêu. Nhưng loại thực hiện Prototype trở thành vi diệu rộng lớn này là khả năng tương tác của chính nó.
Tức thay cho những màn hình hiển thị tĩnh, thì với Prototype, người tiêu dùng trọn vẹn rất có thể tương tác thẳng với nó. Tức rờ mó, à nhầm… tức nhấn nút, kéo thả, trượt lên, trượt xuống, bung phanh popup… những loại đều được.
Điều này sẽ hỗ trợ người tiêu dùng tưởng tượng rõ ràng rộng lớn về thành phầm chúng ta tiếp tục sẽ có được.
Prototype là “mẫu test đầu tiên” của phần mềm/ hoặc một chức năng của ứng dụng, và người tiêu dùng rất có thể tương tác được ngay lập tức bên trên màn hình hiển thị của chức năng/ ứng dụng bại.
Thay vì thế Mockup chỉ thể hiện nay tầm nhìn không gian: có những element nào là bên trên màn hình hiển thị.
Thì Prototype thể hiện nay luôn luôn được tầm nhìn bám theo thời gian: hiện bên trên màn hình hiển thị như vọc, sau khi nhấn A, màn hình hiển thị tiếp tục như vọc, sau khi kéo B, màn hình hiển thị tiếp tục chuyển sang như vọc, hoặc nhấn nút C, 5 giây sau, thông tin này tiếp tục hiện nay ra…
Tức là đặc biệt rất có thể, người tiêu dùng dòm vô cũng ko biết cái nào là mặt hàng thiệt, cái nào là hàng nhái 😆
Nếu dịch đi ra giờ đồng hồ Việt thì Prototype tức là “mẫu test đầu tiên”. Nghe khá thô tuy nhiên khá sát nghĩa.
Nghĩa là thay cho thực hiện nguyên vẹn một phần mượt từ trên đầu cho tới cuối, đồng đội chỉ việc lựa chọn ra 1-2 tác dụng nổi trội nhất nhằm thực hiện Prototype nhưng mà thôi.
Nổi trội rất có thể là loại quan trọng nhất. Hoặc loại khó nhất, tức là làm công việc nhằm chứng minh năng lực. Chứng minh rằng: tụi tui trọn vẹn rất có thể thực hiện được theo như đúng tựa như các gì bao nhiêu anh ham muốn, thậm chí… ngon miệng hơn!!!
Thường Prototype được sản xuất vô quá trình pitching dự án công trình. Hoặc cũng rất có thể thực hiện nhằm làm rõ ràng requirement với người tiêu dùng. Thường vận dụng cho tới những requirement phức tạp, cần thiết thể hiện nay một cơ hội trực quan tiền.
Một điểm nữa mình đang có nhu cầu muốn rằng, bại là: Prototype trọn vẹn không giống với định nghĩa “phiên phiên bản beta”.
Bản beta là phiên bản không thiếu công dụng, vẫn rất có thể được dùng của một thành phầm. Còn prototype đơn thuần “phần trước mặt nhìn dường như là mặt hàng thiệt” của một thành phầm nào là bại thôi. Hoàn toàn không tồn tại code front-end và back-end đàng sau.
Khác với Wireframe, Mockup hoặc Prototype tiếp tục bởi những đồng đội UI Designer lãnh đạn, à sai sót, lãnh trách cứ nhiệm. Tức trọng trách này tiếp tục bởi UI Team thực hiện.
Họ tiếp tục sử dụng những trình độ riêng lẻ của tôi về: Interaction Design, Visual Design, hoặc cỗ Design System của công ty… nhằm rõ ràng hóa wireframe bên trên bởi team UX design.
Còn đứng ở góc cạnh BA, tất cả chúng ta cũng rất có thể deliver những phiên bản design này. Tùy vô cấu tạo team, budget, yếu tố hoàn cảnh, hoặc cả khả năng và kỹ năng của đồng đội.
Nhưng đồng đội cũng nên Note, thông thường vô dự án công trình thì Prototype là loại thực hiện tốn nhiều effort, và tốn nhiều tiền nhất. Nên nếu như dùng đúng vào lúc tiếp tục hiệu suất cao. Còn nếu như thực hiện dụng thì tiếp tục rất giản đơn bị “ô-vờ”, kể từ over budget, over time, overexpectation của người tiêu dùng, ko đáng!!!
Hiện thị ngôi trường với thật nhiều tool nhằm thực hiện Prototype. Nhưng một trong mỗi số “powerful” nhất bản thân từng xài này là AxureRP. Một trong mỗi tool xịn nhưng mà đồng đội rất có thể configure ĐK if else nhằm tế bào miêu tả những luồng tương tác phức tạp.
Anh em với tool gì ngon ngon thì còm nhom men bên dưới nhằm bản thân học theo nhé.
6. Tạm kết
Mình tiếp tục note vài ba gạch men đầu loại nhằm đồng đội dễ dàng lưu tâm như sau:
- Sketch: là phiên bản phác thảo nhanh UI của ứng dụng, nhằm mục đích ghi nhận nhanh chóng ý tưởng về một công dụng nào là bại.
- Wireframe: là tía cục của UI, tuy nhiên không thật cụ thể tuy nhiên nó thể hiện nay rõ ràng được luồng thao tác và cấu trúc nhóm thông tin với bên trên UI bại.
- Mockup: chính là Wireframe, tuy nhiên ĐẦY ĐỦ vấn đề và thể hiện nay được NHIỀU CHI TIẾT HƠN
- Prototype: là “mẫu test đầu tiên” của phần mềm/ hoặc một công dụng của ứng dụng, và người tiêu dùng rất có thể tương tác được bên trên màn hình hiển thị của chức năng/ ứng dụng bại.
Nói về phỏng “tốn effort để làm” thì: Sketch >> Wireframe >> Mockup >> Prototype. Theo bại thì Prototype là loại tốn chi phí nhất nhằm thực hiện, hạn chế dần dần xuống Mockup, và Wireframe.
Nên nếu như ai bại đặt mua đồng đội thực hiện Mockup hoặc Prototype thì nên clear rõ ràng yêu cầu và ngân sách của từng loại ngay lập tức từ trên đầu nhé.
Về mục tiêu dùng của BA thì:
Xem thêm: Hướng dẫn cách trang trí góc xây dựng STEAM ấn tượng, độc đáo
- Sketch: khi cần thiết brainstorm
- Wireframe: khi elicit requirement, hoặc thực hiện User Flows
- Mockup: khi cần thiết xác nhận requirement
- Prototype: khi pitching dự án công trình, hoặc kiểm thử/ xác nhận requirement.
Về công cụ:
- Sketch: bút lông, bảng trắng…
- Wireframe: Balsamiq, Axure, Sketch, Adobe XD, Figma…
- Mockup: Axure, Adobe XD, Figma…
- Prototype: Axure, Figma, Adobe XD…
Chốt lại: nắm vững định nghĩa, đồng đội tiếp tục dùng nó đúng chỗ rộng lớn, biết Lúc nào thì cần từng loại, và chi phí trong số những loại đi ra sao.
Hi vọng bài xích note này mang lại lợi ích được cho tới đồng đội. Nếu với gì vướng mắc hoặc cần thiết trao thay đổi thì cứ nhằm lại còm nhom men bên dưới cho chính bản thân mình nhé 🙂