Nick Butcher พนักงานฝ่ายนักพัฒนาของกูเกิล สร้างแอพตัวอย่างชื่อ Plaid ขึ้นมาเป็นต้นแบบของแนวทางออกแบบ Material Design โดยเน้นไปที่แอนิเมชัน การวางตำแหน่งวัตถุ และการจัดการกับฟอนต์

ความสามารถของแอพนี้คือดึงข้อมูลงานออกแบบที่น่าสนใจจากเว็บไซต์อย่าง Dribble หรือ Product Hunt มาโชว์ แต่ที่สำคัญคือแอพนี้เปิดซอร์สโค้ดทั้งหมดบน GitHub ใครเป็นนักพัฒนาสาย Android ก็สามารถดาวน์โหลดแอพและซอร์สโค้ดมาดูเป็นตัวอย่างได้ (ตัวแอพต้องเข้าร่วมโครงการ Beta Test ก่อน แต่ซอร์สโค้ดดึงจาก GitHub ได้เลย)

ผู้ใช้ Android โดยเฉพาะสาย Nexus คงคุ้นเคยกับภาพพื้นหลังแนวทาง Material Design ที่ใช้รูปทรงเรขาคณิต ภาพเหล่านี้ดูเผินๆ เหมือนเป็นภาพที่สร้างด้วยคอมพิวเตอร์ (CG) แต่แท้จริงแล้วมันเป็น "ภาพถ่าย" ของกระดาษสีซ้อนกันหลายชั้น ซึ่งอิงจากแนวคิดของ Material Design นั่นเอง

กูเกิลจ้างศิลปินชาวสวีเดน Carl Kleiner มารับงานนี้ต่อเนื่องกันหลายปีแล้ว ในรอบของ Android 6.0 Marshmallow กูเกิลก็เผยกระบวนการทำงานของ Kleiner ให้เห็นว่าเบื้องหลังเกิดขึ้นได้อย่างไร โจทย์ของกูเกิลคือใช้สีตามโลโก้ของบริษัท บวกกับสีเทาอีกหนึ่งสี ส่วน Kleiner ยังใช้กระดาษตัดเป็นรูปเรขาคณิต ซ้อนกันหลายชั้น และเพิ่มวัสดุบางอย่างเพื่อสร้างลวดลาย (texture) ให้ดูมีมิติมากขึ้น

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

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

อิทธิพลของ Material Design ไม่ได้อยู่แค่แอพของกูเกิลเท่านั้น แต่ยังลามไปถึง "โฆษณา" ในระบบของ AdMob และ DoubleClick ด้วย

กูเกิลประกาศปรับฟอร์แมตของโฆษณาแอพแบบเต็มหน้าจอ (full-screen ads) ใหม่ โดยปรับหน้าตาโฆษณาให้สะอาดขึ้น ใช้ปุ่มติดตั้งเป็นวงกลมแบบเดียวกับ Material Design แถมแถบสีด้านล่างและสีของปุ่มยังปรับเปลี่ยนอัตโนมัติ จากภาพ cover ของแอพนั้นด้วย

กูเกิลบอกว่าทดสอบโฆษณารูปแบบต่างๆ มาถึง 10 แบบกว่าจะลงตัวว่าโฆษณาแบบไหนสร้างประสบการณ์ที่ดีกับผู้ใช้มากที่สุด และมีอัตราการคลิกเพิ่มขึ้น ตอบโจทย์ผู้ลงโฆษณาไปพร้อมกัน

ที่มา - Inside AdWords

เคยมีภาพหลุดของ Google Hangouts 4.0 for Android มาได้สักพัก วันนี้กูเกิลปล่อยอัพเดตนี้มาแล้ว

การเปลี่ยนแปลงของ Hangouts 4.0 for Android คือเปลี่ยนหน้าตาแอพทั้งตัวเป็น Material Design, ออกแบบส่วนต่างๆ ของหน้าจอให้ดูเรียบง่ายกว่าเดิม แถมกูเกิลคุยว่าทำงานเร็วกว่าเวอร์ชันก่อนๆ ด้วย นอกจากนี้มันยังทำงานบนแพลตฟอร์ม Android Wear ได้ดีขึ้น รองรับการสั่งงานด้วยเสียงได้เต็มรูปแบบ

ที่มา - Google Official Blog

Chrome ทดสอบ UI แบบใหม่ของหน้ารายการไฟล์ที่ดาวน์โหลด โดยเปลี่ยนจากของเดิมที่เป็นรายชื่อไฟล์เรียงกันไปแบบธรรมดาๆ กลายเป็น Material Design ตามสมัยนิยมของกูเกิล

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

ตอนนี้หน้าดาวน์โหลดแบบใหม่ยังมีเฉพาะใน Chrome Dev โดยผูใ้ช้ต้องเปิดเองในหน้า chrome://flags ครับ

ที่มา - OMG Chrome

Chrome และ Chromium เปลี่ยนไอคอนใหม่อีกรอบ ถ้าดูเผินๆ จะไม่ต่างจากเดิมมากนัก แต่ถ้านำไอคอนเก่าและใหม่มาวางเทียบกัน จะเห็นว่าของใหม่แบนลงกว่าเดิมอีก ลดการใช้แสงเงาที่ไม่จำเป็นลง และปรับเปลี่ยนมาใช้แนวทาง Material Design ของกูเกิลเอง

ไอคอนแบบใหม่ถูกใช้ใน Chrome for Android และ Chromium เรียบร้อยแล้ว เหลือรอใช้ใน Chrome เวอร์ชันพีซีต่อไป

ที่มา - OMG Chrome

กูเกิลออก Material Design Lite (MDL) ชุดไลบรารีสำหรับสร้างเว็บแบบ Material Design ได้อย่างง่ายดาย

MDL สร้างขึ้นด้วยเทคโนโลยี Web Components โดยพัฒนาต่อจาก Polymer ของกูเกิลเอง สามารถใช้งานกับเบราว์เซอร์ยุคใหม่ได้ทุกตัว ทำงานแบบ responsive ได้บนทุกขนาดหน้าจอ มันถูกออกแบบมาให้เรียกใช้แบบดาวน์โหลดผ่าน CDN ด้วยขนาดที่เล็กเพียง 27KB เมื่อบีบอัดแล้ว (แต่ใครจะเอาไฟล์มาโฮสต์เองก็ได้เช่นกัน)

Dropbox เป็นแอพตัวล่าสุดบนแอนดรอยด์ที่เปลี่ยนมาใช้ Material Design กับเขาแล้ว การเปลี่ยนแปลงที่สำคัญคือปุ่ม + สีฟ้าที่มุมขวาล่าง เมื่อกดแล้วจะมีตัวเลือกใหม่สำหรับการถ่ายภาพเพื่ออัพโหลดขึ้น Dropbox เพิ่มเข้ามาด้วย

หน้าตาของแอพ Dropbox เดิมทีก็ค่อนข้างเรียบๆ ไม่มีอะไรหวือหวาอยู่แล้ว แต่การเปลี่ยนแปลงครั้งนี้ก็ช่วยให้หน้าตาของแอพดูไปในทางเดียวกันกับระบบปฏิบัติการ และแอพรุ่นใหม่ๆ บนแพลตฟอร์มแอนดรอยด์มากขึ้นครับ

ที่มา - Dropbox

ปีที่แล้ว กูเกิลเปิดตัว Material Design พร้อม Android 5.0 และในรอบปีที่ผ่านมา เราก็เห็นแอพ Android จำนวนไม่น้อยปรับโฉมตัวเองเป็น Material Design มากขึ้น

อย่างไรก็ตาม ระบบปฏิบัติการ Android ที่รองรับ Material Design เต็มรูปแบบต้องเป็น Android 5.0 ขึ้นไปเท่านั้น ถ้านักพัฒนาแอพอยากรันบนระบบปฏิบัติการรุ่นเก่าให้ราบรื่น ก็ต้องลงแรงแก้ปัญหากันเอง ซึ่งเป็นงานยากพอสมควร ในงาน I/O ปีนี้ กูเกิลจึงออกตัวช่วยเพื่อให้ Android รุ่นเก่าสามารถมี UI แบบ Material โดยนักพัฒนาไม่ต้องทำอะไรเพิ่ม กูเกิลเตรียมมาให้หมดแล้ว

กูเกิลเปิดตัวเว็บ google.com/design ใหม่เป็นศูนย์รวมสำหรับนักออกแบบ ที่จะรวมเอาบทความแนวคิดการออกแบบ และทรัพยากรสำหรับการออกแบบต่างๆ มาไว้ที่เดียวกัน

ก่อนหน้างาน Google I/O กูเกิลก็ปรับปรุง Material Design สำหรับหน้าจอขนาดใหญ่ หลังงานกูเกิลประกาศชุดไอคอนใหม่เปิดให้ใช้งานได้ฟรีโดยใช้สัญญาอนุญาตเป็น CC-BY และหน้าเว็บ Device Metrics ฐานข้อมูลหน้าจออุปกรณ์สำคัญจำนวนมากว่ามีความละเอียดเท่าใดตามหน่วย dp, px, และนิ้ว

ที่มา - +Google Design

กูเกิลอัพเดต Hangouts เวอร์ชันที่รันบน Chrome (บางคนเรียก Hangouts Chrome app) โดยมีการเปลี่ยนแปลงสำคัญ 3 ประการ

Google ปล่อยอัพเดตหน้าตาใหม่ของ Google Play Music บนเวอร์ชันเว็บทั้งหมดแล้ว โดยนำ Material Design มาปรับใช้ซึ่งจะคล้ายคลึงกับหน้าตาบนแอพบน Android เช่น เก็บแถบเมนูไว้ด้านซ้าย ช่องค้นหาอยู่ด้านบน ส่วนคลังเพลงจะแสดงหน้าของศิลปินเป็นรูปวงกลม ปกอัลบั้มต่างๆ จะเป็นการ์ดแบบ Material Design และเมื่อเข้าไปดูภายในอัลบั้มจะเจอปกของศิลปินขนาดใหญ่ด้านบนของอัลบั้มนั้นๆ เป็นต้น สามารถรับชมตัวอย่างได้จากภาพท้ายข่าวครับ

Mailbox แอพอีเมลยอดนิยมอีกตัวหนึ่ง (ปัจจุบันเป็นของ Dropbox) ออกเวอร์ชัน 2.0.1 บนแพลตฟอร์ม Android มีของใหม่หลายอย่าง

• ปรับหน้าตาเป็น Material Design เต็มรูปแบบ
• รองรับการใช้งานบนแท็บเล็ตแล้ว
• รองรับการเชื่อมต่อกับบัญชี Dropbox for Business
• เพิ่ม badge แจ้งเตือนบนไอคอนแอพ (เฉพาะอุปกรณ์ซัมซุง)

ที่มา - Droid Life

กูเกิลปรับโฉมหน้าเว็บของสมุดที่อยู่ Google Contacts ครั้งใหญ่ โดยเปลี่ยนหน้าตาให้ทันสมัยเป็น Material Design และนำแนวคิดเรื่อง card UI มาใช้งานอย่างเต็มที่

Google Contacts รุ่นใหม่นี้ผนวกเอาสมุดที่อยู่กับเพื่อนใน Google+ Circle เข้าด้วยกัน ดึงข้อมูลจาก Google Profile/Gmail/Hangouts ของเพื่อนแต่ละคนให้อัตโนมัติ และมีฟีเจอร์ตรวจหาข้อมูลซ้ำ (find duplicates) ช่วยรวมที่อยู่ติดต่อของบุคคลเดียวกันให้อัตโนมัติ (ผมลองเล่นดูแล้วก็แม่นยำพอสมควร)

ใครอยากลองเล่นก่อน เข้าไปทดสอบที่ http://contacts.google.com/preview และอีกสักพักหนึ่งมันจะถูกผนวกเข้าเป็นส่วนหนึ่งของ Gmail ครับ

เป็นอันว่าทิศทางการออกแบบใหม่ของกูเกิลจะได้รับความสนใจกว่าสมัย Holo พอสมควร ล่าสุดขาใหญ่อย่าง Facebook ทดสอบอินเทอร์เฟซใหม่กับผู้ใช้บางส่วนแล้ว

