รายการคือการนำเสนอภาพรายการที่เกี่ยวข้องอย่างน้อย 1 รายการ ซึ่งมักจะใช้เพื่อแสดงชุดตัวเลือก
แหล่งข้อมูล
ประเภท | ลิงก์ | สถานะ |
---|---|---|
การออกแบบ | แหล่งที่มาของการออกแบบ (Figma) | ใช้งานได้ |
การใช้งาน | Jetpack Compose | ใช้งานได้ |
ไฮไลต์
- รายการคือคอลเล็กชันข้อความหรือรูปภาพแบบต่อเนื่อง
- รายการควรดูเป็นธรรมชาติและมองเห็นได้ง่าย
- รายการประกอบด้วยรายการหลักและรายการเสริม การทำงานที่แสดงด้วยไอคอนและข้อความ
เวอร์ชัน
รายการมีอยู่ 3 ประเภท ได้แก่ รายการแบบบรรทัดเดียว รายการแบบ 2 บรรทัด และ รายการที่เป็น 3 บรรทัด
- ลิสต์บรรทัดเดียว: บรรทัดเดียวสำหรับสื่อสารแต่ละรายการ เรียบง่ายนี้ ดูแลให้สินค้าแต่ละรายการมีความแตกต่างจากสินค้าอื่นๆ อย่างชัดเจน
- รายการ 2 บรรทัด: ใช้เส้นขนาน 2 เส้นเพื่อสื่อสารแต่ละรายการ การออกแบบที่มีโครงสร้างนี้ช่วยให้อ่านง่ายและหลีกเลี่ยงการจดจำ ทำงานหนักเกินไป
- รายการ 3 บรรทัด: ใช้เส้นขนาน 3 เส้นเพื่อแสดงแต่ละรายการ การออกแบบตกแต่งนี้สร้างความโดดเด่นให้ภาพได้ในระดับสูง
กายวิภาคศาสตร์
- ไอคอน คือกราฟิกขนาดเล็กที่แสดงถึงวัตถุหรือการกระทำที่เจาะจง ซึ่งมัก ใช้ในการถ่ายทอดไอเดียหรือแนวคิดออกมาเป็นภาพ
- โอเวอร์ไลน์: ข้อความบรรทัดสั้นๆ เหนือชื่อหรือคำบรรยาย ซึ่งมักจะใช้เพื่อให้บริบทหรือเน้นย้ำเพิ่มเติม
- ชื่อ: บรรทัดข้อความตัวหนาขนาดใหญ่ซึ่งใช้เป็นหัวเรื่องหลักของ องค์ประกอบการออกแบบหรือหน้าเว็บ
- ชื่อรอง: บรรทัดข้อความขนาดเล็กที่ให้ข้อมูลเพิ่มเติม หรือบริบทใต้ชื่อหลัก
- การควบคุม: องค์ประกอบแบบอินเทอร์แอกทีฟที่ให้ผู้ใช้ตัดสินใจได้
รัฐ
ข้อกำหนด
การใช้งาน
รายการจะแบ่งออกเป็นกลุ่มข้อความและรูปภาพในแนวตั้ง เหมาะสำหรับการอ่านทำความเข้าใจ โดยรายการจะประกอบด้วย คอลัมน์ของรายการอย่างต่อเนื่อง รายการอาจมีการดำเนินการหลักและเสริมที่แสดงแทน ตามไอคอนและข้อความ

ควรทำ

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



- ช่องทำเครื่องหมาย: เลือกรายการอย่างน้อย 1 รายการ
- ปุ่มตัวเลือก: เลือกเพียงปุ่มเดียว ในรายการ
- สวิตช์: สลับการควบคุมเป็นเปิดหรือปิด

ควรทำ

ไม่ควรทำ

ไม่ควรทำ
ไอคอน

ควรทำ

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