อุปกรณ์หน้าจอขนาดเล็ก เช่น โทรศัพท์มือถือมักมีหน้าจอสัมผัส อุปกรณ์ที่มีหน้าจอขนาดใหญ่ เช่น แล็ปท็อปและคอมพิวเตอร์เดสก์ท็อปมักมาพร้อมกับฮาร์ดแวร์ เช่น เมาส์หรือแทร็กแพด คุณอาจคิดว่าการทำให้หน้าจอขนาดเล็กเป็นหน้าจอขนาดเล็กที่มีหน้าจอสัมผัสและหน้าจอขนาดใหญ่ที่ใช้ตัวชี้แทน
แต่จริงๆ แล้วมันยากกว่า แล็ปท็อปบางรุ่นสามารถใช้หน้าจอสัมผัสได้ ผู้ใช้จะโต้ตอบกับหน้าจอสัมผัสหรือแทร็กแพด หรือทั้ง 2 อย่างก็ได้ ในทำนองเดียวกัน คุณก็สามารถใช้แป้นพิมพ์หรือเมาส์ภายนอกกับอุปกรณ์หน้าจอสัมผัสอย่างเช่นแท็บเล็ตได้
ใช้ฟีเจอร์สื่อใน CSS แทนการพยายามอนุมานกลไกการป้อนข้อมูลจากขนาดหน้าจอ
ตัวชี้
คุณสามารถทดสอบค่าที่เป็นไปได้ 3 ค่าด้วยฟีเจอร์สื่อ pointer
ซึ่งได้แก่ none
, coarse
และ fine
หากเบราว์เซอร์รายงานค่า pointer
เป็น none
ผู้ใช้อาจกำลังใช้แป้นพิมพ์เพื่อโต้ตอบกับเว็บไซต์
หากเบราว์เซอร์รายงานค่า pointer
เป็น coarse
หมายความว่ากลไกการป้อนข้อมูลหลักไม่ถูกต้องนัก นิ้วบนหน้าจอสัมผัสคือตัวชี้คร่าวๆ
หากเบราว์เซอร์รายงานค่า pointer
เป็น fine
แสดงว่ากลไกการป้อนข้อมูลหลักมีการควบคุมแบบละเอียดได้ เมาส์หรือสไตลัสเป็นตัวชี้แบบละเอียด
คุณสามารถปรับขนาดองค์ประกอบของอินเทอร์เฟซให้เหมาะกับค่า pointer
ได้ ลองไปที่เว็บไซต์นี้โดยใช้อุปกรณ์ประเภทต่างๆ เพื่อดูว่าอินเทอร์เฟซมีการปรับเปลี่ยนอย่างไร
ในตัวอย่างนี้ ปุ่มจะมีขนาดใหญ่ขึ้นสำหรับตัวชี้แบบคร่าวๆ ดังนี้
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
คุณสามารถทำให้องค์ประกอบมีขนาดเล็กลงเพื่อคำแนะนำอย่างละเอียดได้ แต่โปรดระมัดระวังในการทำเช่นนี้
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
แม้ว่าจะมีคนมีกลไกอินพุตหลักที่มีความสามารถในการควบคุมแบบละเอียด ก็คิดให้รอบคอบก่อนที่จะลดขนาดขององค์ประกอบแบบอินเทอร์แอกทีฟ กฎหมายของ Fitbit ยังคงมีผลบังคับใช้ เป้าหมายที่เล็กกว่าต้องใช้สมาธิมากกว่าแม้จะมีตัวชี้แบบละเอียดก็ตาม พื้นที่เป้าหมายที่กว้างขึ้นจะเป็นประโยชน์ต่อทุกคนไม่ว่าจะใช้อุปกรณ์ชี้ตำแหน่งใดก็ตาม
ตัวชี้ใดก็ได้
ฟีเจอร์สื่อ pointer
จะรายงานรายละเอียดของกลไกการป้อนข้อมูลหลัก แต่อุปกรณ์จำนวนมากมีกลไกการป้อนข้อมูลมากกว่า 1 แบบ อาจมีคนโต้ตอบกับเว็บไซต์โดยใช้ทั้งหน้าจอสัมผัสและเมาส์พร้อมกัน
any-pointer
แตกต่างจากฟีเจอร์สื่อของ pointer
ตรงที่จะรายงานว่าอุปกรณ์ชี้ตำแหน่งผ่านการทดสอบหรือไม่
ค่า any-pointer
ของ none
หมายความว่าไม่มีอุปกรณ์ชี้ตำแหน่งพร้อมใช้งาน
ค่า any-pointer
เป็น coarse
หมายความว่าอุปกรณ์ชี้ตำแหน่งอย่างน้อย 1 เครื่องไม่ถูกต้องนัก แต่นั่นอาจไม่ใช่กลไกการป้อนข้อมูลหลัก
ค่า any-pointer
เป็น fine
หมายความว่าอุปกรณ์ชี้ตำแหน่งอย่างน้อย 1 เครื่องควบคุมได้แบบละเอียด อย่างไรก็ตาม นี่อาจไม่ใช่กลไกการป้อนข้อมูลหลัก
เนื่องจากคิวรี่สื่อ any-pointer
จะรายงานผลลัพธ์เชิงบวกหากกลไกการป้อนข้อมูลใดๆ ผ่านการทดสอบ เบราว์เซอร์จึงอาจรายงานผลลัพธ์สำหรับ any-pointer: fine
และรายงานผลลัพธ์สำหรับ any-pointer: coarse
ได้ด้วย ในกรณีนี้ ลำดับของคิวรี่สื่อมีความสำคัญ การตั้งค่าสุดท้ายจะมีความสำคัญเหนือกว่า
ในตัวอย่างนี้ หากอุปกรณ์มีทั้งกลไกการป้อนข้อมูลแบบละเอียดและคร่าวๆ ระบบจะใช้รูปแบบคร่าวๆ
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
วางเมาส์
ฟีเจอร์สื่อ hover
จะรายงานว่ากลไกการป้อนข้อมูลหลักวางเมาส์เหนือองค์ประกอบได้หรือไม่ ซึ่งโดยปกติแล้วหมายความว่ามีเคอร์เซอร์บางประเภทบนหน้าจอที่ควบคุมโดยเมาส์หรือแทร็กแพด
ฟีเจอร์สื่อของ hover
ต่างจากฟีเจอร์สื่อของ pointer
ที่จะแยกความแตกต่างระหว่างตัวชี้แบบละเอียดและคร่าวๆ หากอุปกรณ์อินพุตหลักสามารถวางเหนือองค์ประกอบได้ ระบบจะรายงานค่า hover
หรือค่านี้คือ none
ในตัวอย่างนี้ ไอคอนเสริมบางไอคอนจะสามารถใช้ได้เมื่อวางเหนือองค์ประกอบ แต่เฉพาะเมื่ออุปกรณ์อินพุตหลักสามารถวางเหนือองค์ประกอบได้
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
หากคุณใช้เมาส์เหนือปุ่มดังกล่าว ไอคอนจะปรากฏขึ้น แต่ถ้าคุณใช้แป้นพิมพ์กด Tab ไปยังปุ่ม ไอคอนจะยังคงไม่ปรากฏ เมื่อคุณใช้แป้นพิมพ์ คุณจะโฟกัสแทนที่จะวางเมาส์เหนือ อุปกรณ์เดสก์ท็อปที่มีเมาส์ต่อจะรายงานว่ากลไกอินพุตหลักสามารถวางเมาส์ได้ ซึ่งเป็นเรื่องจริง แต่ใครก็ตามที่ใช้แป้นพิมพ์ขณะที่มีเมาส์ต่ออยู่จะไม่ได้รับประโยชน์จากการใช้รูปแบบ :hover
คุณจึงควรรวมสไตล์ :hover
และ :focus
เข้าด้วยกันเพื่อให้ครอบคลุมการโต้ตอบทั้ง 2 แบบ
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:is(:hover, :focus) .extra {
visibility: visible;
}
}
แม้ว่าอุปกรณ์อินพุตหลักจะวางตัวชี้เมาส์บนองค์ประกอบได้ แต่โปรดระมัดระวังการซ่อนข้อมูลไว้หลังการโต้ตอบเมื่อวางเมาส์ ข้อมูลจะค้นพบได้น้อยลง ห้ามใช้การวางเมาส์เพื่อซ่อนข้อมูลสำคัญหรือองค์ประกอบอินเทอร์เฟซที่สำคัญ
ใดก็ได้เมื่อวางเมาส์
คิวรี่สื่อ hover
จะรายงานเฉพาะกลไกการป้อนข้อมูลหลักเท่านั้น อุปกรณ์บางอย่างมีกลไกการป้อนข้อมูลหลายแบบ ได้แก่ หน้าจอสัมผัส เมาส์ แป้นพิมพ์ แทร็กแพด
any-hover
จะเป็นจริงเช่นเดียวกับรายงานของ any-pointer
เกี่ยวกับกลไกอินพุตหากกลไกการป้อนข้อมูลที่มีอยู่วางเมาส์เหนือองค์ประกอบได้
หากคุณตัดสินใจเปลี่ยนตรรกะในตัวอย่างก่อนหน้า คุณก็ทำให้รูปแบบโฮเวอร์เป็นค่าเริ่มต้นได้ แล้วนําออกหาก any-hover
มีค่าเป็น none
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
บนอุปกรณ์ที่ไม่มีกลไกการป้อนข้อมูลที่สามารถวางเมาส์เหนือไอคอนได้ ไอคอนพิเศษจะแสดงอยู่เสมอ
แป้นพิมพ์เสมือน
ผู้คนใช้เคอร์เซอร์และนิ้วเพื่อสำรวจอินเทอร์เฟซ แต่เมื่อถึงเวลาป้อนข้อมูล พวกเขาจำเป็นต้องใช้แป้นพิมพ์ ถ้ามีแป้นพิมพ์จริงแนบอยู่กับอุปกรณ์ ก็ไม่เป็นไร แต่หากใช้อุปกรณ์หน้าจอสัมผัส ก็อาจจะซับซ้อนกว่าเล็กน้อย อุปกรณ์เหล่านี้มีแป้นพิมพ์เสมือนบนหน้าจอ
ประเภทอินพุต
แป้นพิมพ์เสมือนแตกต่างจากแป้นพิมพ์จริงตรงที่สามารถปรับแต่งให้ตรงกับอินพุตที่ต้องการ หากคุณให้ข้อมูลเกี่ยวกับอินพุตที่ต้องการ อุปกรณ์จะแสดงแป้นพิมพ์เสมือนที่เหมาะสมที่สุดได้
ประเภทอินพุต HTML5 เป็นวิธีที่ยอดเยี่ยมในการอธิบายองค์ประกอบ input
แอตทริบิวต์ type
ยอมรับค่าต่างๆ เช่น email
, number
, tel
, url
และอื่นๆ
<label for="email">Email</label>
<input type="email" id="email">
<label for="number">Number</label>
<input type="number" id="number">
<label for="tel">Tel</label>
<input type="tel" id="tel">
<label for="url">URL</label>
<input type="url" id="url">
โหมดป้อนข้อมูล
แอตทริบิวต์ inputmode
ช่วยให้คุณควบคุมแป้นพิมพ์เสมือนได้อย่างละเอียด ตัวอย่างเช่น มี input
type
1 ค่าที่มีค่าเป็น number
คุณสามารถใช้แอตทริบิวต์ inputmode
เพื่อแยกความแตกต่างระหว่างจำนวนเต็มกับทศนิยมได้
หากต้องการขอตัวเลขจำนวนเต็ม เช่น อายุ ให้ใช้ inputmode="numeric"
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
หากต้องการตัวเลขที่มีจุดทศนิยม เช่น ราคา ให้ใช้ inputmode="decimal"
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
เติมข้อความอัตโนมัติ
ไม่มีใครชอบการกรอกแบบฟอร์ม ในฐานะนักออกแบบ คุณสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้โดยให้ผู้ใช้กรอกข้อมูลในช่องของแบบฟอร์มโดยอัตโนมัติ แอตทริบิวต์ autocomplete
มีตัวเลือกต่างๆ สำหรับการปรับปรุงแบบฟอร์มติดต่อ แบบฟอร์มการเข้าสู่ระบบ และแบบฟอร์มการชำระเงิน
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">
แอตทริบิวต์ HTML เหล่านี้ ได้แก่ type
, inputmode
และ autocomplete
เป็นส่วนเล็กๆ ที่เพิ่มเข้ามาในช่องแบบฟอร์ม แต่ก็สร้างความแตกต่างให้กับประสบการณ์ของผู้ใช้ได้อย่างมาก การที่คุณคาดหวังและตอบสนองต่อความสามารถของอุปกรณ์ของผู้ใช้จะช่วยเพิ่มความสามารถให้กับผู้ใช้ได้ เรามีหลักสูตรที่ออกแบบมาเพื่อช่วยให้คุณเรียนรู้แบบฟอร์มสำหรับข้อมูลเชิงลึกเพิ่มเติม
ต่อไปในหลักสูตรนี้ ถึงเวลาทำความเข้าใจรูปแบบอินเทอร์เฟซทั่วไปแล้ว
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับการโต้ตอบ
คุณควรใช้ฟีเจอร์ใดแทนที่จะพยายามอนุมานประเภทการป้อนข้อมูลของผู้ใช้จากขนาดหน้าจอ
handheld
prompt()
ของ JavaScript@media (pointer)
และ @media (any-pointer)
แตกต่างกันอย่างไร
การป้อนข้อมูลประเภทใดที่แสดงแป้นพิมพ์เสมือนที่เหมาะกับผู้ใช้มากกว่า
type="tel"
type="number"
type="url"
type="email"