9 แนวโน้มใหม่การออกแบบกราฟิก ประจำปี 2564 (9 UI & Graphic Design Trends for 2021)

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

การออกแบบสื่อสมัยใหม่จึงมีความสำคัญมากให้ตอบโจทย์คนรุ่นใหม่ หรือ คนรุ่นเก่าที่เพิ่งเข้ามาอยู่ในโลกออนไลน์ และที่สำคัญ การออกแบบสื่อสมัยใหม่นั้นไม่ได้หยุดอยู่ที่มีเดียดั้งเดิมเช่น กระดาษ นิตยสาร อีกต่อไปแล้ว ตอนนี้เป็นยุค Mobile First ที่อะไรทุกอย่างได้ Move on ไปอยู่บนหน้าจอมือถือ หรือ จอคอมพิวเตอร์ สมาร์ททีวี สมาร์ทวอทช์

วันนี้เราลองมาดูว่าเทรนด์การออกแบบอะไรที่มาแรงและมีอิทธิพลที่เรานักสร้างสื่อควรจะต้องรู้และฝึกฝนทักษะพัฒนาฝีมือทำให้ได้ ตามให้ทัน

1. กราฟิกสามมิติ ยังมาแรง (3D Illustrator)

เริ่มต้นด้วยกราฟิกสามมิติ ยังมาแรงต่อเนื่องจากปีที่ผ่านมา ทำไม่ง่ายแต่ก็ไม่ยากที่เราจะหัดเริ่มทำ กราฟิกสามมิติสามารถช่วยทำให้งานออกแบบดูมีมิติน่าสนใจ ทำให้งานเหมือนลอยทะลุจอออกมาได้ กราฟิกสามมิติสามารถนำมาออกแบบเป็นพื้นหลังแล้วนำผลิตภัณฑ์ หรือวางตัวอักษรขนาดใหญ่ Bold ไว้ด้านหน้าได้ สามารถลองใช้โปรแกรมการออกแบบกราฟิกสามมิติที่เป็นเว็บแอปได้ที่ https://superlistapp.com/ หรือใช้ฟรีซอฟต์แวร์ เช่น Blender

หน้าจอโปรแกรม Blender 3D ซอฟต์แวร์สร้างงานสามมิติ

ตัวอย่างงาน กราฟิกสามมิติ

2. กราฟิกแบบกระจกฝ้า (Glassmorphism/Frosted Glass Effect)

Glassmorphism เป็นการต่อยอดจากความร้อนแรงของเทรนด์การออกแบบ Neumorphism (Soft UI) ในปี 2020

กล่าวถึง Neumorphism (นิวมอร์ฟิสซึม) เกิดจากนักออกแบบพยายามหลีกหนีจาก Flat Design เป็นการออกแบบที่อะไรก็แบน แบน แบนไปหมด ลดทอนรายละเอียดมากจนเกินไป แนว Neumorphism จึงถือกำเนิดขึ้น คำว่า Neumorphism มาจากคำว่า New + Skeuomorphism (นิว + สกิวมอร์ฟิสซึม) เป็นการออกแบบ UI Elements ที่คงความมีมิติของสิ่งของแบบเก่า(โบราณ) (Skeuomorphism) เช่นปุ่มปรับลดเพิ่มเสียง ปุ่ม Play เล่นเพลงของวิทยุในสมัยก่อน แต่ลดรูปและความซับซ้อน (Simplify) ให้ดูแล้วเรียบง่ายมากที่สุด เน้นแสดงแสงเงาทิศทางของแสงเพื่อให้เกิดมิติของกราฟิกหรือปุ่มกด ลักษณะจะเป็นเหมือนพื้นผิวกระดาษ หรือพลาสติกที่ดันนูนขึ้นมา หรือกดทับให้ยุบลงไป

ภาพตัวอย่างของการออกแบบ Skeuomorphism

