20 Freebies ที่ดีที่สุดสำหรับ Aspiration UX Motion Designers

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

นักออกแบบ UX ส่วนใหญ่เรียนรู้การใช้ซอฟต์แวร์เพื่อสร้างภาพเคลื่อนไหวเหล่านี้ ตัวเลือกที่ได้รับความนิยมมากที่สุดสองตัวเลือกคือ Adobe After Effects และหลักการ (OS X เท่านั้น) คุณสามารถ การออกแบบอินเตอร์เฟส mockups ในโปรแกรมเช่น Photoshop และย้าย UIs ไปยังโปรแกรมเหล่านี้ สำหรับภาพเคลื่อนไหว.

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

ด้านล่างคุณจะได้พบกับ freebies ที่ดีที่สุดสำหรับผู้ใช้ Principle และ AE การออกแบบ UX Motion. พวกเขาจะช่วยให้คุณเข้าใจอย่างแน่นอน ภาพเคลื่อนไหว UX ทำงานอย่างไร, และวิธีการสร้างของคุณเอง.

1. ลบการดำเนินการ

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

คุณสามารถดาวน์โหลดไฟล์ AEP ฟรีสำหรับ After Effects แล้วลองด้วยตัวคุณเอง UI ดังต่อไปนี้ โครงร่างโครงร่างพื้นฐานมาก ด้วยอินพุตของผู้ใช้ที่แสดงเป็นจุดสีน้ำเงิน พฤติกรรมผู้ใช้ประเภทนี้ดีที่สุดที่จะแสดง ผ่านภาพเคลื่อนไหว เพราะมันทำให้นักพัฒนามีโอกาสได้เห็น อินเตอร์เฟสควรทำงานอย่างไร.

2. Widget Swipe

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

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

3. UI ของ Dualshock

นี่คือเอฟเฟกต์ภาพเคลื่อนไหว UX แบบไดนามิกที่เหลือเชื่ออย่างไม่น่าเชื่อที่แบ่งปันโดย Alexander Boychenko การจำลองนี้ขึ้นอยู่กับ PlayStation Controller สำหรับ UI ของแอพมือถือ มันมีไฟล์ Sketch และ Principle ที่คุณสามารถดาวน์โหลดได้ฟรี.

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

4. ภาพเคลื่อนไหวเมนูแฮมเบอร์เกอร์

ไอคอนแฮมเบอร์เกอร์ยังคงเป็นความโกรธทั้งหมดในอินเทอร์เฟซมือถือ ไอคอนเมนูนี้ freebie สาธิตวิธีการ ทำให้ไอคอนสามแถบเคลื่อนไหวเป็นไอคอน "X".

มันคือ นิเมชั่นซ้ำ, ดังนั้น "X" จึงเคลื่อนไหวกลับเป็นไอคอนเมนูแฮมเบอร์เกอร์ นี่คือ freebie ที่ดีในการเรียนรู้เกี่ยวกับ การจัดการเวกเตอร์สำหรับองค์ประกอบ UI.

5. Snapster

การจำลองฟรีนี้มีไว้สำหรับแอปมือถือที่ชื่อว่า Snapster มันมุ่งเน้น บนหน้าจอต้อนรับ / ออนบอร์ด ผู้ใช้สามารถดูตัวอย่างของแอพและเรียนรู้วิธีการใช้งานจริง.

มันเป็นไฟล์ PRD และน่าเสียดายที่ไฟล์นี้ไม่เล่นกับ After Effects ดังนั้นผู้ใช้หลักการเท่านั้นที่จะได้รับประโยชน์จากไฟล์นี้.

6. โหลดเหยื่อ

นี่คือ freebie สำหรับ AEP After Effects เหยื่อการโหลดมือถือ. ประเภทภาพเคลื่อนไหว GIF เหล่านี้ได้รับความนิยมอย่างมากเมื่อ Ajax เข้ามามีส่วนร่วมในการพัฒนาเว็บไซต์.

ตอนนี้รถตักมือถือเป็นสิบเซนต์และพวกเขาก็สามารถทำได้ ปรับแต่งอย่างมาก เพื่อให้พอดีกับอินเทอร์เฟซบางอย่าง freebie นี้มาพร้อมกับไฟล์ AEP และไฟล์ Sketch เพื่อแก้ไขเวกเตอร์หากคุณต้องการแก้ไข.

7. เล่น / หยุดชั่วคราว

ผลการเปลี่ยนแปลง มักจะดูเหมือนง่ายมาก แต่จริง ๆ แล้วต้องใช้จำนวนงานที่ดี ภาพเคลื่อนไหวเล่น / หยุดชั่วคราวนี้สร้างโดย Alex Pronsky เป็นตัวอย่างที่ยอดเยี่ยม.

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

8. iPhone Mockup

ในขณะที่ freebie นี้ไม่ได้มีภาพเคลื่อนไหวโดยตรง แต่ก็ควรใช้ สำหรับงานผลิตบนแอพพลิเคชั่น iPhone. เป็นไฟล์ iPhone 5S AEP ฟรีสำหรับใช้ใน After Effects เป็นเทมเพลต iPhone.

เพียงนำเข้า mockup ของอินเทอร์เฟซของคุณและสร้างภาพเคลื่อนไหวใน After Effects จากนั้นคุณสามารถเสียบเข้ากับ iPhone จำลองนี้เพื่อแชร์กับทีมของคุณ.

9. แม่แบบ iPhone

นี่คืออีกหนึ่ง เทมเพลต After Effects แบบกำหนดเอง กับ การออกแบบ iPhone ที่ทันสมัยมากขึ้น. freebie สามารถใช้ได้จากหน้านี้ที่ UX in Motion.

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

10. ภาพเคลื่อนไหวขนาดเล็ก

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

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

11. แอพ Wallet

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

freebie นี้ได้รับการออกแบบโดย Sergey Bykov เป็นโครงการเล็ก ๆ น้อย ๆ ที่สนุกสนาน แต่มันอาจเป็นเรื่องเกี่ยวกับการศึกษาถ้าคุณแยกมันออกจากกันและทำงานกับแอนิเมชั่นทีละขั้นตอน.

12. สวิตช์ iOS

ด้วยแอปเปิ้ล iOS 7 โลกจะได้รับสวิตช์ที่ออกแบบใหม่สำหรับป้ายเปิด / ปิด สิ่งนี้นำไปสู่เอฟเฟ็กต์ต่าง ๆ มากมายรวมถึงอนิเมชั่นฟรีที่ เลียนแบบสวิตช์เปิด / ปิดแบบดั้งเดิม.

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

13. แอป Ritter

นี่เป็นอีก freebie ยอดเยี่ยมที่ออกโดย Sergey Bykov สำหรับสิ่งที่เขาเรียกว่า Ritter App ซึ่งรวมถึงไฟล์ Sketch ฟรีสำหรับส่วนต่อประสานเวกเตอร์พร้อมด้วยไฟล์ PRD ฟรีสำหรับภาพเคลื่อนไหว Principle.

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

14. เชิญเพื่อน ๆ

เราทุกคนต่างรู้และชื่นชอบเมนูเครื่องหมายบวกของ Google ดี Jardson Almeida สร้างเมนูเชิญเพื่อนตามแนวคิดการออกแบบวัสดุที่เรียบง่าย.

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

15. รูดบัตร

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

ฉันคิดว่านี่เป็น freebie ที่สมบูรณ์แบบสำหรับผู้เริ่มต้นที่เพิ่งเข้าสู่หลักการ มันไม่ซับซ้อนจนคุณรู้สึกหลงทาง แต่มันก็ไม่ง่ายเลยที่คุณจะรู้สึกว่าไร้สาระ.

16. แชทบนแผนที่

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

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

17. การโหลดแอป

แอพมือถือมักใช้ หน้าจอโหลด เพื่อบอกผู้เยี่ยมชมว่ามีบางอย่างเกิดขึ้นในแบ็กเอนด์ หนึ่งในของสมนาคุณที่ชื่นชอบในชุดนี้คือแอนิเมชันที่สร้างโดย Roman Wagner.

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

18. บัตรขึ้นเครื่องบิน

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

สิ่งนี้สร้างขึ้นโดย Austin Baird และเผยแพร่ฟรีเพื่อใช้กับโครงการ UI / UX ใด ๆ.

19. การสาธิตหลักการ

เมื่อคุณเจาะลึกลงไปในหลักการคุณจะได้เรียนรู้เทคนิคเวิร์กโฟลว์ขั้นสูงมากมาย หนึ่งในสิ่งที่ดีที่สุดที่จะไปให้ได้ฟรีคือสิ่งที่สร้างขึ้นสำหรับทีมสร้างสรรค์ Yalantis.

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

20. เมนูแบบเลื่อนลง

เมนูแบบเลื่อนลงมักใช้ภาพเคลื่อนไหวที่บ้าคลั่งเพื่อดึงดูดความสนใจของเรา ฟรีเอฟเฟกต์ Afterbie นี้ใช้ ภาพเคลื่อนไหวแบบเลื่อนลงบันได บนเมนูสำหรับแต่ละองค์ประกอบเพื่อทำให้มันหล่นเหมือนบันได.

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

คำพูดสุดท้าย

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