Tạo một nguyên mẫu có độ trung thực cao trong nguyên tử

Sep 14, 2025
Cách
[số 8]

Thật dễ dàng để bị cuốn vào cố gắng phát triển một ý tưởng trong một công cụ vẽ tập tin mockup hoặc tập tin phẳng tĩnh, nhưng một nguyên mẫu. có giá trị một ngàn cuộc họp. Tại sao bạn sẽ giải quyết bất cứ điều gì ít hơn là khám phá ý tưởng của bạn một cách tương tác?

Có thể bạn có một ý tưởng về cách chuyển đổi có thể hành xử, nhưng bạn không chắc chắn nếu nó sẽ cảm thấy có quyền đối với người dùng. Phát hiện nhanh chóng sự chuyển đổi và tương tác với nó trực tiếp cung cấp cho bạn trải nghiệm thực tế hơn nhiều về cách sản phẩm cuối cùng có thể hoạt động trong thế giới thực.

Chúng tôi đã thấy các công cụ mang lại tạo mẫu cho không gian thiết kế, nhưng không có gì khá giống Nguyên tử. . Bây giờ có một cách để xây dựng các nguyên mẫu hoàn toàn tương tác, hi-fidelity trông và cư xử như thật.

Tạo mẫu trong nguyên tử là cực kỳ nhanh: bạn có thể tạo các mockup đẹp, nâng cao trong vài phút, mà không cần viết bất kỳ mã nào, cài đặt bất kỳ phần mềm nào hoặc uống quá nhiều cà phê. Bạn sẽ có thể xem trước với nguyên mẫu trực tiếp trên thiết bị di động của mình hoặc chia sẻ nó với đồng đội để phản hồi. Chúng tôi cũng đã tạo sẵn tất cả các tài sản bạn cần để bắt đầu để bạn không phải nhập một thứ (nhưng bạn có thể nhập từ bản phác thảo và Photoshop CC. quá).

Trong hướng dẫn này, chúng ta sẽ khám phá một quá trình chuyển đổi vuốt đơn giản bên trong một ứng dụng thời tiết mà chúng ta sẽ tạo ra ở nguyên tử. Chúng tôi sẽ đi qua các bước dễ dàng để chế tạo các chuyển tiếp và nếu bạn cần một thử thách, tôi cũng sẽ bao gồm một số tính năng tạo mẫu nâng cao hơn để bạn khám phá.

01. Đăng ký

Bắt đầu nào! Nếu bạn chưa có tài khoản, hãy mở Google Chrome, truy cập nguyên tử.io. và đăng ký dùng thử miễn phí. Điều này kéo dài trong 30 ngày, cần có nhiều thời gian để bạn khám phá nguyên tử và tạo nguyên mẫu đầu tiên của bạn.

02. Có một cái nhìn xung quanh

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

Dự án mẫu chứa các tệp mẫu để giúp bạn quen thuộc với nguyên tử

Bây giờ bạn đã đăng nhập vào tài khoản của mình, đây là thời điểm tuyệt vời để khám phá. Bạn sẽ nhận thấy một dự án mẫu đã được thiết lập cho bạn. Điều này có một số tệp mẫu giới thiệu bạn có thể chơi xung quanh trong khi bạn làm quen với nguyên tử. Ngoài ra, bạn có thể truy cập của chúng tôi Trưng bày , có một bộ sưu tập các nguyên mẫu được xây dựng bởi những người khác. Nếu bạn bị mắc kẹt, nơi tốt nhất để tìm một giải pháp là của chúng tôi Trung tâm trợ giúp .

03. Dự án mới

Tạo một dự án mới bằng cách nhấp vào 'Dự án mới' và đặt tên là 'Ứng dụng công thức'. Nhấn ENTER sẽ mở thư mục dự án. Tại đây bạn có thể xem tất cả các thiết kế trong dự án cụ thể này. Vì đây là một dự án mới, nó trống rỗng. Tuy nhiên, các thiết kế sẽ điền vào đây theo thời gian khi bạn tạo chúng.

04. Lấy một mẫu

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

Có một tệp mẫu sẵn sàng cho dự án này

Thay vì tạo một thiết kế trống mới, đầu tại đây . Điều này sẽ mở một tệp mẫu mà chúng tôi đã tạo để giúp bạn bắt đầu.

Xem nút 'Sao chép và chỉnh sửa' ở góc dưới bên phải? Nhấp vào đó và thêm nó vào dự án ứng dụng công thức của bạn. Nhấp vào 'Chỉnh sửa ngay'. Cũng giống như vậy, một bản sao của tệp mẫu của chúng tôi hiện đã sẵn sàng trong dự án của bạn để bạn chỉnh sửa.

