Tổng hợp

Mockup là gì?

premium mobile phone screen mockup template 53876 76478 - Mockup là gì?

Thuật ngữ Mockup còn khá lạ lẫm với nhiều người, nhưng trong lĩnh vực nghệ thuật thì nó không là một thuật ngữ chuyên nghành: Mockup Mô tả: Được dịch từ tiếng Anh-Trong sản xuất và thiết kế, mockup, hoặc mock-up, là một mô hình quy mô hoặc kích thước đầy đủ của một thiết kế hoặc thiết bị, được sử dụng để giảng dạy, trình diễn, đánh giá thiết kế, quảng bá và các mục đích khác.

Khái niệm Mockup là gì?

Định nghĩa về danh từ Mockup: giả lập từ Từ điển Người học Nâng cao của Oxford
Mockup: giả lập
danh từ
/ ˈMɒk ʌp /

/ ˈMɑːk ʌp /
​một mô hình hoặc một bản sao của thứ gì đó, thường có cùng kích thước với nó, được sử dụng để thử nghiệm hoặc để cho mọi người thấy đồ thật trông như thế nào

Anh ta đang xem một bản mô phỏng của trang nhất ngày hôm sau.

Một cách hiểu đơn giản thì mockup (hay mock-up) là một mô hình ví dụ cho đối tượng hoặc thiết bị được tạo ra dựa trên một thiết kế cụ thể theo tỉ lệ hoặc kích thước đầy đủ. Mockup mang tính nguyên mẫu, nó cung cấp ít nhất một phần chức năng của hệ thống và cho phép thử nghiệm thiết kế. Thông thường, mockup được xây dựng để truyền đạt ý tưởng chung trên các sản phẩm thực tế, sử dụng bởi các nhà thiết kế chủ yếu để có được thông tin phản hồi từ người dùng. Mockup cung cấp phương pháp hữu hiệu tiết kiệm nhiều thời gian và tiền bạc trong việc thử nghiệm thiết kế, có nghĩa là, bạn hoàn toàn có thể tìm thấy điểm không đúng trên thiết kế, sửa chữa, thay đổi nó dễ dàng.

Luôn tự hỏi “mockup” là gì nhưng không bao giờ tìm ra được đầy đủ? Chà, trong video ngày hôm nay, chúng ta sẽ phân tích nó và xem việc sử dụng một cái bằng cách sử dụng Trình tạo mô hình của Placeit dễ dàng như thế nào.

Mockup là một mô hình có kích thước đầy đủ của một thiết kế hoặc thiết bị, được sử dụng để trình bày sản phẩm hoặc các mục đích khác.

Hãy coi nó như một phương tiện để thể hiện thiết kế của bạn sẽ thực sự trông như thế nào khi nó được đưa ra thế giới thực. Bạn có thể xem rất nhiều ví dụ về mockup trong bài đăng trên blog của chúng tôi về các xu hướng mockup mới nhất cho năm 2020 .

Tùy thuộc vào kỹ năng và thời gian của mình, bạn có thể thực hiện quá trình tạo mô hình của riêng mình bằng phần mềm đồ họa chuyên dụng như Adobe Illustrator hoặc Photoshop, nhưng đôi khi bạn có thể tốt hơn bằng cách sử dụng các công cụ cơ bản hơn như Mockup Generator được cung cấp tại Placeit.

Mẫu mockup nhãn sản phẩm.

Mockup phổ biến được biết đến trong thiết kế đồ họa như là khuôn mẫu sản phẩm có sẵn để gắn bản thiết kế là các file PSD hay vector miễn phí hoặc tính phí: logo, card, bộ nhận diện thương hiệu, website…Bên cạnh đó, thuật ngữ mockup cũng được sử dụng để chỉ các mô hình mẫu kĩ thuật sơ bộ dự án, thiết kế mới trước khi đưa vào sản xuất trong thiết kế nội thất và thiết kế công nghiệp.

Điển hình là độ trung thực đến trung bình, mockup phản ánh các lựa chọn thiết kế cho bảng màu, bố cục, kiểu chữ, biểu tượng, hình ảnh điều hướng và không khí chung của sản phẩm.

Ngoài việc dành thời gian để trả lời các câu hỏi trực quan quan trọng, mockup còn có một số lợi ích khác:

