การโต้ตอบระดับย่อย: 15 ตัวอย่างและวิธีการออกแบบ
อธิบายการโต้ตอบย่อย: คำจำกัดความ, สี่ส่วนของ Dan Saffer, ตัวอย่างจริง 15 ตัวอย่างที่จัดกลุ่มตามประเภท กฎการออกแบบ และวิธีการสร้างใน CSS, Framer Motion, GSAP หรือ ExodeUI
หลัก Takeaway
การโต้ตอบเล็กๆ น้อยๆ คือช่วงเวลาเล็กๆ ที่มีอยู่ในอินเทอร์เฟซที่ทำสิ่งหนึ่ง เช่น การถูกใจโพสต์ การสลับการตั้งค่า การยืนยันแบบฟอร์ม หรือการกรอกท่าทางให้เสร็จสิ้น คำศัพท์และกายวิภาคศาสตร์มาจาก Dan Saffer ซึ่งให้คำจำกัดความสี่ส่วน ทริกเกอร์จะเริ่มทำงาน กฎจะตัดสินว่าจะเกิดอะไรขึ้น ผลตอบรับจะแสดงผลลัพธ์ และลูปหรือโหมดจะควบคุมสิ่งที่ทริกเกอร์ทำเมื่อเวลาผ่านไป การโต้ตอบเล็กๆ น้อยๆ ที่ดีนั้นสั้น ตอบสนองต่อข้อมูลของผู้ใช้เอง และไม่ถูกรบกวน
ปฏิสัมพันธ์แบบจุลภาคคืออะไร?
การโต้ตอบระดับย่อยคือการโต้ตอบที่สมบูรณ์น้อยที่สุดในผลิตภัณฑ์: งานเดียวที่มีจุดเริ่มต้น การเปลี่ยนแปลง และการสิ้นสุด มันไม่ใช่กระแสทั้งหมด การกดไลค์โพสต์ถือเป็นการโต้ตอบแบบไมโคร การเขียนและการเผยแพร่ความคิดเห็นเป็นกระแส แนวคิดและโครงสร้างของมันมาจากหนังสือ Microinteractions ของ Dan Saffer ซึ่งแบ่งแต่ละส่วนออกเป็นสี่ส่วน
สี่ส่วนของปฏิสัมพันธ์ย่อย
เฟรมเวิร์กของ Dan Saffer แบ่งการโต้ตอบระดับย่อยออกเป็นสี่องค์ประกอบ การตั้งชื่อพวกมันมีประโยชน์เพราะแมลงส่วนใหญ่และการเคลื่อนไหวที่ไม่ดีส่วนใหญ่อยู่ในหนึ่งในสี่นั้น ไม่ใช่ทั้งหมด
สิ่งกระตุ้น
เหตุการณ์ที่เริ่มต้นมัน เริ่มต้นโดยผู้ใช้ (แตะ โฮเวอร์ กดค้าง ลาก) หรือเริ่มต้นโดยระบบ (การดาวน์โหลดเสร็จสิ้น มีข้อผิดพลาดของเครือข่ายมาถึง) เครดิต: แดน ซัฟเฟอร์
กฎ
จะเกิดอะไรขึ้นเมื่อเริ่มต้น: สถานะที่ถูกต้อง ข้อจำกัด เช่น ขอบเขตการลากหรือค่าต่ำสุดและสูงสุด และลำดับของเหตุการณ์ เครดิต: แดน ซัฟเฟอร์
ข้อเสนอแนะ
วิธีที่ผลิตภัณฑ์บอกผู้ใช้ว่าเกิดอะไรขึ้น: การตกตะกอนของสปริง การเปลี่ยนสี การปรับเปลี่ยนไอคอน การอัปเดตข้อความ นี่คือจุดที่การออกแบบการเคลื่อนไหวส่วนใหญ่อาศัยอยู่ เครดิต: แดน ซัฟเฟอร์
ลูปและโหมด
การโต้ตอบเกิดขึ้นอย่างไรเมื่อเวลาผ่านไป และโหมดต่างๆ เปลี่ยนแปลงไปอย่างไร การสลับเดียวกันสามารถทำงานแตกต่างออกไปในโหมดมืดหรือในรูปแบบกะทัดรัดโดยไม่ต้องเปลี่ยนตรรกะ เครดิต: แดน ซัฟเฟอร์
เหตุใดการโต้ตอบระดับย่อยจึงมีความสำคัญ
การโต้ตอบแบบไมโครคือวิธีที่อินเทอร์เฟซตอบผู้ใช้โดยไม่ต้องมีข้อความหนึ่งย่อหน้า เป็นการยืนยันว่าได้รับการดำเนินการ แสดงว่ามีบางอย่างยังคงทำงานอยู่ หรืออธิบายสิ่งที่เพิ่งเปลี่ยนแปลง เมื่อสินค้าหายไป ผลิตภัณฑ์ชนิดเดียวกันจะรู้สึกหนักขึ้น: ผู้ใช้แตะสองครั้งเพราะไม่มีอะไรบอกพวกเขาเมื่อการแตะครั้งแรกมาถึง หรือพวกเขารอบนหน้าจอที่ไม่มีสัญญาณความคืบหน้า คนดีจะรู้สึกได้มากกว่าที่สังเกตเห็นซึ่งเป็นประเด็น
ตัวอย่างปฏิสัมพันธ์ระดับจุลภาค 15 ตัวอย่าง
สิ่งเหล่านี้ถูกจัดกลุ่มตามสิ่งที่พวกเขาสื่อสาร โดยที่ ExodeUI จัดส่งตัวอย่างที่ตรงกัน จะมีการกำหนดชื่อไว้เพื่อให้คุณสามารถเปิดและแก้ไขได้
ปุ่มและปุ่มสลับ (กดและระบุ)
1. การกดปุ่ม: ปรับสเกลเป็นประมาณ 0.92 บนตัวชี้ลง และเด้งกลับเมื่อปล่อย (ตัวอย่าง ExodeUI: ปุ่มเยลลี่) 2. สวิตช์สลับ: การแปลแบบสปริงพร้อมการเปลี่ยนสีเมื่อคอมมิต (Gooey Toggle) 3. สวิตช์โหมด: การควบคุมแบบแบ่งส่วนที่เลื่อนตัวบ่งชี้และปรับเปลี่ยนป้ายกำกับที่ใช้งานอยู่ (Motion Switch)
ข้อเสนอแนะแบบฟอร์ม (การตรวจสอบและการส่ง)
4. การสั่นของอินพุตไม่ถูกต้อง: การดันแนวนอนสั้นๆ ที่ระบุว่า "ตรวจสอบฟิลด์นี้" โดยไม่มีกล่องโต้ตอบ (การป้อนข้อความแบบกระดิก) 5. กำลังดำเนินการส่ง: ปุ่มจะกลายเป็นตัวบ่งชี้ความคืบหน้า ดังนั้นผู้ใช้จึงไม่พลาดตำแหน่งของตน (ปุ่มส่งแบบเคลื่อนไหว) 6. การยืนยันความสำเร็จ: การระเบิดฉลองเล็กๆ บนปุ่มเมื่อการกระทำลงจอด (ปุ่มปล่อยจรวด)
กำลังโหลดและความคืบหน้า
7. ความคืบหน้าแบบวงกลม: วงแหวนที่เติมตามมูลค่าจริงและตกตะกอนด้วยสปริง (Radial Gauge) 8. ระดับหรือเครื่องวัดกิจกรรม: แถบที่ตอบสนองต่อข้อมูลขาเข้าเช่นระดับเสียง (Sound Wave)
การนำทาง
9. สลับเมนู: ไอคอนที่ปรับเปลี่ยนระหว่างสองสถานะและแสดงเมนูในตำแหน่ง (Morph Nav) 10. การขยายท่าเรือ: รายการที่อยู่ใกล้เคอร์เซอร์จะยกและขยายขึ้น จากนั้นจึงตกลง (แท่นแม่เหล็ก) 11. การเลือกแท็บ: ตัวบ่งชี้ที่เลื่อนระหว่างแท็บแทนที่จะกะพริบ (แถบแท็บของเหลว)
สถานะว่างเปล่าและสำเร็จ
12. สถานะว่างเปล่า: ภาพประกอบขนาดเล็กที่เคลื่อนไหวในครั้งเดียวเพื่อทำให้หน้าจอว่างเปล่าดูนุ่มนวลขึ้น 13. การเปิดเผยรางวัล: ของขวัญหรือตราสัญลักษณ์ที่เปิดขึ้นด้วยความคาดหวังเมื่อถึงเป้าหมาย (กล่องของขวัญเซอร์ไพรส์)
ดึงเพื่อรีเฟรช
14. ดึงเพื่อรีเฟรช: การเลื่อนแบบยืดหยุ่นที่ติดตามการลาก จากนั้นจะสปริงกลับและตกลงเมื่อปล่อย ผลตอบรับคือการยืดออก ไม่ใช่การปั่นด้าย
การตอบสนองแบบสัมผัส
15. พัลส์ยืนยัน: สเกลสั้นๆ และเรืองแสงบนองค์ประกอบที่สะท้อนการแตะแบบสัมผัสบนมือถือ ดังนั้นการกระทำแบบเดียวกันจะให้ความรู้สึกเหมือนกันบนอุปกรณ์ที่ไม่มีมอเตอร์สั่น
กฎการออกแบบที่ทำให้พวกเขาดี
กฎบางข้อแยกการโต้ตอบเล็กๆ น้อยๆ ที่ช่วยออกจากสิ่งที่น่ารำคาญ
- ทำให้มันสั้น: เสร็จสมบูรณ์มากที่สุดในเวลาประมาณ 200-400ms; การเคลื่อนไหวที่ยาวนานขึ้นบนองค์ประกอบขนาดเล็กทำให้รู้สึกช้า
- เริ่มต้นในเฟรมเดียวกับอินพุต การเริ่มต้นล่าช้าทำให้ความรู้สึกถึงเหตุและผลเสียหาย
- ทำให้สามารถขัดจังหวะได้: หากผู้ใช้กลับการกระทำระหว่างการเคลื่อนไหว ให้เปลี่ยนเส้นทางด้วยความเร็วแทนที่จะรีสตาร์ทจากศูนย์
- เคารพการเลือก - ลด - การเคลื่อนไหว: จัดเตรียมทางเลือกแบบคงที่หรือแบบ cross-fade ที่ยังคงสื่อสารถึงการเปลี่ยนแปลง
- ให้งานหนึ่งอย่าง: หากการโต้ตอบต้องการการตัดสินใจมากกว่าหนึ่งครั้ง นั่นคือการไหล
วิธีสร้างปฏิสัมพันธ์แบบไมโคร
เครื่องมือที่เหมาะสมขึ้นอยู่กับจำนวนแพลตฟอร์มที่การโต้ตอบเดียวกันต้องทำงานบน
CSS เท่านั้น
เหมาะสำหรับกรณีเรียบง่ายและครบสมบูรณ์ในตัวเอง: การยกโฮเวอร์, วงแหวนโฟกัส และการสลับที่ขับเคลื่อนโดย :checked หรือการเปลี่ยนแปลงคลาส การเปลี่ยนภาพและ @keyframes ก็เพียงพอแล้ว และไม่มีอะไรต้องจัดส่งนอกเหนือจากสไตล์ชีต
Framer Motion หรือ GSAP (เว็บ)
เหมาะสำหรับการเคลื่อนไหวที่ต้องการสปริง ท่าทาง หรือการเรียบเรียง และต้องทำงานบนเว็บเท่านั้น ทั้งสองแบบให้สปริงแบบขัดจังหวะได้และสามารถขับเคลื่อนโดยสถานะ React
ExodeUI (เว็บ, iOS และ Android จากไฟล์เดียว)
ใช้สิ่งนี้เมื่อการโต้ตอบเดียวกันต้องทำงานเหมือนกันในแอป React, แอป SwiftUI และ Flutter คุณเขียนมันเพียงครั้งเดียวในไฟล์ .exode และรันไทม์จะเล่นมันในแต่ละแพลตฟอร์ม ดังนั้นจึงไม่มีการเขียนซ้ำต่อแพลตฟอร์ม
ตัวอย่างการใช้งานการผลิต
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}คีย์ Principles ที่ต้องจำ
- การโต้ตอบระดับย่อยเป็นงานเล็กๆ เพียงหนึ่งงานที่มีตัวกระตุ้น กฎ ข้อเสนอแนะ และลูปหรือโหมด ซึ่งสี่ส่วนที่ตั้งชื่อโดย Dan Saffer
- โปรแกรมที่ดีส่วนใหญ่จะเสร็จสิ้นภายในเวลาประมาณ 200-400 มิลลิวินาที เริ่มต้นในเฟรมเดียวกับอินพุต และยังคงถูกขัดจังหวะอยู่
- คำติชมคือสิ่งที่ได้ผล: ยืนยันการดำเนินการและอธิบายสิ่งที่เปลี่ยนแปลง โดยมักจะไม่มีข้อความใดๆ
- จัดให้มีทางเลือกแบบลดการเคลื่อนไหวตามความชอบซึ่งมีข้อมูลเดียวกันโดยไม่มีการเคลื่อนไหวเสมอ