Thực đơn
trang chủMạng xã hội

Xu hướng mới nhất trong thế giới thiết kế web: hãy gặp Thiết kế Thẻ! Bí quyết thiết kế thiệp hiệu quả - SkillsUp - catalog tiện lợi gồm các bài học về thiết kế, đồ họa máy tính, bài học Photoshop, bài học Photoshop

Nhờ sự hấp dẫn trực quan, 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ế đáp ứng đang trở thành điều 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, đã có 54% người Nga sử dụng Internet di động. Nhờ đó, những phong cách giao diện đơn giản như thiết kế phẳng mới, sự tối giản và đặc biệt là thiệp giờ đây đượ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ỉ dừng lại ở thời gian tải nhanh và khả năng thích ứng với các kích thước màn hình khác nhau. 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ẻ có 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”. Nó cung cấp một giao diện sạch sẽ và rõ ràng, lý tưởng để duyệt nhanh, vì vậy người dùng có thể dễ dàng tìm thấy những gì họ đ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 lờ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 thiết kế web thích ứng, thẻ cho phép bạn có được thiết kế nhất quán trên các thiết bị khác nhau. Bạn có thể thấy lợi ích này trong Phòng thí nghiệm thiết kế UXPin miễn phí. Hãy chú ý cách bố cục chuyển từ phiên bản di động sang chế độ xem toàn màn hình rõ ràng như thế nào.

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

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

Một lợi ích khác là thiết kế dựa trên thẻ tương thích với cảm ứng. Trên màn hình cảm ứng, thẻ đóng vai trò là nút bấm. Ý tưởng rất đơn giản: nhấp vào thẻ để truy cập nội dung. Như Định luật Fitts áp dụng cho thiết kế web cho thấy, nút bấm càng lớn thì càng dễ thao tác. 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

Thiết kế vật liệu, 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 để lấp đầy trang chủ với 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 với thiết kế vật liệu, các thẻ khác nhau về mức độ tương tác giữa chúng và môi trường, chẳng hạn như tự động sắp xếp và cập nhật theo thời gian thực (ví dụ: 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ờ Google Glass, thẻ giờ đây đã trở thành yếu tố cốt lõi trong thiết kế giao diện người dùng cho các 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.

Bạn có muốn phát triển giao diện kiểu thẻ hợp thời trang không? Đây có lẽ không phải là một ý tưởng tồi. Thẻ rất phổ biến và thân thiện với người dùng, phù hợp với mọi loại thiết kế kỹ thuật số và kích thước màn hình. Chìa khóa để thiết kế theo phong cách thẻ thành công là tạo ra thứ gì đó mà người dùng muốn nhấp vào. Thẻ phải đóng vai trò là nơi chứa nội dung cụ thể—liên kết, biểu mẫu đăng nhập, trình phát video, v.v.—mà người dùng sẽ muốn tương tác. Đây là cách tạo ra thiết kế này.

Bắt đầu với đường viền màu đen và trắng

Nghe có vẻ rất đơn giản: hãy bắt đầu với một mô hình đen trắng cho thiết kế của bạn. Hãy suy nghĩ về mục đích của thẻ và phần nào trong đó có thể nhấp vào được. (Toàn bộ thẻ có thể dùng làm liên kết.)

Lập kế hoạch cho các yếu tố: khoảng trắng, hình ảnh và kiểu chữ để bạn có thể nhìn thấy tấm thiệp mà không cần màu sắc hoặc thiết kế. Hãy coi nó như giai đoạn thiết kế thẻ trò chơi. Tất cả các yếu tố bản đồ đều được đặt đúng chỗ. Bố cục có dễ hiểu không?

Hãy suy nghĩ về cách bạn sẽ sử dụng các thẻ ở giai đoạn này. Bạn bấm vào đâu để thực hiện hành động này hoặc hành động kia? Cấu trúc và kết quả có rõ ràng không? Bạn sẽ quay lại như thế nào, hay ngược lại, tiến một bước? Câu trả lời cho những câu hỏi này phải rõ ràng mà không cần nhắc nhở, chẳng hạn như biển báo “Bấm vào đây” màu đỏ.

Cũng như các dự án khác, nếu một thiết kế không hoạt động với màu đen trắng thì phiên bản cuối cùng được thiết kế đầy đủ cũng sẽ không hoạt động.

Sử dụng nhiều không gian trống

Điều khó nhất khi thiết kế theo phong cách thiệp là không làm cho nó trông lộn xộn và quá đông đúc. Đây là nơi không gian đóng một vai trò lớn. Và bạn sẽ muốn sử dụng không gian trống ở mức độ lớn hơn nhiều so với mức độ thoải mái.

Sự dồi dào của “không khí” sẽ mang lại không gian cho các yếu tố thiết kế, làm cho tất cả các thẻ trở nên rộng rãi hơn về mặt hình ảnh và tăng khả năng đọc.

Có thể bạn sẽ muốn bắt đầu với khoảng cách gấp đôi thông thường giữa các phần tử. Khoảng cách giữa các thẻ phải lớn và bạn cũng có thể tăng dung lượng trống bằng cách sử dụng giãn cách dòng. Một lượng không khí rất lớn sẽ giúp bạn tạo ra một thiết kế mở và sắp xếp nội dung của bạn một cách rõ ràng nhất. Thẻ có kích thước giới hạn và phải vừa với màn hình điện thoại thông minh, cũng như thay đổi kích thước một cách hợp lý và cân đối cho màn hình máy tính bảng và màn hình. Trên màn hình lớn, các thẻ cũng có thể khiến người dùng mất tập trung vào nhau. Việc thêm “không khí” sẽ làm cho thiết kế tổng thể có cảm giác cởi mở hơn và dễ dàng đi sâu vào.

Thêm màu sắc và sắc thái tự nhiên

Bây giờ bạn đã sẵn sàng suy nghĩ về màu sắc và sắc thái cho thiết kế của mình. Cố gắng tạo cho nó một cái nhìn tự nhiên và mang lại cái nhìn thực tế cho các tấm thiệp bằng cách sử dụng bóng và kiểu dáng.

Đây không phải là về chủ nghĩa đa dạng mà là về việc tạo ra màu sắc với các đường viền và bóng tự nhiên. Hãy nghĩ xem một tấm thiệp thật sẽ trông như thế nào. Người dùng sẽ có cảm giác như thể họ đang cầm thẻ trên tay.

Sử dụng một số quy tắc vật lý áp dụng khi bạn cầm lá bài trên tay:

  • Ánh sáng sẽ tạo bóng ở phía dưới và phía dưới tấm thiệp.
  • Phần tối nhất của thiết kế nằm ở phần dưới cùng của thiết kế vì thông thường khi bạn cầm lá bài trên tay, ánh sáng sẽ chiếu từ phía trên xuống.
  • Tránh đăng nội dung ở những nơi bạn sẽ cầm thẻ trên tay.
  • Điểm tiếp xúc (lời kêu gọi hành động, v.v.) phải là trọng tâm và các tương tác phải dễ dàng và rõ ràng. (Giống như chơi bài, yếu tố chính nằm ở trung tâm của thiết kế.)
  • Một thẻ - một đơn vị thông tin.

Giữ nó đơn giản

Bây giờ, hãy ghi nhớ các đặc tính vật lý, hãy chuyển sang bước tiếp theo - tạo kiểu thẻ chung cho toàn bộ giao diện. Bạn không biết bắt đầu từ đâu? Một điểm khởi đầu tuyệt vời sẽ là Hướng dẫn thiết kế vật liệu từ Google.

“Trong Material Design, các đặc tính vật lý của giấy được chuyển sang màn hình. Nền của ứng dụng là kết cấu phẳng, đồng nhất của một tờ giấy.

Các thành phần của ứng dụng hoạt động giống như tờ giấy - chúng cũng thay đổi kích thước, được cuộn qua và tập hợp lại thành một chồng. Các thành phần bên ngoài ứng dụng, chẳng hạn như thanh trạng thái, hoạt động khác nhau. Chúng tách biệt với nội dung trong ứng dụng và không kế thừa các đặc tính vật lý của tờ giấy."

Hãy ghi nhớ những nguyên tắc này và cố gắng tạo ra một đối tượng kỹ thuật số trông giống như một đối tượng vật lý. Nếu người dùng muốn chạm vào nó, họ sẽ nhấp vào nó. Khái niệm này rất đơn giản.

Chọn phông chữ đơn giản

Khi nói đến kiểu chữ, phông chữ sans serif đơn giản thường là giải pháp tốt nhất. Tránh sử dụng phông chữ quá mỏng hoặc hẹp vì chúng có thể gây khó chịu cho mắt.

Hầu hết các thẻ sẽ hoạt động tốt với hai phông chữ (ngay cả khi chúng thuộc cùng một họ)—một cho văn bản tổng thể và một cho tiêu đề hoặc lời kêu gọi hành động. Một điều quan trọng khác cần nhớ khi làm việc với kiểu chữ là độ tương phản, điều này sẽ giúp văn bản dễ đọc hơn. Hãy đảm bảo xem xét độ tương phản giữa các phông chữ, giữa nền và văn bản cho mỗi tấm thiệp.

Giới hạn các thành phần UI

Hãy nhớ: một lá bài bằng một hành động.

Điều này có nghĩa là bạn không cần phải phân tán nhiều thành phần giao diện trong suốt thiết kế, chẳng hạn như các nút. Bạn có thể không cần chúng chút nào. Nhưng nếu bạn vẫn nghĩ rằng người dùng cần một dấu hiệu trực quan thì một nút là đủ.

Giữ hình dạng và thiết kế đơn giản—một lần nữa, Material Design là một lựa chọn tuyệt vời—và cố gắng không tạo nhiều hơn một nút.

Các nút có lẽ là thành phần giao diện người dùng duy nhất bạn cần. Hãy phấn đấu vì nó.

Phần kết luận

Không có công thức kỳ diệu nào cho thiết kế kiểu thẻ hoàn hảo nhưng có những kỹ thuật cụ thể sẽ lôi kéo người dùng nhấp vào nơi bạn muốn. Cố gắng gần gũi hơn với thực tế, chọn phong cách tối giản với nhiều không khí và độ tương phản, ưu tiên kiểu chữ đơn giản và chỉ ra một hành động cho mỗi thẻ.

Phiên dịch – Phòng trực

Thiết kế web rất năng động. Chúng tôi liên tục thấy diện mạo của các trang web thay đổi như thế nào 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ẻ.

Trong trường hợp này, thẻ 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à có khả năng tự cung cấp.

Có lẽ phép ẩn dụ tốt nhất để mô tả thiết kế thiệp là câu nói sau: “Tấm thiệp tuy 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ế phẳng dựa trên thẻ được Microsoft giới thiệu lần đầu tiên vào năm 2006 và dựa trên phong cách thiết kế Metro GUI, trông khá chắc chắn và nhiều màu sắc. Đúng, trong phiên bản hiện đại của nó, độ dốc, bóng và hình 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 hoạt động như một “đoạn giới thiệu”, tức là chúng thu hút khách truy cập đến thông tin chi tiết hơn 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 tạp chí và cổng tin tức, nhưng cũng phù hợp với các trang web có nhiều nội dung khác 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ẻ trên 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ả?

Có một số lý do tại sao thiết kế theo 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 nội dung khác nhau và cũng giúp bạn dễ dàng tiếp thu hơn.
  • 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.

Không có quy tắc cố định nào cho kiểu thiết kế này. Tuy nhiên, hai yếu tố hầu như luôn hiện diện trong các bố cục thẻ hiệu quả là sự đơn giản và nội dung phong phú. 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ả.

Nhiều khoảng trắng xung quanh mỗi thành phần 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 trong 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 nội dung quan trọng nhất để cân bằng sức nặ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 khung lưới sẽ thêm độ tương phản và cũng đảm bảo khoảng cách bằng nhau giữa các thẻ và các thành phần 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 không chỉ cần suy nghĩ 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ế thẻ hoàn tất, bước tiếp theo là xác định thẻ sẽ chứa những 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à thông qua việc 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 trải nghiệm người dùng tuyệt vời. 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 để nhanh chóng tiếp thu lượng lớn thông tin và thiết kế thẻ cho phép họ thực hiện điều 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. Theo các nhà phát triển của công ty, ưu điểm của phong cách này là kiểu dáng thời trang và 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 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 vẫn trông giống hệt một tàu điện ngầm (https://www.microsoft.com/uk-ua): trên trang chính có các tab lớn chứa 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ề chúng. Giữa chúng là các thẻ có giao diện 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ẻ tiện lợi không chỉ vì nó giảm thời gian tải trang và đơn giản hóa việc chia tỷ lệ giao diện cho các 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 trở nên phổ biến vì thực tế là các thẻ có vẻ đơn giản hơn đối với người dùng so với các danh sách nhiệm vụ thông thường được các trình quản lý tác vụ khác sử dụng.

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 với khoảng cách xác định giữa chúng.

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. Chúng tôi có thể thấy các yếu tố chi tiết hơn, chẳng hạn như nội dung tự làm mới mà không làm chậm trải nghiệm người dùng.