Trực quan với các bên liên quan – Nhờ độ trung thực cao hơn, các mockup yêu cầu ít ngữ cảnh hơn các tài liệu lo-fi như khung lưới. Các bên liên quan có thể dễ dàng nhìn thấy sản phẩm cuối cùng.
Phối cảnh thực tế – Đó là một điều để có tất cả các quyết định trực quan của bạn được đưa ra, nhưng đó là một điều khác để thấy tất cả chúng hoạt động cùng nhau theo cách gần với thực tế. Mockup có thể giúp tiết lộ các vấn đề không rõ ràng trên giấy (ví dụ: đụng độ màu hoặc các loại tội phạm nhỏ hơn sẽ không được chú ý).

Sửa đổi sớm – Dễ dàng thực hiện các sửa đổi trong một mockup hơn trong các giai đoạn mã hóa sau này (miễn là bản thân mockup không được mã hóa).
Trong quá trình thiết kế, các mockup xuất hiện ở cuối giai đoạn lo-fi và bắt đầu giai đoạn hi-fi. Điều này có thể có nghĩa là những điều khác nhau cho các phương pháp khác nhau – ví dụ, một mockup có thể được thực hiện ngay sau khi tạo khung hoặc có thể bị hoãn lại cho đến sau khi thử nghiệm nguyên mẫu lo-fi.

Tuy nhiên, chúng tôi cũng khuyên bạn nên thử nghiệm khi chuyển từ lo-fi sang hi-fi. Các khái niệm hình ảnh lớn như điều hướng và dòng chảy khó thay đổi với độ trung thực cao, và do đó nên được lặp lại trước khi bạn đi sâu vào một mockup hi-fi.

premium mobile phone screen mockup template 53876 76478 - Mockup là gì?

Như đã giải thích trong Hướng dẫn miễn phí về Mockups , hãy ghi nhớ những lời khuyên sau:

Thu hẹp các khái niệm của bạn – Lý do các mockup xuất hiện sau khi tạo khung dây là trước tiên bạn cần loại bỏ các tùy chọn hình ảnh lớn khác. Nếu bạn không rõ về cấu trúc điều hướng, đừng tạo ra các mô hình cho cả hai phiên bản – trước tiên hãy quyết định một phiên bản.
Kiểm tra các sản phẩm của đối thủ cạnh tranh – Trước khi quyết định hình ảnh của chính bạn, hãy xem những gì đối thủ của bạn đang làm. Mặc dù vậy, đừng sao chép chúng – hãy tìm các khu vực mà bạn có thể cải thiện hoặc các mẫu UI mà người dùng muốn trên tất cả các sản phẩm thuộc loại này. Một đánh giá heuristic nhanh chóng có thể giúp định lượng các quan sát của bạn.

Tiếp theo, chúng ta sẽ xem xét các lĩnh vực cụ thể mà mockup đã khắc phục.

Tham gia các nhà thiết kế giỏi nhất thế giới, những người sử dụng UXPin.
Đăng ký dùng thử miễn phí.Dùng thử miễn phí!
Cấu tạo của một Mockup
Nói một cách đơn giản nhất, cấu trúc giải phẫu của giao diện người dùng phải giống hệt với trang điểm của trang mà nó đại diện. Điều đó có nghĩa là trong giai đoạn mockup, bạn nên xem xét:

