ต้นแบบปุ่มการกระทำที่ลอยอยู่ในพิกเซล

Sep 14, 2025

วิธีการ

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

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

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

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

ค้นหาไฟล์ทั้งหมดที่คุณต้องการสำหรับการกวดวิชานี้ ที่นี่ .

01. เริ่มต้นใช้งาน

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

เมื่อคุณคลิกบันทึกคุณจะถูกขอให้เลือกอุปกรณ์ที่คุณสร้างต้นแบบ สิ่งนี้ไม่จำเป็นต้องเป็นอุปกรณ์ที่คุณดูตัวอย่าง - สำหรับตัวอย่างนี้เรากำลังเลือก Nexus 5. ตอนนี้คุณควรจะมองไปที่ผ้าใบเปล่า

02. นำเข้ารูปภาพของคุณ

Import all the necessary assets for your prototype — นำเข้าสินทรัพย์ที่จำเป็นทั้งหมดสำหรับต้นแบบของคุณ

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

03. เพิ่มและตำแหน่ง

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

ลาก 'fab_normal' ไปยังผืนผ้าใบและวางชั้นที่คุณต้องการให้ fab to sit ยังลากสินทรัพย์ 'ICON_ADD' และกึ่งกลางบน Fab เมื่อคุณนำเข้า 'icon_add' และพยายามที่จะถ่ายไปที่ Fab มันจะต่ำกว่าจุดกึ่งกลาง เพื่อแก้ไขสิ่งนี้ให้กดลูกศรขึ้นบนแป้นพิมพ์ของคุณสามครั้ง สิ่งนี้จะเขยิบไปยังศูนย์ Visual

04. เพิ่มอินสแตนซ์ FAB ของคุณ

Add four instances of the FAB to your blank canvas — เพิ่มสี่อินสแตนซ์ของ Fab ไปที่ผ้าใบเปล่าของคุณ

ตอนนี้เพิ่มสี่อินสแตนซ์ของ 'Fab_Option' ไปที่ผืนผ้าใบ ลากตัวแรกดังนั้นขอบด้านล่างจะยึดติดอยู่ด้านบนของ 'Fab_normal' และอยู่ตรงกลางในแนวตั้ง

จัดเรียงเลเยอร์ 'Fab_Option' ที่เหลืออีกสามชั้นเพื่อให้พวกเขาอยู่ตรงกลางแนวตั้งและนั่งอยู่ด้านบนของกันและกัน นี่คือวิธีที่เมนู Fab จะปรากฏขึ้นเมื่อมันขยาย

05. เพิ่มไอคอนตัวเลือก

เพิ่มไอคอนตัวเลือกทั้งหมด ('icon_school', 'icon_flight', 'icon_cake' และ 'icon_basket') ไปยังผืนผ้าใบและจัดเรียงแต่ละอันด้วยอินสแตนซ์ของปุ่ม 'FAB_OPTION' อีกครั้งเนื่องจากเงารวมอยู่ในไฟล์ภาพศูนย์กลางของวงกลมไม่ใช่กึ่งกลางของเลเยอร์ คุณจะต้องชนแต่ละไอคอนประมาณสามจุดเพื่อให้พวกเขาปรากฏเป็นศูนย์กลาง

06. เพิ่ม Fab ที่กด

Place the 'FAB_pressed' icon on top of the unpressed version — วางไอคอน 'Fab_pressed' ที่ด้านบนของรุ่นที่ไม่มีการกดขี่

ในที่สุดเพิ่ม 'Fab_pressed' ไปยังผืนผ้าใบแล้ววางไว้ที่ด้านบนของ 'Fab_normal' เขยิบ 'fab_pressed' ดังนั้นขอบของวงกลมจับคู่ 'fab_normal' นี่คือประมาณสามคะแนนลงจากการจัดตำแหน่งกึ่งกลาง

07. ชั้นทำรัง

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

08. เลเยอร์ไอคอนตัวเลือกรัง

Nest the option icon layers into their respective button layers — ทำรังไอคอนตัวเลือกเลเยอร์ลงในเลเยอร์ปุ่มที่เกี่ยวข้อง

