การใช้งานโปรแกรม Figma เบื้องต้น

โปรแกรม Figma เป็นโปรแกรมสร้างต้นแบบ Prototype ของเว็บไซต์ หรือ เว็บแอพพลิเคชั่น ที่ง่ายและสะดวก สามารถทำงานกันเป็นทีมร่วมกันได้ผ่านระบบคลาวน์

  • เข้าสู่เว็บไซต์ www.figma.com
  • สมัครสมาชิกใหม่ Sign up
  • สามารถลงทะเบียนด้วย google mail
  • ตั้งชื่อ และเลือกว่าเราทำงานทางด้านใด เช่น ทำงานด้านออกแบบ Design
  • กด Create Account
  • เมื่อเข้าสู่โปรแกรมแล้ว จะมีหน้าต่างแสดงวิธีการใช้งานเบื้องต้นให้กด next หรือ กดกากบาท
  • หน้าต่างการใช้งานเป็นดังภาพ
  • ให้สร้างโปรเจคใหม่ โดยให้กดเครื่องหมายกากบาท
  • จะมีหน้าต่างแสดงวิธีการใช้งานเบื้องต้น ให้กด next
  • เริ่มต้นด้วยการสร้างเฟรมงานของเรา กดปุ่ม Frame
  • ในตอนนี้เราจะสร้างขนาดเฟรมให้เหมาะสมกับหน้าจอคอมพิวเตอร์ Desktop จริงๆแล้วเราสามารถสร้างเฟรมให้เหมาะสมกับอุปกรณ์อื่นได้เช่น iPhone, Android phone
  • เมื่อเราสร้างFrameแล้ว เราสามารถกำหนดขนาดของเฟรมได้จากเมนูด้านขวามือ สังเกตด้านซ้ายมือว่าเราทำงานอยู่ที่ Page 1 ที่ Frame ที่ชื่อ Desktop เราสามารถเปลี่ยนชื่อได้โดยการ ดับเบิลคลิ๊ก
  • ตั้งชื่องานเราโดยคลิ๊กที่ด้านบนตรงคำว่า Untitled
  • ลองสร้างวัตถุสี่เหลี่ยม จากเมนู Shape Tools
  • เราสามารถเปลี่ยนสีและรูปแบบจากเมนูด้านซ้ายมือ
  • เราสามารถปรับขอบของสี่เหลี่ยมให้โค้งมนได้
  • สามารถเพิ่มตัวอักษรโดยการกดไอคอนตัว T
  • กำหนดค่าต่างๆ รูปแบบของตัวอักษรได้จากหน้าต่างด้านขวามือ
  • สามารถใช้ Font ภาษาไทยได้โดยอ้างอิงจาก Google fonts https://fonts.google.com/
  • ทดลองใช้ font ชื่อ Kanit
  • เราสามารถเพิ่มรูปภาพได้โดยไปที่เมนู Shape Tools> Place Image
  • และสามารถกำหนดความโปร่งแสงดังภาพ 100%
  • หรือเราสามารถแทรกภาพเข้าไปใน Shape เช่นเราสร้างวงกลมขึ้นมาแล้วกดเปลี่ยนสี แต่ให้เปลี่ยนจาก Solid เป็น Image
  • กดเลือก Choose Image
  • เราสามารถปรับแต่งรูปได้ตามเครื่องมือด้านล่างของรูปภาพ
  • เมื่อเราจะแสดงผลงานของเรา หรือส่งงานที่เราทำให้ผู้อื่น ให้กดปุ่ม Share
  • กำหนดสิทธิ์ในการเข้าถึงงาน และกด Copy link เพื่อทำสำเนาที่อยู่ของงานเรา แล้วส่งลิงค์นี้ให้เพื่อนร่วมงาน หรือแชร์ให้ผู้อื่น
  • สามารถ Export งานเราออกไปเป็นไฟล์รูปภาพ หรือ PDF โดยให้กดปุ่ม + ตรงหน้าต่าง Export ด้านขวามือ กำหนดรูปแบบ และกดปุ่ม Export…

การกำหนดการเชื่อมโยงระหว่างหน้าต่างๆ

  • สร้างFrameใหม่โดยกดไอคอน Frame
  • สร้างหน้าที่สอง และที่สาม เพื่อสร้างการเชื่อมโยงจากหน้าแรกไปหน้าอื่นๆ ในตัวอย่างนี้เราเปลี่ยนชื่อ Frameที่สร้างใหม่ ว่า picture1, picture2, picture3
  • แต่ละหน้าให้นำภาพมาใส่ และสร้างปุ่ม Back เพื่อสร้างการย้อนกลับไปที่หน้าแรก
  • เริ่มการสร้างการเชื่อมโยงโดยกดที่แท็ป Prototype
  • ให้นำเมาส์เรากดคลิ๊กไปที่ปุ่มที่จะสร้างการเชื่อมโยง จะเห็นจุดสีขาวแสดงขึ้นมา
  • ให้กดที่จุดสีขาวแล้วลากการเชื่อมโยงไปยังหน้าที่ต้องการ
  • สร้างการเชื่อมโยงย้อนกลับจากปุ่ม Back กลับไปยังหน้าแรกด้วยดังภาพ
  • ให้ทำแบบเดิมกับทุกปุ่ม
  • สุดท้ายทำการทดสอบโดยกดปุ่ม Present และช่อง Device ให้เลือก Presentation
  • จะแสดงผลดังภาพ
  • เมื่อเรานำเมาส์ชี้ไปที่ปุ่ม Picture 1 จะมีไอคอนมือขึ้นมาเพื่อแสดงว่าเป็นลิงค์และกดเชื่อมโยงไปได้

เขียนโดย

profile5

อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn 

Advertisements

การทำความเข้าใจผู้ใช้งาน Understanding users

การทำความเข้าใจผู้ใช้งาน Understanding users

ตามกระบวนการของการออกแบบโดยการให้ความสำคัญกับผู้ใช้งานหรือมนุษย์เป็นลำดับแรกHuman-centered Design และ กระบวนการออกแบบความคิด DesignThinking การเข้าถึง และการเข้าใจพฤติกรรม ความต้องการของผู้ใช้งานการออกแบบมีความสำคัญมากดังนั้นเราสามารถเก็บข้อมูลจากผู้ใช้งานได้หลากหลายวิธีวิธีที่นิยมใช้กันมากจะประกอบด้วย การทำ EmpathyMapping และ การทำ Persona

1. Empathy Map การใช้แผนภาพใจเขาใจเรา

แผนภาพ Empathy Map คือเครื่องไม้เครื่องมือที่ใช้สำหรับทำความเข้าใจกลุ่มเป้าหมาย เริ่มต้นด้วยการมองเห็นอย่างที่เขามองเห็น ได้ยินอย่างที่เขาได้ยิน คิดและรู้สึกอย่างที่เขาคิดและรู้สึก และสุดท้ายคือทำความเข้าใจสิ่งที่เขาเจ็บปวดและยินดี

แผนภาพใจเขาใจเรา Empathy Map เป็นการเก็บข้อมูลผู้ใช้งานโดยการสอบถามข้อมูล (Interview) แล้วนำข้อมูลที่ได้ ทำการกรอกข้อมูลต่างๆลงในแผนผัง Empathy Mapping ข้อมูลที่ได้นี้จะช่วยทำให้เราเข้าใจผู้ใช้งานมากขึ้นและสามารถออกแบบนวัตกรรมให้สอดคล้องกับตัวตนของเค้าได้มากที่สุดถ้าเราต้องออกแบบให้กับกลุ่มผู้ใช้งานที่มากกว่าหนึ่งคนการเก็บข้อมูลนี้สามารถใช้สอบถามได้กับหลายคน หรือจากกลุ่มตัวอย่างแล้วนำผลที่ได้มาหารูปแบบ (Pattern) ที่คล้ายคลึงกัน และสรุปเป็นทิศทางในการออกแบบต่อไป

รูปที่1. แผนผังใจเขาใจเรา โหลด PDF

ตัวอย่างความหมายของแต่ละช่องของแผนผังใจเขาใจเรา

รูปที่2. แผนผังใจเขาใจเรา และความหมายแต่ละช่อง

ตัวอย่างการสอบถามผู้ใช้งาน User เกี่ยวกับการสร้างนวัตกรรมแอร์

รูปที่3. แผนผังใจเขาใจเรา ตัวอย่างการกรอกข้อมูล

2. Persona การใช้ตารางเพอโซน่า

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

รูปที่4. ตารางเพอโซน่า ตารางข้อมูลตัวแทนของกลุ่ม
โหลด PDF

Technopreneur UX / UI Workshop, Bank of Ayudhya
รูปที่5. ตัวอย่างตารางเพอโซน่า ตารางข้อมูลตัวแทนของกลุ่ม

การกรอกข้อมูลตาราง Persona เริ่มต้นด้วยการบันทึกชื่อตัวแทนกลุ่มควรใส่รูปผู้นั้นด้วยเพื่อแสดงให้เห็นลักษณะทางกายภาพว่ากลุ่มตัวแทนนี้มีหน้าตาการแต่งตัว เป็นเช่นไรควรกรอกข้อมูลให้ได้มากที่สุดเพื่อช่วยให้นักออกแบบมีข้อมูลรอบด้านในการออกแบบภายหลัง

