บทช่วยสอน Framer: 7 Microinteractions ง่ายๆ เพื่อปรับปรุงต้นแบบของคุณ

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

ทำไมคุณควรสร้างต้นแบบการโต้ตอบเล็กน้อย?

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

ดูตัวอย่างด้านล่าง นักออกแบบทั่วโลกกำลังสร้าง microinteractions เหล่านี้ในผลิตภัณฑ์ต่างๆ

7 ต้นแบบ

ในบทช่วยสอนนี้ ฉันจะให้ภาพรวมของไมโครอินเทอร์แอกชันแต่ละรายการและข้อมูลโค้ดบางส่วนแก่คุณ เราจะใช้เทคนิคต่างๆ มากมาย คุณจึงสามารถเลือกวิธีที่เหมาะกับผลิตภัณฑ์ของคุณได้มากที่สุด ไม่มีวิธีที่ "ถูกต้อง" ในการสร้างสิ่งใดๆ ภายใน Framer Studio ดังที่ได้กล่าวไว้ในบทความที่แล้ว Framer ให้อิสระมากมายแก่คุณในการสร้างในแบบที่คุณต้องการ

คุณเคยเห็นการโต้ตอบแบบนี้มาก่อนหรือไม่? แน่นอนคุณมี! คุณเห็นพวกเขาทุกวันบนสมาร์ทโฟนของคุณ ถึงเวลาที่จะสร้างของคุณเอง

1. ปุ่มแอ็คชัน

ปุ่มการทำงานมักจะแสดงถึงการทำงานหลักของหน้าจอปัจจุบัน บางครั้งก็มีการกระทำหลายอย่างอยู่ภายใน เราจะสร้างการโต้ตอบสำหรับกรณีที่สอง ดาวน์โหลดต้นแบบการทำงานที่นี่: https://framer.cloud/ShBnH

ขั้นตอนที่ 1: สร้างปุ่มรูปวงกลมสามปุ่ม

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

ขั้นตอนที่ 2: ออกแบบสองสถานะสำหรับทุกเลเยอร์

สร้างสองสถานะที่แตกต่างกันสำหรับเลเยอร์ ใช้โค้ดด้านล่างเพื่อทำให้ปุ่มเล็กๆ เคลื่อนที่เหนือปุ่มหลักและหมุนไอคอน 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

ขั้นตอนที่ 3: เพิ่มกิจกรรม

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

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

ขั้นตอนที่ 4: แอนิเมชั่นสปริง

ณ จุดนี้ อนิเมชั่นดูมีกลไกมาก เพื่อเพิ่มสัมผัสของมนุษย์ เราจะเพิ่มแอนิเมชั่นสปริงสำหรับเลเยอร์ทั้งหมด:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

ปุ่มดำเนินการพร้อมที่จะไป!

2. สวิตช์แบบโต้ตอบ

ขั้นตอนด้านล่างจะช่วยให้คุณสร้างการโต้ตอบกับสวิตช์ของคุณเองได้ ดาวน์โหลดต้นแบบการทำงานที่นี่: https://framer.cloud/ieypV

ขั้นตอนที่ 1: ออกแบบสนามเด็กเล่นสวิตช์

คุณจะต้องใช้เพียงสองสิ่งเท่านั้น: ตัวสวิตช์เอง ซึ่งมีอย่างน้อยสองชั้น (พื้นหลังและจุด) และบางเลเยอร์เพื่อทำให้เคลื่อนไหวหลังจากใช้สวิตช์

ขั้นตอนที่ 2: สร้างสถานะ

คุณจำบทความแรกเกี่ยวกับวิธีออกแบบสถานะโดยตรงใน Framer Studio ได้หรือไม่? ออกแบบรัฐของคุณตามที่คุณต้องการหรือใช้การตั้งค่าของฉัน:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

ขั้นตอนที่ 3: เพิ่มกิจกรรม

ในการสร้างงานต้นแบบ เราต้องเพิ่มเหตุการณ์ในสวิตช์ หลังจากแตะสวิตช์ เราจะเปลี่ยนสถานะของเลเยอร์ทั้งหมด:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

ขั้นตอนที่ 4: ปรับเวลา

เพื่อให้ทุกอย่างเป็นธรรมชาติมากขึ้น ให้ปรับเวลาและความล่าช้าของสถานะทั้งหมด:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

ตอนนี้ต้นแบบของเราเสร็จแล้ว!

3. การดำเนินการปัดรายการรายการ

