Các nguyên mẫu hoàn hảo và thiết kế bàn tay với Marvel

Sep 11, 2025

Cách

Với một đường cong học tập ngắn hơn ứng dụng và các công cụ giải trí thiết kế hoàn toàn mới dành cho các đội doanh nghiệp, không có thời gian nào tốt hơn để khám phá cách Marvel có thể là một giải pháp nhanh chóng và dễ dàng để tạo mẫu trên web và ứng dụng di động trong các đội.

Marvel giúp các đội lấy thiết kế của họ (được thực hiện trong bản phác thảo hoặc Marvel) từ ý tưởng phác thảo để ban đầu để thử nghiệm khái niệm. Các công cụ hợp tác của nó khuyến khích các bên liên quan không chỉ có tiếng nói mà còn là một phần của quy trình thiết kế.

01. Tạo dự án Marvel đầu tiên của bạn

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Khi bạn đã chọn dự án của mình, nhấp vào một trong hai nút để bắt đầu quá trình thiết kế

Đăng ký tại Marvel để bắt đầu, nơi chỉ có tên và địa chỉ email của bạn. Chọn dự án thiết kế hoặc dự án Prototype. Một dự án nguyên mẫu là khi bạn tải lên màn hình mà bạn đã thiết kế (thường là trong bản phác thảo). Một dự án thiết kế là khi bạn bắt đầu từ đầu và bạn muốn sử dụng các công cụ thiết kế của Marvel để tạo ra một mockup độ trung thực thấp (đây là một tùy chọn tuyệt vời để lặp lại và động não nhanh chóng).

Chọn Dự án Thiết kế, sau đó đặt tên, sau đó chọn iPhone X và nhấp vào nút Tạo dự án. Từ đây (chúng ta sẽ gọi đây là bảng điều khiển dự án từ đây ra ngoài), nhấp vào nút Thiết kế ở phía bên trái hoặc nút Bắt đầu thiết kế ở giữa cửa sổ.

02. Thiết kế nguyên mẫu có độ trung thực thấp

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Bạn có thể sử dụng và điều chỉnh các thành phần đã làm sẵn, như màn hình camera này

Mục tiêu cốt lõi của chúng tôi ở đây là hình dung các ý tưởng của chúng tôi một cách nhanh chóng mà không lãng phí quá nhiều thời gian để lo lắng về những gì kết quả cuối cùng sẽ trông như thế nào. Từ đây, chúng tôi có thể tạo các hình dạng, hình ảnh, văn bản, các thành phần sẵn sàng như thanh tab và thậm chí toàn bộ các thành phần toàn màn hình như màn hình camera này (được chọn từ thanh bên trái và Restyled sử dụng tay phải thanh bên).

Vẽ hình dạng, tạo các lớp văn bản và thực hiện các thay đổi trực quan đơn giản khá dễ dàng ngay cả đối với người không phải là một nhà thiết kế, mặc dù các nhà thiết kế dày dạn sẽ yêu thích việc họ có thể nhanh chóng đưa ra ý tưởng và nhấp vào nút Thêm vào dự án.

Mặc dù bạn không thể mong đợi bản vẽ vector, che dấu và các công cụ thiết kế phức tạp khác, giao diện này sẽ cảm thấy khá quen thuộc nếu bạn là người dùng Phác thảo, Adobe XD hoặc Figma (trên thực tế, chúng tôi sẽ thảo luận về các thiết kế có độ trung thực cao hơn từ bản phác thảo trong một khoảnh khắc). Những gì bạn có thể mong đợi là phóng to, sắp xếp, phân nhóm, các công cụ thiết kế hình ảnh cơ bản, điều khiển chuột như kéo, thay đổi kích thước và xoay và một vài phím tắt tiện dụng.

03. Nhận phản hồi

Tuy nhiên, Marvel không chỉ dành cho các nhà thiết kế. Mặc dù có thể yêu cầu một nhà thiết kế để tạo ra thiết kế cuối cùng trong một ứng dụng thiết kế tiêu chuẩn trong ngành, nên (và làm) đến từ tất cả các loại bên liên quan (người quản lý, khách hàng, nhà phát triển, v.v.).

Bất kể vai trò chính của bạn là gì trong một đội, nó sẽ siêu dễ nói: "Này, đây có thể là một ý tưởng?", Và sau đó chứng minh rằng trực quan. Marvel's. Pop. Ứng dụng di động làm giảm rào cản của việc nhập cảnh hơn nữa bằng cách đưa các công cụ thiết kế đơn giản hóa này cho các thiết bị di động vì, hãy đối mặt với nó, ý tưởng có thể đến với chúng ta theo thời gian kỳ lạ nhất. Ý tưởng được phác thảo trên giấy có thể được chuyển đổi thành màn hình Marvel tương tác bằng camera thiết bị. Thiết kế cần phải là một dân chủ, nơi mà bất cứ ai có thể có tiếng nói mà không bị hạn chế sử dụng các ứng dụng thiết kế phức tạp.

04. Tích hợp Marvel với bản phác thảo

Sau khi thúc đẩy năng suất các ý tưởng độ trung thực thấp với nhóm của bạn, bạn sẽ muốn mô phỏng lần lặp đầu tiên trong ứng dụng thiết kế của bạn được lựa chọn. Mặc dù bạn có thể hoàn toàn tải lên màn hình PNG đã xuất từ bất kỳ ứng dụng thiết kế nào, Sketch là ứng dụng được đề xuất vì có một plugin phác thảo chuyên dụng tự động hóa quy trình (và thậm chí sẵn sàng thiết kế để nó có thể được kiểm tra bởi các nhà phát triển sau này). Hỗ trợ Photoshop cho thiết kế giao hàng sẽ đến sau, tuy nhiên Adobe không quảng cáo Photoshop để thiết kế giao diện người dùng nữa, vì nó đã tạo Adobe XD.

Từ bảng điều khiển, nhấp vào Cài đặt & GT; Tích hợp & GT; Plugin phác thảo, sau đó tải xuống plugin. Khi bạn đã cài đặt nó và tệp thiết kế của bạn mở, hãy nhấn Đồng bộ hóa đã chọn hoặc đồng bộ hóa tất cả các nút trong thanh Marvel (điều này xuất hiện phía trên danh sách lớp) để bắt đầu chọn dự án Marvel để đồng bộ hóa màn hình.

05. Tương tác nguyên mẫu

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Kéo Chọn các vùng để tạo các điểm nóng để liên kết từ màn hình này sang màn hình khác

Nhưng tất nhiên chúng ta không thể kiểm tra các nguyên mẫu nếu chúng ta không thêm bất kỳ sự tương tác nào đối với chúng, vì vậy hãy làm điều đó ngay bây giờ. Quay trở lại bảng điều khiển Marvel, nơi bạn sẽ thấy các màn hình mà chúng tôi đã đồng bộ hóa, nhấp vào Xem trên bất kỳ màn hình nào để vào chế độ màn hình.

Từ đây, chúng ta vẫn có thể điều hướng qua các màn hình bằng các mũi tên trái và phải ở hai bên của cửa sổ, nhấp vào hẹn giờ để có chu kỳ tuyệt vời thông qua các màn hình sau một số giây nhất định (hữu ích cho các bài thuyết trình!) Hoặc nhấp vào Không có bình luận nào để thêm bình luận hoặc chú thích đầu tiên của bạn trên màn hình.

Có lẽ điều đầu tiên bạn sẽ nhận thấy là tiêu đề cố định và các nút chân trang cố định xuất hiện gần các góc trên cùng bên trái và dưới cùng bên trái của màn hình. Các nút này có thể kéo được và chúng cũng có thể được di chuyển để đánh dấu vùng cắt của phần tiêu đề là cố định trên đỉnh của chế độ xem có thể cuộn. Bạn cũng có thể sử dụng các trường văn bản ở góc trên bên phải và dưới bên phải để chỉ định giá trị này theo cách thủ công.

Nhưng làm thế nào để chúng ta thực sự liên kết một màn hình khác? Đơn giản: Với chuột, kéo-Chọn một vùng trên màn hình để liên kết đến màn hình khác (đây được gọi là 'Hotspot'). Khi bạn đã thực hiện điều đó, một giao diện sẽ xuất hiện ở dưới cùng của cửa sổ cho phép bạn tùy chỉnh nơi người dùng được đưa đến, bất kỳ sự chuyển đổi nào xảy ra trong quá trình tương tác và cần có cử chỉ nào để kích hoạt sự tương tác đó (nhấn, vv, v.v. ).