05. Khám phá biên tập viên

Chào mừng bạn đến với biên tập viên! Nếu bạn đã sử dụng một công cụ thiết kế trong quá khứ, nguyên tử có thể sẽ cảm thấy quen thuộc. Hãy nhìn xung quanh. Ở bên trái, bạn sẽ tìm thấy quyền truy cập để vẽ, bố cục và các công cụ tạo mẫu, cũng như hai tab cho phép bạn chuyển đổi giữa các trang và các lớp. Ở bên phải, bạn sẽ nhận thấy bảng thuộc tính, cho phép bạn thay đổi kích thước trang của mình, cũng như đưa lên các cài đặt cho các kiểu và chuyển tiếp.

06. Kiểm tra các yếu tố

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

Trong trang Tài sản của tệp mẫu, bạn sẽ tìm thấy các yếu tố bạn cần

Trên trang Tài sản của tệp mẫu, bạn sẽ thấy chúng tôi đã tạo tất cả các phần tử được sử dụng trong nguyên mẫu này cho bạn. Chuyển sang bảng điều khiển Lớp, sau đó nhấp vào một số yếu tố trên khung vẽ. Các yếu tố bạn chọn sẽ được tự động được tô sáng trong bảng điều khiển Lớp. Tăng tốc độ công việc của bạn bằng cách nhấn '?' Để xem phạm vi phím tắt, bạn có thể sử dụng.

07. Xem trước

Bạn có thể xem trước và tương tác với nguyên mẫu của mình bất cứ khi nào bạn muốn bằng cách nhấp vào 'Xem trước' ở góc dưới bên phải của trình chỉnh sửa. Chúng ta sẽ sử dụng điều này sau để thử nghiệm cảm giác chuyển tiếp của chúng tôi. Chọn 'Xem trước' bây giờ sẽ hiển thị cho bạn các tài sản ở chế độ toàn màn hình, nhưng nếu bạn điều hướng đến trang 2 bằng các mũi tên, bạn sẽ thấy một ví dụ tham khảo về trạng thái đầu tiên của nguyên mẫu của chúng tôi. Hãy thử tương tác với ví dụ tham khảo bằng cách nhấp vào nút 'Bí quyết đã lưu' trong tiêu đề để xem trước những gì chúng ta sẽ tạo.

08. Bắt đầu

Bây giờ bạn quen thuộc với nguyên mẫu Chúng tôi đang xây dựng, đã đến lúc bắt đầu! Chọn 'Chỉnh sửa', để quay lại trình soạn thảo, sau đó trên trang Tài sản, chọn tất cả các yếu tố và sao chép chúng vào bảng tạm. Chuyển đến trang 1 và dán các yếu tố lên trang.

09. Sắp xếp tài sản của bạn

Không có bất kỳ yếu tố nào được chọn, hãy đặt nền chứa nền của khung vẽ của bạn thành # f6f7f8 (nhìn vào bảng thuộc tính bên phải). Đặt tiêu đề trên vải, trên cùng và trung tâm.

Bạn sẽ muốn sắp xếp lại tài sản để trạng thái đầu tiên của bạn (tất cả các công thức nấu ăn) được định vị trên khung vẽ và tài sản cho trạng thái thứ hai được tạo sớm của bạn (công thức lưu đã lưu) đều tắt khung vẽ sang phải. Đây là lý do: Khi cùng một đối tượng tồn tại ở trang 1 và trang 2, nguyên tử sẽ hoạt động bất kỳ thay đổi nào giữa chúng tự động.

10. Xếp thẻ của bạn

Khi bạn ban đầu đã xem trước nguyên mẫu, bạn có thể nhận thấy newsfeed của các công thức nấu ăn trên 'tham chiếu - tất cả các trang của công thức nấu ăn có thể cuộn theo chiều dọc. Để thêm hiệu ứng này, sắp xếp các thẻ công thức trong ngăn xếp dọc, bao gồm văn bản 'trở lại vào ngày mai' sẽ được đặt cuối cùng, ở phía dưới.

11. Tạo một container cuộn

Chọn thẻ Recipe và 'quay lại văn bản vào ngày mai và chọn công cụ container sẽ xuất hiện ở trung tâm trên cùng của khung vẽ. Chọn 'Tạo container cuộn'. Nội dung sau đó sẽ được nhóm và đặt bên trong những gì chúng ta gọi là một thùng chứa cuộn, với cuộn dọc được bật theo mặc định. Hãy chắc chắn rằng bạn xác định ranh giới của container bằng cách kéo ranh giới dưới cùng để che dấu các phần tử và đáp ứng khung vẽ.

