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

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

ซึ่งหมายความว่าองค์ประกอบของอินเทอร์เฟซบางส่วนอาจต้องมีลักษณะค่อนข้างแตกต่างไปตามบริบทของสิ่งที่ดู คุณอาจต้องนำ 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);
}

หลักเกณฑ์

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

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

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

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

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