การออกแบบ UI แบบโบราณเหมือนจริง
https://public-media.interaction-design.org/images/ux-daily/56e1ab893e691.jpg
การออกแบบไอคอนในยุคแรกของ iPhone แบบโบราณ (สมัยนั้นปังมาก ไม่มีใครออกแบบในลักษณะแบบนี้มาก่อน)
https://cdn.redmondpie.com/wp-content/uploads/2014/01/Ayecon-iPhone-1.png

ภาพตัวอย่างของการออกแบบ Neumorphism

แนะนำการสร้างกราฟิก ไอคอน Neumorphism (Soft UI) ด้วย Adobe XD

Glassmorphism

แวะไปพูดถึง Neumorphism อยู่หลายบรรทัด ขอกลับมาที่ Glassmorphism แปลตรงตัวเลยครับเป็นรูปแบบการออกแบบกระจก นอกจากจะออกแบบให้ใส ๆ แบบกระจกแล้ว เทรนด์ปีนี้เพิ่มการออกแบบกระจกไม่ทากันแดด…กระจกฝ้า!!! กราฟิกจะมัว ๆไม่ค่อยชัด คล้าย ๆ แผ่นกระจกฝ้าทำพื้นหลังให้ Blur ทำตัวอักษร วัตถุให้เบลอนั้นเอง

เราสามารถไปลองเล่นเอฟเฟคทำกระจกฝ้าได้ที่ https://glassmorphism.com/

เว็บไซต์ให้ผู้พัฒนาเว็บสามารถไปเลือกทำ Effect Glassmorphism เพื่อให้ได้ CSS code นำไปพัฒนาเว็บไซต์ต่อไป

ตัวอย่างการออกแบบ Glassmorphism

ยังครับ….ยังไม่จบ…

แถมเรื่องการเปิดตัว Big Sur (macOS 11) ระบบปฏิบัติการเวอร์ชันล่าสุดของ Apple นี่เป็นการชุบชีวิตการออกแบบ Neumorphism กลับมาโลดแล่นมีชีวิตชีวาอีกครั้งนึง

“Apple, Big Sur, and the rise of Neumorphism”

https://www.inputmag.com/design/apple-macos-big-sur-the-rise-of-neumorphism

Neumorphism กลับมา การออกแบบแนวแบน ๆได้จากเราไปแล้ว มันเอาท์ไปแล้วจ้า…

“Flat Design is No Longer A Trend”

https://uxdesign.cc/what-can-designers-learn-from-ios-14-and-macos-big-sur-bab6e188ba4e

การออกแบบกราฟิก และไอคอนแนวนี้ เราสามารถเรียกว่า Pseudo-materialized icon/mimic icon โดยออกแบบลอกเลียนให้ใกล้เคียงวัตถุจริงแต่ก็ยังเน้นความเรียบง่าย เน้นแสงเงา ความโปร่งแสง สีสันสดใส ออกแนวสามมิตินูนลอยออกมา ดูคล้ายเอาแป้งโดมาปั้นเป็นไอคอนนั้นเอง…

“Depth, Shading & Translucency are used to create the hierarchy.”

– Alan Dye

3. ใช้ภาพถ่ายจริง (Real-life pictures)

ถ้าฉีกแนว!!! นั้นเราใช้ภาพจริงประกอบการนำเสนอกันเลยจ้า นักออกแบบบางคนคิดว่า เพราะนักออกแบบส่วนใหญ่มัวแต่ไล่ตามอินเทรนด์การใช้ภาพกราฟิก Vector และภาพสามมิติกัน การใช้ภาพจริงผสมผสานการออกแบบกราฟิกจึงอาจทำให้ดูแตกต่าง และสามารถบ่งบอกถึงความจริงใจ สมจริง เพิ่มความน่าเชื่อถือ และสื่อสารเข้าถึงผู้บริโภคได้อย่างตรงไปตรงมา

https://dribbble.com/shots/14965853-Rewanghi-Donation-and-Charity-Website
https://dribbble.com/shots/14957123-Careely-Career-Builder-Landing-Page
https://dribbble.com/shots/14964397-Antisleep

