Thực đơn
trang chủHướng dẫn

Xu hướng mới nhất trong thế giới thiết kế web: hãy gặp Thiết kế Thẻ! Mẫu giao diện người dùng thẻ trên thiết bị di động và thiết kế đáp ứng. Thiết kế thiệp qua các thời đại

Nhờ vào kháng cáo hình ảnh, giao diện thẻ không chỉ là một xu hướng.

Năm 2014, Internet bắt đầu được sử dụng thường xuyên hơn trên thiết bị di động hơn là trên máy tính. Đó là lý do tại sao thiết kế web ngày nay thiên về màn hình nhỏ và thiết kế thích ứng trở thành bắt buộc. Chúng ta có thể nói gì về năm 2018, khi theo thống kê của hãng tin RNS, 54% người Nga đã sử dụng Internet di động. Kết quả là, trong phong cách đơn giản các giao diện như thiết kế phẳng mới, sự tối giản và đặc biệt là thẻ hiện nay được ưa chuộng hơn bao giờ hết.

Sự phù hợp của mẫu giao diện người dùng thẻ không chỉ là thời gian tải nhanh và khả năng thích ứng với Đa dạng về kích cỡ màn hình. Nội dung hạn chế phù hợp với khoảng chú ý của hầu hết người dùng web (đặc biệt là trên thiết bị di động). Được nuôi dưỡng bởi Pinterest và sau đó được phổ biến bởi các mạng xã hội như Facebook và Twitter, mẫu thẻ hiện có thể được tìm thấy trên các trang web thuộc mọi ngành.

Trong bài viết này, chúng ta sẽ khám phá sự phát triển của mẫu giao diện người dùng thẻ: tại sao nó lại thiết thực, nó tương thích như thế nào với thiết kế đáp ứng và vật liệu cũng như những gì mong đợi từ nó trong tương lai.

Thiết kế web container là gì?

Để hiểu mô hình này, trước tiên bạn cần hiểu bản thân các lá bài là gì. Thẻ thường là những vật chứa thông tin nhỏ. Mỗi thẻ đều có cái riêng chủ đề riêng. Thẻ có thể chứa bất kỳ nội dung nào - hình ảnh, văn bản, liên kết, v.v. - nhưng tất cả thông tin đều dành riêng cho một chủ đề duy nhất.

Việc lấp đầy màn hình bằng những vùng chứa thông tin độc lập này là điều mà The Guardian gọi là “mô hình vùng chứa”. Cô ấy cung cấp sản phẩm sạch và giao diện rõ ràng, lý tưởng cho xem lướt qua, vì vậy người dùng có thể dễ dàng tìm thấy những gì mình đang tìm kiếm. (Ngoài ra, phương pháp này lý tưởng cho điều khiển cảm ứng mà chúng tôi sẽ viết bên dưới).

Thực tế và hấp dẫn: tóm tắt lợi ích của mẫu giao diện người dùng thẻ.

Trello cho phép người dùng tạo bất kỳ thẻ nào họ muốn. Bất cứ ai cũng có thể tạo thẻ nhiệm vụ và phân loại chúng khi cần thiết. Điều này không chỉ thể hiện tính linh hoạt của mẫu thẻ mà còn thể hiện sức mạnh tổ chức của nó. Trello phát triển mạnh vì định dạng thẻ của nó đơn giản hơn danh sách nhiệm vụ của người lập kế hoạch truyền thống.

Bạn có hứng thú không? Đọc bài viết mới nhất với tuyển chọn TOP 18 xu hướng năm 2018.

Mẫu giao diện người dùng thẻ trên thiết bị di động và thiết kế đáp ứng.

Như đã nêu trước đó, thẻ có khả năng tương thích đáng kinh ngạc với thiết kế đáp ứng, khiến chúng, theo cách nói của Des Traynor của Intercom, là "tương lai của web". Mẫu này phù hợp tốt trên thiết bị di động vì một số lý do mà chúng tôi sẽ mô tả bên dưới.

Đầu tiên, trong các khung mở rộng và thu hẹp, lưới thẻ có thể tự cơ cấu lại để phù hợp với bất kỳ vị trí hoặc kích thước màn hình nào. Nhà thiết kế có thể thay đổi kích thước của các tấm thiệp theo ý muốn (và cũng có thể điều chỉnh chúng cho phù hợp với nhau). Ví dụ: bạn có thể đặt chiều rộng cố định và chiều cao thay đổi với khoảng cách không đổi giữa các thẻ. Chúng tôi luôn sử dụng điều này khi tạo các trang web đáp ứng.

So sánh ảnh chụp màn hình của trang web The Verge ở trên với phiên bản di động bên dưới:

Lưu ý rằng văn bản, hình ảnh và mẫu màu vẫn giữ nguyên. Khi phát triển thích nghi thiết kế web thẻ cho phép bạn nhận được thiết kế vĩnh viễn TRÊN nhiều thiết bị khác nhau. Ưu điểm này có thể thấy ở phòng thí nghiệm miễn phí Thiết kế UXPin. Hãy chú ý cách bố cục bắt đầu rõ ràng như thế nào phiên bản điện thoạiĐẾN chế độ toàn màn hìnhđang xem.

Khu vực xem phiên bản di động:

Khu vực xem toàn màn hình:

Một ưu điểm khác là cách thiết kế thẻ tương thích với Kiểm soát cảm ứng. TRÊN những màn hình cảm ứng thẻ đóng vai trò của các nút. Ý tưởng rất đơn giản: nhấp vào thẻ để truy cập nội dung. Như Luật Fitts áp dụng cho các chương trình thiết kế web, nút thêm chỉ với một cú nhấp chuột, bạn càng làm việc với nó dễ dàng hơn. Chúng ta có thường xuyên phải vật lộn với những nút bấm nhỏ xíu trên thiết bị di động không?

Thẻ và thiết kế vật liệu

Vật liệu thiết kế, lý tưởng cho , phụ thuộc nhiều vào thẻ và phân tích kỹ thuật chi tiết của chúng sẽ cần nhiều không gian. Vì vậy, nếu bạn muốn có một lời giải thích toàn diện, bạn nên đọc phần mô tả thẻ trong hướng dẫn thiết kế vật liệu.

Phát triển trang web. Tương lai của thiết kế thẻ

Vì mẫu giao diện người dùng thẻ liên tục thay đổi hình dạng để đáp ứng các yêu cầu mới nên nó có thể sẽ có tác động lớn nhất đến thiết kế ứng dụng và đáp ứng. Thay đổi này một phần dựa trên tác động từng trang của thiết kế Material Design đối với các ứng dụng Android.

1. Công nghệ

Thẻ có thể không ở trạng thái tĩnh lâu. Khi việc triển khai web được cải thiện thì khả năng hỗ trợ nhiều nội dung đa phương tiện hơn cũng sẽ tăng theo. Chúng ta có thể sẽ thấy nhiều yếu tố chi tiết hơn, chẳng hạn như nội dung tự động làm mới, sẽ không làm chậm trải nghiệm tổng thể.

Càng ngày, video sẽ thay thế hình ảnh (một ý tưởng mà một số nhà thiết kế đã ấp ủ trong nhiều năm). Sử dụng Giao diện của bạn (ở trên) sử dụng thẻ GIF động chứa đầy trang chủ rất nhiều thông tin.

2. Tương tác sâu sắc hơn

Trong tương lai gần, khả năng sáng tạo trong việc sử dụng thẻ cũng có thể tăng lên và chúng sẽ không còn chỉ là những liên kết nữa. Như chúng ta thấy trong ví dụ về thiết kế vật liệu, các thẻ khác nhau về mức độ tương tác với nhau và môi trường, ví dụ như phân loại tự động và cập nhật theo thời gian thực (chẳng hạn như dự báo thời tiết).

Windows Phone đã giới thiệu tính năng tự động sắp xếp thẻ, nhưng cách tiếp cận này có thể được áp dụng cho người dùng các thiết bị di động khác.

Kích thước 3

Bắt kịp xu hướng nhân vật truyện tranh, các lá bài cũng áp dụng chính sách "càng lớn càng tốt".
Những tấm thiệp lớn cho phép có nhiều chi tiết hơn và kiểu chữ phức tạp hơn, điều này có nghĩa là có nhiều cơ hội hơn cho thiết kế hình ảnh tuyệt đẹp. Được sử dụng xen kẽ với các thẻ nhỏ hơn, thẻ lớn mang lại sự tự do về mặt hình ảnh hơn.

