Wireframe, Mockup là gì? H??ng d?n phân bi?t và s? d?ng

Wireframe, Mockup là gì? H??ng d?n phân bi?t và s? d?ng

?? có th? xây d?ng m?t ?ng d?ng hoàn ch?nh ??n tay ng??i dùng, ng??i thi?t k? c?n ph?i bi?t và phân bi?t ???c Wireframe, Mockup là gì. N?u có th? phân bi?t ???c 2 thu?t ng? này thì b?n m?i có th? ti?n hành xây d?ng ?ng d?ng ???c.

?? tìm hi?u thêm thông tin v? Wireframe và Mockup, c?ng nh? cách s? d?ng c?a hai khái ni?m này. M?i b?n khám phá thêm nhi?u ?i?u h?p d?n ? bài vi?t sau ?ây cùng Casinovn138.com nhé!

Wireframe là gì?

M?t quá trình t?o ra ?ng d?ng g?m có 4 b??c, t??ng ?ng v?i 4 khái ni?m c? b?n là Sketch, Wireframe, Mockup và Prototype.

Wireframe t??ng ???ng v?i b??c 2, th? hi?n rõ c?u trúc c?a giao di?n ph?n m?m sau khi ?ã tr?i qua b??c 1.

?? thi?t k? ???c m?t giao di?n website hay web apps, b?n c?n ph?i ??m b?o các y?u t? sau ?ây:

  • Header: Ph?i có các thông tin nh? Name, Owner và Status
  • Body: Các ph?n d? li?u mà b?n mu?n miêu t?
  • Footer: Ch?a các thông tin c? b?n nh? Created By, Created On, Modified By, và Modified On.

Khi thi?t k? Wireframe, quan tr?ng nh?t là phân b? b? c?c và nhóm thông tin c?n thi?t sao cho rõ ràng và h?p lý. Vì nó chính xác là b? khung c?a UI (tr?i nghi?m ng??i dùng).

Wireframe là gì?
Wireframe là gì?

Chia s? ??n b?n: Top 5 ph?n m?m l?c Verify Email t?t nh?t hi?n nay

Mockup là gì?

Mockup là b??c ???c th?c hi?n sau Wireframe. Có nhi?u ng??i l?i l?m t??ng Wireframe và Mockup là m?t. Nh?ng không h?n v?y. Xét v? ?? chi ti?t thì Mockup h?n g?p nhi?u l?n so v?i Wireframe nhé. ? giai ?o?n 3 này, s? ???c thi?t k? chi ti?t c? v? màu s?c, font ch?, kích th??c, hình ?nh, kích c?, phân lu?ng,…

N?u Wireframe ch? chi ti?t v? b? c?c thì Mockup s? th? hi?n ? nh?ng b? c?c ???c bày trí n?i dung và hình ?nh nh? th? nào t?i v? trí ?ó, t? m? ??n t?ng d?u ch?m, ph?y.

Mockup là gì?
Mockup là gì?

Phân bi?t gi?a Wireframe và Mockup

Sau khi tìm hi?u rõ v? khái ni?m c?a t?ng lo?i thì ch?c h?n các b?n c?ng ?ã có th? phân bi?t ???c 2 thu?t ng? này r?i ?úng không nào. Nói m?t cách d? hi?u, thì Wireframe và Mockup gi?ng nhau nh? m?t, nh?ng Mockup chi ti?t thông tin h?n Wireframe nhi?u.

Phân bi?t gi?a Wireframe và Mockup
Phân bi?t gi?a Wireframe và Mockup

H??ng d?n s? d?ng

B?n có th? tìm hi?u v? native code qua bài vi?t: https://casinovn138.com/native-code/.

Chia s? ??n b?n bài vi?t: Buddle.io | ?ánh giá tính n?ng, tr?i nghi?m, so sánh

Wireframe

B??c 1: L?y c?m h?ng

Hãy ?i tìm ngu?n c?m h?ng t? các trang web ch?a m?u Wireframe do các nhà sáng t?o chuyên nghi?p chia s?. T? ?ó, b?n có th? ??nh hình v? m?u Wireframe mình ??nh làm và có ch?a các n?i dung gì.

B??c 2: Thi?t k? quy trình

Xây d?ng cho b?n thân m?t quy trình làm vi?c hoàn ch?nh tr??c khi th?t s? b?t tay vào làm m?t Wireframe. Vì khi có quy trình, chúng ta s? th?c hi?n nó theo m?t cách bài b?n và chi ti?t nh?t ?? không b? b? sót b?t k? m?t giai ?o?n nào.

B??c 3: L?a ch?n công c?

Các b?n có th? l?a ch?n các công c? thi?t k? Wireframe chuyên nghi?p sau ?ây:

  • Balsamiq
Balsamiq
Balsamiq
  • Omnigraffle
Omnigraffle
Omnigraffle
  • Flairbuilder
Flairbuilder
Flairbuilder

Mockup

Chúng tôi s? h??ng d?n các b?n th?c hi?n t?o Mockup trên công c? Photoshop.

B??c 1: Sau khi t?i Mockup có s?n v? và m? lên, b?n s? th?y m?t layer trên cùng ?? r?ng Your logo here. Layer này ?ã ???c chuy?n thành Smart Object ?? b?n thay logo ho?c hình mà b?n mu?n vào layer này. ?? s? d?ng b?n hãy nh?n ?úp vào layer ?ó.

Mockup b1
Mockup b1

B??c 2: Lúc này s? có m?t file m?i hi?n ra v?i hình ?nh logo ?ã ???c s? d?ng. B?n hãy thay th? b?ng hình ?nh ho?c logo c?a mình b?ng cách ch?n File ch?n Place Embedded…

Mockup b2
Mockup b2

B??c 3: Ch?n ?nh c?a b?n và ch?n Place.

Mockup b3
Mockup b3

B??c 4: B?m vào con m?t b? ch?n hi?n th? logo g?c ?? file ?ó ch? còn hi?n th? layer ?nh c?a b?n thôi, sau ?ó nh?n Ctrl + S (Cmd + S ??i v?i macOS) ?? l?u.

Mockup b4
Mockup b4

Chuyên m?c T?ng h?p c?a nhà cái Casino VN138 v?a giúp b?n gi?i quy?t câu h?i Wireframe, Mockup là gì. Qua ?ó, h??ng d?n cho các b?n các b??c chi ti?t ?? có th? s? d?ng 2 lo?i công c? này m?t cách ??n gi?n và hi?u qu? nh?t. N?u có b?t k? th?c m?c nào, vui lòng Liên h? Casino VN138 ?? ???c gi?i ?áp nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

??ng ký ngay!