12/08/2018, 10:14

Thiết kể chuyển động cho UI

Với việc từ bỏ kiểu thiết kế mô phỏng thực tế (skeuomorphic), 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 ...

Với việc từ bỏ kiểu thiết kế mô phỏng thực tế (skeuomorphic), 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

Paper.gif

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

Orientation1.gif

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

Context.gif

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

Responsive.gif

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

Emotive.gif

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.

0