คำแนะนำทีละขั้นตอนสำหรับแอนิเมชั่น UI ด้วยหลักการและภาพร่าง
เผยแพร่แล้ว: 2022-03-11การออกแบบอินเทอร์เฟซ UI โดยคำนึงถึงแอนิเมชันและการเปลี่ยนภาพเป็นวิธีที่ยอดเยี่ยมในการวางแผนประสบการณ์ผู้ใช้ (UX) ที่ดีขึ้นสำหรับแอปถัดไปของคุณ การโต้ตอบขนาดเล็กแบบเคลื่อนไหวเป็นวิธีที่สมบูรณ์แบบในการกระตุ้นการมีส่วนร่วมของผู้ใช้ ในโลกที่มีช่วงความสนใจสั้น นี่คือเหตุผลที่ Airbnb เพิ่งเปิดตัว Lottie ซึ่งเป็น “เครื่องมือโอเพนซอร์ซใหม่ที่ทำให้การเพิ่มแอนิเมชั่นไปยังแอพที่มาพร้อมเครื่องนั้นรวดเร็ว”
โครงการอย่าง Lottie แสดงให้เห็นถึงความสำคัญที่เพิ่มขึ้นของการเพิ่มการเคลื่อนไหวเป็นองค์ประกอบใหม่สำหรับการประดิษฐ์ UX ที่ปรับปรุงแล้วสำหรับทั้งแอพและเว็บไซต์
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้เทคนิคแอนิเมชั่น UI ที่มีประสิทธิภาพโดยใช้หลักการสำหรับ Mac หลังจากที่คุณอ่านคู่มือนี้แล้ว คุณจะสามารถเปลี่ยนหุ่นจำลองที่นิ่งๆ และนิ่งๆ ให้กลายเป็นต้นแบบแบบอินเทอร์แอกทีฟเพื่อแสดงผลงานของคุณได้ดียิ่งขึ้น คุณสามารถใช้สิ่งที่จะได้เรียนรู้ที่นี่เพื่อปรับปรุงการเสนอขาย UI ครั้งต่อไปและการเลี้ยงลูก
มาเริ่มกันเลย.
ดาวน์โหลดแหล่งข้อมูลฟรีเหล่านี้เพื่อติดตาม
คุณจะต้องใช้แอป Principle และ Sketch เพื่อติดตามเท่านั้น หากคุณยังไม่มี คุณสามารถดาวน์โหลดรุ่นทดลองใช้ฟรีโดยใช้ลิงก์ด้านล่าง
ดาวน์โหลดหลักการทดลองใช้ฟรีที่นี่
ดาวน์โหลด Sketch รุ่นทดลองใช้ฟรีที่นี่
ดาวน์โหลดไฟล์ต้นฉบับบทช่วยสอนฟรีที่นี่
ภาพรวมของอินเทอร์เฟซหลัก
หากคุณคุ้นเคยกับ Mac OS อินเทอร์เฟซของ Principle จะดูคุ้นเคยมาก มีสามส่วนหลัก: แถบด้านข้าง พื้นที่ออกแบบที่แสดงอาร์ตบอร์ด และหน้าต่างแสดงตัวอย่างที่คุณสามารถปรับขนาดและย้ายไปรอบๆ ได้
การทำความเข้าใจแนวคิดแอนิเมชั่นพื้นฐานในหลักการ
การสร้างแอนิเมชั่นด้วยหลักการนั้นค่อนข้างง่าย คุณไม่จำเป็นต้องมีพื้นหลังแอนิเมชั่นเพื่อเริ่มต้น อันที่จริง การยกของหนักส่วนใหญ่เป็นแบบอัตโนมัติโดยหลักการ และคุณจะต้องมุ่งเน้นเฉพาะสิ่งที่เริ่มต้นแอนิเมชัน (เช่น ปุ่ม ลิงก์ เหตุการณ์การเลื่อน) ภาพเคลื่อนไหวเริ่มต้นอย่างไร และสิ้นสุดอย่างไร
เพื่อช่วยให้คุณปฏิบัติตามได้ดียิ่งขึ้น ต่อไปนี้คือคำศัพท์สั้นๆ ที่คุณจะเห็นตลอดทั้งคู่มือ
- คอมโพเนนต์: คอมโพเนนต์คือการจัดกลุ่มประเภทหนึ่งที่ช่วยให้มีองค์ประกอบและแม้กระทั่งภาพเคลื่อนไหว เทียบเท่ากับ "วัตถุอัจฉริยะ" ใน Photoshop หรือ "สัญลักษณ์" ใน Illustrator
- ทริกเกอร์: วิธีการเริ่มแอนิเมชัน เช่น โดยการแตะ เลื่อน โฮเวอร์ ฯลฯ ในหลักการ ทริกเกอร์สามารถกำหนดได้โดยการเลือกองค์ประกอบใดๆ ในหลักการ แล้วคลิกไอคอนที่ปรากฏทางด้านขวาพร้อมไอคอนรูปสายฟ้า
- การ เปลี่ยนผ่าน: การเปลี่ยนสถานะจากอาร์ตบอร์ดหนึ่งไปยังอีกบอร์ดหนึ่ง กล่าวคือ เลื่อนไปทางซ้ายหรือขวา
- เอ ฟเฟกต์การค่อยๆ เปลี่ยน: ระดับความราบรื่นของการเปลี่ยนตามวิธีที่แอนิเมชั่นเริ่มต้นและสิ้นสุด
ก. ทริกเกอร์และการเปลี่ยนแปลง
ขั้นตอนแรกในการสร้างแอนิเมชั่นด้วยหลักการคือการตั้งค่าทริกเกอร์ (พฤติกรรมหรือการกระทำที่เริ่มแอนิเมชั่น) บนองค์ประกอบ (เช่น ปุ่ม หรือลิงก์) และเพื่อเปลี่ยนสถานะเริ่มต้นและ/หรือขั้นสุดท้าย (เช่น ตำแหน่งหรือมาตราส่วน ตั้งแต่ต้นจนจบของแอนิเมชั่น)
- กำหนดสถานะเริ่มต้น: องค์ประกอบ UI ของคุณมีลักษณะอย่างไรที่จุดเริ่มต้นก่อนที่แอนิเมชั่นจะเกิดขึ้น
- กำหนดทริกเกอร์: โดยการเลือกองค์ประกอบการโต้ตอบและการกระทำที่เปิดใช้งานภาพเคลื่อนไหว
- กำหนดสถานะสุดท้าย: วิธีแสดงองค์ประกอบเมื่อสิ้นสุดภาพเคลื่อนไหว
เมื่อคุณตั้งค่าแอนิเมชั่นแล้ว คุณสามารถดูตัวอย่างได้ในหน้าต่างแสดงตัวอย่าง
B. ความยาวของแอนิเมชันและเอฟเฟกต์การผ่อนคลาย
ตามค่าเริ่มต้น Principle จะสร้างภาพเคลื่อนไหวครึ่งวินาที บางครั้งอาจยังไม่เพียงพอที่จะเห็นเอฟเฟกต์การเปลี่ยนแปลงโดยละเอียด คุณสามารถเปลี่ยนระยะเวลาและเอฟเฟกต์ "การค่อยๆ เปลี่ยน" จากแผงภาพเคลื่อนไหวได้โดยทำตาม 3 ขั้นตอนเหล่านี้
- เปิดแผงแอนิเมชั่น: เลือกลูกศรสีดำระหว่างอาร์ตบอร์ดสองแผ่น แล้วคลิกปุ่ม “เคลื่อนไหว” ที่แถบด้านบน
- ขยายความยาวของภาพเคลื่อนไหว: ย้ายจุดสิ้นสุดของเส้นสีน้ำเงิน
- ใช้การค่อยๆ เปลี่ยน: เลือกจุดที่มีรูปร่างเป็นเพชรทั้งหมด และเลือก "ทำให้ทั้งคู่ง่ายขึ้น" จากเมนูแบบเลื่อนลงเพื่อทำให้การเปลี่ยนภาพราบรื่นขึ้น
สิ่งที่คุณจะได้รับ
วิดีโอนี้จะแสดงให้คุณเห็นว่าคุณจะสร้างอะไรได้บ้างเมื่อทำตามบทช่วยสอนนี้ แอปสาธิตจะแสดงจานสีของดีไซน์ Material ของ Google และให้รายละเอียดเพิ่มเติมแก่คุณเมื่อคุณเลือกสี คุณจะสร้างแอนิเมชั่นการโหลด การเปลี่ยนหน้าบางหน้าด้วยเอฟเฟกต์พารัลแลกซ์ที่ราบรื่น และแถบเลื่อนเมนู
ตรวจสอบให้แน่ใจว่าคุณได้ดาวน์โหลดไฟล์ต้นทางการสอนฟรีที่นี่
มาเริ่มกันเลย.
จากไฟล์สเก็ตช์สู่หลักการ
- ย้ายอาร์ตบอร์ดเพื่อเตรียมพร้อมสำหรับการเปลี่ยนระหว่างอาร์ทบอร์ดอย่างเป็นธรรมชาติ: ตัวอย่างเช่น หน้าจอที่เลื่อนจากด้านขวาควรสัมผัสกับขอบด้านขวาของหน้าจอซึ่งจะแทนที่ภาพเคลื่อนไหว
- เมื่อไฟล์ Sketch ของคุณพร้อมแล้ว ให้ไปที่หลักการ สร้างเอกสารเปล่าที่ตรงกับอัตราส่วน 360x640 แล้วคลิกปุ่ม "นำเข้า"
การลบส่วนหัวของหน้าจอเพื่อการเลื่อนแบบไม่มีรอยต่อ
หากต้องการสร้างการเปลี่ยนระหว่างหน้าอย่างราบรื่น คุณสามารถลบแต่ละส่วนหัวออกได้ ยกเว้นส่วนหัวแรก ตอนแรกมีการเพิ่มส่วนหัวเพื่อแสดงรูปลักษณ์ของแอป คุณจะเก็บส่วนหัวไว้บนหน้าจอ "ยินดีต้อนรับ" เท่านั้น และจะทำหน้าที่เป็นแถบติดหนึบกับแถบที่มีเมนูและชื่อแอป
การสร้างแอนิเมชั่นกำลังโหลด - The Shapes
- เลือกกลุ่มการโหลดรูปทรง และคลิกที่ "สร้างส่วนประกอบ" ที่มีรูปทรงและข้อความในการโหลด สร้างส่วนประกอบสำหรับข้อความภายในสัญลักษณ์แรก เราจะทำให้ข้อความเคลื่อนไหวแยกกันหลังจากนั้น
- เลือกรูปร่างที่จัดกลุ่ม เลือกทริกเกอร์ "แตะ" แล้วลากและวางบนอาร์ตบอร์ดเดียวกันเพื่อสร้างสำเนา
- อาร์ตบอร์ดที่สองแสดงถึงสถานะสุดท้ายของแอนิเมชั่น และคุณสามารถหมุนกลุ่มได้โดยใช้คุณสมบัติมุม กำหนดค่ามุมต่างๆ ให้กับ "เติม" และ "โครงร่าง" เพื่อสร้างเอฟเฟกต์ที่น่าสนใจยิ่งขึ้น
- ในการดำเนินการให้เสร็จสิ้น ให้เลือกลูกศรระหว่างอาร์ตบอร์ด คลิก "Animate" เพื่อเปิด "แผงภาพเคลื่อนไหว" และเปลี่ยนระยะเวลาโดยเลื่อนจุดสิ้นสุดไปที่ประมาณ 1.00 วินาที
การสร้างแอนิเมชั่นกำลังโหลด - ข้อความ
- ขั้นแรก สร้างแอนิเมชั่นสไลด์ขึ้น เลือกรูปร่างปุ่ม และใช้เหตุการณ์ทริกเกอร์ "แตะ" ในอาร์ตบอร์ดใหม่ ให้ย้ายหน้าจอทั้งหมดขึ้น 640px (เท่ากับความสูงของอาร์ตบอร์ดปัจจุบัน)
- ทีนี้ มาสร้างพารัลแลกซ์กัน ไปที่อาร์ตบอร์ดก่อนหน้า บนหน้าจอต้อนรับ ย้ายรูปทรงเรขาคณิตและข้อความลงไปที่ค่า Y ต่างๆ
- สุดท้าย ภายในแผงภาพเคลื่อนไหว ให้ขยายไทม์ไลน์ พูดเป็น 1 วินาที ใช้เอฟเฟกต์ "Ease Both" กับไทม์ไลน์ (ตรวจสอบให้แน่ใจว่าคุณได้เลือกจุดรูปเพชรทั้งหมดแล้ว และคลิกบนเส้นสีน้ำเงินเพื่อใช้เอฟเฟกต์กับทั้งหมด)
- ดูตัวอย่างแอนิเมชั่นของคุณและย้ายรูปร่างไปรอบๆ จนกว่าเอฟเฟกต์พารัลแลกซ์จะดูดีสำหรับคุณ
การสร้างเอฟเฟกต์ Parallax - หน้ายินดีต้อนรับ
- เลือกองค์ประกอบการโหลดและใช้ทริกเกอร์ "แตะ" โดยการลากลูกศรจากที่ใดก็ได้ในอาร์ตบอร์ด
- เลือกหน้าจอทั้งหมด (จากกลุ่มหลัก) และเลื่อนขึ้น 640px ขั้นตอนนี้จะแสดงหน้าจอต้อนรับในมุมมอง
- กลับไปที่อาร์ตบอร์ดก่อนหน้า และย้ายรูปร่างบนหน้าจอ "ยินดีต้อนรับ" ลงด้านล่าง สิ่งนี้จะสร้างเอฟเฟกต์การเลื่อนแบบอะซิงโครนัสที่เรียกว่าพารัลแลกซ์
- ปรับภาพเคลื่อนไหวโดยเพิ่มเวลาให้กับการเปลี่ยนภายในแผงภาพเคลื่อนไหว: เลือกลูกศรระหว่างอาร์ตบอร์ด จากนั้นลากจุดปลายบนเส้นสีน้ำเงินไปที่ประมาณ 1 วินาที
การสร้างเอฟเฟกต์พารัลแลกซ์ - เกี่ยวกับเพจ
- เลือกปุ่มลูกศรชี้ลง (ตรวจสอบให้แน่ใจว่าคุณได้เลือกทั้งกลุ่มแล้ว) และใช้ทริกเกอร์ "แตะ" โดยลากลูกศรจากที่ใดก็ได้ในอาร์ตบอร์ด
- เลือกหน้าจอทั้งหมด (จากกลุ่มหลัก) และย้ายทุกอย่างขึ้น 640px ขั้นตอนนี้จะแสดงหน้าจอเกี่ยวกับในมุมมอง
- กลับไปที่อาร์ตบอร์ดก่อนหน้า และย้ายรูปร่างบนหน้าจอ "เกี่ยวกับ" ลงด้านล่าง สิ่งนี้จะสร้างเอฟเฟกต์การเลื่อนแบบอะซิงโครนัสที่เรียกว่าพารัลแลกซ์
การสร้างเอฟเฟกต์พารัลแลกซ์ - หน้าสี
- ใช้ทริกเกอร์ "แตะ" กับปุ่มลูกศรลง (ตรวจสอบให้แน่ใจว่าคุณเลือกทั้งกลุ่ม) และนั่นจะสร้างอาร์ตบอร์ดใหม่
- บนอาร์ตบอร์ดใหม่ ให้เลือกหน้าจอทั้งหมดแล้วเลื่อนขึ้น 640px
- บนอาร์ตบอร์ดก่อนหน้า ให้เลื่อนสีและข้อความลงด้านล่าง โปรดทราบว่ายิ่งคุณย้ายวัตถุไปด้านล่าง ยิ่งใช้เวลานานในการสำรอง ดังนั้นโปรดใช้ตำแหน่งอื่นเพื่อสร้างเอฟเฟกต์แบบไดนามิกมากขึ้น
- สุดท้าย โดยขยายแอนิเมชั่น และใช้ “ease both” บนไทม์ไลน์สีน้ำเงินทั้งหมดภายในแผงแอนิเมชั่น
เลื่อนหน้าจากด้านข้าง - หน้าเลือกสี
- ใช้ทริกเกอร์ "แตะ" กับปุ่ม "โหลดเพิ่มเติม" บนหน้าจอ "สี"
- ในอาร์ตบอร์ดใหม่ ให้ย้ายเนื้อหา "สี" และ "การเลือก" ไปทางซ้าย 360px (ความกว้างของอาร์ตบอร์ด)
- กลับไปที่อาร์ตบอร์ดก่อนหน้าและย้ายเนื้อหาบนหน้าจอไปในทิศทางตรงกันข้าม - ขวา
- โปรดทราบว่าคุณยังสามารถทำให้ความทึบของหน้าจอเลื่อนเข้ามาจากศูนย์เปอร์เซ็นต์ถึง 100 เปอร์เซ็นต์ได้อีกด้วย
- เล่นกับระยะเวลาของภาพเคลื่อนไหวและเอฟเฟกต์การค่อยๆ เปลี่ยนเพื่อปรับแต่งเอฟเฟกต์การเปลี่ยน
เคลื่อนไหวไอคอนเมนู
- โปรดทราบว่าเลเยอร์และรูปร่างใดๆ ที่มีเอฟเฟกต์ (เช่น เงา) จากไฟล์ต้นฉบับของ Sketch จะถูกนำเข้ามาที่ Principle เป็นรูปภาพ หากคุณต้องการแก้ไขรูปร่างในหลักการ อย่าพยายามเพิ่มเอฟเฟกต์พิเศษใดๆ จนกว่าจะนำเข้าเสร็จ
- ดังที่กล่าวไปแล้ว โดยใช้ไอคอนที่มีอยู่เป็นแนวทาง วาดสี่เหลี่ยมบาง ๆ สามสี่เหลี่ยม และจัดกลุ่มเพื่อสร้างไอคอนเมนูแฮมเบอร์เกอร์ ตอนนี้คุณสามารถลบหรือซ่อนไอคอนเมนูก่อนหน้าได้
- เลือกไอคอนที่สร้างขึ้นใหม่ และใช้ทริกเกอร์ "แตะ" กับไอคอนดังกล่าว
- ในอาร์ตบอร์ดใหม่ ให้หมุนสี่เหลี่ยมผืนผ้าด้านบนและด้านล่างบนไอคอนเมนู ตรวจสอบให้แน่ใจว่าอยู่กึ่งกลาง และให้ความทึบศูนย์เปอร์เซ็นต์แก่อันตรงกลาง
- หากต้องการดูแอนิเมชั่นที่คุณเพิ่งสร้างขึ้น ให้ลิงก์กลับไอคอนเมนูที่เปลี่ยนแปลงไปยังอาร์ตบอร์ดแสดงตัวอย่างด้วยทริกเกอร์ "แตะ" แล้วทดสอบ
การสร้างเอฟเฟกต์แถบเลื่อนเมนู
- บนอาร์ตบอร์ดปลายทาง ให้เลื่อนหน้าจอไปทางขวาจนกว่าลิงก์เมนูจะจัดชิดซ้ายของไอคอนเมนูปิด
- เลือกทุกอย่างในโฟลเดอร์ "สี" ยกเว้นเนื้อหาเมนูและพื้นหลังสีเทาอ่อน และลดความทึบลงเหลือ 25 เปอร์เซ็นต์ แอนิเมชั่นจะค่อยๆ ลบเนื้อหาในหน้าเพื่อโฟกัสที่เมนู
- ขยายระยะเวลาของแอนิเมชั่น และไปที่อาร์ตบอร์ดก่อนหน้าเพื่อย้ายเนื้อหาเมนูเล็กน้อยเพื่อสร้างเอฟเฟกต์ที่ราบรื่น
ย้ายไปที่หน้าจอติดต่อ
- ในเมนูเปิด ใช้ทริกเกอร์ "แตะ" บนปุ่ม "ติดต่อเรา"
- บนอาร์ตบอร์ดที่สร้างขึ้นใหม่ ให้ย้ายหน้าจอทั้งหมดขึ้น 640 พิกเซล
- จากนั้นกลับไปที่อาร์ตบอร์ดแสดงตัวอย่าง และย้ายองค์ประกอบจากหน้า "แบบฟอร์ม" ลง
- ย้ายองค์ประกอบที่ค่า Y ต่างๆ เพื่อสร้างเอฟเฟกต์พารัลแลกซ์
- สุดท้าย เลือกลูกศรระหว่างอาร์ตบอร์ด ขยายความยาวของแอนิเมชั่น และใช้ "Ease Both" กับไทม์ไลน์สีน้ำเงิน
ปิดท้ายด้วยเพจขอบคุณ
- ใช้ทริกเกอร์ "แตะ" บนปุ่ม "ส่งข้อความ"
- บนอาร์ตบอร์ดใหม่ ให้ย้ายหน้าจอทั้งหมดขึ้น 640 พิกเซล
- จากนั้นกลับไปที่อาร์ตบอร์ดแสดงตัวอย่างและย้ายองค์ประกอบจากหน้า "การยืนยัน" ลง
- เล่นกับสเกลและการหมุนสำหรับไอคอนสีเพื่อสร้างเอฟเฟกต์ไดนามิกมากขึ้น
- ตรวจสอบให้แน่ใจว่าคุณเพิ่มความยาวของแอนิเมชั่นเพื่อให้เข้าใจถึงเอฟเฟกต์การเปลี่ยนภาพได้ดีขึ้น
ความเรียบง่ายของการเพิ่มแอนิเมชั่นด้วยหลักการ
หลักการเป็นเครื่องมือที่ยอดเยี่ยมในการทำให้แนวคิดการโต้ตอบ UI ของคุณเป็นจริง
อินเทอร์เฟซเป็นมิตรกับ Mac และสร้างขึ้นเพื่อทำงานร่วมกับไฟล์ Sketch ได้อย่างราบรื่น
หลักการทำให้แอนิเมชั่นและเอฟเฟกต์การเปลี่ยนภาพส่วนใหญ่เป็นแบบอัตโนมัติสำหรับคุณ สิ่งที่คุณต้องทำคือใช้ทริกเกอร์กับรูปร่างบนอาร์ตบอร์ดเดียว และเปลี่ยนคุณสมบัติใดๆ สำหรับองค์ประกอบที่คุณต้องการทำให้เคลื่อนไหวบนอาร์ตบอร์ดสุดท้าย
กรุณาทิ้งคำถามไว้ในความคิดเห็นด้านล่าง ฉันยินดีที่จะตอบพวกเขา