ทำไม Flutter ถึงเป็นเทรนด์สำหรับนักพัฒนาในปี 2020

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

ใช้ UI และ Business Logic เดียวกันในทุกแพลตฟอร์ม

ข้อได้เปรียบแรกของ Flutter คือ สามารถแยกรูปแบบ UI ทั่วไปออกมาจากวิดเจ็ตที่ใช้ซ้ำได้ นอกจากนี้ยังไม่จำเป็นต้องตั้งค่าคุณสมบัติ UI เช่นสี สไตล์ ฯลฯ อีกด้วย เราสามารถปรับ UI และBusiness logic ทั่วๆไป ผ่านการแก้ไข Code ได้ทั้งในแอป Android และ IOS

ประหยัดเวลา

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

มีการใช้งานใกล้เคียงกับแอพพลิเคชั่นเนทีฟ

Flutter เขียนขึ้นมาโดยใช้ภาษาที่เรียกว่า Dart ซึ่งจะทำให้ไม่จำเป็นต้องใช้ JavaScript ประเภท Bridged เหมือน React Native และถูก compile เป็นภาษาเครื่อง วิธีนี้ช่วยให้สามารถ Compile และ Release แอปพลิเคชันได้เร็วกว่าที่คุณทำด้วย React Native

ใช้ความซับซ้อนต่างๆ ของ UI แบบ Animation และแบบ Custom ได้

เมื่อรวมวิดเจ็ตต่างๆ คุณสามารถสร้าง UI ที่ซับซ้อนซึ่งมีลักษณะเดียวกันกับระบบปฏิบัติการรุ่นต่าง ๆ ด้วย Library ต่างๆ จาก community ที่สามารถนำไปใช้งานได้อย่างง่ายดาย แอปพลิเคชันของคุณจะดูเรียบเนียนและราบรื่น และทุกสิ่งที่คุณเห็นบนหน้าจอสามารถปรับแต่งได้ด้วยการรองรับภาพเคลื่อนไหวของ Flutter!

ใช้ทำ MVP ได้สมบูรณ์แบบ

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

คุณลักษณะการ Reload ที่ช่วยอำนวยความสะดวกในการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนา

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

แอพพลิเคชั่นมีการตอบสนองสูง

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

สรุป

เราสามารถตั้ง Flutter ให้เป็นผู้เปลี่ยนเกมในโลกแห่งการพัฒนาข้ามแพลตฟอร์มได้อย่างไม่ต้องสงสัย ฟีเจอร์ที่โดดเด่นทั้ง 7 นี้ทำให้ Flutter แข่งขันได้อย่างยอดเยี่ยมท่ามกลางเครื่องมือพัฒนา

ทีมา https://levelup.

อะไรคือสิ่งที่ UX ในปี 1989 สอนเรา?

อะไรคือสิ่งสำคัญในบริบทของผู้ใช้เมื่อออกแบบผลิตภัณฑ์ที่น่าสนใจ?

ผู้เขียนขอพาพวกคุณกลับไปในยุค 1989 ก่อนที่จะมีไอโฟน เกม ออฟ โทรน และเน็ตฟลิกซ์

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

นินเทนโดขายเกมบอย เซก้าขายเกมเกียร์ และอาตาริขายลิงซ์ ซึ่งเกมเกียร์และลิงซ์เป็นจอภาพสี มีทั้งหมด 4,096 สี ในขณะที่เกมบอยเป็นสีเทา 4 เฉดบนจอสีเขียว เกมเกียร์และลิงซ์เล่นง่ายกว่ามาก และมีขนาดใหญ่กว่า

จากข้อมูลที่กล่าวมา คุณคิดว่าเกมคอนโซลอันไหนที่คุณจะซื้อ? คำใบ้ เกมคอนโซลอันหนึ่งขายได้ 180.7 ล้านก๊อปปี้ ในขณะที่อีกสองอันที่เหลือขายได้ 3 และ 10.67 ล้านก็อปปี้

ขณะที่เกมเกียร์และลิงซ์ที่มีเทคโนโลยีสูงกว่า แต่เกมบอยกลับครองยอดขาย 180.7 ล้านเครื่อง และเป็นเกมคอนโซลที่ขายดีที่สุดในศตวรรษที่ 20

ทำไมถึงเป็นอย่างนั้นไปได้....?

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

ทีมของนินเทนโดสร้างเกมบอยด้วยการตัดรายละเอียดที่ไม่จำเป็นทิ้งให้หมด พวกเขาใช้เทคโนโลยีชาร์ป โพรเซสเซอร์ซึ่งมีมาตั้งแต่ยุค 1970 พวกเขาทำให้เครื่องเกมบอยมีขนาดเล็กๆ ไม่มีสี และไม่ค่อยใช้ลูกเล่นทางกราฟิก ทำให้มีราคาถูก คนซื้อหาได้ สนนราคาเพียง 90 ดอลล่าร์สหรัฐ ในขณะที่เกมเกียร์ราคา 150 ดอลล่าร์สหรัฐ และลิงซ์ราคา 180 ดอลล่าร์สหรัฐ ถึงแม้มันจะมีขนาดเล็ก แต่พอเหมาะกับกระเป๋าขนาดใหญ่ และสามารถเล่นได้ถึง 30 ชั่วโมงด้วยถ่านขนาด AA 2 ก้อน ในขณะที่เกมเกียร์ต้องใช้ถ่าน AA 6 ก้อนและเล่นได้เพียง 3-5 ชั่วโมงเท่านั้น

