Airbnb fun design
Design

กระบวนท่าพริ้วไหวมัดใจ User – Lottie เครื่องมือดีๆ ที่ UI Designer ควรรู้

เมื่อก่อน การสร้าง Animation ลงใน iOS, Android และ React Native เป็นอะไรที่ยุ่งยากและกินเวลา ไหนจะต้องมาจัดการ Image File ที่เยอะและใหญ่ แล้วกว่า Developer จะปั้นงานของ Designer ให้ออกมาเป็นรูปเป็นร่างได้นั้น ใช้เวลาเป็นอย่างมาก

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

รู้จักกับ Lottie

จุดเริ่มต้นของ Lottie เกิดจากการที่ Design Lead ของ Airbnb พยายามทำ Prototype ผ่าน Adobe After Effect แล้วพบว่า Animation และ Transition ต่างๆ ที่ทีมของเขาออกแบบมา ไม่ได้ถูกรวมเข้าไปในแอปของ Airbnb เนื่องจากทีมพัฒนาทำไม่ทัน เขาจึงพยายามหาวิธีที่จะลดเวลาในการนำ Animation จาก After Effect ไปใส่ในแอปพลิเคชันบนมือถือ

เมื่อต้นปีที่ผ่านมา Airbnb ได้เปิดตัวเจ้า Lottie ซึ่งเป็น Library ที่ช่วยให้ Designer สามารถสร้าง Motion Graphic บน After Effect แล้วส่งต่องานเป็นไฟล์ JSON ให้กับทีมพัฒนาได้เลย โดยสามารถนำไปใช้ได้กับแอปพลิเคชันทั้งบน iOS, Android และ React Native

Parts and Pieces

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

Tcaster loading icon

credit : TCASter by Skooldio

ในตัวอย่าง เราสามารถจำแนก Object ออกมาได้ 3 Layers โดยแต่ละ Layer มีการแสดงออกมาในช่วงเวลาที่ Overlap กัน ช่วยสร้างน้ำหนัก และมิติให้กับ Icon

Tcaster loading icon variant

On and Off

ในบางครั้ง Animation ทำหน้าที่เป็น Icon ที่รอการถูก Trigger เช่น ปุ่ม Play-Pause เปิดเสียง-ปิดเสียง เป็นต้น การทำ Transition เราจึงต้องให้ความสำคัญกับ State ก่อนและหลังจากที่ปุ่มถูกกด หาก Animation นั้นขยับเยอะเกินไป อาจจะทำให้ใช้งานยาก ซึ่งใน Material Motion แนะนำไว้ว่าไม่ควรเกิน 400 ms (0.4 วินาที)

Volumn toggle

credit: salih

ในตัวอย่าง เราจะเห็นว่าช่วงก่อน Trigger จะมีเพียง 3 Layers คือ ลำโพง แล้วก็ Splash เสียงอีกสองวง แต่เมื่อหลัง Trigger แถบเสียงจะถูกซ่อนไปไว้ข้างหลัง แล้ว Layer ที่เป็นขีดคาดจะโผล่ออกมา ซึ่งโดยรวมแล้ว Icon นี้ใช้เพียง 4 Layers เท่านั้นเอง

Volumn toggle components

Characteristics

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

Edit icon animated

credit: salih

จากในตัวอย่าง ช่วง Ease in เราจะเห็นการเริ่มจากดินสอ(Object 1)จากนั้นดินสอก็เริ่มขีดเส้น(Object 2) แล้วเส้นกลายเป็นกระดาษ(Object 3) ในช่วง Ease out ดินสอก็พุ่งเฉียงแนวทะแยง (Object 1) ต่อมากระดาษก็หดตามลง (Object 2) แล้วก็มี ประกาย Splash ปรากฎออกมา(Object 3) แค่การเล่าเรื่องเล็กๆ น้อยๆ ผ่าน 3 Objects ก็สามารถสร้างเอกลักษณ์ให้ Icon ได้แล้ว

edit icon components

Bodymovin ตัวเชื่อม Design สู่ Code

bodymovin

การใช้งาน Bodymovin (credit: http://airbnb.io/lottie/)

Bodymovin คือ Animation Exporter ที่สามารถ Vector Layer ออกมาเป็นไฟล์ JSON ได้ สำหรับ Designer ที่คุ้นเคยกับ After Effect สามารถทำได้โดยติดตั้ง Extension ชื่อ Bodymovin

bodymovin export JSON

การ Export ไฟล์ JSON (credit: http://airbnb.io/lottie/)

แล้วก็ Render ออกมาเป็นไฟล์ JSON ได้เลย

add JSON to Lottie

อัปโหลด JSON เข้า Lottiefiles (credit: http://airbnb.io/lottie/)

เมื่อได้ออกมาเป็นไฟล์ JSON แล้ว ให้อัปโหลดไฟล์เข้าไปใน Lottiefiles.com

แล้วดาวโหลดแอปชื่อ Lottie Preview แล้วแสกน QR Code ที่อยู่ในเว็บไซต์ จากนั้นก็ Preview ผลงานของตัวเองบนมือถือได้เลย เพียงเท่านี้ก็สามารถตรวจดูผลงาน Animation ของคุณก่อนที่จะส่งต่อให้ Developer ไปพัฒนาต่อ

preview Lottie in app

Preview ใน แอป (credit: http://airbnb.io/lottie/)

Lottie ยังมี Communities ที่สามารถเข้าไปดูตัวอย่างงานหรือเอาผลงานของคุณขึ้นไปแสดงได้อีกด้วย ที่ผมแนะนำหลักๆ ก็จะมี Lottiesfiles9 SquaresMotion Corpse, และ Animography

ทิ้งท้ายฝาก Designer

ไฟล์ JSON ที่ส่งต่อให้ Developer นั้น ยังคงต้องทำการ Implement อีกหลายขั้นตอนให้ตัวงานเข้าไปแสดงได้ในแอป Designer ทางที่ดี ควรคลานเข่า เข้าไปปรึกษากับ ​Developer ก่อนว่า Animation ที่จะแสดงนั้น จะแสดงใน State ไหนบ้าง เริ่มแสดงอย่างไร จบอย่างไรแล้วใช้ระยะเวลาเท่าไหร่

…เพราะบางครั้งความสำคัญของภาพรวมของโปรเจค อาจทำให้ต้องลดพื้นที่ของความสร้างสรรค์ลงบ้างเพื่อให้สำเร็จตามเป้าหมาย…

อ่านบทความก่อนหน้า

อ้างอิง

ธนนท์ วงษ์ประยูร
ChulaArch81(ID), YWC#14, Designer at Skooldio

    You may also like

    Business

    ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

    หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
    Design

    รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

    ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...

    More in:Design

    Design

    Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

    Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
    UX Writing คืออะไร Design

    ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

    UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
    Web Design Font Pairing Design

    เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

    หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
    ui-design-Cover Design

    ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

    สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...

    Comments are closed.