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