จากการสัมภาษณ์คุณยูกิฮิโตะ โมริคาวะ ซึ่งเป็นประธานบริษัทมูมู เขาได้ให้สัมภาษณ์สั้นๆ ก่อนที่โยโคอิจะเสียชีวิต ว่า ตอนแรกนินเทนโดต้องการให้เป็นเกมสี แต่โยโกอิผลักดันให้เป็นสีขาวดำ เพราะโยโกอิเข้าใจเรื่องประสบการณ์ผู้ใช้เป็นอย่างดี และเกมคอนโซลที่มีราคาเป็นมิตรต่อผู้ใช้จะเข้าถึงผู้ซื้อจำนวนมากกว่า เขาจึงสร้างเกมขาวดำ ขนาดเล็ก และเล่นได้นาน หากสนใจบทสัมภาษณ์ฉบับเต็มของโยโกอิ เชิญคลิกลิงก์นี้ค่ะ : http://shmuplations.

5 ตัวอย่าง วิธีการสร้างกระบวนการเกมมิฟิเคชั่นในที่ทำงานที่เป็นการเปลี่ยนรูปแบบใหม่ในการฝึกอบรมของบริษัท

การเป็นที่ยอมรับและรางวัลเป็น2สิ่งสุดยอดที่สร้างแรงจูงใจให้พนักงาน แล้วทำไมพวกเขาถึงไม่เอาสิ่งเหล่านี้มาเป็นกลยุทธ์ในการเรียนรู้ล่ะ ทำให้กระบวนการเกมมิฟิเคชั่นเหมาะสมในการฝึกอบรมของบริษัท  จากบทความนี้ ดิฉันขอแบ่งปัน 5 ตัวอย่าง กระบวนการเกมมิฟิเคชั่นในที่ทำงาน

 

5 ตัวอย่างวิธีการเปลี่ยนรูปแบบใหม่ในการฝึกอบรมของบริษัท ด้วยเกมมิฟิเคชั่น

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

 

การเรียนรู้กระบวนการเกมมิฟิเคชั่นทางอิเล็กทรอนิกส์คืออะไร

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

หลักสูตรการเรียนรู้กลยุทธ์กระบวนการเกมมิฟิเคชั่นผ่านอิเล็กทรอนิกส์โดยปกติมีเค้าโครงเรื่อง และ มีลักษณะท้าทาย, รางวัล และ การวิเคราะห์ ตามที่แสดงไว้ที่นี้

 

ส่วนประกอบของกระบวนการเกมมิฟิเคชั่นที่ได้ใช้ในการฝึกอบรมทางออนไลน์ของบริษัทคืออะไร

จาก อีไอ ดีไซน์  ทำให้เรามีแนวปฏิบัติตามกระบวนการเกมมิฟิเคชั่นโดยใช้ส่วนประกอบหลักในการสร้างกลยุทธ์ของกระบวนการเกมมิฟิเคชั่นดังนี้:

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

กระบวนการเกมมิฟิเคชั่นได้ใช้ในที่ทำงานเพื่อพัฒนาการเรียนรู้ได้อย่างไร

กระบวนการเกมมิฟิเคชั่นเป็นกลยุทธ์การเรียนรู้ที่มีประสิทธิภาพซึ่งจะใช้ในการพัฒนาการเรียนรู้จากประสบการณ์ได้สำคัญยิ่ง เนื่องจากว่า

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

กล่าวคือ

กระบวนการเกมมิฟิเคชั่นกล่าวถึงการใช้กฎการแก้ไขทำซ้ำและมีระบบการจดจำแบบเว้นระยะเพื่อให้ใส่ใจการเปลี่ยนแปลงพฤติกรรมอย่างเห็นได้ชัด
เกมจะ “สนุก” สำหรับผู้เรียน ทว่าพัฒนาการเรียนรู้อย่างสำคัญ กล่าวอีกนัยหนึ่งว่า ผู้เล่น(ผู้เรียน)จะได้ “สนุก” เนื่องจากพวกเขาดีขึ้นผ่านเกม แล้วยังจะได้ความรู้จากประสบการณ์ “การเรียนรู้” ขณะพวกเขาจดจ่อกับการเล่นเกม
การติดพันการเล่นเกมอยู่ในระดับสูงๆได้ใช้กลยุทธ์การเพิ่มความรู้

 

คุณคาดว่าจะได้รับผลกระทบอะไรขณะใช้กระบวนการเกมมิฟิเคชั่นเป็นกลยุทธ์ในการเรียนรู้