อินเทอร์เฟซใหม่แบบ Material Design ของ Facebook บน Android มาตามไกด์ไลน์ของกูเกิลอย่างถูกต้อง ปรับปุ่มเมนูด้านล่างให้กลายเป็นปุ่มเดียวลอยเหนือทุกสรรพสิ่งที่ตำแหน่งมุมขวาล่างแทน และแถบด้านบนกลายเป็นช่องสำหรับค้นหาทั้งหมด

ภาพตัวอย่างเปรียบเทียบของใหม่กับของเก่าดูได้ท้ายข่าวครับ

ที่มา - The Next Web

ซ้ายใหม่ ขวาเก่า

อมยิ้ม เป็นแอพพลิเคชันสำหรับอ่าน Pantip.com บนโทรศัพท์มือถือระบบ Android ผลงานนักพัฒนาอิสระ (ผมเอง) โดยรับเอาแนวทางการออกแบบ Material Design จาก Google มาใช้ในการออกแบบ

นอกจากนี้ยังมีการคิดวิธีการใช้งานในรูปแบบใหม่ ซึ่งไม่เหมือนกับแอพพลิเคชันอ่าน Pantip อื่นๆ โดยผู้ใช้งานสามารถปรับแต่ง เลือกลำดับ และการแสดงห้องต่างๆ ได้ด้วยตนเอง

วันนี้ Google ออกอัพเดตแอพ Chrome บน iOS เวอร์ชัน 40.0.2214.61 โดยมีการเปลี่ยนแปลงที่แจ้งไว้ดังนี้

• Material Design แบบเดียวกับ Chrome บน Android ที่ออกอัพเดตไปก่อนหน้านี้แล้ว
• รองรับมือถือจอใหญ่และปรับปรุงให้เข้ากับ iOS 8
• รองรับระบบ Handoff จาก Chrome บน iOS ไปยังเบราว์เซอร์หลักบน OS X
• แก้บั๊กและปรับปรุงความเสถียร

ที่มา - Chrome Release Blog

สำหรับคนที่รอ Lollipop อยู่แต่อยากลองใช้อินเทอร์เฟซแบบ Material Design แล้ว ตอนนี้มีตัวเลือกให้ลองเล่นกันก่อน ด้วยการดาวน์โหลด Google Now Launcher มาใช้งานไปพลางๆ ด้วยอัพเดตล่าสุดที่เปลี่ยนไปเป็น Material Design แบบเดียวกับ Lollipop แล้ว

ในอัพเดตนี้ นอกจากเปลี่ยนไปเป็นอินเทอร์เฟซแบบ Material Design ที่ปรับสี drawer เป็นสีขาว และไอคอนขยับได้ในหน้า Google Now และสามารถเพิ่มบัญชี Google ได้จากไซด์บาร์ด้านซ้ายแล้ว อื่นๆ เรียกได้ว่าเหมือนเดิมเป๊ะ

ใครที่อยากได้อินเทอร์เฟซใหม่ก่อนอัพเดตจริงก็ไปดาวน์โหลดกันที่ Play Store เลยครับ ตัวแอพรองรับ Android ตั้งแต่ 4.1 เป็นต้นไป

กูเกิลเริ่มเปลี่ยนแอพบน iOS ให้เป็น Material Design โดยคราวนี้เป็นคิวของแอพหลัก Google for iOS (ที่เราเรียกกันว่า Google Search แต่จริงๆ มันชื่อแอพ Google เฉยๆ)

การเปลี่ยนแปลงของแอพ Google for iOS รอบนี้ถือว่าเปลี่ยนหน้าตาแอพทั้งหมด โดยกูเกิลใส่ปุ่ม 3 ปุ่มด้านล่างมาแบบเดียวกับระบบปฏิบัติการ Android แต่เปลี่ยนจากปุ่ม Home เป็นปุ่ม Google เพื่อเข้าหน้าจอค้นหาแทน นอกจากนี้มันยังมีปุ่ม Recents เอาไว้แสดงเว็บเพจที่เคยเปิดจากหน้าผลการค้นหาอีกด้วย

