อุปกรณ์ที่มีหน้าจอขนาดเล็กอย่างโทรศัพท์มือถือมักมีหน้าจอสัมผัส อุปกรณ์ที่มีหน้าจอขนาดใหญ่ เช่น แล็ปท็อปและคอมพิวเตอร์เดสก์ท็อป มักมาพร้อมกับฮาร์ดแวร์ เช่น เมาส์หรือแทร็กแพด การทำให้หน้าจอขนาดเล็กมีการแตะและหน้าจอขนาดใหญ่มีตัวชี้เป็นเรื่องที่เต็มใจ
แต่ในความเป็นจริงนั้นต่างกันเล็กน้อยมาก แล็ปท็อปบางรุ่นมีหน้าจอสัมผัส ผู้ใช้จะโต้ตอบกับหน้าจอสัมผัสหรือแทร็กแพด หรือทั้งสองอย่างได้ คุณจะใช้แป้นพิมพ์หรือเมาส์ภายนอกกับอุปกรณ์หน้าจอสัมผัสอย่างเช่นแท็บเล็ตได้เช่นเดียวกัน
ใช้ฟีเจอร์สื่อใน 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; } }
แม้ว่าจะมีกลไกการป้อนข้อมูลหลักที่ควบคุมได้แบบละเอียด แต่ให้คิดอย่างรอบคอบก่อนที่จะลดขนาดขององค์ประกอบแบบอินเทอร์แอกทีฟ กฎหมายของ Fitts ยังคงมีผลบังคับใช้ เป้าหมายขนาดเล็กต้องการความเข้มข้นมากขึ้นแม้ว่าจะมีตัวชี้แบบละเอียดก็ตาม พื้นที่เป้าหมายที่ใหญ่ขึ้นจะเป็นประโยชน์ต่อทุกคนโดยไม่คำนึงถึงอุปกรณ์ชี้ตำแหน่ง
เคอร์เซอร์เมาส์ใดก็ได้
ฟีเจอร์สื่อ 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-pointer
รายงานเกี่ยวกับกลไกอินพุต any-hover
จะเป็นจริงหากกลไกการป้อนข้อมูลที่มีอยู่สามารถวางเมาส์เหนือองค์ประกอบได้
หากคุณตัดสินใจเปลี่ยนตรรกะในตัวอย่างก่อนหน้านี้ คุณสามารถทําให้รูปแบบการวางเมาส์เหนือเป็นค่าเริ่มต้นได้ แล้วนําออกหาก 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
เป็นส่วนเพิ่มเติมเล็กๆ ในช่องของแบบฟอร์ม แต่ก็สร้างความแตกต่างอย่างมากต่อประสบการณ์ของผู้ใช้ได้ การเตรียมพร้อมและตอบสนองต่อความสามารถของอุปกรณ์ของผู้ใช้ คุณกำลังเพิ่มศักยภาพให้ผู้ใช้ของคุณ เรามีหลักสูตรที่จะช่วยให้คุณเรียนรู้แบบฟอร์มเพื่อดูข้อมูลที่เจาะลึกยิ่งขึ้น
ต่อไปในหลักสูตรนี้ ก็ถึงเวลาที่เราจะมาดูรูปแบบอินเทอร์เฟซทั่วไป
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้ของคุณเกี่ยวกับการโต้ตอบ
คุณควรใช้ฟีเจอร์ใดแทนการพยายามอนุมานประเภทอินพุตของผู้ใช้จากขนาดหน้าจอ
@media (pointer: coarse)
หรือ @media (-any-pointer: coarse)
prompt()
ของ JavaScripthandheld
@media (pointer)
และ @media (any-pointer)
แตกต่างกันอย่างไร
any-pointer
จะค้นหาประเภทอินพุตของอุปกรณ์ทุกประเภทสำหรับรายการที่ตรงกันทั้งหมดการป้อนข้อมูลประเภทใดแสดงแป้นพิมพ์เสมือนที่เหมาะสมกว่าสำหรับผู้ใช้
type="url"
type="tel"
type="number"
type="email"