Thiết Kế Web Đà Nẵng

2. Animation

Ảnh động đang được sử dụng nhiều hơn để nâng cao cách kể chuyện của một trang web, khiến cho trải nghiệm tương tác mang tính giải trí và thoải mái hơn.

Tuy nhiên, bạn không thể sử dụng tất cả các hình ảnh animation ở mọi nơi. Hãy xem xét một cách cẩn thận cho dù bạn chỉ thêm chúng vào như một cách để tăng thêm cá tính cho trang web của mình. Animation có thể được chia thành hai nhóm:

Animation quy mô lớn: Chúng được sử dụng như một công cụ tương tác chính có tác động nhiều hơn đến người sử dụng – bao gồm các hiệu ứng như di chuyển giống như xu hướng parallax scrolling và các thông báo pop-up.

Animation quy mô nhỏ: Thường gồm spinner, hover tool, loading bar và không đòi hỏi người dùng phải nhấp vào.

Chúng tôi sẽ mô tả 7  kỹ thuật animation phổ biến nhất:

Loading animations

Chúng được sử dụng để mang lại sự thích thú cho người sử dụng và có tính giải trí cao. Những hình ảnh động theo xu hướng này thường được sử dụng phổ biến cho thiết kế phẳng, hồ sơ năng lực hay các trang web chỉ có 1 trang duy nhất…

 

Nên nhớ khi sử dụng những hình ảnh động theo phong cách này thì hãy luôn giữ cho chúng sư đơn giản vá tránh đưa vào những âm thanh không phù hợp. Tuy nhiên nó vẫn phải phù hợp với cá tính và bảng màu của trang web.

Navigation và menu (nonscrolling)

Menu điều hướng ẩn đã trở nên ngày càng phổ biến, đặc biệt là có thể được sử dụng chúng để tiết kiệm không gian màn hình. Như bạn có thể thấy trong các ví dụ dưới đây, bằng việc tạo ra trong các công cụ tạo mẫu cộng tác UXPin, những hình ảnh động được sử dụng để tạo ra một menu khi nhấp chuột vào một nút cụ thể và ngăn chặn quá trình chuyển đổi không thích hợp.

Hover animations

Hiệu ứng di chuột cho một cảm giác trực quan hơn đối với các trang web khi người sử dụng di chuột qua các nội dung. Người dùng chắc chắn sẽ tự động có phản hồi thị giác ngay lập tức khi sử dụng tính năng di chuyển chuột.

 

 

Gallerie – slideshow

 

Phòng trưng bày và trình chiếu ảnh là một cách hiệu quả để giới thiệu nhiều hình ảnh mà không sợ quá tải người sử dụng. Đây là những địa điểm tuyệt vời cho các nhiếp ảnh gia có thể trưng bày sản phẩm, và giới thiệu các sản phẩm thiết kế.

 

 

Motion animation

Sự chuyển động tự nhiên của các đồng tử trong đôi mắt chúng ta khi nhìn chính là cảm hứng để tạo ra các hình động chân thật, và nó chính là công cụ hoàn hảo giúp thu hút sự chú ý của người dùng. Chuyển động cũng có thể giúp hệ thống phân cấp trực quan.. Điều này có thể giúp tăng thêm sự quan tâm.

 

 

Scrolling

Thanh cuộn dựa trên những hình ảnh động mang lại sự  kiểm soát hơn cho người dùng, những người có thể xác định tốc độ mở ra của các hình ảnh động.

Hình ảnh động nền / video

Một hình nền hoạt hình đơn giản có thể tăng thêm khả năng hiển thị cho một trang web, nhưng nên sử dụng ở mức độ vừa phải bởi có thể gây mất tập trung cho người dùng. Điều quan trọng là chúng có thể làm việc trên các phần riêng lẻ hoặc tạo ra một chuyển động nhẹ nhàng cho toàn bộ hình ảnh.

3. Microinteractions

Microinteractions là những tương tác nhỏ xảy ra xung quanh chúng ta,  đơn giản chỉ chỉ là việc bạn tắt báo thức trên điện thoại di động hay like một tấ hình thú cưng trên facebook.

 

Mỗi người đều thực hiện nhưng thao tác nhỏ này mà không cần suy nghĩ. Đó là lúc mà bạn bắt đầu một ngày với việc tương tác. Bằng cách tắt báo thức trên điện thoại di động của bạn, bạn đang tham gia vào một giao diện người dùng nào đó trong một khoảnh khắc ngẫu nhiên. Và ngày càng nhiều trong số những tương tác nhỏ này được ứng dụng và các thiết bị công nghệ phổ biến.

Micro-tương tác có xu hướng giúp bạn làm những điều khác nhau như:

Truyền đạt một trạng thái hoặc nhận lại một thông tin phản hồi ( ví dụ như việc bạn nhận được thông tinh giảm giá thông qua mail hay điện thoại,…)

Xem kết quả của một thao tác sử dụng hay một trạng thái mà bạn vừa tương tác ( ví dụ như việc bạn nhận được mail phản hồi khi đăng kí tài khoản..)

Giúp người sử dụng thao tác một ứng dụng nào đó.

Micro-tương tác là một phần quan trọng trong  bất kỳ một ứng dụng nào.

Micro-tương tác là một phần quan trọng của hầu hết các dự án thiết kế kỹ thuật số. Mỗi loại tương tác dẫn người dùng đến trung tâm. Khái niệm này cho thấy  con người như là chìa khóa cho việc sử dụng các thiết bị ứng dụng.

4. Material Design: Một lựa chọn phong phú hơn để thiết kế phẳng

Năm ngoái, Google tung ra một phong cách  mới là Material Design. Đây là một phong cách  thiết kế mới được Google giới thiệu cùng lúc với phiên bản Android 5.0 Lollipop sử dụng hiệu ứng đổ bóng và các khái niệm về chuyển động và chiều sâu để tạo ra các thiết kế có tính thực tế hơn cho người dùng.

 

Phong cách Material Design mang mục đích chính là tạo ra sự sạch sẽ, thiết kế modernistic sẽ tập trung vào UX, ngoài ra thiết kế còn phải thật đơn giản, tinh gọn và không sử dụng các thành phần thừa.  Phong cách thiết kế mới này của Google còn có nhiều những ý kiến trái chiều, nó được ca ngợi chủ yếu ở sự thay đổi mới mẻ.

Với cái nhìn tối giản, Material Design có nhiều điểm chung với xu hướng đang ngày một phát triển là thiết kế phẳng.

5. Thiết kế Responsive (thiết kế web tương thích)

Thiết kế web Responsive cũng trở nên rất phổ biến trong những năm gần đây nhờ vào sự gia tăng của việc sử dụng Internet trên di động.

 

Thiết kế Responsive khá an toàn và là một thiết kế đáp ứng những yêu cầu vừa đủ, và là phương thức thiết kế tương đối đơn giản và giá rẻ cho các doanh nghiệp để xây dựng một trang web điện thoại di động thân thiện với đầy đủ các chức năng cần thiết.

6. Thiết kế phẳng

Thiết kế phẳng đã trở thành xu hướng phổ biến và phát triến được một thời gian dài và tương thích với tất cả các xu hướng khác như tối giản, thiết kế web đáp ứng và material design.

 

 

Tuy nhiên, nhìn vào những xu hướng sẽ phát triển trong năm tới đay có thể dự đoán thấy xu hướng thiết kế phẳng sẽ vẫn phát triển rực rỡ và luôn có ở những top xu hướng của năm 2016 tới đây.  Hãy cùng nhau điểm ra một vài đặc điểm chính nổi bật cua xu hướng thiết kế phẳng.

Bóng: Giúp mang lại chiều sâu cho các thiết kế phẳng.

Phối màu rực rỡ. Mang đến những màu sắc sống động hơn trong các thiết kế.

Typography đơn giản. Kiểu chữ đơn giản giúp văn bản dễ đọc và có thể đọc được tốt trong tát cả các thiết kế phẳng.

Nút Ghost. Điều này cho phép các chức năng mà không mất tập trung từ UX và thường được biểu diễn như là các đừng vạch, các liên kết khi click có thể thay đổi khi người dùng di chuột qua chúng.

Tối giản. Cắt giảm số lượng các yếu tố để tạo ra sự hiện đại.

Kết

Điều cần làm lúc này không phải là bạn chỉ cần chạy theo các xu hướng – hãy biết chọn lọc các xu hướng để tạo ra bản sắc cho riêng mình.