portaldacalheta.pt
  • หลัก
  • การจัดการวิศวกรรม
  • บุคลากรและทีมงานของผลิตภัณฑ์
  • อื่น ๆ
  • นวัตกรรม
เครื่องมือและบทช่วยสอน

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



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

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



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



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



ไปดูกันเลย

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

ภาพเคลื่อนไหวการโหลดหย่อน

การสร้างภาพเคลื่อนไหวการโหลด Slack



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

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



การสร้างภาพเคลื่อนไหวการโหลด Slack

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



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

การสร้างภาพเคลื่อนไหวการโหลด Slack



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

การสร้างภาพเคลื่อนไหวการโหลด Slack



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

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

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


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

แอนิเมชั่นการโหลด Trello

การสร้างแอนิเมชั่นการโหลด Trello

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

การสร้างแอนิเมชั่นการโหลด Trello

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


วงกลมกลิ้ง

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

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

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

การโหลดภาพเคลื่อนไหวแบบวงกลมด้วย Sketch

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

การโหลดแอนิเมชั่นวงกลมกลิ้งด้วยหลักการ

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

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


สมัครสมาชิกบล็อกการออกแบบ ApeeScape และรับ eBook ของเรา

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

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

สร้าง Flickr Loading Animation

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

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

สร้างภาพเคลื่อนไหวการโหลด Flickr

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


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

กำลังโหลดแอนิเมชั่นประเภท

กำลังโหลดแอนิเมชั่นประเภท

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

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

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

กำลังโหลดแอนิเมชั่นประเภท

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

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

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


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

แอนิเมชั่นจุดที่เร้าใจ

สร้างแอนิเมชั่นจุดที่เร้าใจ

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

วิธีสร้างภาพเคลื่อนไหว Pulsating Dots

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

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

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

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

แอนิเมชั่นการโหลดจุดที่เร้าใจ

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

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


จุดกลิ้ง

ภาพเคลื่อนไหว Rolling Dots

สร้างแอนิเมชั่น Rolling Dots

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

แอนิเมชั่น Rolling Dots พร้อมหลักการ

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

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

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


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

แอนิเมชั่นวงกลมที่เร้าใจ

สร้างแอนิเมชั่น Pulsating Circle

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

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

แอนิเมชั่นวงกลมที่เร้าใจ

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

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

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

แอนิเมชั่นวงกลมที่เร้าใจ

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

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


จุดกระโดด

ตัวอย่างแอนิเมชั่นการโหลด Jumping Dots

สร้างแอนิเมชั่นการโหลด Jumping Dots

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

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

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

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

สร้างแอนิเมชั่นการโหลด Jumping Dots ด้วย Sketch

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

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

Jumping Dots กำลังโหลดแอนิเมชัน

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


Classic Loader

ตัวอย่างภาพเคลื่อนไหว Classic Loader

สร้างแอนิเมชั่น Classic Loader

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

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

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

ใช้แอนิเมชั่น Classic Loader

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

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

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


สรุป

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

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

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

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

คำแนะนำด้านเสียง: คู่มือฉบับย่อสำหรับการออกแบบเสียง UX

การออกแบบ Ux

คำแนะนำด้านเสียง: คู่มือฉบับย่อสำหรับการออกแบบเสียง UX
คู่มือฉบับสมบูรณ์สำหรับการทดสอบ React Hooks

คู่มือฉบับสมบูรณ์สำหรับการทดสอบ React Hooks

ส่วนหน้าของเว็บ

โพสต์ยอดนิยม
แหล่งข้อมูลสำหรับธุรกิจขนาดเล็กสำหรับ COVID-19: เงินกู้เงินช่วยเหลือและสินเชื่อ
แหล่งข้อมูลสำหรับธุรกิจขนาดเล็กสำหรับ COVID-19: เงินกู้เงินช่วยเหลือและสินเชื่อ
วิธีออกแบบประสบการณ์ที่ยอดเยี่ยมสำหรับอินเทอร์เน็ตในทุกสิ่ง
วิธีออกแบบประสบการณ์ที่ยอดเยี่ยมสำหรับอินเทอร์เน็ตในทุกสิ่ง
กลยุทธ์การสื่อสารที่มีประสิทธิภาพสำหรับนักออกแบบ
กลยุทธ์การสื่อสารที่มีประสิทธิภาพสำหรับนักออกแบบ
เรียนรู้ Markdown: เครื่องมือการเขียนสำหรับนักพัฒนาซอฟต์แวร์
เรียนรู้ Markdown: เครื่องมือการเขียนสำหรับนักพัฒนาซอฟต์แวร์
แนวโน้มต่อไปนี้: การแสดงความเคารพกับการลอกเลียนแบบการออกแบบ
แนวโน้มต่อไปนี้: การแสดงความเคารพกับการลอกเลียนแบบการออกแบบ
 
คู่มือสไตล์ Sass: บทช่วยสอน Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น
คู่มือสไตล์ Sass: บทช่วยสอน Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น
ทำลายกระบวนการคิดเชิงออกแบบ
ทำลายกระบวนการคิดเชิงออกแบบ
การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก
การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก
ทำคณิตศาสตร์: การปรับขนาดแอปพลิเคชันไมโครเซอร์วิสด้วย Orchestrators
ทำคณิตศาสตร์: การปรับขนาดแอปพลิเคชันไมโครเซอร์วิสด้วย Orchestrators
การปฏิวัติหุ่นยนต์เชิงพาณิชย์ที่กำลังจะเกิดขึ้น
การปฏิวัติหุ่นยนต์เชิงพาณิชย์ที่กำลังจะเกิดขึ้น
โพสต์ยอดนิยม
  • เครื่องมือพัฒนาเว็บแอพมือถือ
  • ข้อผิดพลาดของโหนด js ในการจัดการแนวปฏิบัติที่ดีที่สุด
  • การรับรอง aws ยากแค่ไหน
  • รายรับจากการขายเพลงดิจิทัลทั่วโลกสูงถึง 5 พันล้านดอลลาร์สหรัฐ
  • วิธีเตรียมตัวสำหรับการรับรอง aws
  • นักออกแบบและนักพัฒนาทำงานร่วมกัน
  • ฉันจะรู้ได้อย่างไรว่าฉันมีความทรงจำรั่วไหล
หมวดหมู่
  • การจัดการวิศวกรรม
  • บุคลากรและทีมงานของผลิตภัณฑ์
  • อื่น ๆ
  • นวัตกรรม
  • © 2022 | สงวนลิขสิทธิ์

    portaldacalheta.pt