Nguyên mẫu một nút hành động nổi trong Pixate

Sep 13, 2025
Cách

Pixate cho phép bạn nhanh chóng nguyên mẫu Mockup di động tương tác có thể được xem trước trên các thiết bị Android và iOS. Trong hướng dẫn này, chúng ta sẽ sử dụng nó để xây dựng một nút hành động nổi (fab) bao gồm các tùy chọn phụ. Chúng tôi sẽ khám phá các kỹ thuật và cài đặt khác nhau trong Pixate, chẳng hạn như chuyển đổi và điều kiện.

Fabs được sử dụng để thúc đẩy hành động và thu hút sự chú ý của người dùng. Nói chung, các chức năng chính của ứng dụng được truy cập thông qua một fab. Fab của chúng tôi sẽ ở trong một phong cách thiết kế vật chất, cho vay với các giao diện đẹp, tự nhiên. Thực hiện các yếu tố thiết kế vật liệu rất đơn giản nếu bạn sử dụng Hướng dẫn của Google. [số 8] để tham khảo.

Trước khi lặn, điều quan trọng là phải hiểu rằng pixate chỉ sử dụng hình ảnh, vì vậy bạn sẽ muốn có tài sản cho dự án cá nhân của mình đã sẵn sàng và xuất sang mật độ màn hình cần thiết. Các hình ảnh được sử dụng trong hướng dẫn này được kéo trực tiếp từ Thiết kế vật liệu nhãn dán [số 8] . Điều này đảm bảo ánh sáng, bóng, kích thước và cảm giác chung của các yếu tố phù hợp với các nguyên tắc. Bạn có thể thay đổi thiết bị bạn đang tạo mẫu bằng cách chọn tùy chọn thích hợp từ menu flyout tại trung tâm của thanh menu Canvas.

Bạn cũng sẽ cần ứng dụng Pixate Mobile cho Android hoặc iOS. Không quan trọng bạn đang xem trước thiết bị nào, vì ứng dụng sẽ tự động chia tỷ lệ nguyên mẫu để phù hợp với màn hình của thiết bị.

Tìm tất cả các tập tin bạn sẽ cần cho hướng dẫn này đây [số 8] .

01. Bắt đầu

Mở Pixate và từ màn hình Chào mừng Nhấp vào 'Tạo nguyên mẫu mới'. Chọn vị trí lưu mong muốn của bạn khi được nhắc và đặt tên cho tệp của bạn.

Khi bạn nhấp vào Lưu, bạn sẽ được yêu cầu chọn thiết bị bạn đang tạo mẫu cho. Đây không phải là thiết bị bạn đang xem trước - cho ví dụ này, chúng tôi đang chọn Nexus 5. Bây giờ bạn sẽ nhìn vào một bức tranh trống.

02. Nhập hình ảnh của bạn

Import all the necessary assets for your prototype

Nhập tất cả các tài sản cần thiết cho nguyên mẫu của bạn

Để bắt đầu, chúng tôi muốn nhập hình ảnh cho hướng dẫn này. Bạn sẽ tìm thấy tất cả các tài sản tôi đã sử dụng đây [số 8] (Đây là tất cả cho một nguyên mẫu 3x). Ở góc trên bên trái của màn hình, nhấp vào tab giữa và sau đó nhấp vào nút '+'. Điều hướng đến thư mục nơi tài sản của bạn, chọn tất cả chúng và nhấp vào Mở.

03. Thêm và vị trí

Bây giờ chúng tôi muốn thêm và đặt hình ảnh fab và biểu tượng. Trong Pixate, khi bạn kéo tài sản vào khung vẽ, chúng sẽ được tạo dưới dạng một lớp và tên của lớp đó sẽ là tên tệp của hình ảnh bạn đã tải lên. Đây là cách tôi sẽ tham khảo các lớp trong suốt hướng dẫn này.