คาดการณ์ผลกระทบเกิดขึ้นมากมายดังนี้:

ผู้เรียนเกิดแรงจูงใจในการเพิ่มฐานความรู้ขององค์กร เนื่องจากตอบสนองสภาพแวดล้อมในการเรียนรู้
การออกแบบทางออกโดยใช้การบูรณาการทางกลศาสตร์เกมเข้าไปในการเรียนรู้ของผู้เรียน(gamified solutions) ที่กล่าวถึงความสนใจของผู้เรียนโดยตรง สำคัญที่ช่วยยกระดับการมีส่วนร่วมของผู้เรียน และเชื่อมั่นว่าเก็บรักษาความรู้ไว้ได้อยู่
ผลลัพธ์ที่ได้ องค์กรจะเห็นการพัฒนาผลการปฏิบัติงานของพนักงาน เนื่องจากพวกเขาสามารถนำสิ่งที่เรียนรู้มาประยุกต์ใช้งานได้ดีขึ้น และเป็นไปตามความคาดหวังไว้ โดยเป็นการชี้วัดได้ชัดเจนว่าพันธกิจด้านการเรียนรู้ขององค์กรประสบกับความสำเร็จ

5ตัวอย่างกระบวนการเกมมิฟิเคชั่นในที่ทำงาน

ช่วง 4 ปีที่ผ่านมา กลยุทธ์ด้านกระบวนการเกมมิ่งฟิเคชั่นได้พัฒนาไปอย่างสมบูรณ์แบบ ในปัจจุบันเราใช้วิธีก้าวไปไกลกว่าเหรียญตรา และอันดันคะแนนในการใช้งาน ตลอดจนยกระดับวิธีการอื่นเช่น  ความเป็นส่วนตัว วิธีการเรียนรู้ที่ให้เนื้อหาสั้นและกระชับ(microlearning) การเรียนรู้ทางสังคม(social learning) แอพมือถือ และ การจัดทำเว็บการเรียนรู้(learning portals)

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

 

วิดีโอนี้จะช่วยคุณตอบข้อสงสัยและสาธิตกระบวนการเกมมิฟิเคชั่นในที่ทำงานจะเปลี่ยนรูปแบบการฝึกอบรมของบริษัทคุณได้อย่างไร

ตัวอย่างแบบเดียวกันได้รวมอยู่ในวิดีโอนี้เช่นกัน

ระดับ 1  มีกระบวนการเกมมิฟิเคชั่นบางส่วน

การเข้าใช้ระดับในกระบวนการเกมมิฟิเคชั่นจะประยุกต์ได้ดังนี้

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

ตัวอย่างที่ 1: แบบทดสอบการทำเกมมิฟิเคชั่น

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

ระดับ 2: การเรียนโดยใช้เกมเข้ามาช่วย

ในกรณีนี้ เปลี่ยนเส้นทางการเรียนรู้ทั้งหมดให้เป็นเกม โดยแสดงคะแนน เหรียญตรา และ อันดันคะแนนในการใช้งาน

ตัวอย่างที่ 2: หลักสูตรการปฏิบัติตามวิศวกรรมสังคมที่เปลี่ยนไปเป็นเกมกระดาน

ตัวอย่างในที่นี้เป็นแนวปฏิบัติด้านการปฏิบัติตามกฎเกณฑ์ที่ทำให้มีส่วนร่วมในการใช้วิธีเอาเกมเข้ามาช่วยได้มาก ในที่นี้ ผู้เรียนต้องเลือกตัวละคร แล้วบทบาทที่พวกเขาจะเล่นนั้น เป็นการท้าทายการเล่นให้ครบขณะเดียวกันผู้เรียนก็พัฒนาผ่านเกม ระดับความยากในการท้าทายการเล่นกำหนดโดยการทำงานร่วมกันของ “ การหมุนลูกเต๋า” ขณะที่ผู้เรียนมุ่งท้าทายการเล่นให้ครบ ผู้เรียนก็จะเก็บแต้มหรือเจอโทษปรับ เป็นวิธีที่ให้พวกเขาจัดการกับสถานการณ์                               

ระดับ3: แนวทางการเรียนรู้การทำเกมมิฟิเคชั่น

ในระดับนี้จะสะท้อนให้เห็นถึงแนวทางการเรียนรู้ที่ทำให้เกิดการแข่งขันรวมกับความชำนาญจนบรรลุผลสำเร็จในระดับต่างๆ อีกทั้งยังแสดงคะแนน เหรียญตรา และอันดับคะแนนในการใช้งาน

ตัวอย่างที่ 3: การฝึกอบรมด้านผลิตภัณฑ์จากการทำเกมมิฟิเคชั่น

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

ตัวอย่างที่ 4: การจัดเว็บท่า หรือ พอร์ทัลการเรียนรู้จากแบบทดสอบการทำเกมมิฟิเคชั่น

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

ระดับ4:เว็บท่าของการทำเกมมิฟิเคชั่น

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

