Hãy để tôi cho bạn xem công cụ tạo mẫu yêu thích của tôi

May 09 2022
Trong khi tôi ở đó, tôi cũng sẽ hướng dẫn bạn quy trình thiết kế tương tác của tôi.
Tôi đã thiết kế các sản phẩm kỹ thuật số hơn một thập kỷ để biết rằng công cụ này ít quan trọng hơn quy trình. Tôi tin rằng miễn là bạn đạt được kết quả như mong đợi, bạn có thể sử dụng bất kỳ phần mềm nào phù hợp với mình nhất.
Hình ảnh của Tác giả

Tôi đã thiết kế các sản phẩm kỹ thuật số hơn một thập kỷ để biết rằng công cụ này ít quan trọng hơn quy trình. Tôi tin rằng miễn là bạn đạt được kết quả như mong đợi, bạn có thể sử dụng bất kỳ phần mềm nào phù hợp với mình nhất.

Tôi không có ý định tạo một danh sách so sánh về ưu và nhược điểm của từng công cụ để giúp bạn quyết định nên sử dụng công cụ nào cho nhu cầu thiết kế sản phẩm của mình (nhưng nếu tôi có thể giúp bạn điều đó thì thật tuyệt). Trước khi chia sẻ một số kinh nghiệm của mình về việc xây dựng các nguyên mẫu tương tác, tôi muốn nhấn mạnh điều này:

Khi nói đến phát triển sản phẩm, nơi làm việc theo nhóm, cộng tác trong thời gian thực và trải nghiệm khách hàng là rất quan trọng, bạn phải xem xét các lựa chọn của mình và liên tục đánh giá lại xem phần mềm bạn chọn có phục vụ tốt nhất không chỉ nhu cầu của bạn hay không. Làm việc với các công cụ cụ thể mà bạn cảm thấy thoải mái không có nghĩa là chúng làm công việc tốt nhất có thể cho những người khác. Ghi nhớ nó trong tâm trí.

Bây giờ chúng ta hãy nói về một số công cụ thiết kế yêu thích của tôi.

Tôi đã sử dụng Sketch để thiết kế giao diện và hệ thống sản phẩm trong nhiều năm, nhưng tôi chưa bao giờ nhìn lại khi chuyển sang Figma . Hợp tác nhóm nhanh chóng và quản lý tệp đám mây là hai lý do chính cho sự thay đổi.

Mặc dù tôi đã thử hàng tá công cụ thiết kế giao diện người dùng ngoài Figma và Sketch, chẳng hạn như InVision, Adobe XD, Marvel và Framer, và một vài công cụ khác, nhưng điều tương tự đã không xảy ra khi nói đến tạo mẫu. Tôi đã đặc biệt là một fan hâm mộ của nó kể từ lần đầu tiên chơi với nó vào năm 2015.

Trước khi tôi tình cờ gặp Principle , các thiết kế của tôi rất tĩnh. Để giao tiếp với các nhà phát triển cách họ nên thực hiện chuyển đổi giữa các phần tử hoặc trang, tôi phải viết ra các thông số kỹ thuật hoặc tạo nhiều màn hình từng khung hình để chứng minh cách tôi hình dung các sự kiện tương tác.

Nhưng nếu thay vì kể, tôi có thể cho họ xem thì sao? Vì vậy, tôi quyết định tìm hiểu làm thế nào.

Học thông qua các thí nghiệm nhỏ và chia sẻ kiến ​​thức

Càng sử dụng Nguyên tắc, tôi càng bị ám ảnh bởi các tương tác vi mô. Việc tạo ra những thử nghiệm nhỏ đó cho phép tôi thể hiện sự sáng tạo và tư duy sản phẩm của mình, đồng thời biến tôi trở thành một nhà thiết kế UX tốt hơn.

Đọc thêm về các dự án này và các hoạt ảnh tương tác vi mô khác trên trang web của tôi ‍

Khi tôi hiểu cơ chế của Principle, tôi cảm thấy rất thoải mái khi xây dựng các hình ảnh động với mức độ chi tiết mà tôi muốn. Độ phức tạp của các nguyên mẫu mở rộng theo cấp số nhân cùng với chất lượng của kết quả. Nó cho phép tôi đưa công việc của mình lên một tầm cao mới.

Tôi nhớ mình là một người ủng hộ nhiệt thành của Nguyên tắc khi tôi tích cực đăng bài trên Dribbble vài năm trước. Tôi đã từng chia sẻ các tệp mã nguồn mở của mọi dự án cá nhân mà tôi đã thực hiện, vì vậy bất kỳ ai cũng có thể thử và tạo phiên bản của họ.

Đó là cách tôi cống hiến cho cộng đồng những trang làm việc truyền cảm hứng vô tận do mọi người trên toàn thế giới tạo ra. Thật phong phú khi nhận được phản hồi tích cực về công việc tôi đã chia sẻ và thấy các nhà thiết kế khác học hỏi từ các nguyên mẫu của tôi. Thật là một thời gian vui vẻ!

Cách tôi xây dựng nguyên mẫu trên Nguyên tắc

Nguyên tắc là một công cụ tạo mẫu “không có mã”. Tôi không bao giờ thiết kế giao diện với nó (mặc dù bạn có thể, nhưng tôi không nghĩ rằng nó được tối ưu hóa cho điều đó). Tôi luôn nhập giao diện người dùng từ Figma.