CÁCH Arkitekter (ở trên) kết hợp các thẻ cỡ lớn và vừa trong điều hướng. Một số thẻ là các liên kết, trong khi những thẻ khác chỉ trình bày thông tin tĩnh. Không gian rộng ngăn cách các tấm thiệp, mang lại cảm giác thoáng đãng cho thiết kế.

4. Thiết bị đeo được

Nhờ vào mắt kính thông minh của Google, thẻ hiện đã trở thành yếu tố cốt lõi của thiết kế giao diện người dùng cho thiết bị đeo được.

Trong khi các nhà phê bình có thể coi Google Glass là một thất bại về mặt thương mại, một số người tin rằng nó có cơ hội trên thị trường. Dù thế nào đi chăng nữa, thiết bị đeo cần phải tận dụng không gian một cách hiệu quả. Và trong trường hợp này, thiệp sẽ là sự lựa chọn thiết thực nhất.

Phát triển trang web 2016-2018. Phần kết luận

Thiết kế thẻ trở thành nền tảng của tổ chức và chức năng trong mọi môi trường và thiết bị. Hình thức hiện tại của chúng có thể thay đổi khi chúng phát triển cùng với công nghệ, nhưng sự hiện diện của chúng được đảm bảo. Xét cho cùng, các vùng số hóa trên màn hình hầu như không phải là dạng thẻ chính. Đừng quên rằng cho đến gần đây, tấm thẻ chỉ là một mảnh giấy chứa một tập hợp thông tin về một chủ đề cụ thể.

Đọc bài viết về một cái khác - song công hoặc song công.

Thiết kế web rất năng động. Chúng tôi liên tục xem làm thế nào vẻ bề ngoài các trang web đang thay đổi với sự ra đời của các công nghệ, phương pháp, xu hướng và phong cách mới. Vì vậy, khái niệm hàng đầu hiện nay là thiết kế thẻ.

Bạn có thể thấy nó ở khắp mọi nơi: từ trang web của đại lý bất động sản đến các cổng thông tin. Trên thực tế, những gã khổng lồ Internet như Twitter, Facebook và Google cũng sử dụng thiết kế thẻ.

Thẻ, trong trong trường hợp này, đây là những hình chữ nhật nhỏ chứa đầy hình ảnh và thông tin tương tác. Chúng đã trở nên phổ biến chủ yếu nhờ khả năng đáp ứng, tính thẩm mỹ và tính thực tế.

Mặc dù có nhiều quan niệm sai lầm về những gì đủ điều kiện được coi là thiết kế danh thiếp, nhưng có một điều chắc chắn: danh thiếp không chỉ là hình chữ nhật trên trang web. Để đủ điều kiện cho một thiết kế nhất định được coi là thiết kế thẻ, nó phải có chức năng và phải tự túc.

Có lẽ phép ẩn dụ tốt nhất để mô tả thiết kế thẻ là câu nói sau: “Lá bài phẳng nhưng có hai mặt”. Nghĩa là, mỗi thẻ không chỉ chứa một số loại nội dung mà còn cung cấp cho người tiêu dùng cơ hội tương tác với nó theo một cách nào đó.

Nói một cách đơn giản, thiệp không chỉ có thiết kế đẹp mà còn dễ sử dụng.

Các loại thiết kế thẻ khác nhau

Thiết kế thẻ đã trải qua những thay đổi đáng kể kể từ khi ra đời. Và bây giờ nó có thể được thực hiện theo các phong cách sau.

1. Thiết kế phẳng



Thiết kế thẻ phẳng lần đầu tiên được giới thiệu bởi Microsoft vào năm 2006 và dựa trên phong cách thiết kế GUI Metro trông khá chắc chắn và nhiều màu sắc. Đúng là trong anh ấy phiên bản hiện đạiĐộ dốc, bóng tối và tính đa dạng được sử dụng rộng rãi hơn.

2. Phong cách tạp chí

Một thiết kế theo phong cách tạp chí cần có sự cân bằng thị giác tốt. Trong trường hợp này, thẻ chứa một khối có hình ảnh và văn bản đóng vai trò như một “đoạn giới thiệu”, tức là chúng thu hút khách truy cập nhiều hơn. thông tin chi tiết trên một trang hoặc trang web khác. Đúng như tên gọi, thiết kế này được sử dụng trên các trang web tạp chí và cổng thông tin, nhưng cũng phù hợp với các tài nguyên khác tập trung vào lượng lớn nội dung, chẳng hạn như blog hoặc danh mục đầu tư, cũng như các trang web được cập nhật thường xuyên.


Phong cách này được thể hiện trên trang web dịch vụ xã hội Pinterest và đã trở thành xu hướng thiết kế chủ đề phổ biến cho Nền tảng WordPress. Ban đầu, thẻ chỉ chứa các liên kết và một lượng nội dung nhất định. Giờ đây, chúng có thể chứa nhiều liên kết và loại nội dung hơn, bao gồm video, biểu mẫu, hình ảnh và công cụ chia sẻ. trong mạng xã hội. Trong một số giao diện, thẻ cung cấp các tùy chọn tương tác nhỏ, chẳng hạn như bật/tắt thông báo Facebook.



Còn được gọi là phong cách "nề", nó chứa các khối được kết nối với nhau hoặc phân bổ trong toàn bộ bố cục.

Sử dụng thiết kế card như thế nào cho hiệu quả?

Ăn toàn bộ dòng lý do tại sao thiết kế phong cách thẻ rất phổ biến. Đây chỉ là một vài trong số họ:

  • Nhiều phong cách thiết kế khác nhau tương thích với định dạng này, từ thiết kế phẳng đến các loại phức tạp hơn.
  • Nó hoạt động tốt với nhiều loại khác nhau nội dung và cũng làm cho nó dễ dàng hơn để tiêu thụ.
  • Nó hoạt động tốt với các khung đáp ứng.
  • Nó cung cấp một cái nhìn có tổ chức và có cấu trúc cho rất nhiều thông tin.

Vì thuộc loại này thiết kế không có quy tắc cố định. Tuy nhiên, trong hiệu quả bố trí thẻ Hai yếu tố hầu như luôn hiện diện - sự đơn giản và nội dung phong phú, đa dạng. Ngoài ra còn có các kỹ thuật có thể nâng cao tính thẩm mỹ và chức năng của thiết kế thẻ.

Không gian trống

Một yếu tố phổ biến trong thiết kế thiệp là khoảng trắng. Điều này là cần thiết để tất cả các yếu tố có thể nhìn thấy rõ ràng và dễ hiểu. Rốt cuộc, tất cả những gì bạn có là một vùng 600px và bạn cần đảm bảo dòng tiêu đề, nút kêu gọi hành động, hình ảnh và văn bản liên kết nổi bật và thực hiện công việc của chúng một cách hiệu quả.

Một số lượng lớn khoảng trống xung quanh mỗi phần tử giúp khách truy cập trang web có thời gian để xử lý những gì họ nhìn thấy khi nhìn từ thẻ này sang thẻ khác.

Mỗi thẻ có nội dung riêng

Xóa hình ảnh

Trong thiết kế dựa trên thẻ, hình ảnh rất quan trọng. Chúng phải hoàn hảo, ngay cả khi được đặt vào không gian hạn chếđể thu hút sự chú ý. Nếu không có hình ảnh, hãy sử dụng phông chữ nghệ thuật hoặc dòng tiêu đề sáng tạo để thu hút sự chú ý của khách truy cập.

Phông chữ đơn giản

Phông chữ không được làm phân tán sự chú ý khỏi hình ảnh. Để thực hiện việc này, hãy sử dụng phông chữ đơn giản với màu sắc dễ đọc, tức là đen và xám. Các phông chữ phổ biến nhất, do thiết kế trung tính và dễ đọc, là phông chữ sans serif. Ngoài ra, nên sử dụng một loại phông chữ với nhiều kích cỡ khác nhau.

Chi tiết bất ngờ

Yếu tố bất ngờ có tác dụng kỳ diệu. Hãy thử thêm các chi tiết bất ngờ như hiệu ứng 3D hoặc xử lý cạnh sáng tạo để làm cho thiết kế của bạn nguyên bản hơn. Các phương pháp khác đã được chứng minh là có hiệu quả bao gồm hiệu ứng di chuột và lớp phủ màu. Bạn cũng có thể chỉ áp dụng hiệu ứng cho hầu hết nội dung ý nghĩađể cân bằng trọng lượng hình ảnh của mỗi thẻ.

Lưới mở

Các yếu tố bên trong mỗi lá bài cũng quan trọng như vậy nhưng khoảng cách giữa chúng cũng quan trọng không kém. Tạo một khung lưới sẽ mang lại một số độ tương phản và cũng cung cấp khoảng cách bằng nhau giữa các thẻ và các phần tử của chúng. Điều này càng trở nên quan trọng hơn khi bạn xem xét vị trí của các điểm ngắt trong bố cục đáp ứng.

Khả năng sử dụng

Thiết kế không chỉ là tính thẩm mỹ mà còn là tính tiện dụng. Thiết kế nên khuyến khích người dùng thực hiện hành động: nhấp vào nút đăng ký, đọc toàn bộ bài viết hoặc mua sản phẩm. Mục tiêu cuối cùng của giao diện là cung cấp trải nghiệm dễ dàng giúp người dùng thực hiện hành động mà bạn muốn.

Ngoài ra, bạn cũng nên kiểm tra cách hoạt động của từng thành phần giao diện, đặc biệt là trên phiên bản di động của trang web. Nghĩa là, bạn cần nghĩ không chỉ về mức độ thuận tiện khi nhấp vào các phần tử bằng chuột mà còn về mức độ thuận tiện khi tương tác với chúng bằng các kỹ thuật như vuốt (trượt ngón tay trên màn hình) và chạm (ngắn chạm vào màn hình). Ngoài ra, hãy đảm bảo các nút được hiển thị rõ ràng và dễ sử dụng. Tất nhiên, điều này đòi hỏi phải có đủ không gian giữa các phần tử để tránh việc vô tình chạm nhầm nút hoặc thực hiện hành động sai.

Sắp xếp thẻ

Sau khi thiết kế thiệp hoàn tất. bước tiếp theo là để xác định những thẻ này sẽ chứa thông tin gì. Nội dung có nên được nhóm theo loại hoặc chủ đề? Nội dung này hay nội dung kia nên được phân loại vào danh mục nào? Cách tốt nhất sắp xếp tất cả nội dung này theo cách thân thiện với người dùng là sắp xếp thẻ.

Bạn có thể thực hiện việc này bằng bút và giấy hoặc bạn có thể sử dụng các trang web như ConceptCodify hoặc Optimal Workshop. Mỗi phương pháp đều có ưu điểm và nhược điểm, mặc dù phương pháp ngoại tuyến yêu cầu cách tiếp cận riêng lẻ hơn.

Thiết kế thẻ là một trong những định dạng bố cục trang web linh hoạt nhất, cho phép bạn tạo ra những tác phẩm xuất sắc Kinh nghiệm người dùng. Các tấm thiệp cũng có tính thẩm mỹ bắt mắt. Người dùng không ngừng tìm cách tiêu thụ nhanh chóng số lượng lớn thông tin, nhưng thiết kế thẻ cho phép bạn thực hiện việc này một cách dễ dàng và nhanh chóng.

Dựa trên các thẻ tương tác có chứa hình ảnh, nội dung, siêu liên kết. Phong cách Metro lần đầu tiên được Microsoft sử dụng vào năm 2010 trong thiết kế giao diện các sản phẩm của mình. Những lợi ích phong cách này, theo các nhà phát triển của công ty, rất phong cách và cái nhìn hiện đại cũng như chức năng. Người dùng không bị phân tâm bởi các yếu tố bên ngoài; tất cả sự chú ý của anh ta đều tập trung vào các thẻ chỉ mục cung cấp cho anh ta nội dung mà anh ta đang tìm kiếm. Thiết kế này được coi là trực quan và đơn giản hóa trải nghiệm người dùng.

Ngày nay, thiết kế thẻ có thể được tìm thấy trên các nguồn nổi tiếng như Twitter, Pinterest, Google và các nguồn khác.

Tính năng kiểu thẻ