4. สีสันสดใสมีชีวิตชีวา (Vivid Colors)

สถานการณ์โควิดก็พากันเศร้าหมองมามากแล้ว เรานักออกแบบขอใช้สีสดใสให้โลกมีชีวิตชีวาบ้างก็ดีไม่น้อยนะครับ แนว Vivid Colors นี้ช่วยเพิ่มการรับรู้ที่สดชื่น สนุกสนาน สร้างสรรค์ หรือต้องการให้ผู้รับชมเกิดการจดจำแบรนด์ ผลิตภัณฑ์ สร้างความแตกต่างจากคนอื่น เราสามารถพบเห็นได้จากสื่อโฆษณาของ Apple และ Samsung และพื้นหลังหน้าจอมือถือของทั้งสองค่ายนี้เช่นกัน

นักออกแบบสามารถหาไอเดียสีสดใสได้จาก Adobe Color Wheel พิมพ์ค้นหาตัวอย่างชุดสีแบบ Vivid https://color.adobe.com/search?q=vivid

หรือลองไปชมที่ https://products.ls.graphics/mesh-gradients/

https://dribbble.com/shots/4412003-Vivid-Colors
https://dribbble.com/shots/3946898-Spotlight-festival-poster
https://dribbble.com/shots/10002593-Psychedelic-Logo-Art

5. เบลอว่ารักแถบ ออกแบบให้พื้นหลังเบลอด้วยสีสดใส (Blurred and colorful backgrounds)

โดยปกติการสร้างพื้นหลังเบลอจะทำให้วัตถุที่อยู่ด้านหน้ามีความโดดเด่น ลอยออกมาจากพื้นหลัง สามารถนำไปใช้ในการออกแบบนำเสนอผลิตภัณฑ์ หรือใช้กับตัวอักษรได้ แต่ถ้าเราใช้สีพื้นหลังโดยใช้สีสดใส และผนวกกับแบบกระจกฝ้าเข้าด้วยกัน การออกแบบแนวทางนี้จะทำให้ดูซอฟต์ เป็นมิตร warm & welcoming การออกแบบแนวทางนี้สามารถใช้ร่วมกับ Glassmorphism ได้อย่างดี

https://dribbble.com/shots/11164781-Web-Design-for-Photographer

6. สวยแบบเรียบง่าย (Aesthetic minimalism)

เน้นนำเสนอน้อย ๆ โล่ง เรียบง่าย อ่านง่าย สบายตา (สายตาต้องดี เพราะตัวอักษรจะเล็กเว้น space เยอะ ๆ)

https://dribbble.com/shots/14223518-Cobalten-Furniture-Landing-Page-Animation
https://dribbble.com/shots/14730796-Muir-UI-Kit-for-Sketch-and-Figma
https://dribbble.com/shots/14442378-Minimalist-logo-design
https://dribbble.com/shots/14532061-Kuboraum

7. เรขาคณิต (Geometric structure)

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

ถ้ากล่าวถึงการออกแบบโดยเน้นรูปทรงเรขาคณิต ต้องพูดถึงลัทธิเบาเฮ้าส์ Bauhaus Style เน้นความเรียบง่าย โมเดิร์น ตรงไปตรงมา Bauhaus เป็นโรงเรียนสอนศิลปะหลังยุคสงครามโลกครั้งที่ 1 ก่อตั้งโดย Walter Gropius สถาปนิกชาวเยอรมัน การเรียนการสอนและผลงานโด่งดังมากและยังส่งต่ออิทธิพล Bauhaus Style มาจนถึงปัจจุบัน หลักการการออกแบบจะใช้สีหลักและรูปทรงเรขาคณิต เรียบง่ายไม่ซับซ้อน

การออกแบบโปสเตอร์ที่อาศัยแรงบันดาลใจจาก Bauhaus Style โดย พีท มองเดรียน (Piet Mondrian) Piet Mondrian

