Thực đơn
trang chủTừ

Xu hướng mới nhất trong thế giới thiết kế web: hãy gặp Thiết kế Thẻ! Thiết kế thẻ qua nhiều thế kỷ. Màn hình độ phân giải cao

Trong thế giới thiết kế web, các xu hướng mới liên tục xuất hiện và sau đó có được động lực. Ai có thể quên tính năng cuộn thị sai, đã xuất hiện vài năm trước và vẫn còn phổ biến cho đến ngày nay? Mặc dù ở Gần đây, trang từ cuộn dài thu hút nhiều sự chú ý hơn từ khách truy cập trang web.

Một xu hướng chưa nhận được nhiều sự công nhận như những xu hướng khác và chỉ mới phổ biến được một thời gian, đó là thiết kế thiệp.

Trang web phổ biến nhất thể hiện xu hướng thiết kế này là Pinterest, nhưng có những trang web khác thường sử dụng phương pháp thiết kế này và vì lý do chính đáng. Khi khách truy cập xem một trang web sử dụng kỹ thuật thiết kế này, họ sẽ ngay lập tức nhận thấy trật tự và cấu trúc được tổ chức tốt đằng sau phương pháp thiết kế đơn giản nhưng trang nhã.

Có rất nhiều lợi ích khi sử dụng phương pháp thiết kế này trên trang web của riêng bạn.

Cách tiếp cận lưới kiến trúc thông tin

Khi nhìn vào bất kỳ thiết kế thiệp nào, bạn không thể không nhìn thấy một lưới ở lõi. Điều này là do mỗi cạnh của thẻ thực sự được tạo thành từ các lưới khác nhau trong một hệ thống lớn, được tổ chức tốt, giúp thúc đẩy tính nhất quán và hài hòa hơn trong giao diện của trang web.

Điều này, đến lượt nó, giúp ích rất nhiều cho kiến ​​trúc thông tin của trang web. Kiến trúc thông tin là thứ tự và trình tự thông minh trong đó khách truy cập của bạn cảm nhận được thông tin trang web, lý tưởng nhất là phù hợp với mục đích của từng trang và toàn bộ trang web.

Hãy thử nghĩ xem: thiết kế thiệp “dẫn tầm mắt” của khách truy cập chuỗi logic. Mỗi thẻ là một phần của một hàng hoặc cột hướng tầm nhìn của khách truy cập theo chiều ngang và thống nhất. đường thẳng đứng. Sự sắp xếp này giúp du khách hiểu được thông tin nào quan trọng hơn.

Hãy lấy Ngược lại, một tạp chí nhiếp ảnh chẳng hạn. Việc tuân theo cách bố trí lưới/thẻ sẽ giúp bạn hiểu điều gì là quan trọng nhất trong hệ thống phân cấp thông tin. Các bài viết mới nhất được đăng trên dòng trên cùng, trong khi các bài viết cũ hơn xuất hiện ở hàng dưới cùng. Tính mới lạ có xu hướng gắn liền với tầm quan trọng lớn hơn, do đó, việc tuân theo thứ tự giảm dần này trong hệ thống thẻ cho phép người dùng nhanh chóng hiểu được nội dung nào quan trọng hơn. Bằng cách này, họ có thể ưu tiên thứ tự đọc thông tin này.

Phụ thuộc nhiều vào hình ảnh

Chúng ta đã từng nghe câu nói cũ rằng con người yêu bằng mắt rất nhiều lần đến nỗi nó đã trở thành một câu nói sáo rỗng, mặc dù trong thiết kế thiệp, nó mang một ý nghĩa mới. Thiết kế thẻ hầu như chỉ dựa vào phương thức trực quan; bất kỳ bản sao nào trên cùng một trang thường chỉ là thứ yếu so với hình ảnh, theo quan điểm kiến ​​trúc thông tin.

