Nguyên tắc hoạt hình UI: Disney đã chết

Nhiếp ảnh được dự đoán là cái chết của hội họa (Daguerreotype đầu tiên)

(Nếu bạn muốn nhận các bài viết của tôi về hoạt hình UI qua email và được thêm vào bản tin của tôi, nhấp vào đây.)

Một phương tiện mới

Khi Paul Delaroche bắt gặp một Daguerreotype vào khoảng năm 1839, ông đã tuyên bố nổi tiếng, Từ ngày hôm nay, bức tranh đã chết!

Cho đến thời điểm đó, cách duy nhất để ghi lại trực quan thế giới bên ngoài là sử dụng phương tiện được áp dụng trên bề mặt bằng tay. Hàng thế kỷ chế tác thủ công trên nhiều lĩnh vực khác nhau đã dẫn đến việc phát hiện ra nhiều nguyên tắc và kỹ thuật trên các phương tiện truyền thông khác nhau. Trên khắp các nền văn hóa, và khi các thời đại phát triển, phong cách và ngôn ngữ hình ảnh về cách thể hiện hình ảnh nên nhìn tiến hóa - các mẫu thiết kế ban đầu.

Các nhiếp ảnh gia thời kỳ đầu, cố gắng làm cho hình ảnh của họ giống với những bức tranh phổ biến thời đó, thường sử dụng kết hợp các kỹ thuật ánh sáng và in ấn để làm mềm hình ảnh của họ và tạo ra một cái nhìn họa sĩ. Sự hiểu biết của họ về những gì phương tiện nhiếp ảnh có khả năng, được liên kết mật thiết, bị ảnh hưởng và bị giới hạn bởi sự hiểu biết của họ về thế giới hội họa.

Phải mất gần một trăm năm trước khi các nhiếp ảnh gia như Ansel Adams, Imogen Cickyham, Edward Weston và những người khác trong 'Nhóm f / 64' xâm nhập vào ngôn ngữ hình ảnh khiến nhiếp ảnh trở thành một phương tiện độc đáo - với hình ảnh riêng của nó ngôn ngữ và nguyên tắc, và khi làm như vậy, họ đã cách mạng hóa lĩnh vực nhiếp ảnh.

Edward Weston, Imogen Cickyham, Ansel Adams

Disney đã giải quyết một vấn đề khác

Hạnh phúc, chúng tôi thấy mình ở một cuộc cách mạng như vậy trong hoạt hình UI.

Năm 1981, Ollie Johnston và Frank Thomas đã phát hành Disney Animation: Illusion of Life và giới thiệu cái gọi là '12 nguyên tắc hoạt hình cơ bản '. Những nguyên tắc này đã giải quyết vấn đề làm thế nào để tạo ra' chuyển động thực tế 'xảy ra khi cơ thể hữu cơ di chuyển và phản ứng trong không gian vật lý (các nguyên tắc cũng bao gồm những thứ như thời gian cảm xúc và sự hấp dẫn của nhân vật).

Giao diện người dùng hoạt hình, như một phần của trải nghiệm người dùng chỉ mới 20 tuổi và vẫn còn trong giai đoạn sơ khai. Khi miền hoạt hình UI xuất hiện, các công cụ duy nhất có sẵn để mô tả cách giao diện người dùng hành xử đúng lúc là 12 nguyên tắc hoạt hình. Giống như cách các nhiếp ảnh gia ban đầu cố gắng hiểu nhiếp ảnh thông qua các quy tắc hội họa, các nhà thiết kế đã cố gắng hiểu hoạt hình UI thông qua các quy tắc của hoạt hình Disney.

Nhìn bề ngoài, điều này là dễ hiểu vì có một số mức độ chồng chéo. Chuyển động dễ dàng, một trong 12 nguyên tắc hoạt hình, củng cố ý thức về sự đúng đắn thông qua chuyển động, một điều rất quan trọng đối với trải nghiệm người dùng. Không nới lỏng, hoạt hình UI cảm thấy cồng kềnh và kỳ lạ.

Sự cố hoàn toàn rõ ràng khi người ta xem xét kỹ hơn 12 nguyên tắc trong bối cảnh giao diện người dùng.

Squash and Stretch mang lại trọng lượng và tính linh hoạt cho các đối tượng, một cái gì đó là ngoại lệ thay vì quy tắc trong giao diện người dùng.