Kéo 'fab_normal' vào khung vẽ và định vị lớp nơi bạn muốn fab ngồi. Cũng kéo tài sản 'icon_add' và căn giữa nó trên fab. Khi bạn nhập 'icon_add' và cố gắng chụp nó vào fab, nó sẽ nhanh hơn điểm trung tâm. Để sửa lỗi này, hãy nhấn mũi tên lên trên bàn phím của bạn ba lần. Điều này sẽ thúc đẩy nó đến trung tâm thị giác.

04. Thêm trường hợp fab của bạn

Add four instances of the FAB to your blank canvas

Thêm bốn trường hợp của fab vào khung vẽ trống của bạn

Bây giờ thêm bốn phiên bản 'fab_option' vào khung vẽ. Kéo cái đầu tiên để viền dưới cùng xuống trên cùng của 'fab_normal' và được căn giữa theo chiều dọc.

Căn chỉnh ba lớp 'fab_option' còn lại để chúng thẳng đứng trung tâm và ngồi trên đầu lẫn nhau. Đây là cách menu FAB sẽ xuất hiện khi nó được mở rộng.

05. Thêm các biểu tượng tùy chọn

Thêm tất cả các biểu tượng tùy chọn ('icon_school', 'icon_flight', 'icon_cake' và 'icon_basket') vào khung vẽ và căn chỉnh mỗi trong số chúng với một phiên bản của nút 'fab_option'. Một lần nữa, vì bóng được bao gồm trong tệp hình ảnh, trung tâm của vòng tròn không phải là trung tâm của lớp. Bạn sẽ cần phải va chạm từng biểu tượng về ba điểm để chúng xuất hiện tập trung.

06. Thêm fab được ép

Place the 'FAB_pressed' icon on top of the unpressed version

Đặt biểu tượng 'fab_preded' trên đầu phiên bản chưa được xác định

Cuối cùng, thêm 'fab_preded' vào khung vẽ và đặt nó lên trên 'fab_normal'. Nudge 'fab_preded' để các cạnh của vòng tròn khớp 'fab_normal'. Đây là khoảng ba điểm xuống từ liên kết bị nghẽn trung tâm.

07. Lớp làm tổ

Các lớp làm tổ bên trong nhau tạo ra mối quan hệ phụ huynh / trẻ em. Điều này cho phép bạn áp dụng hình ảnh động cho một nhóm các lớp và để chúng hoạt hình như một đơn vị. Nó đạt được bằng cách kéo và thả một lớp lên một lớp khác trong danh sách lớp (ở góc trên bên trái của màn hình).

08. Các lớp biểu tượng tùy chọn Nest

Nest the option icon layers into their respective button layers

Lồng các lớp biểu tượng tùy chọn vào các lớp nút tương ứng của chúng

Lồng các lớp biểu tượng tùy chọn vào các lớp nút tương ứng của chúng. Ví dụ: Nest 'icon_school' vào 'fab_option' tương ứng bằng cách kéo lớp 'icon_school' liệt kê vào danh sách lớp của tùy chọn.

09. Rửa sạch và repear

Lặp lại điều này cho tất cả các tùy chọn menu, đảm bảo bạn đang lồng các biểu tượng theo tùy chọn Nút chính xác. Vui lòng thu gọn tất cả các lớp tùy chọn để đơn giản hóa chế độ xem danh sách lớp.

10. Điều chỉnh các thuộc tính

Sắp xếp lại 'Fab_Preded' để nó nằm bên dưới 'icon_add' nhưng trên 'fab_normal'. Bây giờ chọn 'icon_add' và nhấp vào '+' ở đầu danh sách lớp. Trong bảng thuộc tính lớp (ở góc trên bên phải của màn hình) thay đổi giá trị chiều rộng và chiều cao để khớp với 'fab_pressed' (80 x 92). Điều này sẽ đảm bảo khu vực tương tác bao gồm toàn bộ fab.

11. Thêm một sự tương tác của vòi

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction

Đặt mẫu màu trong bảng Thuộc tính sang trong suốt và thêm một sự tương tác của vòi

