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