หลังจากเคลียร์ปัญหาชีวิต ปัญหาสุขภาพ และงานที่ถาโถมได้บ้างแล้ว ก็คิดว่างั้นหาเวลามาเขียนบล็อกต่อดีกว่า
เอาเรื่อง Material Design ของ Google ที่เพิ่งเปิดตัวล่าสุดมาแทรกก่อน เพราะคิดว่าระดับ Google มาสร้างแนวทางการออกแบบใหม่ขนาดนี้ ยังไงก็ต้องกระทบกับชีวิตเหล่าดีไซเนอร์ทั้งหลายแน่
ปัญหาของการออกแบบในปัจจุบันคืออะไร?
การออกแบบคือการแก้ปัญหา ที่เราต้องออกแบบสิ่งใหม่ๆ ขึ้นมา ก็เพราะเราเจอปัญหาบางอย่างอยู่ ซึ่งในบันทึกเมื่อต้นปี “แนวโน้มการออกแบบเว็บไซต์ ปี 2014” ผมได้เล่าสรุปปัญหาไว้ว่า
- ในระยะเริ่มต้นของคอมพิวเตอร์/มือถือ คนยังไม่รู้ว่าสามารถทำอะไรได้บ้าง การออกแบบจึงพยายามจำลอง “ภาพ/ไอคอนจากรูปเสมือนจริง” (Skeuomorphic) มาให้คนนึกออก เช่น รูปปุ่ม เอาไว้กด, ลูกบิด เอาไว้หมุน, รูปสมุด เอาไว้พลิกเปิด ฯลฯ
- จนระยะหลัง คนเริ่มชินกับคอมพิวเตอร์แล้ว ปัญหาเลยกลายเป็นว่า ถ้ายังต้องใช้ “ของจริง” แบบนี้ เราทำได้จำกัด จึงเกิดแนวทางดีไซน์แบบ Flatขึ้นมาว่า ของแต่ละชิ้นนั้นไม่ต้องเหมือนจริง แต่เรา “กระทำกับมัน” ได้จริง เช่น ปาด, กด, กดแช่ ฯลฯ และเราทำกับทุกๆ สิ่งได้ ทั้งข้อความ, รูปภาพ ฯลฯ ซึ่งแปลว่า การจะทำอะไร ไม่ต้องรอหาปุ่มแล้ว จิ้มเลย เดี๋ยวมันจะตอบโต้อย่างเหมาะสมเอง เช่น ขยายรูป, เลือกข้อความ, หดเนื้อหา ฯลฯ (คนที่อธิบายเรื่อง Flat และ Skeuomorphic ได้เยี่ยมยอดมากคือจารย์เดฟ โปรดอ่านที่ A New Kind of Design )
กระนั้น, Apple ที่ปกครองด้วยระบบเผด็จการ ก็สามารถบังคับทุกคนมาสุ่ยุค Flat ได้แบบไม่ค่อยเจอปัญหานัก เชื่อผู้นำ (ทั่น ive) และทำตามซะ มันก็ออกมาดีได้ นักออกแบบที่เคยคิดว่า Flat เป็นแค่แฟชันแบนๆ พอได้ทำจริงก็เริ่มเข้าใจว่าทั่น ive คิดอะไร และ Flat นั้นลึกซึ้งขนาดไหน
แต่ Google ซึ่งปกครองด้วยระบบเสรีนิยม ใครใคร่ทำอะไรทำ มันก็ย่อมกระจัดกระจายจนคุมไม่ได้ บอกอะไรไปก็ไม่ค่อยฟัง (เช่น Design Guidlines) สุดท้ายเลยคิดว่า งั้นต้องจัดระเบียบความคิดใหม่ ให้คนเข้าใจตั้งแต่แนวคิด/ปรัชญา/ที่มาก่อน เลยสร้างอุปมา (Metaphor / การเปรียบเปรย) ที่ชื่อว่า Material Design
Material Design อุปมากับอะไร?
แนวทางของ Material Design นั้น บอกว่า ต่อไปเนื้อหาต่างๆ ที่อยู่ในจอ (มือถือ/แท็บเบล็ต/คอมพิวเตอร์) มันคือกระดาษวิเศษที่เป็นแผ่นๆ ขยับตอบโต้อย่างมีความหมาย แสงส่องกระทบเป็นระยะ (เพื่อชี้นำสายตาว่าอะไรอยู่ลึกอยู่ตื้น และ “มันไปไหนแล้ว”, “กดแล้วเกิดอะไรขึ้น”) เน้นการนำเสนอเนื้อหาโคตรๆ ให้เนื้อหาเป็นใหญ่ ไม่ใช่ของแต่งกุ๊กกิ๊กมาบดบังเนื้อหา
ดูหน้าตาเรียกน้ำย่อยที่วิดีโอนี้
รายละเอียดของ Material Design
เขียนมาถึงบรรทัดนี้ พอจะเข้าเรื่อง ก็พบว่ามีคนอื่นเขียนไว้ดีอยู่แล้ว แล้วกระผมจะเขียนอีกทำไมเนี่ย ขอเชิญอ่านบทความของท่าน MK ก่อนเลยละกัน ที่
แล้วหลังจากนั้น จะอ่านประสบการณ์ใช้งานจริงของท่านเนย ก็น่าสนใจนัก ที่
ซึ่งแน่นอนว่า ต้องดู เอกสารอ้างอิงจาก Google ประกอบ แนะนำให้อ่านซักรอบ จะเห็นแนวทางออกแบบเรียบหรูแนว Google, ชุดสีแสบสัน และฟอนต์ Roboto ที่งดงาม อ่านง่าย (อย่าลืมว่าฟอนต์ Helvetica ไม่ได้สร้างขึ้นในยุคที่มีจอคอมพิวเตอร์ ดังนั้นมันจึงไม่ใช่ฟอนต์ที่อ่านง่ายสุดในจอคอม)
แล้วต่างยังไงกับของ Apple ล่ะ?
เมื่ออ่านจบ หลายๆ คนคงเกิดคำถามว่า แล้ว Flat แบบ Google (Material Design) กับ Flat แบบ Apple (iOS7) ต่างกันอย่างไร? ผมเองเท่าที่ดูคร่าวๆ คิดว่าโดยหลักการนั้นหมือนกัน (และส่วนติดต่อผู้ใช้ของอุปกรณ์ต่างๆ ก็คงออกแบบในทางนี้อีกนาน) สิ่งที่ต่างกันคือ Material Design ได้เพิ่มการตอบสนองยิบย่อยที่มากกว่า iOS7 ทั้งแสงเงาที่สว่างวาบในแต่ละจังหวะ และการเคลื่อนไหวต่างๆ เกิดขึ้นทุกครั้งที่มีการสัมผัส แต่การเคลื่อนไหวนี้ จะอยู่ในระดับความลึกที่ไม่ลึกเหมือน iOS7 คือเป็นแค่กระดาษแผ่นๆ ซ้อนกัน เท่านั้น ไม่ใช่วิ่งมาไกลๆ เหมือน iOS7 (ลองนึกภาพการเคลื่อนไหวของไอคอนหลังจากสไลด์เปิดเครื่อง ซึ่งวิ่งมาไกลกว่า โฉ่งฉ่างมากกว่า ส่วนตัวผมเรียกแนวนี้ว่า เคลื่อนไหวแบบ วื้บๆ 😛 )
ส่วนในแง่กราฟฟิคนั้น Material Design ทำเป็นแผ่นออกมาแบนแต๊ดแต๋ เหมือนกระดาษอย่างที่ว่าไว้จริงๆ แต่ของ iOS7 นั้นยังมีพื้นหลังเบลอ กับระยะที่ดูลึกกว่า ทั้งสองแบบจึงมี “สภาพแวดล้อม” ของตัวเองที่ชัดเจน สมเหตุสมผล และแตกต่างกัน
สรุปได้ว่า สำหรับผมแล้ว,
Material Design ก็คือการออกแบบเป็นแผ่นๆ กับเคลื่อนไหวอย่างว้าบๆ
ซึ่งน่าจะทำให้งานออกแบบในอนาคตของฝั่ง Google งดงามและเป็นระบบขึ้นอีกมากทีเดียว 🙂
ส่วนใครอยากได้การเคลื่อนไหวแบบว้าบๆ มาลงเว็บบ้าง ก็ลองไปโหลด โปรเจ็ค Plymer มาลองเล่นได้ครับ งามกรุ๊บกริ๊บจริงๆ 😀
(บล็อกวันนี้ ศัพท์สำนวนมันเยอะแยะ ยิบย่อย จริงๆ เนาะ :D)
