Metro Style Trend for Touch

ดีไซน์เรียบง่าย…ไปรึเปล่า?

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

Metro Style เริ่มเป็นที่สนใจในวงกว้างเมื่อ microsoft หยิบเอารูปแบบนี้มานำเสนอเป็นแกนในการออกแบบ UI ของ Windows 8 รวมถึง windows phone 7ที่นำเสนอการเข้าถึงเนื้อหาด้วย visual ของเนื้อหาเอง มากกว่า Theme ของดีไซน์รวมๆ เรียกว่าพยายามสร้าง User experience มากกว่า User Interface และmicrosof เองก็ยังออกไกด์ไลน์มาให้สำหรับผู้พฒนา Application สำหรับ Windows ออกมาด้วยสอดคล้องกับแนวทางนี้มากๆ สร้างความชัดที่คมชัดออกมาว่าแตกต่างจาก Apple จริงๆ กว่าครั้งไหนๆที่เรามักเห็นว่าMicrosoft เดิมตามทางที่ Apple เคยเดินผ่านอย่างงดงาม ( ที่น่าสงสัยว่านับจากนี้จะยังคงความเจ๋งและเป็น Brand Reference ไปได้อีกนานแค่ไหนเมื่อขาดผู้นำที่สร้างเทรนด์ทรงพลังอย่าง Steve Jobs )

รูปแบบ Metro นี้จะมีหัวใจในการออกแบบอย่างไรบ้างตามไปดูกันครับ

