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à ai ai cũng biết bao nhiêu loại này nói đến 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 cần đồng đội nào thì cũng cầm.

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

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 tớ mướn ổng kiến thiết 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 rời khỏi được một loại, gọi là: BẢN THIẾT KẾ.

Vẽ xong xuôi, ổng mới mẻ trả bạn dạng kiến thiết này mang lạ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 mang lại quý khách hàng coi và duyệt..

Rõ ràng cả hai bản: Bản kiến thiết và Bản phác hoạ thảo không giống nhau quá đúng không ạ anh em?

• Một cái là kiến thiết 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 xinh xắn những loại.

Đó là cút từ “thiết tiếp sơ cỗ >> kiến thiết 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.

Sketch, Wireframe, Mockup, hoặc Prototype vô ứng dụng cũng vậy.

Về cơ bạn dạng, nhằm xây một ứng dụng thì đồng đội cũng cần cút kể từ thiết tiếp sơ cỗ >> kiến thiết chi tiết.

Và khoảng cách đằm thắm “thiết tiếp sơ cỗ >> kiến thiết 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.

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 giản dị và đơn giản là PHÁC HỌA. Phác họa tức là vẽ thời gian nhanh, phác hoạ thảo thời gian nhanh một hình hình họa này cơ. Keyword ở đó là nhanh, rất nhanh nhé đồng đội. Hoàn toàn ko thể hiện tại 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 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 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 ở phía trên, được chưa…

Chắc nút X nhằm vị trí này, nhấn vào cái bặccccc, là rời khỏi popup như vậy này;

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

(đại loại vậy)

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 tờ cây viết như bao nhiêu hình Sketch xinh sắn bên trên mạng.

Vì Lúc đồng đội người sử dụng giấy tờ cây viết, khi vẽ sai lầ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 xí.
Mà ko xóa cho tới xóa tháo lui >> vẽ lại cái không giống >> tốn thời hạn >> đứt mạch suy nghĩ

Do cơ, best nhất là cứ người sử dụng cây viết lông vẽ lên bảng Trắng. Sai cho tới đâu, vẽ lại cho tới cơ. Nếu lỡ với sai thì quẹt một vạc vẽ là Trắng nhẵn 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 thời điểm hiện tại vẫn với, quý khách hàng ham muốn thực hiện tăng tính năng này, cái cơ. Giờ bê cái cơ 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 những canh ty đồng đội “hườm hườm” được screen của tác dụng cơ ngay lập tức tức thì, nhưng mà còn hỗ trợ 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 cơ phía trên, cái lưới ở bên dưới. Bấm vô cái nút thì popup hiện thị, cạnh cái lưới zậy nè….”. Thì đặc biệt hoàn toàn 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à bạn dạng phác thảo thời gian nhanh UI của ứng dụng, nhằm mục tiêu ghi nhận thời gian nhanh ý tưởng về một tác dụng này cơ.

3. Wireframe

Ô kê, thanh lịch 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” ở phía trên thể hiện tại 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 tại được:

• Luồng cút cơ bạn dạng 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 mang lạ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: nhạc thiếu nhi chim cánh cụt

1. Header: bao gồm group vấn đề tổng quan lại 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 mô tả về cá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ơ bạn dạng như: Created By, Created On, Modified By, và Modified On.

Theo bản thân, Wireframe là bước cần thiết nhất, vì như thế nó đúng là bộ khung của UI. Không cần thiết quan hoài cho tới sắc tố, phông chữ, nhỏ to, 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 tại.

Wireframe là bố cục của UI, tuy vậy không quá chi tiết tuy nhiên 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 với bên trên UI cơ.

Một trong mỗi khí cụ rất tốt nhằm đồng đội vẽ Wireframe là Balsamiq. Trực quan lại, dễ dàng học tập, dễ dàng xài, công dụng giản dị và đơn giản, thao tác thời gian nhanh gọn gàng. Đủ nhằm capture thời gian nhanh cấu tạo của một screen.

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ì hoàn toàn 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 độ chuyên môn 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 rằng 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 mang lại toàn bộ screen với vô thành phầm.

Do cơ nhằm thực hiện chất lượng Wireframe, yên cầu đồng đội cần thiệt sự hiểu User và vấn đề bản thân giải quyết ở đó 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ừ cơ 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 chuyện một loại nhiều cụ thể rộng lớn, cơ 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, size, phông chữ, hình hình họa, lối 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.

