Metro Style เป็นแนวทางการออกแบบจากทีมงาน Microsoft เป็นการออกแบบที่เน้นความเรียบง่าย ซึ่งเริ่มใช้ในอุปกรณ์ windows phone และใน windows 8 โดยหลักการที่สำคัญในการออกแบบที่สำคัญที่สุดแบบ Metro UI คือ เน้นการใช้ icon และกราฟฟิกเล็กน้อย ข้อความไม่มาก จะอยู่ในขอบเขตหรือกรอบที่กำหนดขึ้น เพื่อเป็นประหยัดพื้นที่ในสะดวกในการใช้งาน
แต่ถ้าหากพิจารณาดีๆแล้ว Metro Style เป็นการ design ที่ง่ายมากๆ ซึงมันก็คือการทำกล่อง เทสี ในเนื้อหา แค่นั้นเอง ซึ่งมันเรียกได้ว่า มันเกิดมาเพื่อ programmer เลยก็ว่าได้ค่ะ เพื่อให้ programmer ออกแบบได้ง่าย เหมาะสำหรับคนใช้งานมากที่สุด ซึ่งการออกแบบ แนว metro ui นั้นจะมีหลักในการออกแบบอย่างไรบ้างตามไปดูกันเลยคะ
Grid System เนี๊ยบกริบ ระบบกริดดูสะอาดตา โดยกรอบสี่เหลี่ยมหลายๆกรอบหลายๆบล็อคถูกจัดเรียงกันอย่างมีวินัย เลเอาต์มี รูปภาพ ตัวหนังสือ ปุ่มกด Icon องค์ประกอบต่างๆ ถูกจัดวางอย่างมีระเบียบภายใต้กรอบและระบบกริดที่สม่ำเสมอ เลเอาต์กลายเป็นตัวประกอบบางเบาที่ขับเน้นรูปภาพให้โดดเด่น
จัดการข้อมูลด้วยตารางอย่างลื่นใหล ลดกราฟฟิก จำกัดจำนวนของ navigator ให้เหลือภาพและหัวข้อที่สื่อสารตามลำดับชั้น ที่แสดงผลเนื้อหาต่างๆ ปิดพื้นที่ให้แสดง content ได้ชัดๆ โดยการลบเส้น ลบกล่องครอบ หรือว่าภาพประกอบ หรือ effect อย่าพยายามตีกรอบให้เนื้อหา ลดความสับสนของผู้ใช้
Big Picture รูปใหญ่กระแทกใจ รับรู้ถึงการสื่อสารที่ออกมาจากภาพนั้นได้ โดยใช้รูปขนาดใหญ่เป็นแบล็กกราวนด์ อาจจะวางตัวหนังสือบนพื้นหลัง หรือไม่มีก็ได้ เน้น Space บางคราวอาจเป็นเพียงภาพแบล็กกราวนด์เบลอๆ เป็นภาพคร็อบที่ไม่มีเนื้อหาแต่ว่าบอกถึง mood & Tone ของเนื้อหาได้
เข้าถึงเนื้อหาด้วยสไลด์ในแนวยาว เหมาะมากกับเนื้อหาที่ตัวหนังสือน้อยแต่จำนวนเยอะ การออกแบบให้คอนเทนต์มีลักษณะแนวยาวๆ แบบนี้ช่วยให้รู้สึกลื่นไหล และต่อเนื่อง พาให้เพลิดเพลินได้อยู่ค่ะ
Pivot หมุดจุดสำคัญ ปักหมุดลงไปบนเนื้อหาอย่างแผนที่หรือจุดใดจุดหนึ่งบนภาพ นอกจากทำหน้าที่เรียกร้องความสนใจจาก User แล้วยังใช้เป็น shortcut สู่การทำอะไรบ้างอย่างในนั้นได้เช่น read,checkin, Snap , Shared ได้
Live Tiles หน้าต่างถ่ายทอดสด Live Tiles ต่างกับ Widget ก็คือความเรียบร้อยเป็นสัดส่วนด้วยระบบ grid นี่เองค่ะคือการออกแบบให้ ALert หรือหน้าจอแจ้งเตือนเวลาที่มีอะไรใหม่ๆเข้ามาโดยอัตโนมัติ เพื่ออำนวยความสะดวกแก่ User ในระบบกริด Shortcuts เหล่านี้จะมีพื้นที่ของตัวเองได้อย่างลงตัว
Accent Color สีสดใส ควรเป็นสีประเภทที่ว่าบอกได้เลยว่าคือสีอะไร เป็นเนื้อแท้ๆของสีนั้นๆที่เข้มและสด สีที่สดและแตกต่างกันของแต่ละเนื้อหาโดยบางครั้งอาจต้องออกแบบให้ User สามารถที่จะกำหนดสีได้ด้วยตัวเอง เนื่องจากดีไซน์แบบนี้เน้นให้ประสบการณ์กับผู้ใช้ที่เขาพึงพอใจมากกว่า
ใช้ animation ให้เป็นประโยชน์ เพื่อบ่งบอก ถึง story ของ content ทั้งระบบควรเรียบง่ายแต่เน้นๆ โดยการอนิเมทที่สมาร์ทออกเท่ๆ ทันใจแบบน้อยๆแต่มีพลังมากพอให้ผู้ใช้เพลิดเพลินได้
Text ประโยคเยิ่นเย้อตัดได้ต้องตัดและมันต้องคลิกได้ด้วยนะ เพราะเน้นที่เนื้อหา ดังนั้นคำอธิบายที่เยิ่นเย้อ และรุงรังก็ควรจะตัดๆออกไปบ้างรวมถึงตัวหนังสือควรจะยืดหยุ่นพอที่เมื่อขยายหรือย่อตามสัดส่วนหน้าจอที่แตกต่างได้ ต้องอธิบายถึงเนื้อหาและสามารถคลิกหรือดึงดูดความสนใจได้ด้วย
Icons เป็นอะไรที่ต้องน้อยมากๆ แต่ก็ต้องสื่อสารถึงเนื้อหาของIcon นั้น อย่างแม่นยำด้วยเช่นกันค่ะ โดยใช้เพียงรูปทรงเลขาคณิต 2 มิติ เหลี่ยมมุมแสงเงาที่น้อยลงเพราะถูกตัดทอนด้วยการใช้เส้นหรือจุด vector ที่น้อยจดแทบนับจุดได้
จากการออกแบบเว็บไซต์ดีไซน์เรียบง่าย Metro Style ได้เอาไปจดสิทธิบัตร การแสดงผล และการตอบสนอง เอาไว้เป็นที่เรียบร้อยแล้วด้วยค่ะ เพื่อเป็นแนวทางในการออกแบบ ซึ่งเราจะเห็นได้ว่าแนวทางของ Microsoft นั้นเน้นเพียงสองอย่าง คือเรื่องของ content กับ ผู้ใช้ เท่านั้น ซึ่งเป็นแนวทางที่แตกต่างจากที่เคยทำมาโดยตลอดเลย ถึงกับขนาดว่า Microsoft ตั้งชื่อให้ว่า The Metro Design Language เลยทีเดียว