ตัวอย่างที่ 5: ความรู้จากประสบการณ์การเรียนรู้การทำเกมมิฟิเคชั่นเสร็จสิ้น

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

บทสรุป

ดิฉันหวังว่า 5 ตัวอย่างกระบวนการเกมมิฟิเคชั่นในที่ทำงานจะให้คุณเข้าใจแบบถ่องแท้ รู้ลึก รู้จริงว่าคุณจะใช้ระดับต่างๆของกระบวนการเกมมิฟิเคชั่นอย่างไรที่จะทำให้ผลกระทบในเรื่องการฝึกอบรมของบริษัทคุณดีขึ้นอย่างสำคัญ

 

ที่มา https://elearningindustry.

Flutter Framework เครื่องมือที่ประสิทธิภาพในการสร้าง native app แบบหลาย platform

เมื่อเราต้องการจะสร้าง UI ที่มีคุณภาพดีในมือถือ เราจำป็นต้องเลือกเครื่องมือที่ตอบโจทย์เพื่อทำให้ process นั้นง่ายขึ้น ในทางตรงกันข้าม ถ้าเราเลือกผิดจะทำให้สถานการณ์แย่ลงและอาจกลายเป็นสาเหตุของความล้มเหลวได้เลย ผู้เขียนพนันได้เลยว่าไม่มีใครอยากเริ่มทำใหม่ตั้งแต่แรกอยู่แล้ว นี่จึงเป็นเหตุผลที่คุณควรใส่ใจกับ UI framework ที่มีความ advanced ในการพัฒนาแอพอย่าง Flutter

เรามาลองดูกันว่า ทำไม framework ตัวนี้ถึงมีความคุ้มค่าในการใช้พัฒนาแอพ และ ประสิทธิภาพของมันเป็นอย่างไร
Flutter คืออะไร?
เมื่อเปลายเดือนกุมภาพันธ์ ปี 2018  google เปิดตัว flutter framework แบบ beta เวอร์ชันแรก นี่เป็น เครื่องมือ การสร้าง native interface สำหรับ android และ iOS และในเดือนสิงหาคม ปี 2019 ก็ได้ออกเวอร์ชัน 1.7.8 เป็นเวอร์ชันล่าสุด ณ ตอนนี้

อะไรทำให้ Flutter เป็น Framework ที่วิเศษมากขนาดนั้น  เพราะว่า framework สามารถพัฒนา native app แบบ cross-platform ได้ การรวบรวมข้อมูล Native ให้ตัวประมวลผล ARM นั้น ช่วยให้การพัฒนาง่ายขึ้น มีการ render ที่ง่ายขึ้น พวกชุดเครื่องมือ, widgets, และ features ก็มีส่วนช่วยให้ process นั้นง่ายขึ้นเช่นกัน แล้วมีอะไรเพิ่มเติมอีกล่ะ นอกจากการเป็น Framework แบบ open source ก็อย่างที่บอกไปที่ว่ามันเป็นแบบ open source  Developer ที่ไหนก็สามารถ แก้ไขงานใน Frame work ที่ GitHub ได้แบบ real-time  ดังนั้น Developer จึงมีส่วนช่วยพัฒนาให้ Flutter นั้นดีขึ้น

ในด้านของ features นั้น หนึ่งใน feature ที่น่าสนใจทีสุดเลยก็คือ ปุ่ม Hot reload ถ้าคุณกดปุ่มนี้ การเปลี่ยนแปลงทั้งหมดที่เขียนภายใน code จะปรากฎขึ้นที่หน้าจอทันที เราจึงสามารถปรับแต่ง ตัว UI ได้อย่างง่ายดาย แต่มันก็มี surprise อย่างหนึ่งที่ไม่เหมือน framework อื่นๆของ google คือ framework ตัวนี้ใช้ Dart ในการพัฒนาแอพ
Flutter เวอร์ชันล่าสุดมีอะไรดีบ้าง?

DevTools เป็นเครื่องมือที่ใช้แก้ bug ได้ดีใน Flutter และ Dart  ผู้พัฒนาสามารถ วิเคราะห์ layout และ state ในแอพได้ สามารถแก้ปัญหาเกี่ยวกับความจำ ใน Flutter appได้ หรือว่าปัญหา command line ใน Dart  และแก้ไข bug อื่นๆอีกมากมาย
Widget ใหม่ google ให้ความสนใจกับ widget อย่างมาก เพื่อให้ผู้ใช้ ใช้งานได้อย่างมีประสิทธิภาพ Flutter เวอร์ชันล่าสุด ได้สร้าง Slider ตัวใหม่มา เพื่อสร้าง range ที่ดูดี ตัวอย่างเช่นเมื่อผู้ใช้ต้องการจะเปลี่ยนช่วงราคาในแอพ mCommerce พวกเขาจึงต้องใช้ widget ที่ดึงความสนใจได้
plugin ที่สามารถซื้อในแอพได้เลย ตอนนี้ มีการเพิ่ม plugin ใหม่ใน Flutter ที่สามารถใช้ซื้อสิ่งต่างๆได้ใน แอพ
รองรับ AndroidX google ได้มีการ support Android มากขึ้น โดยการนำ Android x เข้ามาใช้ ทำให้การสร้างแอพมีประสิทธิภาพมากขึ้น
รองรับ Android bundles ในเดือนสิงหาคม ปี 2019 แอพทั้งหมดที่สร้างสำหรับ Android pie ต้องรองรับในทั้งเวอร์ชัน 32-bit and 64-bit ใน Google play store
Fonts ใหม่ UI ในเวอร์ชั่นล่าสุดนั้น มีการออกแบบตัวพิมพ์ใหม่ทีเพิ่มตัวเลขและตัวอักษร ใหม่ๆหลาย style ขึ้นมา การ Interaction กับ fonts ใน iOS ก็ได้รับการพัฒนาเช่นกัน

