สร้างต้นแบบ Hi-Fidelity ใน Atomic

Sep 14, 2025
วิธีการ

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

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

เราได้เห็นเครื่องมือที่นำการสร้างต้นแบบไปยังพื้นที่การออกแบบ แต่ไม่มีใครเหมือน อะตอม . ตอนนี้มีวิธีที่จะสร้างต้นแบบแบบโต้ตอบอย่างสมบูรณ์แบบ Hi-Fidelity ที่ดูและประพฤติตนเหมือนของจริง

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

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

01. ลงทะเบียน

มาเริ่มกันเลย! หากคุณยังไม่มีบัญชีให้เปิด Google Chrome โปรดเยี่ยมชม Atomic.io และลงทะเบียนเพื่อทดลองใช้ฟรี สิ่งนี้ใช้เวลา 30 วันซึ่งควรมีเวลาเหลือเฟือให้คุณสำรวจอะตอมและสร้างต้นแบบแรกของคุณ

02. ดูรอบ ๆ

The Sample Project contains sample files to help you get familiar with Atomic

โครงการตัวอย่างมีไฟล์ตัวอย่างเพื่อช่วยให้คุณคุ้นเคยกับอะตอม

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

03. โครงการใหม่

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

04. คว้าตัวอย่าง

There's a ready-made sample file for this project

มีไฟล์ตัวอย่างสำเร็จรูปสำหรับโครงการนี้

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

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

05. สำรวจบรรณาธิการ

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

06. ตรวจสอบองค์ประกอบ

In the sample file's Assets page you’ll find the elements you need

ในหน้าสินทรัพย์ของไฟล์ตัวอย่างคุณจะพบองค์ประกอบที่คุณต้องการ

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

07. ดูตัวอย่าง

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

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

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

09. จัดสินทรัพย์ของคุณ

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

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

10. สแต็คการ์ดของคุณ

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

11. สร้างคอนเทนเนอร์การเลื่อน

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

12. วางองค์ประกอบของคุณ

สำหรับการเปลี่ยนแปลงนี้โดยเฉพาะอย่างยิ่งเราต้องการให้กริด 'ตำรับอาหารที่บันทึกไว้' มาจากขวาและข้อความ 'เพิ่มเพิ่มเติม' ที่มาจากด้านล่าง เพื่อให้แน่ใจว่าสิ่งนี้เกิดขึ้นให้วางแต่ละองค์ประกอบในตำแหน่งเริ่มต้นที่เกี่ยวข้อง ตัวอย่างเช่นควรวาง 'สูตรที่บันทึกไว้' ในหน้า 1 ปิดผืนผ้าใบและไปทางขวา ในขณะที่ควรวางข้อความ 'เพิ่มเพิ่มเติม' ไว้ในหน้า 1 ปิดผ้าใบและด้านล่าง

13. แตะ Transition

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

14. การทำซ้ำ

For our transition, duplicate page 1

สำหรับการเปลี่ยนแปลงของเรา, หน้า 1 ที่ซ้ำกัน

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

15. สูตรที่บันทึกไว้

Atomic will animate any changes you make between Page 1 and your new Page 2

อะตอมจะเคลื่อนไหวการเปลี่ยนแปลงใด ๆ ที่คุณทำระหว่างหน้า 1 และหน้าใหม่ของคุณ 2

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

16. การเปลี่ยนผ่านมากขึ้น

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

17. แอนิเมชั่นเพิ่มเติม

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

18. ส่วนที่สนุก

Add an interaction hotspot over the area you want users to interact with

เพิ่มฮอตสปอตปฏิสัมพันธ์เหนือพื้นที่ที่คุณต้องการให้ผู้ใช้โต้ตอบกับ

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

19. การตั้งค่าการเปลี่ยนแปลง

Customise your transition, including the trigger gesture and motion type

ปรับแต่งการเปลี่ยนแปลงของคุณรวมถึงท่าทางทริกเกอร์และประเภทการเคลื่อนไหว