นี่เป็นการโต้ตอบโดยทั่วไปสำหรับการลบ การเก็บถาวร หรือการบันทึกรายการออกจากรายการ ปัดไปทางซ้ายหรือขวา แล้วรายการจะถูกลบออก ดาวน์โหลดต้นแบบได้ที่นี่: https://framer.cloud/rzMWP

ขั้นตอนที่ 1: สร้างต้นแบบในโหมดออกแบบ

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

ขั้นตอนที่ 2: ทำให้รายการลากได้

เพื่อให้ง่าย เราจะสร้างการโต้ตอบสำหรับรายการแรกเท่านั้น ขั้นแรก ให้ลากรายการในรายการ: item.draggable = true

จากนั้นล็อคแกนแนวตั้ง: item.draggable.vertical = false

ตั้งค่าข้อจำกัดของพื้นที่ที่ลากได้: item.draggable.constraints

และสุดท้ายกำหนดขนาดเป็น size: size: item

นี่คือลักษณะของโค้ดทั้งหมด:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

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

ขั้นตอนที่ 3: สร้างสถานะ

ถัดไป สร้างสถานะสำหรับรายการเมื่อถูกเอาออก ฉันแค่ย้ายมันออกไปนอกหน้าจอโดยใช้แกน x

 item.states.a = x: -360

ขั้นตอนที่ 4: เปลี่ยนสถานะหลังจากรูด

สุดท้าย เราต้องสร้างทริกเกอร์เพื่อเริ่มการโต้ตอบ เมื่อเราลากรายการไปทางด้านซ้ายของหน้าจอ มันควรจะลบออก รหัสจะมีลักษณะดังนี้:

 item.onMove -> if item.x < -70 item.stateCycle("a")

ในกรณีนี้ เราใช้คำสั่ง if โดยทั่วไปแล้วโค้ดข้างต้นจะบอกว่าเมื่อเราย้ายเลเยอร์รายการมากกว่า 70px แล้วเปลี่ยนสถานะรายการเป็นสถานะ 'a' คุณสามารถอ่านเกี่ยวกับคำสั่ง if ได้ในเอกสารประกอบของ Framer Studio: https://framer.com/getstarted/programming/#conditional

ขั้นตอนที่ 5: เลิกทำการกระทำหลังจาก tap

เราเกือบจะเสร็จสิ้นการโต้ตอบนี้แล้ว สิ่งเดียวที่เหลือคือการยกเลิกการกระทำนี้:

 item_bg.onTap -> item.stateCycle("default")

คุณควรคุ้นเคยกับโค้ดนี้จากบทช่วยสอนก่อนหน้านี้

ขั้นตอนที่ 6 (ไม่บังคับ): ปรับระยะเวลาของแอนิเมชั่น

หากต้องการ คุณสามารถปรับเวลาของภาพเคลื่อนไหวได้:

 item.animationOptions = time: 0.75 curve: Spring

4. ตัวโหลดปุ่ม

นี่เป็นการโต้ตอบที่มีประโยชน์มากสำหรับการดำเนินการที่ต้องใช้เวลาโหลดหรือรอสำหรับผู้ใช้ เมื่อเราสร้างการโต้ตอบนี้ คุณจะได้เรียนรู้วิธีจัดการแอนิเมชั่นจำนวนมากที่เกิดขึ้นทีละตัว ดาวน์โหลดต้นแบบได้ที่นี่: https://framer.cloud/FxmHN

ขั้นตอนที่ 1: สร้างต้นแบบในโหมดออกแบบ

สร้างปุ่มง่ายๆ ที่มีสี่เลเยอร์ย่อย: แถบความคืบหน้าและไอคอนสามไอคอนสำหรับสถานะต่างๆ ฉันออกแบบปุ่มโดยให้มองเห็นไอคอนอัปโหลด แถบแสดงความคืบหน้าด้านล่างที่มีความกว้าง 0 และไอคอนที่ซ่อนอยู่อีกสองไอคอน

ขั้นตอนที่ 2: เพิ่มกิจกรรม

ต้นแบบทั้งหมดนี้สามารถทำได้โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว เพียงแค่ใช้คุณลักษณะโค้ดอัตโนมัติของ Framer

ขั้นแรก เพิ่มกิจกรรม เราจะทริกเกอร์การโต้ตอบทั้งหมดด้วยการแตะที่เลเยอร์ปุ่ม:

นี่คือรหัส Framer ที่เขียนถึงคุณ:

 button.onTap (event, layer) ->

ขั้นตอนที่ 3: ออกแบบแอนิเมชั่น