Bố cục nội dung – Cách hiển thị nội dung, như mẫu F hoặc mẫu Z, thẻ hoặc văn bản. Bạn cũng nên xem xét kích thước của từng phần nội dung và số lượng bạn muốn phù hợp trên màn hình tại một thời điểm.
Độ tương phản – Sử dụng công cụ tương phản màu để kiểm tra mức độ dễ đọc của văn bản so với nền của bạn. Bạn cũng có thể sử dụng độ tương phản màu để tăng khả năng hiển thị của một số yếu tố như kêu gọi hành động.
Cách sử dụng màu sắc – Màu sắc gợi lên những cảm xúc khác nhau và hiệu ứng của chúng thay đổi dựa trên màu sắc xung quanh. Bạn có thể xem ebook Web UI Design miễn phí cho Mắt người (Vol.1) để biết thêm chi tiết.
Kiểu chữ – Mockups cho phép bạn khám phá kích thước kiểu chữ, phông chữ, kiểu và khoảng cách của bạn, chưa kể sử dụng cấu trúc để thống nhất, như cách tạo kiểu chú thích. Mark Boulton đưa ra một số lời khuyên kiểu chữ chung .
Khoảng cách – Không gian âm không phải là không gian trống cần lấp đầy – đó là một yếu tố thiết kế mạnh mẽ. Một lượng trống rỗng thích hợp giúp cải thiện mức độ hiểu và mức độ dễ đọc của người dùng và hoạt động như một công cụ mạnh mẽ trong hệ thống phân cấp thị giác. Càng nhiều không gian âm xung quanh một yếu tố, mắt càng bị hút vào nó.
Hình ảnh điều hướng – Đến bây giờ kiến ​​trúc thông tin đã được hoàn thành, vì vậy bạn chỉ cần xem xét nó sẽ trông như thế nào. Ví dụ: nếu bạn có menu kéo xuống hoặc ngăn kéo, giờ đây bạn có thể đi sâu vào các chi tiết như màu sắc, khoảng cách, kiểu chữ và thứ tự.
3 loại mockup
Chúng ta có thể chia các công cụ mockup thành ba loại khác nhau – phần mềm thiết kế đồ họa, ứng dụng mockup và mockup được mã hóa – mỗi loại đều có ưu điểm và nhược điểm riêng.

Phần mềm thiết kế đồ họa

Do sự nhấn mạnh vào hình ảnh, một số nhà thiết kế thích xây dựng các mô hình trong phần mềm thiết kế đồ họa mà họ quen thuộc nhất. Phần mềm như Photoshop được xây dựng để tạo ra hình ảnh hoàn hảo pixel.

Nhược điểm là các chương trình này không cho phép bạn thêm các tương tác vào các mô hình của mình (đó là lý do tại sao chúng tôi quyết định tích hợp với Photoshop và Phác thảo ).

Tín dụng hình ảnh: Biến Mockup Photoshop thành nguyên mẫu tương tác

Nhược điểm khác là bạn cần biết cách sử dụng phần mềm, thường rất phức tạp vì nó được thiết kế để thao tác trực quan hơn là chỉ tạo ra các mockup. Trừ khi các mockup của bạn yêu cầu độ trung thực cao nhất có thể, phần mềm thiết kế đồ họa có thể quá mức cần thiết.

Ứng dụng Mockup

Các công cụ được tạo riêng cho thiết kế sản phẩm kỹ thuật số, như ứng dụng UXPin hoặc Phác thảo của chúng tôi , dựa trên kinh nghiệm hiện có với các công cụ cổ điển như Photoshop.

Tín dụng hình ảnh: Tạo Quickframeses & Mockup


Mockup được mã hóa là một cách hiệu quả để tiết kiệm thời gian và tài nguyên miễn là bạn tự tin về mặt kỹ thuật. Sau này cũng không có gì ngạc nhiên – nếu một yếu tố trực quan không thể được tạo ra trong mã, thì nó chỉ đơn giản là được sửa ngay lúc đó.

Trừ khi bạn cực kỳ thành thạo, bạn sẽ có thể khám phá nhiều khái niệm trong một công cụ chuyên dụng hơn là mã.

Tham gia các nhà thiết kế giỏi nhất thế giới, những người sử dụng UXPin.
Đăng ký dùng thử miễn phí.Dùng thử miễn phí!
Phối hợp với các nhà phát triển trên Mockups
Mockup UI là một trong những tài liệu quan trọng nhất đối với các nhà phát triển bởi vì đó là nơi họ xác định cách tạo hình ảnh hoặc thậm chí nếu chúng có thể. Dưới đây là một số mẹo để giúp làm trơn tru sự hợp tác và chế độ xử lý:

Giải thích mẩu sử dụng thiết kế nguyên tử – Brad Frost Thiết kế nguyên tử phá vỡ tất cả mọi thứ thành các thành phần nhỏ, vì vậy bạn có thể giao tiếp tốt hơn ý tưởng của bạn.
Chỉ ra các yếu tố tương tác và hoạt hình – Bởi vì các mockup là tĩnh, chuyển động và tương tác không phải lúc nào cũng rõ ràng. Cụ thể chỉ ra chúng để bạn có thể biết càng sớm càng tốt nếu có bất kỳ khó khăn nào trong back-end.
Hiểu những điều cơ bản về phát triển – Thiết kế web không phải là một silo . Biết những điều cơ bản của các bộ phận khác – không chỉ là phát triển, mà còn là tiếp thị, bán hàng, nghiên cứu, v.v. – chỉ tạo ra một dự án tốt hơn. Nếu bạn biết một chút về những gì nhà phát triển họ làm, bạn có thể có những cuộc trò chuyện hiệu quả hơn về những gì trong bản mô phỏng.
Để biết thêm mẹo cộng tác, hãy xem hướng dẫn bỏ túi miễn phí Xây dựng giao diện người dùng Mockups Nhà phát triển không ghét .

