มาทำความรู้จักกับ Fluent Design System
ในช่วงสัปดาห์ที่ผ่านมา ข่าวใหญ่ในวงการออกแบบที่ทุกคนคงจะได้เห็นกันเรื่องหนึ่งก็คือ การเปิดตัวแนวทางการออกแบบใหม่จากฝั่ง Microsoft ที่ชื่อว่า Fluent Design System ซึ่งมีหลักการ แนวคิด จุดสังเกต ที่แตกต่างจากแนวทางของเจ้าอื่นๆที่ออกมาก่อนหน้านี้ นั่นทำให้มันมีความน่าสนใจ และในฐานะนักออกแบบก็ควรจะต้องรู้จักแนวคิดนี้ไว้ เพราะเราอาจได้ข้องเกี่ยวกับมันในอนาคต
วันนี้เราเลยอยากจะมาพูดถึง Fluent Design System พร้อมทั้งตั้งข้อสังเกตไปในคราวเดียวกัน เพื่อเป็นข้อมูลให้พวกเราสามารถนำไปประยุกต์ใช้กันได้
Fluent Design System มองการออกแบบต่อจากนี้ว่า ‘ถึงเวลาต้องเปลี่ยนแปลงเข้าสู่ยุคของประสบการณ์ที่สามารถสัมผัสได้ ให้ทุกสิ่งอยู่ที่ปลายนิ้วมือของเรา’ เรียกเป็น ‘Sensory Experiences’ แนวทางในการออกแบบจึงเลือกใช้องค์ประกอบที่มีความเสมือนจริง เพื่อให้ผู้ใช้งานได้รับความรู้สึกต่างๆที่สมจริง โดยมีองค์ประกอบหลักอยู่ 5 อย่าง คือ แสง, ระยะ, ความเคลื่อนไหว, วัสดุ และ การเปลี่ยนแปลงรูปทรง
มาดูกันว่าแต่ละองค์ประกอบเป็นอย่างไร
1.แสง – Light
การใช้แสงนั้น สามารถสร้างความรู้สึก นุ่มนวล อบอุ่น เชื้อเชิญ สร้างบรรยากาศที่แตกต่างได้ และแสงเป็นสิ่งที่ดึงความสนใจของผู้ใช้ เน้นให้เห็นสิ่งต่างๆได้ชัดเจน
จากตัวอย่างตามภาพจะเห็นว่า การใช้แถบแสงจางๆในการบอกสิ่งที่ถูกเลือกนั้น มีความนุ่มนวล กลมกลืน กับองค์ประกอบทั้งหมด แต่ก็สามารถสร้างขอบเขตแบ่งแยกเฉพาะสิ่งที่ต้องการให้เราเห็นได้ชัดเจน
2.ระยะ – Depth
ลืมความคุ้นเคยเดิมๆ ที่อินเตอร์เฟสทั้งหมดอยู่บนระนาบแบนๆไปได้ เพราะในแนวคิดนี้ สิ่งที่เราจะเห็นทั้งหมด ให้เราคิดว่าอินเตอร์เฟสมันกำลังลอยอยู่ในพื้นที่ว่าง สิ่งต่างๆจะมีระยะ มิติ ความใกล้ความไกล มีความชัดเบลอที่ต่างกัน ทำให้ในการทำงานจากสิ่งหนึ่งไปอีกสิ่งหนึ่งจะได้รับความรู้สึกที่ต่อเนื่องลื่นไหลอยู่ในห้วงเดียวกัน
จากภาพจะเห็นว่าแม้จะอยู่ในหมวดหมู่เดียวกัน แต่สิ่งต่างๆมีการซ้อนทับ เหลื่อมล้ำ อยู่ในตำแหน่งที่ไม่เท่ากัน ความรู้สึกของพื้นที่ว่างอันกว้างใหญ่ ทำให้ถึงแม้จะมีไอคอนมากมาย แต่การที่อยู่คนละระยะ ทำให้ไม่รู้สึกอึดอัด หรือถูกรบกวนสายตาในสิ่งที่ต้องการ
3.ความเคลื่อนไหว - Motion
ความเคลื่อนไหวที่ต่อเนื่อง ลื่นไหล ทำให้ผู้ใช้สามารถจดจ่ออยู่กับสิ่งที่ทำได้อย่างไม่มีสะดุด และความเคลื่อนไหวก็ยังทำให้รู้สึกถึงสิ่งที่มีชีวิตอีกด้วย
ภาพตัวอย่างที่เป็นภาพนิ่ง จะอธิบายความเคลื่อนไหวได้อย่างไร ได้สิ จากภาพสามเหลี่ยมทั้ง 4 กลุ่ม จะเห็นได้ว่า ความเคลื่อนไหวในแนวคิดนี้ จะเลือกใช้ความไม่พร้อมเพรียง การขยับไม่เป็นจังหวะที่เท่ากัน มีช้ามีเร็ว มีการยืดหดที่ไม่เท่ากัน เพื่อให้แต่ละชิ้นเหมือนมีชีวิตเป็นของตนเอง
4.วัสดุ – Material
วัสดุเป็นองค์ประกอบที่สำคัญที่สร้างความรู้สึกที่สมจริงให้กับงานออกแบบ นอกจากพื้นผิวแล้ว ความยืดหยุ่น ความกระดอน ความหน่วงในการเคลื่อนที่ ที่ให้ความรู้สึกของน้ำหนัก ความทึบแสงโปร่งแสงสะท้อนแสง ยิ่งสมจริงเท่าไหร่ความรู้สึกที่เหมือนได้สัมผัสก็ยิ่งจริงเท่านั้น
จากภาพตัวอย่าง ก้อนสี่เหลี่ยมทั้ง 3 ชิ้น ให้ความรู้สึกของวัสดุที่แตกต่างกัน น้ำหนักที่แตกต่างกัน มีความแข็งนุ่ม การเด้งกระดอนที่ไม่เท่ากัน สิ่งเหล่านี้สามารถนำไปใช้ในการเลือกจับคู่วัสดุที่เหมาะกับบุคลิกของงานแต่ละอย่างได้
5.การเปลี่ยนแปลงรูปทรง – Scale
องค์ประกอบนี้คือการออกแบบแห่งอนาคต เหมือนเป็นการประยุกต์รวมองค์ประกอบก่อนหน้าทั้งหมด ลองคิดถึงการออกแบบด้วยอุปกรณ์ VR สิ่งต่างๆถูกสร้างขึ้นในอากาศ จากความว่างเปล่า0มิติ กลายเป็นภาพ 3มิติ เป็นการปรับเปลี่ยนขนาดรูปทรงกันแบบ Real Time เห็นรูปทรงทั้งหมดได้อย่างรอบด้าน ซึ่งเป็นการขยายขอบเขตของประสบการณ์ออกไปอีกขั้น
ภาพตัวอย่างคงไม่สามารถบอกอะไรได้ แต่ก็แสดงให้เห็นว่าการออกแบบในอนาคต เมื่อ VR เป็นสิ่งที่แพร่หลาย ทุกสิ่งจะต้องถูกคิดเผื่อถึงการปรับเปลี่ยนรูปร่างจากเส้นกลายเป็นวัตถุ การหดย่อขยายปรับขนาด หมุน เคลื่อนย้าย ให้เห็นได้ทุกมิติรอบด้านแบบ 360 องศา สิ่งที่ถูกสร้างขึ้นจะเป็นสสารที่ไม่สามารถจับต้องได้แต่รู้สึกได้ เกิดบทบาทใหม่ๆ ที่จะตามมาอีกมากมาย
หลังจากที่เรารู้จักองค์ประกอบหลักในแนวคิดของ Fluent Design System ทั้ง 5 อย่าง ก็จะเห็นได้ว่า นับเป็นแนวคิดที่ใส่ใจในรายละเอียดที่เน้นทางด้านประสบการณ์ที่ผู้ใช้จะได้รับเป็นสำคัญ ซึ่งในแต่ละองค์ประกอบก็มีสิ่งที่เป็นประโยชน์ ให้เราสามารถประยุกต์แนวคิดมาใช้ได้อย่างมากมาย ตั้งแต่แนวคิดหลักไปจนถึงรายละเอียดปลีกย่อยเล็กๆในแต่ละองค์ประกอบ
และนอกจากนั้น Fluent Design System ยังเปิดให้นักพัฒนาสามารถเข้าถึงได้ มารอดูกันว่า งานออกแบบหลังจากนี้จะออกมาในรูปแบบไหน และคงเป็นการเปิดประสบการณ์เปิดโลกใหม่ๆให้โลกของการออกแบบสนุกขึ้นอย่างแน่นอน
อ้างอิงจากบทความต้นฉบับโดย Microsoft
