รูปแบบอินเทอร์เฟซผู้ใช้

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

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

ต่อไปนี้คือความท้าทายที่พบบ่อยซึ่งคุณอาจต้องเผชิญ

การนำทาง

การแสดงรายการลิงก์การนำทางเป็นเรื่องง่ายมากบนหน้าจอขนาดใหญ่ เนื่องจากมีพื้นที่เพียงพอสำหรับลิงก์เหล่านั้น

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

ลองหากลยุทธ์ที่จะหลีกเลี่ยงการซ่อนการนำทาง หากมีรายการจำนวนไม่มากนัก คุณสามารถจัดรูปแบบการนำทางให้ดูดีบนหน้าจอขนาดเล็กได้

รูปแบบดังกล่าวจะไม่ปรับขนาดหากการนำทางมีลิงก์จำนวนมาก การนำทางจะดูรกหากลิงก์ขึ้นบรรทัดใหม่เป็น 2 หรือ 3 บรรทัดบนหน้าจอขนาดเล็ก

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

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

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

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

ไอคอนที่ไม่มีป้ายกำกับก็เหมือนการนำทางแบบ "mystery meat" ซึ่งผู้ใช้จะไม่รู้ว่ามีอะไรอยู่ข้างในจนกว่าจะได้ลองใช้ ใส่ป้ายกำกับข้อความเพื่อให้ผู้ใช้ทราบว่าปุ่มจะแสดงอะไร

ภาพสไลด์

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

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

สำหรับหน้าจอแคบ ให้แสดงรายการเป็นแถวโดยใช้ Flexbox แถวของรายการจะขยายออกไปนอกขอบหน้าจอ ใช้ overflow-x: auto เพื่ออนุญาตการปัดไปทางซ้ายและขวา

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

พร็อพเพอร์ตี้ scroll-snap ช่วยให้ปัดรายการได้อย่างราบรื่น รายการจะเลื่อนไปอยู่ในตำแหน่งที่เหมาะสมด้วย scroll-snap-type: inline mandatory

เมื่อหน้าจอมีขนาดใหญ่พอ (กว้างกว่า 50em ในกรณีนี้) ให้เปลี่ยนไปใช้ตารางกริดและแสดงรายการเป็นแถวและคอลัมน์โดยไม่ซ่อนสิ่งใดๆ

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

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

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

อีกครั้งที่พร็อพเพอร์ตี้ scroll-snap ช่วยให้การโต้ตอบราบรื่น นอกจากนี้ โปรดสังเกตว่ารูปภาพในภาพสไลด์มี loading="lazy" ในกรณีนี้ รูปภาพไม่ได้อยู่ครึ่งหน้าล่าง แต่จะอยู่นอกขอบ แต่หลักการเดียวกันนี้ใช้ได้ นั่นคือหากผู้ใช้ไม่เคยปัดไปไกลถึงรายการนั้น ระบบจะไม่ดาวน์โหลดรูปภาพ ซึ่งจะช่วยประหยัดแบนด์วิดท์

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

ตารางข้อมูล

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

คุณสามารถใช้รูปแบบการล้นกับตารางได้ ในตัวอย่างนี้ ตารางจะอยู่ใน div ที่มีคลาส table-container

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th,
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

หลักเกณฑ์

รูปแบบการล้นเป็นทางออกที่ดีสำหรับหน้าจอขนาดเล็ก แต่โปรดตรวจสอบว่าเนื้อหาที่อยู่นอกหน้าจอสามารถเข้าถึงได้ ลองใส่เงาหรือการไล่ระดับสีที่ขอบซึ่งเนื้อหาถูกตัดออก

การเปิดเผยแบบค่อยเป็นค่อยไปเป็นวิธีที่มีประโยชน์ในการประหยัดพื้นที่ แต่โปรดระมัดระวังในการใช้กับเนื้อหาที่สำคัญมาก วิธีนี้เหมาะกับการกระทำรองมากกว่า ตรวจสอบว่าองค์ประกอบอินเทอร์เฟซที่ทริกเกอร์การเปิดเผยมีป้ายกำกับที่ชัดเจน อย่าใช้ไอคอนเพียงอย่างเดียว

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

ดูรูปแบบเลย์เอาต์และองค์ประกอบ UI เพิ่มเติมได้ในส่วน รูปแบบ ของ web.dev

เมื่อปรับองค์ประกอบอินเทอร์เฟซให้เข้ากับหน้าจอขนาดต่างๆ Media Queries จะมีประโยชน์มากในการหาขนาดของอุปกรณ์ แต่ฟีเจอร์สื่อ เช่น min-width และ min-height เป็นเพียงจุดเริ่มต้น จากนั้นคุณจะพบฟีเจอร์สื่ออื่นๆ อีกมากมาย