ทำไมถึงต้องใช้ Flutter ถ้าคุณต้องการจะสร้างแอพแบบ cross-platform
Flutter สามารถจัดการไฟล์ที่ไม่เป็นระเบียบได้ในโหมด Development การรวบรวม Jit ช่วยให้การพัฒนาและการแก้ bug นั้นเร็วขึ้น นอกจากนั้น Framework ตัวนี้ยังรองรับ plugins หลายๆอย่างๆ เช่น Firebase หรือ SQLite   Pub.

ขั้นตอนวิธีสร้าง App โดยใช้ Flutter ( Flutter Tutorial Part 1 )

ใน tutorial นี้ เราจะมาสอนการสร้างแอพพลิเคชั่นโดยใช้ Flutter แบบ Step by step แอพที่สร้างขึ้นจะเป็นแบบ open source อยู่ที่ Aviacommerce platform, tutorial นี้โฟกัสไปที่ แอพพลิเคชั่นเพื่อที่จะนำเสนอ concepts ที่สำคัญของ flutter framework

Tutorial นี้เป็นแค่ส่วนแรกของ Tutorial ทั้งหมดเท่านั้น :-

วิธีการสร้าง App โดยใช้ Flutter
วิธีการทำ layout ใน App โดยใช้ Flutter (ยังไม่มา)
วิธีจัดการ data ใน flutter (ยังไม่มา)
วิธีการ listing ใน Flutter (ยังไม่มา)

Blog นี้จะอธิบายเกี่ยวกับวิธีการสร้าง layouts แนะนำแบบ step by step หากคุณต้องการดู code ทั้งหมดเลย โปรเจ็คทั้งหมดมี code อยู่ใน Github ถ้าอยากลองดูคุณก็สามารถไปดูก่อนได้เลย

ทีมของเรา (AviaCommerce) พยายามหาเกี่ยวกับ framework ที่สามารถพัฒนา software ในแบบใหม่ๆได้อยู่ตลอดเวลา เราได้ติดตามกิจกรรมหรือข่าวสารที่เกี่ยวกับ flutter ตั้งแต่ตัว Beta รุ่นแรกออก
ในที่สุด google ก็เปิดตัว Flutter 1.0, เป็นเครื่องมือ UI ตัวแรกที่มีความเสถียร เป็น Experiences ใหม่ๆในการใช้สร้างพวก native app สำหรับ iphone หรือว่า android จาก codebase เดียว
Flutter มีขั้นตอนการติดตั้งหลายขั้นตอนเพื่อให้เข้ากับสภาพคอมของเรา ให้ทำตาม คู่มือการติดตั้ง นี้ไปก่อน จากนั้นให้ดูต่อ

เมื่อติดตั้งเสร็จแล้ว ให้ลองสร้าง test project ผู้เขียนแนะนำให้ใช้ Android studio เพราะมันมี IDE ที่ครบเครื่องสำหรับ Flutter  Android studio จะต้องมี editor plugin ในการเขียน Dart ก่อน

เปิด Android studio ขึ้นมา คุณจะเห็น option ในการสร้างโปรเจค flutter ใหม่

ให้เลือก Flutter Application เมื่อหน้าต่าง configurations ขึ้นมา

ตั้งชื่อให้โปรเจคแรกของคุณ หรือจะตั้งชื่อว่า timer ตามผู้เขียนก็ได้

ขั้นตอนนี้ หน้าต่างจะขึ้นมาให้คุณใส่ชื่อ package

หลังจากนั้น Flutter SDK จะสร้าง Directory ทั้งหมดที่ต้องใช้ในแอพพลิเคชั่น สิ่งที่คุณทำทั้งหมดจะอยู่ใน Folder ที่ชื่อว่า lib และเราจะเริ่มเขียนในไฟล์ชื่อว่า main.

React native หรือ Flutter เราควรเลือกใช้ตัวไหนในการสร้าง Mobile app ดี?

ปัจจุบันการสร้างแอพพิเคชั่น แบบ Cross-platform กำลังเป็นที่นิยม ด้วย Framework ที่สามารถสร้าง Native app โดยไม่ต้องใช้ภาษา swift สำหรับ iOS หรือว่า Java สำหรับ Android เลย

React native และ Flutter เป็น Frameworkในการใช้สร้าง Appแบบ Cross-platform ที่ได้รับความนิยมอย่างมาก ปัจจุบันนี้ก็ได้ใช้สร้างแอพพลิเคชันเป็นหลายพันแอพเลยทีเดียว แต่ถ้าเราจำเป็นต้องเลือกระหว่าง Reactive หรือ Flutter เราควรจะเลือกใช้ตัวไหนดี?

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

ในฐานะที่ผู้เขียนนั้นเป็นผู้พัฒนา React native ผู้เขียนได้พยายามเขียนบทความนี้ขึ้นมาโดยไม่มีความลำเอียง

React Native และ Flutter มาพร้อมกับความคล้ายคลึงกันหลายๆ อย่างเช่น   การสร้างแอพแบบ Cross-platform โดยใช้ Code base เดียว มี Hot reloading   มี UI ที่ยอดเยี่ยมและ tooling ที่มีประสิทธิภาพ แต่อย่างไรก็ตาม Framework ทั้งสอง นี้ก็ยังมีข้อแตกต่างกันอยู่

เรามาลองเปรียบเทียบ React native และ Flutter ด้วยปัจจัยหลายๆอย่างกัน
Language (ภาษา)
React native

React native นั้นถูกเขียนทั้งหมดด้วย JavaScript นี่ก็เป็นข้อดีอย่างหนึ่งเลยสำหรับ React native เนื่องจาก JavaScript จัดเป็นหนึ่งในภาษาที่ได้รับความนิยมและผู้คนนิยมใช้เขียนโปรแกรมมากที่สุดในโลก การหา Developers สำหรับ JavaScript เป็นเรื่องที่ง่าย ดังนั้น การเรียนรู้ React native จึงเป็นเรื่องค่อนข้างง่ายสำหรับ JavaScript developer
Flutter

Flutter ถูกเขียนด้วยภาษาที่เรียกว่า Dart ถึงแม้ว่า Dart จะเป็น Choice ที่ง่ายต่อการเลือกใช้ และเป็นภาษาในการเขียนโปรแกรมที่ดี แต่มันก็ไม่ได้รับความนิยมเหมือนกับ JavaScript   Developer ที่เลือกใช้ Flutter จำเป็นต้องไปเรียนรู้ Dartก่อน โดยทั่วไปแล้ว Developers จาก C++ หรือ Java มักจะถนัด Dart มากกว่า Developer จาก JavaScript  ในความคิดของผู้เขียน, ด้วยประสบการณ์และช่วงเวลาของการเรียนรู้ Dart และเนื่องจากมันเป็นภาษาที่ค่อนข้างใหม่ ดังนั้น ผู้ชนะก็คือ React native

Winner: React native

 
Corporate Backing (บริษัทที่สนับสนุน)
React native

React native ถูกพัฒนาโดย Facebook และได้เปิดเผย Source code ในปี 2015   Facebook มีทีมวิศวกรคุณภาพที่ทำงานเกี่ยวกับ react native และได้พัฒนาให้ดีขึ้นอย่างต่อเนื่อง  เนื่องจากว่า Facebook ได้ลงทุนไปกับ react nativeอย่างมาก product ของ Facebook ส่วนมากจึงถูกเขียนขึ้นมาด้วย React native จึงทำให้React nativeได้รับความไว้วางใจและความนิยมอย่างมากในช่วงหลายปีที่ผ่านมา
Flutter

เมื่อเทียบกับReact native แล้ว flutter ถือว่าเป็น Framework ที่ยังใหม่อยู่ Flutter ถูกพัฒนาโดยบริษัทยักษ์ใหญ่อีกบริษัทคือ google นั่นเอง Flutter เป็น SDK open source ของ google สำหรับการสร้างแอพให้ Android หรือ IOS โดยใช้แค่ Codebase เดียว  google ได้ให้การสนับสนุน Flutter อย่างมาก เหมือนกับที่ Facebook ให้การสนับสนุน React native เรียกได้ว่า google ลงทุนทำให้ Flutter เป็นหนึ่งใน Solutions ที่ดีที่สุดในการสร้างแอพแบบ Cross-platform กันเลยทีเดียว

ในหัวข้อนี้ถือว่า React native และ Flutter เสมอกัน
What is Trending? (ตัวไหนกำลังเป็นที่นิยม)

ถ้าลองเราไปดูข้อมูทางสถิติที่ StackOverflow Survey of 2019 เราจะได้ข้อมูลว่า framework ตัวไหน ที่ Developers ส่วนใหญ่ชอบใช้กัน แบบสอบถามนี้ถามเกี่ยวกับว framework ที่ developers นั้นชอบมากที่สุด
Flutter อยู่ในอันดับสูงกว่าอยู่ที่ 75.4% และ React Native ก็ได้ทำสถิตไว้อยู่ที่  62.5% ในบรรดา framework ที่ได้รับความนิยมสูงสุด
สิ่งที่ควรคำนึงไว้เลยก็คือ React native นั้นมีมาหลายปีแล้วในขณะที่ Flutter นั้นพึ่งเปิดตัวมาได้ 1 ปี แล้วก็เริ่มได้รับความนิยมมากขึ้นเรื่อยๆ ดังนั้นเราจึงต้องทำการเปรียบเทียบแบบเดียวกันในปีหน้าเพื่อดูผลว่าเป็นอย่างไร

