Use Framer X to build interactive prototypes

ในฐานะนักออกแบบมักมีคำถามเกี่ยวกับเครื่องมือต้นแบบที่คุณควรใช้สำหรับโครงการของคุณ

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

การทำซ้ำล่าสุดของ Framer X ตอนนี้ใช้ React และ JavaScript แทน CoffeeScript เพื่อพัฒนาการโต้ตอบและภาพเคลื่อนไหวสั้น ๆ

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

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

วิธีสร้างแอพด้วย Framer X

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

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

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

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

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

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

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

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

สำหรับกิจกรรมล่าสุดนี้ให้เพิ่มข้อความ “กิจกรรมล่าสุด” ก่อนซึ่งตรงไปตรงมามาก ตอนนี้เราสามารถใช้คุณลักษณะใหม่ของ Framer X ที่เรียกว่า Stacks

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

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

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

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

ตอนนี้เราได้สร้างสแต็กแล้วเรามาทำให้มันเลื่อนได้ ก้าวออกจากเฟรม / อาร์ตบอร์ด

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

ตอนนี้สร้างคุณสมบัติการเลื่อนการเลื่อนในแนวนอนโดยเปลี่ยนลูกศรทิศทางในแถบด้านขวา

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

03. กองกิลด์แนวตั้ง

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

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

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

04. สร้างเพจใหม่

ตอนนี้เรามาสร้างหน้าใหม่สำหรับรายละเอียดของสูตรอาหารเฉพาะ ตัวอย่างเช่นลองใช้กรณีของบัตรอื่นที่นี่ French Pasta

Leave a Comment