ตัวอย่างการออกแบบในปัจจุบันโดยมีแนวความคิดจาก Bauhaus Style

8. เล่นตัวอักษรใหญ่ ให้ปัง ให้ล้ำ (Big and sophisticated typography)

การใช้ตัอักษรในการออกแบบนอกจากจะใช้เพื่อการนำเสนอข้อมูล information แล้วนั้น นักออกแบบสามารถนำตัวอักษรมาเป็นส่วนหนึ่งของการออกแบบได้ด้วย การใช้ Typography คือการจัดวางและการออกแบบตัวอักษรเพื่อการสื่อสาร การสร้างความชัดเจนในการนำเสนอตัวอักษร ทำให้อ่านได้ง่ายและมองเห็นได้ชัดเจน (Readability & Legibility) การปรับขนาดตัวอักษรให้เหมาะสม ขนาดหัวข้อมีขนาดใหญ่ กว่าขนาดหัวข้อรอง และเนื้อหา ลักษณะตัวอักษรที่อ่านง่าย การเว้นระยะห่าง ช่องไฟ ความสูง ความกว้าง น้ำหนัก

https://dribbble.com/shots/10032305-Weedmore-layout

9. ดิบ เถื่อน สับสนวุ่นวาย (Brutalism)

คำว่า Brutalism นั้นมาจากคำกล่าวในภาษาฝรั่งเศส “Béton-brut” ซึ่งแปลได้ว่า “Raw Concrete” คอนกรีตเปลือย แนวความคิดนี้รู้จักกันดีในวงการสถาปัตยกรรมในช่วงปีค.ศ.1950 Brutalist Architecture แสดงเนื้อแท้สัจจะของวัสดุที่ก่อรูปมาเป็นตัวของมันเองอย่างชัดเจน “คอนกรีตเปลือยคือสัจจะ

แต่ในวงการการออกแบบกราฟิก แนวทางอาจจะต่างจากสถาปนิกเป็นอย่างมาก แบบสุดขั้ว

บางคนให้นิยามการออกแบบแนวนี้ว่า เป็นการออกแบบที่น่าเกลียด เต็มไปด้วยความสับสนวุ่นวาย

“Bright Colors and Chaotic Clashing”

Image for post
https://medium.com/@ShahriyerShuvo/rise-of-vaporwave-memphis-and-brutalism-in-design-54c27583246b

แนวทางการออกแบบ Brutalism Style

รูปแบบการออกแบบจะออกแนวย้อนยุคคล้ายใช้ WordArt (โปรแกรม Microsoft Word ที่มีฟังชันออกแบบตัวอักษร) ในการออกแบบตัวอักษร การใช้ตัวอักษรหรือกราฟิกแบบ 8bit หน้าจอคอมพิวเตอร์สีเขียว ๆ สมัยก่อน บางทีจะเป็นนำตัวอักษรมาซ้อน ๆ กัน crop ภาพแบบขาด ๆ เกิน ๆ มาซ้อนกัน ใช้สี จัดจ้าน ขาวดำ monotone หรือ duotone

หรือพูดง่าย ๆ คือ ขัดแย้งในหลักการออกแบบ ออกแบบเหมือนไม่ออกแบบ มั่วให้ถึงที่สุด เอาที่สบายใจ…

Word 2002 - WordArt
หน้าตาของโปรแกรม MS WordArt
https://www.schoolnet.org.za/PILAfrica/en/skill/word2002/word02.wordart.htm

ตัวอย่างงานแบบ Brutalism Style

“brutalism”
https://designshack.net/articles/graphics/brutalism-a-new-trend-in-web-design/

สาวกสายไร้แนวทางสามารถติดตามได้ที่ https://www.trendlist.org/

VOID International Animation Film Festival
FUEGO INTERNATIONAL
Carré Funk, Beach Party
Witten Lab Magazine #01
Strong
https://www.pinterest.co.uk/pin/434597432787697202/

สรุป 9 แนวทาง

  1. กราฟิกสามมิติ ยังมาแรง (3D Illustrator)
  2. กราฟิกแบบกระจกฝ้า (Glassmorphism/Frosted Glass Effect)
  3. ใช้ภาพถ่ายจริง (Real-life pictures)
  4. สีสันสดใสมีชีวิตชีวา (Vivid Colors)
  5. เบลอว่ารักแถบ ออกแบบให้พื้นหลังเบลอด้วยสีสดใส (Blurred and colorful backgrounds)
  6. สวยแบบเรียบง่าย (Aesthetic minimalism)
  7. เรขาคณิต (Geometric structure)
  8. เล่นตัวอักษรใหญ่ ให้ปัง ให้ล้ำ (Big and sophisticated typography)
  9. ดิบ เถื่อน สับสนวุ่นวาย (Brutalism)


การออกแบบในปี 2021 นี้อาจจะไม่ได้จำกัดเฉพาะ 9 รูปแบบนี้ นักออกแบบสามารถนำจุดเด่นแต่ละแบบมาปรับให้เข้ากับเนื้อหาแต่ละงานของตนเองให้เหมาะสม ความสวยงามและความโดดเด่นของการออกแบบเป็นส่วนหนึ่งของการสร้างการรับรู้ ส่วนที่สำคัญที่สุดคือเนื้อหาที่เราจะสื่อสารที่มีความชัดเจน และเลือกรูปแบบการนำเสนอให้เหมาะสมกับกลุ่มเป้าหมาย เข้ากับ Platform ช่องทางการสื่อสารให้ได้มากที่สุด

ขอให้ทุกคนมีความสุข และสนุกในการเรียนรู้อย่างไม่มีที่สิ้นสุดครับ

BORN TO FIGHT , LEARN TO WIN , LIVE TO HELP

-Rickson Gracie

อ้างอิง

https://uxdesign.cc/a-guide-of-ui-design-trends-for-2021-637ac038cb99

https://www.canva.com/learn/design-trend/

https://www.flashfly.net/wp/305604

เขียนโดย

profile5

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

3 วิธีตั้งค่า Zoom Meeting ให้ปลอดภัย

3 วิธีตั้งค่า Zoom Meeting ให้ปลอดภัย
+อัพเดทแอปพลิเคชันเป็นเวอร์ชันล่าสุด (แก้ไขปัญหาความไม่ปลอดภัยแล้วหลายส่วน)
+กำหนดให้มีการกรอกพาสเวิร์ดเข้าประชุม (ใครไม่มีพาสเวิร์ดเข้าร่วมประชุมไม่ได้)
+ต้องใช้ waiting room คือห้องคอยประชุม ผู้ที่ถูกเชิญประชุมจะไม่สามารถเข้าประชุมได้จนกว่าผู้สอนหรือผู้จัดการประชุมอนุญาตให้เข้าร่วมห้องประชุมได้ (ป้องกันคนไม่หวังดีเข้าร่วมประชุม)
+ส่งลิงก์ประชุมให้กันเป็นความลับ ทางอีเมลช่องทางคนในหน่วยงานเท่านั้น อย่าส่งอย่างเปิดเผย อาจใช้ contact ใน zoom แล้วสร้าง channel ไว้เฉพาะหน่วยงาน
+อย่าคลิกลิงก์เชิญประชุมที่ไม่รู้จัก อย่าเข้าร่วมการประชุมแบบ public สาธารณะ ลิงก์อันตรายเช่น “zoom-us-zoom_##########.exe” หรือ“Microsoft-teams_V#mu#D_##########.exe

