บทช่วยสอน Framer: วิธีสร้างต้นแบบเชิงโต้ตอบที่น่าทึ่ง

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

Framer ออกมาพร้อมกับเวอร์ชันใหม่ล่าสุดเมื่อสัปดาห์ที่แล้ว และตลาดการสร้างต้นแบบจะไม่เหมือนเดิมอีกต่อไป เครื่องมือสร้างต้นแบบ Framer เคยยากต่อการเรียนรู้ แต่มีประโยชน์ในฐานะซอฟต์แวร์สร้างต้นแบบที่แม่นยำและไร้ขีดจำกัดที่สุด ตอนนี้สิ่งต่าง ๆ ได้เปลี่ยนไป ตอนนี้ Framer มาพร้อมกับฟีเจอร์ Design + Code + Collaborate ซึ่งหมายความว่าคุณสามารถสร้างต้นแบบของคุณภายใน Framer ได้โดยตรง พัฒนาต้นแบบที่ทำงานได้อย่างสมบูรณ์โดยไม่ต้องใช้ซอฟต์แวร์ของบริษัทอื่นและไม่มีทักษะในการเขียนโค้ดใดๆ

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

ข้อมูลพื้นฐานเกี่ยวกับเฟรมเรอร์

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

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

(ในบทช่วยสอน Framer นี้ ฉันจะเน้นที่การสร้างต้นแบบโดยตรงใน Framer.js คุณควรรู้ด้วยว่ามีวิธีอื่นๆ ในการเริ่มสร้างต้นแบบใน Framer ตัวอย่างเช่น คุณสามารถทำงานกับไฟล์ Sketch ได้โดยตรง ฉันจะครอบคลุมเวิร์กโฟลว์นั้นใน บทความอื่น)

Framer ใหม่ทั้งหมด – โหมดการออกแบบ

ในบทความนี้ เราจะสร้างต้นแบบเจ๋งๆ สามแบบภายในไม่กี่นาทีโดยใช้โค้ดน้อยที่สุด: การโต้ตอบพื้นฐาน ส่วนประกอบการเลื่อน และองค์ประกอบของหน้า

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

มาสร้างการออกแบบประเภทแอปกันเถอะ

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

ขั้นตอนที่ 1: สร้างปุ่มและพื้นหลังอย่างง่าย

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

จากนั้นเลือกเครื่องมือ สี่เหลี่ยมผืนผ้า และสร้างรูปร่างในรูปแบบของปุ่มกลมอย่างง่าย

ขั้นตอนที่ 2: เพิ่มการ์ดที่มีรูปภาพ

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

ขั้นตอนที่ 3: เพิ่มชื่อแอป

Framer ยังให้คุณเพิ่มเลเยอร์ข้อความได้อีกด้วย อีกครั้ง การใส่สไตล์นั้นโดยพื้นฐานแล้วเหมือนกับในซอฟต์แวร์กราฟิกใดๆ คุณสามารถเลือกแบบอักษร ขนาด การจัดตำแหน่ง ระยะห่างระหว่างตัวอักษร และอื่นๆ

ขั้นตอนที่ 4: บอก Framer ว่าเลเยอร์ใดเป็นแบบโต้ตอบ

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

ขั้นตอนที่ 5 (โบนัส): กำหนดสีสากลของคุณ

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

เมื่อคุณกำลังตั้งค่าสีของคุณ เพียงตั้งชื่อสีเหล่านั้นในโปรแกรมแก้ไขโค้ด และระบุค่า HEX, RGB หรือ RGBa หลังเครื่องหมาย “=” ที่เหมาะสม อย่าลืมเก็บตัวแปรทั้งหมดไว้ที่ด้านบนสุดของโค้ด

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

ขั้นตอนที่ 6 (โบนัส): การเพิ่มตำแหน่งสัมพัทธ์

ด้วย Framer ใหม่ มันง่ายมากที่จะทำให้ต้นแบบของคุณตอบสนอง คุณสามารถกำหนดตำแหน่งสัมพัทธ์ได้จาก โหมดการออกแบบ ดังที่แสดงด้านล่าง:

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

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

ตอนนี้คุณพร้อมแล้ว—มาเริ่มโครงการกันเลย

เราได้สร้างเลเยอร์ Framer ประเภทต่างๆ ตอนนี้สนามเด็กเล่นโต้ตอบของเราพร้อมที่จะไปแล้ว

ในที่สุด! ส่วนที่น่าเบื่อได้จบลงแล้ว ตอนนี้ก็ถึงเวลาสำหรับการออกแบบการโต้ตอบ

ดาวน์โหลดต้นแบบทั้งหมดที่นี่

1. การสร้างการโต้ตอบคำติชมของปุ่ม

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

ขั้นตอนที่ 1: การสร้างเหตุการณ์สำหรับการโต้ตอบ

เราจะทำให้มันง่าย มาสร้างคำติชมของปุ่มเมื่อคุณแตะโดยใช้คำสั่งต่อไปนี้:

 layerA.onTap (event, layer) ->

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

ขั้นตอนที่ 2: การเพิ่มแอนิเมชั่นให้กับเหตุการณ์

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

Framer เพิ่มโค้ดอีกสองสามบรรทัด (ไม่ต้องกังวล คุณยังสามารถแก้ไขภาพเคลื่อนไหวด้วยแผงภาพเคลื่อนไหวได้)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

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

ขั้นตอนที่ 3: การรีเซ็ตแอนิเมชั่น

เพิ่มกิจกรรมอื่นเกือบเหมือนที่เราทำก่อน ความแตกต่างคือเรากำลังมองหาเหตุการณ์เมื่อแอนิเมชั่นจบลง:

คราวนี้โค้ดที่เพิ่มโดย Framer จะมีลักษณะดังนี้:

 button.onAnimationEnd (event, layer) ->

ดังนั้น เมื่อแอนิเมชั่นบนเลเยอร์ ปุ่ม เสร็จสิ้น เราสามารถเพิ่มแอนิเมชั่นถัดไปที่จะรีเซ็ตพารามิเตอร์เลเยอร์ของ ปุ่ม :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

แค่นั้นแหละ! ขณะนี้เรามีข้อเสนอแนะเกี่ยวกับการทำงานหลังจากแตะที่ปุ่มของเรา

2. การสร้างสถานะต่างๆ สำหรับการโต้ตอบกับเลเยอร์การ์ด

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

ขั้นตอนที่ 1: การเพิ่มและสร้างสถานะสำหรับเลเยอร์การ์ด

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

โปรดใส่ใจกับการเยื้องของรหัส ควรเริ่มจากแถวแรก

ฉันได้ออกแบบสถานะที่แตกต่างกันสองสถานะสำหรับเลเยอร์ การ์ด ของฉัน:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

ขั้นตอนที่ 2: การเพิ่มเหตุการณ์

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

 button.onTap -> card.stateCycle()

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

 button.onTap -> card.stateSwitch("b")

ข้อมูลโค้ดนี้มีประโยชน์เมื่อคุณต้องการทริกเกอร์สถานะเฉพาะของเลเยอร์

การปรับครั้งสุดท้ายที่ฉันทำกับต้นแบบของฉันคือการเปลี่ยนแปลงความเร็วของแอนิเมชันและส่วนโค้งระหว่างสถานะต่างๆ:

 card.animationOptions = curve: Spring time: 0.8 

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

เร่งงานของคุณใน Framer: Components

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

1. องค์ประกอบแรก: การเลื่อน

ฉันได้แก้ไขต้นแบบของเราเล็กน้อย ตอนนี้เรามีรายการอยู่ภายในแล้ว แต่ความสูงอยู่เหนือความละเอียดหน้าจอ เราต้องสร้างการเลื่อนเพื่อดูรายการทั้งหมดในต้นแบบ

ขั้นตอนที่ 1: สร้างเลเยอร์และตั้งค่าส่วนประกอบ

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

 scroll = new ScrollComponent width: Screen.width height: Screen.height

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

ขั้นตอนที่ 2: บอก Framer ว่าคุณต้องการเลื่อนเลเยอร์ใด

ยังไม่มีอะไรเกิดขึ้น เราต้องบอก Framer ว่าชั้นใดควรเลื่อนได้ ในการดำเนินการนี้ เราเพิ่มเลเยอร์ รายการ ของเราลงในองค์ประกอบการเลื่อน:

 list.parent = scroll.content

ขั้นตอนที่ 3: ล็อคการเลื่อนแนวตั้ง

เราได้รับอนุญาตให้เลื่อนตอนนี้ แต่มันเกิดขึ้นในทุกทิศทาง เราต้องล็อคการเลื่อนบนแกนตั้ง:

 scroll.scrollHorizontal = false 

ว้าว! คุณสร้างการเลื่อนภายในแอปด้วยโค้ดง่ายๆ เพียงห้าบรรทัด

2. ส่วนประกอบของหน้า: การปัดหน้าจอไปที่หน้าจอ

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

ขั้นตอนที่ 1: การตั้งค่าส่วนประกอบ

ขั้นแรก เราต้องสร้าง "กล่อง" ในตัวแก้ไขโค้ดที่เวทมนตร์จะเกิดขึ้น:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

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

ขั้นตอนที่ 2: การสร้างเลเยอร์

เราจะใช้การออกแบบต้นแบบครั้งแรกของเราและปรับเปลี่ยนเล็กน้อย แทนที่จะเป็นภาพการ์ดเดียว คราวนี้ฉันนำเข้าสองภาพ

ขั้นแรก เราต้องทำให้อาร์ตบอร์ดกว้างขึ้นสองเท่า ในแผงคุณสมบัติ artboard ให้ค้นหา width แล้วคูณด้วยสอง (หรือเพียงแค่เพิ่ม *2 ) วางการ์ดไว้ข้างๆ กัน เปิดใช้งานด้วยจุดสีน้ำเงิน และตั้งชื่อให้ถูกต้อง: card1 และ card2

ขั้นตอนที่ 3: การเพิ่มเลเยอร์ให้กับองค์ประกอบของหน้า

ที่ส่วนท้ายของโค้ดในตัวแก้ไขโค้ด เราต้องเพิ่ม:

 card1.parent = page.content card2.parent = page.content

นั่นหมายความว่าเรากำลังเพิ่มเลเยอร์เหล่านี้ลงในองค์ประกอบ

องค์ประกอบของหน้าพร้อมใช้งานแล้ว!

คำสุดท้าย

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

หากคุณต้องการเจาะลึกเข้าไปใน Framer ให้ลองอ่านเอกสาร Framer

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง