วิธีการสร้างแอปมือถือด้วย Origami Studio

Sep 16, 2025

วิธีการ

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

10 เครื่องมือการสร้างต้นแบบด้านบน

มีวิธีการมากมายที่คุณสามารถใช้ในการสร้างต้นแบบและเครื่องมือมากมายให้ความช่วยเหลือ หนึ่งในรุ่นใหม่ล่าสุดในบล็อกคือ สตูดิโอ Origami พัฒนาโดย Facebook และฟรีสำหรับ MacOS

Origami Studio ซึ่งเริ่มต้นชีวิตของมันในฐานะปลั๊กอินสำหรับนักแต่งเพลงควอตซ์ (ภาษาการเขียนโปรแกรมภาพภายในสภาพแวดล้อมการพัฒนา Xcode ของ MacOS) ก่อนที่จะกลายเป็นเครื่องมือแบบสแตนด์อโลนได้รับความสนใจอย่างมากในช่วงปีที่ผ่านมา

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

ทำตามขั้นตอนเหล่านี้เพื่อค้นหาว่าคุณสามารถใช้ Origami Studio เพื่อสร้างต้นแบบได้อย่างง่ายดายเพียงใด

01. ต้นแบบใหม่

Start by creating a new iPhone 8 prototype — เริ่มต้นด้วยการสร้างต้นแบบ iPhone 8 ใหม่

เรากำลังจะสร้างต้นแบบสำหรับแอพมือถือซึ่งจะช่วยให้เราต้องปัดผ่านรูปภาพของแมวและ 'ชอบ' บางคน เมื่อเราติดตั้ง Origami Studio เราจะสร้างต้นแบบ iPhone 8 ใหม่จากหน้าจอสแปลช

02. การเพิ่มเลเยอร์

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

03. การสร้างปฏิสัมพันธ์

For interactions you'll need to create a patch — สำหรับการโต้ตอบที่คุณจะต้องสร้างแพทช์

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

04. การเชื่อมโยงการมีปฏิสัมพันธ์กับเลเยอร์

Change the patch properties so that it only responds when you click in the right place — เปลี่ยนคุณสมบัติของแพทช์เพื่อตอบสนองต่อเมื่อคุณคลิกที่ถูกต้องเท่านั้น

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

05. แอนิเมชั่น

A pop animation will give users a bit of visual feedback — แอนิเมชั่นป๊อปจะให้ความคิดเห็นด้วยภาพแก่ผู้ใช้

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

06. การเปลี่ยน

You can change the extent to which objects change size when they're clicked — คุณสามารถเปลี่ยนขอบเขตที่วัตถุเปลี่ยนขนาดเมื่อพวกเขาคลิก

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

07. สวิทช์

Use switch patches to toggle objects between different states — ใช้สวิตช์แพทช์เพื่อสลับวัตถุระหว่างรัฐต่าง ๆ

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

08. พฤติกรรมที่ซับซ้อนมากขึ้น

By experimenting with patches you can add more complex behaviour to your prototype — โดยการทดลองกับแพทช์คุณสามารถเพิ่มพฤติกรรมที่ซับซ้อนมากขึ้นในต้นแบบของคุณ

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

09. ม้าหมุน

It's time to bring on all the cats — ถึงเวลาที่จะนำแมวทั้งหมดมา

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

10. ปัดซ้ายและขวา

Follow these steps to add a classic swiping action to your carousel — ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มการใช้งานแบบคลาสสิกไปยังม้าหมุนของคุณ

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

11. ขั้นตอนต่อไป

Now you've learned the basics you can add more advanced features — ตอนนี้คุณได้เรียนรู้พื้นฐานที่คุณสามารถเพิ่มคุณสมบัติขั้นสูงได้มากขึ้น

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 270 ของงานออกแบบเว็บไซต์สร้างสรรค์ Web Design ซื้อปัญหา 270 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

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

แนวโน้มที่จะกำหนดรูปแบบการออกแบบแอปในปี 2018
3 วิธีอันดับต้น ๆ ในการสร้างต้นแบบเว็บไซต์
ทั้งหมดที่คุณต้องรู้เกี่ยวกับ Mockups, Wireframes และต้นแบบ

วิธีการสร้างแอปมือถือด้วย Origami Studio

01. ต้นแบบใหม่

02. การเพิ่มเลเยอร์

03. การสร้างปฏิสัมพันธ์

04. การเชื่อมโยงการมีปฏิสัมพันธ์กับเลเยอร์

05. แอนิเมชั่น

06. การเปลี่ยน

07. สวิทช์

08. พฤติกรรมที่ซับซ้อนมากขึ้น

09. ม้าหมุน

10. ปัดซ้ายและขวา

11. ขั้นตอนต่อไป

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

วิธีการแสดงผลพื้นผิวโปร่งใสจริง

วิธีการเลือกด้วยเครื่องมือ Lasso ของ Photoshop

วิธีการออกแบบการพิมพ์สามมิติ

ออกแบบเว็บไซต์ตอบสนองด้วยการปรับขนาดที่ใช้ EM

5 สิ่งที่คุณไม่รู้จักคุณสามารถทำได้ด้วย HTML

วิธีการพัฒนาสิ่งมีชีวิตในตำนาน

สร้างข้อความที่สมบูรณ์แบบในไคลเอนต์อีเมลทั้งหมด

สร้างเครื่องเล่นเพลงที่เรียบง่ายพร้อมตอบสนอง

หมวดหมู่