Mockup là gì?

    Khi học thiết kế đồ họa, em gặp phải thuật ngữ Mockup. Anh chị nào trong ngành thiết kế đồ họa giải thích giùm em Mockup là gì vậy ạ? Cấu tạo của Mockup như thế nào? Em cảm ơn ạ.

     

     

    Câu hỏi của vào 01/11/2019   danh mục: Kiến thức chung.
    Thêm bình luận
  • 1 Trả lời

      Nếu bạn đang học, làm hoặc quan tâm lĩnh vực Thiết kế đồ họa (Graphic Deesigner), thì chắc chắn bạn sẽ nghe nhiều đến mockup. Vậy mockup là gì? Vai trò của mockup trong thiết kế là gì? Cấu tạo của mockup như thế nào? Sử dụng mockup cần chú ý điều gì? Chúng ta hãy cùng khám phá để giải đáp những câu hỏi trên nào.

      Mockup là gì?

      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 cho bài thuyết trình về sản phẩm hoặc các mục đích khác.

      Mockup thể hiện các chi tiết trực quan (như màu sắc, kiểu chữ, v.v.) và thường là tĩnh. Bằng cách nhìn vào một mockup, bạn sẽ biết được sản phẩm cuối cùng sẽ trông như thế nào và hình dung được sơ bộ về cách thức hoạt động của nó. Mockup có thể được coi là một dự thảo thiết kế hình ảnh cao cấp.

      Bạn hãy nghĩ về nó như một phương tiện để “khoe” thiết kế của bạn sẽ thực sự trông như thế nào như khi nó được đưa ra 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ể tạo mockup của riêng bạn sử dụ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ể được tốt hơn bằng cách sử dụng các công cụ cơ bản hơn như Placeit.

      Cấu tạo của một Mockup

      1. Bố cục nội dung

      Bạn phải hình dung được cách hiển thị nội dung. 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.

      2. Độ tương phản

      Sử dụng công cụ kiểm tra độ tương phản để kiểm tra mức độ dễ đọc của văn bản so với nề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”.

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

      4. Kiểu chữ

      Mockup cho phép bạn biết được kích thước kiểu chữ, phông chữ, kiểu và khoảng cách, chưa kể đến việc sử dụng cấu trúc để thống nhất, như cách tạo kiểu chú thích. Lời khuyên là nên dùng kiểu chữ chung.

      5. Không gian

      “Không gian tróng không phải là không gian cần lấp đầy – đó là một yếu tố thiết kế mạnh mẽ. Một lượng trống thích hợp giúp cải thiện mức độ hiểu và 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 trống xung quanh một yếu tố, mắt càng bị hút vào nó.

      6. Điều hướng hình ảnh

      Đến bây giờ khung thông tin đã được hoàn thành, vì vậy bạn chỉ cần xem nó sẽ trông như thế nào. Ví dụ: nếu bạn có menu kéo lên xuống hoặc thư mục, 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.

      1. 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 với pixel hoàn hảo.

      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.

      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.

      2. Ứ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 Placiet hoặc UXPin dựa trên những thao tác hiện có với các công cụ cổ điển như Photoshop.

      3. Code

      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.

      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à code.

      Ưu điểm của mockup

      Trực quan

      Nhờ độ trung thực cao, các mockup yêu cầu ít bối cảnh hơn wireframes (Khung sườn website). Từ đó có thể dễ dàng nhìn thấy sản phẩm cuối cùng.

      Phối cảnh thực tế

      Phối cảnh thực tế trực quan, chúng hoạt động 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ụ: độ màu hoặc đối tượng nhỏ hơn sẽ không được chú ý).

      Dễ sửa đổi

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

      Lưu ý khi sử dụng mockup

      Thu hẹp

      Lý do các mockup xuất hiện sau khi tạo wireframes (Khung sườn website) 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, đừ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.

      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, 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 điểm 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.

      Trung họcĐã trả lời vào 01/11/2019
      Thêm bình luận

    • Câu trả lời của bạn
      Khi tham gia trả lời bạn phải đồng ý với các điều khoản trên web site của chúng tôi: privacy policy and terms of service.