Phong cách Metro trong thiết kế rất phổ biến; nó được sử dụng rộng rãi để cải thiện khả năng sử dụng và giúp dễ dàng tiếp nhận một lượng lớn nội dung. Phong cách thẻ có các tính năng đặc trưng:

  • Khả năng thích ứng. Thiết kế được hiển thị chính xác trên mọi thiết bị.
  • Tối giản, không có yếu tố gây mất tập trung. Mọi sự chú ý đều đổ dồn vào thẻ chức năng.
  • Vẻ ngoài hiện đại và thẩm mỹ, bảng màu rộng được sử dụng.
  • Việc sử dụng phông chữ dễ đọc (Segoe), hình ảnh theo chủ đề rõ ràng.
  • Khả năng tiếp cận, hiểu biết trực quan về chức năng cho người dùng.
  • Sự năng động. Sử dụng các hiệu ứng hoạt hình.
  • Sự hiện diện của các yếu tố vẽ tay: biểu tượng, nút ba chiều, đồ họa thông tin, tạo điều kiện thuận lợi cho nhận thức và kích thích các hành động được nhắm mục tiêu.

Phong cách thiết kế Metro phù hợp với những website nào?

Thiết kế danh thiếp Laconic và hiện đại được sử dụng trên các trang web thuộc nhiều chủ đề khác nhau: danh mục đầu tư, blog, trang web công ty, trang web danh thiếp, cửa hàng trực tuyến và thậm chí cả trang đích. Ví dụ: trang web của Microsoft trông vẫn chính xác theo phong cách metro (https://www.microsoft.com/uk-ua): trên trang chủ có các tab lớn với các sản phẩm của công ty và liên kết đến các trang có thông tin chi tiết về họ. Có những tấm thẻ ở giữa chúng chế độ xem chuẩn Với mô tả ngắn gọn và các siêu liên kết đến nội dung. Có các hiệu ứng hoạt hình - khi bạn di con trỏ, hình ảnh, nút sẽ được đánh dấu và các liên kết được nhấn mạnh. Không có yếu tố nước ngoài.

Vừa có chức năng vừa đẹp mắt, giao diện thẻ không chỉ là một xu hướng. Kể từ khi lưu lượng truy cập web trên thiết bị di động vượt qua lưu lượng truy cập trên máy tính để bàn vào năm 2014, thiết kế đáp ứng đã trở thành tiêu chuẩn ngành và các nhà thiết kế web đang tập trung nỗ lực vào màn hình nhỏ. Nhờ đó, những phong cách đơn giản như phẳng, tối giản và đặc biệt là thiệp đang trở nên phổ biến chưa từng thấy.

Mẫu thẻ thuận tiện không chỉ vì nó giảm thời gian tải trang và đơn giản hóa giao diện mở rộng cho màn hình khác nhau. Các phần nội dung nhỏ phù hợp với mức độ chú ý của người dùng web (đặc biệt là những người sử dụng thiết bị di động). Lấy cảm hứng từ Pinterest và được phổ biến bởi các mạng xã hội như Facebook Và Twitter, giao diện thẻ ngày nay có thể được nhìn thấy trên các trang web thuộc bất kỳ chủ đề nào. Trong bài viết này, chúng ta sẽ xem xét đầy đủ về mẫu giao diện người dùng thẻ: nó có điểm gì hay, nó phù hợp như thế nào với các khái niệm về thiết kế vật liệu và thích ứng cũng như những gì mong đợi từ nó trong tương lai.

Nguồn: Chính thức Có

Thiết kế dựa trên container là gì?

Để hiểu được hình mẫu, trước tiên bạn cần hiểu ý tưởng của chính lá bài.

Về cơ bản, thẻ là những vật chứa nhỏ chứa các thông tin và mỗi thẻ mang một ý nghĩ độc lập. Nó có thể chứa bất kỳ loại nội dung nào: hình ảnh, văn bản, liên kết, v.v. - tất cả các thẻ được thống nhất theo một số chủ đề chung.

Người dùng Trello có thể tạo bất kỳ thẻ nào họ muốn. Bất cứ ai cũng có thể tạo thẻ với danh sách nhiệm vụ và sắp xếp chúng theo cách họ muốn.
Ví dụ này cho thấy thẻ có thể linh hoạt như thế nào và cũng thể hiện khả năng sắp xếp thông tin của chúng. Trello nổi tiếng nhờ thẻ có vẻ đơn giản hơn đối với người dùng. danh sách thường xuyên các tác vụ được sử dụng bởi những người quản lý tác vụ khác.

Thẻ trong giao diện của trang web dành cho thiết bị di động và trang web phản hồi

Như tôi đã viết, giao diện thẻ hoạt động tốt với các khung đáp ứng, đó là lý do tại sao chính Des Traynor của Intercom đã gọi chúng là tương lai của web. Mẫu giao diện người dùng này hoạt động tốt trên các thiết bị di động vì nhiều lý do - chúng ta sẽ nói về chúng ngay bây giờ.

Nguồn: The Verge

Đầu tiên, trong các khung có thể mở rộng, cấu trúc thẻ có thể được xây dựng lại để phù hợp với bất kỳ điểm dừng hoặc kích thước màn hình nào. Các nhà thiết kế có cơ hội thử nghiệm tỷ lệ giữa chiều rộng và chiều cao của thẻ cũng như mối liên hệ giữa các nhóm thẻ với nhau. Ví dụ: thẻ có thể có chiều rộng cố định và chiều cao khác nhau khi khoảng nhất định giữa họ.

So sánh chế độ xem trên máy tính để bàn (ở trên) và thiết bị di động (bên dưới) từ The Verge:

Nguồn: The Verge (trang di động)

Hãy chú ý đến văn bản, hình ảnh, độ dốc - chúng giống nhau ở cả hai phiên bản. Thẻ cho phép bạn tạo trải nghiệm người dùng thống nhất và phát trải nghiệm đó trên tất cả các thiết bị.

Bạn có thể thấy nguyên tắc này hoạt động bằng cách truy cập trang Thư viện miễn phí dành cho nhà thiết kế trên UXPin. Hãy chú ý đến mức độ mượt mà của bố cục từ chế độ xem trên thiết bị di động đến chế độ xem toàn màn hình.

Chế độ xem trên thiết bị di động:

Nguồn: UXPin

Màn hình độ phân giải cao:

Nguồn: UXPin

Một lợi ích khác của thẻ là chúng hoạt động hiệu quả dưới dạng điều khiển bằng cử chỉ. Trên màn hình cảm ứng, thẻ biến thành nút mà không cần nỗ lực thêm. Ý tưởng rất đơn giản: chạm vào thẻ để bắt đầu tương tác với nội dung.

Tương lai của thẻ

Mẫu giao diện người dùng dựa trên thẻ không ngừng phát triển để đáp ứng những thách thức mới, hầu hết trong số đó là về thiết kế ứng dụng và đáp ứng. Như chúng tôi đã thảo luận trong Xu hướng thiết kế web 2015 & 2016, những thay đổi này một phần là do tác động của Material Design đối với các ứng dụng Android.

1. Công nghệ
Chẳng mấy chốc các thẻ có thể trở nên năng động. Khi các trang web hoạt động hiệu quả hơn, chúng có thể hỗ trợ các nội dung truyền thông phức tạp hơn. Có lẽ chúng ta sẽ thấy các yếu tố có một số lượng lớn chi tiết, chẳng hạn như nội dung tự cập nhật, trong khi tương tác với giao diện sẽ không bị chậm.


Kỳ nghỉ lễ đã kết thúc, đồng nghĩa với việc đã đến lúc phải vui lên và suy nghĩ về những kế hoạch cho tương lai, những dự án và triển vọng sắp tới. Tại Wix, theo những gì chúng tôi có thể nhớ được, chúng tôi mong chờ năm mới với sự phấn khích và tò mò. Năm 2015 đang ở phía trước và chắc chắn sẽ mang lại nhiều điều thú vị cho lĩnh vực thiết kế web.

Tất nhiên, chúng ta không thể đoán trước được mọi chuyện sẽ xảy ra, nhưng chúng ta có một số dự đoán. Bạn hãy nhớ rằng nó không chỉ thuận tiện mà còn nền tảng hiện đại, vì vậy chúng tôi theo dõi chặt chẽ mọi thứ xảy ra và biết những luồng gió thay đổi đang thổi về đâu.

Hãy thắt dây an toàn nhé các bạn thân mến, cuộc hành trình đến tương lai bắt đầu! Năm nay chúng ta sẽ thấy một số xu hướng rất thú vị:


Vật liệu thiết kế

Một kiểu thiết kế “phẳng” được phát minh bởi Google. Ý tưởng này dựa trên các kỹ thuật thiết kế truyền thống và các hiện tượng vật lý thực tế, được điều chỉnh cho phù hợp với web. Kết quả là các giao diện đa lớp có thể truyền tải các đặc tính của vật liệu, ánh sáng và mô phỏng các chuyển động từ thế giới thực. Bạn có thể tìm thấy ví dụ về giao diện này tại liên kết này.

Hoạt hình



Nút ma

Hãy quên đi những nút kêu gọi hành động hào nhoáng. Ngày nay, các yếu tố đơn giản và trong suốt tách khỏi nền đang là mốt. khung mỏng. Chúng thường lớn hơn các nút tiêu chuẩn và nằm ở vị trí dễ thấy nhất trên trang. Vẻ ngoài khiêm tốn không có nghĩa là không ai để ý hay nhấn những nút như vậy, ngược lại, mọi người rất thích sự đơn giản thanh lịch và phù hợp của chúng. Nhân tiện, chúng tôi chỉ có những yếu tố như vậy (và trên trang web Urban Cup, xu hướng này đã được sử dụng một cách tối đa).


Kể chuyện

Kể chuyện trong thiết kế web có nghĩa là trang web phải kể cho khách truy cập một câu chuyện - tất nhiên không phải theo nghĩa đen mà thông qua những cảm giác nảy sinh ở một người tại thời điểm xem. Để làm điều này, bạn có thể sử dụng hình ảnh và văn bản có liên quan về ý nghĩa hoặc cuộn tương tác để người đọc không chỉ là khán giả mà còn là người tham gia. Có rất nhiều cách để kể một câu chuyện thông qua thiết kế và chúng tôi hy vọng xu hướng này sẽ trở nên phổ biến hơn vào năm 2015. Bạn có thể xem một ví dụ tuyệt vời về cách kể chuyện trên trang Wix này.

Thiết kế thẻ

Một phiên bản linh hoạt và dân chủ hơn của cái gọi là “thiết kế ô xếp”, mà thế giới lần đầu tiên biết đến vào năm 2010 nhờ dịch vụ Pinterest. Thẻ hiện được sử dụng làm điểm bắt đầu cho việc di chuyển xung quanh trang web: đây là thông báo về tài liệu sẽ mở ra khi được nhấp vào. Trong năm tới, thiết kế thẻ sẽ phát triển hơn nữa, với nhiều phong cách và tùy chọn tương tác mới xuất hiện. Nếu bạn muốn tạo một trang web như vậy, chúng tôi khuyên bạn nên sử dụng .


Video làm nền

Video đẹp, không bị giới hạn bởi khung hình của trình phát video, trông rất ngầu và thay thế truyền thống hinh nên. Và không có gì đáng ngạc nhiên - nó mới mẻ, đẹp mắt, bạn có thể nghĩ ra điều gì đó mới mẻ bằng video và nó rất phù hợp với ý tưởng kể chuyện đã đề cập ở trên. Nền này xác định khái niệm của toàn bộ trang web, làm sống động nó và tạo ra sự năng động. Hãy xem trang web Zenit và xem nó đẹp như thế nào.


Cuộn thay vì nhấp chuột

Ví dụ tốt BẰNG giao diện di độngảnh hưởng đến thiết kế web. Sự phổ biến của các thiết bị cảm ứng đã thay đổi cách chúng ta tương tác với các trang: giờ đây hành động này đã trở nên quen thuộc và “nhấp chuột” là cách điều hướng ít trực quan và tự nhiên hơn. Hiện nay thông lệ là đăng nội dung trên một trang riêng trang dọc và chia nó không phải thành các phần mà thành các “màn hình”. Trang web Madsschou, được tạo trên Wix, minh họa ý tưởng này một cách hoàn hảo.


Tương tác vi mô

Thiết kế web năm nay sẽ bị ảnh hưởng bởi những cách mới để thu hút khách truy cập trang web. Logic là thế này: mỗi khi bạn yêu cầu một người thực hiện một hành động thì một sự tương tác sẽ được tạo ra. Động thái hướng tới tương tác vi mô là nỗ lực tạo ra càng nhiều lý do càng tốt cho một số hành động nhỏ. Các ví dụ cổ điển là một cửa sổ đăng ký e-mail hoặc một tính năng mà bạn có thể đưa ra xếp hạng. Liệu có điều gì mới mẻ trong năm 2015? Chúng tôi sẵn sàng đặt cược là có.