โดยเมื่อไม่กี่ชั่วโมงที่ผ่านมา ทาง Microsoft เพิ่งเปิดตัวระบบดีไซน์ใหม่ของตัวเอง ซึ่งก่อนหน้านี้มี ภาพหลุด ออกมาในชื่อ Project Neon โดยเปิดตัวมาในชื่อ Fluent Design System ซึ่งจะถูกนำไปใช้กับ Windows 10
มาเล่าให้ฟังกันคร่าวๆก่อนว่า Design System ก็คือระบบแบบแผนที่เราใช้กันในบริษัทเพื่อนำเสนอภาพลักษณ์ขององค์กรและช่วยให้ทีมของเราทำงานไปในในทิศทางเดียวกัน จะได้ไม่หลุดคอนเซปต์ของบริษัทนั่นเองครับ และในบทความนี้เราจะมาดูกันว่าระบบดีไซน์ของไมโครซอฟต์อันนี้ประกอบด้วยอะไรบ้าง จะแปลกตาไปมากน้อยแค่ไหน ติดตามกันได้เลยครับแนวคิด Fluent Design System ของ Microsoft
[caption id="attachment_5678" align="aligncenter" width="2756"]
Fluent Design System[/caption]
ส่วนประกอบหลักของระบบดีไซน์นี้ประกอบไปด้วย 5 อย่าง คือ:
Light
การใช้แสงเพื่อดึงความสนใจของผู้ใช้ เช่น การทำเอฟเฟ็กต์แสงแบบ Glow แทนเม้าส์, หรือการกระพริบเพื่อแสดงว่ามีการชี้เม้าส์อยู่ หรือเป็น Feedback หลักจากคลิก ดูจากหน้าตาแล้วดีไซน์ทันสมัยไม่ใช่เล่นเลยล่ะครับ [caption id="attachment_5679" align="aligncenter" width="1624"]
Light - เอฟเฟ็กต์เวลาเอาเม้าส์ชี้[/caption]
Depth
แสดงความตื้นลึกบนระบบดีไซน์แบบ 2 มิติ เช่น การใส่เงา หรือการทำ Effect แบบ Parallax (ส่วนต่าง ๆ บนเว็บเคลื่อนที่ไม่พร้อมกันตอนผู้ใช้เลื่อนอ่านเนื้อหา) [caption id="attachment_5680" align="aligncenter" width="1620"]
Depth - เว็บไซต์แบบ Parallax[/caption]
Motion
ใช้การขยับ (Animation) ต่าง ๆ บนหน้าจอ เพื่อบอกผู้ใช้งานว่าต้องใช้งานตรงไหน ตัวอย่างเช่น การที่โปรแกรมอัดเสียงใน Windows มีการเพิ่มอนิเมชั่นวงกลมรอบ ๆ ปุ่มอัดเสียง [caption id="attachment_5681" align="aligncenter" width="1628"]
Motion - อนิเมชั่นใน UI Design[/caption]
Material
ทำให้ผู้ใช้รู้สึกว่าดีไซน์ของเราคล้ายกับวัสดุที่ผู้ใช้เห็นในชีวิตจริง สามารถยืด-หด หรือบิดได้เหมือนกันสิ่งของจริง ๆ เช่น การใช้ Glass Interface ที่เลียนแบบแก้ว [caption id="attachment_5682" align="aligncenter" width="1636"]
Material - Glass Interface ที่เลียนแบบแก้ว[/caption]
Scale
แปลงระบบดีไซน์จาก 2D ที่ทำกันอยู่ทั่วไป เป็นแบบ 3D ตัวอย่างที่เห็นได้ชัดในสินค้าของ Microsoft คือ การทำ VR (Virtual Reality) ด้วย Hololens นั่นเอง [caption id="attachment_5683" align="aligncenter" width="1622"]
Scale - การออกแบบด้วยเครื่องมือ 3D[/caption]
