จำลองการทำงานของหน้าเว็ปไซต์ด้วยฟังก์ชั่น Prototyping บน Figma

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

pataponnew
PHP Hero Member
PHP Hero Member
โพสต์: 152
ลงทะเบียนเมื่อ: 03/05/2021 10:18 am

จำลองการทำงานของหน้าเว็ปไซต์ด้วยฟังก์ชั่น Prototyping บน Figma

โพสต์ที่ยังไม่ได้อ่าน โดย pataponnew »

Prototyping คือเเบบจำลองการใช้งานบนหน้าเพจของเว็ปไซต์หรือเเอพลิเคชั่น บนเว็ปไซต์จะมีการออกเเบบปุ่มหรือฟังก์ชั่นต่างๆ เช่น กดปุ่มนี้เเล้วจะเกิดอะไรขึ้น
ซึ่งใน Figma ก็จะมีฟีเจอร์ Prototyping มาให้ในตัวด้วยครับ ก็คือว่าเรากดตรงนี้เเล้วจะเเสดงผลอย่างไร ไปหน้าไหน เป็นต้น
ทดลองใช้งานตัว Prototyping กันครับ
1.ออกเเบบไฟล์งาน
ก่อนอื่นผมได้ออกเเบบตัวหน้า Home page เเละ หน้า Login ตามรูปครับ
หน้า Home page เเละ หน้า Login
หน้า Home page เเละ หน้า Login
bandicam 2021-05-25 13-30-36-447.jpg (56.03 KiB) Viewed 591 times

2.การใช้งานฟังก์ชั่น Prototyping

ผมก็ต้องการที่จะมาร์คไว้ว่า เมื่อกดปุ่ม login เเล้วจะเข้าสู่หน้าของ login page ก็จะใช้ฟีเจอร์ Prototyping โดย คลิกที่ปุ่มที่เราจะต้องการเชื่อมครับเเล้วลากไปที่ Page ที่เราต้องการจะให้มัน link ไป
การ Prototyping
การ Prototyping
bandicam 2021-05-25 13-49-06-471.jpg (62.97 KiB) Viewed 591 times
จากนั้นจะมี Popup เเสดงกล่องการตั้งค่าครับ โดนเราจะสามารถเลือกได้ว่า Action อะไรที่ไปทำกับปุ่ม ทำเเล้วเกิดอะไรขึ้น อนิเมชั่นการเเสดงผลต่างๆ เราก็ทำการตั้งค่าในส่วนนี้ครับ

3.Test การใช้งาน Prototyping
เราจะทำการ Test การทำงานกันครับโดยคลิกที่ปุ่ม Present ทางด้านขวามือ
Test การทำงานด้วยฟังก์ชัน Present
Test การทำงานด้วยฟังก์ชัน Present
bandicam 2021-05-25 13-54-52-663.jpg (18.58 KiB) Viewed 591 times
จากนั้นจะเเสดงหน้าจอ Present ออกมา ในหน้านี้เราจะสามารถคลิกที่ปุ่มที่เราทำการตั้งค่า Prototyping ได้เพื่อเเสดงการทำงานของปุ่มครับ
หน้าจอ Present
หน้าจอ Present
bandicam 2021-05-25 13-58-04-899.jpg (113.3 KiB) Viewed 591 times
เมื่อผมกดคลิกที่ปุ่ม login มันก็จะเเสดงหน้า login page ออกมาครับตามที่ผมได้ตั้งค่าไว้
หน้า login page
หน้า login page
bandicam 2021-05-25 13-58-08-548.jpg (15.35 KiB) Viewed 591 times
Prototyping มีประโยชน์มากในการออกเเบบตัว UX/UI ครับ เราสามารถดูการเเสดงผลของ Action ต่างๆกับตัว Page ทำให้ง่ายต่อการออกเเบบเว็ปไซต์ให้ตรงตามเเบบที่เราต้องการได้ครับ

อ้างอิง
https://alchemist.itbangmod.in.th/%E0%B8%A1%E0%B8%B2%E0%B8%94%E0%B8%B5%E0%B9%84%E0%B8%8B%E0%B8%99%E0%B9%8C-prototype-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-figma-%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-a36448fef487
https://inbound.cipher.co.th/2020/02/22/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%80%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%B0%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9Auxui-designer/
https://spidyhero.wordpress.com/2018/12/07/figma-basic/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32