สไตล์

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

สี

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

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

ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำเกี่ยวกับสีของ Material Design

รูปทรง

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

ดูรายละเอียดเพิ่มเติมได้ที่ใช้มุมมน

ธีมแบบไดนามิก

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

รูปที่ 1: รูปภาพวิดเจ็ตที่มีโทนสีที่ระบุ

โหมดสว่างและโหมดมืด

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

รูปที่ 2: วิดเจ็ตในโหมดสว่างบนหน้าจอด้านซ้ายและโหมดมืดบนหน้าจอด้านขวา

การพิมพ์

การจัดรูปแบบตัวอักษรช่วยให้การเขียนอ่านง่ายและสวยงาม ใช้ขนาดและน้ำหนักแบบอักษรเพื่อสร้างลําดับชั้นที่ชัดเจน ซึ่งจะนําสายตาของผู้ใช้ไปยังองค์ประกอบที่สําคัญที่สุด ใส่ใจกับการเว้นวรรคบรรทัดและการเว้นวรรคระหว่างตัวอักษร (การเคอร์น) เพื่อปรับปรุงความอ่านง่าย โดยเฉพาะสำหรับข้อความขนาดเล็กที่แสดงภายในพื้นที่ที่จำกัดของวิดเจ็ต

ลำดับชั้น

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

รูปที่ 3: วิดเจ็ตแสดงการใช้รูปแบบมาตราส่วนที่แตกต่างกัน