ออกแบบต้นแบบเชิงโต้ตอบใน Framer

เนื้อหา

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

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

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

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

นำเข้าจาก Sketch

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

ร่าง = Framer.Importer.load "นำเข้า / โปรไฟล์"

ใช้ตัวแปรนั้นเพื่อเข้าถึงเลเยอร์ที่นำเข้า ตัวอย่างเช่นหากต้องการอ้างอิงเลเยอร์ชื่อ "เนื้อหา" ในไฟล์ Sketch ให้พิมพ์ sketch.content ใน Framer

สร้างเลเยอร์มาสก์และอวาตาร์

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

สร้างเลเยอร์ headerMask ดังนี้:

headerMask = ความกว้างของเลเยอร์ใหม่: Screen.width, height: 800 backgroundColor: "transparent"

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

จากนั้นสร้างเลเยอร์มาสก์:

mask = new Layer width: 1000, height: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0

เราสร้างเลเยอร์ใหม่และตั้งค่าคุณสมบัติในลักษณะเดียวกัน borderRadius ขนาดใหญ่ทำให้เลเยอร์นี้เป็นวงกลม เราวางตำแหน่งเลเยอร์มาสก์ให้ซ้อนทับกับเลเยอร์ส่วนหัวซึ่งนำเข้าจาก Sketch เราจะลดขนาดลงเป็น 20 เปอร์เซ็นต์หรือ 0.2 OriginY ของศูนย์ตั้งค่าจุดยึดหรือการลงทะเบียนของรูปภาพที่ขอบด้านบน

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

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

avatar = ภาพเลเยอร์ใหม่: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true

สังเกตว่าเราตั้งค่า superLayer ของ avatar เป็นเลเยอร์มาสก์ ตอนนี้ทั้งสองซ้อนกันอยู่ภายใน headerMask นอกจากนี้เรายังตั้งค่าความกว้างและความสูงเพื่อให้รูปภาพเต็มพื้นที่ที่มาสก์จนหมด

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

maskY = mask.y mask.centerX ()

กำหนดสถานะ

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

ไวยากรณ์สำหรับรัฐนั้นง่ายมาก อ้างอิงเลเยอร์ใช้เมธอด layer.states.add () จากนั้นแสดงรายการคุณสมบัติที่จะรวม

sketch.content.states.add (ซ่อน: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (ขยาย: {scale: 1.1, y: maskY - 420})

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

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

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

การเคลื่อนไหวระหว่างรัฐ

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

avatar. บนเหตุการณ์คลิก -> headerMask.states.next () mask.states.next () sketch.content.states.next ()

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

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

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

sketch.content.states.animationOptions = เส้นโค้ง: "ความสะดวก", เวลา: 0.3 headerMask.states.animationOptions = เส้นโค้ง: "spring (150, 20, 0)" mask.states.animationOptions = เส้นโค้ง: "spring (300, 30, 0) "

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

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

ทดลองใช้งานบนอุปกรณ์เคลื่อนที่จริง

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

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

คำ: Jarrod Drysdale

Jarrod Drysdale เป็นนักเขียนที่ปรึกษาด้านการออกแบบผู้ผลิตผลิตภัณฑ์ดิจิทัล บทความนี้ตีพิมพ์ครั้งแรกในนิตยสาร net ฉบับที่ 270

ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!

• สร้างต้นแบบที่คลิกได้และใช้งานได้จริงใน Sketch
• วิธีเริ่มต้นบล็อก
• โปรแกรมแก้ไขภาพที่ดีที่สุด