Thiết kế UI animation sao cho đúng?

Bài viết này là một quan sát về những nguyên tắc đơn giản trong việc tạo chuyển động trong thiết kế giao diện. Những điều được viết trong bài dự trên sự quan sát của tác giả.

Những nguyên tắc cơ bản mà tôi chú ý là việc nó là gì và tại sao hơn là làm cách nào để tạo ra chuyển động/hoạt hoạ. Với việc nhấn mạnh vào chuyển động (cám ơn iOS đã truyền cảm hứng cho tôi), điều quan trọng của nó là kết hợp với tương tác phù hợp và đúng mục đích để tạo ra UI hợp lý.

Với việc từ bỏ kiểu thiết kế mô phỏng thực tế (skeuomorphic), sự tự do dành cho nội dung và không hạn chế việc sáng tạo. Những gì vụng về và đôi khi không theo quy luật vật lý vẫn tồn tại. Nhưng lúc này kỹ thuật đã giúp cho việc thiết kế chuyển động trong thiết kế UI mobile trở thành một phần của công việc.

Phong cách cá nhân

Nguyên tắc ưu tiên lớn nhất là bất cứ chuyển động (motion) hay hoạt hoạ (animation) cần phải ở tiêu chuẩn cao nhất nếu có thể.

Các ứng dụng nên có cái nhìn "out of the box – bên ngoài chiếc hộp" đối với các giải pháp chuyển động và tạo ra một thứ gì đó chưa từng nói tới và thật sự thu hút.

Trong các ứng dụng, các chuyển động cần truyền đạt một phong cách đa dạng, trong khi vãn giữ được sự thống nhất xuyên suốt. Hành xử xứng đáng sẽ giúp duy trì tình trạng ổn định với người dùng và nắm bắt sự liên kết của họ đi kèm với trải nghiệm.

Định hướng

Chuyển động nên giúp người dùng dễ dàng thông qua các trải nghiệm. Nó sẽ tạo ra các "không gian vật lý" của ứng dụng bằng cách mà các vật thể xuất hiện và mất đi hoặc bắt đầu được nhìn thấy.

Nó sẽ hỗ trợ luồng hành động, cung cấp hướng dẫn rõ ràng trước, trong và sau khi sử dụng. Nó nên phục vụ như một người hướng dẫn, giữ người dùng định hướng và ngăn ngừa họ mất hứng, giảm nhu cầu về các yếu tố đồ hoạ được thêm vào nhằm giải thích nơi họ đang đứng (trong app) hoặc họ đã ở đâu.

Bối cảnh

Chuyển động nên cung cấp bối cảnh phù hợp với nội dung trên màn hình bằng cách liệt kê chi tiết các trạng thái vật lý của những hình sử dụng và môi trường mà chúng được dùng. Do không sử dụng kiểu Skeuomorphism, thiết kế UI tự do để hành xử theo bất cứ kiểu gì mà nhìn có vẻ trái ngược với bối cảnh của nó.

Thêm một nét hay biến dạnh thành một đối tượng hoặc áp dụng tính quán tính cho một danh sách kéo đơn giản có thể khiến trải nghiện thú vị và gắn bó hơn.

Linh hoạt

Chuyển động nên linh hoạt và trực quan. Nó nên phản ánh theo một cách mà trấn an người dùng hơn là khiến họ ngạc nhiên và làm họ rối mắt. Các phản ứng của UI, với hành động người dùng nên dễ hiểu.

Cảm xúc

Chúng nên gợi lên một phản ứng tích cực, có thể là một cảm giác thoải mái từ một hành động roll mượt mà hay gây sự phấn khích vì sự chuyển trang xảy ra.

Kiềm chế

Có ý tưởng rõ ràng và tránh gây mất tập trung người dùng quá nhiều với các chuyển động, tinh tế là chìa khoá của vấn đề. Cần dùng nó để duy trì sự tập trung chứ không phải gây phiền nhiễu.

Theo beyondkinetic.com