ทำรังเลเยอร์ไอคอนตัวเลือกลงในเลเยอร์ปุ่มที่เกี่ยวข้อง ตัวอย่างเช่น Nest 'icon_school' เป็น 'Fab_Option' ที่สอดคล้องกันโดยการลากรายการเลเยอร์ 'icon_school' ไปยังรายการเลเยอร์ของตัวเลือก

09. ล้างและทักทาย

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

10. ปรับคุณสมบัติ

สั่งซื้อใหม่ 'Fab_pressed' เพื่อให้อยู่ด้านล่าง 'icon_add' แต่เหนือ fab_normal ' ตอนนี้เลือก 'icon_add' แล้วคลิก '+' ที่ด้านบนของรายการเลเยอร์ ในแผงคุณสมบัติเลเยอร์ (ในมุมบนขวาของหน้าจอ) เปลี่ยนค่าความกว้างและความสูงเพื่อให้ตรงกับ 'Fab_pressed' (80 x 92) สิ่งนี้จะช่วยให้มั่นใจว่าพื้นที่โต้ตอบครอบคลุมทั้ง fab

11. เพิ่มการโต้ตอบแบบแตะ

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction — ตั้งแถบสีในแผงคุณสมบัติเป็นโปร่งใสและเพิ่มการโต้ตอบแบบแตะ

ในขณะที่อยู่ในแผงคุณสมบัติตั้งแถบสีเพื่อโปร่งใสและวางเลเยอร์เพื่อให้ตรงกลางกับ 'Fab_pressed' จากนั้นลากการโต้ตอบแบบแตะไปที่เลเยอร์ในรายการ กดค้าง cmd และเลือกเลเยอร์ 'FAB_OPTION' ทั้งหมดรวมถึง 'Fab_pressed' จากนั้นตั้งค่าความทึบให้ 0 . อย่าเปลี่ยนความทึบของเลเยอร์ไอคอน! เนื่องจากคุณกำลังปรับเลเยอร์หลักความทึบของเลเยอร์ของเลเยอร์จะได้รับการสืบทอดจากพวกเขา

12. หมุนไอคอน

มาทำให้ไอคอน Fab ของเราหมุนไปที่การแตะ ในพิกเซลภาพเคลื่อนไหวสามารถอ้างถึงสถานะของเลเยอร์อื่น สิ่งนี้ช่วยให้คุณตั้งค่าภาพเคลื่อนไหวในการเล่นเมื่อพบเงื่อนไข เราต้องการหมุน 'icon_add' เพื่อให้เราสามารถข้ามเงื่อนไขของแอนิเมชั่นอื่น ๆ ได้ ลากภาพเคลื่อนไหวหมุนเข้าสู่ 'icon_add' และตั้งค่าตัวเลือกต่อไปนี้ ขึ้นอยู่กับ: เลเยอร์แตะ และ แตะ , ถ้า: icon_addpng.rotation == 0 หมุนไปที่: -225 เส้นโค้งผ่อนคลาย: ทำให้หมดสติ และ มีลูกบาศก์ ระยะเวลา: 0.3 .

13. เงื่อนไขย้อนกลับ

Add a reverse condition to rotate the icon back to its original position — เพิ่มเงื่อนไขย้อนกลับเพื่อหมุนไอคอนกลับไปที่ตำแหน่งเดิม

คลิกที่ลิงค์ '+ สภาพ' ที่ด้านล่างของภาพเคลื่อนไหวและตั้งค่าต่อไปนี้: อื่น ๆ ถ้า: icon_addpng.rotation! = 0 หมุนไปที่: 0 เส้นโค้งผ่อนคลาย: ทำให้หมดสติ และ มีลูกบาศก์ ระยะเวลา: 0.3 .

14. เพิ่ม Fade-in

Adjust the settings so the FAB fades in on tap — ปรับการตั้งค่าเพื่อให้ Fab จางหายไปในการแตะ

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

ขึ้นอยู่กับ: เลเยอร์แตะ และ แตะ , ถ้า: icon_addpng.rotation == 0 จางหายไป: 100 ระยะเวลา: 0 . จากนั้น '+ สภาพ' และอื่น ๆ ถ้า: icon_addpng.rotation! = 0 จางหายไป: 0 เส้นโค้งผ่อนคลาย: ทำให้หมดสติ และ มีลูกบาศก์ . ทำเช่นนี้สำหรับแต่ละปุ่มตัวเลือก