เมื่อคุณวาดฮอตสปอตของคุณแล้วคุณจะเห็นส่วนการโต้ตอบปรากฏในแผงคุณสมบัติไปทางขวา นี่คือที่ที่คุณสามารถระบุท่าทางทริกเกอร์หน้าปลายทางประเภทการเคลื่อนไหวและระยะเวลาของการเปลี่ยนแปลง สำหรับการเปลี่ยนแปลงนี้ระบุการตั้งค่าต่อไปนี้: ท่าทาง: คลิกหรือแตะ ; ไปที่: หน้า 2 ; การเคลื่อนไหว: e ase เปิดออก ; ระยะเวลา: 250 .

20. ไปมา

เราต้องการที่จะสามารถสลับไปมาระหว่างการเปลี่ยนสองครั้งดังนั้นเราจะต้องวางฮอตสปอตในหน้า 2 เพื่อพาเรากลับไปที่หน้า 1. คัดลอกฮอตสปอตจากหน้า 1 โดยใช้แป้นพิมพ์ลัดและวาง มันในหน้า 2 มากกว่าข้อความ 'สูตรทั้งหมด' ใน 'ส่วนหัว' อย่าลืมอัพเดตการตั้งค่าเพจปลายทางของฮอตสปอตใหม่เป็นหน้า 1

21. ดูตัวอย่าง

Click the Preview button to see your transition in action

คลิกที่ปุ่มดูตัวอย่างเพื่อดูการเปลี่ยนแปลงของคุณในการดำเนินการ

ได้เวลาดูตัวอย่างการเปลี่ยนแปลงของคุณแล้ว! นำทางไปยังหน้า 1 ในหน้าจอเพจและคลิกดูตัวอย่างที่ด้านล่างขวาของตัวแก้ไข (ทางลัด CMD + Enter . คลิกหรือแตะที่ 'สูตรที่บันทึกไว้' บนต้นแบบของคุณเพื่อไปที่หน้า 2 จากนั้นเลือกต้นแบบ 'สูตรทั้งหมด' ที่จะนำกลับไปที่หน้า 1

22. เสร็จแล้ว!

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

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

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

สร้าง UI ควบคุมด้วยเสียง

วิธีการ Sep 14, 2025

เราได้เห็น API ใหม่จำนวนมากที่เพิ่มเข้ามาในเว็บในช่วงไม่กี่ปีที่ผ่า..

วิธีการออกแบบด้วยรูปร่าง CSS: บทนำ

วิธีการ Sep 14, 2025

พื้นฐานของทุกเว็บไซต์คือการแบ่งย่อยย่อยลงใน..

เริ่มต้นด้วย Express.js

วิธีการ Sep 14, 2025

การสร้างแอปพลิเคชันที่หันหน้าไปทางเบราว์เซอ..

วิธีใช้ Adobe Capture CC

วิธีการ Sep 14, 2025

Adobe Capture CC เป็นแอพที่ยอดเยี่ยมที่ช่วยให้คุณค้นหาแบบอักษรและสีได้เพียง..

สร้างภาพ 3 มิติแบบโต้ตอบด้วย Three.js

วิธีการ Sep 14, 2025

บทช่วยสอน WebGL นี้แสดงให้เห็นถึงวิธีการสร้างกา�..

สร้างฉากเมืองที่วุ่นวายใน Illustrator

วิธีการ Sep 14, 2025

เมืองที่ดีที่สุดคือเมืองที่วุ่นวาย แต่บรรยา�..

วิธีการออกแบบโปรโมชั่นสำหรับแบรนด์จินตภาพ

วิธีการ Sep 14, 2025

เมื่อออกแบบแบรนด์ไม่ว่าจะเป็นหนึ่งในที่จัดตั้งขึ้นหรือเริ่มต้นท�..

วิธีใช้การถ่ายภาพสต็อกอย่างสร้างสรรค์ภายในงานออกแบบของคุณ

วิธีการ Sep 14, 2025

แทนที่จะเป็นทางเลือกสุดท้ายภาพสต็อกสามารถแล..

หมวดหมู่