อ้างอิง References

เขียนโดย

profile5

อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn 

สร้างภาพสามมิติ Facebook 3D Posts ด้วยตัวเองง่ายๆ (Create a simple Facebook Posts with free online applications)

facebook3d018

สร้างภาพสามมิติ Facebook 3D Posts/Photos ด้วยตัวเองง่ายๆ (Create simple Facebook Posts with free online applications)

เพื่อนๆที่ใช้งาน Facebook ช่วงนี้จะเห็นฟีเจอร์ใหม่ของพี่มาร์ค เป็นภาพสามมิติเช่นภาพบุคคล อาหาร น้องแมว ที่เวลาเลื่อนฟีดแล้วจะเหมือนเคลื่อนที่ช้าๆลอยๆออกมาแบบสามมิติ ฟีเจอร์ใหม่นี้ต้องใช้เจ้าไอโฟนที่มีกล้องสองตัวถ่ายเพื่อแยกวัตถุด้านหน้าและด้านหลังออกจากกันแล้วก็นำกลับมาซ้อนกันเพื่อแสดงผลในฟีดหน้าFacebookของเราเรียกว่า 3D Posts

facebook3d001.PNG

สามารถดูรายละเอียดได้ที่ https://techcrunch.com/2018/06/07/how-facebooks-new-3d-photos-work/

3D posts

ฟีเจอร์ใหม่นี้ถูกเรียกว่า 3D posts ให้ผู้ใช้งานเฟสบุคทั่วไปรวมถึงเพจสามารถโพสภาพในลักษณะ 3 มิติได้ และจะแสดงผลบนหน้า News Feed ออกมาเป็น 3 มิติโดยสามารถขยับหมุนเปลี่ยนองศาไปตามทิศต่างๆได้ นอกจากนั้นในอนาคตยังจะรองรับการแสดงผลบนอุปกรณ์ AR, VR ได้ทั้งมือถือและบนเว็บด้วยสำหรับไฟล์ 3D ที่รองรับนั้นจะเป็นมาตฐาน glTF 2.0 ซึ่งสามารถกำหนดพื้นผิว (textures) แสง (lighting) และเทคนิคการ render ภาพต่างๆได้สมจริงมีความละเอียดสูงได้ด้วย ซึ่งทาง Facebook นั้นทำการแปลงไฟล์และคงยังรักษาคุณภาพของไฟล์ 3D เพื่อมาแสดงผลได้อย่างสวยงามและสมบูรณ์ใกล้เคียงและเทียบเท่าต้นฉบับมากที่สุด-http://www.veedvil.com/tech/application/facebook-3d-posts/

แต่ถ้าเราอยากจะสร้างวัตถุสามมิติแบบตัวอย่างด้านล่างนี้บ้างละ….จะทำอย่างไร???

facebook3d020.PNG
https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FLEGO%2Fposts%2F10155489097298403&width=500

การสร้างวัตถุ 3มิติ 3D Posts

อ้างอิงจากทางเพจ Facebook for developers  ได้กำหนดรูปแบบไฟล์ที่จะใช้งานได้ต้องเป็น ไฟล์ GLB file (glTF 2.0) ที่มีขนาดไม่เกิน 3MB บริษัท Khronos ผู้พัฒนาไฟล์นี้กล่าวว่า ไฟล์ glTF เป็นรูปภาพ jpeg แบบสามมิตินั้นเอง facebook3d002.PNG

ที่มารูปภาพ https://www.khronos.org/gltf/

จากภาพด้านล่างจะเห็นผังวงจรของ glTF อาจจะมองเริ่มจากผู้สร้างความต้องการในการใช้ไฟล์แบบนี้ (Drive demand) เครื่องมือในการพัฒนา (Create) ไปถึงการสร้างประสบการณ์ (Experience)

facebook3d003.PNG

ที่มารูปภาพ https://www.khronos.org/gltf/

จะเห็นว่าเครื่องมือในการพัฒนามีมากมาย แต่ในบทความนี้ผมจะนำเสนอเครื่องมือที่มือใหม่อย่างเราๆสามารถทำได้ง่าย รวดเร็ว และฟรี!!!

เครื่องมือในการสร้างงาน 3D- www.vectary.com

facebook3d004.PNG