Bước 1: Cơ sở hạ tầng

Trước khi đi sâu vào các chi tiết của hoạt ảnh và chuyển tiếp, tôi làm việc trên nền tảng của giao diện. Điều cần thiết là phải biết và hiểu cấu trúc chính và điều hướng của nguyên mẫu trước khi tập trung vào các yếu tố hình ảnh.

  • Wireframes: Vẽ trên một mảnh giấy giúp tôi nhìn thấy bức tranh lớn.
  • Giao diện người dùng có độ trung thực thấp: Đôi khi, sẽ hữu ích khi chuyển đổi từ wireframe sang giao diện thân thiện hơn trước khi chạy thử nghiệm người dùng nhấp qua nhanh. Không có màu sắc hoặc hình ảnh nào là cần thiết vào thời điểm này.
  • Nguyên mẫu nhấp qua: Điều cần thiết là phải xác thực ý tưởng và đảm bảo rằng điều hướng có ý nghĩa để tránh làm lại.
  • Giao diện người dùng có độ trung thực cao: Sau khi tôi có giao diện người dùng cuối cùng, đã đến lúc đưa nguyên mẫu lên cấp độ tiếp theo.

Điều này luôn luôn là phần yêu thích nhất của tôi trong quá trình. Tôi không thấy tính năng "nhập" được tích hợp sẵn đủ chặt chẽ, vì nó đôi khi sắp xếp sai các phần tử hoặc trình bày các vấn đề khác. Do đó, tôi phải tự mình cấu tạo lại giao diện.

Vâng, tôi biết đó là rất nhiều công việc, nhưng nó đáng giá, ít nhất là đối với tôi. Khi tôi cần kết hợp video, hoạt ảnh lặp lại và các sự kiện tương tác phức tạp, tôi không thể hoàn thành tất cả với Figma.

Bước 3) Làm việc với các trình điều khiển và bảng Animate

Họ là những người bạn tốt nhất của bạn. Hiểu cách chúng hoạt động là tất cả những gì bạn cần để bắt đầu.

Trình điều khiển : hoạt động tương tự như dòng thời gian, tạo hoạt ảnh dựa trên thuộc tính thay đổi (sử dụng khung hình chính) trong cùng một bản vẽ. Chúng rất phù hợp cho các sự kiện kéo, cuộn hoặc phân trang. Tôi đã sử dụng Trình điều khiển để tạo hiệu ứng thị sai choQuảng cáo Nikebên dưới.

Dự án ý tưởng về quảng cáo trên thiết bị di động toàn trang của Nike. Đây là một trong những bức ảnh phổ biến nhất của tôi trên Dribbble
Ảnh chụp màn hình giao diện của Principle hiển thị bảng "Trình điều khiển" và tất cả các sự kiện được sử dụng để tạo hiệu ứng cuộn thị sai

Animate : Nó được sử dụng để tùy chỉnh hoạt ảnh giữa các trang. Tương tự với sự kiện “trước” và “sau”. Nếu hai lớp trên các trang khác nhau có cùng tên, nhưng thuộc tính khác nhau, chúng sẽ tự động hoạt ảnh trong quá trình chuyển đổi. Nó tuyệt vời chonhấp chuột,di chuộthoặcbáo chí. Tôi đã sử dụng Animate để tạo hiệu ứng chuyển tiếp giữa các trang chodự án conceptTrang web lớp học nhiếp ảnh

Tác phẩm lấy cảm hứng từ Xu hướng viết truyện ngắn năm 2017 của Muzli - Mondrianizm. Đọc thêm trên trang web của tôi ‍
Ảnh chụp màn hình giao diện của Principle hiển thị các sự kiện trong bảng "Animate" để tạo chuyển tiếp trang

Tại sao tôi không sử dụng các công cụ thiết kế chuyển động khác, chẳng hạn như After Effects, để tạo các hoạt ảnh này? Bởi vì Nguyên tắc tiết kiệm chi phí hơn và có giao diện đơn giản. Nó được thiết kế chủ yếu để tạo mẫu và có lợi ích của một ứng dụng di động đồng hành cho phép tôi kiểm tra ngay trên thiết bị mà tôi đang thiết kế.

Ghi chú cuối cùng

Figma là một công cụ thiết kế nổi bật với khả năng tạo mẫu mạnh mẽ không ngừng cải thiện với mỗi bản cập nhật mới. Tốt nhất là hợp tác nhóm và phản hồi theo ngữ cảnh. Vì lý do đó, Figma là công cụ lựa chọn của tôi vì nó cho phép tôi xây dựng một nguyên mẫu khá đẹp và thực tế, tất cả trong cùng một không gian làm việc.

Mặt khác, Principle là lựa chọn cá nhân của tôi để xây dựng nguyên mẫu với các sự kiện tương tác nâng cao và hoạt ảnh giao diện người dùng phức tạp kết hợp với các đoạn video và GIF động. Đó là phần mềm tạo mẫu không mã yêu thích của tôi mà tôi giữ trong túi sau cho các dự án đặc biệt.

Bạn cũng là một fan hâm mộ của Principle? Hãy cho tôi biết ở phần bình luận.

Chúc bạn tạo mẫu vui vẻ và cảm ơn bạn đã đọc.

Luôn tuyệt vời!

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved