flat-design
Design

นิ่งสงบ ไม่ได้สยบ User เสมอไป กระบวนท่าพริ้วไหวมัดใจ User

flat-design

credit : rikitanone

การใส่ animation หรือ motion ต่างๆ ผสมผสานกับ flat design ที่เรียบง่าย เป็นแนวทางการออกแบบ UI ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน เพื่อช่วยให้ User ไม่รู้สึกเบื่อกับการใช้แอปพลิเคชันแบบเดิมๆ

ในบทความนี้ เราจะมาดูกันว่า Animation เหล่านั้นมีกี่ประเภทและประกอบไปด้วยองค์ประกอบอะไรบ้าง

1. Hero Animations

splash-screen

Splash Screen (credit: cuberto)

Hero Animations ให้แปลตรงตัวเลยก็เหมือนกับ Animation หลัก ที่เป็นเสมือนตัวสร้างประสบการณ์ระหว่างแอปพลิเคชันกับ User เปรียบเสมือน Branding ของแอปเลยก็ว่าได้

flight-attendant

ลองคิดว่าคุณกำลังนั่งเครื่องบิน แล้วไม่มี Safety Demonstration Video ไม่มีคนมาอ่านหรือทำท่าอะไรให้ดู มีแต่แผ่นพับเสียบไว้ให้เราอ่านเราก็คงไม่ได้ให้ความสนใจอะไรกับความปลอดภัยมากนัก แต่ถ้ามองในมุมกลับกันการที่มีคนมาทำท่าสนุกๆ หรือมีวิดีโอสาธิตที่น่าตื่นเต้นก็จะทำให้ลูกค้าเกิดประสบการณ์ร่วมที่ดีตั้งแต่เครื่องยังไม่ออกบิน อีกทั้งยังสร้าง Brand Image ให้กับสายการบินได้อีกด้วย

การที่ User กำลังรอ Loading จะเข้าไปใช้แอปพลิเคชัน Animation ในหน้า Splash Screen ก็สามารถสร้างประสบการณ์แรกเข้าที่น่าตื่นตาตื่นใจให้กับ User ได้

2. Micro Interactions

 

tcaster-loading-animation

credit : TCASter by Skooldio

Micro Interactions เป็นส่วนประกอบเล็กๆ ที่ทำให้แอปไม่แข็งทื่อ สร้างความสนุกสนานให้กับการใช้งาน

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

Micro Interactions สามารถเป็นได้ตั้งแต่การรอโหลดในแอปพลิเคชัน สติกเกอร์ที่ขยับได้ (สวัสดีวันจันทร์) ซึ่งเจ้าส่วนประกอบเล็กๆ น้อยๆ พวกนี้แหละที่ทำให้แอปดูมีชีวิต มีสีสันและมี human touch มากขึ้น

3. Visual Feedback

visual-feedback

credit: zeeyoung

Visual Feedback เป็นการตอบสนองจากการกด ปัด ลาก ดึงหรืออะไรก็ตามที่ User ทำกับแอปของเรา แล้ว Interface มีการตอบสนองกลับ เช่น ปุ่มเปลี่ยนสี ไอคอนเปลี่ยนขนาด หรือหน้าจอสไลด์เข้ามา เป็นต้น

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

ตัวอย่างของ Visual Feedback แบบต่างๆ

visualfeedback-example

การเคลื่อนไหวที่ตอบสนองการเปลี่ยนผ่านระหว่างหน้าต่างๆ ในแอป (credit: Christophekerebel)

animated-component-prioritized

การเคลื่อนไหวของส่วนประกอบต่างๆ ตามลำดับความสำคัญ (credit : Vitaly Rubtsov)

play-pause-animated

การเปลี่ยนแปลงฟังก์ชันของปุ่มหลังถูกกด เช่น ปุ่ม Play กดแล้วกลายเป็น Pause (credit : tamaskojo)

ไม่ใช่แค่เท่ แต่ feel good

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

อ้างอิง

ธนนท์ วงษ์ประยูร
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.