Google

ของใหม่ที่สำคัญของ Android L คือหน้าตาแบบใหม่ที่เรียกว่า Material Design ซึ่งกูเกิลก็บอกว่ามันเป็นหน้าตาใหม่ของ "กูเกิลทั้งหมด" ไม่ใช่แค่เพียง Android L เท่านั้น
อย่างไรก็ตาม Material Design มีเวลาโชว์ตัวและแนวคิดบนเวที Keynote ของงาน Google I/O ไม่เยอะนัก สิ่งที่กูเกิลนำมาโชว์มีแค่วิดีโอสาธิตที่ดูไม่ค่อยรู้เรื่องสักเท่าไร ดูเผินๆ คงเห็นความแบนราบ สีสันสดใส รูปทรงเรขาคณิต และแอนิเมชั่นวูบวาบเท่านั้น
ตอนที่ผมดู Keynote เวอร์ชันสดก็รู้สึกแบบเดียวกัน และคิดว่าคงเป็นการปรับดีไซน์ตามยุคสมัย แต่พอได้อ่านเอกสารและดูวิดีโอเซสชันที่เกี่ยวข้องกับ Material Design ก็พบว่ามันมีอะไรมากกว่าที่คิดเยอะมาก และบทความนี้จะมาแนะนำให้รู้จักกับ Material Design ที่เราจะต้องเจอมัน "ทุกหนทุกแห่ง" ไปอีกนานเลยครับ (ภาพเยอะมาก)

หน้าตาของ Material Design

สำหรับคนที่อาจจะไม่ได้ติดตามข่าวงาน Google I/O ใกล้ชิด และนึกภาพไม่ออกว่า Material Design หน้าตาเป็นอย่างไร แนะนำให้ดูวิดีโอนำเสนอของกูเกิลก่อนครับ จะได้เห็นภาพตรงกัน

รายละเอียดของ Material Design สามารถอ่านได้จาก Google Design Guidelines ซึ่งบทความนี้จะใช้ข้อมูลจากเอกสารชุดนี้เป็นหลัก ประกอบกับเซสชันต่างๆ ในงาน I/O นะครับ

อะไรคือ Material Design

Material Design ไม่ใช่เป็นแค่ธีม (เหมือนกับ Holo ของ Android 4.x) เพราะมันลงลึกไปถึงการวางโครงสร้างของวัตถุ และวิธีการนำเสนอว่าจะคัดเลือกเนื้อหาอะไรมาแสดงบนจอ ดังนั้นเราอาจนิยามให้มันเป็น "ปรัชญา" หรือ "แนวทาง" การออกแบบ UI น่าจะตรงกว่า
กูเกิลเรียก Material Design ว่าเป็น "ภาษาของการออกแบบ" หรือ visual language ที่รวบรวม "หลักการออกแบบที่ดี" ไว้ด้วยกัน โดยใช้เป็นแนวทางการออกแบบชุดเดียวที่ใช้ได้ข้ามอุปกรณ์ รองรับการป้อนข้อมูลหลายแบบในศักดิ์ฐานะที่เท่ากัน

  • จอสัมผัส
  • สั่งงานด้วยเสียง
  • เมาส์และคีย์บอร์ด

หลักการออกแบบ (design principle) ของ Material Design มีด้วยกัน 3 ข้อ

  • ใช้หลักการเลียนแบบ "วัสดุ" (material) ในโลกความเป็นจริง เน้นการใช้พื้นผิว (surface) และขอบ (edge) ใช้แสงเงา-ภาพเคลื่อนไหวเหมือนกับแสงเงา-การเคลื่อนไหวของวัตถุเชิงกายภาพ
  • เป็นการออกแบบที่ "ตั้งใจนำเสนอ" (intentional) ใช้วิธีการนำเสนอแบบเดียวกับสิ่งพิมพ์กระดาษ เช่น ฟอนต์ ที่ว่าง สีสัน ภาพประกอบ
  • แสดงการเคลื่อนไหว (motion) เพื่อบอกความหมาย (meaning) ของการกระทำ

เริ่มต้นที่ "กระดาษ"

วัตถุพื้นฐานของ 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) ที่เป็นสัดส่วนกัน

  1. 24dp
  2. 56dp
  3. 48dp
  4. 72dp


การวางวัตถุในหน้าจอยังกำหนด "สัดส่วน" (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 action button เป็นของใหม่ที่เพิ่มเข้ามา กูเกิลใช้หลัก intentional design คือตั้งใจหยิบคำสั่ง (action) ที่สำคัญที่สุดของแอพนำมาเสนอให้เห็นชัดๆ โดยใช้วงกลมเป็นสัญลักษณ์ ตัวอย่างในภาพแรกสุดคือปุ่มรถยนต์สีเขียวในแอพแผนที่
  • Raised button ปุ่มทั่วไปที่แสดงความสูงที่ถูกยกขึ้น (raised) ให้เห็นเด่นชัดกว่าปกติ ตัวอย่างปุ่ม Uninstall
  • Flat button ปุ่มธรรมดาที่แสดงเฉพาะข้อความ แต่แบนราบไปกับพื้นผิว ตัวอย่างคือปุ่ม ACCEPT/DECLINE


ตัวอย่างการใช้ปุ่ม floating ในสถานการณ์ต่างๆ อาจมีสีสันและตำแหน่งที่แตกต่างกันได้

กูเกิลแนะนำว่าปุ่ม floating ควรใช้สีพื้น และอยู่ในตำแหน่งที่ไม่เกะกะ UI หลัก ไม่ควรทำเอฟเฟคต์ให้ปุ่มดูมีมิติเป็นพิเศษอย่างในภาพด้านล่าง (รายละเอียด)

ปุ่ม floating ควรใช้สำหรับแอพที่มีการกระทำในเชิงบวกหรือสร้างสรรค์ (เช่น เพิ่มรายการใหม่) เท่านั้น ถ้าแอพไม่มีหน้าที่ลักษณะนี้ ก็ไม่ต้องใส่เข้ามาให้เกะกะ (เช่น แอพดูภาพก็ไม่ต้องมีปุ่มเพิ่มภาพ)

การใช้ปุ่ม raised/flat ก็มีคุณลักษณะแตกต่างกันไปตามบริบทของงาน ตัวอย่างในภาพด้านล่าง ควรใช้ปุ่มแบบ flat มากกว่าเพื่อไม่แย่งความสนใจจากส่วนอื่นๆ ของหน้าจอ

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

การใช้ภาพ

Material Design ดำเนินรอยตามแนวทางออกแบบ magazine UI ของ Android 4.x ที่เน้นความโดดเด่นของภาพประกอบเหมือนนิตยสาร
ดังนั้น Material Design จึงแนะนำให้ใช้ภาพประกอบเป็นหัวเรื่อง แต่ก็บอกว่าควรใช้ภาพถ่าย (photograph) มากกว่าภาพกราฟิก เพื่อให้ดูสมจริงมากกว่า

ภาพเคลื่อนไหวและแอนิเมชั่น

เนื้อหาส่วนนี้แสดงเป็นภาพนิ่งได้ยาก ขอใช้วิธีฝังวิดีโอจากเว็บไซต์กูเกิลแทนนะครับ จะได้เห็นภาพมากกว่า
ทุกอย่างบนหน้าจอ แตะแล้วมีปฏิกริยาให้เห็นชัดว่าแตะแล้ว

การใช้แอนิเมชันแสดงการเคลื่อนไหว (motion) ที่มีความหมาย (meaning) เช่น กดปุ่มแล้วขยายมาเป็นเนื้อหา

การวางโครงสร้างของ UI

กล่าวถึงส่วนประกอบย่อยต่างๆ กันมาเยอะแล้ว พอนำมาประกอบเข้าด้วยกัน Material Design ก็มีคำแนะนำสำหรับการวาง UI บนแต่ละอุปกรณ์ ดังนี้
มือถือ มี App Bar อยู่ด้านบนเป็นหลัก, มี Bottom Bar อยู่ด้านล่างถ้าจำเป็น และมีแถบนำทางด้านซ้าย-ขวา (Left/Right Nav) ถ้าจำเป็น (สังเกตว่าฐานะของ Left/Right ไม่เท่ากัน)

แท็บเล็ต คล้ายกับมือถือ แต่สามารถนำปุ่มบางส่วนจาก Bottom Bar ไปใส่ไว้ใน App Bar ด้านบนได้ด้วย (ถ้ายังไม่ครบค่อยเพิ่ม Bottom Bar อีกที)
ส่วน Left/Right Nav สามารถเลือกได้ว่าจะซ่อนหรือแสดงผลตลอดเวลา

เดสก์ท็อป เนื่องจากมีเนื้อที่มากขึ้น ก็จะแสดง Left/Right Nav ตลอดเวลา และสามารถมีทูลบาร์ย่อยเพิ่มเข้ามาได้ด้วย

ตัวอย่างการออกแบบของกูเกิลตาม Material Design บนหน้าจออุปกรณ์ต่างๆ

ตัวอย่างผลงานของทีม Google Play ที่ออกแบบแอพ Google Play ขึ้นมาใหม่ตามหลัก Material Design

แอพเดียวกันเมื่อขยายมาแสดงบนจอใหญ่ของแท็บเล็ต

สรุป

เท่าที่ผมดูข้อมูลของ Material Design พอจะสรุปได้ดังนี้

  • เดินตามแนวทางของแอพ Android ฝั่งกูเกิลในช่วงหลัง ในแง่โครงสร้างของ UI ไม่ได้เปลี่ยนไปจากเดิมเยอะ ของเดิมยังมีใช้เยอะ เช่น App Bar หรือ Left/Right Nav
  • แต่สำหรับเดสก์ท็อปแล้ว เป็นการปรับ UI ของแอพหรือเว็บให้เหมาะกับจอสัมผัสมากขึ้น รองรับการอ่าน-สั่งงานด้วยนิ้วมากกว่าเดิม (ตัวอย่าง หน้าเว็บของ Design Guideline ก็สร้างด้วย Material Design)
  • ของใหม่จริงๆ คงเป็นการใช้สีเพื่อเน้นไฮไลท์ สร้างแบรนด์ของแอพ และปุ่ม floating ที่แปลกใหม่พอตัว (แต่จริงๆ เราเห็นการทดลองออกแบบแนวนี้มาบ้างแล้วในแอพของกูเกิลบางตัว เช่น Google+)
  • เน้นการใช้แอนิเมชันมากขึ้นมาก (เดิมทีกูเกิลไม่ค่อยเน้นเท่าไร) อันนี้จะคล้าย iOS 7

โดยรวมแล้วมันคือการ "จัดระเบียบ" ภาษาการออกแบบฝั่งกูเกิลใหม่หมด อีกไม่นานเราคงเห็นแอพและเว็บในเครือกูเกิลถูกจับเข้า "ระเบียบโลกใหม่" นี้กันหมด ซึ่งก็น่าจะดีในแง่ความสม่ำเสมอ เป็นอันหนึ่งอันเดียวกัน (ส่วนความสวยคงขึ้นกับมุมมองส่วนบุคคลนะครับ)
อุปสรรคที่กูเกิลต้องเผชิญคือ จะทำอย่างไรกับแอพเก่าของ third party ที่ไม่ยอมปรับตัวตาม ทุกวันนี้เรายังเห็นแอพที่เขียนด้วยธีมของ Android 2.x รันเคียงคู่กับธีม Holo ของ Android 4.x อยู่บ่อยๆ ดังนั้นถ้ากูเกิลปรับตัวเป็น Material Design (ซึ่งน่าจะเปิดตัวจริงๆ พร้อม Android L ตอนปลายปี) ก็ย่อมเจอปัญหาแบบเดียวกัน
ผู้ใช้งานสินค้าฝั่งแอปเปิลอาจคุ้นเคยกับแนวทางการออกแบบที่สม่ำเสมอและเป็นอันหนึ่งอันเดียวกัน ให้ประสบการณ์ใช้งานที่ดีกว่าฝั่งกูเกิลมาโดยตลอด แต่ Material Design ก็ถือเป็นความพยายามครั้งใหญ่ของกูเกิลในการพัฒนาเรื่องการออกแบบให้มีคุณภาพระดับทัดเทียมกัน (จึงไม่น่าแปลกใจที่แนวทางบางอย่างออกมาคล้ายๆ กัน)
ความสำคัญของเรื่องนี้คือผลิตภัณฑ์และบริการของกูเกิลมีเยอะมาก (เมื่อเทียบกับแอปเปิล) การที่ยักษ์ใหญ่ขยับตัวหนึ่งทีจึงมีความน่าสนใจเป็นอย่างมากว่า กูเกิลจะปรับปรุงตัวเองเรื่องการออกแบบได้เยอะแค่ไหน ซึ่งอีกไม่นานเราคงรู้กันครับ

แหล่งข้อมูลเพิ่มเติม

เอกสารหลักอยู่ที่ Material Design Guideline
วิดีโอ ถ้าเวลาน้อยดูคลิปนี้คลิปเดียวพอครับ Material design: Structure and components

คนที่สนใจปรัชญาการออกแบบ แนะนำให้ดู Material design principles โดยเฉพาะช่วงตอบคำถาม

ตัวอย่างการปรับแอพในเครือกูเกิลเอง (Google Play) ให้เป็น Material Design

การเขียนแอพ Android ให้เป็น Material Design

อีกเซสชันที่สอนปรับแอพเป็น Material Design

แอนิเมชันและภาพเคลื่อนไหวของ Material Design

Hiring! บริษัทที่น่าสนใจ

Token X company cover
Token X
Blockchain, ICO, Tokenization, Digital Assets, and Financial Service
Carmen Software company cover
Carmen Software
Hotel Financial Solutions
TechFlow Solution Co., Ltd. company cover
TechFlow Solution Co., Ltd.
TechFlow is a tech company which developing a one stop service platform for construction business.
Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
Gofive company cover
Gofive
“We create world-class software experience”
KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
LTMH (WM) _TECH company cover
LTMH (WM) _TECH
LTMH (WM) _TECH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

หลักการออกแบบ (design principle) ของ Material Design มีด้วยกัน 3 ข้อ
1.ใช้หลักการเลียนแบบ "วัสดุ" (material) ในโลกความเป็นจริง เน้นการใช้พื้นผิว (surface) และขอบ (edge) ใช้แสงเงา-ภาพเคลื่อนไหวเหมือนกับแสงเงา-การเคลื่อนไหวของวัตถุเชิงกายภาพ
2.เป็นการออกแบบที่ "ตั้งใจนำเสนอ" (intentional) ใช้วิธีการนำเสนอแบบเดียวกับสิ่งพิมพ์กระดาษ เช่น ฟอนต์ ที่ว่าง สีสัน ภาพประกอบ
3.แสดงการเคลื่อนไหว (motion) เพื่อบอกความหมาย (meaning) ของการกระทำ

เดี๋ยวนะ แนวนี้นี่มันคล้ายๆ UI สมัยลุงจ็อปใช้ปะครับ

ถ้าถามผมคิดว่า

  1. คำอธิบายอาจคล้ายๆ แต่ของจ็อบส์คือเลียนแบบวัตถุให้เหมือนจริงที่สุด แต่ของกูเกิลคือเรียนแบบคุณลักษณะของวัตถุ แต่เรื่องรูปลักษณ์กลับใช้วิธีลดรูปจนเหลือแต่รูปร่างแทน (เช่น สี่เหลี่ยม วงกลม) ไม่มี texture ใดๆ
  2. เรื่องสิ่งพิมพ์นี่น่าจะคล้ายกับ Magazine UI ของ Android 4.x มากกว่าครับ คนทำคือ Matias Duarte เหมือนกัน
  3. motion นี่ใช่เลย

เดามั่ว ๆ ว่า Droid Sans (Thai) เหมือนเดิมครับ :-)