Trong khi trong bảng Thuộc tính, hãy đặt mẫu màu sang trong suốt và đặt lớp để nó được căn giữa giữa 'fab_pressed'. Sau đó kéo một tương tác chạm vào lớp trong danh sách. Giữ chặt cmd. và chọn tất cả các lớp 'fab_option' cũng như 'fab_preded', sau đó đặt độ mờ thành 0. . Đừng thay đổi độ mờ đục của các lớp biểu tượng! Vì bạn đang điều chỉnh các lớp cha, độ mờ của các lớp biểu tượng được kế thừa từ chúng.

12. Xoay biểu tượng

Hãy làm cho biểu tượng fab của chúng tôi xoay trên vòi. Trong Pixate, hình ảnh động có thể tham chiếu đến trạng thái của lớp khác. Điều này cho phép bạn đặt một hình ảnh động để chơi một khi một điều kiện được đáp ứng. Chúng tôi muốn xoay 'icon_add' để chúng tôi có thể dựa trên các điều kiện hoạt hình khác trên đó. Kéo một hình động xoay vào 'icon_add' và đặt các tùy chọn sau. Dựa trên: Nhấn Lớp và Tap. , NẾU: icon_addpng.Rotation == 0. , Xoay tới: -225. , Nới lỏng đường cong: Dễ dàng ra ngoài và khối. , Thời lượng: 0,3. .

13. Điều kiện đảo ngược

Add a reverse condition to rotate the icon back to its original position

Thêm một điều kiện ngược để xoay biểu tượng trở lại vị trí ban đầu của nó

Nhấp vào liên kết '+ Điều kiện' ở dưới cùng của hình động và đặt các mục sau: khác nếu: icon_addpng.Rotation! = 0 , Xoay tới: 0. , Nới lỏng đường cong: Dễ dàng ra ngoài và khối. , Thời lượng: 0,3. .

14. Thêm một phai-in

Adjust the settings so the FAB fades in on tap

Điều chỉnh cài đặt để FAB mờ dần trên Tap

Chúng tôi muốn các tùy chọn fab để mờ dần trên vòi. Vì vậy, chúng ta có thể thấy những gì chúng ta đang làm, chúng ta sẽ thêm fade vào các nút tùy chọn trước. Kéo một hình ảnh động phai vào nút tùy chọn và đặt phần sau.

Dựa trên: Nhấn Lớp và Tap. , NẾU: icon_addpng.Rotation == 0. , Mờ dần đến: 100. , Thời lượng: 0. . Sau đó '+ Điều kiện' và nếu không: icon_addpng.Rotation! = 0 , Mờ dần đến: 0. , Nới lỏng đường cong: Dễ dàng ra ngoài và khối. . Làm điều này cho mỗi nút tùy chọn.

15. Tỷ lệ mọi thứ xuống

Trong hướng dẫn thiết kế vật liệu, tùy chọn mở rộng quy mô khi fab được khai thác. Vì các tùy chọn của chúng tôi bắt đầu ở quy mô đầy đủ, chúng tôi muốn chia tỷ lệ chúng khi nguyên mẫu tải.

Kéo một hình động theo thang điểm vào nút tùy chọn và đặt các tùy chọn sau. Dựa trên: *MÀN* và Nạp vào , Tỷ lệ X và tỷ lệ Y: 0. và thời gian: 0. Chọn neo giữa dưới trong lưới neo. Làm điều này cho mỗi nút tùy chọn.

16. Tùy chọn hoạt hình

These settings will apply our animation to the FAB

Những cài đặt này sẽ áp dụng hình ảnh động của chúng tôi cho fab

Bây giờ hãy đặt các tùy chọn để mở rộng khi fab được khai thác. Kéo một hình động theo thang điểm vào nút trên cùng và đặt các tùy chọn như trong ảnh chụp màn hình ở trên.

17. trì hoãn thang đo

