Sẽ chuyên nghiệp hơn nếu bạn có một thiết kế UI và đi kèm theo một bản thiết kế với những chuyển động tương tác để khách hàng và đồng nghiệp có thể hình dung tốt hơn những gì bạn muốn.

Hình dung việc bạn không hài lòng với phiên bản do những người lập trình thực hiện khi thấy các tương tác khô cứng, nghèo nàn. Bạn sẽ phải dành thời gian tìm kiếm các ví dụ hoặc mô tả cho họ biết ý bạn là gì. Tất cả những việc đó rất mất thời gian và đôi khi không đạt hiệu quả mong muốn.

Những công cụ được giới thiệu trong bài viết này sẽ giúp bạn tạo ra những tương tác, chuyển động để cùng với đồng nghiệp cho ra những sản phẩm tốt.

1. Bút chì và Giấy để tạo những ý tưởng ban đầu

Thay thế: Bảng trắng và bút lông hoặc giấy dán

Trong những giai đoạn ban đầu của thiết kế, những ý tưởng còn mông lung, chưa tập trung, thì việc phác thảo tiếp tục là quy trình tốt nhất để triển khai thêm ý tưởng – thậm chí cả là chuyển động của thiết kế.

Thuật ngữ “storyboard” có những ý nghĩa khác nhau với mọi người. Với một số người nó là việc vẽ chi tiết từng quá trình của cảnh phim hoặc video. Một trong những thứ tốt đẹp về storyboarding chuyển động là việc nó sẽ ít chi tiết hơn hoặc sự cẩn thận trong nét vẽ khi thực hiện. Những bản phác storyboard đi cùng với các ghi chú và các trao đổi để hoàn thiện mỗi phần công việc.

Tại sao – Khi nào thì dùng storyboard

Storyboard và phác thảo rất có ích khi trả lời câu hỏi “Kiểu animation này có tốt ở đây không?” “Hiệu ứng khi chuyển trang sẽ xảy ra thế nào?” hoặc là những ý tưởng bất chợt xuất hiện.

Thậm chí là một vài khung hình chỉ ra các mà chuyển động sẽ diễn ra tương tác, một storyboard sẽ giúp mọi người cùng thấy được ý tưởng sẽ thực hiện.

Nếu bạn tiếp tục với một thứ mà ai cũng yêu thích, bạn có thể tiếp tục với nó một cách hoàn hảo hơn. Và nếu bạn bắt đầu với một thứ có vẻ không đúng hướng, bạn hoàn toàn có thể bắt đầu lại liền.

Những bản phác thảo sẽ nhận được nhiều phản hồi nhiệt tình vì lúc đó những chúng còn ở dạng sơ khai và mọi người bắt đầu hình dung, tưởng tượng và đưa phản hồi nhằm giúp bạn có một thiết kế tốt hơn. Khác với việc bạn đưa ra bản thiết kế khá chi tiết, điều đó khiến họ ít phản hồi vì nhìn nó có vẻ kỹ càng.

2. Keynote sẽ rất tuyệt để tạo ra những phác thảo chuyển động

Khi bạn đang cần một cách để thể hiện một chuyển động hay một tương tác nhưng cũng không cần quá chi tiết, Keynote có thể là một vũ khí tốt. Điểm mạnh của Keynote là nó khá dễ dùng, và nếu bạn đang sử dụng Mac thì bạn sẽ thích nó.

Với chức năng Magic Move khiến nó thành một công cụ học chuyển động dễ dàng, bạn có thể sử dụng thành thao sau khoảng một giờ đồng hồ. Bạn có thể copy và dán những yếu tố từ Sketch hoặc Illustrator.

Keynote quá tuyệt để khởi động, nhưng nó cũng không hoàn hảo cho việc xử lý các chi tiết nhỏ. Nó không có những hỗ trợ để làm mượt chuyển động… chính vì thể dùng nó ở giai đoạn phác thảo chuyển động là hợp lý.

3. After Effects dành cho những chuyển động đỉnh nhất.

Thay thế: Adobe Animate (flash) hay Tumult Hype

Nghe có vẻ “biết rồi khổ lắm nói mãi” khi nhắc tới AE hoặc Flash cho những dự án web hoặc App, nhưng vẫn cần nhắc lại rằng chúng là phù hợp nhất để tạo ra các chuyển động và trình diễn một thứ sẽ chuyển động như thế nào. Với những công cụ đó bạn có thể đi sâu hơn vào các chi tiết của chuyển động, những thứ phân biệt “chuyển động tinh tế” với “chuyển động cứng nhắc, sơ sài”

Các chuyển động ở giải đoạn này cũng cần có các thông hữu ích cho người lập trình, những người sẽ đưa chúng lên đời thực. Khi bắt tay vào làm nó, họ cần có những thông tin như duration, easing hay spring values và iteration counts (những thông số khi làm chuyển động). Sẽ quá khó cho người lập trình nếu bắt họ phải nhìn nó thông qua video.

4. Principle giúp bạn tạo ra những prototypes tương tác nhanh chóng.

Thay thế: Flinto, Framer JS hay Custom HTML, JS & CSS

Đôi khi câu hỏi bạn nhận được nhiều nhất là việc các giao diện tương tác ra sao và sử dụng nó sẽ thế nào.

Một prototype có thể tương tác là câu trả lời tốt nhất cho những câu hỏi kiểu như “Nếu tôi tương tác với thứ này thì sẽ có chuyển động gì xảy ra?”. Công cụ này giúp bạn thể hiện tương tác thực sự – nhấp, nhấn, kéo và những thứ khác.

Những công cụ như Principle và Flinto có những kiểu tương tác mà bạn có thể trình diễn và mô tả mà không phải làm quá nhiều. Framer JS hay custom HTML thì khá rộng và mở trong tương tác và nó giúp bạn rất nhiều trong công việc.

Tương tác prototype làm với Principle hay những thứ khác đều rất tốt cho làm thiết kế tương tác và mô phỏng với độ chính xác cao. Chúng thực sự có thể nhìn như thật, và có thể sử dụng để kiểm tra những ý tưởng chuyển động trong nội bộ hoặc với cả người dùng thực và dĩ nhiên là cả những khách hàng.

Con dao hai lưỡi.

Những bản tương tác “không có thực” có thể là một lợi thế lớn, nhưng cũng có thể là sai lầm lớn. Tôi thấy rằng những prototype kiểu vậy sẽ thành công nếu sử dụng cho những phần nhỏ của app hay trang. Như việc tạo ra một prototype cho việc thêm hoặc bớt những items từ giỏ hàng thay vì tạo các trang chỉ ra quy trình checkout.

Nếu bạn để các tương tác bao trùm lên nhiều thứ thì khi tiến hành xây dựng, thời gian để biến chúng thành thực tế quá tốn kém. Hãy tập trung vào các gói tương tác nhỏ nhằm nâng cao trải nghiệm người dùng, chứ đừng chìm đắm trong nó.

Theo Motiongrapher.com