Prototyping คือเเบบจำลองการใช้งานบนหน้าเพจของเว็ปไซต์หรือเเอพลิเคชั่น บนเว็ปไซต์จะมีการออกเเบบปุ่มหรือฟังก์ชั่นต่างๆ เช่น กดปุ่มนี้เเล้วจะเกิดอะไรขึ้น
ซึ่งใน Figma ก็จะมีฟีเจอร์ Prototyping มาให้ในตัวด้วยครับ ก็คือว่าเรากดตรงนี้เเล้วจะเเสดงผลอย่างไร ไปหน้าไหน เป็นต้น
ทดลองใช้งานตัว Prototyping กันครับ
1.ออกเเบบไฟล์งาน
ก่อนอื่นผมได้ออกเเบบตัวหน้า Home page เเละ หน้า Login ตามรูปครับ
2.การใช้งานฟังก์ชั่น Prototyping
ผมก็ต้องการที่จะมาร์คไว้ว่า เมื่อกดปุ่ม login เเล้วจะเข้าสู่หน้าของ login page ก็จะใช้ฟีเจอร์ Prototyping โดย คลิกที่ปุ่มที่เราจะต้องการเชื่อมครับเเล้วลากไปที่ Page ที่เราต้องการจะให้มัน link ไป
จากนั้นจะมี Popup เเสดงกล่องการตั้งค่าครับ โดนเราจะสามารถเลือกได้ว่า Action อะไรที่ไปทำกับปุ่ม ทำเเล้วเกิดอะไรขึ้น อนิเมชั่นการเเสดงผลต่างๆ เราก็ทำการตั้งค่าในส่วนนี้ครับ
3.Test การใช้งาน Prototyping
เราจะทำการ Test การทำงานกันครับโดยคลิกที่ปุ่ม Present ทางด้านขวามือ
จากนั้นจะเเสดงหน้าจอ Present ออกมา ในหน้านี้เราจะสามารถคลิกที่ปุ่มที่เราทำการตั้งค่า Prototyping ได้เพื่อเเสดงการทำงานของปุ่มครับ
เมื่อผมกดคลิกที่ปุ่ม login มันก็จะเเสดงหน้า login page ออกมาครับตามที่ผมได้ตั้งค่าไว้
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/
จำลองการทำงานของหน้าเว็ปไซต์ด้วยฟังก์ชั่น Prototyping บน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 0 ตอบกลับ
- 846 แสดง
-
โพสต์ล่าสุด โดย pataponnew
25/05/2021 10:09 am
-
- 3 ตอบกลับ
- 2104 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
-
- 3 ตอบกลับ
- 2902 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:08 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 74