ดูจาก Trend ในปัจจุบัน จะได้ว่าผู้ชนะคือ Flutter นั่นเอง

Winner: Flutter

 
Performance (ประสิทธิภาพการทำงาน)
ตอนนี้มีความคิดทั่วไปที่ว่า Flutter ทำงานได้ดีกว่า React native อาจจะเป็นเพราะมันไม่มี JavaScript เป็นตัวเชื่อมในการติดต่อกับพวก Native component เหมือนกับ React native  Dart นั้นถูก compiled ไปที่ machine code เลย ทำให้ performance ของ Flutter นั้นดีกว่า React native ที่ต้องมี JavaScript เป็นตัวสะพานที่ใช้เชื่อม

Winner: Flutter

 
Adoption (การนำมาใช้)
React native
React native ถูกใช้นำอย่างกว้างขวาง ความนิยมบางส่วนของมันอาจจะมาจาก React พูดได้เลยว่า Developer ของ React แค่ก้าวเพียงก้าวเดียวก็สามารถมา develop แอพที่เขียนด้วย React native ได้อย่างง่ายดาย ทุกวันนี้ product อย่าง Facebook, Instagram, Uber Eats, Tesla, Bloomberg, และอีกมากมายใช้ React native ในการสร้างAppขึ้นมา
Flutter
เนื่องจาก google เป็นผู้พัฒนา Flutter ขึ้นมา ในปีนี้ตัว Flutter เองจึงได้รับความสนใจค่อนข้างมากเช่นกัน

Alibaba ซึ่งเป็นยักษ์ใหญ่ในการช้อปปิ้งออนไลน์ได้นำ Flutter มาใช้กับหนึ่งในแอพมือถือของพวกเขา Google ad และ Hamilton music ก็ได้รับการพัฒนาโดยใช้ Flutter แต่นอกเหนือจากนี้แล้ว ยังไม่ค่อยมีแอพในApp storeที่ถูกพัฒนาด้วย Flutter

นี่ก็เป็นอีกหัวข้อหนึ่งที่เราจำเป็นต้องดูในปีหน้าว่ามี Products จำนวนเท่าไรที่นำมาใช้ร่วมกับ Flutter

Winner: React native

 
Job Prospects (ความต้องการของตำแหน่งงาน)
ด้วยความที่ React native นั้นมีมาก่อนหน้านั้นนานแล้ว มีการใช้react และ JavaScript (เป็น 2 ตัวที่ได้ระความนิยมสูง) ในการเขียน ทำให้มีโอกาสความในการรับเข้าทำงานที่สูงกว่า

ดูจากข้อมูลทางสถิติที่ StackOverflow Survey of 2019 ระบุไว้ว่าเมื่อเปรียบเทียบกันแล้ว React native เป็นที่ต้องการมากกว่า สิ่งนี้สามารถบอกเราได้เลยว่า มีงานที่ใช้ React native มากว่า Flutter

เรายังไม่สามารถรีบด่วนสรุปออกมาได้ เนื่องจากตำแหน่งงานที่มีอยู่ทุกวันนี้ Flutter ยังคงใหม่อยู่ ไม่แน่ว่าในอีกหลายๆปีข้างหน้า อาจมีความต้องการ developers ของ Flutter เพิ่มมากขึ้น แต่ปัจจุบัน มีงานสำหรับ React native อยู่มากถ้าเทียบกับ Flutter นี่ก็เป็นเพราะว่า Developers ของ React native ก็คือ Developers ของ React ด้วยนั่นเอง
React Native นั้นมีอันดับที่สูงกว่าอยู่ที่ 13.1% และ Flutter อยู่ที่ 6.7% ในบรรดา Framework ที่มีความต้องการมากที่สุด
Winner: React native

 
Conclusion (สรุป)
เป็นช่วงเวลาที่น่าสนใจใน mobile development เรากำลังไปไกลจากการที่เป็นแค่การพัฒนาใน iOS หรือว่า Android และรวบรวมเทคโนโลยีใหม่ๆที่สร้าง mobile apps แบบ cross-platform อย่างไรก็ตาม ถึงแม้ว่าทุกวันนี้ React native จะมีฐานที่มั่นคง แต่ Flutter ซึ่งเป็นผู้แข่งขันที่เกิดขึ้นมาใหม่และผู้เขียนก็มั่นใจว่าในอนาคตหน้าจะมีคนมากมายเข้ามาใช้งาน Flutter อย่างแน่นอน