15. ลดขนาดลง

ในแนวทางการออกแบบวัสดุตัวเลือกขนาดขึ้นเมื่อ fab ถูกแตะ เนื่องจากตัวเลือกของเราเริ่มต้นที่เต็มรูปแบบเราต้องการปรับขนาดลงเมื่อโหลดต้นแบบ

ลากภาพเคลื่อนไหวสเกลไปยังปุ่มตัวเลือกและตั้งค่าตัวเลือกต่อไปนี้ ขึ้นอยู่กับ: * หน้าจอ * และ โหลดแล้ว ขนาด x และขนาด Y: 0 และระยะเวลา: 0. เลือกสมอกลางด้านล่างในกริดสมอ ทำเช่นนี้สำหรับแต่ละปุ่มตัวเลือก

16. ตัวเลือกภาพเคลื่อนไหว

These settings will apply our animation to the FAB — การตั้งค่าเหล่านี้จะใช้แอนิเมชันของเรากับ Fab

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

17. ชะลอเครื่องชั่ง

เมื่อเพิ่มภาพเคลื่อนไหวนี้ไปยังปุ่มที่เหลือของปุ่มตัวเลือกลบ 0.02 จากอสังหาริมทรัพย์ที่ล่าช้า ตัวเลือกที่สองจากด้านบนควรมีความล่าช้า 0.04 ที่สามจะมีความล่าช้า 0.02 และสุดท้าย 0.0 . ตอนนี้ตัวเลือกจะขยายตัวหนึ่งหลังจากนั้น

18. ตัวเลือกภาพเคลื่อนไหวเพิ่มเติม

Add these settings to emulate the FAB being pressed — เพิ่มการตั้งค่าเหล่านี้เพื่อเลียนแบบ Fab ที่ถูกกด

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

ลากแอนิเมชั่นจางลงบน 'Fab_Normal' และ 'fab_pressed' และใช้การตั้งค่าที่แสดงในภาพหน้าจอ

19. พร้อมใช้งาน

ตอนนี้คุณสามารถใช้ไฟล์นี้สำหรับต้นแบบใด ๆ ของคุณ เมื่อคลิกที่ปุ่มที่ด้านบนขวาของผืนผ้าใบคุณสามารถเลือกไฟล์พิกเซลเพื่อรวมเข้ากับสิ่งที่เปิดอยู่ในปัจจุบัน สิ่งนี้ช่วยให้คุณเพิ่มส่วนประกอบเช่น Fab to Prototypes ที่คุณกำลังทำงานอยู่

20. ปรับแต่ง!

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

จับตาดูส่วนประกอบการออกแบบวัสดุมากขึ้นจาก Google และออกแบบไป!

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 281; ซื้อที่นี่ .

ต้นแบบปุ่มการกระทำที่ลอยอยู่ในพิกเซล

01. เริ่มต้นใช้งาน

02. นำเข้ารูปภาพของคุณ

03. เพิ่มและตำแหน่ง

04. เพิ่มอินสแตนซ์ FAB ของคุณ

05. เพิ่มไอคอนตัวเลือก

06. เพิ่ม Fab ที่กด

07. ชั้นทำรัง

08. เลเยอร์ไอคอนตัวเลือกรัง

09. ล้างและทักทาย

10. ปรับคุณสมบัติ

11. เพิ่มการโต้ตอบแบบแตะ

12. หมุนไอคอน

13. เงื่อนไขย้อนกลับ

14. เพิ่ม Fade-in

15. ลดขนาดลง

16. ตัวเลือกภาพเคลื่อนไหว

17. ชะลอเครื่องชั่ง

18. ตัวเลือกภาพเคลื่อนไหวเพิ่มเติม

19. พร้อมใช้งาน

20. ปรับแต่ง!

วิธีการ - บทความยอดนิยม

วิธีการวาดสัตว์: 15 เคล็ดลับยอดนิยม

สาย Terminator คืออะไร

5 เคล็ดลับสำหรับ Super-Fast CSS

4 เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ

Power บล็อกโดยใช้ WordPress API

ออกแบบกราฟิก SVG ในเบราว์เซอร์ของคุณ

วิธีเพิ่มข้อมูลในการออกแบบร่างของคุณ

พลังที่เหลือเชื่อของ Flexbox

หมวดหมู่