Khi thêm hình ảnh động này vào phần còn lại của các nút tùy chọn, hãy trừ 0,02 từ thuộc tính độ trễ của IF. Tùy chọn thứ hai từ trên cùng sẽ có độ trễ của 0,04. , thứ ba sẽ có một sự chậm trễ của 0,02. , và cuối cùng 0,0. . Bây giờ các tùy chọn sẽ chia tỷ lệ lần lượt.

18. Thêm tùy chọn hoạt hình

Add these settings to emulate the FAB being pressed

Thêm các cài đặt này để mô phỏng fab đang bị ép

Cuối cùng, chúng ta cần phải mô phỏng fab đang bị ép. Trong thiết kế vật liệu, bóng của fab được dịch chuyển xuống và mờ để tạo hiệu ứng của nút di chuyển về phía người dùng khi gõ. Đây là một chút khó khăn để tìm ra ban đầu, vì nó yêu cầu chúng ta để crossfade hai lớp riêng biệt.

Kéo một hình động phai vào 'fab_normal' và 'fab_preded' và áp dụng các cài đặt hiển thị trong ảnh chụp màn hình.

19. Sẵn sàng để sử dụng

Bây giờ bạn có thể sử dụng tệp này cho bất kỳ nguyên mẫu nào của mình. Bằng cách nhấp vào nút ở trên cùng bên phải của khung vẽ, bạn có thể chọn một tệp pixate để hợp nhất thành một tệp hiện đang mở. Điều này cho phép bạn thêm các thành phần như fab này cho các nguyên mẫu mà bạn đang làm việc.

20. Tùy chỉnh!

Nhập biểu tượng của riêng bạn và thay đổi màu sắc như bạn thấy phù hợp. Với các bước ở đây, bạn có thể thêm các tùy chọn fab bổ sung và thậm chí kết nối các vòi và hình ảnh động tiếp theo vào các nút tùy chọn.

Hãy để mắt đến nhiều thành phần thiết kế vật liệu pixate từ Google và thiết kế đi!

Bài viết này ban đầu xuất hiện trong Tạp chí Net. phát hành 281; Mua nó ở đây [số 8] .

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

Cách làm sạch cọ vẽ: Hướng dẫn dứt khoát

Cách Sep 13, 2025

[số 8] (Tín dụng hình ảnh: Sonny Flanaghan) Học cách làm sạch cọ sơn đúng cách là một kỹ năn..

Xây dựng một chatbot cung cấp năng lượng AI

Cách Sep 13, 2025

[số 8] Trí tuệ nhân tạo (AI) cho phép chúng tôi tạo ra những cách mới để xem xét các vấn đề hiện có..

10 quy tắc để thực hiện các biểu mẫu web thân thiện với người dùng

Cách Sep 13, 2025

[số 8] Mặc dù sự phát triển của sự tương tác của người máy tính, các hình thức vẫn là một trong n..

Sử dụng WordPress như một CMS không đầu

Cách Sep 13, 2025

[số 8] Lần đầu tiên tôi nghe về cách tiếp cận CMS không đầu trong một cuộc nói chuyện mà tôi đã xem..

Cách tạo một dải truyện tranh Manga xác thực

Cách Sep 13, 2025

Trang 1/2: trang 1 trang 1 Trang 2 Trong khi phong cách và kết ..

Tạo một bàn chải lưới dịch chuyển vector

Cách Sep 13, 2025

[số 8] Đừng bỏ lỡ Vertex 2018. , sự kiện đầu tay của chúng tôi cho c�..

Vẽ một cuộc sống tĩnh lặng trong acrylics

Cách Sep 13, 2025

Cuộc sống tĩnh lặng không phải là tách trà của mọi người - phải mất một bộ nhất định kỹ thuật vẽ tranh - Nhưng đối với tôi, nó lu..

Bốn nguyên lý chiến lược UX

Cách Sep 13, 2025

[số 8] Trải nghiệm người dùng Stellar ( Ux. ) Chiến lược là một phương tiện để đạt đư..

Thể loại