เครื่องมือและบทช่วยสอน

วิธีสร้างแอนิเมชั่นการโหลดแบบกำหนดเองเพื่อลดอัตราตีกลับ

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

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

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

ในบทแนะนำนี้เราจะใช้ Sketch เพื่อสร้างรูปร่างและหลักการพื้นฐานเพื่อสร้างภาพเคลื่อนไหวการโหลดแบบกำหนดเองอย่างรวดเร็ว (แอปทั้งสองนี้มีไว้สำหรับ Mac) คุณจะได้เรียนรู้วิธีสร้างภาพเคลื่อนไหวการโหลดที่มีสีสันซึ่งใช้โดย Trello, Flickr, Slack และอื่น ๆ

ไปดูกันเลย

Slack กำลังโหลดภาพเคลื่อนไหว

ใน Sketch ให้ติดตามสี่เหลี่ยมที่โค้งมนสี่ด้านโดยมีด้าน 50px หรือรัศมี 100px แต่ละด้าน ควรมีลักษณะเป็นวงกลมที่สมบูรณ์แบบ แต่เราใช้สี่เหลี่ยมที่มีมุมโค้งมนเพื่อสร้างเอฟเฟกต์การยืดเส้นในภาพเคลื่อนไหว

วางรูปทรงทั้งสี่ในลักษณะเดียวกับการสร้างสี่เหลี่ยมจัตุรัสในจินตนาการโดยมีพื้นที่ 150px ระหว่างแต่ละด้าน ใช้สี่สีที่แตกต่างกัน (# 35BA90 เขียว, # 69CADD ฟ้า, # EBA900 เหลืองและ # E20661 สีชมพู)

นำเข้ารูปร่างไปยัง Principle จัดกลุ่มและคลิก 'สร้างส่วนประกอบ' เพื่อซ้อนกลุ่ม

เข้าไปในกลุ่มที่ซ้อนกันแล้วหมุนอาร์ตบอร์ด 15 องศา จากนั้นเลือกวงกลมแต่ละวงแล้วหมุนกลับสู่ตำแหน่งเดิม (ถอยหลัง 15 องศา) สิ่งนี้สร้างเอฟเฟกต์การยืดเป็นเส้นตรง

ใช้ทริกเกอร์“ อัตโนมัติ” กับอาร์ตบอร์ดจากนั้นยืดสี่เหลี่ยมผืนผ้าโค้งมนแต่ละด้านไปทางด้านตรงข้ามของอาร์ตบอร์ดให้มีความยาว 295px ให้ความทึบ 75% กับแต่ละรูปทรงบนอาร์ตบอร์ดทั้งสอง

ใช้ทริกเกอร์“ อัตโนมัติ” อื่นกับอาร์ตบอร์ดที่สอง บนอาร์ตบอร์ดใหม่ให้ลดแต่ละบรรทัดให้เหลือความกว้าง 50px เดิม แต่อยู่ด้านตรงข้ามจากตำแหน่งเดิม

เชื่อมโยงอาร์ทบอร์ดสุดท้ายกับกระดานแรกด้วยทริกเกอร์“ อัตโนมัติ” คลิกปุ่ม 'กลับไปที่ระดับบนสุด' เพื่อดูตัวอย่างผลลัพธ์สุดท้าย

เคล็ดลับ: เมื่อคุณไปที่“ กลับไปที่ผู้ปกครอง” คุณสามารถหมุนกลุ่มหลักได้ -30 องศาเพื่อให้ดูเหมือน Slack มากขึ้น นอกจากนี้คุณสามารถเปลี่ยนจังหวะของภาพเคลื่อนไหวภายในแผง 'เคลื่อนไหว' และใช้เอฟเฟกต์ 'Ease both' เพื่อให้การเปลี่ยนภาพราบรื่น

Trello กำลังโหลดภาพเคลื่อนไหว

ใช้ Sketch ติดตามสี่เหลี่ยมสีน้ำเงิน 100px วาดสี่เหลี่ยมผืนผ้าสีขาวกว้าง 60px สูง 140px จัดแนวให้ชิดซ้ายบนของสี่เหลี่ยมก่อนหน้าโดยมีขอบด้านบนและด้านซ้าย 30px ทำซ้ำสี่เหลี่ยมผืนผ้าสีขาวนั้นจัดแนวให้ชิดขวาของสี่เหลี่ยมจัตุรัสโดยมีระยะขอบขวา 30px และลดความสูงเป็น 70px

นำเข้าอาร์ตบอร์ดเข้าสู่หลักการและใช้ทริกเกอร์“ อัตโนมัติ” เพื่อสร้างคีย์เฟรมใหม่ บนอาร์ตบอร์ดใหม่ให้กลับความสูงของสี่เหลี่ยมสีขาว (ทำให้สี่เหลี่ยมผืนผ้าด้านซ้ายสูง 70px และสี่เหลี่ยมผืนผ้าด้านขวา 140px) ใช้เอฟเฟกต์“ Ease-Both” ในแผง“ Animate” เพื่อให้การเปลี่ยนแปลงราบรื่น

วงกลมกลิ้ง

ติดตามวงกลมบน Sketch ใช้เส้นขอบ 10px ที่มีค่า“ Dash” และ“ Gap” และไม่ต้องเติม ใช้สี 'Angular Gradient' สำหรับเส้นขอบที่จะเน้นเอฟเฟกต์การหมุนที่คุณจะสร้างในภายหลัง

เปิดไฟล์ Principle ใหม่และใช้ปุ่ม“ นำเข้า” เพื่อถ่ายโอนวงกลมจาก Sketch ใช้ทริกเกอร์ 'อัตโนมัติ' สองตัวติดต่อกัน

ในการสร้างเอฟเฟกต์การหมุนให้เลือกวงกลมในอาร์ทบอร์ดตรงกลางและเปลี่ยนค่า 'มุม' เป็น 360 องศา จากนั้นเลือกวงกลมที่สามและตั้งชื่ออื่น (เช่น“ คัดลอก”) ในแผงด้านซ้าย สิ่งนี้จะปลอมการหมุนที่ไม่มีที่สิ้นสุด

สุดท้ายเชื่อมโยงอาร์ทบอร์ดที่สามกลับไปที่บอร์ดเริ่มต้นด้วยทริกเกอร์“ อัตโนมัติ” อีกอัน ใช้การเปลี่ยน 'เชิงเส้น' กับไทม์ไลน์ระหว่างอาร์ตบอร์ด 1 และ 2 ตรวจสอบภาพเคลื่อนไหวที่คุณเพิ่งสร้างในหน้าต่างแสดงตัวอย่าง

Flickr กำลังโหลดภาพเคลื่อนไหว

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

เปลี่ยนตำแหน่งของแวดวงและใช้ทริกเกอร์“ อัตโนมัติ” ใหม่เพื่อสร้างอาร์ตบอร์ดที่สาม ในอาร์ทบอร์ดใหม่นั้นให้สลับลำดับของเลเยอร์ของวงกลมที่แผงด้านซ้าย

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

ประเภทการโหลด

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

ใช้ทริกเกอร์ 'อัตโนมัติ' ห้าครั้งติดต่อกัน ให้ทริกเกอร์ที่ห้าจากวนรอบกระดานสุดท้ายกลับไปที่อาร์ตบอร์ดเริ่มต้น

วัสดุการออกแบบ ui . คืออะไร

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

กำลังโหลด กำลังโหลด .. กำลังโหลด ... กำลังโหลด .. กำลังโหลด.

ตอนนี้คุณสามารถดูตัวอย่างภาพเคลื่อนไหวที่คุณเพิ่งสร้างขึ้น

จุดที่เร้าใจ

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

ใช้ทริกเกอร์ 'อัตโนมัติ' สี่ครั้งติดต่อกัน

บนอาร์ตบอร์ดที่สองลดจุดที่สองเป็น 30px

สัญญาแปลงเงินเดือนประจำ

บนอาร์ตบอร์ดที่สามลดจุดที่สองเป็น 0px และจุดแรกลงเหลือ 30px

บนอาร์ตบอร์ดที่สี่ปรับขนาดจุดที่สองกลับเป็น 30px และลดจุดแรกลงเป็น 0px

บนอาร์ตบอร์ดที่ห้าปรับขนาดจุดแรกลงเป็น 30px และเชื่อมโยงอาร์ตบอร์ดกลับไปที่บอร์ดแรกด้วยทริกเกอร์ 'อัตโนมัติ'

จุดกลิ้ง

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

ใช้ทริกเกอร์“ อัตโนมัติ” บนอาร์ตบอร์ด

บนอาร์ตบอร์ดใหม่ให้หมุนกลุ่มจุด 360 องศา

เชื่อมโยงอาร์ทบอร์ดที่สองกลับไปที่อันแรกด้วยทริกเกอร์“ อัตโนมัติ”

วงกลมที่เร้าใจ

เริ่มต้นด้วยวงกลม 50px จัดกึ่งกลางภายในวงกลม 150px ที่มีขอบ 5px แต่ไม่มีการเติม

ใช้ทริกเกอร์“ อัตโนมัติ” สามครั้งติดต่อกัน

ในอาร์ตบอร์ดแรกให้ปรับขนาดวงกลมเส้นลงเป็น 50px และวงกลมด้านในลงเป็น 10px

ในอาร์ตบอร์ดที่สามให้ปรับขนาดวงกลมของเส้นเป็น 200px และให้ความทึบ 0% ปรับขนาดวงกลมภายในได้สูงสุด 150px และให้ความทึบ 50%

ในอาร์ทบอร์ดสุดท้ายปรับขนาดวงกลมด้านในเป็น 200px และให้ความทึบ 0% ปรับขนาดวงกลมเส้นลงเป็น 50px และให้ความทึบ 25%

ใช้ทริกเกอร์“ อัตโนมัติ” กับอาร์ตบอร์ดสุดท้าย ลดขนาดวงกลมด้านในเป็น 10px โดยมีความทึบ 50%

เชื่อมโยงอาร์ทบอร์ดสุดท้ายกับอาร์ตบอร์ดแรกด้วยทริกเกอร์“ อัตโนมัติ”

จุดกระโดด

จัดเรียงวงกลมที่สมบูรณ์แบบสามวงที่มีความสูง 50px โดยมีระยะห่างระหว่าง 50px

ใช้ทริกเกอร์ 'อัตโนมัติ' บนอาร์ตบอร์ดที่สองเลื่อนวงกลมแรกขึ้น 50px

ใช้ทริกเกอร์“ อัตโนมัติ” กับบอร์ดที่สอง ในอาร์ตบอร์ดที่สามให้เลือกวงกลมสองวงแรกแล้วเลื่อนขึ้น 50px วงกลมทั้งสามควรอยู่ในแนวทแยง

ใช้ทริกเกอร์“ อัตโนมัติ” กับบอร์ดที่สาม บนอาร์ตบอร์ดที่สี่เลื่อนวงกลมแรกลง 50px เลือกวงกลมสองวงสุดท้ายแล้วเลื่อนขึ้น 50px

ใช้ทริกเกอร์“ อัตโนมัติ” บนกระดานที่สี่ บนอาร์ตบอร์ดที่ห้าเลื่อนสองวงกลมแรกลง 50px เลือกวงกลมสุดท้ายแล้วเลื่อนขึ้น 50px

ใช้ทริกเกอร์“ อัตโนมัติ” บนกระดานที่ห้า ในอาร์ทบอร์ดที่หกให้เลื่อนสองวงกลมสุดท้ายลง 50px

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

Classic Loader

ติดตามวงกลมใน Sketch และกำหนดเส้นขอบสีเทา 20px โดยไม่ต้องเติม

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

ติดตามสี่เหลี่ยมจัตุรัสที่ทับซ้อนกันหนึ่งในสี่ของวงกลมสีน้ำเงิน ย้ายเลเยอร์สี่เหลี่ยมผืนผ้าด้านล่างเลเยอร์วงกลมแล้วใช้ 'Mask' กับเลเยอร์สี่เหลี่ยมผืนผ้า

ย้ายไปที่หลักการและนำเข้าภาพร่างโดยใช้ปุ่ม 'นำเข้า'

ใช้ทริกเกอร์“ อัตโนมัติ” กับอาร์ตบอร์ดแรกแล้วหมุนวงกลมสีน้ำเงิน 360 องศา

ใช้ทริกเกอร์“ อัตโนมัติ” ที่สองกับอาร์ตบอร์ดที่สอง เปลี่ยนชื่อเลเยอร์วงกลมที่สามที่สร้างขึ้นเป็น 'คัดลอก' และเชื่อมโยงกลับไปยังอาร์ตบอร์ดแรกด้วยทริกเกอร์ 'อัตโนมัติ'

สรุป

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

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

•••