12. Đặt các yếu tố của bạn

Đối với quá trình chuyển đổi đặc biệt này, chúng tôi muốn lưới 'công thức lưu đã lưu' từ bên phải và văn bản 'Thêm nhiều' sẽ đến từ bên dưới. Để đảm bảo điều này xảy ra, hãy đặt từng yếu tố vào vị trí bắt đầu tương ứng của nó. Ví dụ: 'công thức đã lưu' nên được đặt trên trang 1, tắt khung vẽ và bên phải; Trong khi nên đặt văn bản 'Thêm nhiều' trên trang 1, tắt khung vẽ và bên dưới.

13. Tap Transition.

Vì chúng tôi đang tạo chuyển đổi Tap, nơi chúng tôi muốn các yếu tố trên trang tiếp theo của chúng tôi trượt vào, điều quan trọng là chúng cũng tồn tại ở trang 1, tắt khung vẽ, để xác định vị trí bắt đầu của chúng. Bất cứ lúc nào bạn có thể tham khảo trang 'Tham chiếu - tất cả các công thức nấu ăn để xem trang này sẽ được sắp xếp như thế nào.

14. Sao chép.

For our transition, duplicate page 1

Đối với quá trình chuyển đổi, bản sao trang 1

Bây giờ chúng tôi đã thiết lập trang đầu tiên, đã đến lúc tạo trạng thái thứ hai cho quá trình chuyển đổi, chúng tôi sẽ làm trên một trang mới. Đảm bảo bảng điều khiển trang được chọn, sau đó di chuột qua trang 1 để hiển thị menu Hamburger ở dưới cùng bên phải của thẻ trang. Nhấp vào menu và chọn 'trùng lặp'.

15. Bí quyết tiết kiệm

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

Nguyên tử sẽ hoạt hình mọi thay đổi bạn thực hiện giữa trang 1 và trang mới của bạn

Điều hướng đến trang mới được sao chép của bạn để tạo trạng thái thứ hai: công thức lưu đã lưu của bạn. Điều quan trọng ở đây không xóa bất kỳ yếu tố nào trên trang, vì điều này sẽ phá vỡ quá trình chuyển đổi. Bởi vì chúng tôi đã sao chép trang, nguyên tử biết rằng các phần tử trên cả hai trang có cùng các phần tử được kết nối. Do đó, nó biết để làm động bất kỳ thay đổi nào chúng ta thực hiện đối với các thuộc tính của các phần tử ở trang 2 (kích thước, vị trí, xoay, độ mờ, màu sắc, v.v.).

16. Chuyển đổi nhiều hơn

Đầu tiên di chuyển 'tất cả các nhóm cuộn của công thức nấu ăn ở bên trái, khỏi khung vẽ và phần tử' công thức đã lưu 'và' thêm văn bản 'thêm' vào vị trí mới của họ: trong cơ thể (thay cho nhóm 'tất cả các công thức nấu ăn') trên nửa dưới của vải, và ở trung tâm tương ứng. Phần tử duy nhất chúng tôi không di chuyển trong quá trình chuyển đổi này là tiêu đề. Điều này là do tiêu đề vẫn còn trên màn hình và chỉ thay đổi một cách tinh tế - chúng ta sẽ sớm đến đó.

17. Hoạt hình thêm

Đối với tiêu đề, chúng tôi muốn nền màu xanh trượt trên trạng thái thứ hai. Trong khi ở trang 2, với bảng điều khiển Lớp mở, hãy mở rộng nhóm tiêu đề 'tiêu đề' và chọn hình chữ nhật màu xanh. Sau đó di chuyển điều này sang bên phải để nó được đặt phía sau 'công thức tiết kiệm'. Đẹp!

18. Phần thú vị

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

Thêm một điểm truy cập tương tác trên khu vực bạn muốn người dùng tương tác với

Bây giờ đến một phần thú vị của việc tạo chuyển đổi. Trên trang 1, chúng tôi sẽ vẽ một điểm nóng qua văn bản 'công thức đã lưu trong tiêu đề, vì đây là khu vực chúng tôi muốn người dùng của chúng tôi tương tác. Chọn công cụ hotspot tương tác từ bảng công cụ ở phía bên trái của trình chỉnh sửa (hoặc chỉ cần nhấn h). Bạn có thể vẽ các điểm nóng bằng cách sử dụng cùng một phương thức bạn sử dụng để vẽ một hình chữ nhật trên khung vẽ: Chỉ cần nhấp và kéo.

19. Cài đặt chuyển tiếp

Customise your transition, including the trigger gesture and motion type