เราจะใช้คุณสมบัติ autocode ของ Framer เพื่อออกแบบแอนิเมชั่นทั้งหมด:

ฉันได้ออกแบบแอนิเมชั่นสี่เรื่องด้วยจังหวะที่ต่างกัน:

• ภาพเคลื่อนไหวแรกกำลังเปลี่ยนความกว้างของแถบความคืบหน้า
• ประการที่สองคือการซ่อนไอคอนอัปโหลดด้วยความทึบ
• อันที่สามกำลังหมุนและแสดงไอคอนตัวโหลด
• อันสุดท้ายกำลังแสดงและปรับขนาดไอคอนตรวจสอบ

นี่คือรหัสที่ Framer เขียนสำหรับแอนิเมชั่นแต่ละรายการเหล่านี้:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

ขั้นตอนที่ 4: รีเซ็ตภาพเคลื่อนไหวการโหลด

อย่างที่คุณอาจสังเกตเห็น เราไม่ได้ซ่อนไอคอนตัวโหลดหลังจากแอนิเมชั่นเสร็จสิ้น เพื่อให้ต้นแบบนี้เสร็จสิ้น ให้ทริกเกอร์แอนิเมชั่นอื่นโดยใช้เหตุการณ์นี้: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. ดึงเพื่อรีเฟรช

เกือบทุกผลิตภัณฑ์เดียวที่มีรายการอยู่ภายในใช้การโต้ตอบประเภทนี้ ผู้ใช้ดึงรายการทั้งหมดเพื่อรีเฟรช มันง่ายมากที่จะสร้าง ดาวน์โหลดต้นแบบได้ที่นี่: https://framer.cloud/DgMDw

ขั้นตอนที่ 1: ออกแบบรายการอย่างง่ายด้วยไอคอนรีเฟรช

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

ขั้นตอนที่ 2: สร้างส่วนประกอบการเลื่อน

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

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

ขั้นตอนที่ 3: ทำให้ไอคอนรีเฟรชมองเห็นได้

สร้างสถานะอย่างง่ายสำหรับไอคอน:

 icon.states.a = opacity: 1

ขั้นตอนที่ 4: เพิ่มกิจกรรมหลังจากดึงลง

รายการของเราสามารถเลื่อนได้ในขณะนี้ นั่นหมายความว่าเมื่อเราเลื่อนขึ้นหรือลง เนื้อหาการเลื่อนทั้งหมดจะเคลื่อนที่บนแกน 'y' ด้วยความรู้นี้ เราสามารถสร้างเหตุการณ์:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

เราใช้คำสั่ง "if" อีกครั้ง หากรายการถูกดึงลงมา (ย้ายบนแกน y) มากกว่า 180px เราจะทริกเกอร์การดำเนินการ ในกรณีนี้ เราจะสร้างภาพเคลื่อนไหวสองชั้น: รายการและไอคอนรีเฟรช

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

เรากำลังใช้ "ภาพเคลื่อนไหว" เพื่อย้ายรายการลง 210px และหมุนไอคอนรีเฟรช 360°

ขั้นตอนที่ 5: รีเซ็ตสถานะทั้งหมด

ต้นแบบเกือบจะใช้งานได้ แต่เราต้องรีเซ็ตเลเยอร์ทั้งหมดหลังจากรีเฟรชแอนิเมชั่น ในการดำเนินการนี้ เราจะใช้เหตุการณ์หลังจากภาพเคลื่อนไหวสิ้นสุดลง:

 icon.onAnimationEnd ->

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

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

แค่นั้นแหละ!

6. การโต้ตอบลาก

คุณเคยสังเกตไหมว่าในขณะที่คุณกำลังลากรายการภายในแอพ มีบางอย่างเกิดขึ้นกับตัวรายการเองอยู่เสมอ? บางครั้งรายการเล็กลง บางรายการอาจเบลอ หรือความทึบเปลี่ยนไป มาเรียนรู้วิธีสร้างการโต้ตอบประเภทนี้กัน ดาวน์โหลดต้นแบบการทำงานที่นี่: https://framer.cloud/YstiW

ขั้นตอนที่ 1: ออกแบบตารางอย่างง่ายด้วยไทล์

สร้างตารางของไทล์ และตรวจสอบให้แน่ใจว่าอยู่ภายในองค์ประกอบหลัก

ขั้นตอนที่ 2: ใช้ “for” วนซ้ำเพื่อกำหนดเป้าหมายไทล์ทั้งหมด

