ต้นแบบที่สมบูรณ์แบบและการออกแบบมือที่สมบูรณ์แบบด้วย Marvel

Sep 16, 2025

วิธีการ

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

ด้วยเส้นโค้งการเรียนรู้ที่สั้นกว่าแอป Invision และเครื่องมือส่งมอบการออกแบบใหม่ล่าสุดสำหรับทีมงานองค์กรไม่มีเวลาที่ดีกว่าในการสำรวจว่า Marvel สามารถเป็นวิธีการแก้ปัญหาที่รวดเร็วและง่ายดายสำหรับการสร้างสรรค์เว็บและแอปพลิเคชันมือถือในทีม

Marvel ช่วยให้ทีมใช้การออกแบบของพวกเขา (ทำทั้งในร่างหรือประหลาดใจ) จากความคิดแบบร่างเพื่อเริ่มต้นเพื่อทดสอบแนวคิด เครื่องมือที่ทำงานร่วมกันสนับสนุนผู้มีส่วนได้เสียไม่เพียง แต่จะพูด แต่เป็นส่วนหนึ่งของเวิร์กโฟลว์การออกแบบ

01. สร้างโครงการมหัศจรรย์ครั้งแรกของคุณ

Marvel's new design screen, indicating the locations of the buttons to create new designs. — เมื่อคุณเลือกโครงการแล้วให้คลิกหนึ่งในสองปุ่มเพื่อเริ่มกระบวนการออกแบบ

ลงทะเบียนที่ Marvel เพื่อเริ่มต้นที่ต้องใช้ชื่อและที่อยู่อีเมลของคุณเท่านั้น เลือกโครงการออกแบบหรือโครงการต้นแบบ โครงการต้นแบบคือเมื่อคุณอัปโหลดหน้าจอที่คุณออกแบบอยู่แล้ว (โดยปกติจะอยู่ในร่าง) โครงการออกแบบคือเมื่อคุณเริ่มต้นจากการเริ่มต้นและคุณต้องการใช้เครื่องมือออกแบบของ Marvel เพื่อสร้าง Mockup ที่มีความเที่ยงตรงต่ำ (นี่เป็นตัวเลือกที่น่าทึ่งสำหรับการทำซ้ำอย่างรวดเร็วและการระดมสมอง)

เลือกโครงการออกแบบจากนั้นให้ชื่อจากนั้นเลือก iPhone X แล้วคลิกปุ่มสร้างโครงการ จากที่นี่ (เราจะเรียกสิ่งนี้แดชบอร์ดโครงการจากที่นี่เปิดออก) คลิกปุ่มออกแบบทางด้านซ้ายมือหรือปุ่มเริ่มการออกแบบที่อยู่ตรงกลางของหน้าต่าง

02. การออกแบบต้นแบบความเที่ยงตรงต่ำ

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — คุณสามารถใช้และปรับส่วนประกอบสำเร็จรูปเช่นเดียวกับหน้าจอกล้องนี้

เป้าหมายหลักของเราที่นี่คือการมองเห็นความคิดของเราอย่างรวดเร็วโดยไม่ต้องเสียเวลามากเกินไปกังวลเกี่ยวกับผลลัพธ์สุดท้ายที่จะเป็นอย่างไร จากที่นี่เราสามารถสร้างรูปร่างภาพข้อความส่วนประกอบสำเร็จรูปเช่นแถบแท็บและแม้แต่คอมโพเนนต์แบบเต็มหน้าจอทั้งหมดเช่นหน้าจอกล้องนี้ (ซึ่งเลือกจากแถบด้านซ้ายมือซ้ายและวางอยู่ในมือขวา แถบด้านข้าง)

รูปร่างการวาดภาพการสร้างเลเยอร์ข้อความและการเปลี่ยนแปลงภาพที่เรียบง่ายนั้นค่อนข้างง่ายแม้สำหรับนักออกแบบที่ไม่ใช่นักออกแบบแม้ว่านักออกแบบที่มีประสบการณ์จะชอบวิธีที่พวกเขาสามารถโยนแนวคิดได้อย่างรวดเร็วและคลิกที่ปุ่มเพิ่มในโครงการ

แม้ว่าคุณจะไม่สามารถคาดหวังการวาดภาพเวกเตอร์การปิดบังและเครื่องมือออกแบบที่ซับซ้อนอื่น ๆ อินเทอร์เฟซนี้จะรู้สึกค่อนข้างคุ้นเคยหากคุณเป็นผู้ใช้แบบ Sketch, Adobe XD หรือ Figma (ในความเป็นจริงเราจะพูดถึงการนำเข้าการออกแบบที่มีความเที่ยงตรงสูงขึ้นจากร่าง ในอีกสักครู่) สิ่งที่คุณคาดหวังคือการซูมจัดแนวการจัดกลุ่มเครื่องมือออกแบบภาพพื้นฐานการควบคุมเมาส์เช่นการลากปรับขนาดและหมุนและแป้นพิมพ์ลัดที่มีประโยชน์ไม่กี่

03. รับข้อเสนอแนะ

อย่างไรก็ตาม Marvel ไม่เพียง แต่สำหรับนักออกแบบ ในขณะที่อาจต้องมีนักออกแบบเพื่อสร้างการออกแบบขั้นสุดท้ายในแอพการออกแบบมาตรฐานอุตสาหกรรมความคิดควร (และทำ) มาจากผู้มีส่วนได้เสียทุกประเภท (ผู้จัดการลูกค้าลูกค้านักพัฒนาและอื่น ๆ )

ไม่ว่าบทบาทหลักของคุณจะอยู่ในทีมมันควรจะพูดง่ายสุด ๆ : "เฮ้นี่เป็นความคิดนี้หรือไม่" แล้วแสดงให้เห็นว่ามองเห็นได้ Marvel's ป๊อป แอพมือถือช่วยลดอุปสรรคในการเข้าสู่อีกต่อไปโดยการนำเครื่องมือการออกแบบที่เรียบง่ายเหล่านี้ไปสู่อุปกรณ์มือถือเพราะลองเผชิญหน้ากับมันความคิดสามารถมาหาเราที่คนที่แปลกประหลาดที่สุด ความคิดร่างบนกระดาษสามารถแปลงเป็นหน้าจอ Marvel แบบโต้ตอบโดยใช้กล้องอุปกรณ์ การออกแบบจะต้องเป็นประชาธิปไตยที่ทุกคนสามารถพูดได้โดยไม่ถูก จำกัด ให้ใช้แอปพลิเคชันการออกแบบที่ซับซ้อน

04. บูรณาการ Marvel ด้วย Sketch

หลังจากระดมความคิดที่มีความเที่ยงตรงต่ำอย่างมีประสิทธิภาพกับทีมของคุณคุณจะต้องล้อเลียนการทำซ้ำครั้งแรกในแอปการออกแบบที่คุณเลือก ในขณะที่คุณสามารถอัปโหลดหน้าจอ PNG ที่ส่งออกได้อย่างสมบูรณ์จากแอปออกแบบใด ๆ Sketch เป็นแอพที่แนะนำเนื่องจากมีปลั๊กอินแบบร่างเฉพาะที่ทำให้กระบวนการอัตโนมัติ (และแม้กระทั่งการออกแบบเพื่อให้สามารถตรวจสอบได้โดยนักพัฒนาในภายหลัง) การสนับสนุน Photoshop สำหรับการออกแบบ Handoff จะมาในภายหลัง แต่ Adobe ไม่ได้โน้มน้าว Photoshop สำหรับการออกแบบอินเตอร์เฟสของผู้ใช้อีกต่อไปเนื่องจากสร้าง Adobe XD

จากแดชบอร์ดคลิกการตั้งค่า & gt; บูรณาการ & gt; Sketch Plugin จากนั้นดาวน์โหลดปลั๊กอิน เมื่อคุณติดตั้งแล้วและเปิดไฟล์การออกแบบของคุณให้กดซิงค์ที่เลือกหรือซิงค์ปุ่มทั้งหมดใน Marvel Bar (ปรากฏเหนือรายการเลเยอร์) เพื่อเริ่มการเลือกโครงการ Marvel เพื่อซิงค์หน้าจอ

05. ปฏิสัมพันธ์แบบต้นแบบ

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — ลาก - เลือกภูมิภาคเพื่อสร้างฮอตสปอตสำหรับการเชื่อมโยงจากหน้าจอหนึ่งไปอีกหน้าจอ

แต่แน่นอนว่าเราไม่สามารถทดสอบต้นแบบได้หากเรายังไม่ได้เพิ่มปฏิสัมพันธ์ใด ๆ กับพวกเขาดังนั้นลองทำอย่างนี้ตอนนี้ ย้ายกลับไปที่แดชบอร์ดมหัศจรรย์ซึ่งคุณจะเห็นหน้าจอที่เราซิงค์คลิกดูบนหน้าจอใด ๆ ที่จะเข้าสู่โหมดหน้าจอ

จากที่นี่เรายังสามารถนำทางผ่านหน้าจอโดยใช้ลูกศรซ้ายและขวาที่ด้านข้างของหน้าต่างคลิกตัวจับเวลาเพื่อให้มีวัฏจักรของ Marvel ผ่านหน้าจอหลังจากจำนวนวินาที (มีประโยชน์สำหรับงานนำเสนอ!) หรือคลิกไม่มีความคิดเห็นที่จะเพิ่ม ความคิดเห็นหรือหมายเหตุประกอบครั้งแรกของคุณบนหน้าจอ

อาจเป็นสิ่งแรกที่คุณจะสังเกตเห็นคือส่วนหัวคงที่และส่วนท้ายที่คงที่ที่ปรากฏใกล้กับมุมซ้ายและล่างซ้ายของหน้าจอตามลำดับ ปุ่มเหล่านี้ถูกไล่ออกและพวกเขาสามารถเคลื่อนย้ายเพื่อทำเครื่องหมายภูมิภาคตัดของส่วนส่วนหัวที่อยู่ต่อการคงที่ที่ด้านบนของวิวพอร์ตที่เลื่อนได้ คุณยังสามารถใช้ฟิลด์ข้อความที่มุมบนขวาและขวาล่างเพื่อระบุค่านี้ด้วยตนเอง

แต่เราจะเชื่อมโยงหน้าจอเดียวกับอีกหน้าจอได้อย่างไร ง่าย ๆ : ด้วยเมาส์ลากเลือกภูมิภาคบนหน้าจอที่เชื่อมโยงไปยังหน้าจออื่น (เรียกว่า 'ฮอตสปอต') เมื่อคุณทำเช่นนั้นอินเทอร์เฟซจะปรากฏที่ด้านล่างของหน้าต่างที่ช่วยให้คุณปรับแต่งที่ผู้ใช้ถูกนำไปใช้การเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นระหว่างการโต้ตอบและวิธีการใช้ท่าทางที่จำเป็นในการเปิดใช้งานการโต้ตอบนั้น (แตะปัด ฯลฯ .

และแน่นอนเราสามารถใช้เครื่องมือการสร้างต้นแบบเหล่านี้แม้ในการจำลองความเที่ยงตรงต่ำ ในความเป็นจริงขอแนะนำให้คุณทำตลอดขณะที่ใช้คุณสมบัติการแสดงความคิดเห็นเพื่อพูดคุยและย้ำ

06. แจกการออกแบบให้กับนักพัฒนา

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. — Handoff ออกแบบทำให้ง่ายสำหรับการออกแบบและพัฒนาเพื่อทำงานร่วมกัน

เมื่อทีมของคุณรักษาความมั่นใจอย่างเต็มที่ในการออกแบบขั้นสุดท้ายผ่านการตรวจสอบโดยใช้เครื่องมือทดสอบความคิดเห็นและการทดสอบผู้ใช้ก็ถึงเวลาที่จะมอบให้กับนักพัฒนาที่สามารถตรวจสอบและประมวลกฎหมายได้ สิ่งสำคัญคือต้องจำไว้ว่านักออกแบบไม่ได้ 'เสร็จสิ้น' เมื่อการออกแบบถูกส่งมอบและนักออกแบบและนักพัฒนาควรสื่อสารกันในความสามัคคีเพื่อดูแลการพัฒนาจนกว่าจะเสร็จสมบูรณ์ นักพัฒนาอาจมีคำถามบางอย่างดังนั้นคุณสมบัติการแสดงความคิดเห็นเหล่านั้นควรใช้งานมาก

กดปุ่มเล่นจากนั้นคลิก Handoff ที่มุมล่างซ้ายเพื่อเปิดอินเตอร์เฟสการออกแบบ Handoff จากที่นี่นักพัฒนาจะสามารถคลิกที่องค์ประกอบการออกแบบและตรวจสอบแต่ละรูปแบบที่ทำให้พวกเขาเป็นสิ่งที่พวกเขาใช้โดยใช้แถบด้านข้างทางด้านขวามือ (เช่นอินเตอร์เฟสสารวัตรใน Sketch, Figma หรือ Adobe XD) ความแตกต่างเพียงอย่างเดียวที่นี่คือนักพัฒนาสามารถคลิกที่ปุ่มคัดลอกเพื่อคัดลอกรูปแบบเป็นรหัสไปยังคลิปบอร์ด

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 301 ของ NET นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อ ปัญหา 301 หรือ สมัครสมาชิกสุทธิ .

รับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับการสร้างต้นแบบแบบวนซ้ำ

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby ทำให้การพูดคุยของเธอค้นพบว่าการทดสอบต้นแบบแบบวนซ้ำจะช่วยให้คุณสร้างการออกแบบที่ชนะได้ทุกครั้งที่สร้างนิวยอร์กตั้งแต่วันที่ 25-27 เมษายน 2561

เมื่อ บริษัท ส่วนใหญ่ต้องสร้างการออกแบบเว็บใหม่กระบวนการมักจะเริ่มต้นด้วยแนวคิดการขว้างย้ายไปสู่การออกแบบจากนั้นการพัฒนาแล้วใช้งานสด แต่ถ้ามันไม่ทำงาน นั่นเป็นเวลามากความพยายามและเงินที่จะใช้จ่ายเพื่อค้นหาว่าความคิดดำเนินการไม่ดี

โชคดีที่เธอพูดคุยที่ สร้างนิวยอร์กตั้งแต่วันที่ 25-27 เมษายน 2561 , Marisa Morby หัวหน้าฝ่ายวิจัยที่ Clearhead จะแสดงวิธีที่ดีกว่าในการสร้างและตรวจสอบการออกแบบใหม่ที่เร็วขึ้นง่ายกว่าและราคาถูกกว่ากระบวนการออกแบบแบบดั้งเดิมโดยใช้การสร้างต้นแบบและการทดสอบแบบวนซ้ำ

สร้างนิวยอร์กเกิดขึ้นตั้งแต่วันที่ 25-27 เมษายน 2561 รับตั๋วของคุณตอนนี้ .

บทความที่เกี่ยวข้อง:

10 เครื่องมือการสร้างต้นแบบด้านบน
เครื่องมือ Wireframe ที่ดีที่สุด 18
วิธีหลีกเลี่ยงข้อผิดพลาดในการสร้างต้นแบบ

ต้นแบบที่สมบูรณ์แบบและการออกแบบมือที่สมบูรณ์แบบด้วย Marvel

01. สร้างโครงการมหัศจรรย์ครั้งแรกของคุณ

02. การออกแบบต้นแบบความเที่ยงตรงต่ำ

03. รับข้อเสนอแนะ

04. บูรณาการ Marvel ด้วย Sketch

05. ปฏิสัมพันธ์แบบต้นแบบ

06. แจกการออกแบบให้กับนักพัฒนา

รับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับการสร้างต้นแบบแบบวนซ้ำ

วิธีการ - บทความยอดนิยม

ทำให้สไตลัสของคุณเองมีเพียง 4 รายการในครัวเรือน (อย่างจริงจัง)

วาดพลังของความคมชัดในศิลปะ

วิธีเพิ่มพลังงานในภาพวาดชีวิตของคุณ

วิธีสร้างเอฟเฟกต์ของเหลวกับ WebGL

ฝึกฝนวิทยาศาสตร์ของการเพิ่มประสิทธิภาพอัตราการแปลง

วาดฉากเทพนิยายคลาสสิกกับ Procreatee

สร้างภูมิทัศน์ที่น่าทึ่งใน Houdini

วิธีการรวมแผนที่การกระจัดแกะสลักและทาสี

หมวดหมู่