Infographics: các loại, ví dụ về công việc, tương lai. Đồ họa thông tin tương tác với hoạt ảnh SVG và CSS
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách xây dựng đồ họa thông tin tương tác bằng SVG, CSS và JavaScript. Một trong những chủ đề ít được thảo luận là xu hướng các trình duyệt mới tăng cường hỗ trợ cho các tệp SVG. Không giống như các hình ảnh raster như PNG, JPG hoặc GIF, đồ họa vector trong tệp SVG hoàn toàn có thể mở rộng theo mọi kích thước và sẽ hiển thị ở bất kỳ độ phân giải hoặc mật độ màn hình nào mà không làm giảm chất lượng. Trong nhiều trường hợp, tệp SVG có kích thước nhỏ hơn nhiều và tải nhanh hơn. Nhưng điều thú vị mà một số nhà phát triển không nhận ra là SVG dựa trên đặc tả XML và có thể được áp dụng theo cách tương tự như HTML.
Điều này cũng có nghĩa là chúng ta có thể truy cập và thao tác đồ họa cũng như các thành phần trong tệp SVG bằng công nghệ CSS và JavaScript mà các nhà phát triển web đã quen thuộc. Các nhà phát triển hiện có thể tạo một số hoạt ảnh và hiệu ứng khá ấn tượng bằng SVG. Hôm nay chúng ta sẽ khám phá sức mạnh của SVG bằng cách tạo đồ họa thông tin dạng vector tương tác cho web. Bạn có thể xem bản demo hoặc tải mã nguồn bằng cách nhấp vào các liên kết bên dưới hình ảnh bên dưới. Bắt đầu nào.
Đang chuẩn bị tệp SVG
Có nhiều cách để tạo đồ họa SVG. Mặc dù có thể tạo SVG bằng cách mã hóa thủ công, nhưng chúng tôi muốn đồ họa phức tạp hơn có một số loại phần mềm vectơ có thể xuất ở định dạng SVG. Một lựa chọn phổ biến của hầu hết các nhà thiết kế có thể là lựa chọn quen thuộc Adobe Illustrator, nhưng có những ứng dụng có sẵn công khai khác, chẳng hạn như Inkscape, có thể phù hợp hơn cho mục đích của chúng tôi.
Bất kể bạn chọn phần mềm nào, khả năng nhóm các đối tượng lại với nhau và có thể đặt tên cho các nhóm đó (bằng cách viết thuộc tính id) vẫn rất cần thiết. Điều này cho phép chúng tôi tổ chức SVG của mình thành một hệ thống phân cấp phù hợp mà sau này chúng tôi có thể truy cập bằng CSS và/hoặc JavaScript. Illustrator và Inkscape có khả năng thực hiện việc này bằng cách chọn nhiều thành phần đồ họa bằng cách đi tới Đối tượng > Nhóm (hoặc Ungroup - rã nhóm) từ menu chính.
Sau đó, bất kỳ đối tượng hoặc nhóm nào cũng có thể được gán tên, tên này sẽ trở thành thuộc tính id của nhóm hoặc đối tượng khi xuất, vì vậy hãy tránh khoảng trắng, ký tự đặc biệt và trùng lặp.
Trong Illustrator, điều này có thể được thực hiện trong bảng Layers ( các lớp). Chỉ cần tìm đối tượng bạn muốn đặt tên trong bảng điều khiển, nhấp đúp vào trường lớp và nhập id mong muốn. Trong Inkscape sử dụng Đối tượng > Thuộc tính đối tượng bảng để gán id cho một đối tượng hoặc nhóm. Điều này cũng có thể được thực hiện với Chỉnh sửa > Trình soạn thảo XML bảng điều khiển nơi bạn có thể đăng ký không chỉ id mà còn cả các lớp.
Trong ví dụ của chúng tôi, khi chúng tôi lưu tệp SVG và mở nó trong trình soạn thảo văn bản, nó sẽ có cấu trúc sau:
Đánh dấu ở trên cho chúng ta thấy cấu trúc mà chúng ta đang hướng tới.
Như chúng ta có thể thấy trong phần đánh dấu SVG, mỗi thẻ
Đang tải SVG sang HTML bằng JAVASCRIPT
HTML
Có nhiều cách để đưa hoặc đặt SVG trong HTML. Điều này có thể thực hiện được thông qua việc sử dụng thẻ , nhãn
Đầu tiên, hãy tạo một div trong tài liệu HTML:
JavaScript
Bây giờ, bằng cách sử dụng tính năng tải jQuery, chúng ta sẽ tải tệp SVG vào khối #stage và gán cho nó lớp svgLoaded mà chúng ta sẽ sử dụng để kích hoạt hoạt ảnh:
$(function () ( $("#stage" ) .load ("interactive.svg" ,function (response) ( $(this ) .addClass ("svgLoaded" ) ; if // Hãy chắc chắn rằng bạn đang chạy cái này trên máy chủ web hoặc localhost! } } ) ; } ) ;
Quan trọng: Chúng tôi tải SVG bằng JavaScript để truy cập DOM của nó. Chrome (và có thể cả các trình duyệt khác) sẽ không cho phép bạn thực hiện việc này cục bộ; điều này sẽ chỉ hoạt động khi chạy với giao thức HTTP vì lý do bảo mật.
CSS
Xin lưu ý rằng CSS trong hướng dẫn này sẽ không chứa bất kỳ thông số kỹ thuật nào của trình duyệt nhưng các tệp sẽ có.
Trước hết, chúng ta chỉ định một số kiểu cho khối div. Khi tải SVG, tệp phải vừa với kích thước khối, vì vậy điều quan trọng là phải đặt kích thước khối phù hợp với kích thước canvas SVG.
#stage (chiều rộng: 1024px; chiều cao: 1386px;)
Tạo kiểu cho các phần tử SVG: Đặt "nguồn gốc biến đổi"
Chìa khóa để làm sống động các phần tử trong khung vẽ nằm ở thuộc tính nguồn gốc biến đổi. Theo mặc định, tất cả các phép biến đổi đối với bất kỳ phần tử nào trong SVG đều đến từ khung vẽ SVG (0px, 0px). Đối với bất kỳ phần tử nào mà chúng ta muốn chuyển đổi (ví dụ: chia tỷ lệ, xoay), chúng ta cần đặt điểm gốc biến đổi phù hợp tương ứng với phía bên trái và trên cùng của khung vẽ SVG. Nguồn sẽ khác nhau đối với mỗi phần tử tùy thuộc vào hiệu ứng/hoạt ảnh mong muốn, nhưng trong hầu hết các trường hợp sẽ bằng điểm trung tâm nơi phần tử đã được đặt. Điều này có thể khá tẻ nhạt, nhưng sẽ dễ dàng hơn khi sao chép thông tin tọa độ được cung cấp trong trình soạn thảo vectơ của chúng tôi.
#coffee ( Transform-origin: 517px 484px ; ) #coffee-badge ( Transform-origin: 445px 488px ; ) #coffee-title ( Transform-origin: 310px 396px ; ) #coffee-details ( Transform-origin: 311px 489px ; ) #design ( Transform-origin: 514px 603px ; ) #design-badge ( Transform-origin: 580px 606px ; ) #design-title ( Transform-origin: 712px 513px ; ) #design-details ( Transform-origin: 710px 620px ; ) #build ( Transform-origin: 511px 769px ; ) #build-badge ( Transform-origin: 445px 775px ; ) #build-title ( Transform-origin: 312px 680px ; ) #build-details ( Transform-origin: 310px 790px ; ) #complain ( Transform-origin: 512px 1002px ; ) #complain-badge ( Transform-origin: 586px 1000px ; ) #complain-title ( Transform-origin: 718px 921px ; ) #complain-details ( Transform-origin: 717px 1021px ; ) #bia ( Transform-origin: 513px 1199px ; ) #beer-badge ( Transform-origin: 444px 1193px ; ) #beer-title ( Transform-origin: 313px 1097px ; ) ) #beer-details ( Transform-origin: 316px 1202px ; )
Áp dụng một số phép biến đổi ban đầu
Chúng ta cần đặt kiểu ban đầu để thay đổi vị trí của một số đối tượng. Chúng ta cũng cần ẩn một số đối tượng nhất định mà chúng ta không muốn hiển thị cho đến khi di chuột qua chúng.
Để làm điều này, chúng tôi sẽ sử dụng bộ chọn CSS. Chúng tôi chủ yếu chọn các đối tượng có “hậu tố” id.
[ id$=huy hiệu] ( /* Bất kỳ phần tử nào có id kết thúc bằng "huy hiệu" */ biến đổi: tỷ lệ (0 . 5 , 0 .5 ) ; ) [ id$=title] ( biến đổi: tỉ lệ(1 . 8 ) dịch(0px , 48px ) ; ) [ id$=details] ( biến đổi: tỉ lệ(0 , 0 ) ; )
Thêm kiểu cho :hover và áp dụng chuyển tiếp
Chúng tôi chọn các phần tử bên trong nhóm được di chuột và đưa chúng trở lại vị trí ban đầu. Sau đó, chúng tôi thiết lập quá trình chuyển đổi 0,25 giây để có hiệu ứng hoạt hình thú vị.
#timeline > g:hover [ id$=badge] , #timeline > g:hover [ id$=details] ( biến đổi: tỉ lệ(1 , 1 ) ; ) #timeline > g:hover [ id$=title] ( biến đổi : tỉ lệ(1 ) dịch(0px , 0px ) ; ) [ id$=badge] , [ id$=title] , [ id$=details] ( transition: biến đổi 0 .25s dễ dàng vào ra; )
Giới thiệu về Hoạt hình
Chúng tôi sử dụng hoạt ảnh CSS. Đầu tiên, chúng ta cần tạo một vài khung hình chính để tạo hiệu ứng cho một số thuộc tính CSS khác nhau:
@keyframes nẹp trái-intro ( 0 % ( biến đổi: TranslateX(220px ) ; độ mờ: 0 ; ) 50 % ( độ mờ: 1 ; biến đổi: dịchX(220px ) ; ) 100 % ( biến đổi: dịchX(0px ) ; ) ) @keyframes nẹp phải-intro ( 0 % ( biến đổi: TranslateX(-220px ) ; độ mờ: 0 ; ) 50 % ( độ mờ: 1 ; biến đổi: dịchX(-220px ) ; ) 100 % ( biến đổi: TranslateX(0px ) ; ) ) @keyframes mờ dần ( 0 % (độ mờ: 0; ) 100 % ( độ mờ: 1 ; ) ) @keyframes Grow-y ( 0 % ( biến đổi: tỉ lệY(0 ) ; ) 100 % ( biến đổi:scaleY(1 ) ; ) ) @keyframes Grow-x ( 0 % ( biến đổi:scaleX(0 ) ; ) 100 % ( biến đổi:scaleX(1 ) ; ) ) @keyframes phát triển ( 0 % ( biến đổi: tỉ lệ(0 , 0 ) ; ) 100 % ( biến đổi: tỉ lệ(1 , 1 ) ; ) )
Tạo chuỗi hoạt ảnh
Chúng ta có thể sử dụng bộ chọn dựa trên lớp svgLoaded mà chúng ta đã sử dụng trước đó.
Để đặt chuỗi hoạt ảnh, chúng tôi sẽ đặt thuộc tính animation-delay và đặt animation-fill-mode: ngược để hoạt ảnh sẽ có các khoảng dừng.
SvgLoaded #logo ( hoạt ảnh: fade-in 0 .5s easy-in-out; ) .svgLoaded #quote-text ( animation: fade-in 0 .5s easy-in-out 0 .75s ; animation-fill-mode: back ; ) .svgLoaded #quote-left-brace ( animation: left-brace-intro 1s easy-in-out 0 .25s ; animation-fill-mode: backs; ) .svgLoaded #quote-right-brace ( animation: right- cú đúp-intro 1s dễ dàng ra vào 0 ,25s ; chế độ điền hoạt ảnh: ngược; ) .svgLoaded #background ( hoạt hình: Grow-y 0 .5s dễ dàng ra vào 1 ,25s ; nguồn gốc biến đổi: 512px 300px ; chế độ điền hoạt ảnh: ngược; ) .svgLoaded #background > g ( hoạt hình: Grow-x 0 .25s dễ dàng ra vào 1 .75s ; chế độ điền hoạt ảnh: lùi; ) .svgLoaded #background > g: loại cuối cùng ( Transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( Transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design , .svgLoaded #build , .svgLoaded #complain , .svgLoaded #beer ( animation: tăng 0,25 giây dễ dàng ra vào; chế độ điền hoạt ảnh: ngược; ) .svgLoaded #coffee ( animation-delay: 2s; ) .svgLoaded #design ( animation-delay: 2 .25s ; ) .svgLoaded #build ( animation-delay: 2 .5s ; ) .svgLoaded #complain ( animation-delay: 2 ,75 giây ; ) .svgLoaded #beer ( animation-delay: 3s; )
Phông chữ TRANG WEB
Vì chúng tôi đã sử dụng phông chữ tùy chỉnh trong tệp SVG của mình nên chúng tôi cũng cần đưa chúng vào trang web của mình. Điều quan trọng là phải chỉ định chính xác tên phông chữ được sử dụng khi xuất SVG. Chúng tôi mở tệp SVG trong trình soạn thảo văn bản và chỉ cần tìm văn bản có phông chữ được sử dụng và xem thuộc tính font-family:
Như chúng ta có thể thấy, tệp SVG đã được xuất bằng phông chữ họ phông chữ có tên 'Giải đấuGothic'. Vì vậy, chúng ta chỉ cần xác định phông chữ web trong CSS bằng cùng một tên.
@font-face ( font-family : "LeagueGothic" ; url ( "../fonts/league-gothic/league-gothic.eot.woff") định dạng("woff" ); )
Đây là tất cả! Chúng tôi hy vọng bạn thích hướng dẫn này và thấy nó hữu ích và mang tính thông tin. Chúng tôi rất muốn nghe ý kiến của bạn.
Dịch thuật - Phòng trực.
Bạn có thể đã nhận thấy sự thay đổi lớn trong thế giới trực tuyến từ nội dung dựa trên văn bản sang nội dung trực quan.
Không thể phủ nhận sức mạnh của hình ảnh trên Internet và trong cuộc sống hàng ngày của chúng ta. YouTube và Instagram bị chi phối bởi nội dung trực quan; YouTube là trang web được truy cập nhiều thứ 3 trên web và Instagram có hơn 80 triệu bức ảnh được đăng mỗi ngày.
Các bài đăng và bài viết trên blog có khả năng được xem cao hơn 80% nếu chúng có hình ảnh màu, tiêu đề hoặc hình thu nhỏ và mọi người sẽ dành không quá 15 giây trên một trang web nếu nó không thu hút sự chú ý của họ ngay lập tức.
Đồ họa thông tin là một nội dung được khán giả và nhà bán lẻ yêu thích và ngày nay thú vị hơn 800% đối với mọi người so với năm 2012.
Trên hết, nội dung đang được tạo ra ở mức đáng báo động - 60% nhà tiếp thị tạo ra ít nhất một lượng nhỏ nội dung mới mỗi ngày! Bạn có thể tìm hiểu thêm từ bài viết đánh giá.
Khi ngày càng có nhiều người bắt đầu tạo nội dung, một điều trở nên rõ ràng: để được mọi người nhìn thấy, bạn cần phải nổi bật.
Đương nhiên, các nhà tiếp thị nội dung đã suy nghĩ về tương lai của nội dung trực quan, xem xét những gì họ có thể làm bây giờ, những gì họ có thể triển khai và những công nghệ mới sắp ra mắt. Kiểu tư duy cầu tiến này có thể tạo nên hoặc phá vỡ nỗ lực tiếp thị nội dung của bạn; bạn phải thích nghi nếu không bạn sẽ chết đuối.
Với nội dung trực quan như đồ họa thông tin, các nhà tiếp thị có cơ hội duy nhất để nhìn thấy tương lai khi nó đến gần. Các công ty, nhà thiết kế đồ họa và nhà tiếp thị đều bắt đầu sử dụng đồ họa thông tin và cập nhật chúng để khiến chúng trở nên hấp dẫn hơn đối với khán giả. Ngay cả khi bạn “chỉ đăng” đồ họa thông tin thường xuyên, không bao giờ là quá sớm để tìm hiểu về các xu hướng mới bắt đầu phát triển, cũng như không bao giờ là quá sớm để học cách triển khai chúng vào chiến lược tiếp thị nội dung của bạn.
Nếu bạn muốn nhìn vào tương lai và thậm chí có thể học một vài thủ thuật trước những người khác thì bây giờ là lúc!
Dưới đây là ba loại đồ họa thông tin sẽ phổ biến nhất trong tương lai (gần).
Nếu bạn đang tìm kiếm một công cụ tạo đồ họa thông tin thú vị, tôi khuyên bạn nên thử Visme. Để bắt đầu, họ cung cấp một tài khoản miễn phí và các tính năng tuyệt vời thân thiện với người dùng cho những người không phải là nhà thiết kế. Bạn có thể có được một tài khoản miễn phí ngay bây giờ.
1. Đồ họa thông tin tương tác
Mặc dù chúng ta đã thấy vẻ đẹp của các trang web tương tác và các trò chơi dễ sử dụng, nhưng đồ họa thông tin tương tác vẫn còn khá mới trong lĩnh vực của chúng. Giống như đồ họa thông tin, rõ ràng chúng chứa một số thông tin và chúng thường rất năng động. Nhưng việc sử dụng các yếu tố tương tác mang lại cho người dùng cơ hội kết nối với thông tin và tạo ra thông tin của riêng họ.
Bất kể doanh nghiệp, sản phẩm, dịch vụ hay thông điệp của bạn là gì, bạn đều có thể tạo đồ họa thông tin tương tác cho phép mọi người tự đánh giá (ví dụ: “tính chỉ số BMI của bạn tại đây”). Người dùng cũng có thể nhấp vào thông tin liên quan để đưa họ đến nguồn tài nguyên chuyên sâu hơn hoặc quay lại trang đích, từ đó tạo ra lưu lượng truy cập. Đó là một cách rất thích ứng và thú vị để thu hút khán giả của bạn.
Nhiều nhà tiếp thị đã thích nghi với loại đồ họa thông tin này và nó chuyển giao nhanh chóng. Nhưng đồng thời, nhiều người vẫn lấy làm cơ sở đồ họa thông tin đơn giản:
….hãy tưởng tượng xem bạn có thể làm gì khác với đồ họa thông tin tương tác.
Bạn co thể thử:
- Sử dụng kỹ thuật cuộn làm cho hình ảnh hoặc hình dạng nổi bật so với nền
- Xây dựng “cửa sổ bật lên” mở rộng vùng văn bản
- Hình ảnh hoặc số liệu thống kê bật lên khi bạn nhấp vào chúng
- Biến đồ họa thông tin của bạn thành nhiều trang mà người dùng có thể xem
Để có ví dụ chi tiết hơn về đồ họa thông tin tương tác, hãy xem ví dụ này:
Để tạo một đồ họa thông tin có tính tương tác cao (với thao tác cuộn, cửa sổ bật lên, v.v.), bạn cần tìm hiểu một chút về HTML5 hoặc CSS hoặc thuê người khác tìm hiểu giúp bạn.
Mặc dù phải nỗ lực nhiều hơn nhưng bạn sẽ được thưởng một phần nội dung độc đáo, hấp dẫn và hiệu quả.
Tại sao bạn nên thử triển khai đồ họa thông tin trong thời gian sắp tới?
- Điều này khuyến khích khán giả tương tác và chia sẻ nội dung của bạn.
- Điều này tạo ra lưu lượng truy cập (thông qua liên kết)
- Điều này chứng tỏ cho khán giả thấy rằng bạn là người sáng tạo, tháo vát và có ý định cung cấp nội dung kịp thời và thú vị.
- Có nhiều lớp đồ họa thông tin tương tác giúp quản lý quá trình phát triển của nó
2. Video và GIF nhúng
Đây là một loại đồ họa thông tin khác mà chúng ta đang thấy ngày càng thường xuyên hơn. Đồ họa thông tin cung cấp các video ngắn hoặc thậm chí là ảnh GIF (Định dạng trao đổi đồ họa) là một cách tuyệt vời để thu hút sự chú ý và làm cho đồ họa thông tin của bạn nổi bật giữa đám đông. Mặc dù điều này bị giới hạn bởi các nền tảng, nhưng bạn có thể chia sẻ đồ họa thông tin của mình ở thì hiện tại.
Nhiều công cụ đồ họa thông tin đơn giản, chẳng hạn như Easel.ly, cung cấp tùy chọn “Video YouTube được nhúng” hoặc bạn có thể thêm video vào đồ họa thông tin mà bạn tạo trong Photoshop bằng cách sử dụng lớp video. Bạn thậm chí có thể thêm video vào trang chiếu Powerpoint để chuyển thành đồ họa thông tin.
Hơn nữa, bạn có thể tìm thấy hàng triệu ảnh GIF trực tuyến và chèn chúng theo cách tương tự. Điều hấp dẫn ở đây là bạn sẽ phải phân phối đồ họa thông tin của mình dưới dạng URL để đảm bảo rằng nó được nhúng đúng cách vào trang web của bạn. Bạn không được phân phối hoặc lưu các đồ họa thông tin như vậy ở định dạng .jpeg hoặc PDF. Không còn nghi ngờ gì nữa, khi điều này trở nên phổ biến hơn, sẽ có các công cụ chèn video và GIF khác để giúp quá trình này trở nên dễ dàng hơn.
Nhưng nếu bạn muốn sử dụng loại đồ họa thông tin này trước khi mọi người xung quanh bạn, thậm chí cả những chú chó của họ, học cách làm điều đó, hãy bắt đầu ngay bây giờ với các công cụ bạn tìm thấy trên mạng.
Nếu bạn muốn nâng nó lên một tầm cao mới, bạn có thể tạo một video từ đồ họa thông tin mà bạn đã có. Đây là cơ hội tuyệt vời để bạn được nhìn thấy trên YouTube, Instagram và thậm chí cả các nền tảng video như Vimeo, Snapchat và các nền tảng khác. Video dưới đây là một ví dụ tuyệt vời về cách biến đồ họa thông tin thành video.
Tại sao nên nhúng video hoặc GIF vào đồ họa thông tin?
- Điều này mang đến cho bạn yếu tố bất ngờ - mọi người không mong đợi bức ảnh sẽ chuyển động!
- Nó rất thú vị và độc đáo, giúp tăng cơ hội mọi người tương tác và chia sẻ đồ họa thông tin của bạn.
- Đây là một cách hay để cho mọi người thấy sự độc đáo của thương hiệu của bạn.
3. Infographic hoạt hình
Infographic hoạt hình có số lượng lớn các mẫu hình ảnh trực quan và đòi hỏi nhiều sự chú ý. Khi người dùng xem một trang, họ thường không mong đợi bất cứ điều gì sẽ di chuyển, vì vậy sẽ là một ý tưởng hay nếu bạn tìm hiểu tất cả các kỹ thuật này trước khi những người khác làm.
Bởi vì nhiều đồ họa thông tin hoạt hình khá phức tạp và có thể yêu cầu một số loại kiến thức về thiết kế đồ họa, mã hóa và/hoặc phần mềm nên chúng được đánh giá cao.
Đây là một ví dụ về những gì tôi đang nói đến:
Nếu bạn muốn tìm hiểu thêm về cách tạo đồ họa thông tin hoạt hình, hãy xem đồ họa thông tin này từ Tabletop Whale. Bạn cũng có thể tìm thấy nhiều dịch vụ khác nhau giúp bạn tạo đồ họa thông tin kiểu này. Trong mọi trường hợp, đây là một trong những quá trình khó khăn nhất trong quá trình phát triển đồ họa thông tin.
Tại sao bạn nên đầu tư thời gian, sức lực và/hoặc tiền bạc của mình vào việc tạo đồ họa thông tin hoạt hình?
- Điều này thực sự sẽ khiến bạn nổi bật giữa đám đông vì không phải ai cũng có quyền truy cập vào loại phần mềm hoặc nội dung này
- Chỉ trong vài năm nữa, điều này sẽ trở nên phổ biến - bạn sẽ là một trong những người đầu tiên làm điều đó!
- Hoạt hình sẽ làm cho thông tin bên trong đồ họa thông tin trở nên đáng nhớ hơn
- Điều này sẽ truyền cảm hứng cho người dùng làm việc với bạn.
Đây không phải là khoa học viễn tưởng.
Điều này nghe có vẻ quá kỹ thuật và vượt quá khả năng của bạn lúc này, nhưng có khả năng những loại đồ họa thông tin này sẽ trở nên rất phổ biến sau 2-3 năm nữa. Chúng ta có thể thấy sự đột phá mạnh mẽ trong đồ họa thông tin hoạt hình và GIF, đặc biệt là khi GIF tiếp tục phát triển phổ biến. Infographics đang trở thành một trong những loại nội dung được tiêu thụ nhiều nhất và được tạo ra thường xuyên nhất trên Internet. Tại sao? Có, bởi vì não chỉ cần 250 mili giây để tiếp nhận và xử lý ý nghĩa của một biểu tượng.
Nếu một người bình thường dành khoảng 15 giây trên một trang web và sau đó bắt đầu cảm thấy nhàm chán, thì theo lẽ tự nhiên, bạn muốn kéo lên bất cứ thứ gì trên màn hình có thể cản trở họ - hoặc ít nhất là nhận được tin nhắn sau 15 giây hoặc ít hơn. Một số nghiên cứu thậm chí còn chứng minh rằng mọi người có thể tập trung vào thứ gì đó không quá 8 giây và con số này đang giảm dần hàng năm.
Đây là lý do và có lẽ là sản phẩm phụ của nhu cầu tiếp nhận thông tin liên tục của chúng ta. Chúng ta đang sống trong thời đại thông tin và mọi thông tin đều có sẵn cho chúng ta. Nhưng điều này cũng có nghĩa là càng nhiều người cố gắng chia sẻ thông điệp và trả lời mọi câu hỏi có thể thì càng có nhiều nội dung được tạo ra trở thành tiếng ồn xung quanh.
Nếu sự sẵn có của đồ họa thông tin ngày nay là dấu hiệu cho thấy chúng sẽ sớm có mặt ở khắp mọi nơi. Điều này có nghĩa là những thay đổi mới trong công việc của bạn. Không có chiến dịch tiếp thị nào trong lịch sử đạt được thành công bằng cách làm đi làm lại cùng một việc.
Ý tưởng ở đây là xem đồ họa thông tin không chỉ là một hình ảnh jpeg. Infographics có thể được điều chỉnh cho phù hợp với các phương tiện khác nhau và được sử dụng trên nhiều nền tảng khác nhau. Các doanh nhân và nhà tiếp thị đã nhìn thấy tiềm năng trong việc này. Và bạn?
Tương lai của trực quan hóa dữ liệu là tương tác.
Nhưng làm thế nào để bạn tạo ra những đồ họa thông tin tương tác thực sự tuyệt vời?
Infographics có ở khắp mọi nơi và gần đây chúng ngày càng có tính tương tác cao.
Trong bài viết hôm nay, chúng tôi sẽ chia sẻ với bạn những bí quyết tạo đồ họa thông tin tương tác, cũng như liên kết đến các tài nguyên hữu ích.
1. Hiểu tâm lý
Trước khi bạn tạo một đồ họa thông tin mang tính tương tác, điều quan trọng là phải hiểu lý do tại sao bạn muốn làm cho nó có tính tương tác.
Như chi tiết trong đồ họa thông tin này, mọi người cảm nhận thông tin trực quan tốt hơn. Chúng ta có nhiều khả năng đọc, hiểu và ghi nhớ bài thuyết trình hơn nếu nó có hình ảnh hấp dẫn. là một công cụ học tập hiệu quả nhưng thậm chí còn có thể tốt hơn nữa.
Học tập vận động là một giải pháp thay thế tuyệt vời vì mọi người học tốt hơn thông qua các hoạt động thể chất.
Đó là lý do tại sao việc thêm tính tương tác vào lĩnh vực trực quan đầy hứa hẹn sẽ giúp bạn tạo ra những đồ họa thông tin đáng nhớ và hiệu quả hơn nữa.
Sự kết hợp giữa cách tiếp cận trực quan và động học này làm cho đồ họa thông tin hoạt hình trở thành nội dung của tương lai. Tất nhiên, đối với một số chủ đề, tốt hơn là không nên sử dụng các yếu tố tương tác, nhưng trong hầu hết các trường hợp, chúng sẽ chỉ cải thiện nội dung.
Chuyển động bổ sung ý nghĩa cho thông tin, cho phép người dùng kiểm soát trải nghiệm và thu hút trí tưởng tượng theo cách mà đồ họa thông tin tĩnh không thể làm được.
2. Thêm hiệu ứng cuộn
Testix đăng bản dịch của bài viếtRobbie Richards . Nguyên bản:Cách tạo một Infographic tương tác (Hướng dẫn 6 điểm)
Một trong những thách thức lớn nhất mà các nhà tiếp thị phải đối mặt hiện nay là cuộc đấu tranh để tạo ra nội dung hấp dẫn.
Các thuật toán tìm kiếm liên tục thay đổi nhằm cố gắng lọc ra nội dung chất lượng thấp. Như đã nói, điều này đang dẫn đến những thay đổi lớn trong chiến lược tạo nội dung.
Một số thương hiệu đã chuyển sang đọc dài...
...hoặc loại nội dung mà Brian Dean quảng bá bằng "Kỹ thuật nhà chọc trời" của mình.
Kết quả là sự bùng nổ nội dung tràn ngập Internet. Ngày nay, hơn 2 triệu bài viết được xuất bản mỗi ngày chỉ riêng trên blog.
Mức độ bão hòa nội dung này đã gây ra sự thay đổi đáng kể trong chiến lược của các công ty.
Trong những năm gần đây, nhiều người đã cố gắng đa dạng hóa nội dung của mình bằng cách thêm các định dạng khác — như đồ họa thông tin. Sự thật: Infographics đã có sự tăng trưởng bùng nổ trong suốt năm 2016, với 58% nhà tiếp thị xếp chúng là một trong những chiến thuật hàng đầu mà họ sử dụng để thu hút khán giả.
Ví dụ: một số nhà tiếp thị tin rằng việc tạo đồ họa thông tin đòi hỏi những kỹ năng chuyên nghiệp nhất định hoặc một nhà thiết kế đồ họa đắt tiền. Nhưng điều đó không đúng.
Bạn không cần nhóm phát triển chuyên dụng khi bạn có nền tảng* cung cấp một bộ công cụ giúp tạo nội dung tương tác nhanh hơn và dễ dàng hơn.
Trong bài viết này, bạn sẽ thấy rằng đồ họa thông tin tương tác không chỉ dễ tạo — chúng thậm chí còn hiệu quả hơn trong việc thu hút khán giả của bạn so với đồ họa thông tin tĩnh và biến người đọc của bạn thành khách hàng tiềm năng.
Tại sao đồ họa thông tin tương tác lại đánh bại đồ họa thông tin tĩnh
Khái niệm về đồ họa thông tin rất đơn giản: gói gọn càng nhiều giá trị càng tốt vào một phần nội dung dành cho người đọc và trực quan hóa nó để thu hút họ tốt hơn.
Đây chính xác là mục đích mà đồ họa thông tin tương tác này được tạo ra.
Thiết kế đồ họa hoàn toàn phù hợp với cả cốt truyện và tập dữ liệu. Bạn thấy mình đang di chuyển với tốc độ 3.000 km một giờ, bay qua Trạm vũ trụ quốc tế để đứng đầu nguồn cấp dữ liệu gồm 21,9 tỷ bức ảnh được đăng trên Instagram trong một năm.
Dưới đây là những điều cần lưu ý khi bạn chọn chủ đề trực quan cho đồ họa thông tin tương tác của mình:
- Hình ảnh và các yếu tố tương tác có giúp làm cho dữ liệu trở nên sống động không?
- Hình ảnh, hoạt ảnh và các yếu tố thiết kế phản ánh thương hiệu của bạn cũng như bất kỳ thương hiệu nào khác hợp tác với bạn để tạo nội dung tốt đến mức nào?
- Đồ họa tương tác sẽ tồn tại ở đâu? Nếu nó được giới thiệu trên trang web của bạn, bạn có thể muốn thiết kế phù hợp với chủ đề hoặc mẫu trang web của mình.
- Đảm bảo ý tưởng trực quan phù hợp với khán giả, ngành và câu chuyện của bạn. Infographic về kỳ nghỉ dưỡng sẽ có phong cách trực quan hoàn toàn khác so với các sự kiện quảng cáo dành cho các nhà quản lý cấp cao.
Một ví dụ tuyệt vời khác là đồ họa thông tin này của Joho Bean:
Nó đưa người dùng vào một cuộc phiêu lưu đa phương tiện khác thường, sử dụng những thước phim hấp dẫn và kể về hành trình của hạt cà phê từ nơi chín đến người tiêu dùng.
Hành động của người dùng sẽ tạo ra phản hồi
Đồ họa thông tin tương tác phải có tính tương tác, nhưng điều đó không có nghĩa là chúng nên bị giới hạn ở các yếu tố có thể nhấp riêng lẻ.
Mọi hành động của người dùng phải tạo ra một số loại phản hồi trong nội dung để toàn bộ nội dung tạo ra trải nghiệm thực sự cá nhân — ngay cả khi đó chỉ là một thao tác cuộn trang đơn giản.
Không chỉ nội dung ẩn buộc người đọc phải tích cực tham gia tìm hiểu nội dung, nó khuyến khích sự tò mò và cũng cho phép người đọc bỏ qua những phần mà họ ít quan tâm.
Cá nhân hóa nội dung với thông tin đầu vào của người dùng
Bạn có thể đảm bảo mức độ tương tác mạnh mẽ hơn nhiều nếu bạn cung cấp dữ liệu cho người dùng dựa trên thông tin họ nhập. Điều này phù hợp với mong muốn của người dùng: họ muốn có nhiều nội dung tương tác hơn và cá nhân hóa hơn.
Một ví dụ tuyệt vời về điều này là một đồ họa thông tin được cá nhân hóa cung cấp cái nhìn sâu sắc về việc liệu công việc của bạn có nguy cơ bị robot tự động hóa hay không:
Người dùng cần chọn một ngành nghề mà họ quan tâm để nhận được thông tin liên quan.
Bao gồm các hình thức đồ họa để thu thập thông tin
Infographic tương tác là gì?Đây là câu hỏi mà khách hàng ngày càng hỏi chúng tôi nhiều hơn. Cho đến gần đây, một số ít đại lý và studio thường hiểu những gì chúng ta đang nói đến, nhưng ngày nay các công ty truyền thông theo kịp thời đại không chỉ có nghĩa vụ đưa dịch vụ này vào bảng giá mà còn phải thực hiện nó một cách hiệu quả. Thật không may, không phải ai cũng có thể làm được điều này.
Có một số loại và định nghĩa về đồ họa thông tin tương tác.
Đầu tiên: đồ họa thông tin tương tác là đồ họa thông tin liên quan đến người đọc trong việc kiểm soát dữ liệu được hiển thị. Tính tương tác được tạo bằng công nghệ Flash hoặc JavaScript, HTML 5.
Thứ hai: bất kỳ đồ họa thông tin nào cho phép bạn thay đổi dữ liệu được hiển thị dưới dạng đồ họa trực tuyến.
Các dự án tạo đồ họa thông tin tương tác chỉ đang đạt được đà do tính phức tạp và chi phí cao. Một trong những ví dụ nổi bật về đồ họa thông tin tương tác là dự án “Ai chúc mừng Lukashenko nhậm chức tổng thống”, năm 2011.
Đồ họa thông tin, được cập nhật tương tác, giúp bạn có thể biết nguyên thủ quốc gia nào đã chúc mừng A.G. Lukashenko với cuộc bầu cử năm 2010. Dữ liệu hiển thị trên đồ họa thông tin có thể được chọn theo ảnh của tổng thống, quốc kỳ của đất nước, trên bảng hoặc trên quả địa cầu. Do đó, người dùng đã tự mình chọn dữ liệu nào mình quan tâm và dữ liệu nào sẽ được hiển thị. Trong bảng cũng có thể sắp xếp các quốc gia theo thời gian mà nguyên thủ quốc gia nắm quyền vào thời điểm chúc mừng, theo tình trạng quyền và tự do, chất lượng cuộc sống, tự do báo chí, bầu cử dân chủ trên thực tế. và đánh giá của những kẻ độc tài. Tính khả dụng của những lời chúc mừng đã được kiểm tra trên trang web chính thức của các tổng thống và được thay đổi theo cách thủ công.
Đã khá nhiều thời gian trôi qua kể từ khi dự án này ra mắt và ngày nay nhiều chuyên gia đang cố gắng đảm bảo rằng đồ họa thông tin tương tác sẽ tự động thay đổi thông tin. Mặc dù vậy, điều này ảnh hưởng nghiêm trọng đến ngân sách dự án.
Các công ty lớn của phương Tây là một trong những công ty đầu tiên sử dụng đồ họa thông tin tương tác như một phương tiện để xây dựng danh tiếng hoặc tăng lòng trung thành của người dùng, hiểu rõ giá trị của việc hiển thị thông tin nén theo động lực và khả năng thu hút người dùng.
Một số loại đồ họa thông tin cho phép bạn điều chỉnh tương tác một số thông số và nhận được dữ liệu thú vị. Ví dụ: người dùng được hỏi một câu hỏi để nhập một số nhất định, sau đó biểu đồ hoặc sơ đồ thay đổi trước mắt anh ta - một tài liệu thông tin hoàn toàn mới thu được, việc tạo ra nó mà chính anh ta trở thành người trực tiếp tham gia.
Ví dụ: nhân kỷ niệm ba năm trình duyệt Chrome, Google đã hình dung ra lịch sử phát triển của công nghệ và chương trình xem trang web: chúng tôi đặc biệt khuyên bạn nên nhấp vào liên kết và thưởng thức cảnh tượng đầy màu sắc của đồ họa thông tin tương tác theo truyền thống tốt nhất của thế giới. Hướng Tây.
Trong ví dụ được đề cập ở trên, người dùng các trình duyệt chính Internet Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ có thể thấy hai thập kỷ phát triển về công nghệ được sử dụng trong trình duyệt - từ giao thức http đến ngoại tuyến Các ứng dụng AppCache.
Các công ty Nga vẫn chưa thành thạo đồ họa thông tin tương tác, vì ngay cả những đồ họa thông tin đơn giản ngày nay cũng không phải ai cũng có được chất lượng tốt. Mặc dù thực tế là dịch vụ tạo đồ họa thông tin tương tác còn khá mới trên thị trường Nga, nhưng cơ quan của chúng tôi sẵn sàng thực hiện những nhiệm vụ như vậy ngay hôm nay vì định dạng này ngày càng có nhu cầu. Chi phí của dịch vụ này cao vì những công nghệ như vậy rất hiếm và luôn mang tính cá nhân nghiêm ngặt, điều này đòi hỏi phải tạo ra một sản phẩm phần mềm từ “0” cho mỗi tác vụ.