Việc sử dụng hình ảnh là điểm mạnh thiết kế thẻ vì nghiên cứu xác nhận rằng hình ảnh thúc đẩy thiết kế web. Ví dụ: cả ảnh chất lượng cao và việc sử dụng khuôn mặt người trong ảnh đều làm tăng tỷ lệ chuyển đổi. Trên thực tế, ngoài những điều được đề cập ở trên, có một số cách khác mà nếu bạn sử dụng hình ảnh trong thiết kế của mình, bạn có thể tăng tỷ lệ chuyển đổi cho trang web của mình.

Nói cách khác, việc tập trung vào việc sử dụng hình ảnh giúp thiết kế thiệp trở nên hấp dẫn hơn đối với khách truy cập. Không phải ngẫu nhiên mà Pinterest là trang web phổ biến thứ 15 ở Mỹ theo Alexa.

Nhìn vào kết quả của Pinterest sau khi gõ từ “food” vào công cụ tìm kiếm, bạn có thể thấy hình ảnh là thứ đầu tiên đập vào mắt bạn khi bạn vào trang web. Bạn không quan tâm những gì được viết dưới những bức ảnh, ít nhất đó không phải là vấn đề quan trọng hàng đầu. Chất lượng cao, những bức ảnh rực rỡ thu hút sự chú ý của bạn và chỉ khi đó, sau khi đưa ra quyết định, bạn mới muốn biết thêm (nhưng đã từ phần trình bày của bức ảnh này), đó là lý do tại sao cuối cùng bạn lại đọc mô tả.

Cải thiện Kinh nghiệm người dùng

Bất kỳ nhà thiết kế nào cũng có thể nói với bạn rằng trải nghiệm người dùng là điều quan trọng nhất. Đây là những thứ chúng ta nên thiết kế đầu tiên và quan trọng nhất. Một lý do khác là thiết kế thẻ tạo được tiếng vang rất tốt và sẽ tiếp tục như vậy trong tương lai gần vì nó giúp ích cho trải nghiệm của người dùng. Và đây là điều khiến khách truy cập trang web quay trở lại, từ đó giúp họ dành nhiều thời gian hơn ở đó, điều này cuối cùng dẫn đến nhiều chuyển đổi hơn!

Trải nghiệm người dùng tuyệt vời tập trung vào việc mọi người có thể tìm thấy những gì họ cần trên trang web của bạn mà không gặp bất kỳ rào cản nào; Về cơ bản, họ phải tìm được thứ họ muốn và tìm thấy nó ngay lập tức mà không phải đau đầu.

Dribbble là một trang web hiểu rõ điều này vì các nhà phát triển của nó đã sử dụng thẻ để giúp trải nghiệm người dùng dễ dàng và tốt hơn. Trang web này nổi tiếng trực tuyến cộng đồng sáng tạo như một mẫu cho do người dùng tạo nghệ thuật.

Ý tưởng của trang web là để mọi người chiêm ngưỡng các hình minh họa, đồ thị và hình ảnh đủ loại, vì vậy thiết kế thẻ thực sự là thứ tuyệt vời nhất cách thích hợpđể thực hiện một ý tưởng như vậy. Vì hình ảnh thu hút ánh nhìn của khách truy cập một cách hiệu quả và ngay lập tức nên trải nghiệm người dùng được nâng cao đáng kể khi khách truy cập có thể nhanh chóng quét thẻ theo bố cục dạng lưới để xem thẻ nào khiến họ quan tâm. Khi họ nhìn thấy thứ gì đó mà họ quan tâm, họ có thể nhấp ngay vào thẻ để xem kỹ hơn.

Một trang web như Dribbble cho phép khách truy cập tìm thấy địa điểm họ đang tìm kiếm một cách cực kỳ thuận tiện. Đây là hình ảnh thu nhỏ của trải nghiệm người dùng tuyệt vời!

Lý tưởng cho thiết kế di động