Tùy chỉnh quá trình chuyển đổi của bạn, bao gồm các cử chỉ kích hoạt và loại chuyển động

Khi bạn đã vẽ điểm nóng của mình, với nó vẫn được chọn, bạn sẽ thấy phần tương tác sẽ xuất hiện trong bảng Thuộc tính ở bên phải. Đây là nơi bạn có thể chỉ định cử chỉ kích hoạt, trang đích, loại chuyển động và thời lượng chuyển đổi. Để chuyển đổi này, hãy xác định các cài đặt sau: Cử chỉ: Nhấp hoặc nhấn Được; Đi đến: Trang 2 Được; ĐỀ NGHỊ: E. ASE In-out Được; Thời lượng: 250. .

20. qua lại

Chúng tôi muốn có thể chuyển đổi qua lại giữa hai lần chuyển tiếp, vì vậy bây giờ chúng tôi cũng sẽ cần đặt điểm phát sóng trên trang 2 để đưa chúng tôi trở lại trang 1. Sao chép điểm phát từ trang 1 bằng cách sử dụng phím tắt và dán Nó trên trang 2 trên 'tất cả văn bản của công thức' trong 'Tiêu đề'. Hãy nhớ cập nhật cài đặt trang đích của điểm nóng mới đến trang 1.

21. Xem trước

Click the Preview button to see your transition in action

Nhấp vào nút Xem trước để xem sự chuyển đổi của bạn trong hành động

Đã đến lúc xem trước sự chuyển đổi của bạn! Điều hướng đến trang 1 Trong bảng điều khiển trang và nhấp vào Xem trước ở dưới cùng bên phải của trình chỉnh sửa (lối tắt cmd + enter. ). Nhấp hoặc nhấn vào 'Bí quyết đã lưu' trên nguyên mẫu của bạn để truy cập trang 2. Sau đó, chọn 'Tất cả các nguyên mẫu của Bí quyết sẽ được lấy lại trang 1.

22. Hoàn thành tất cả!

Bây giờ bạn là một chuyên gia! Chọn 'Chỉnh sửa' để quay lại trình soạn thảo, sau đó nếu bạn xóa tài sản và hai trang tham chiếu (bằng cách chọn menu Hamburger của trang và sau đó 'Xóa trang'), nguyên mẫu bạn vừa thực hiện sẽ sẵn sàng để chia sẻ. Bạn có thể dễ dàng tạo một liên kết chia sẻ bằng cách nhấn 'chia sẻ' ở dưới cùng bên phải của trình soạn thảo.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. vấn đề 283; Mua nó ở đây !

Cách - Các bài báo phổ biến nhất

Tạo họa tiết ma quái với các kỹ thuật hỗn hợp-phương tiện

Cách Sep 14, 2025

[số 8] Khi tôi lần đầu tiên chuyển từ một quy trình truyền thống sang quy trình minh họa kỹ thuật số,..

Lấy đầu xung quanh phản ứng với năm yếu tố này

Cách Sep 14, 2025

[số 8] Học phản ứng, thư viện JavaScript để tạo giao diện người dùng từ Facebook và Instagram có vẻ l�..

Create an interactive parallax image

Cách Sep 14, 2025

[số 8] [số 8] Parallax cuộn. không còn là người nhận sự chú ý được đảm bảo, nhưng có những cách ..

Cách xây dựng giao diện chatbot

Cách Sep 14, 2025

[số 8] Vào giữa những năm 2000, các đại lý ảo và chatbots dịch vụ khách hàng đã nhận được rất nhi�..

Cách điêu khắc một con yêu tinh in 3D

Cách Sep 14, 2025

[số 8] Khái niệm cho dự án này, Goblin nấm, đến từ một bản vẽ của bạn tôi Adrian Smith. Tôi đã làm ..

Học cách chạy thiết kế và chạy nước rút nội dung

Cách Sep 14, 2025

[số 8] Thiết kế và tiếp cận Sprint là chìa khóa để kết hợp các chủ sở hữu sản phẩm, nhà thiết k..

Tạo một rạp chiếu phim với Photoshop trong 60 giây

Cách Sep 14, 2025

Ước gì bạn có thể chọn một kỹ năng mới nhưng dường như không thể tìm thấy thời gian để ngồi xuống và học hỏi? Adobe's. Làm cho nó bây gi�..

Cách tạo tóc kiểu Manga chuyển động

Cách Sep 14, 2025

Học tập Làm thế nào để vẽ manga không có kỳ công dễ dàng. Vì vậy, để dễ dàng dễ dàng nhất có thể, tôi làm theo một quy trình từng b..

Thể loại