vẽ mockup

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: vẽ mockup

Mình tin yêu là người nào cũng biết bao nhiêu loại này nói đến gì. Nhưng nhằm hiểu rõ rệt từng loại một, đặc tínhmục đích sử dụng của từng loại thì ko cần đồng đội nào thì cũng bắt.

Bài note này bản thân tiếp tục chém bão táp một vài loại về UI, mong muốn chung đồng đội phân biệt rõ: Như thế này là Sketch, Wireframe, Mockup và Prototype? 😎

GIF1

1. Khác biệt cơ bản

Thật rời khỏi 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ày, 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 xây dựng sư, người tao mướn ổng design một ngôi nhà. Ổng tiếp tục phân tích, vẽ vời những loại nhằm rời khỏi đượ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 mẻ fake phiên bản design này cho tới bao nhiêu anh chuyên môn 3 chiều, phác hoạ thảo mái ấm rời khỏi hình – rời khỏi dáng vẻ, để lấy cho tới quý khách 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 quá đúng không nào anh em?

  • Một loại là design sơ khởi, chỉ bao gồm những phần chủ yếu, và thể hiện tại 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 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 nhập ứ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 cần chuồn kể từ thiết tiếp sơ cỗ >> design chi tiết.

Và khoảng cách thân thiết “thiết tiếp sơ cỗ >> design chi tiết” chính là ở gói gọn nhập 4 chữ: Sketch >> Wireframe >> Mockup >> Prototype, với cường độ cụ thể tăng dần dần theo đuổi từng loại.

Outline Sketch Wireframe Mockup Prototype là gì?

Khoảng cơ hội kể từ Sketch cho tới Prototype

Phần 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 đơn giản và 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 ảnh này ê. Keyword ở đấy là nhanh, rất nhanh nhé đồng đội. Hoàn toàn ko thể hiện tại đái 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 trí tuệ 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 theo đuổi kiểu:

“Thế này, địa điểm này còn có loại lưới, bao gồm n loại ở trên đây, được chưa…

Chắc nút X nhằm địa điểm này, nhấp vào loại bặccccc, là rời khỏi popup như vậy này;

Đây trên đây, popup tiếp tục hiện tại địa điểm này, một viên ngay lập tức trên đây nha…, cạnh lưới hình hình ảnh khi nãy, ở trên đây nè, sao, ổn định chưa……”

(đại loại vậy)

Đấy, sketch chỉ đơn giản và giản dị là phác hoạ thảo (UI) vài ba đàng cơ phiên bản, thong dong nguếch ngoác theo đuổi phát minh của tớ thôi đồng đội.

Thường bản thân hoặc người 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 má cây bút như bao nhiêu hình Sketch lung linh bên trên mạng.

Vì Lúc đồng đội người sử dụng giấy má cây bút, khi vẽ khuyết điểm thì khó khăn bôi lắm >> nhưng mà ko bôi được thì xóa cho tới xóa tháo lui >> xấu xa.
Mà ko xóa cho tới xóa tháo lui >> vẽ lại loại không giống >> tốn thời hạn >> đứt mạch suy nghĩ

Do ê, best nhất là cứ người 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 ê. Nếu lỡ sở hữu sai thì quẹt một phân phát 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 người sử dụng Sketch nhằm trao thay đổi về những tính năng enhancement. Tức system lúc này đang được sở hữu, quý khách ham muốn thực hiện tăng đặc điểm này, loại ê. Giờ bê loại ê lên khối hệ thống thì nó sẽ bị chạy rời khỏi sao?

Phương pháp Sketch không chỉ có chung đồng đội “hườm hườm” được màn hình hiển thị của tính năng ê 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, chứ không tôi chỉ nói: “à à, loại nút ê phía trên, loại lưới ở bên dưới. Bấm vô loại nút thì popup hiện thị, cạnh loạ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 tiêu ghi nhận nhanh chóng ý tưởng về một tính năng này ê.

Sketch là gì - Thinhnotes

Ví dụ về Sketch (Nguồn: mynameischad.design)

Sketch là gì - Thinhnotes

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 tại rõ rệt được cấu trúc của hình mẫu ứng dụng.

Cấu trúc là sao? Tức Wireframe sẽ hỗ trợ đồng đội thể hiện tại đượ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: thiên tài nhi tử và mẫu thân phúc hắc

  1. Header: bao gồm group vấn đề tổng quan tiền như: Name, Owner, và Status.
  2. Body: bao gồm “X” section (các phần tài liệu => thể hiện tại vấn đề của wireframe này ham muốn tế bào miêu tả về loại gì)
  3. 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 - Thinhnotes

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ì như 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; loạ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 tại.

Wireframe là bố cục của UI, tuy vậy không quá chi tiết tuy nhiên thể hiện tại 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 sở hữu bên trên UI ê.

Một trong mỗi dụng cụ rất 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, công dụng đơn giản và 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 cần luôn luôn được design ở tại 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, vì thế 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 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 cần là UX Team.

Như bản thân thưa phía trên, Wireframe cần thể hiện tại được: luồng thao tác của người tiêu dùng, và cấu tạo những group vấn đề rời khỏi sao. Nên phần này nó sẽ bị đánh giá bộ khung cho tới toàn bộ màn hình hiển thị sở hữu nhập thành phầm.

Do ê nhằm thực hiện chất lượng Wireframe, yên cầu đồng đội cần thiệt sự hiểu Uservấn đề bản thân giải quyết ở đấy là gì. Thường tất cả chúng ta sẽ rất cần thực hiện User Research đặc biệt kỹ nhằm rời khỏi được những cỗ User Personas. Để kể từ ê ra những quyết định về luồng thao tác và những component sở hữu bên trên UI của tớ.

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, ê là…

