ของใหม่ที่สำคัญของ Android L คือหน้าตาแบบใหม่ที่เรียกว่า Material Design ซึ่งกูเกิลก็บอกว่ามันเป็นหน้าตาใหม่ของ "กูเกิลทั้งหมด" ไม่ใช่แค่เพียง Android L เท่านั้น
อย่างไรก็ตาม Material Design มีเวลาโชว์ตัวและแนวคิดบนเวที Keynote ของงาน Google I/O ไม่เยอะนัก สิ่งที่กูเกิลนำมาโชว์มีแค่วิดีโอสาธิตที่ดูไม่ค่อยรู้เรื่องสักเท่าไร ดูเผินๆ คงเห็นความแบนราบ สีสันสดใส รูปทรงเรขาคณิต และแอนิเมชั่นวูบวาบเท่านั้น
ตอนที่ผมดู Keynote เวอร์ชันสดก็รู้สึกแบบเดียวกัน และคิดว่าคงเป็นการปรับดีไซน์ตามยุคสมัย แต่พอได้อ่านเอกสารและดูวิดีโอเซสชันที่เกี่ยวข้องกับ Material Design ก็พบว่ามันมีอะไรมากกว่าที่คิดเยอะมาก และบทความนี้จะมาแนะนำให้รู้จักกับ Material Design ที่เราจะต้องเจอมัน "ทุกหนทุกแห่ง" ไปอีกนานเลยครับ (ภาพเยอะมาก)
สำหรับคนที่อาจจะไม่ได้ติดตามข่าวงาน Google I/O ใกล้ชิด และนึกภาพไม่ออกว่า Material Design หน้าตาเป็นอย่างไร แนะนำให้ดูวิดีโอนำเสนอของกูเกิลก่อนครับ จะได้เห็นภาพตรงกัน
รายละเอียดของ Material Design สามารถอ่านได้จาก Google Design Guidelines ซึ่งบทความนี้จะใช้ข้อมูลจากเอกสารชุดนี้เป็นหลัก ประกอบกับเซสชันต่างๆ ในงาน I/O นะครับ
Material Design ไม่ใช่เป็นแค่ธีม (เหมือนกับ Holo ของ Android 4.x) เพราะมันลงลึกไปถึงการวางโครงสร้างของวัตถุ และวิธีการนำเสนอว่าจะคัดเลือกเนื้อหาอะไรมาแสดงบนจอ ดังนั้นเราอาจนิยามให้มันเป็น "ปรัชญา" หรือ "แนวทาง" การออกแบบ UI น่าจะตรงกว่า
กูเกิลเรียก Material Design ว่าเป็น "ภาษาของการออกแบบ" หรือ visual language ที่รวบรวม "หลักการออกแบบที่ดี" ไว้ด้วยกัน โดยใช้เป็นแนวทางการออกแบบชุดเดียวที่ใช้ได้ข้ามอุปกรณ์ รองรับการป้อนข้อมูลหลายแบบในศักดิ์ฐานะที่เท่ากัน
หลักการออกแบบ (design principle) ของ Material Design มีด้วยกัน 3 ข้อ
วัตถุพื้นฐานของ Material Design คือ "กระดาษและหมึก" ที่ลอกแบบมาจากสิ่งพิมพ์ของจริง ตัว "แผ่นงาน" ในระบบของ Material Design จึงเป็นเหมือนกระดาษขาว ที่วัตถุหรือข้อความมาวางไว้บนนั้นได้
ความน่าสนใจอยู่ที่ "กระดาษ" ของ Material Design สามารถนำมาวางต่อกันได้ในระนาบเดียวกัน ซึ่งจะเกิด "รอยต่อ" (seam) ให้ความรู้สึกต่อเนื่องกัน ในอีกทางหนึ่ง ถ้าเอากระดาษมาวางทับกันจะเกิด "ขั้น" (step) ที่มีระดับของความลึกแตกต่างกัน เกิดความเป็นเลเยอร์ที่กระดาษสองแผ่นมีศักดิ์ไม่เท่ากัน
เมื่อนำแนวคิดของ seam กับ step มาทำเป็น UI ก็จะได้ออกมาดังภาพ (เลือกใช้ได้ทั้งสองแบบตามความเหมาะสมของแอพ)
Material Design ยังให้ความสำคัญกับระดับของความลึก (z-index, z-depth หรือ z-space) ที่จะแสดงระดับความเข้มของเงาแตกต่างกัน
การวางวัตถุต่างๆ บนหน้าจอจึงมีแนวคิดของ "เลเยอร์" เข้ามา ตัวอย่างตามภาพข้างล่างคือ เลเยอร์ของระบบ (เช่น ภาพพื้นหลัง) จะอยู่หลังสุด ทับด้วยเลเยอร์ของแอพ และทับด้วยเลเยอร์ของระบบ (เช่น ไดอะล็อกแจ้งเตือน) อีกชั้นหนึ่ง
ตัวอย่างการออกแบบแอพโดยให้ความสำคัญกับเลเยอร์
Matías Duarte หัวหน้าทีมออกแบบของ Android อธิบายว่า Material Design ผสมผสานทั้งความเป็นเหตุเป็นผล มีตรรกะ (rational) กับความเป็นธรรมชาติ (natural) เข้ามาด้วยกัน เพื่อให้ผู้ใช้งานไม่ต้องเปลืองแรงสมองในการคิดว่าจะทำอะไร เนื่องจาก UI ออกแบบมาสอดคล้องกับวิธีคิดของมนุษย์อยู่แล้ว
ในส่วนของความเป็น rational เราจึงเห็น Material Design เน้นรูปร่างเรขาคณิต เช่น สี่เหลี่ยม วงกลม สามเหลี่ยม เข้ามาเยอะ
แต่จริงๆ แล้วเบื้องหลังของ Material Design ค่อนข้างเป๊ะมากในแง่สัดส่วน ตั้งแต่การใช้ระบบกริดเพื่อกำหนดขนาดของวัตถุ (ทุกอย่างใน Material Design จะใช้ตัวคูณ 8 พิกเซลเสมอ เช่น 8, 16, 32)
การวางวัตถุใน UI จึงต้องยึดตามเกณฑ์นี้ตลอด ตัวอย่างภาพข้างล่างจะกำหนดที่ว่างในแนวตั้ง (vertical space) ที่เป็นสัดส่วนกัน
การวางวัตถุในหน้าจอยังกำหนด "สัดส่วน" (ratio) ซึ่งดีไซเนอร์สามารถเลือกสัดส่วนที่เหมาะสมได้ตามต้องการ ตัวอย่างจากภาพข้างล่าง วางกรอบสีม่วงด้วยสัดส่วน 1:1 แล้ววางภาพสะพานสัดส่วน 3:2 ทับลงไป
Material Design กำหนด palette สีพื้นฐานมาให้จำนวนหนึ่ง ส่วนธีมสีพื้นหลักมีให้เลือก 2 แบบคือขาวและดำ
ตัวอย่างคู่สีทั้งหมดของ Material Design (ซ้าย) และคู่สีที่ทีม Google Play คัดเลือกไปใช้งาน (ขวา) หน้ารวมธีมสีทั้งหมด
กูเกิลแนะนำให้เราเลือกใช้สีหลักเพียง 3 สี และเลือกสีเน้น (accent color) ได้อีกหนึ่งสี
สีหลักใช้สำหรับแสดงพื้นที่หลักของแอพ (เช่น ไตเติล) ใช้ระดับความเข้ม 500 ส่วนไตเติลบาร์ด้านบนใช้ระดับความเข้มมากกว่าคือ 700
จากภาพด้านล่างจะเห็นการใช้สีหลักคือน้ำเงิน และสีเน้นคือชมพู
ตัวอย่างแถบเครื่องมือด้านบน (กูเกิลเรียก App Bar ที่ใช้สีและเส้นสายแบบต่างๆ)
ในการทำแอพจริง Material Design ยังมีเครื่องมือช่วยทำ dynamic coloring หรือการดึงสีจากภาพประกอบในหน้าจอนั้นๆ มาเป็นคู่สีสำหรับส่วนอื่นๆ ของแอพได้อย่างอัตโนมัติ
กูเกิลประกาศชัดเจนว่าใช้ฟอนต์ Roboto เพียงฟอนต์เดียวเพื่อความสม่ำเสมอ แต่เป็น Roboto เวอร์ชันปรับปรุงใหม่ให้เหมาะกับการแสดงผลบนหน้าจอทุกแบบ (ดาวน์โหลดฟอนต์)
Material Design เป็นแนวทางการออกแบบที่มีลำดับชั้น (hierarchy) การใช้ฟอนต์ตัวเล็กใหญ่ มีผลกับการแสดงระดับความสำคัญหรือน้ำหนักของวัตถุนั้นๆ
ไอคอนของ Material Design ออกแบบตามหลักเรขาคณิต
ไอคอนของระบบใช้สีเดียว เน้นรูปร่างของไอคอนที่แตกต่างกันให้แยกแยะได้ง่าย เส้นขอบตรงแต่มุมมน
ปุ่มในระบบการออกแบบของ Material Design มีทั้งหมด 3 แบบครับ จากภาพด้านล่าง เรียงตามซ้ายไปขวา
ตัวอย่างการใช้ปุ่ม floating ในสถานการณ์ต่างๆ อาจมีสีสันและตำแหน่งที่แตกต่างกันได้
กูเกิลแนะนำว่าปุ่ม floating ควรใช้สีพื้น และอยู่ในตำแหน่งที่ไม่เกะกะ UI หลัก ไม่ควรทำเอฟเฟคต์ให้ปุ่มดูมีมิติเป็นพิเศษอย่างในภาพด้านล่าง (รายละเอียด)
ปุ่ม floating ควรใช้สำหรับแอพที่มีการกระทำในเชิงบวกหรือสร้างสรรค์ (เช่น เพิ่มรายการใหม่) เท่านั้น ถ้าแอพไม่มีหน้าที่ลักษณะนี้ ก็ไม่ต้องใส่เข้ามาให้เกะกะ (เช่น แอพดูภาพก็ไม่ต้องมีปุ่มเพิ่มภาพ)
การใช้ปุ่ม raised/flat ก็มีคุณลักษณะแตกต่างกันไปตามบริบทของงาน ตัวอย่างในภาพด้านล่าง ควรใช้ปุ่มแบบ flat มากกว่าเพื่อไม่แย่งความสนใจจากส่วนอื่นๆ ของหน้าจอ
จุดเด่นอีกอย่างของ Material Design คือการแสดงแอนิเมชันเมื่อผู้ใช้แตะหน้าจอ ซึ่งถือเป็นการบอกให้ผู้ใช้รู้ว่าแอพ "ตอบสนอง" การกระทำของผู้ใช้แล้ว ดังนั้นปุ่มที่ถูกกดก็จะแสดงแอนิเมชันให้เห็นด้วย
Material Design ดำเนินรอยตามแนวทางออกแบบ magazine UI ของ Android 4.x ที่เน้นความโดดเด่นของภาพประกอบเหมือนนิตยสาร
ดังนั้น Material Design จึงแนะนำให้ใช้ภาพประกอบเป็นหัวเรื่อง แต่ก็บอกว่าควรใช้ภาพถ่าย (photograph) มากกว่าภาพกราฟิก เพื่อให้ดูสมจริงมากกว่า
เนื้อหาส่วนนี้แสดงเป็นภาพนิ่งได้ยาก ขอใช้วิธีฝังวิดีโอจากเว็บไซต์กูเกิลแทนนะครับ จะได้เห็นภาพมากกว่า
ทุกอย่างบนหน้าจอ แตะแล้วมีปฏิกริยาให้เห็นชัดว่าแตะแล้ว