1.สร้างนัดหมายที่ปลอดภัย
+ทุกการประชุมตั้งค่าให้ผู้เข้าร่วมการประชุมกรอกPasswordไว้เลยครับ ใครไม่มีพาสเวิร์ดเข้าไม่ได้
+สร้างห้องคอยประชุม Waiting Room เพื่อคัดกรองผู้เข้าร่วมประชุม เจ้าของห้องประชุมเป็นผู้อนุญาตให้เข้าร่วมประชุมคนเดียวเท่านั้น ใครที่เราไม่รู้จักก็ไม่ต้องให้เข้าร่วม

2.สร้าง Channel กลุ่มเฉพาะไว้เลย
+ที่เมนู Chat เราสามารถสร้างช่องทางประชุมกลุ่มได้โดยการสร้าง Channel มีลักษณะเหมือนกลุ่มของFB
+ในChannel สามารถส่งข้อความ ส่งไฟล์(ไฟล์ไม่หายอยู่ในช่องตลอด) และสามารถเปิดVideo call การประชุมได้เลย เพียงแค่เพิ่มเพื่อนหรือสมาชิกไว้ล่วงหน้า สื่อสารส่งข้อความได้เรื่อยๆ พร้อมเมื่อไหร่ กดไอคอนVideo ประชุมได้เลย

3. ตั้งค่า Password ให้เป็นค่าเริ่มต้น
+เข้าไปตั้งค่าต่างๆในSetting บนเว็บไซต์ของZoom

อย่าลืมอัพเดท Zoom กันบ่อยๆนะครับ

ตื่นเช้ามาตีห้า Zoom มีSecurityอัพเดท 9 เมษายน
1. นำMeeting ID ที่แถบ Title bar ออก เพราะเวลาเราแชร์หน้าจอให้โลกรู้จะเห็นแล้วคนอื่นสามารถขอเข้าร่วมประชุมได้ง่าย
2. ย้ายปุ่มเพิ่มเพื่อนไปไว้ในช่อง Chat
3. เพิ่มปุ่ม Security ใหญ่ๆไว้ที่เมนูหลัก สามารถ Lock ห้องประชุมเมื่อเพื่อนเข้ามาครบแล้ว ตั้งการเปิด waiting room สามารถกำหนดอนุญาตการแชร์หน้าจอ การ Chat การเปลี่ยนชื่อ โดย Host ได้
4. แก้ Bug เล็กน้อย
5. แก้ปัญหา UNC Link issue ที่เป็นประเด็นเปิดช่องโหว่ให้ Hacker เข้ามาขโมยข้อมูล

เขียนโดย

profile5

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

สอนออนไลน์กลุ่มด้วยโปรแกรม Zoom

Zoom Meetings & Chat: Enterprise video conferencing with real-time messaging and content sharing

Zoom.us

สอนออนไลน์ผ่านอินเทอร์เน็ตโดยให้นักศึกษาเรียนผ่านหน้าจอจากที่ไหนก็ได้ด้วยโปรแกรม Zoom

ช่วงหลายสัปดาห์ที่ผ่านมาทางจังหวัดเชียงรายประสบปัญหาเรื่องฝุ่นควัน PM 2.5 ทำให้การใช้ชีวิตในรั้วมหาวิทยาลัยค่อนข้างยากลำบาก กระทบต่อการเรียนการสอนเป็นอย่างมาก ถ้าฝุ่นควันเยอะมากๆ ชั้นเรียนบางรายวิชาต้องหยุดเรียนหยุดสอนเพื่อให้นักศึกษาของเราปลอดภัย

และในขณะนี้ยังมีการแพร่ระบาดของเชื้อไวรัส COVID-19 การจัดการเรียนการสอนออนไลน์ เป็นทางเลือกที่ดีอีกทางหนึ่งที่จะลดการแพร่เชื้อจากการพบปะกันหลายๆคนในพื้นที่จำกัด

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

เราสามารถทำได้ครับ!!! อาจารย์บางท่านลองไลฟ์ผ่าน FB ในกลุ่มที่สร้างไว้ แต่ก็มีปัญหาเรื่องของการสื่อสารเพราะเหมือนว่าอาจารย์พูดสอนไปทางเดียว เราจะถามนักศึกษา ให้เค้าแสดงความคิดเห็นกลับมาก็ยาก อยากได้ระบบการสื่อสารสองทาง และเป็นระบบปิดที่ปลอดภัยด้วย

