Figma: Scrolling  with overflow behavior (Horizontal Scrolling)

บล๊อกนี้ผู้เขียนจะมาแนะนำวิธีการตั้งค่า Mobile App Prototype ที่เราได้พัฒนาขึ้นมา (ด้วย figma) เพื่อให้ผู้ใช้สามารถเลื่อน (Scrolling) ส่วนของเนื้อหาที่มีมากจนเกินขนาดของอุปกรณ์ได้ โดยใน figma นั้น สามารถทำ Scrolling เพื่อให้รองรับกับพฤติกรรมของผู้ใช้ได้ 3 แบบ ดังนี้ค่ะ

แบบที่ 1 Horizontal Scrolling  คือ การเลื่อนในแนวนอน ซ้ายและขวาภายในเฟรม โดยยังคงตำแหน่งแนวตั้งไว้ เช่น ภาพสินค้า , แกลอรี่ภาพ

แบบที่ 2 Vertical Scrolling คือ การเลื่อนในแนวตั้ง ขึ้นและลงภายในเฟรม เช่น เลื่อนดูเว็บไซต์ที่มีขนาดยาว หรือเนื้อหาที่อยู่ภายในแอป

แบบที่ 3 Horizontal & Vertical Scrolling คือ การเลื่อนในแนวนอนและแนวตั้ง ผู้ใช้สามารถเลื่อนไปในทิศทางใดก็ได้ภายในเฟรม เช่น การดูแผนที่

สำหรับบล๊อกนี้นั้น ผู้เขียนขอยกเอา Horizontal Scrolling มาแนะนำกันก่อนนะคะ

ขั้นตอนหลักๆของการทำ Scrolling ก็มีตามนี้ค่าาาาา

  1. กดเลือก frame ที่ต้องการทำ Scrolling (ต้องเป็น Frame นะคะ จึงจะกำหนด Scrolling ได้)
  2. เปิด panel Prototype ที่แถบด้านขวา
  3. เลือก overflow behavior ตามที่ต้องการ ซึ่งมี 4 ตัวเลือกนะคะ คือ
    • No Scrolling
    • Horizontal Scrolling **
    • Vertical Scrolling
    • Horizontal & Vertical Scrolling

Horizontal Scrolling ผู้ใช้เลื่อน content ซ้ายและขวาภายใน frame

วิธีการดูในคลิปได้เลยค่า

ในคลิป
วินาทีที่ 0:00:11 ทำ Group ให้เป็น frame (คลิกขวาบน Group แล้วเลือก Frame Selection) อย่างที่บอกกันข้างต้น เนื่องจากหากไม่ใช่ frame จะกำหนด Scrolling ไม่ได้
วินาทีที่ 0:00:11 ปรับขนาดของ frame และ ซ่อนเนื้อหาที่เกินกรอบ โดยติ๊กถูกที่ Clip Content
วินาทีที่ 0:00:25 ไปที่ prototype panel แล้วกำหนด Overflow scrolling แบบ Horizontal scrolling
วินาทีที่ 0:00:34 กด Present ลองดูผลลัพธ์กัน 😉

Ref : https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scrolling-with-overflow-behavior

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.