ฟีเจอร์อีกอย่างที่เพิ่มเข้ามาคือกูเกิลผนวกเอา Google Maps มาใส่ไว้ในแอพนี้ด้วย ผู้ใช้สามารถค้นหาสถานที่จากแอพ Google แล้วแสดงเป็นแผนที่โดยไม่ต้องเรียกแอพ Google Maps เลย

ในที่สุด Hangouts ก็ใกล้จะได้อัพเดตที่เดินตามแนวทาง Material Design มากขึ้นแล้ว เพราะด้วยความที่แต่เดิมตัวแอพ Hangouts ก็แทบจะอิงจากแนวทางออกแบบใหม่มาตั้งแต่ชุดแรกๆ จึงอาจทำให้อัพเดตตามหลังแอพอื่นเสียหน่อย และยังเปลี่ยนแปลงไม่มากอีกด้วย ตามภาพที่หลุดมาจากเว็บไซต์ Android Police เร็วๆ นี้

ความเปลี่ยนแปลงของ Hangouts ใหม่เริ่มต้นตั้งแต่ไอคอนแอพที่ปรับให้แบนยิ่งขึ้น บวกด้วยการใช้เงาในไอคอนตามแบบแอพโทรศัพท์บน Lollipop ส่วนด้านในนั้น โดยรวมแทบจะเหมือนเดิมทั้งหมด เปลี่ยนแปลงเพียงโทนสีของแถบด้านบนให้เป็นสีเขียวเข้มขึ้น (เหมือนกับไอคอน) ปรับแถบโปรไฟล์เป็นแบบใหม่ และขยับตำแหน่งของไอคอนเล็กๆ น้อยๆ

ภาพเปรียบเทียบดูได้ท้ายข่าว ส่วนจะมาเมื่อไหร่คงต้องรอให้กูเกิลประกาศครับ

แนวทางการออกแบบ Material Design ของกูเกิล กลายเป็นแรงบันดาลใจให้มีคนทำลินุกซ์ที่ใช้หน้าตาแบบ Material แล้ว

โครงการ Quantum OS (เดิมชื่อ Quartz OS) เป็นการพัฒนาเดสก์ท็อปที่มีหน้าตาแนว Material Design โดยใช้เทคโนโลยีพื้นฐานของ Qt 5 และภาษา QML ทั้งหมด ทีมงานยังมีแผนจะสร้างชุดพัฒนา UI สำหรับสร้างแอพ Material Design ด้วย (ไม่ใช่แค่ระดับธีม แต่ทำที่ระดับ UI toolkit เลย โดยตัว toolkit จะสามารถทำงานข้ามแพลตฟอร์มได้ตาม Qt)

ตอนนี้โครงการยังอยู่ในระยะเริ่มต้น โดยทีมงานกำลังตัดสินใจว่าจะเลือกดิสโทรตัวใดเป็นฐานระหว่าง Arch Linux หรือ Ubuntu ซึ่งก็คงต้องใช้เวลาอีกสักพักหนึ่งกว่าจะเห็นผลลัพธ์เป็นรูปเป็นร่างครับ

กูเกิลอัพเดตแอพ Google Search โดยปรับโฉมหน้าเป็น Material Design พร้อมเพิ่มฟีเจอร์ใหม่อีกหลายอย่าง

Google Maps สำหรับ Android และ iOS เริ่มปรับเปลี่ยนมาใช้งานส่วนติดต่อผู้ใช้งานใหม่ตามแนวทาง Material Design เหมือนกับแอพตัวอื่นๆ ของ Google ที่เปลี่ยนมาก่อนหน้า โดยตัวแอพ Google Maps ในแบบ Material Design นั้นมาในโทนสีน้ำเงิน ผู้ใช้สามารถกดแผ่นข้อมูลสถานที่บริเวณด้านล่างของหน้าจอก็จะสามารถเข้าถึงข้อมูลรีวิวและรูปภาพของสถานที่นั้นได้ทันที

กูเกิลทยอยอัพเดตแอพ Android ของตัวเองเป็น Material Design ชุดใหญ่ เตรียมรับ Android 5.0