นำภาพเคลื่อนไหวขนาดเล็กและการโต้ตอบ UI เพื่อชีวิตผ่านการทำงานร่วมกันของนักพัฒนา - นักออกแบบ

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

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

เมื่อฉันออกแบบฉันคิดถึงปัจจัยที่จะให้ประสบการณ์การเปลี่ยนผ่านและการเล่าเรื่องที่ยอดเยี่ยมแก่ผู้ใช้

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

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

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

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

Micro-Interactions คืออะไรและทำไมเราควรใส่ใจพวกเขา

การโต้ตอบขนาดเล็กหรือภาพเคลื่อนไหว UI คืออะไร ผู้คนมักจะอ้างถึงพวกเขาว่าเป็นภาพเคลื่อนไหวที่สวย, กราฟิกเคลื่อนไหวหรือการออกแบบภาพเคลื่อนไหว อย่างไรก็ตามพวกเขามีมากกว่านั้น

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

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

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

แม้ว่า "การกระทำ" เหล่านี้จะมีรูปแบบที่แตกต่างกันหลายตัวอย่างทั่วไป ได้แก่ :

  • เมื่อเรา“ ย้าย” รายการไปยังตะกร้าสินค้าเสมือน
  • เมื่อเราเลือกระหว่างสองตัวเลือกในปุ่มสลับ CTA - like
  • เมื่อเรา“ ดึงลง” เพื่อรีเฟรชฟีดข่าวและดูการอัปเดตล่าสุด
  • เมื่อเรา“ เลื่อนขึ้น & ลง” ในฟีดหรือหน้ายาว

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

หลักการของการปฏิสัมพันธ์ขนาดเล็ก

มีสามหลักการที่ฉันพิจารณาอยู่เสมอเมื่อออกแบบการโต้ตอบขนาดเล็ก

  1. ความต่อเนื่อง (และความละเอียดอ่อน)

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

2. ความสามารถในการคาดการณ์

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

3. Transformability

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

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

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

- นักพัฒนาและนักออกแบบสามารถทำงานร่วมกันเพื่อนำการโต้ตอบขนาดเล็กมาสู่ชีวิตได้อย่างไร

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

ฉันรู้ว่ามันสื่อไปถึงการสื่อสาร - มีบางสิ่งที่หายไปในการแปลเมื่อฉันอธิบายแนวคิดการออกแบบของฉันกับผู้พัฒนา คุณอาจเคยได้ยินคำพูดนี้จากขงจื้อมาก่อน“ บอกฉันแล้วฉันจะลืม แสดงให้ฉันและฉันอาจจำ มีส่วนร่วมกับฉันและฉันจะเข้าใจ” และผ่านการมีส่วนร่วมที่เราในฐานะทีมนักออกแบบและนักพัฒนาสร้างประสบการณ์ที่ยอดเยี่ยม

ก่อนอื่นเรามาดูรายละเอียดกระบวนการออกแบบ ...

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

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

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

เมื่อสิ่งนี้เกิดขึ้นปัญหาน่าจะเกิดขึ้นในการนำเสนอหรือการพัฒนา ปัญหาเหล่านี้มักจะอยู่ในหนึ่งในสามประเภท:

  1. แนวคิดเรื่องภาพเคลื่อนไหวไม่ได้สื่อสารอย่างชัดเจนเพียงพอ

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

2. นักออกแบบไม่ทราบว่าภาพเคลื่อนไหวทำงานได้ดีหรือไม่จนกว่าพวกเขาจะตรวจสอบและทดสอบต้นแบบของนักพัฒนาซอฟต์แวร์

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

3. ผู้ออกแบบและนักพัฒนาไม่ได้อยู่ในหน้าเดียวกัน