Dự đoán tạo ra cảm giác rằng một cái gì đó sắp xảy ra và cũng gần như vô dụng khi nói đến trải nghiệm người dùng. Nó chỉ hoạt động theo một cách giới hạn để chọn các tương tác vi mô và trạng thái nút.

Dàn dựng đề cập đến bố cục của hoạt hình, điều này có ý nghĩa đối với phim hoạt hình Disney vì các nhân vật liên tục chuyển động, nhưng trong trải nghiệm người dùng, điều này chỉ được coi là thiết kế.

Straight Ahead Action và Pose to Pose là những nguyên tắc ít hơn so với cách tiếp cận quá trình vẽ / hoạt hình thực tế: bạn có thể tạo một hình ảnh động mượt mà hơn nếu bạn vẽ các khung hình liên tục hoặc sử dụng tư thế để tạo ra một vài khung hình chính và điền vào các khoảng trống . Trong trải nghiệm người dùng, quá trình này hầu như không dịch, trừ khi có hoạt hình thực tế theo khung hình hoạt hình. Theo mặc định, bất kể công cụ bạn sử dụng là gì, gần như tất cả hoạt ảnh UI được tạo bằng khung hình chính.

Theo dõi và chồng chéo Hành động phải tuân theo các định luật vật lý và quán tính và cách các cơ thể vật lý phản ứng, cả hai đều ít liên quan đến giao diện người dùng, trừ khi bạn dựa vào nguyên tắc tiếp theo, hữu ích nhất trong nhóm .

Slow In và Slow Out nói rằng các đối tượng cần thời gian để tăng tốc và giảm tốc độ. Điều này cực kỳ phù hợp vì 100% hoạt hình UI nên sử dụng nguyên tắc này. Nó thường được gọi là ‘nới lỏng, hoành tráng và cực kỳ quan trọng.

Arc (cần thiết để tái tạo chuyển động vật lý) gần như vô dụng đối với hoạt hình UI và cũng là ngoại lệ thay vì quy tắc.

Hành động phụ rất hữu ích và rất tốt cho việc chuyển đổi màn hình và thiết lập hệ thống phân cấp thị giác.

Thời gian có liên quan khi vẽ các ký tự, nhưng trong giao diện người dùng, nơi chuyển động cần phải rõ nét để cảm thấy nhạy, tôi thấy tốt hơn là dựa vào việc nới lỏng để thiết kế cảm giác tương tác, thay vì thời lượng.

Sự phóng đại liên quan đến mức độ hiện thực hoặc biếm họa, một lần nữa, hầu như không liên quan đến hoạt hình UI, vì thiết kế được xác định trước.

Bản vẽ rắn cũng tương tự như vậy khi hoạt hình UI xử lý hành vi của các đối tượng giao diện theo thời gian, chứ không phải thiết kế thực tế của chính các đối tượng.

Kháng cáo cũng nói lên cách xử lý trực quan, một lần nữa không liên quan đến cách giao diện hoạt động theo thời gian.

Cuối cùng

Vì vậy, câu hỏi vẫn còn: tại sao don lồng 12 nguyên tắc cơ bản của hoạt hình mô tả chính xác hoạt hình UI?

Sự cố có thể được hiểu rõ nhất bằng cách quan sát đơn giản: Hoạt hình UI không tuân theo các quy tắc tương tự cũng như không có các nguyên tắc giống như các cơ thể hữu cơ di chuyển trong không gian vật lý. UI hoạt hình là một phương tiện riêng biệt, khác biệt như nhiếp ảnh là từ hội họa - với các đặc điểm chồng chéo (cả nhiếp ảnh và hội họa là các tác phẩm trực quan tĩnh dựa vào ánh sáng và bố cục) nhưng về cơ bản là các phương tiện khác nhau.

Nói một cách đơn giản, 12 nguyên tắc hoạt hình cơ bản không áp dụng cho hoạt hình UI vì chúng đang giải quyết cho một vấn đề khác.

Trong một số bài viết tiếp theo, tôi sẽ tìm hiểu nguyên tắc hoạt hình UI này là gì, nguyên tắc hoạt hình UI giải quyết vấn đề gì, nguyên tắc khác với kỹ thuật như thế nào và cách bạn có thể thiết kế và sử dụng hoạt hình UI trong các dự án hiện tại và tương lai của mình để tác động đến khả năng sử dụng và tạo ra nhiều trải nghiệm người dùng hấp dẫn và hiệu quả.