So với Wireframe chỉ thể hiện tại bố cục tổng quan, cấu tạo của screen là đa phần. Thì Mockup lại thể hiện tại rõ ràng screen nó với gì ở trỏng, cụ thể cho tới từng field, vệt chấm, vệ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, Mockup và Prototype, phỏng cụ thể bên trên screen của Mockup và Prototype là tối đa. Do cơ Lúc thực hiện Mockup, đồng đội vẫn cần rất rõ ràng User Requirement.

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

• Màn hình này nằm trong chức năng/ group tác dụng nào?
• Màn hình này còn có trực thuộc 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 screen này là gì?
• Những validation với bên trên screen này?

Thì chỉ Lúc cầm đượ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 hàng tiếp tục nhờ vào những Mockup này nhằm sign-off mang lại đồng đội thực hiện tiếp. Để đáp ứng rằng: khách sản phẩm tiếp tục có được chính cái chúng ta cần.

Hoặc ngầu lòi rộng lớn, chúng ta hoàn toàn có thể đòi hỏi không những Mockup. Không đơn giản những screen 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 đắn – sống động cho tới từng mi-li-mét, loại nhưng mà quý khách hàng ham muốn.

Khi cơ, 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 screen tĩnh, thì với Prototype, người tiêu dùng trọn vẹn hoàn toàn 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 há popup… những loại đều được.

Điều này sẽ hỗ trợ quý khách hàng tưởng tượng rõ ràng rộng lớn về thành phầm chúng ta tiếp tục 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 hoàn toàn có thể tương tác được ngay lập tức bên trên screen của chức năng/ ứng dụng cơ.

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 screen.

Thì Prototype thể hiện tại luôn luôn được tầm nhìn bám theo thời gian: hiện bên trên screen như vọc, sau khi nhấn A, screen tiếp tục như vọc, sau khi kéo B, screen 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 hoàn toàn có thể, quý khách hàng dòm vô cũng ko biết cái này sản phẩm thiệt, cái này hàng nhái 😆

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à thay cho thực hiện nguyên vẹn một trong những 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 hoàn toàn 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 hoàn toàn 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 tạo vô tiến trình pitching dự án công trình. Hoặc cũng hoàn toàn có thể thực hiện nhằm làm rõ ràng requirement với quý khách hàng. Thường vận dụng mang lạ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 lại.

Một điểm nữa mình thích rằng, cơ là: Prototype trọn vẹn không giống với định nghĩa “phiên bạn dạng beta”.

Bản beta là bạn dạng không thiếu tác dụng, vẫn hoàn toàn 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 nom có vẻ như là sản phẩm thiệt” của một thành phầm này cơ 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 lầm, lãnh trách cứ nhiệm. Tức trách nhiệm này tiếp tục bởi UI Team thực hiện.

Họ tiếp tục người sử dụng những trình độ chuyên môn 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 kiến thiết.

Còn đứng ở hướng nhìn BA, tất cả chúng ta cũng hoàn toàn có thể deliver những bạn dạng kiến thiết này. Tùy vô cấu tạo team, budget, yếu tố hoàn cảnh, hoặc cả kĩ năng và tài 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 dễ dàng bị “ô-vờ”, kể từ over budget, over time, overexpectation của quý khách hà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 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 hoàn toàn có thể configure ĐK if else nhằm tế bào mô tả những luồng tương tác phức tạp.
Anh em với tool gì ngon ngon thì gầy đét 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à bạn dạng phác thảo nhanh UI của ứng dụng, nhằm mục tiêu ghi nhận thời gian nhanh ý tưởng về một tác dụng này cơ.
• Wireframe: là phụ thân cục của UI, tuy vậy không thật cụ thể tuy nhiên nó thể hiện tại 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 cơ.
• 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: là “mẫu demo đầu tiên” của phần mềm/ hoặc một tác dụng của ứng dụng, và người tiêu dùng hoàn toàn có thể tương tác được bên trên screen của chức năng/ ứng dụng cơ.

Nói về phỏng “tốn effort để làm” thì: Sketch >> Wireframe >> Mockup >> Prototype. Theo cơ thì Prototype là loại tốn chi phí nhất nhằm thực hiện, rời dần dần xuống Mockup, và Wireframe.

Nên nếu như ai cơ đặt mua đồng đội thực hiện Mockup hoặc Prototype thì cần clear rõ ràng nhu yế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: cách làm chữ chạy trong premiere

• 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 rời khỏi sao.

Hi vọng bài xích note này mang lại lợi ích được mang lạ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 gầy đét men bên dưới cho bản thân mình nhé 🙂