เมื่อนักออกแบบสร้างภาพเคลื่อนไหว UI หรือการโต้ตอบขนาดเล็กพวกเขาพยายามที่จะรวมรายละเอียดการออกแบบที่ซับซ้อนเช่น eases ที่กำหนดเอง, สคริปต์, การแสดงออกและผลกระทบอื่น ๆ เมื่อนำเสนอแนวคิดเหล่านี้กับนักพัฒนาซอฟต์แวร์พวกเขาอาจได้ยินว่า“ มันเป็นไปไม่ได้ที่จะทำสิ่งนี้ในไทม์ไลน์ของเรา” หรือ“ เราไม่สามารถทำให้มันเหมือนเดิมได้ แต่เราจะลอง” ในจุดนี้พวกเขาอาจพยายามแฮช ดูรายละเอียดต่าง ๆ และปัญหาทางเทคนิคกับนักพัฒนา อย่างไรก็ตามการอภิปรายเหล่านี้อาจทำให้ไร้ผลหากผู้ออกแบบไม่มีความรู้ในการทำงานของเครื่องมือหรือนักพัฒนาภาษาใช้ ปัจจัยเหล่านี้ควรนำมาพิจารณาเมื่อกำหนดและพูดคุยแนวคิดเพื่อให้การโต้ตอบขนาดเล็กเข้ากันได้กับการตั้งค่าเริ่มต้นของนักพัฒนาเพิ่มโอกาสที่ผลิตภัณฑ์ขั้นสุดท้ายจะเป็นไปตามมาตรฐานของนักออกแบบ (และคนอื่น ๆ )

อะไรคือแนวทางแก้ไขปัญหาเหล่านี้บ้าง?

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

ตอนนี้เราไม่ได้โต้เถียงกันอีกต่อไปว่าจะรวมการโต้ตอบขนาดเล็กหรือไม่เรากำลังค้นหาวิธีที่จะทำให้ดียิ่งขึ้น!

แนวความคิดเกี่ยวกับโครงกระดูกปฏิสัมพันธ์ & คู่มือการปฏิสัมพันธ์

“ แนวความคิดเกี่ยวกับโครงกระดูกและคู่มือปฏิสัมพันธ์ไม่มีที่ว่างสำหรับการตีความซึ่งทำให้ฉันเริ่มทำงานได้ทันทีและมั่นใจในการจับคู่วิสัยทัศน์ของนักออกแบบ” - Jesse M Majcher / หัวหน้าวิศวกร IOS

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

ถ้าเราใช้กระบวนการที่คล้ายกันสำหรับแอนิเมชั่นกระบวนการของเราอาจเร็วขึ้นและดีขึ้นมาก

  1. แนวคิดปฏิสัมพันธ์ระหว่างโครงกระดูก (การศึกษาการเคลื่อนไหว)

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

2. คู่มือการทำงานร่วมกัน

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

3. ทักษะการสร้างต้นแบบสำหรับนักออกแบบ

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

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

หากคุณคุ้นเคยกับการเข้ารหัส:

  • มือถือ: Xcode สตูดิโอ Android
  • มือถือหรือเว็บ: Framer
  • เว็บ: ภาพเคลื่อนไหว CSS

หากคุณต้องการออกแบบการโต้ตอบระหว่างการกดเหมือนหน้าจอและโมดูล:

  • Invision และ Marbel

หากคุณต้องการสร้างการโต้ตอบที่มีรายละเอียดมากขึ้น:

  • Principle, Adobe CC, origami Studio และ Pixate

หากคุณต้องการสร้างการโต้ตอบ + ภาพเคลื่อนไหวโดยละเอียด:

  • After Effects

ขณะนี้ฉันเป็นแฟนของการใช้ After Effect สำหรับการสร้างต้นแบบของฉัน แม้ว่าจะไม่ใช่การโต้ตอบ (เช่นคลิกได้) แต่เป็นวิธีที่สมบูรณ์แบบในการนำเสนอแนวคิดแอนิเมชั่น นอกจากนี้ยังไม่มีข้อ จำกัด ของเอฟเฟกต์และคุณสามารถควบคุมการเคลื่อนไหวของรายละเอียดได้ เป็นไปได้ที่จะใช้เพื่อสร้างปฏิสัมพันธ์ในพื้นที่ 3 มิติเช่น AR และ VR

ปฏิสัมพันธ์ของทีมที่น่ายินดีทำให้ผลิตภัณฑ์ที่น่ายินดี

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

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

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ API, โอเพ่นซอร์ส, กิจกรรมชุมชนและวัฒนธรรมนักพัฒนาที่ Capital One แวะไปที่ DevExchange พอร์ทัลนักพัฒนาแบบครบวงจรของเรา: developer.capitalone.com