ถ้าอ่านมาถึงจุดนี้แล้ว……..เราของแนะนำ!!!!

โปรแกรม Zoom!!!!

Video แนะนำการใช้โปรแกรม Zoom

Video แนะนำการใช้โปรแกรม Zoom

สามารถเข้าไปสมัครสมาชิกและโหลดโปรแกรมได้ที่
https://zoom.us

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

ข้อดี

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

ข้อจำกัด

  • เราใช้แบบฟรี จะจำกัดผู้เรียนในการใช้ไว้ไม่เกิน 100 คน
  • สอนครั้งนึงได้ไม่เกิน 40 นาที แต่เราก็เปิดสอนใหม่ต่อกันได้
ห้องสอนที่บ้านผม จริงๆแล้วใช้โน้ตบุคตัวเดียวก็ได้สบายๆครับ

ขั้นแรกให้เราทำการสมัครสมาชิกก่อน สามารถใช้แอคเค้า Google หรือ FB ก็ได้

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

จะเห็นได้ว่าตอนนี้เราได้สร้างหมายนัดแล้ว ที่สำคัญคือ Meeting ID เลขนี้จะส่งให้นักศึกษากรอกเพื่อลงทะเบียนเข้ามาในชั้นเรียนเรา โดยนักศึกษาไม่จำเป็นจะต้องสมัครสมาชิกของโปรแกรมก็ได้ เพียงแค่กรอก Meeting ID ในแอพแล้วก็เข้ามาเรียนได้เลย

เมื่อเราเข้าไปที่หน้าของรายละเอียดหมายนัดMeetingเรา ในหน้านี้เราสามารถแก้ไขข้อมูลต่างๆได้

และที่สำคัญคือ Meeting ID อย่างที่กล่าวไป หรือ เราจะก้อปปี้ Join URL ส่งให้นักศึกษาคลิ๊กเข้ามาสู่ห้องเรียนก็ได้เหมือนกัน

เมื่อเรากดปุ่ม Start Meeting

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

หลังจากติดตั้งแล้ว โปรแกรมจะเปิดตัวขึ้นมา ให้เราคลิ๊กที่ Join Audio

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

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

เมื่อเราจะทำการสอน เราจะแชร์หน้าจอเราไปสู่ชั้นเรียน ผู้สอนสามารถเลือกได้ว่าจะแชร์อะไรเช่นแชร์ หน้าจอคอมพิวเตอร์ทั้งหมด หรือ กระดาน Whiteboard ที่เราสามารถเขียนข้อความลงไปได้ หรือไฟล์ PowerPoint ที่เปิดสอน

สามารถเรียนผ่านมือถือก็ได้ นักศึกษาสามารถไปดาวน์โหลดจาก Google Play หรือ Apple store

เมื่อโหลดแอพมาแล้ว ทำการเปิดแอพ แอพจะถามเลข Meeting ID ให้เราทำการกรอกเลขนี้เข้าไปก็สามารถเข้าชั้นเรียนโดยไม่ต้องสมัครสมาชิกก็ได้

ถ้าติดตั้งโปรแกรมในคอมพิวเตอร์เรา โปรแกรมก็จะมีหน้าตาแบบนี้

จบแล้วครับสำหรับการแนะนำการใช้โปรแกรม Zoom ถ้าเพื่อนๆท่านใดมีคำถาม ติดขัดการใช้งาน หรือแบ่งปันความรู้เพิ่มเติม สามารถทักกันเข้ามาได้ครับ ขอบคุณครับ

ดาวน์โหลดเอกสารแนะนำการใช้ Zoom เบื้องต้น

คู่มือการใช้งาน (PDF) https://bit.ly/2XMELao (18-04-2020)

เขียนโดย

profile5

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