คือสุขุมวิทมันเป็น Commercial Font และ Android (AOSP) มันเป็น Open Source ดังนั้นคงบันเดิลไปไม่ได้ ส่วน Droid Sans คุ้น ๆ ว่าเป็น Apache นะ (เฉพาะส่วนที่ขายให้ AOSP ไปมั้ง)

เอ๊ะ แต่ถ้ามีคนจ้างให้ทางคัดสรรดีมาก ทำ Open Source Font ขึ้นมานี่ก็อาจจะเป็นไปได้

Peterava_Romanoff Sat, 28/06/2014 - 13:46

In reply to by super_lw

ก็สวยนะ ผมยังเคยรูทเอาฟอนต์นี้ใส่เลย แต่แอพเฟซบุ๊คตัวมันเล็กมากอ่านไม่ออก แต่เมนูหลักโอเคเลยยกเว้นชื่อแอพ TH Sarabun T9 แจ่มกว่า

ปล.รู้สึกเหมือนอ่านหนังสือราชการ

ไปในแนวทางเดียวกันครับ ตามยุคสมัย แต่ก็ไม่ถึงกับแยกไม่ออกนะผมว่า
ถ้ามาแนวนี้ และทำให้ทุกแอพออกมาเป็นแบบเดียวกันได้เนี่ย ก็สวยไม่แพ้ iOS เหมือนกันนะเนี่ย

ดูแล้วก็สวยดี แต่ปัญหาคือ Fragment ของระบบนั้นแหละ

ขนาด Kitkat ออกมาเป็นปี ยังมีอุปกรณ์ใช้ไม่เกิน 15% ของระบบแล้ว L ออกมา กว่าอุปกรณ์ต่างๆ จะได้ใช้มาตรฐานการออกแบบนี้ กว่านักพัฒนาจะโอเค ออกแบบตามแนวทางนี้ ก็ต้องมีอุปกรณ์ที่ใช้ L มากพอแล้ว

กว่าจะเข้าที่ทั้งระบบ ไม่ต่ำกว่า 3 ปี (ซึ่งก็ไม่รู้จะเปลี่ยนแนวอีกไหม) เทียบกับ iOS 7 ที่สวยน้อยกว่าของ Android แต่เพราะความเป็นแอปเปิ้ลทำให้เปลี่ยนทั้งระบบได้ อุปกรณ์ย้อนหลังไป 3 ปีก็ได้ใช้หน้าตาใหม่ นักพัฒนาเลยหันไปหารูปแบบการออกแบบใหม่อย่างไม่สังเล

แต่คู่แข่งก็ไม่ได้หยุดนิ่งนะครับ WWDC รอบล่าสุดพิสูจน์แล้วว่าแอปเปิ้ลยุคหลัง Steve Jobs มาแล้ว แถมออกอะไรมา ผู้ใช้เดิมที่ถือเครื่องอยู่ ก็ใช้งานได้เกือบทั้งหมด

ครับ ผมเห็นแล้วว่าฝั่งแอปเปิลกลับมาเครื่องติดอีกครั้ง แต่ความน่ากลัวของกูเกิลที่ผมพูดถึงมันไกลกว่านั้นพอสมควร ออกแนวว่าไม่สามารถหนีให้พ้นได้

เอาจริง ๆ ถ้าจะนับเรื่อง fragmentation เนี่ย ... คือ เอ้อ ... Google Play Service เวอร์ชั่นล่าสุดรันอยู่บนอุปกรณ์ที่มี Google Play กว่า 95% ดังนั้นถ้าเขียนแอพที่ใช้ GPS แล้วก็สามารถการันตีได้ว่าอุปกรณ์ในท้องตลาด 95% นั้นรันได้แน่ ๆ

(ขยายความจากปากคำ Google แน่นอนว่าจริงหรือไม่จริงก็ไม่รู้ 555)

