it-swarm-vi.com

Làm thế nào và khi nào bạn nên sử dụng hình ảnh động trong ứng dụng của bạn?

Đôi khi các ứng dụng có thể được hưởng lợi từ hình ảnh động trong UI.

  • Bạn có mẹo gì để xác định khi nào bạn nên sử dụng hoạt hình?
  • Làm thế nào bạn có thể tối đa hóa tính hữu ích của hình ảnh động và tránh lạm dụng?
12
Dair

Nghĩ nhân quả. Nếu tôi di chuột qua một nút, tôi muốn phản hồi của một số loại. Nếu tôi có thể kéo một cái gì đó, chỉ ra rằng bằng cách nào đó. Nếu có một cảnh báo hoặc thông báo, vô tình thu hút sự chú ý của tôi vào nó. Ngoài ra, trừ khi bạn có một lý do rất cụ thể cho hoạt hình, đừng sử dụng một lý do. Cố gắng tránh bất cứ điều gì có thể gây phiền nhiễu nếu nó tiếp tục. Nếu hình ảnh động không quan trọng và nó làm mất tập trung vào mục đích chính của trang, hãy loại bỏ nó.

6
Virtuosi Media

Một số vị trí nơi hoạt hình có thể phù hợp:

  • Thu nhỏ bảng điều khiển đến một vị trí cụ thể - hoạt hình giúp dạy cho người dùng nơi bảng điều khiển được thu nhỏ đã đi và cách khôi phục bảng.
  • Tự động ẩn nội dung, ví dụ: thanh điều hướng - hoạt hình thu hút sự chú ý của người dùng rằng thứ gì đó vừa biến mất và nơi có thể lấy ra từ đó.
  • Cập nhật một khu vực không ngay lập tức gần khu vực đã xảy ra thay đổi. Ví dụ: chỉnh sửa dữ liệu trong danh sách/lưới thay đổi biểu thị trực quan của dữ liệu đó trong bảng khác.

Hoạt hình (thay đổi/chuyển động) gây chú ý hơn hầu hết những thứ khác, vì vậy thật tuyệt khi bạn muốn thu hút sự chú ý vào một hành động có thể khiến người dùng chú ý.

Tuy nhiên, ngay cả đối với các mục ở trên, có thể đáng để thực hiện chỉ trong vài lần đầu tiên - vì mắt tự động bị hút vào nó, nó có tác dụng như một sự xao lãng và do đó nên tránh sau khi "hướng dẫn" ban đầu được hoàn thành .

6
Dan Barak

Bạn phải luôn luôn có một số loại hoạt hình bận rộn/hoạt động để giữ cho người dùng của bạn nghĩ rằng ứng dụng đã ngừng hoạt động (đặc biệt quan trọng đối với các ứng dụng ajax).

Chuyển đổi nhanh đơn giản là ổn nếu chúng thêm vào trải nghiệm người dùng tổng thể, nhưng đừng đặt quá nhiều.

Bạn đã bao giờ sử dụng một ứng dụng mà bạn nghĩ rằng "Tôi ước nhà phát triển sẽ dành nhiều thời gian để lên kế hoạch cho các tính năng thực tế như anh ấy đã lên kế hoạch cho các hiệu ứng UI tuyệt vời"? Hãy ghi nhớ điều này khi bạn thêm hình ảnh động.

4
Sruly

Câu hỏi hay . Như thường lệ, nó phụ thuộc vào ứng dụng (các trò chơi có lẽ nên sử dụng hoạt hình UI nhiều hơn so với các ứng dụng năng suất chẳng hạn), nhưng có một số nguyên tắc chung.

Quay lại khi iThings mới và hấp dẫn, mọi thứ đều phải hoạt hình, nhưng thật thú vị khi nhìn vào VS2010 và Office 2010 và xem bao nhiêu là không hoạt hình. Cụ thể, trong cuộn qua di chuyển/nút di chuyển trong Office 2010 (trong khi Office 2007 đã làm). IMO, nó cảm thấy phản ứng nhanh hơn. Menu vẫn mờ dần trong/ngoài (mặc dù đáng chú ý là các menu mất khoảng gấp đôi thời gian để làm mờ out khi chúng làm mờ dần in, có thể làm tăng cảm nhận đáp ứng).

Nói chung, hoạt hình nên được sử dụng khi các thành phần của giao diện người dùng di chuyển xung quanh mà không cần người dùng kéo/cuộn chúng một cách rõ ràng . Nếu người dùng đang kéo một biểu tượng vào vị trí, hãy "di chuyển" các biểu tượng khác theo cách truyền tải các hiệu ứng của hành động người dùng (mặc dù đôi khi một dòng điểm chèn là đủ). "Thanh thông tin" trên IE/Firefox đẩy các công cụ khác xuống dưới để giảm sự tăng vọt và thu hút sự chú ý của người dùng. Menu Accordion và cây đã kiểm tra tốt hơn với hình ảnh động vì người dùng thấy các yếu tố khác đi đâu.

Tôi đã thấy một nghiên cứu một lần cho thấy rằng người dùng ở mọi cấp độ ít có xu hướng tương tác với một yếu tố UI đang hoạt hình (nếu tôi tìm thấy liên kết tôi sẽ cập nhật điều này). Vì vậy, nếu bạn bật một nút lên hơn 2 giây khi người dùng di chuyển qua nút đó, ngay cả khi nút đó sẽ hoạt động trong khi hoạt hình, người dùng sẽ vô thức chờ hoạt hình kết thúc. Để cảm nhận điều này, hãy xem mẫu Chủ đề WPF . Một số chủ đề có hoạt ảnh di chuột dài hơn các chủ đề khác và bạn có thể xác định ngay lập tức những chủ đề nào cảm thấy chậm chạp. Các hiệu ứng mờ dần cũng có thể góp phần khiến người dùng nói rằng Vista cảm thấy chậm - trên Win7, tất cả các hình động đều giống nhau (vì vậy nó cũng chậm như trên bộ xử lý/card đồ họa), nhưng nhiều cái thì ngắn hơn.

OTOH, google.com mới có những thứ mờ dần và tìm kiếm hình ảnh google hiện có hộp đèn. Vì vậy, xu hướng đang đi cả hai chiều.

3
Robert Fraser

Tóm lại, hoạt hình có hai tác động mạnh đến não mà bạn có thể sử dụng:

  • Giảm tải nhận thức: Chúng cho phép người dùng xem điều gì đã xảy ra giữa hai trạng thái, do đó, bộ não không phải "lấp đầy khoảng trống". Điều này làm cho người dùng cảm thấy mọi thứ rõ ràng và dễ sử dụng hơn -> Sử dụng rộng rãi các hình ảnh động để chuyển tiếp (cf Apple)

  • Thu hút sự chú ý của người dùng: Con người thực sự tốt để phát hiện chuyển động tại một địa điểm mà họ không trực tiếp nhìn vào. Điều này được thực hiện nhờ các tế bào que của chúng tôi , các tế bào được sử dụng để phát hiện chuyển động, thực sự dày đặc ở các cạnh ngoài của võng mạc (phải có liên quan đến sự sống sót trong môi trường thù địch) -> Sử dụng hình ảnh động nếu điều gì đó thực sự quan trọng xảy ra ở một địa điểm xa.

Hiệu ứng này rất mạnh vì chúng được kết nối trực tiếp với não bò sát của chúng ta. Mạnh mẽ và nguy hiểm cùng một lúc.

3
user396

Khi tạo hình động cho ứng dụng web/ứng dụng gốc, tôi luôn sử dụng phương pháp github, gần như "đánh lạc hướng người dùng" trong nửa giây, trong khi nội dung đang tải. Tìm những phần chậm nhất của ứng dụng (đặc biệt là những phần mà bạn Nhấn nút và trong nửa giây, có vẻ như không có gì xảy ra, và tìm cách nào đó để làm hoạt hình, điều này là để giảm thiểu sự thất vọng cho người dùng (" Tôi đã nhấn nút nhưng không có gì xảy ra "), xin lưu ý rằng tôi không có nghĩa là một bánh xe tải đang quay hoặc một loại hoạt hình tải nào đó, ý tôi là giống như một hoạt hình trượt hoặc một cái gì đó tương tự, để tạo ra ảo ảnh của một cú trượt , UI nhanh, (xem: https://github.com/github/linguist bất cứ khi nào bạn nhấp vào một cái gì đó có hoạt hình slide này làm cho github có vẻ siêu nhanh và mượt mà), xin lưu ý đừng lạm dụng cái này (sử dụng kỹ thuật này trên các phần của ứng dụng của bạn mất> 500 ms) Tôi cảm thấy như 500 ms, là con số kỳ diệu, nhưng hãy thử nghiệm và tìm ra ứng dụng của bạn.

2
David

Bạn phải hỏi: hoạt hình này có giúp người dùng biết được chuyện gì đang xảy ra không? Tôi đã tắt hiệu ứng thần tài của OS X ngay lập tức, nhưng tôi đánh giá cao hoạt hình thu nhỏ/khôi phục đơn giản vì nó nhanh và cung cấp thêm manh mối cho những gì vừa xảy ra. Tương tự như vậy với Spaces/phơi bày. Hoặc có thể đó là một quá trình mờ dần ngắn, đơn giản, mềm mại làm cho một cái gì đó dường như ít đột ngột hơn và giống con người hơn.

Sau đó, một lần nữa, một chút tinh tế có thể là thương hiệu của bạn, như 'Lucas lau' từ Chiến tranh giữa các vì sao.

2
John Ferguson

Hoạt hình có một mục đích, và mục đích đó là hình dung những thay đổi về trạng thái.

Sẽ dễ dàng hơn khi bạn nghĩ về hoạt hình khai báo, chẳng hạn như loại hiện diện trong CSS hiện đại được đưa ra bởi webkit. Trong ngữ cảnh này, bạn chỉ định cách các phần tử trông ở một trạng thái nhất định và sau đó cho CSS biết chúng trông như thế nào ở trạng thái khác. Làm thế nào để bạn chỉ định nhà nước? Với các quy tắc CSS, chẳng hạn như tên lớp và id. Vì vậy, ví dụ (và tha thứ cho tôi vì đã sử dụng mã ở đây!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Những gì chúng tôi mô tả ở đây là một hộp mở ra và chúng tôi đang nói cho mã biết cách làm động giữa hai quy tắc CSS. Điều này làm cho chúng phát biểu và khi bạn nhận ra rằng, áp dụng hình ảnh động cho ứng dụng của bạn đột nhiên trở nên hợp lý hơn nhiều. Thay vì suy nghĩ về những gì hoạt hình đi đến đâu, bạn đang xem hoạt hình như một sản phẩm phụ của những thay đổi trạng thái; một chỉ báo cho thấy điều gì đó đã xảy ra hoặc phản hồi cho người dùng rằng một sự thay đổi đang diễn ra.

Khi tôi học cách phân biệt giữa "hoạt hình" thuần túy (từ quan điểm lập trình) và "thay đổi trạng thái" (từ quan điểm khai báo), nó làm cho tất cả các thiết kế UI của tôi vững chắc và logic hơn nhiều.

1
Rahul