DesignerVN
Moderator
Kết hợp hoạt ảnh với giao diện người dùng (UI) và thiết kế trải nghiệm người dùng (UX) là điều rất cần thiết, vì nó đóng vai trò quan trọng trong việc nâng cao cách mọi người phản hồi ứng dụng hoặc trang web - cho dù đó là trải nghiệm mua sắm trực tuyến hay đơn giản như việc thả ghim trên bản đồ.
Hoạt ảnh đòi hỏi sự chú ý của người dùng hoặc khuyến khích họ hành động theo thứ gì đó theo cách mà hình ảnh tĩnh không thể. Và bây giờ nó trở nên dễ dàng hơn để tạo ra hình ảnh động với các công cụ mới và phần mềm chuyên dụng - một số phần mềm còn không yêu bạn bạn biết về code.
Hoạt ảnh UX và giao diện người dùng đã được biết là tốn thời gian và liên quan đến việc viết nhiều mã khó của JavaScript. Nhưng với các công cụ cụ thể, chẳng hạn như công cụ Animation 'Lottie' của Airbnb - và các công cụ thiết kế UI/UX có hoạt ảnh được tích hợp vào quy trình làm việc tổng thể, chẳng hạn như InVision Studio hoặc Framer - các tính năng động trên trang web hoặc ứng dụng đã trỡ nên dễ dàng hơn rất nhiều.
Hãy xem các công cụ tạo animation miễn phí và trả phí tốt nhất dành cho Mac, Windows, iOS và Android.
Lottie
Lottie là công cụ animation giựa trên mã nguồn mở (thông qua GitHub) của Airbnb cho iOS, Android và React Native, kết xuất hoạt ảnh After Effects trong thời gian thực và cho phép các ứng dụng gốc sử dụng hoạt ảnh dễ dàng như khi sử dụng nội dung tĩnh.
Công cụ này đưa vào dữ liệu hoạt ảnh được xuất dưới dạng tệp JSON từ Plugin của After Effects, được gọi là Bodymovin được phát triển bởi Hernan Torrisi. Tiện ích được đi kèm với trình phát JavaScript có thể hiển thị hoạt ảnh trên web.
Tải về Bodymovin, Lottie iOS, Android và React Native.
Kite Compositor
Ứng dụng Animation và tạo mẫu này chỉ dành cho Mac và iOS. Người dùng có thể tích hợp với Adobe XD CC, nhập từ Sketch hoặc sử dụng công cụ JavaScript tích hợp sẵn.Với ứng dụng này, bạn có thể chỉnh sửa đường path của Animation và các layer hình dạng trực tiếp trên canvas, điều chỉnh màu sắc, kích thước và tốc độ của Animation.
Bạn có thể nhân tố hoạt ảnh thành nhiều trang nội dung, mỗi trang timeline độc lập và dễ dàng chuyển đổi giữa các trang thông qua các chuyển đổi trang được tạo sẵn hoặc hoạt ảnh timeline tùy chỉnh. Kiểm tra tất cả bằng cách hiển thị thời gian thực và xem giao diện hiển thị trên điện thoại của bạn bằng cách tải xuống ứng dụng đồng hành, Kite Compositor for iOS.
Tải về bản dùng thử miễn phí.
Protopic
Khám phá các tính năng tạo mẫu như ghi lại chuyển động, di chuyển, xoay,... trên bất kỳ thiết bị điện thoại thông minh nào. Điều khiển cảm biến của các thiết bị thông minh trong nguyên mẫu của bạn, chẳng hạn như cảm biến độ nghiêng, âm thanh, la bàn và cảm biến 3D Touch.
Protopie là một cái tên mới, một ứng dụng cho phép tạo các tương tác người dùng mà không phải gõ một dòng code nào. Các công cụ khác yêu cầu các nhà thiết kế phải trở thành các lập trình viên và thiết kế các khung hình dưới góc nhìn lập trình. Protopie chỉ đơn giản là một công cụ thiết kế. Protopie được phát triển cho các nhà thiết kế, nó có thể mô phỏng các tương tác người dùng dưới góc nhìn của người thiết kế. Không giống như các công cụ mô phỏng khác, bản kiểm thử do ProtoPie không chỉ hiển thị một bản xem trước bằng hình ảnh của một mẫu thiết kế trên màn hình điện thoại di động mà hơn thế ProtoPie còn có thể thử nghiệm các thao tác đa điểm, sử dụng cảm biến và các kết nối device to device, nói chung thì Protopie có thể mô hỏng hầu như tất cả các thao tác mà người dùng sử dụng trong ngữ cảnh thực tế. Gần đây, Protopie đã cập nhật và cho phép tạo ra các tương tác có kèm theo điều kiện, tương tự như Pixate của Google, đây là một điểm sáng của Protopie. Ngoài ra có một điều đáng chú ý nữa là Protopie cũng có phiên bản cho Windows và nó đang được phát triển và sẽ sớm ra mắt trong thời gian tới.
Principle
Tạo các thiết kế giao diện tương tác, hoạt hình cho các ứng dụng của bạn để thử nghiệm những ý tưởng mới hoặc tạo ra toàn bộ nguyên mẫu bằng công cụ dễ sử dụng này.
After Effects
Adobe After Effects ngày càng được sử dụng cho các nhà thiết kế và nhà phát triển UI / UX bởi một loạt các thương hiệu, bao gồm Airbnb, Uber, Audi, Google và nhiều sản phẩm khác. Nhà thiết kế UX Issara Willenskomer đã tạo ra một trung tâm hướng dẫn, UX in Motion, với các video hướng dẫn về cách tạo hoạt ảnh giao diện người dùng bằng Adobe After Effects. Hướng dẫn của ông bao gồm các chủ đề như tương tác vi mô, hoạt ảnh trên Bảng điều khiển, infographics và các tương tác trực quan.
Studio InVision
InVision cung cấp một số công cụ tạo mẫu mạnh mẽ, cho phép bạn nhanh chóng và dễ dàng tạo ra các mô hình tương tác của thiết kế theo cách phản ánh trải nghiệm web thực sự. Nó cũng cung cấp prototyping di động với cử chỉ, và bạn cũng có thể khởi động thử nghiệm người dùng từ iPhone.
InVision thông báo vào tháng 11 rằng thiết kế kỹ thuật số mới và ứng dụng UX của họ sẽ miễn phí cho tất cả người dùng. InVision đã phát hành Studio - một đối thủ của XD, Photoshop, Illustrator và Sketch, bất kỳ công cụ nào bạn sử dụng để thiết kế ứng dụng, trang web và các sản phẩm kỹ thuật số khác.
Bạn có thể làm việc trên bố cục cho một kích thước màn hình hoặc loại và xem thiết kế đó được điều chỉnh tự động cho các thiết bị và định hướng khác. Thư viện tài sản có thể được chia sẻ giữa các nhóm và các yếu tố cập nhật có thể được triển khai trên các thiết kế. Và thiết kế có thể nhanh chóng được tải lên nền tảng InVision để chia sẻ với những người khác trong một tổ chức (hoặc khách hàng).
Xem InVision Studio hoạt động trong video dưới đây.
Hoạt ảnh đòi hỏi sự chú ý của người dùng hoặc khuyến khích họ hành động theo thứ gì đó theo cách mà hình ảnh tĩnh không thể. Và bây giờ nó trở nên dễ dàng hơn để tạo ra hình ảnh động với các công cụ mới và phần mềm chuyên dụng - một số phần mềm còn không yêu bạn bạn biết về code.
Hoạt ảnh UX và giao diện người dùng đã được biết là tốn thời gian và liên quan đến việc viết nhiều mã khó của JavaScript. Nhưng với các công cụ cụ thể, chẳng hạn như công cụ Animation 'Lottie' của Airbnb - và các công cụ thiết kế UI/UX có hoạt ảnh được tích hợp vào quy trình làm việc tổng thể, chẳng hạn như InVision Studio hoặc Framer - các tính năng động trên trang web hoặc ứng dụng đã trỡ nên dễ dàng hơn rất nhiều.
Hãy xem các công cụ tạo animation miễn phí và trả phí tốt nhất dành cho Mac, Windows, iOS và Android.
Lottie
Lottie là công cụ animation giựa trên mã nguồn mở (thông qua GitHub) của Airbnb cho iOS, Android và React Native, kết xuất hoạt ảnh After Effects trong thời gian thực và cho phép các ứng dụng gốc sử dụng hoạt ảnh dễ dàng như khi sử dụng nội dung tĩnh.
Công cụ này đưa vào dữ liệu hoạt ảnh được xuất dưới dạng tệp JSON từ Plugin của After Effects, được gọi là Bodymovin được phát triển bởi Hernan Torrisi. Tiện ích được đi kèm với trình phát JavaScript có thể hiển thị hoạt ảnh trên web.
Tải về Bodymovin, Lottie iOS, Android và React Native.
Kite Compositor
Ứng dụng Animation và tạo mẫu này chỉ dành cho Mac và iOS. Người dùng có thể tích hợp với Adobe XD CC, nhập từ Sketch hoặc sử dụng công cụ JavaScript tích hợp sẵn.Với ứng dụng này, bạn có thể chỉnh sửa đường path của Animation và các layer hình dạng trực tiếp trên canvas, điều chỉnh màu sắc, kích thước và tốc độ của Animation.
Bạn có thể nhân tố hoạt ảnh thành nhiều trang nội dung, mỗi trang timeline độc lập và dễ dàng chuyển đổi giữa các trang thông qua các chuyển đổi trang được tạo sẵn hoặc hoạt ảnh timeline tùy chỉnh. Kiểm tra tất cả bằng cách hiển thị thời gian thực và xem giao diện hiển thị trên điện thoại của bạn bằng cách tải xuống ứng dụng đồng hành, Kite Compositor for iOS.
Tải về bản dùng thử miễn phí.
Protopic
Khám phá các tính năng tạo mẫu như ghi lại chuyển động, di chuyển, xoay,... trên bất kỳ thiết bị điện thoại thông minh nào. Điều khiển cảm biến của các thiết bị thông minh trong nguyên mẫu của bạn, chẳng hạn như cảm biến độ nghiêng, âm thanh, la bàn và cảm biến 3D Touch.
Protopie là một cái tên mới, một ứng dụng cho phép tạo các tương tác người dùng mà không phải gõ một dòng code nào. Các công cụ khác yêu cầu các nhà thiết kế phải trở thành các lập trình viên và thiết kế các khung hình dưới góc nhìn lập trình. Protopie chỉ đơn giản là một công cụ thiết kế. Protopie được phát triển cho các nhà thiết kế, nó có thể mô phỏng các tương tác người dùng dưới góc nhìn của người thiết kế. Không giống như các công cụ mô phỏng khác, bản kiểm thử do ProtoPie không chỉ hiển thị một bản xem trước bằng hình ảnh của một mẫu thiết kế trên màn hình điện thoại di động mà hơn thế ProtoPie còn có thể thử nghiệm các thao tác đa điểm, sử dụng cảm biến và các kết nối device to device, nói chung thì Protopie có thể mô hỏng hầu như tất cả các thao tác mà người dùng sử dụng trong ngữ cảnh thực tế. Gần đây, Protopie đã cập nhật và cho phép tạo ra các tương tác có kèm theo điều kiện, tương tự như Pixate của Google, đây là một điểm sáng của Protopie. Ngoài ra có một điều đáng chú ý nữa là Protopie cũng có phiên bản cho Windows và nó đang được phát triển và sẽ sớm ra mắt trong thời gian tới.
Principle
Tạo các thiết kế giao diện tương tác, hoạt hình cho các ứng dụng của bạn để thử nghiệm những ý tưởng mới hoặc tạo ra toàn bộ nguyên mẫu bằng công cụ dễ sử dụng này.
After Effects
Adobe After Effects ngày càng được sử dụng cho các nhà thiết kế và nhà phát triển UI / UX bởi một loạt các thương hiệu, bao gồm Airbnb, Uber, Audi, Google và nhiều sản phẩm khác. Nhà thiết kế UX Issara Willenskomer đã tạo ra một trung tâm hướng dẫn, UX in Motion, với các video hướng dẫn về cách tạo hoạt ảnh giao diện người dùng bằng Adobe After Effects. Hướng dẫn của ông bao gồm các chủ đề như tương tác vi mô, hoạt ảnh trên Bảng điều khiển, infographics và các tương tác trực quan.
Studio InVision
InVision cung cấp một số công cụ tạo mẫu mạnh mẽ, cho phép bạn nhanh chóng và dễ dàng tạo ra các mô hình tương tác của thiết kế theo cách phản ánh trải nghiệm web thực sự. Nó cũng cung cấp prototyping di động với cử chỉ, và bạn cũng có thể khởi động thử nghiệm người dùng từ iPhone.
InVision thông báo vào tháng 11 rằng thiết kế kỹ thuật số mới và ứng dụng UX của họ sẽ miễn phí cho tất cả người dùng. InVision đã phát hành Studio - một đối thủ của XD, Photoshop, Illustrator và Sketch, bất kỳ công cụ nào bạn sử dụng để thiết kế ứng dụng, trang web và các sản phẩm kỹ thuật số khác.
Bạn có thể làm việc trên bố cục cho một kích thước màn hình hoặc loại và xem thiết kế đó được điều chỉnh tự động cho các thiết bị và định hướng khác. Thư viện tài sản có thể được chia sẻ giữa các nhóm và các yếu tố cập nhật có thể được triển khai trên các thiết kế. Và thiết kế có thể nhanh chóng được tải lên nền tảng InVision để chia sẻ với những người khác trong một tổ chức (hoặc khách hàng).
Xem InVision Studio hoạt động trong video dưới đây.
Hình ảnh thumbnail: Dimest