Mockup là một mô hình kích thước đầy đủ của một thiết kế hoặc thiết bị, được sử dụng để trình bày sản phẩm hoặc các mục đích khác.

Hãy nghĩ về nó như một phương tiện thể hiện thiết kế của bạn sẽ thực sự trông như thế nào khi nó được đưa vào thế giới thực.

Tùy thuộc vào kỹ năng và thời gian của bạn, bạn có thể trải qua quá trình tạo mockup của riêng mình bằng phần mềm đồ họa chuyên dụng như Adobe Illustrator hoặc Photoshop, nhưng đôi khi bạn có thể sử dụng các công cụ cơ bản tốt hơn.

Cách sử dụng Placeit để tạo Mockup một cách dễ dàng

Nền tảng mạnh mẽ của Placeit cung cấp cho bạn một thư viện mockup vô cùng đa dạng mà bạn có thể sử dụng kết hợp với trình tạo trực tuyến của nó để thực hiện tất cả công việc cho bạn.

Bước 1
Giả sử tôi đã hoàn thành công việc trên một ứng dụng thời tiết và tôi muốn cho khách hàng thấy màn hình chính sẽ trông như thế nào trên một thiết bị thực.

Trong một vài giây, tôi đã tìm được một chiếc mockup iPhone X tuyệt vời mà tôi cảm thấy nó sẽ phù hợp với dự án.

Bước 2
Tất cả những gì tôi phải làm bây giờ là tải lên thiết kế của mình, bằng cách sử dụng nút Tải lên hình ảnh hoặc bằng cách cung cấp một liên kết đến nó.

Nếu tôi di chuột qua tùy chọn đầu tiên, nó sẽ cho tôi biết hình ảnh cần có kích thước như thế nào để phù hợp.

Ngay khi tôi nhấp vào nó, nó sẽ cho phép tôi chọn hình ảnh của mình, cho tôi tùy chọn điều chỉnh vị trí thiết kế và kích thước của nó.

Bước 3
Khi tôi đã sẵn sàng, tất cả những gì tôi phải làm là nhấp vào nút cắt, việc này sẽ nhanh chóng cho tôi xem trước hình ảnh cuối cùng sẽ như thế nào.

Nếu tôi thấy rằng tôi cần thực hiện một số điều chỉnh nhanh chóng, tôi có thể dễ dàng thực hiện bằng cách nhấp vào nút cắt nhỏ, sẽ hiển thị cửa sổ trước đó.

Khi tôi hài lòng với kết quả này, tôi có thể dễ dàng tải xuống hình ảnh bằng cách nhấp vào nút Tải xuống , việc này sẽ tính phí cho tôi khi sử dụng mockup.

Ngay sau khi tôi tải xuống hình ảnh, tôi có thể mở nó lên và sau đó sử dụng nó theo cách tôi muốn.

Bước 4
Điều tôi thích ở Placeit là nó có một thư viện mockup khổng lồ, một số trong đó cung cấp cho bạn tùy chọn điều chỉnh màu sắc một cách nhanh chóng, như chiếc áo phông này .

Cũng như lần trước, tôi sẽ nhanh chóng trải qua quá trình tải lên hình ảnh của mình và sau đó nếu tôi nhìn kỹ vào góc trên bên phải của trang, tôi có thể thấy rằng tôi có một tùy chọn có tên là Màu áo .

Nếu tôi nhấp vào nút thả xuống nhỏ, nó sẽ cho tôi tùy chọn thay đổi màu của áo phông bằng một trong các giá trị được xác định trước hoặc một giá trị mới của riêng tôi.

Khi tôi hài lòng với kết quả, tôi sẽ nhấn nút Tải xuống và sau đó nhanh chóng trải qua quá trình có được nó.