“ for loop” อาจฟังดูน่ากลัว แต่ก็ง่ายจริงๆ หากคุณไม่คุ้นเคย for ลูป คุณสามารถอ่านพื้นหลังเล็กน้อยก่อน: https://framer.com/getstarted/programming/#loops-and-arrays

เราจะใช้ for loop เพื่อกำหนดเป้าหมายไทล์ทั้งหมดภายในกริดของเรา:

 for item in grid.subLayers

ด้วยโค้ดง่ายๆ นี้ คุณกำหนดเป้าหมายเลเยอร์ทั้งหมดภายในเลเยอร์กริด

ขั้นตอนที่ 3: ทำให้กระเบื้องลากได้

ทำให้แต่ละรายการในตารางลากได้:

 for item in grid.subLayers item.draggable = true

ขั้นตอนที่ 4: ออกแบบสถานะการลาก

รายการทั้งหมดควรมีสถานะในขณะที่กำลังลาก คุณต้องเริ่มจากโค้ด แต่ภายหลังคุณจะสามารถแก้ไขสถานะนี้ใน Layer Editor:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

ขั้นตอนที่ 5: ลากกิจกรรม

เราต้องสร้างเหตุการณ์เพื่อเรียกสถานะต่างๆ ในขณะที่รายการกำลังถูกลาก เหตุการณ์แรกจะทริกเกอร์การทำงานในขณะที่เราเริ่มลาก:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

ฉันใช้ this.bringToFront() เพื่อให้แน่ใจว่ารายการอยู่เหนือเลเยอร์อื่นเสมอ

ทริกเกอร์ที่สองจะรีเซ็ตสถานะของรายการ:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

ณ จุดนี้ เรามีต้นแบบการทำงาน

ขั้นตอนที่ 6 (ไม่บังคับ): เล่นด้วยการจับเวลา

การโต้ตอบเกิดขึ้นตามไทม์ไลน์เสมอ เป็นการดีที่จะปรับไทม์ไลน์เพื่อให้ได้เอฟเฟกต์ที่สมบูรณ์แบบ:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. ปุ่ม "ชอบ" หลายปุ่ม (ขั้นสูง)

ในต้นแบบนี้ เราจะใช้เทคนิคขั้นสูงเพื่อแสดงให้คุณเห็นถึงวิธีการกำหนดเป้าหมายเลเยอร์ใน Framer Studio ในรูปแบบต่างๆ ซึ่งจะสร้างการโต้ตอบที่ตอบสนองมากขึ้นโดยใช้เวลาน้อยลง หากคุณไม่คุ้นเคยกับการเขียนโค้ดพื้นฐาน เราขอแนะนำให้คุณอ่านบทความนี้ก่อน: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

สำหรับการโต้ตอบนี้ เราจะข้ามส่วนการออกแบบและใช้ต้นแบบที่ฉันสร้างขึ้นสำหรับบทความนี้โดยเฉพาะ: https://framer.cloud/SZMCH

ขั้นตอนที่ 1: สร้างอาร์เรย์

ดูโครงสร้างของเลเยอร์ภายใน Framer Studio:

เรามี "ปุ่ม" อยู่ใน "แถว" ในกลุ่ม "รายการ" เราจะสร้างการโต้ตอบบนเลเยอร์ของปุ่ม ดังนั้นเราต้องกำหนดเป้าหมายพวกมัน แต่ก่อนอื่น เราต้องหาเลเยอร์ของแถวทั้งหมดและใส่ไว้ในอาร์เรย์:

 rows = list.children buttons = []

ฉันได้สร้างอาร์เรย์ว่างสำหรับเลเยอร์ "ปุ่ม" ทั้งหมดด้วย: buttons = []

ขั้นตอนที่ 2: เพิ่มเลเยอร์ย่อยใน array

เริ่มจาก "for loop":

 for i in rows buttons.push(i.children[0])

ในการเพิ่มเลเยอร์ลงในอาร์เรย์ เราจะใช้: buttons.push() ซึ่งหมายความว่าเรากำลังวางเลเยอร์แรกของแต่ละกลุ่ม "แถว" ไว้ในอาร์เรย์

ขั้นตอนที่ 3: สร้างสถานะและเหตุการณ์

ตอนนี้เราจะสร้างสถานะสำหรับปุ่ม "ชอบ" และเพิ่มกิจกรรมในขณะที่แตะ:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

คุณสามารถใช้เทคนิคนี้เพื่อสร้างต้นแบบก่อนหน้านี้ทั้งหมดขึ้นมาใหม่และทำให้มันซับซ้อนยิ่งขึ้น

หมายเหตุสุดท้าย

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง