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