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

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

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

ต่อไปนี้คือความท้าทายทั่วไปที่คุณอาจพบ

การนำทาง

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

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

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

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

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

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

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

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

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

ภาพสไลด์

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

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

สำหรับหน้าจอแคบ ให้แสดงรายการในแถวโดยใช้ 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

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