Bạn có thể đã nghe điều đó thiêt bị di độngđã vượt qua máy tính để bàn số lượng lớn người dùng. Chỉ riêng năm 2015 ở Mỹ, việc sử dụng điện thoại di động truyền thông kỹ thuật số phương tiện thông tin đại chúngđạt 51% so với máy tính để bàn, người có 42%. Thiết kế dựa trên thẻ là lý tưởng vì nó tính đến xu hướng này đồng thời dễ dàng tương thích với các khung đáp ứng. Bởi vì thẻ cung cấp nội dung ở dạng “khối dễ tiêu hóa”, giúp hiển thị dễ dàng hơn trên hệ thống di động.

Hãy nhìn các thẻ theo quan điểm này: hình dạng và kích thước của chúng gần như bắt chước hình dạng và kích thước của điện thoại thông minh hoặc máy tính bảng. Tất nhiên, không hoàn toàn giống nhau hoàn toàn do số lượng lớn nhiều mô hình có sẵn, nhưng vẫn khá giống khi nhìn từ góc độ tỷ lệ khung hình.

Kết quả là, thẻ sẽ không bao giờ hết sử dụng chừng nào nhu cầu về thiết bị di động và Internet tăng lên và không có dấu hiệu nào cho thấy việc sử dụng thẻ sẽ sớm chậm lại.

Đây không chỉ là một mốt khác

Vấn đề với một số xu hướng thiết kế là chúng trở thành mốt nhất thời, khiến chúng tồn tại trong thời gian ngắn và không thể ghi nhớ được. Mặc dù vậy, thiết kế thiệp có thể là một ngoại lệ! Bởi vì số lượng lớn ứng dụng thực tế và những lợi ích mà nó mang lại, nó sẽ chỉ trở nên phổ biến hơn theo thời gian. Điều này có nghĩa là anh ta sẽ "sống sót".

Nó đảm bảo tính nhất quán trong kiến ​​trúc thông tin của các trang web và hỗ trợ nỗi ám ảnh của người dùng về hình ảnh rõ ràng, từ đó hoạt động như một cách để tăng lưu lượng truy cập trang web. Do đó, toàn bộ trải nghiệm của người dùng cũng được hưởng lợi rất nhiều từ thiết kế thẻ đơn giản vì nó thực sự giúp người dùng tìm thấy những gì họ cần trên trang web dễ dàng hơn. Nhờ sự tăng trưởng Internet di động V. cặp đôi cuối cùng Trong nhiều năm, cách tiếp cận thiết kế này đã trở thành một xu hướng chủ đạo mà ngày càng có nhiều người tiếp cận và yêu thích.

Ý tưởng về thẻ thực chất là một khái niệm cũ nhưng nó đã được thử lại và cập nhật theo một cách tiếp cận mới trong thiết kế web. Đây chỉ là một ví dụ để cho bạn thấy rằng những nhà thiết kế có đầu óc sáng tạo có thể biến những thứ cũ kỹ và trần tục thành thứ gì đó cực kỳ phù hợp và hữu ích trong thế kỷ 21.

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ỏ. Kết quả là họ đang trở nên nổi tiếng chưa từng thấy phong cách đơn giản chẳng hạn như phẳng, tối giản và đặc biệt là thẻ.

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 những màn hình cảm ứng thẻ biến thành các 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ố đó sẽ ảnh hưởng đến thiết kế thích ứng và thiết kế ứng dụ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.

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 khoảng cách dòng. Một lượng không khí rất lớn sẽ giúp bạn tạo ra thiết kế mở và sắp xếp nội dung 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ể làm 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. (Tương tự như ở đang chơi bài, phần 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 phong cách chung thẻ 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 Vật liệu thiết kế các tính chất vật lý của giấy được chuyển lên 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ữ, thông thường nhất giải pháp tốt nhất sẽ phông chữ đơn giản sans serif. 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. Khác tâm điểm Một điều cần lưu ý 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. Phấn đấu gần gũi hơn với thực tế, chọn sự tối giản với một lượng lớn 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 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ế 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



Thẻ lần đầu thiết kế phẳngđã được trình bày 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 xem từng thành phần giao diện hoạt động như thế nào, đặc biệt là trong phiên bản điện thoạiđịa điểm. 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ế 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 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. 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 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. Kiểu thẻ có những nét đặ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.