4. Mockup

Nhiều đồng đội hoặc tấn công đồng Wireframe với Mockup là một trong 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 ảnh, đà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ày thì được input, ngôi trường này thì bị disable. Các ngôi trường dựa vào cùng nhau thế nào. 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 - Thinhnotes

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 tại bố cục tổng quan, cấu tạo của màn hình hiển thị là đa số. Thì Mockup lại thể hiện tại rõ rệt màn hình hiển thị nó sở hữu 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 tại được NHIỀU CHI TIẾT HƠN

Trong 4 loại: Sketch, Wireframe, MockupPrototype, 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 ê Lúc thực hiện Mockup, đồng đội đang được cần rất rõ rệt User Requirement.

“Rất rõ” là sao, là cần bắt được:

  • Màn hình này nằm trong chức năng/ group tính năng nào?
  • Màn hình này còn có ở trong Business Process Flow này không?
  • Màn hình này thể hiện tại nội dung gì?
  • Input/ Output bên trên màn hình hiển thị này là gì?
  • Những validation sở hữu bên trên màn hình hiển thị này?

Thì chỉ Lúc bắt được những vấn đề này, đồng đội mới mẻ đầy đủ dữ khiếu nại nhằm thực hiện Mockup khớp với requirement được. Chính quý khách tiếp tục phụ thuộc 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 sản phẩm tiếp tục sẽ có được đích loạ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 chỉ có Mockup. Không đơn giả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 tại một cơ hội đúng chuẩn – sống động cho tới từng mi-li-mét, loại nhưng mà quý khách ham muốn.

Khi ê, 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 chứ không 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 cởi popup… những loại đều được.

Điều này sẽ hỗ trợ quý khách tưởng tượng rõ rệt rộng lớn về thành phầm chúng ta tiếp tục sẽ có được.

Prototype là “mẫu demo đầ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 ê.

Thay vì như thế Mockup chỉ thể hiện tại tầm nhìn không gian: có những element này bên trên màn hình hiển thị.

Thì Prototype thể hiện tại luôn luôn được tầm nhìn theo đuổi 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 tại ra…

Tức là đặc biệt rất có thể, quý khách dòm vô cũng ko biết loại này sản phẩm thiệt, loại này hàng nhái 😆

thinhnotes

Nếu dịch rời khỏi giờ đồng hồ Việt thì Prototype tức là “mẫu demo đầu tiên”. Nghe khá thô tuy nhiên khá sát nghĩa.

Nghĩa là chứ không thực hiện vẹn toà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 công 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 những 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 giống như những gì bao nhiêu anh ham muốn, thậm chí… ngon miệng hơn!!!

Thường Prototype được sản xuất nhập quy 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ệt requirement với quý khách. Thường vận dụng cho tới những requirement phức tạp, cần thiết thể hiện tại 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 thưa, ê 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 vừa đủ tính năng, đang được rất có thể được dùng của một thành phầm. Còn prototype đơn giản “phần trước mặt coi dường như là sản phẩm thiệt” của một thành phầm này ê 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 vì thế những đồng đội UI Designer lãnh đạn, à khuyết điểm, lãnh trách cứ nhiệm. Tức trách nhiệm này tiếp tục vì thế UI Team thực hiện.

Họ tiếp tục người sử dụng những trình độ riêng không liên quan gì đến nhau của tớ về: Interaction Design, Visual Design, hoặc cỗ Design System của công ty… nhằm ví dụ hóa wireframe bên trên vì thế 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 nhập cấu tạo team, budget, yếu tố hoàn cảnh, hoặc cả tài năng và kĩ năng của đồng đội.

Nhưng đồng đội cũng nên cảnh báo, thông thường nhập 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 quý khách, ko đáng!!!

Hiện thị ngôi trường sở hữu thật nhiều tool nhằm thực hiện Prototype. Nhưng một trong mỗi khoản “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 sở hữu tool gì ngon ngon thì gày gò men bên dưới nhằm bản thân làm theo nhé.

6. Tạm kết

Mình tiếp tục note vài ba gạch ốp đầ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 tiêu ghi nhận nhanh chóng ý tưởng về một tính năng này ê.
  • Wireframe: tía cục của UI, tuy vậy không thực sự cụ thể tuy nhiên nó thể hiện tại rõ rệt được luồng thao táccấu trúc nhóm thông tin sở hữu bên trên UI ê.
  • Mockup: chính là Wireframe, tuy nhiên ĐẦY ĐỦ vấn đề và thể hiện tại được NHIỀU CHI TIẾT HƠN
  • Prototype: “mẫu demo đầu tiên” của phần mềm/ hoặc một tính nă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 ê.

Nói về phỏng “tốn effort để làm” thì: Sketch >> Wireframe >> Mockup >> Prototype. Theo ê 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 ê đặt mua đồng đội thực hiện Mockup hoặc Prototype thì cần clear rõ rệt 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: minh nhật tinh trình

  • 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 đúng chỗ rộng lớn, biết Lúc nào thì cần từng loại, và chi phí Một trong những loại rời khỏi sao.

Hi vọng bài bác note này mang lại lợi ích được cho tới đồng đội. Nếu sở hữu gì vướng mắc hoặc cần thiết trao thay đổi thì cứ nhằm lại gày gò men bên dưới cho bản thân nhé 🙂