Khả năng vô hạn
Bất kể dự án nào bạn kết thúc, bạn có thể dễ dàng tìm thấy một mockup tuyệt vời để giúp bạn đưa thiết kế của mình vào cuộc sống.

Cá nhân tôi đã tìm thấy ba thiết kế mà tôi hoàn toàn yêu thích:

giản dị này MacBook  một
Macbook Mockup bởi Placeit
đơn giản nhưng đẹp này danh thiếp một
Danh thiếp Mockup của Placeit
và cuối cùng là chiếc iPad dễ thương này , mà tôi dự định sẽ sử dụng trong tương lai gần.
iPad Mockup của Placeit
Các lựa chọn thay thế phức tạp hơn
Nếu bạn quyết định rằng bạn cần kiểm soát nhiều hơn một chút đối với cảnh của mình, thì bạn có thể muốn thử một số tùy chỉnh khác như sau:

Điện thoại Mockup và Header Creator
Xinh đẹp này GraphicRiver  mockup đi kèm với một tác giả cảnh Photoshop có 42 đối tượng bị cô lập và 5 thiết bị di động với các đối tượng thông minh cho ứng dụng hoặc trang web trình bày thiết kế.

Điện thoại Mockup và Header Creator
Hiển thị Trình tạo Mockup
Hoặc có thể thử bản mô phỏng Envato Elements này , cho phép bạn nhanh chóng hiển thị các thiết kế và bố cục của mình trong một màn hình hiển thị kỹ thuật số. Các lớp thông minh cho phép thay thế nhanh chóng các ảnh chụp màn hình. Khi bạn cập nhật lớp thông minh, tất cả các màn hình đang chạy ảnh chụp màn hình đó sẽ được cập nhật ngay lập tức!

Hiển thị Trình tạo Mockup bởi Envato Elements
Phần kết luận
Cho dù cuối cùng bạn sử dụng phương pháp nào, mockup có thể dễ dàng giúp bạn đưa thiết kế của mình lên một tầm cao mới bằng cách cho phép người xem xem trước nó sẽ như thế nào trong cuộc sống thực.

Điều đó đang được nói, tôi hy vọng bạn thấy hướng dẫn này hữu ích, và tôi sẽ gặp bạn trong phần tiếp theo.

Mở rộng kỹ năng thiết kế của bạn!
Chỉ cần hoàn thành trải qua hướng dẫn nhanh này, và cảm thấy muốn tiếp thu thêm kiến ​​thức? Chà, nếu đó là trường hợp, bạn thật may mắn vì tôi đã dành thời gian để tập hợp danh sách nhỏ này sẽ khiến bạn bận rộn cho những ngày tiếp theo!

ĐÁNH GIÁ BÀI VIẾT
author-avatar

Kiến trúc sư Phan Đình Kha

Kiến trúc sư Phan Đình Kha với 15 năm kinh nghiệm, hơn 1000 công trình, đoạt giải nhất kiến trúc quốc gia 2010 (Công trình: Nhà ga hành khách cảng hàng không Liên Khương, giải nhất Kiến trúc quốc gia 2010. Nhóm thiết kế: KTS Lưu Hướng Dương, KTS Trần Trung Vương, KTS Nguyễn Thị Quỳnh Nga, KTS Phan Đình Kha). Các thiết kế của anh như Cảng hàng không Liên Khương – Đà Lạt, Bệnh viện Phú Mỹ (TP.HCM), khách sạn 4 sao Phú Mỹ – Sóc Trăng. Nhà hàng Miss Sài Gòn. Homestay Đà Lạt của vợ chồng danh hài Trường Giang – Nhã Phương.
Tham khảo:
- https://ashui.com/mag/chuyenmuc/kien-truc/4493-nha-ga-hang-khong-lien-khuong-mau-tuong-tuong.html
- https://dangcongsan.vn/tu-tuong-van-hoa/cong-bo-giai-thuong-kien-truc-quoc-gia-nam-2010-62481.html
- https://danviet.vn/doc-dao-hai-giai-thuong-kien-truc-quoc-gia-777746293.htm
- https://kienviet.net/2011/03/14/ket-qua-giai-thuong-kien-truc-quoc-gia-2010/
- https://baoxaydung.com.vn/trien-lam-giai-thuong-kien-truc-viet-nam-22261.html

Bài viết cùng chuyên mục