ก็ยังคิดว่าถ้าไม่ได้ใช้ฟีเจอร์ของ OS มากมายก็ไม่ต้องกังวลเรื่องความเก่าใหม่ของ OS มากนัก คือจุดประสงค์ที่แยกเอา GPS ออกมาก็เพื่อให้แอพยังสามารถ target Android เก่า ๆ ได้โดยใช้ฟีเจอร์ใหม่จาก GPS แทน ผมเข้าใจว่านี่เป็นการเลี่ยงปัญหามากกว่าจะเป็นการแก้ปัญหา แต่มันก็เป็นเรื่องช่วยไม่ได้ เพราะผู้ผลิต HW เองก็ไม่อยากเปิดซอร์สไดร์เวอร์ และก็ไม่อยากจะดูแลของเก่า ๆ (จริง ๆ อีกส่วนก็เพราะว่าไม่มีปัญญาทำ)

ส่วน "Material" เองจริง ๆ ก็สามารถ implement บน Android เวอร์ชั่นเก่า ๆ ก็ได้ (ก็ต้องลุ้นว่าจะมี Theme + Compatibility Lib ออกมาเมื่อไหร่)อย่าง Google+ บน Android ปัจจุบันก็ใกล้เคียงกับ Material มากแล้ว

จะว่าไป ความเห็นผมอย่างนึงที่อาจจะแย้งกับอีกหลาย ๆ คน คือ แอพแต่ละตัวไม่จำเป็นต้องหน้าตาเหมือนกันไปซะหมด ออกแบบมาแนวเดียวกันหมดก็ได้นะ ตราบใดที่เอเลเมนต์หลักบางอย่างมันยังอยู่ เช่น ไม่ไป override ปุ่ม back เป็นต้น (Facebook ทำ แถมทำออกมาไม่ดีด้วย)

ทั้งนี้ผมก็คิดว่า Holo ก็คงจะอยู่กับเราไปอีกเรื่อย ๆ นั่นแหละ ไม่ใช่ว่าพอมี L ปุ๊บ Holo หายไป แอพที่ใช้ Holo อยู่ก็น่าจะยังรันได้ปรกติครับ

ปล. มีคนบ่นว่าบริการของ Google ในระยะหลังผูกกับ GPS มากเกินไป ทำให้แอพที่ใช้บริการพวกนี้รันบนอุปกรณ์ที่ไม่มี GPS (เช่น Kindle Fire) ไม่ได้ อันนี้ก็ไม่ทราบว่าจะแก้ยังไง

ถ้าเขียนแอพที่ใช้ GPS แล้วก็สามารถการันตีได้ว่าอุปกรณ์ในท้องตลาด 95% นั้นรันได้แน่ ๆ

ใช้ GLONASS ด้วยได้มั้ยครับ

สิ่งผมได้เห็นอย่างหนึ่งคือ gg ร้ายกว่า ss เยอะ เพราะก๊อปเขามา(แรงบันดาลใจ)แล้วทำออกมาได้ดีมากจนผู้คนยอมรับ ตั้งสมัยเปลี่ยนดรอย์ให้มีระบการใช้งานเป็นสัมผัสเหมือนกับ iPhone ละ

ปล.อยากได้จังแต่ถ้าไม่ซื้อตัวแพงๆหน่อยก็ไม่มีสิทธิ์ได้อัพ เศร้าไป

• เป็นการออกแบบที่ "ตั้งใจนำเสนอ" (intentional) ใช้วิธีการนำเสนอแบบเดียวกับสิ่งพิมพ์กระดาษ เช่น ฟอนต์ ที่ว่าง สีสัน ภาพประกอบ

ตรงนี้หมายความว่าอะไรครับ

หมายถึง ตั้งใจที่จะนำเสนอในรูปแบบเดียวกับสิ่งพิมพ์บนกระดาษ เช่นการใช้ตัวหนังสือ ที่ว่าง สีสัน และภาพประกอบ ครับ

ไม่ใช่แค่ว่าบังเอิญว่ามันเหมือนสื่อสิ่งพิมพ์

อันนี้แยกสองประโยคครับ จริงๆ ควรเขียนว่า

เป็นการออกแบบที่ "ตั้งใจนำเสนอ" (intentional); ใช้วิธีการนำเสนอแบบเดียวกับสิ่งพิมพ์กระดาษ เช่น ฟอนต์ ที่ว่าง สีสัน ภาพประกอบ

ต้นฉบับคือ

Bold, graphic, intentional

คำว่า intentional ผมแปลว่า "ตั้งใจนำเสนอ" อารมณ์จะแนวๆ ว่าถ้าแอพตัวนี้มีฟังก์ชันแบบนี้เด่น ก็เอามาโชว์ชัดๆ เลยว่ามันทำอันนี้ได้นะ ขับเน้นให้เด่นชัด โดยใช้องค์ประกอบการดีไซน์ต่างๆ เข้าช่วย

ถ้าเทียบกับฝั่ง Apple ผมยังคิดว่า Apple มีความเข้าใจลึกซึ้งในด้านการออกแบบมากกว่าอย่างเห็นได้ชัด

ไม่ต้องอะไรมาก ดูแค่ Grid System ก็เห็นได้ทันทีว่า Grid System ของ Apple มีความซับซ้อนที่เข้าใจรายละเอียดของงานกราฟฟิกที่มากกว่า

ในเชิงภาพลักษณ์รวมๆ ช่วงก่อนที่ iOS7 จะออกมา ก็ลุ้นอยู่ว่าจะออกมาแนวๆ นี้หรือเปล่า เพราะพอพูดถึง graphic แบบแบนๆ สไตล์แบบนี้ก็มีให้เห็นมาสักระยะแล้วจากพวกงาน infographic ทั้งหลาย แต่ท่านเซอร์ Ive ก็ยังพาฉีกออกไปได้ อันนี้ถือว่า Apple ยังคงความมีสไตล์ของตัวเองได้ (แม้จะไม่ค่อยชอบดีไซน์ icon บางตัวก็ตามที)

อย่างที่บทความว่า มันเป็นการเริ่มต้นของ Google ที่จะพัฒนางานดีไซน์ของตัวเอง

อันนี้ก็ต้องดูกันต่อไป

ปกติไม่เคยดู Live Keynote I/O ปีนี้ดูครั้งแรก

ประทับใจอันนี้มาก เป็นครั้งแรกเลยที่รู้สึกว่า Adnroid จะสวยกว่า iOS

ทำให้อยากได้ Pure Android มาขึ้นไปอีก...

แต่ขี้เกียจแฟลชกลับถ้าต้องส่งน้อง S5 เคลม

ประทับใจมากๆเลยกับ android l
เห็นแล้วก้อรู้เลยว่า android จะมีอนาคตที่ดีมากๆ
ระบบไหลลื่น หน้าตาสวยงาม การทำงานเข้ากันได้ดีกับหลายๆหน้าจอ

