Android ครอบคลุมอุปกรณ์ รูปแบบ และขนาดหน้าจอที่หลากหลาย การออกแบบสำหรับองค์ประกอบที่ล็อกไว้แบบพิกเซลที่เฉพาะเจาะจงจึงไม่เพียงแต่ไม่มีประสิทธิภาพ แต่ยังอาจส่งผลเสียต่อประสบการณ์ของผู้ใช้ด้วย แต่ให้ออกแบบ สร้าง และคิด แบบปรับเปลี่ยนได้ เมื่อเร็วๆ นี้เราได้เปิดตัว API ใหม่ที่จะนำแนวคิดการออกแบบที่คุ้นเคยมาใช้เพื่อช่วยสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้
Pawparazzi เป็นแอปตัวอย่างที่แสดงแนวคิดเหล่านี้ โดยได้รับการออกแบบและ สร้างขึ้นเพื่อเน้นการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์โดยใช้ API ที่ปรับเปลี่ยนตามอุปกรณ์ เช่น Grid และ Flexbox
การคิดแบบปรับเปลี่ยนได้ไม่ได้เป็นเพียงเรื่องของการออกแบบโดยใช้เบรกพอยต์ แต่ยังเป็นการคิดถึงเนื้อหาในคอนเทนเนอร์ที่ยืดหยุ่นด้วย
ทุกอย่างเป็นตารางกริด
การมีพื้นฐานในการจัดโครงสร้างเนื้อหาจะช่วยให้คุณมีแนวทางปฏิบัติในการออกแบบที่ดี และช่วยให้คุณตัดสินใจได้ว่าควรปรับเนื้อหาอย่างไร Android มีตารางกริดพื้นฐานขนาด 8 dp ซึ่งเราสามารถจัดแนวเนื้อหาทั้งหมดในระดับย่อยได้
Pawparazzi ใช้ตารางกริดเลย์เอาต์แบบลำดับชั้นแทนที่จะใช้ตารางกริดแบบโมดูลาร์ หรือตารางกริดคอลัมน์แบบทิศทางเดียว ซึ่งหมายความว่าคอลัมน์และแถวที่ ประกอบกันจะพิจารณาตามลำดับชั้นของเนื้อหา
การตัดสินใจเลือกประเภทตารางกริดควรขึ้นอยู่กับเนื้อหา เริ่มต้นด้วยเนื้อหาแอป และพิจารณาว่าควรจัดกลุ่มเนื้อหาอย่างไร ซึ่งจะช่วยกำหนด โครงสร้างเลย์เอาต์โดยรวม ดูข้อมูลเพิ่มเติมเกี่ยวกับการคิดในรูปแบบของแผงได้ที่กริดและหน่วย โครงสร้างเนื้อหา และการเริ่มต้นใช้งานบนเดสก์ท็อป
สำหรับ Pawparazzi เป้าหมายหลักคือการดูสัตว์เลี้ยงของทีมในหลากหลายวิธี โดยเริ่มจากภาพรวมสัตว์เลี้ยง รายละเอียดสัตว์เลี้ยง แล้วจึงเป็นสัตว์เลี้ยงที่จัดอันดับ ซึ่งหมายความว่าแกลเลอรีสัตว์เลี้ยงจะใช้บานหน้าต่างเนื้อหาหลักและพื้นที่เพิ่มเติมของ ตารางกริด ตามด้วยองค์ประกอบการนำทางและตัวกรอง เมื่อมีพื้นที่ว่างมากขึ้น แกลเลอรีจะขยายออกไปได้หลายแถว มีสัตว์เลี้ยงมากขึ้น และแสดงรายละเอียดสัตว์เลี้ยง ได้พร้อมกัน หลักการปรับเปลี่ยนนี้คือการเปิดเผยหรือการแสดงเนื้อหาเพิ่มเติมในเลย์เอาต์ที่ใหญ่ขึ้น
การพิจารณาเป้าหมายหลักของแอปและเนื้อหาช่วยให้เราทราบว่าเมื่อใดและอย่างไรที่ตารางเลย์เอาต์จะต้องปรับให้เข้ากับขนาดคลาสของหน้าต่าง ตำแหน่งบานพับ และการวางแนวอุปกรณ์
จากตารางกริดเลย์เอาต์ ตารางกริดย่อยจะช่วยสร้างโครงสร้างเนื้อหาที่ยืดหยุ่นมากขึ้น แกลเลอรีเป็นตารางในตัว สำหรับขนาดกะทัดรัด จะใช้ตารางกริดแบบ 2 แถว
กริดเป็นแนวคิดเลย์เอาต์แบบ 2 ทิศทาง ดังนั้นเนื้อหาจึงไหลได้ทั้งในแนวนอนและแนวตั้ง
ซึ่งสามารถใช้เพื่อสร้างเลย์เอาต์ที่น่าสนใจยิ่งขึ้นหรือสร้างลำดับชั้นภาพที่ชัดเจนขึ้น เช่น สัตว์เลี้ยงประจำสัปดาห์ ซึ่งใช้ตารางกริดเพื่อสื่อถึงสัตว์เลี้ยงที่ติดอันดับสูงสุด ตารางกริดอาจเป็น 2x4 แต่ตำแหน่งบนสุดจะครอบคลุม 2 คอลัมน์ และแถว
ทั้งหมดนี้ทำได้ด้วย Grid API
ปรับเปลี่ยนคอมโพเนนต์เหล่านั้น
แม้ว่า Grid จะครอบคลุมโครงสร้างเนื้อหาระดับมาโครและไมโคร แต่ Flexbox ช่วยในเรื่อง คอมโพเนนต์ที่ต้องตอบสนองต่อเนื้อหา ใช้สำหรับเนื้อหาแบบทางเดียว ซึ่งกำหนดให้เป็นแนวนอนหรือแนวตั้งเท่านั้น ตัวอย่างเช่น ชิปตัวกรองสามารถตอบสนองต่อป้ายกำกับของตัวเอง และพื้นที่ตัวกรองสามารถขยายได้ตามจำนวนตัวกรอง ใช้ "แสดง" บนหน้าจอขนาดใหญ่ขึ้นเพื่อแสดงตัวกรองเพิ่มเติมพร้อมกัน
คำค้นหาที่ซับซ้อน
การออกแบบตารางกริดเลย์เอาต์และการใช้กริดและ Flexbox ช่วยให้เราสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้ในหลายหน้าจอ และรองรับรูปแบบที่ไม่เหมือนใคร เช่น อุปกรณ์พับได้ แต่บริบทของผู้ใช้ที่แตกต่างกันล่ะ ผู้ใช้ Android สามารถเชื่อมต่อ กับจอแสดงผลหรือเสียบเมาส์ได้ MediaQuery ช่วยให้เราตัดสินใจด้านการออกแบบได้อย่างละเอียดเพื่อรองรับผู้ใช้ในทุกบริบท
ใน Pawparazzi การทำเช่นนี้หมายถึงการใช้ประโยชน์จากการป้อนข้อมูลด้วยเคอร์เซอร์ที่แม่นยำ โดยมีพื้นที่เป้าหมายที่เล็กลงและเนื้อหาที่หนาแน่นขึ้น
ตัวอย่าง AdaptiveUI ของ Android
สำรวจการออกแบบที่สร้างแรงบันดาลใจและเพิ่มประสิทธิภาพสำหรับอุปกรณ์ที่มีหน้าจอขนาดใหญ่ เรียกดูเทมเพลต UI/UX สำหรับหมวดหมู่แอปยอดนิยม ซึ่งรวมถึงสื่อ ความคิดสร้างสรรค์ เกม และ อื่นๆ