Grid System ตารางเหลี่ยมเนี๊ยบกริบ
เมื่อพูดถึงเลเอาต์เราจะเจอ รูปภาพ ตัวหนังสือ ปุ่มกด Icon องค์ประกอบต่างๆ ถูกจัดวางอย่างมีระเบียบภายใต้กรอบและระบบกริดที่สม่ำเสมอ กรอบสี่เหลี่ยมหลายๆกรอบหลายๆบล็อคถูกจัดเรียงกันอย่างมีวินัย เลเอาต์กลายเป็นตัวประกอบบางเบาที่ขับเน้นรูปภาพให้โดเด่นและสื่อสารทุกอย่างออกไป บางคราวมันอาจดูน่าเบื่อไปบ้างทุกอย่างเป็นกล่องๆไปหมดแต่ถ้าได้ภาพเนื้อหาที่ดึงดูด ระบบกริดสะอาดตานี้ก็น่าสนใจได้เหมือนกัน ( ท่านสามารถโหลด grid สารพัด collum ได้ที่นี่ http://www.thegridsystem.org/ และ http://960.gs )

New Content Grid จัดการข้อมูลด้วยตารางอย่างลื่นใหล
การจัดการขอ้มูลที่เคยยุ่งเหยิง site map ที่เคยซับซ้อนย้อนไปโยงมาจะถูกแก้ใข และออกแบบเพื่อช่วยให้ผู้ใช้ไปในทิศทางที่เค้าต้องการได้ง่ายที่สุด โดยการลดกราฟฟิกที่รุงรังออกให้เหลือภาพและหัวข้อที่สื่อสารตามลำดับชั้น เช่นประเภทใหญ่ไปถึงประเภทย่อยไม่ข้ามขั้นในการแสดง navigation ลดความสับสนของผู้ใช้

Big Picture รูปใหญ่กระแทกใจ
รูปขนาดใหญ่วางเต็มไปเป็นแบล็กกราวนด์ วางตัวหนังสือบนรูปแบบมีพื้นหลังบ้างไม่มีบ้างเน้น Space ให้ได้รับรู้ถึงการสื่สารที่ออกมาจากภาพนั้นได้ บางคราวอาจเป็นเพียงภาพแบล็กกราวนด์เบลอๆ เป็นภาพคร็อบที่ไม่มีเนื้อหาแต่ว่าบอกถึง mood & Tone ของเนื้อหาได้

Panorama Layout เข้าถึงเนื้อหาด้วยสไลด์ในแนวย๊าวยาว
ถ้าเป็น Touchscreen บน Device พกพาได้อย่าง smartphone หรือ Tablet จะน่าใช้มากแต่เมื่อมาอยู่บนหน้าจอคอมพิวเตอร์ก็จะทำร้ายจิตใจนิ้วมากเช่นกัน โดยเฉพาะถ้าจอที่ใช้ของคุณกว้างเกือบ 30 inch ส่วนใหญ่เขาจะมีปุ่มกดให้สไลด์ไปทางขวาทางซ้ายได้ดั่งใจนั้นก็ช่วยได้เยอะ การออกแบบให้คอนเทนต์มีลักษณะไปยาวๆแบบนี้ช่วยให้รู้สึกลื่นไหลไม่อืดอาด และต่อเนื่องเหมาะมากกับเนื้อหาที่ตัวหนังสือน้อยแต่จำนวนเยอะ พาให้เพลิดเพลินได้อยู่

Pivot หมุดจุดสำคัญ
หมุดกลมๆจะปักลงไปบนเนื้อหาอย่างแผนที่หรือจุดใดจุดหนึ่งบนภาพ นอกจากทำหน้าที่เรียกร้องความสนใจจาก User แล้วยังใช้เป็น shortcut สู่การทำอะไรบ้างอย่างในนั้นได้เช่น checkin, Shared, read, Snap ได้

Live Tiles หน้าต่างถ่ายทอดสด
หมายถึงการออกแบบให้ ALert หรือหน้าจอแจ้งเตือนเวลาที่มีอะไรใหม่ๆเข้ามาโดยอัตโนมัติ เพื่ออำนวยความสะดวกแก่ User ข้อมูลประเภทมีอะไรอัพเดท ข่าวสารสั้นๆพยากรณ์อากาศต่างๆ สถิติ ราคาหุ้น ราคาน้ำมัน ฯลฯ เป็นshortcutsที่กวาดตาดูก็รู้ว่าอะไรเป็นอะไร ในระบบกริด Shortcuts เหล่านี้จะมีพื้นที่ของตัวเองได้อย่างลงตัวสิ่งที่ทำให้ Live Tiles ต่างกับ Widget ก็คือความเรียบร้อยเป็นสัดส่วนด้วยระบบ grid นี่เอง

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

Animation
Interactive หรือ Animation ทั้งระบบควรเรียบง่ายแต่เน้นๆ โดยการอนิเมทที่สมาร์ทออกเท่ๆ ทันใจแบบน้อยๆแต่มีพลังมากพอให้ผู้ใช้เพลิดเพลินได้

Text Wrapping + Clickable Text
ประโยคเยิ่นเย้อตัดได้ต้องตัดและมันต้องคลิกได้ด้วยนะเพราะเน้นที่เนื้อหาเพราะฉะนั้นคำอธิบายที่เยิ่นเย้อ และรุงรังก็ควรจะตัดๆออกไปบ้างรวมถึงตัวหนังสือควรจะยืดหยุ่นพอที่เมื่อขยายหรือย่อตามสัดส่วนหน้าจอที่แตกต่างได้ ต้องอธิบายถึงเนื้อหาและสามารถคลิกหรือดึงดูดความสนใจได้ด้วย

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

แนวทาง Metro Style ที่ผมนำเสนอในวันนี้อาจไม่ได้แปลกใหม่นักในแง่การดีไซน์ และภาพประกอบก็เป็นของ Microsoft วะเยอะไปหน่อย แต่สิ่งหนึ่งที่ผมสังเกตุคือWIndows พยายามจะสร้างบันทัดฐานแบบใหม่ (หรืออาจไม่ใหม่แต่หยิบเอาเอกลักษณ์แบบนี้มาเป็นเอกลักษณ์ของตัวเอง) เพื่ออนาคตที่ Device ต้องใกล้มือและกิจกรรมต่างๆบนออนไลน์อาจต้องอยู่ใกลจาก Computer ตั้งโต๊ะมากขึ้น การลดทอนอะไรต่อมิอะไรออกจากดีไซน์ดูจะเป็นทางเลือกของอนาคตที่กำลังจะเกิด แต่โดยส่วนตัวแล้วผมเชื่อความรุงรังก็สวยงามในแบบของมัน การมีองค์ประกอบที่ไม่ใช่ตัวนำเสนอเนื้อหา ไม่ใช่ได้้ป็นปุ่มใดๆในดีไซน์ก็ยังช่วยเน้นให้ดีไซน์นั้นน่าสนใจได้อยู่ รอดูกันว่ากระแส Metro Style นี้ จะอยู่ยั้งยืนยงต่อไปหรือเป็นเพียงกระแสหนึ่งที่ผ่านมาและผ่านไป…