Hình ảnh động web có thể lưu lại thiết kế web phẳng?

Xem trong 'Làng Tin Tức' đăng bởi Trangcct, 30/3/15, [ Mã Tin: 18189 ] [275 lượt xem - 0 bình luận]

  1. SĐT :
    01xxxxxxxx
    Địa Chỉ :
    Thăng Long- Kinh Môn -Hải Dương
    Gửi tin nhắn
    Khi thiết kế web, chúng ta cần phải chắc chắn rằng chúng tôi giữ kỹ năng của chúng tôi tươi và cập nhật lên. Chúng tôi không cần phải làm theo tất cả các xu hướng mà đến cùng (như bóng dài) nhưng chúng tôi cần phải tiếp tục học hỏi và cải thiện kỹ năng của mình như các trang web phát triển và trưởng thành.

    Một phát triển mới thú vị mà đang bắt đầu thu thập hơi nước trong ngành công nghiệp thiết kế web là hình ảnh động. Ngày càng có nhiều công ty đang tìm kiếm để hình ảnh động cho các ứng dụng hoặc trang web của họ như một cách để làm hài lòng người dùng của họ, nổi bật từ đối thủ cạnh tranh và nâng cao khả năng sử dụng các sản phẩm của họ.

    Một lý do là hình ảnh động có nhu cầu cao là vì tập trung gần đây của trang Web trên thiết kế phẳng. Thiết kế căn hộ, trong khi tổng thể là một điều rất tích cực, có một vài vấn đề mà mọi người đang lái xe để tìm cách cải tiến nó.



    Thiết kế căn hộ có một vài vấn đề
    Hôm nay, ngày càng nhiều công ty đang áp dụng các tối thiểu "thiết kế phẳng" thẩm mỹ. Trang web đang bắt đầu trông rất giống với không nhiều để phân biệt giữa các nhãn hiệu. Điều này mở ra cơ hội cho các nhà thiết kế để khám phá các phương tiện khác làm cho trang web của họ hấp dẫn và thú vị cho người sử dụng.

    Đây là nơi mà hình ảnh động đi kèm trong hoạt hình giống như muối vào khoai tây chiên của bạn. không có nó, họ là một chút hương vị nhạt nhẽo và thiếu. Bởi hiệu ứng động các yếu tố khác nhau của thiết kế của bạn, bạn có thể thêm một chút phấn khích và hài lòng người dùng của bạn với hình ảnh động sáng tạo và hữu ích.

    Một vấn đề khác với thiết kế phẳng là người sử dụng có thể bị mất bối cảnh của những gì sẽ xảy ra khi chúng tương tác với một trang web / ứng dụng. Khi nút ngừng tìm kiếm như các nút hay những thứ khác như phù hiệu bắt đầu nhìn tương tự, người đang bối rối về những gì sẽ xảy ra khi họ bấm vào chúng.


    Cuối cùng, một vấn đề cuối cùng tôi muốn chạm vào được thông báo cho người dùng khi một sự thay đổi diễn ra. Ngày nay, nhiều ứng dụng web hiện đại đang sử dụng các công cụ mạnh mẽ như AngularJs và Node.js để xây dựng "pageless, sống động cập nhật" các ứng dụng. Hãy suy nghĩ về Gmail: để có được một email mới, bạn không bao giờ phải làm mới trang; nó chỉ đơn giản xuất hiện trong khi một ai đó gửi cho bạn một email mới.

    Điều này có thể là một chút của một vấn đề nếu người dùng không đưa ra một số thông báo hay dấu hiệu rõ ràng rằng trang này đã thay đổi hoặc tải nội dung mới. Nếu trang được lưu chúng ta cần phải nhìn thấy cái gì đó sẽ cho chúng tôi biết các ứng dụng đang làm việc và đã lưu lại công việc của chúng tôi trong nền.

    Hoạt hình là một cách tuyệt vời để thông báo cho người sử dụng khi xảy ra sự kiện khác nhau.

    Hãy nói rằng bạn có một danh sách những người đăng ký họp mặt tiếp theo của bạn hoặc hội nghị. Khi những người mới đăng ký, bạn thêm chúng vào danh sách trong thời gian thực với Node.js vì vậy họ không bao giờ phải làm mới trang. Tuyệt vời, đó sẽ là thực sự hữu ích cho người dùng của chúng tôi. Nhưng bây giờ làm thế nào mọi người phải biết khi đăng ký một người mới?

    Một hình ảnh động nhỏ để cho mọi người xem biết rằng một người đã đăng ký những gì chúng ta cần là. Những gì về thả trong một chút cảnh báo cho người trên cùng của trang với một tin nhắn cho bạn biết họ chỉ đăng ký? Hoặc làm thế nào về mờ dần trong người mới vào danh sách và đem lại cho họ một chút điểm nhấn màu xanh vì vậy chúng tôi có thể nói họ là người mới?

    Tất cả những điều này là hiệu ứng tinh tế mà thực sự có thể làm cho sự khác biệt giữa một sản phẩm ổn và một cái gì đó thực sự vui thích của người dùng.





    Web đang trưởng thành
    Nhớ những ngày của IE6 và Netscape? Những ngày khi chúng tôi phải lo lắng nếu tất cả mọi người đã Javascript trên và chúng tôi xây dựng trang web của chúng tôi với các bảng HTML?

    Chúng tôi đã đi một chặng đường dài kể từ đó với sự hỗ trợ tuyệt vời HTML5, CSS3, và thiết kế đáp ứng, và tất cả họ đã kết hợp để cung cấp cho chúng tôi lựa chọn tuyệt vời khi nói đến hiệu ứng động Web.

    CSS3 hoạt hình
    Hôm nay, tất cả các trình duyệt chính hỗ trợ hầu hết hoặc tất cả các tính năng CSS3 chuẩn được khuyến cáo bởi W3C. Điều này cho chúng ta, như nhà thiết kế, tiềm năng rất lớn để tạo ra hình ảnh động đơn giản mà hấp dẫn rằng cuộc sống hơi thở vào các trang web khác tĩnh



    Quá trình chuyển đổi: chuyển tiếp CSS cung cấp cho bạn khả năng để thực hiện một quá trình chuyển đổi đơn giản giữa hai trạng thái khác nhau. Giả sử bạn có một nút đơn giản mà bạn muốn thay đổi màu sắc và đẩy xuống một chút trên di chuột, một quá trình chuyển đổi sẽ được hoàn hảo cho việc này trường hợp sử dụng.

    Ảnh động Keyframe: khung hình là một tính năng CSS3 mạnh mẽ cho phép bạn tạo ra các chuỗi hoạt ảnh tùy chỉnh. Chúng cho phép bạn kiểm soát thời gian và nới lỏng, thời gian, bất kỳ sự chậm trễ cần thiết, bao nhiêu lần lặp đi lặp lại thời gian, mà hướng nó sinh động và nhiều hơn nữa. Bạn thậm chí có thể khai báo nhiều hình ảnh động trên một phần tử html.



    Đồ họa SVG
    Một trong những tính năng mới tuyệt vời của "web trưởng thành" là hỗ trợ SVG. Cuối cùng chúng ta có thể bắt đầu sử dụng hình ảnh quy mô tốt cho kích thước và độ phân giải màn hình khác nhau. Không chỉ có vậy, nhưng của SVG là cách mạnh mẽ hơn hình ảnh png vì bạn có thể tương tác với họ trong CSS và JS. Điều này sẽ cho chúng ta khả năng để tạo ra hình ảnh động ấn tượng mà trước đây chỉ có thể với hoạt hình của gif hoặc Flash.

    Hãy xem gif động này đã được tái tạo lại trong CSS và SVG:





    Một điều SVG hoạt hình thực sự có thể hữu ích cho là tạo ra các đồ thị và biểu đồ hoạt hình mà có thể mở rộng tới mọi kích cỡ. Thanh toán ví dụ đơn giản này vào JSFiddle:



    Các khả năng lựa SVGs là gần như vô tận!

    HTML5 canvas
    Một công nghệ thú vị mà có trình duyệt hỗ trợ đầy đủ trong một thời gian là HTML5 Canvas.Các yếu tố vải được sử dụng để vẽ đồ họa trên web.

    Nó tương tự như SVG nhưng khác bằng nhiều cách. Trước hết, nó là một định dạng raster hơn là vector. Điều này có nghĩa nó thực hiện tốt hơn cho bản vẽ phức tạp hơn và hình ảnh động, nhưng quy mô không tốt cho màn hình độ phân giải cao.

    Một nhược điểm lớn của vải là nó không có yếu tố DOM manipulatable. Điều này có nghĩa là mỗi khi bạn muốn thay đổi các bản vẽ hoặc hình động, bạn cần phải vẽ lại hình ảnh.

    Mặc dù có những nhược điểm, vải vẫn còn là một công cụ tuyệt vời mà có thể được sử dụng cho nhiều hình ảnh động phức tạp và bản vẽ.



    Javascript thư viện hình ảnh động
    Mặc dù hình ảnh động CSS3 đang ngày càng trở nên mạnh mẽ hơn, vẫn còn một số trường hợp sử dụng Javascript cho hình ảnh động.

    Ngày càng có nhiều thư viện xuất hiện tất cả các thời gian đó cho chúng ta hình ảnh động tuyệt vời ở một phần nhỏ của chi phí tài nguyên, chúng tôi sử dụng để chi trả cho hoạt Javascript.

    Snap.svg: snap.svg được thiết kế để làm việc với các tài sản SVG của bạn dễ dàng như jQuery làm cho làm việc với DOM. Nó có tính năng một thư viện hình ảnh siêu giàu với xử lý sự kiện dễ dàng giúp bạn mang lại SVG của bạn vào cuộc sống.

    Greensock GSAP: gsap.js là một bộ công cụ chuyên nghiệp cho kịch bản, hiệu suất cao HTML5 hình ảnh động làm việc trong tất cả các trình duyệt chính. Đó là 20x nhanh hơn so với jQuery và thậm chí nhanh hơn so với hình ảnh động CSS3 trong một số trường hợp. 60fps Super-bơ ở đây chúng tôi đi!

    Transit: transit.js là một thư viện jQuery có thể thay thế mô-đun hoạt hình jQuery với siêu mịn CSS chuyển & biến đổi. Phần tuyệt vời là được sử dụng cú pháp tương tự như của jQuery $ ('...'). động.

    Vận tốc: velocity.js cũng tương tự như quá cảnh ở chỗ nó sử dụng cú pháp tương tự như jQuery vì vậy tất cả bạn phải làm là bao gồm thư viện và thay thế sinh động của jQuery với.velocity ().

    scrollReveal: scrollReveal là thư viện mã nguồn mở js giúp bạn tạo ra và duy trì như thế nào các yếu tố trang fade-in, kích hoạt bởi khi họ bước vào khung nhìn.

    Bounce.js: bounce.js là một công cụ mới để tạo ra hình ảnh động CSS3 thú vị keyframe trợ.

    Cải thiện phần cứng trong các thiết bị di động
    Một lý do thức hoạt hình được thực sự cất cánh là các thiết bị ngày nay đang ngày càng trở nên mạnh mẽ hơn với mỗi bản phát hành mới.

    Các iPhone 5s, ví dụ, có một con chip a7 siêu được hỗ trợ trong đó.

    Theo cực Tech :, "CPU không chỉ là một quá trình tiến hóa dần dần của người tiền nhiệm của nó Swift - đó là một con quái vật hoàn toàn khác nhau đó là thực sự hơn giống như một" cốt lõi lớn "Intel hoặc AMD CPU hơn so với một quy ước" cốt lõi nhỏ "CPU".

    Ngoài ra, với iOS8, Apple sẽ phát hành kim loại, mà là một công cụ xé 3D rất mạnh mẽ mà sẽ cung cấp cho bạn khả năng để tạo ra các trò chơi máy tính để bàn như thế chạy trên các thiết bị di động.

    Một số công ty điện thoại Android như LG thậm chí còn xây dựng các thiết bị với nhiều như 3Gb ram, LG G3 là chỉ là một. Tôi có một máy tính xách tay từ một vài năm trở lại hầu như không có nhiều.

    Tất cả điều này để nói rằng không những chúng ta có thể tạo ra hình ảnh động chạy tuyệt vời trên máy tính để bàn, nhưng các hình ảnh động tương tự sẽ làm việc tuyệt vời trên điện thoại, máy tính bảng và các thiết bị di động khác.

    học lập trinh web
     

    A.T thích bài này.