Vectary เป็นโปรแกรมสร้างงานสามมิติผ่านทางหน้าเว็บ online application ไม่จำเป็นต้อง Install ลงไปในเครื่องคอมพิวเตอร์ของเรา แต่การใช้งานแบบฟรีนั้นจะถูกจำกัดไม่ให้เราสร้างโปรเจคได้เกิน10โปรเจค โปรแกรมใช้ง่ายๆเพียงแค่ลากวาง Drag&Drop

ขั้นแรกให้เราทำการสมัคร Sign up facebook3d005.PNGโดยเราสามารถใช้ account Facebook หรือ Google ที่มีอยู่แล้วก็ได้

facebook3d006

จากนั้นให้เลือกกดปุ่ม Start create หรือ เลือก Create 3D design

facebook3d007.PNG

เมื่อเข้ามาอยู่ในหน้าโปรเจค เราสามารถเลือกโมเดลสามมิติที่มีอยู่แล้วทางด้านล่างเข้ามาใช้ได้เลย โมเดลฟรีนี้จะมาจากหลายแหล่ง เช่น Google Poly, Sketchfab หรือ ทาง Vectary เอง

facebook3d008

การควบคุมมุมมองหน้าต่างการทำงานสามารถใช้เมาส์ควบคุมเช่น

  • การกดซ้ายเป็นการหมุนจอ Tumble
  • การกดเมาส์ปุ่มกลางเป็นการซูม Zoom
  • การกดเมาส์ปุ่มขวาเป็นการเลื่อนจอแนวระนาบ Pan

facebook3d009.PNG

สร้างตัวอักษร 3 มิติ

เราลองมาสร้างตัวอักษรสามมิติชื่อเราใส่ใน 3D Facebook Posts กันดีกว่า

  • เลือกเมนู Add-on ด้านล่าง

facebook3d010.PNG

  • เลือก 3D Text

facebook3d011.PNG

  • พิมพ์ข้อความ เลือกฟอนต์ ตามต้องการ

facebook3d012.PNG

  • เราสามารถปรับแต่งความหนา สีตัวอักษร หรืออื่นๆได้โดยเลื่อน Scroll bar ทางด้านขวาลงไปเรื่อยๆ

facebook3d013.PNG

  • เราสามารถเพิ่มวัตถุสามมิติอื่นๆเข้าไปใน Scene ได้โดยกดที่ 3D Assets ด้านล่าง แล้วเลือกวัตถุที่ต้องการ จัดวางตามต้องการ ผมนำต้นไม้ ก้อนหิน รถยนต์ เข้ามาใส่เพิ่ม สามารถเปลี่ยนสีได้ด้วย สังเกตว่าถ้าเป็นวัตถุสามมิติของ Vectaryมาใช้จะมีสีครบถ้วนดี

facebook3d014.PNG

  • เมื่อทำเสร็จแล้วให้ทำการ Export โปรเจคของเราไปใช้ใน Facebook กัน
  • ให้กดปุ่ม Export ด้านขวาล่าง

facebook3d015

  • หลังจากนั้นเลือกรูปแบบไฟล์เป็น 3D File> GLB

facebook3d016.PNG

  • บันทึกไฟล์เป็น .glb

facebook3d017

  • ให้เราลากไฟล์เราไปใส่ Post Facebook ก็จะเสร็จเรียบร้อย

facebook3d018

facebook3d019

เห็นไหมว่าคุณก็ทำได้ไม่ยากอย่างที่คิดเลยนะครับ

ปัจจุบัน Facebook ยังไม่รองรับการแสดงผลแบบ Animation ซึ่งจริงๆแล้วไฟล์ gITF สามารถแสดงผล Animation ได้ เราก็ต้องรอให้ Facebook อัพเดทฟีเจอร์นี้อีกต่อไปในอนาคต

แต่ถ้าต้องการสร้างโมเดลสามมิติที่มีความซับซ้อนมากขึ้นเราอาจจะต้องเรียนรู้ซอฟต์แวร์ เครื่องมือ หลักการให้มากขึ้นแบบมืออาชีพ

สนใจเข้ามาศึกษาหลักสูตร และสมัครเรียน

หลักสูตร หลักสูตรวิทยาศาสตรบัณฑิต สาขาวิชาเทคโนโลยีมัลติมีเดียและการสร้างภาพเคลื่อนไหว ปริญญาตรี สำนักวิชาเทคโนโลยีสารสนเทศ ม.แม่ฟ้าหลวง
https://www.mfu.ac.th/education/program/program-bachelor/bachelor-information-technology/bsc-program-science/bachelor-it-multimedia.html

ลิงค์รับสมัครหลักสูตรอื่นๆของทางมหาวิทยาลัย
https://admission.mfu.ac.th/admission-home.html

facebook3d021.PNG

เขียนโดย

profile5
อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn