ใช้ Framer X เพื่อสร้างต้นแบบแบบโต้ตอบ

Sep 11, 2025
วิธีการ
Framer X - Design prototypes fast
(เครดิตรูปภาพ: Framer)

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

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

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

วิธีการสร้างแอปที่มี Framer X

เพื่อชื่นชมพลังของ Framer X อย่างเต็มที่เราจะสร้างโครงการจริงในชีวิต: แอปพลิเคชั่นสูตรการทำอาหารที่เรียบง่ายพร้อมเนื้อหาและสื่อ (สินทรัพย์ที่สำรองไว้ในที่เชื่อถือได้ การจัดเก็บเมฆ . สิ่งแรกที่ต้องสร้างคือโฮมเพจ เราจะทำให้สิ่งต่าง ๆ ง่ายๆด้วยองค์ประกอบต่อไปนี้:

  • แถบค้นหามาตรฐานเพื่อค้นหาสูตรอาหาร
  • กิจกรรมล่าสุดเพื่อแสดงสูตรล่าสุดที่ดู
  • บัตรสูตรแสดงสิ่งต่าง ๆ เช่นสูตรอาหารยอดนิยม
  • การสร้างมุมมองอย่างละเอียดของสูตรที่มีตัวเลือกวิดีโอและการแชร์

ในการเริ่มต้นใช้งานคุณต้องสร้างเฟรมใหม่ (Artboard) โดยคลิกที่ไอคอน + ที่ Navbar ด้านซ้าย เลือกสไตล์อาร์ตบอร์ดใด ๆ จากรายการแม่แบบ iPhone / Android มาตรฐานบนแถบด้านขวา ตอนนี้คุณพร้อมที่จะไปแล้ว

01. สร้างแถบค้นหา

เริ่มต้นด้วยการสร้างแถบค้นหา แทนที่จะสร้างสี่เหลี่ยมผืนผ้าและการเพิ่มไอคอนการค้นหาอย่างตามปกติเราจะสามารถใช้ส่วนประกอบที่ใช้ซ้ำได้อย่างรวดเร็วใน Framer X เหล่านี้เรียกว่าแพ็คเกจ มีแพ็คเกจหลายพันแพ็คเกจที่สามารถพบได้ในแถบนำทางด้านซ้ายภายใต้การจัดเก็บ คลิกที่เก็บค้นหาชุด Android และชุดตัวอย่างจากนั้นติดตั้ง

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

ค้นหาองค์ประกอบที่คุณต้องการด้วยการค้นหาในตัวกรอง - ในกรณีนี้แถบค้นหาซึ่งพบได้ภายใต้ชุดตัวอย่าง เพียงลากและวางลงบนเฟรม ตอนนี้คุณสามารถแก้ไขคุณสมบัติเช่นข้อความตัวยึดขนาดตัวอักษรและสีโดยใช้แถบด้านขวา

02. สร้างสแต็กเนื้อหา

สำหรับบล็อกกิจกรรมล่าสุดนี้ก่อนเพิ่มข้อความ 'กิจกรรมล่าสุด' ซึ่งค่อนข้างตรงไปตรงมา ตอนนี้เราสามารถใช้คุณสมบัติใหม่ของ Framer X เรียกว่า stacks สามารถทำได้โดยคลิกที่ไอคอน + และเลือกสแต็ค S จากเมนู หลังจากเลือกสแต็กลากและวางพื้นที่ 600 x 300 บนเฟรมที่ทำงานเพื่อสร้างสแต็ก สแต็คนี้จะแสดงเป็นสีน้ำเงิน

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

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

ตอนนี้เราได้สร้างสแต็กมาทำให้มันเลื่อนได้ ย้ายออกจากเฟรม / อาร์ตบอร์ด คลิกที่ไอคอน + จาก NEV ซ้ายแล้วคลิกตัวเลือกการเลื่อน เช่นเดียวกับที่เราสร้างพื้นที่ด้วยสแต็กให้สร้างพื้นที่ที่เลื่อนได้บนเฟรม / อาร์ตบอร์ดที่มีขนาดเท่ากับสแต็ก

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

03. สร้างสแต็กแนวตั้ง

Interactive Framer X - 01

Framer X ช่วยให้คุณแนะนำสแต็คที่เลื่อนได้แนวนอนและแนวตั้ง (เครดิตรูปภาพ: Vamsi Batchu)

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

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

04. สร้างหน้าใหม่

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

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

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

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

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

05. แนะนำการโต้ตอบ

Interactive Framer X - 02

เพิ่มปฏิสัมพันธ์กับปุ่มและองค์ประกอบเพื่อให้พวกเขามีส่วนร่วมมากขึ้น (เครดิตรูปภาพ: Vamsi Batchu)

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

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

เพื่อช่วยให้หน้าจอแตกต่างกันเรามาเพิ่มสีบางอย่างและกรอกข้อมูลด้วยไอคอนโซเชียลมีเดียเช่น Facebook, Instagram, Whatsapp และอีเมล หน้าจอแชร์นี้ควรเพิ่มไอคอน x ซึ่งเมื่อคลิกจะนำกลับไปยังสถานะดั้งเดิม

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

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

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

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

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

06. เพิ่มปุ่มบันทึก

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

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

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

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

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

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

เรียนรู้วิธีสร้าง JavaScript ที่ดีขึ้นที่ GenerateJS (เครดิตภาพ: อนาคต / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

เข้าร่วมกับเราในเดือนเมษายน 2020 กับผู้เล่นตัวจริงของ JavaScript Superstars ที่ GenerateJS - การประชุมช่วยให้คุณสร้างจาวาสคริปต์ที่ดีขึ้น จองเลยที่ generateconf.com

อ่านเพิ่มเติม:

  • วิธีการโดดเด่นและได้รับการว่าจ้างในฐานะนักออกแบบ UX
  • เคล็ดลับ 20 UX ที่คุณต้องรู้
  • 22 เครื่องมือออกแบบ UI ที่ดีที่สุด

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

วิธีการสร้างเว็บแอปโปรเกรสซีฟ

วิธีการ Sep 11, 2025

ขณะนี้บัญชีมือถือสำหรับการรับส่งข้อมูลของเว..

การทำความเข้าใจคุณสมบัติการแสดง CSS

วิธีการ Sep 11, 2025

มันเที่ยงคืนและอันนั้น Div ในเว็บไซต์ของค�..

วิธีการสร้างโคมไฟลาวาด้วย Keyshot

วิธีการ Sep 11, 2025

มีบางอย่างที่น่าพอใจเกี่ยวกับหลอดลาวาอย่างแ..

อัพเกรดพื้นผิวของคุณในนักออกแบบสาร

วิธีการ Sep 11, 2025

Daniel Therger เป็นผู้นำด้านสิ่งแวดล้อมของ Bungie Daniel Therge ให้�..

วิธีการทาสีแนวบรรยากาศใน Photoshop

วิธีการ Sep 11, 2025

การวาดภาพแนวตั้งอาจเป็นงานที่ยาก แม้ว่าคุณจ�..

ต้นแบบการวาดภาพเชิงลบในสีน้ำ

วิธีการ Sep 11, 2025

ภาพวาดเชิงลบหมายถึงการวาดภาพ พื้นที่เชิงลบ ที่กำหนดรูปร่างที..

ตะเข็บและคอมโพสิต 360 ฟุตเทจ

วิธีการ Sep 11, 2025

ด้วยการเพิ่มของ ปลั๊กอิน Cara VR ถึง Nuke ตอนนี้เรามีเครื่องมือที่มีป�..

15 เคล็ดลับสำหรับการเพิ่มประสิทธิภาพข้ามอุปกรณ์

วิธีการ Sep 11, 2025

ออกแบบสำหรับอุปกรณ์ทั้งหมด! Anna Dahlström ..

หมวดหมู่