ในงาน Build 2019 เมื่อต้นเดือนพฤษภาคม ไมโครซอฟท์ได้ประกาศขยายการใช้งาน Fluent Design System แนวทางการดีไซน์ส่วนติดต่อผู้ใช้ของบริษัท ที่แต่เดิมได้รับการออกแบบมาเพื่อใช้กับ Windows 10 โดยเฉพาะ ให้ครอบคลุมการพัฒนาแอพบนแพลตฟอร์มอื่นๆ ไม่ว่าจะเป็น เว็บ, Android และ iOS

เพื่อช่วยให้นักพัฒนาสามารถสร้างแอพที่ใช้แนวทางการออกแบบเดียวกันกับ Fluent Design และยังคงไว้ซึ่งความสอดคล้องกันของดีไซน์แม้ว่าจะเป็นแอพที่พัฒนาบนต่างแพลตฟอร์มได้สะดวกขึ้น

โดยได้เปิดให้นักพัฒนาเข้าถึงไลบรารีส่วนติดต่อผู้ใช้ (UI library) และเครื่องมือสำหรับการออกแบบ (Toolkit สำหรับ Figma, Sketch หรือ Adobe XD) ซึ่งเป็นไลบรารีและเครื่องมือชุดเดียวกันกับที่ทีมพัฒนาภายในไมโครซอฟท์ใช้สร้างแอพและผลิตภัณฑ์ของไมโครซอฟท์เองให้มีส่วนติดต่อผู้ใช้แบบ Fluent Design

ตัวไลบรารี Fluent Design ที่ไมโครซอฟท์เตรียมไว้ให้นักพัฒนาใช้เขียนแอพแบบเนทีฟบนแต่ละแพลตฟอร์มสามารถสรุปได้ดังนี้

• Windows UI สำหรับการพัฒนาแอพ Windows UWP รวมถึง WPF, WinForms และ Win32 (ผ่านการฝังคอนโทรลด้วย XAML Islands)
• Web UI Faric สำหรับการพัฒนาเว็บประกอบไปด้วย
  • Fabric Core (ชื่อเดิม Office UI Fabric) ไลบรารีพัฒนาเว็บแอพฝั่ง front-end (แบบเดียวกันกับ Bootstrap)
  • Fabric React ไลบรารีพัฒนาเว็บแอพด้วย ReactJS
• Fabric Android สำหรับการพัฒนาแอพ Android ด้วย Java, Kotlin
• Fabric iOS สำหรับการพัฒนาแอพ iOS ด้วย Objective-C, Swift

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

ทั้งนี้ Fluent Design บน iOS และ Android จะไม่ได้รับเอาแนวทางการออกแบบของ Fluent Design บน Windows มาทั้งหมด ซึ่งเป็นความตั้งใจของไมโครซอฟท์ที่ต้องการให้แอพซึ่งสร้างด้วย Fluent Design มีดีไซน์ของส่วนติดต่อผู้ใช้ที่สอดคล้องกับตัวระบบปฏิบัติการที่ผู้ใช้ใช้งานมากกว่า

ภาพตัวอย่างคอนโทรลแบบ Fluent Design บน iOS

ภาพตัวอย่างคอนโทรลแบบ Fluent Design บน Android

ไม่เพียงแค่นั้น ไมโครซอฟท์ยังบอกว่าในอนาคต บริษัทจะพัฒนา Fluent Design System ให้รองรับเทคโนโลยีพัฒนาแอพข้ามแพลตฟอร์ม อย่าง React Native หรือ Xamarin Form เพิ่มเติมอีกด้วย

นักพัฒนาท่านใดสนใจแนะนำให้เข้าไปชมวิดีโอจากงาน Build 2019 เซสชั่น Fluent Design System: the journey to cross-platform ได้ที่ลิงก์นี้ หรือเข้าไปอ่านเอกสารต่างๆ ได้เว็บนี้ครับ

ที่มา - ยูทูบ Microsoft Developer, MSPoweruser