ในการเลือกเทคโนโลยีใหม่ๆมาศึกษาเรียนรู้ มันขึ้นอยู่กับการใช้งานของคุณ ถ้าคุณถนัดในการเขียน C++ หรือว่า Javaแล้ว คุณก็อาจจะชอบ Flutter ก็ได้ แต่ถ้าคุณชอบ JavaScript มากกว่า React native จะเป็น option ที่ดีกว่าสำหรับคุณ

บทความแปลจากเว็บไซต์: medium

 

 

วิธีการติดตั้ง React ตั้งแต่เริ่มต้น

แม้ว่า React จะได้รับความนิยมอย่างมาก แต่การติดตั้งแอปพลิเคชั่นตั้งแต่เริ่มต้นนั้นกลับเป็นงานที่ยากลำบาก เพื่อแก้ปัญหาสิ่งเหล่านี้ Facebook มาพร้อมกับฟีเจอร์อย่าง create-react-app เพื่อให้เป็นมิตรกับผู้ใช้ วันนี้ลองใช้เวลาในการทำความเข้าใจความซับซ้อนของแอพ React กัน

(more…)

10 Front-End Framework มาแรงในปี 2018

เมื่อต้องพัฒนาเว็บไซต์ใหม่ Front-End Framework ช่วยให้คุณสามารถเริ่มงานได้ทันที ด้วยความนิยมของ framework จึงทำให้มี Front-End Framework ให้เลือกใช้งานหลายแบบและยังมี framework ใหม่ๆ ออกมาอยู่เสมอ

(more…)

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 2

สวัสดีครับ ยินดีต้อนรับสู่ Part 2 ครับ

เพื่อเป็นการไม่เสียเวลาเรามาดูกันเลย

Split Screens

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

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

เว็บไซต์สารานุกรม ใช้หน้าจอแยกสำหรับแบ่งหน้ารายการ

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

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

 

แอป Watering Tracker จะใช้หน้าจอแยกแนวนอน: ส่วนบนที่มีพื้นหลังที่มืดเป็นที่ดีสำหรับการนำเสนอแผนภูมิและภาพ ในขณะที่ส่วนที่ต่ำกว่าใช้พื้นหลังโทนสว่าง เพื่อให้อ่านง่าย

 

Bold Typography

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

Landing Page ของ Big City Guide ใช้วิธีประยุกต์ลำดับตัวอักษร และ ภาพ ทำให้ชื่อของเมือง ดูกลืนไปกับตัวภาพ ยังไม่หมด คนออกแบบยังใช้เทคนิคการตัด และสลัก หัวข้อหรือคำสำคัญลงไป ด้วยวิธีการแบบนี้จะทำให้ตัวอักษรดู ผสมผสานกลมกลืนไปกับตัวภาพ ราวกับเป็นหนึ่งเดียวกัน

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

Buttonless UI 

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

แอพสารานุกรมนำเสนออินโฟกราฟิกแบบโต้ตอบ สำหรับข้อมูลช้าง การโต้ตอบทั้งหมดกับข้อมูลเกิดขึ้นโดยปราศจากปุ่มต่าง ๆ แต่จะใช้การเลื่อนเพื่อดูข้อมูลแทน

Vibrant and Bold Colors

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

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

Engaging Interface Animation

การให้หน้า UI เคลื่อนไหวยังคงเป็นประเด็นเถียงกันแรง เพราะสิ่งที่แอนิเมชั่นทำคือ ฟีเจอร์ที่ไม่จำเป็น แถมยัง overload ตัว UI ของผู้ใช้งาน ยิ่งทำให้ดูซับซ้อน ผู้ใช้มักคาดหวังว่าแอนิเมชั่นคือ ส่วนสำคัญที่ทำให้แอพมีปฎิสัมพันธ์กับผู้ใช้ ดังนั้น ทั้งนักออกแบบ และ นักพัฒนา จึงพยายามค้นหาวิธีต่างๆเพื่อให้ตอบโจทย์นี้ สิ่งที่ได้คือ ให้มันขยับนิดขยับหน่อย (Microinteractions) ให้ปุ่ม สวิตซ์ หรือแถบเปิด-ปิด ได้เคลื่อนไหว

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

Slumber App มีจุดเด่นเรื่องหน้าจอหลัก ภาพ illustration ที่ทำงานร่วมกับ preloading ช่วยให้การรอไม่น่าเบื่อ และบวกกับการเล่นกับความสุนทรีย์

จบ Part 2 จ้า โปรดติดตามชมตอนต่อไป
Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp
เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill

พิชิตปัญหาคุยกับไอทีไม่รู้เรื่อง ด้วยภาษาอังกฤษ!

เคยไหมที่ไอทีพูดอะไรก็ไม่รู้ แล้วคุณรู้สึกปวดหัวไหม?

เคยอยากลองแก้ปัญหาไอทีเอง แล้วรู้สึกศัพท์อะไรไม่รู้เต็มไปหมด?

ต้องปฎิเสธไม่ได้เลยทุกวันนี้คุณต้องใช้เทคโนโลยี และก็ต้องพบกับปัญหาหรือการเรียนรู้มากมาย ไม่ว่าจะเป็น

(more…)