Và tất nhiên, chúng ta có thể sử dụng các công cụ tạo mẫu này ngay cả trên các mockup có độ trung thực thấp. Trên thực tế, bạn nên làm, tất cả trong khi sử dụng các tính năng bình luận để thảo luận và nhắc lại.

06. Bàn giao thiết kế cho các nhà phát triển

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Thiết kế bàn giao làm cho nó dễ dàng cho thiết kế và phát triển để làm việc với nhau

Khi nhóm của bạn giữ lại sự tự tin hoàn toàn vào thiết kế cuối cùng, được xác thực bằng cách sử dụng các công cụ bình luận và kiểm tra người dùng, đã đến lúc trao nó cho các nhà phát triển sau đó có thể kiểm tra và mã. Điều quan trọng cần nhớ là một nhà thiết kế không được 'thực hiện' một khi thiết kế được bàn giao và các nhà thiết kế và nhà phát triển phải luôn giao tiếp trong sự hài hòa để giám sát sự phát triển cho đến khi hoàn thành. Nhà phát triển cũng có thể có một số câu hỏi, vì vậy những tính năng bình luận đó vẫn hoạt động rất nhiều.

Nhấn nút phát, sau đó nhấp vào Tay cầm ở góc dưới bên trái để mở giao diện thiết kế. Từ đây, các nhà phát triển sẽ có thể nhấp vào các yếu tố thiết kế và kiểm tra các kiểu riêng tạo cho họ những gì chúng đang sử dụng, sử dụng thanh bên ở bên phải (giống như giao diện Thanh tra trong Phác thảo, Figma hoặc Adobe XD). Sự khác biệt duy nhất ở đây là các nhà phát triển có thể nhấp vào nút Sao chép để sao chép các kiểu dưới dạng mã vào bảng tạm.

Bài viết này ban đầu được xuất bản trong số phát hành 301 của mạng, tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua Vấn đề 301. hoặc là Đăng ký mạng lưới .

Hiểu rõ hơn về tạo mẫu lặp

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby đang cho cô ấy nói chuyện khám phá cách kiểm tra nguyên mẫu lặp lại sẽ giúp bạn tạo ra một thiết kế chiến thắng, mỗi lần tạo ra New York từ ngày 25-27 tháng 4 năm 2018

Khi hầu hết các công ty cần tạo một thiết kế web mới, quá trình thường bắt đầu bằng những ý tưởng ném bóng, di chuyển đến thiết kế, sau đó phát triển, sau đó phát trực tiếp. Nhưng nếu nó không hoạt động thì sao? Đó là rất nhiều thời gian, nỗ lực và tiền bạc để chi tiêu để phát hiện ra rằng một ý tưởng được thực hiện kém.

May mắn thay, trong cuộc nói chuyện của cô ấy tại Tạo New York từ ngày 25-27 tháng 4 năm 2018 , Marisa Morby, Trưởng phòng nghiên cứu tại Clearhead, sẽ chỉ cho bạn một cách tốt hơn để tạo và xác thực các thiết kế mới nhanh hơn, dễ dàng hơn và ít tốn kém hơn quy trình thiết kế truyền thống bằng cách sử dụng tạo mẫu và thử nghiệm lặp đi lặp lại.

Tạo New York diễn ra từ ngày 25-27 tháng 4 năm 2018. Nhận vé của bạn bây giờ .

Những bài viết liên quan:

10 công cụ tạo mẫu hàng đầu
18 công cụ khung đánh bóng tốt nhất
Làm thế nào để tránh các cạm bẫy tạo mẫu

Các nguyên mẫu hoàn hảo và thiết kế bàn tay với Marvel

01. Tạo dự án Marvel đầu tiên của bạn

02. Thiết kế nguyên mẫu có độ trung thực thấp

03. Nhận phản hồi

04. Tích hợp Marvel với bản phác thảo

05. Tương tác nguyên mẫu

06. Bàn giao thiết kế cho các nhà phát triển

Hiểu rõ hơn về tạo mẫu lặp

Cách - Các bài báo phổ biến nhất

Cách tải ảnh Instagram: Mọi thứ bạn cần biết

Làm thế nào để vẽ một con sư tử

Cách vẽ một cánh tay

Giữ kiểm soát phiên bản hoàn hảo với Tóm tắt

Cách tạo đèn dung nham với Keyshot

Cách trộn bảng màu Gouache

Cách chọn công cụ tạo mẫu phù hợp

Cách tạo một bức tranh phong cảnh màu nước đẹp

Thể loại