Sử dụng Framer X để xây dựng các nguyên mẫu tương tác

Là nhà thiết kế, luôn có câu hỏi về những công cụ tạo mẫu bạn nên sử dụng cho dự án của mình. Có rất nhiều phần mềm ngoài kia cho các nhiệm vụ như WiRibframing (xem Top của chúng tôi Dụng cụ đánh máy và xuất sắc xây dựng trang web ), tạo mẫu và xây dựng các tương tác phức tạp; Tuy nhiên rất ít công cụ có khả năng xử lý tất cả những điều này. Framer là một công cụ có tất cả các chức năng này và tăng tốc đáng kể quá trình tạo ra các hoạt hình và tương tác nhỏ.

Lặp lại mới nhất, Framer X. , Bây giờ sử dụng phản ứng và JavaScript thay vì sử dụng CoffeeScript để phát triển các tương tác và hoạt hình vi mô. Điều này giúp cung cấp thời gian tải nhanh hơn và hiệu suất tốt hơn. Ngoài ra, việc sử dụng các thành phần phản ứng có nghĩa là người dùng có nhiều phạm vi để thêm và mở rộng bao gồm cả các trình phát phương tiện nhúng, dữ liệu và đồ thị thời gian thực bên trong các nguyên mẫu.

Kiểm tra là một phần cốt lõi của quá trình xây dựng nguyên mẫu và trong khi Framer X rất tuyệt vời trong việc tạo ra các nguyên mẫu tương tác, nó cần giúp đỡ để xem những sáng tạo của nó tốt như thế nào. Kiểm tra chúng tôi Kiểm tra người dùng Đăng cho một số công cụ tốt nhất để bổ sung cho Framer và giúp xây dựng các nguyên mẫu trong thế giới thực, và đảm bảo bạn đang sử dụng tốt nhất web hosting Dịch vụ cho bạn.

Cách tạo ứng dụng với Framer X

Để đánh giá đầy đủ sức mạnh của Framer X, chúng tôi sẽ tạo ra một dự án thực tế: một ứng dụng công thức nấu ăn đơn giản với một số nội dung và phương tiện (tài sản được sao lưu đáng tin cậy lưu trữ đám mây ). Điều đầu tiên để xây dựng là trang chủ. Chúng tôi sẽ giữ mọi thứ đơn giản với các yếu tố sau:

• Thanh tìm kiếm tiêu chuẩn để tìm công thức nấu ăn
• Hoạt động gần đây để hiển thị các công thức nấu ăn mới nhất được xem
• Thẻ công thức cho thấy những thứ như công thức nấu ăn phổ biến nhất
• Tạo một chế độ xem chi tiết về công thức với các tùy chọn video và chia sẻ

Để bắt đầu, bạn cần tạo một khung mới (một nghệ thuật) bằng cách nhấp vào biểu tượng + trên thanh điều hướng bên trái. Chọn bất kỳ kiểu Artboard nào từ danh sách các mẫu iPhone / Android tiêu chuẩn ở đúng thanh. Bây giờ bạn đã sẵn sàng để đi.

01. Xây dựng một thanh tìm kiếm

Hãy bắt đầu bằng cách xây dựng thanh tìm kiếm. Thay vì tạo một hình chữ nhật và thêm biểu tượng tìm kiếm như thông thường, chúng ta thực sự có thể sử dụng các thành phần có thể tái sử dụng nhanh trong Framer X, chúng được gọi là các gói. Có hàng ngàn gói có thể được tìm thấy trong thanh điều hướng bên trái trong Store. Nhấp vào Cửa hàng, tìm kiếm bộ Android và bộ ví dụ và sau đó cài đặt chúng.

Các gói này chứa các yếu tố như thẻ, nút, bàn phím, thanh trượt, đầu vào và các mục menu điều hướng. Khi bạn cài đặt các gói này, bạn có thể sử dụng các phần tử từ menu Thành phần ở bên trái.

Tìm các yếu tố bạn muốn bằng cách tìm kiếm trong bộ lọc - trong trường hợp này là một thanh tìm kiếm, được tìm thấy trong bộ ví dụ. Chỉ cần kéo và thả nó vào khung. Bây giờ bạn có thể sửa đổi các thuộc tính như văn bản giữ chỗ, kích thước phông chữ và màu bằng đúng thanh.

02. Tạo một ngăn xếp nội dung

Đối với khối hoạt động gần đây này, trước tiên hãy thêm văn bản 'hoạt động gần đây', khá đơn giản. Bây giờ chúng ta có thể sử dụng một tính năng mới của Framer X được gọi là ngăn xếp. Điều này có thể được thực hiện bằng cách nhấp vào biểu tượng + và chọn stack s từ menu. Sau khi chọn ngăn xếp, kéo và thả diện tích 600 x 300 trên khung làm việc để tạo một ngăn xếp. Ngăn xếp này sẽ được hiển thị như màu xanh.

Bây giờ hãy quay lại phần Thành phần và dưới Bộ Android, tìm kiếm phần tử Thẻ-5 và kéo nó vào ngăn xếp chúng tôi vừa tạo. Nhân đôi những thẻ này hai lần và đảm bảo tất cả ba thẻ trong ngăn xếp.

Miễn là chúng ở trong ngăn xếp, ba thẻ này có thể dễ dàng sắp xếp lại mà không cần phải lo lắng về khoảng cách. Nếu bạn muốn tăng khoảng cách giữa các thẻ, bạn có thể tăng chiều rộng của toàn bộ ngăn xếp. Nó đơn giản như vậy. Bạn cũng có thể cá nhân hóa các thẻ này bằng cách thay đổi tên của tiêu đề và nền theo ý thích của bạn.

Bây giờ chúng tôi đã tạo một ngăn xếp, hãy làm cho nó có thể cuộn. Di chuyển nó ra khỏi khung / artboard. Nhấp vào biểu tượng + từ NAV bên trái và nhấp vào tùy chọn cuộn. Ngay khi chúng tôi tạo một khu vực có ngăn xếp, hãy tạo một khu vực có thể cuộn trên khung / Artboard có cùng kích thước với ngăn xếp.

Bây giờ thay đổi thuộc tính của cuộn trong thanh bên phải bằng cách thay đổi các mũi tên hướng để làm cho nó cuộn ngang. Sau khi hộp đựng cuộn của chúng tôi được tạo, chúng tôi cần nội dung cho nó, được phục vụ bởi ngăn xếp chúng tôi đã tạo trước đó. Vì vậy, chỉ cần kết nối bộ chứa cuộn với ngăn xếp bằng cách sử dụng dấu nhắc mũi tên trên bộ chứa cuộn. Nó hoạt động bằng cách kéo con trỏ chuột vào ngăn xếp.

03. Tạo một ngăn xếp dọc

Đối với thẻ Recipe, bạn cần làm theo một phương thức tương tự như bước 2 nhưng thay vì tạo một cuộn thẻ ngang, bạn sẽ tạo một cái dọc tương tự về cơ bản là một danh sách các công thức phổ biến nhất với hình thu nhỏ. Đối với bài tập này, mỗi thẻ cho một công thức có bốn yếu tố - một hình thu nhỏ hình ảnh, xếp hạng, tên của công thức và thời gian cần thiết để chuẩn bị nó.

Đừng lo lắng về các chi tiết của mỗi thẻ. Chúng có thể được cá nhân hóa dựa trên hương vị thiết kế của bạn. Thực hiện theo cùng một phương pháp sử dụng thẻ từ các thành phần, sao chép chúng và thêm tất cả chúng vào một ngăn xếp với cuộn dọc.

04. Tạo một trang mới

Bây giờ hãy tạo một trang mới để đi vào chi tiết của một công thức cụ thể. Ví dụ: chúng ta hãy lấy trường hợp của thẻ thứ hai tại đây: mì ống Pháp. Để tạo trang mới này, hãy tạo khung / artboard mới và giới thiệu các yếu tố mà chúng ta cần để hiển thị thêm chi tiết về Công thức Pasta Pháp. Trang mới này có thể được chia thành một video, một tiêu đề, xếp hạng, thời gian cần thiết để tạo ra nó và một vài nút hành động, chẳng hạn như lưu vào danh sách và chia sẻ lên phương tiện truyền thông xã hội.

Để thêm video, hãy truy cập cửa hàng và cài đặt gói YouTube, cho phép bạn dễ dàng thêm video vào nguyên mẫu của mình. Bây giờ hãy chuyển đến bảng thành phần của bạn và kéo và thả phần tử YouTube từ dưới thành phần YouTube vào khung.

Điều chỉnh chiều rộng của hình thu nhỏ để nó phù hợp với chiều rộng của khung. Trong ngăn thuộc tính bên phải, bạn có thể chèn URL của video mà bạn muốn chơi trong nguyên mẫu. Nếu bạn muốn, còn có một cách để tự động phát video thông qua hộp kiểm trong bảng Thuộc tính.

Bên dưới video này, bạn có thể thêm tiêu đề, xếp hạng và các biểu tượng khác nhau. Để thêm các biểu tượng cho ví dụ của chúng tôi, tôi đã sử dụng thành phần từ cửa hàng trình tạo biểu tượng. Đó là một quá trình dễ dàng: chỉ cần kéo và thả biểu tượng cơ sở vào khung và sau đó thay đổi thuộc tính được gọi là biểu tượng trên bảng điều khiển bên phải thành 'trái tim' và 'chia sẻ'. Điều này sẽ thay đổi các biểu tượng cơ sở vào các biểu tượng Lưu và chia sẻ tương ứng. Màu sắc của chúng cũng có thể dễ dàng thay đổi bằng bảng bên phải.

Để làm cho mọi thứ dễ dàng cho khách truy cập, bạn có thể thêm một phần có tên là Thành phần, sẽ liệt kê tất cả các thành phần cần thiết cho công thức của chúng tôi - trong trường hợp này, mì ống Pháp.

05. Giới thiệu TƯƠNG TÁC

Bây giờ hãy làm cho thiết kế của chúng tôi tham gia nhiều hơn bằng cách thêm các tương tác cho một nút. Lý tưởng nhất là khi bạn nhấp vào biểu tượng Chia sẻ, bạn nên được nhắc với màn hình để chia sẻ công thức trên các kênh truyền thông xã hội khác nhau. Hãy xây dựng điều đó bằng cách sử dụng một khung mới.

Đảm bảo rằng chiều rộng và chiều cao của khung này là độ rộng và chiều cao giống như hai khung hình khác mà chúng ta đã tạo. Ý tưởng là dành cho màn hình chia sẻ mới này để trượt lên và thay thế màn hình hiện tại khi nhấp vào biểu tượng Chia sẻ.

Để giúp làm cho màn hình khác biệt, hãy thêm một số màu vào nó và điền nó với các biểu tượng phương tiện truyền thông xã hội như Facebook, Instagram, Whatsapp và Email. Màn hình chia sẻ này cũng sẽ có biểu tượng X được thêm vào đó, khi nhấp vào sẽ đưa nó trở lại trạng thái ban đầu.

Đảm bảo rằng tất cả các biểu tượng được sắp xếp bên trong một ngăn xếp. Ngay sau khi biểu tượng X được bao gồm, bước tiếp theo là liên kết khung này để nó bật lên khi bạn nhấp vào biểu tượng Chia sẻ.

Để thực hiện việc này, chọn khung chứa biểu tượng Chia sẻ. Trong bảng điều khiển bên phải, có một tài sản gọi là liên kết. Khi bạn nhấp vào đó, giao diện ứng dụng sẽ cung cấp cho bạn một mũi tên mà bạn có thể kéo sang khung chia sẻ mới mà chúng tôi đã tạo. Điều này sẽ tạo một liên kết trong nền.

Bây giờ, khi bạn chọn biểu tượng Chia sẻ, bạn sẽ quan sát các thuộc tính mới trong bảng điều khiển bên phải bên dưới liên kết, đó là mục tiêu, chuyển đổi và hướng. Mỗi thuộc tính này cho phép bạn thay đổi các phần tử, chẳng hạn như loại chuyển tiếp và hướng mà màn hình sẽ bật lên, v.v.

Bạn có thể kiểm tra nếu nguyên mẫu đang hoạt động hoặc không bằng cách nhấp vào biểu tượng phát được tìm thấy ở góc trên bên phải của giao diện. Tương tự, bạn cần liên kết màn hình chia sẻ với màn hình video để khi người dùng nhấp vào biểu tượng X, nó sẽ trở về màn hình trước đó.

Điều này có thể đạt được bằng cách sử dụng thuộc tính liên kết tương tự và thêm mục tiêu làm màn hình video. Nếu bạn muốn thực hiện một cách thêm một chút biến thể, bạn có thể thực hiện hướng trái thay vì trên cùng và sau đó sử dụng lệnh play để kiểm tra xem sự tương tác có hoạt động hay không.

06. Thêm một nút lưu

Bây giờ hãy thêm một tương tác lớp phủ vào biểu tượng Lưu. Ở đây, mục tiêu của chúng tôi là bất cứ khi nào khách truy cập nhấp vào biểu tượng hình trái tim, nên có một cửa sổ bật lên xuất hiện hỏi nếu bạn muốn lưu công thức vào danh sách tùy chỉnh.

Hãy bắt đầu bằng cách tạo một khung mới gọi là danh sách đã lưu. Giống như bạn đã làm với cái trước đó, hãy đảm bảo khung này có cùng chiều rộng nhưng lần này bạn cần giảm chiều cao vì nó sẽ xuất hiện dưới dạng lớp phủ khi nhấp vào. Để tạo kiểu của khung danh sách đã lưu, hãy thêm một tiêu đề, nhập văn bản để nhập tên của danh sách và một nút đó là CTA để lưu nó.

Để liên kết, chọn biểu tượng hình trái tim trên khung video và thêm một liên kết đến khung danh sách đã lưu. Bây giờ, thay vì thuộc tính chuyển đổi là một cú hích, làm cho nó trở thành một lớp phủ. Điều chỉnh nó xuống 80% và sau đó kiểm tra nó bằng nút phát. Sửa đổi cho đến khi bạn hài lòng với lớp phủ. Liên kết biểu tượng x trên biểu tượng danh sách đã lưu Quay lại trang video.

Đây là cách sử dụng Framer X để dễ dàng tạo ra các nguyên mẫu tương tác có thể hành động. Ngoài ra còn có các công cụ tiên tiến bạn có thể sử dụng, cũng như thêm các đoạn mã hóa phản ứng vào các phần tử của khung. Ngoài ra, phần tốt nhất của Framer X là bất cứ ai cũng có thể làm chủ nó bằng cách thử nó trên một vài nguyên mẫu.

Bài viết này ban đầu được xuất bản trong số 325 của mạng, tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 325. hoặc là đăng ký. để ròng.

Tham gia với chúng tôi vào tháng 4 năm 2020 với Đội hình của các siêu sao JavaScript của chúng tôi tại GenerateJS - Hội nghị giúp bạn xây dựng JavaScript tốt hơn. Đặt ngay tại Generateconf.com.

Đọc thêm:

• Làm thế nào để nổi bật và được thuê làm thiết kế UX
• Mẹo 20 UX bạn cần biết
• 22 công cụ thiết kế UI tốt nhất