เห็นฝั่ง Andriod จัดเต็ม มาสวยขนาดนี้ ดีใจมาก ๆ เลยครับ (ทำให้ Apple ขยับหน่อย อย่านิ่งนาน lol)
ยอมรับเลยครับ ดูแล้วรู้สึกว่าสวย สวยแบบไม่แพ้ iOS เลยนะ

Apple
public://topics-images/apple_webp.png
SCB10X
public://topics-images/347823389_774095087711602_515970870797767330_n_webp.png
Windows 11
public://topics-images/hero-bloom-logo.jpg
Huawei
public://topics-images/huawei_standard_logo.svg_.png
Google Keep
public://topics-images/google_keep_2020_logo.svg_.png
Instagram
public://topics-images/instagram_logo_2022.svg_.png
Microsoft
public://topics-images/microsoft_logo.svg_.png
Basecamp
public://topics-images/bwpepdi0_400x400.jpg
FTC
public://topics-images/seal_of_the_united_states_federal_trade_commission.svg_.png
Pinterest
public://topics-images/pinterest.png
Palantir
public://topics-images/-nzsuc6w_400x400.png
AIS Business
public://topics-images/logo-business-2021-1.png
PostgreSQL
public://topics-images/images.png
JetBrains
public://topics-images/icx8y2ta_400x400.png
Krungthai
public://topics-images/aam1jxs6_400x400.jpg
Palworld
public://topics-images/mccyhcqf_400x400.jpg
Bill Gates
public://topics-images/bill_gates-september_2024.jpg
VMware
public://topics-images/1nj4i1gp_400x400.jpg
Take-Two Interactive
public://topics-images/0khle7nh_400x400.jpg
OpenAI
public://topics-images/ztsar0jw_400x400.jpg
Thailand
public://topics-images/flag_of_thailand.svg_.png
ServiceNow
public://topics-images/ytnrfphe_400x400.png
Klarna
public://topics-images/urcllpjp_400x400.png
Google Play
public://topics-images/play.png
Drupal
public://topics-images/drupal.png
Virtua Fighter
public://topics-images/virtua_figther_2024_logo.png
Paradox Interactive
public://topics-images/paradox_interactive_logo.svg_.png
Europa Universalis
public://topics-images/europa-icon.png
Nintendo Switch 2
public://topics-images/mainvisual.png
Cloudflare
public://topics-images/cloudflare_logo.svg_.png
Samsung
public://topics-images/samsung.png
Google
public://topics-images/google_2015_logo.svg_.png
Uber
public://topics-images/uber.png
Microsoft 365
public://topics-images/m365.png
USA
public://topics-images/flag_of_the_united_states.svg_.png
GM
public://topics-images/0pe0po-z_400x400.jpg
Perplexity
public://topics-images/perplex.jpg
Xperia
public://topics-images/xperia.png
iOS 18
public://topics-images/ios-18-num-96x96_2x.png
True
public://topics-images/true_logo.png
SoftBank
public://topics-images/softbank.jpg
Pac-Man
public://topics-images/pacman.png
Harry Potter
public://topics-images/harry.png
Marvel
public://topics-images/marvel.png
Skydance
public://topics-images/skydance.png
SEA
public://topics-images/sealogo.png
Find Hub
public://topics-images/find.png
Accessibility
public://topics-images/accessibility-128x128_2x.png
Material Design
public://topics-images/m3-favicon-apple-touch.png
Android 16
public://topics-images/android16.png
Android
public://topics-images/android_0.png
Firefox
public://topics-images/firefox_logo-2019.svg_.png
Google Messages
public://topics-images/messages.png
Notepad
public://topics-images/notepad.png
Singapore
public://topics-images/flag_of_singapore.svg_.png
Airbnb
public://topics-images/airbnb.png
PS5
public://topics-images/ps5.png
Krafton
public://topics-images/krafton.png
Doom
public://topics-images/doom-game-s_logo.svg_.png
AMD
public://topics-images/amd_logo.svg_.png
GTA
public://topics-images/gta_0.png
DoorDash
public://topics-images/doordash.png
YouTube
public://topics-images/yt.png
YouTube Music
public://topics-images/yt-music.png
Facebook
public://topics-images/fb.png
iQiyi
public://topics-images/iqiyi_0.png
Viu
public://topics-images/viu.png
Amazon Prime Video
public://topics-images/prime-vid.png
Spotify
public://topics-images/spotify.jpg
Apple TV
public://topics-images/apple-tv.png
HBO Max
public://topics-images/max.png
Threads
public://topics-images/threads.png
Alexa
public://topics-images/alexa.png
Kindle App
public://topics-images/kindle.png
Shopee
public://topics-images/shopee.png
Waze
public://topics-images/waze.png
Bilibili
public://topics-images/bili.png
Google Maps
public://topics-images/maps.png
Apple Music
public://topics-images/apple-music.png
Claude
public://topics-images/claude.png
TikTok
public://topics-images/tiktok.png
Xbox
public://topics-images/xbox.png
Tesla
public://topics-images/tesla.png
Chrome
public://topics-images/chrome.png
Google Calendar
public://topics-images/gcal.png
Google Home
public://topics-images/ghome.png
Google Meet
public://topics-images/meet.png
NotebookLM
public://topics-images/notebooklm.png
Reddit
public://topics-images/reddit.png
Assassin’s Creed
public://topics-images/ac.png
Mark Zuckerberg
public://topics-images/zuck.jpg
Meta
public://topics-images/meta.png
Meta AI
public://topics-images/meta-ai.png
Epic Games
public://topics-images/epic_games_logo.svg_.png
Unreal
public://topics-images/unreal_engine_logo-new_typeface-svg.png
Fortnite
public://topics-images/fortnite.png
DeepMind
public://topics-images/deepmind.png
Databricks
public://topics-images/databricks.png
Netflix
public://topics-images/netflix-logo.png
Microsoft Azure
public://topics-images/azure.png
Microsoft Copilot
public://topics-images/microsoft_copilot_icon.svg_.png
Bing
public://topics-images/bing.png
EA
public://topics-images/ea.png
Intel
public://topics-images/intel.png
Amazon
public://topics-images/amazon.png
AWS
public://topics-images/aws.png
Zoom
public://topics-images/zoom.png
Dropbox
public://topics-images/dropbox_0.png
Dell Technologies
public://topics-images/dell-tech.png
Nothing
public://topics-images/nothing.svg_.png
Microsoft Teams
public://topics-images/teams.png
Mojang
public://topics-images/mojang.png
Minecraft
public://topics-images/minecraft.png
Redis
public://topics-images/redis_logo.svg_.png
Ubisoft
public://topics-images/ubisoft_logo.svg_.png
Elden Ring
public://topics-images/elden.png
Brave
public://topics-images/brave.png
Opera
public://topics-images/opera.png
Vivaldi
public://topics-images/vivaldi.png
Microsoft Edge
public://topics-images/edge.png
Duolingo
public://topics-images/duolingo.png
LinkedIn
public://topics-images/linkedin.png
Canva
public://topics-images/canva.png
Realme
public://topics-images/realme.png
NASA
public://topics-images/nasa-logo.png
Booking.com
public://topics-images/booking.png
Agoda
public://topics-images/agoda.png
Bolt
public://topics-images/bolt.png
Temu
public://topics-images/temnu.png
LINE
public://topics-images/line.png
Facebook Messenger
public://topics-images/messenger.png
WhatsApp
public://topics-images/whatsapp.png
Telegram
public://topics-images/telegram.png
Signal
public://topics-images/signal.png
X.com
public://topics-images/x.png
Grok
public://topics-images/grok.png
xAI
public://topics-images/xai.png
CapCut
public://topics-images/capcut.png
Edits
public://topics-images/edit.png
Google One
public://topics-images/gone.png
Tinder
public://topics-images/tinger.png
Whoscall
public://topics-images/whoscall.png
OneDrive
public://topics-images/onedrive.png
Lightroom
public://topics-images/lr.png
Meitu
public://topics-images/meitu.png
Outlook
public://topics-images/outlook.png
Excel
public://topics-images/excel.png
PowerPoint
public://topics-images/ppt.png
Microsoft Word
public://topics-images/word.png
Phone Link
public://topics-images/phone-link.png
OneNote
public://topics-images/onenote.png
Windows App
public://topics-images/windows-app.png
Notion
public://topics-images/notion.png
Google Drive
public://topics-images/drive.png
YouTube Kids
public://topics-images/yt-kids.png
Gboard
public://topics-images/gboard.png
DeepSeek
public://topics-images/deepseek_logo.svg_.png
Prince of Persia
public://topics-images/prince-persia.png
Sony
public://topics-images/nq0nd2c0_400x400.jpg
Cisco
public://topics-images/jmyca1yn_400x400.jpg
Alibaba Cloud
public://topics-images/qm43orjx_400x400_cloud.png
Coinbase
public://topics-images/consumer_wordmark.png
CarPlay
public://topics-images/carplay.png
Rust
public://topics-images/rust-logo-blk.png
Red Hat
public://topics-images/redhat.png
Anthropic
public://topics-images/anthropic.png
Xcode
public://topics-images/xcode.png
Tim Cook
public://topics-images/tim-cook.jpg
Donald Trump
public://topics-images/trump.jpg
Microsoft Surface
public://topics-images/surface.jpg
Copilot+ PC
public://topics-images/copilotpc.png
Stellar Blade
public://topics-images/stellar-blade.jpg
Snapdragon
public://topics-images/snapdragon_chip.png
Qualcomm
public://topics-images/qualcomm-logo.svg_.png
CoreWeave
public://topics-images/coreweave.png
Ford
public://topics-images/ford.png
Xiaomi
public://topics-images/xiaomi.png
Google Cloud
public://topics-images/google_cloud_logo.svg_.png
PlayStation Network
public://topics-images/psn.png
PlayStation Plus
public://topics-images/ps-plus.png
Windsurf
public://topics-images/windsurf.png
Square Enix
public://topics-images/square-enix.png
MIT
public://topics-images/x7hyjl3t_400x400.jpg
Zoox
public://topics-images/zoox.jpg
Evernote
public://topics-images/1neatidg_400x400.jpg
Magic the Gathering
public://topics-images/magic.png
Call of Duty
public://topics-images/cod.png
NVIDIA
public://topics-images/nvidia_logo.svg_.png
Satya Nadella
public://topics-images/nadella.png
Nintendo
public://topics-images/nintendo.png
Japan
public://topics-images/japan_flag.png
China
public://topics-images/china-flag-sq.png
Sam Altman
public://topics-images/sam-altman.png
SNK
public://topics-images/snk_logo.svg_.png
EPYC
public://topics-images/epyc.png
HPE
public://topics-images/hpe.png
Juniper
public://topics-images/juniper.png
CMA
public://topics-images/cma.png
App Store
public://topics-images/app-store.png
DoJ
public://topics-images/doj.png
Siri
public://topics-images/siri.png
Apple Intelligence
public://topics-images/apple-intelligence.png
Acer
public://topics-images/acer.png
GeForce
public://topics-images/geforce.png
Omen
public://topics-images/omen.png
HP
public://topics-images/hp.png
Alienware
public://topics-images/alienware.png
Dell
public://topics-images/dell.png
Bungie
public://topics-images/bungie.png
Marathon
public://topics-images/marathon.png
Intel Arc
public://topics-images/badge-arc-graphics.png
GitHub
public://topics-images/8zfrryja_400x400.png
GitHub Copilot
public://topics-images/copilot.png
Foxconn
public://topics-images/foxconn_0.png
Visual Studio
public://topics-images/vs.png
Visual Studio Code
public://topics-images/vscode.png
WSL
public://topics-images/wsl.png
Linux
public://topics-images/linux.png
Tencent
public://topics-images/tencent_logo_2017.svg_.png
Entra
public://topics-images/microsoft_entra_id_color_icon.svg_.png
RHEL
public://topics-images/rhel-icon.png
MSI
public://topics-images/msi-logo-for_digital_use_b.png
MCP
public://topics-images/mcp.png
Docker
public://topics-images/docker.png
RISC-V
public://topics-images/risc-v-logo.svg_.png
Fedora
public://topics-images/fedora.png
ASUS
public://topics-images/asus.png
ROG
public://topics-images/rog-logo_red.png
Naughty Dog
public://topics-images/naughty-dog.png
AIS
public://topics-images/357073423_657473419752809_8491928084596189631_n.png
National Telecom
public://topics-images/nt.jpg
Elon Musk
public://topics-images/elon_musk_2015_0.jpg
OpenShift
public://topics-images/openshift-logotype.svg-0.png
Shift Up
public://topics-images/shiftup.png
Bethesda
public://topics-images/bethesda.png
The Elder Scrolls
public://topics-images/tes.png
CATL
public://topics-images/img_7841.png
Radeon
public://topics-images/radeon.png
Borderlands
public://topics-images/borderlands4.png
Android XR
public://topics-images/android-xr.png
Ninja Theory
public://topics-images/ninja.jpg
Jonathan Ive
public://topics-images/ive.jpg
Bitcoin
public://topics-images/bitcoin.svg_.png
Baidu
public://topics-images/baidu.jpg
Wear OS
public://topics-images/wearos.png
Activision
public://topics-images/activision.svg_.png
Netmarble
public://topics-images/netmarble.png
NetEase
public://topics-images/netease.png
Fujifilm
public://topics-images/l_9ycfw2_400x400.png
Google Vids
public://topics-images/vids.png
Google Docs
public://topics-images/docs.png
Google Sheets
public://topics-images/sheets.png
Google Chat
public://topics-images/gchat.png
Google Slides
public://topics-images/slides.png
Google Photos
public://topics-images/photos_0.png
Snapchat
public://topics-images/snapchat.png
Google TV
public://topics-images/gtv.png
Android Auto
public://topics-images/aauto.png
Gmail
public://topics-images/gmail.png
Google Forms
public://topics-images/forms.png
Google Workspace
public://topics-images/workspace_0.png
Android Studio
public://topics-images/android_studio_logo_2024.svg_.png
Pocket
public://topics-images/spnhfky8_400x400.png
Mozilla
public://topics-images/mozilla.jpg
Thunderbird
public://topics-images/thunderbird.png
Bluesky
public://topics-images/bluesky.jpg
Warhammer
public://topics-images/warhammer-bw.png
Relic Entertainment
public://topics-images/relic_entertainment_logo.svg_.png
Age of Empires
public://topics-images/age_of_empires_franchise_logo.png
Azul
public://topics-images/azul.png
Meta Quest
public://topics-images/meta-quest.png
Informatica
public://topics-images/qzlzwpsp_400x400.jpg
Salesforce
public://topics-images/salesforce.com_logo.svg_.png
Steam
public://topics-images/steam.png
Valve
public://topics-images/valve_logo.svg_.png
SteamOS
public://topics-images/steamos_wordmark.svg_.png
Steam Deck
public://topics-images/steam-deck.png
Arch Linux
public://topics-images/archlinux-logo-standard-version.svg_.png
Half-Life
public://topics-images/orange_lambda.svg_.png
Counter-Strike
public://topics-images/counter-strike.png
OnlyFans
public://topics-images/onlyfans_logo_icon_blue.png
Strava
public://topics-images/strava.png
Mortal Kombat
public://topics-images/mortal-kombat.png
Canon
public://topics-images/canon.png
Snipping Tool
public://topics-images/snipping.png
Microsoft Paint
public://topics-images/paint.png
Microsoft Photos
public://topics-images/photos.png
File Explorer
public://topics-images/file_explorer.png
Git
public://topics-images/git-logo.svg_.png
Star Wars
public://topics-images/star-wars.png
Activision Blizzard
public://topics-images/actvision-blizz.png
Microsoft Store
public://topics-images/microsoft-store.png
France
public://topics-images/france.png
Ricoh
public://topics-images/ricoh_logo_2005.svg_.png
Xeon
public://topics-images/xeon.png
.NET
public://topics-images/dotnet.png
SQL Server
public://topics-images/microsoft_sql_server_2025_icon.svg_.png
Power BI
public://topics-images/power-bi.png
Microsoft Fabric
public://topics-images/fabric.png
MSN
public://topics-images/msn.png
SharePoint
public://topics-images/sharepoint.png
Ubuntu
public://topics-images/ubuntu-logo-2022.svg_.png
Debian
public://topics-images/debian-openlogo.svg_.png
LLM
public://topics-images/7410e129-824e-479c-93c7-558e87130b8f.png
Meituan
public://topics-images/meituan.png
Logitech
public://topics-images/logitech_logo.svg_.png
Llama
public://topics-images/llama.png
Oracle
public://topics-images/oracle_logo.svg_.png
Arc Browser
public://topics-images/arc.png
Circle
public://topics-images/circle.png
T-Mobile
public://topics-images/tmobile.jpg
Starlink
public://topics-images/starlink.jpg
SpaceX
public://topics-images/hbri04tm_400x400.jpg
Apple Arcade
public://topics-images/en-us-large-1x.png
TypeScript
public://topics-images/typescript.svg_.png
AlmaLinux
public://topics-images/almalinux.png
Subnautica
public://topics-images/subnautica.png
Clair Obscur
public://topics-images/clair-33.png
Dragon Quest
public://topics-images/dragon_quest_logo.png
Twitter
public://topics-images/twitter300.png
One UI
public://topics-images/one-ui.png
Fire TV
public://topics-images/amazon_fire_tv_2024.svg_.png
Stellantis
public://topics-images/stellantis.png
Taobao
public://topics-images/taobao.png
WeChat
public://topics-images/wechat.png
Alipay
public://topics-images/alipay.png
DingTalk
public://topics-images/dingtalk.png
Alibaba
public://topics-images/alibaba-group-logo.svg_.png
Pokemon
public://topics-images/international_pokemon_logo.svg_.png
NBTC
public://topics-images/nbtc.png
CD Projekt
public://topics-images/cd_projekt_logo.svg_.png
Cyberpunk 2077
public://topics-images/cyberpunk.png
The Witcher
public://topics-images/witcher.png
Boeing
public://topics-images/boeing.png
Discord
public://topics-images/discord.png
Grammarly
public://topics-images/grammarly.png
Google Lens
public://topics-images/lens.png
WordPress
public://topics-images/wordpress.png
Automattic
public://topics-images/automattic.png
Zotac
public://topics-images/zotac.png
Black Forest Labs
public://topics-images/flux.png
Sega
public://topics-images/sega.png
Twitch
public://topics-images/twitch.png
Person
public://topics-images/gemini_generated_image_ddj47iddj47iddj4.png
IntelliJ
public://topics-images/intellij.png
CrowdStrike
public://topics-images/cs_logo.png
Bandai Namco
public://topics-images/bandainamco.png
Oppo
public://topics-images/oppo.png
Dontnod
public://topics-images/don-t_nod.png
Hugging Face
public://topics-images/huggingface.png
Bixby
public://topics-images/logo_bixby_new.svg_.png
Gemma
public://topics-images/gemma.png
Flash Express
public://topics-images/flash.png
Lyft
public://topics-images/lyft.png
James Bond
public://topics-images/007.png
Snowflake
public://topics-images/snowflake.png
IO Interactive
public://topics-images/ioi.png
The Sims
public://topics-images/the_sims.png
Character.AI
public://topics-images/character_ai.png
IBM
public://topics-images/xy93qvy4_400x400.png
USB
public://topics-images/usb-logo.png
Zynga
public://topics-images/zynga.svg_.png
Broadcom
public://topics-images/broadcom.png
Photoshop
public://topics-images/ps.png
Adobe
public://topics-images/adobe.png
Premiere Pro
public://topics-images/premier.png
Database
public://topics-images/gemini_generated_image_nlgayenlgayenlga.png
GeForce Now
public://topics-images/gf-now.png
Go
public://topics-images/o6aczwfv_400x400.png
ChatGPT
public://topics-images/chatgpt.png
Final Fantasy
public://topics-images/ff.png
Swift
public://topics-images/swift_logo.svg_.png
Cursor
public://topics-images/cursor.png
AirPods
public://topics-images/airpods_pro2.png
AirPods Max
public://topics-images/airpodsmax.png
Koei Tecmo
public://topics-images/koei_tecmo.png
Team Ninja
public://topics-images/team-ninja.png
Disney+
public://topics-images/disney-plus.png
Capcom
public://topics-images/capcom.png
Pornhub
public://topics-images/pornhub-logo.svg_.png
Proton
public://topics-images/proton.png
PlayStation
public://topics-images/playstation.png
GOG
public://topics-images/gog-logo.png
Mistral
public://topics-images/mistral.png
No Man's Sky
public://topics-images/nomansky.png
Hello Games
public://topics-images/hello-games-logo.png
SCB
public://topics-images/scb.png
Kasikorn Bank
public://topics-images/kbank.png
Grasshopper Manufacture
public://topics-images/grasshopper-100.png
Metal Gear
public://topics-images/metal_gear_franchise_logo.svg_.png
Google Wallet
public://topics-images/g-wallet.png
PayPal
public://topics-images/paypal.png
Mark Cuban
public://topics-images/cuban.jpg
Giant Squid
public://topics-images/giant-squid.png
Black Myth: Wukong
public://topics-images/blackmyth.jpg
Deathloop
public://topics-images/deathloop_logo.webp_.png
Resident Evil
public://topics-images/residentevil.png
Street Fighter
public://topics-images/street_fighter_logo.png
Ryu Ga Gotoku
public://topics-images/ryugagotokustudio.png
Like a Dragon
public://topics-images/lad-logo.png
Sonic the Hedgehog
public://topics-images/sonic.png
Blender
public://topics-images/logo_blender.svg_.png
Volvo
public://topics-images/volvo-iron-mark-black.svg_.png
Atomic Heart
public://topics-images/atomic.png
Hitman
public://topics-images/hitman.png
Mac
public://topics-images/apple-finder.png
Arc Raiders
public://topics-images/arc-raiders.jpg
Krungsri Bank
public://topics-images/krungsri.png
Lenovo
public://topics-images/branding_lenovo-logo_lenovologoposred_low_res.png
Owlcat Games
public://topics-images/owlcat.png
Scale
public://topics-images/scale_ai.png
The Outer Worlds
public://topics-images/1600px-outerworlds-logo.png
Obsidian Entertainment
public://topics-images/obsidian_entertainment.svg_.png
Avowed
public://topics-images/avowed.png
Grounded
public://topics-images/grounded.png
Atlus
public://topics-images/atlus_logo_thin_stroke_277x108.png
High on Life
public://topics-images/high-logo.png
Ryzen
public://topics-images/ryzen.png
Flight Simulator
public://topics-images/microsoft_flight_simulator.png
Indiana Jones
public://topics-images/indiana_jones_logo.svg_.png
Dawnwalker
public://topics-images/the-blood-of-dawnwalker-logo-light.png
Rebel Wolves
public://topics-images/rebel-wolves-logo-black.png
inXile
public://topics-images/inxile_entertainment_logo.png
Double Fine Productions
public://topics-images/double-fine.png
Game Freak
public://topics-images/game_freak_logo.svg_.png
iOS 26
public://topics-images/ios26.png
Tahoe
public://topics-images/macos26.png
iPadOS 26
public://topics-images/ipados26.png
Zelda
public://topics-images/zelda_logo.svg_.png
watchOS 26
public://topics-images/watchos26.png
Apple Vision Pro
public://topics-images/applevisionpro.png
Amiibo
public://topics-images/amiibo.png
Thunder Lotus
public://topics-images/thunder-lotus.png
Games
public://topics-images/role-playing_video_game_icon.svg_.png
Waymo
public://topics-images/waymo.png
Grab
public://topics-images/grab_0.png
Fallout
public://topics-images/fallout_logo.svg_.png
Warner Bros. Discovery
public://topics-images/wbd.png
Splatoon
public://topics-images/splatoon.png
Gemini
public://topics-images/google_gemini_logo.png
Kingston
public://topics-images/kingston.png
Roblox
public://topics-images/roblox_thumb.png
Google Pixel
public://topics-images/pixel_wordmark.svg_.png
Jensen Huang
public://topics-images/jensen-headshot-1906-600x338.png
Midjourney
public://topics-images/61396273.png
NBCUniversal
public://topics-images/umh_w5l-400x400.png
Disney
public://topics-images/disney.png
Snap
public://topics-images/snap_inc.png
Wikipedia
public://topics-images/wikipedia-logo-v2.svg_.png
Kaggle
public://topics-images/kaggle_logo.svg_.png
Wikimedia Foundation
public://topics-images/wikimedia_foundation.png
IonQ
public://topics-images/ionq.png
Apple TV+
public://topics-images/apple_tv_plus.png
Slack
public://topics-images/slack.png
Webex
public://topics-images/webex.png
Wayland
public://topics-images/wayland.png
GNOME
public://topics-images/gnomelogo.svg_.png
X.Org
public://topics-images/xorg.png
PCI-SIG
public://topics-images/pci-sig_logo.png
PCI
public://topics-images/pci_express.svg_.png
Instinct
public://topics-images/instinct.png
MariaDB
public://topics-images/img_9067.png
Mattel
public://topics-images/mattel-2019-svg.png
Silent Hill
public://topics-images/silent_hill_2022_logo.png
Bloober Team
public://topics-images/blooberlogo260b.png
India
public://topics-images/flag_of_india.png
Nexon
public://topics-images/nexon.svg_.png
Helldivers
public://topics-images/helldivers_print_logo.png
Mac Mini
public://topics-images/mac-mini-202410-gallery.png
Dyson
public://topics-images/dyson.png
Mario Kart
public://topics-images/mario-kart-100.png
Germany
public://topics-images/flag_of_germany.svg_.png
Gears of War
public://topics-images/gears-of-war-logo-2006.png
Warren Buffett
public://topics-images/buffett.png
Craig Federighi
public://topics-images/craige1.png
Boston Dynamics
public://topics-images/boston.png
aespa
public://topics-images/aespa.png
NewJeans
public://topics-images/newjeans.png
iPhone 16
public://topics-images/iphone16_.png
iPhone 16 Pro
public://topics-images/iphone16_pro.png
Indonesia
public://topics-images/indo_flag.png
Devil May Cry
public://topics-images/dmc5.png