รายการ

รายการคือการนำเสนอภาพรายการที่เกี่ยวข้องอย่างน้อย 1 รายการ ซึ่งมักจะใช้เพื่อแสดงชุดตัวเลือก

หน้าปกรายการ

แหล่งข้อมูล

ประเภท ลิงก์ สถานะ
การออกแบบ แหล่งที่มาของการออกแบบ (Figma) ใช้งานได้
การใช้งาน Jetpack Compose ใช้งานได้

ไฮไลต์

  • รายการคือคอลเล็กชันข้อความหรือรูปภาพแบบต่อเนื่อง
  • รายการควรดูเป็นธรรมชาติและมองเห็นได้ง่าย
  • รายการประกอบด้วยรายการหลักและรายการเสริม การทำงานที่แสดงด้วยไอคอนและข้อความ

เวอร์ชัน

รายการมีอยู่ 3 ประเภท ได้แก่ รายการแบบบรรทัดเดียว รายการแบบ 2 บรรทัด และ รายการที่เป็น 3 บรรทัด

แสดงรายการกายวิภาค

  1. ลิสต์บรรทัดเดียว: บรรทัดเดียวสำหรับสื่อสารแต่ละรายการ เรียบง่ายนี้ ดูแลให้สินค้าแต่ละรายการมีความแตกต่างจากสินค้าอื่นๆ อย่างชัดเจน
  2. รายการ 2 บรรทัด: ใช้เส้นขนาน 2 เส้นเพื่อสื่อสารแต่ละรายการ การออกแบบที่มีโครงสร้างนี้ช่วยให้อ่านง่ายและหลีกเลี่ยงการจดจำ ทำงานหนักเกินไป
  3. รายการ 3 บรรทัด: ใช้เส้นขนาน 3 เส้นเพื่อแสดงแต่ละรายการ การออกแบบตกแต่งนี้สร้างความโดดเด่นให้ภาพได้ในระดับสูง

กายวิภาคศาสตร์

แสดงรายการกายวิภาค

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

รัฐ

แสดงรายการสถานะ

ข้อกำหนด

แสดงรายการข้อกำหนด

คำแนะนำความสูงของรายการ

ระยะห่างของรายการ

การใช้งาน

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

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

การควบคุมการเลือก

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

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

ไอคอน

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

อวาตาร์และรูปภาพ

รายการสามารถใส่รูปภาพในวงกลมที่ครอบตัดเพื่อแสดงถึง บุคคลหรือนิติบุคคล

รูปโปรไฟล์และ รูปภาพ