Thực đơn
trang chủAndroid

Thủ thuật thẻ: sử dụng thẻ trong thiết kế web. Cách tiếp cận lưới đối với kiến ​​trúc thông tin. Đây không chỉ là một mốt khác

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 để nâng cao khả năng sử dụng và dễ nhận biết số 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.
  • Hiện đại và thẩm mỹ vẻ bề ngoài, 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.

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ế thành công trong phong cách thẻ— 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 tính chất vật lý, hãy chuyển sang bước tiếp theo- sự sáng 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ữ, giải pháp tốt nhất thường là 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. 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

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 tiếp tục quay lại, từ đó giúp họ dành nhiều thời gian hơn ở đó, cuối cùng dẫn đến hơn chuyển tiếp!

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ệ! Do 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ì vậy, trong bài viết này, tôi sẽ giải thích cho bạn “thiết kế thẻ” là gì và nó ảnh hưởng như thế nào đến thiết kế web nói chung.

Chiều cao công nghệ di động dần dần dẫn đến sự thay đổi về kiến ​​trúc website theo hướng đáp ứng và thích ứng. Hai tham số này đã trở thành bắt buộc. Những sự kiện này đã góp phần tạo nên thành công vang dội của “maps” - một trong những xu hướng thiết kế web chủ đạo năm 2015.

Tuy nhiên, chúng tôi có thể tự tin nói rằng bản đồ không chỉ là một mốt thiết kế nhất thời mà còn là tương lai của việc phát triển web. Cách tốt nhất sắp xếp và hiển thị nội dung một cách mạch lạc. Vì vậy, trong bài viết này, tôi sẽ giải thích cho bạn “thiết kế thẻ” là gì và nó ảnh hưởng như thế nào đến thiết kế web nói chung. Đi!

Thiết kế thiệp qua các thời đại

Mặc dù bản đồ chỉ mới trở nên cực kỳ phổ biến trong thiết kế web gần đây nhưng chúng đã được phương tiện hiệu quả giao tiếp bằng hình ảnh đã có ít nhất một nghìn năm tuổi. Lần đầu tiên được giới thiệu như một trò chơi ở đế quốc Trung Quốc vào thế kỷ thứ 9, thẻ bài sau đó đã trở nên hữu ích trong thế giới kinh doanh.

Thật vậy, vào thế kỷ 17, “ thẻ giao dịch", Với sự giúp đỡ của họ, mọi người đã tìm được việc làm: đây là ví dụ đầu tiên về "danh thiếp" hiện đại.

Ngày nay, thẻ thường là một dạng phiếu giảm giá từ cửa hàng hoặc siêu thị, người ta sưu tập chúng để được giảm giá đặc biệt.

Hầu hết chúng ta chỉ cần nhìn vào ví của mình là có thể thấy thẻ tín dụng, thẻ khách hàng thân thiết, thẻ cửa hàng và thậm chí cả thẻ thường xuyên bằng lái xe. Tất cả các thẻ này đều có tiêu chuẩn riêng.

Trong mọi trường hợp, có một mối liên hệ chặt chẽ giữa việc sử dụng bản đồ truyền thống và việc sử dụng chúng trong thiết kế web: thẻ thông thường chứa thông tin ở cả hai bên và bản đồ web chuyển hướng người dùng xem thêm nội dung.

Bản đồ trên Internet là gì?

Từ góc độ internet, chúng ta có thể định nghĩa “thẻ” là một hình chữ nhật nhỏ gắn liền với một ý nghĩ cụ thể. Các thẻ đã đầy yếu tố tương tác, chẳng hạn như văn bản, liên kết hoặc hình ảnh. Nhưng tất cả đều phục vụ cùng một mục đích - hướng bạn đến nội dung tiếp theo.

Mục đích chính của thẻ là cung cấp Đánh giá ngắn một chủ đề nhất định trong một không gian hạn chế. Và nếu người đọc quan tâm đến tin tức, anh ta có thể truy cập trang mới với đầy đủ văn bản. Các trang web Facebook hoặc Twitter tận dụng những lợi ích này và đã kết hợp mẫu thẻ vào thiết kế của họ, hiển thị lượng lớn nội dung trong khi tiết kiệm không gian quý giá.

Như vậy, nhất đặc điểm quan trọng thẻ là một ý tưởng tương tác tương tác. Trong quá trình phát triển, các nhà thiết kế phải cân nhắc rằng bản đồ không chỉ đóng vai trò là cách hiển thị tin tức mà còn phải thu hút sự chú ý của người đọc. Chính vì vậy mà các thẻ hiển thị like, repost, hoặc link tới toàn văn bài viết.

Ngoài tính hữu dụng của chúng, bản đồ là một lựa chọn thiết kế phổ biến do khả năng tương thích của chúng với các khung đáp ứng. Cấu trúc Chunked có thể được sử dụng để tạo giao diện hấp dẫn và lý tưởng cho việc phát triển ngôn ngữ. nền tảng di động. Hình dạng của thẻ cực kỳ giống với thẻ điện thoại thông minh hiện đại.
Chúng ta thường nói về bố cục “linh hoạt”. Bản đồ cung cấp cho chúng ta những phần nội dung nhỏ mà chúng ta có thể “lấp đầy” trang bên dưới kích cỡ khác nhau và hình dạng màn hình.

Tại sao bạn nên sử dụng thẻ?

Vì thẻ đã trở nên phổ biến nên chúng có thể được sử dụng theo nhiều cách khác nhau tùy thuộc vào chức năng cần thiết. Dưới đây là một số lý do tại sao nên sử dụng thẻ:

Đây là một xu hướng: Xu hướng có tính chất tạm thời nhưng bằng cách sử dụng bản đồ, bạn có thể làm cho trang web của mình nổi tiếng một cách hiệu quả.

Bản đồ giới thiệu thứ tự: Bản đồ giới thiệu các lớp tổ chức nội dung.

Thẻ rất lý tưởng cho thiết kế đáp ứng: chúng dễ dàng phù hợp với các trang web và ứng dụng di động. Quan trọng nhất, trên điện thoại thông minh, các thẻ có thể dễ dàng xếp chồng lên nhau theo chiều dọc, tạo nên nguồn cấp tin tức.

Bản đồ khuyến khích tính kinh tế của tư duy: do kích thước của chúng, bản đồ sẽ không bao giờ có thể lưu trữ lượng lớn thông tin. Thoạt nhìn điều này có vẻ như là một nhược điểm, nhưng tôi nghĩ đó là một điều tuyệt vời! Thẻ phải hiển thị một đoạn văn ngắn từ toàn bộ bài viết, khuyến khích người đọc quan tâm theo liên kết.

Chúng mang tính xã hội: thẻ rất lý tưởng cho truyền thông xã hội, không chỉ vì khả năng sử dụng của chúng trên mạng xã hội mà còn vì thẻ giúp người dùng chia sẻ thông tin dễ dàng hơn qua nhiều kênh khác nhau. nền tảng xã hội và qua đường bưu điện.

Xu hướng hiện đại và các cách tiếp cận trong phát triển web

Tìm hiểu thuật toán để tăng trưởng nhanh chóng từ đầu trong việc xây dựng trang web

Tầm quan trọng của nội dung được san bằng: bản đồ giúp bạn quyết định bài viết nào là tốt nhất để đặt ở đầu trang. Khi sử dụng bản đồ, các khối nội dung có tầm quan trọng như nhau có thể dễ dàng cùng tồn tại trên cùng một trang mà không cần phải xếp hạng chúng. Người dùng quyết định điều gì là quan trọng đối với anh ta và điều gì anh ta muốn đọc.

Ai sử dụng thẻ?

Dribbble

Bố cục của trang web dựa trên các thẻ chứa hình ảnh và một số thông tin về từng thiết kế. Điều tôi thích ở Dribbble là bạn có thể nhấp vào thẻ và xem tất cả các chi tiết liên quan đến thiết kế, đồng thời bạn cũng có thể chỉ cần di chuột qua thẻ và xem một chút mô tả.

Pinterest

Khi nói đến thiết kế thiệp, chúng ta không thể không nhắc đến Pinterest. Trên thực tế, nhiều người cho rằng Pinterest đi tiên phong trong việc thiết kế thẻ. Pinterest thể hiện rõ ràng “tầm quan trọng của tất cả nội dung”; không có thẻ nào trên trang web nổi bật về mặt hình ảnh.

Twitter, sử dụng giới hạn 144 ký tự cho mỗi tin nhắn, đã ra đời với tính năng "tích hợp sẵn bố trí thẻ" Năm ngoái mạng xã hộiđã tung ra sản phẩm của riêng mình có tên Twitter Cards, một ứng dụng được thiết kế để giúp bạn lập bản đồ nội dung của mình khi đăng lên hệ thống. Các nhà phát triển mô tả ứng dụng của họ có thể:

“đính kèm nhiều ảnh, video và nội dung đa phương tiện khác vào các tweet của bạn, điều này sẽ thúc đẩy lưu lượng truy cập đến trang web của bạn”

Kết quả là, nhà trang Twitter bây giờ đầy thẻ tweet. Khi bạn nhấp vào một trong số chúng, tweet sẽ mở rộng để hiển thị nội dung bổ sung hoặc các tùy chọn.

Người bảo vệ

Tờ báo nổi tiếng của Anh The Guardian đã áp dụng thiết kế thẻ cho trang web của mình nhằm “suy nghĩ khác biệt và cải thiện khả năng khám phá và quảng bá nội dung”.

Họ đã có thể tạo ra một thiết kế mô-đun bao gồm thẻ khác nhau: Mỗi cái được liên kết với một tiêu đề và khi được nhấp vào, nó sẽ chuyển hướng bạn đến toàn bộ nội dung của bài viết. Trang web gợi lên một cảm giác sang trọng và sạch sẽ.

Phần kết luận

Bản đồ là một phương pháp hữu ích để tạo các trang web hấp dẫn và chúng cũng cực kỳ linh hoạt, cho phép bạn triển khai nhiều bố cục khác nhau. Tất cả điều này là để đảm bảo rằng người dùng hài lòng với trang web. Thị phần máy tính bảng và điện thoại thông minh ngày càng tăng cũng sẽ đưa thiết kế thẻ lên hàng đầu trong thiết kế web trong một thời gian dài.

Giao diện thẻ là một trong những xu hướng được ưa chuộng nhất những năm gần đây. Nó thân thiện với người dùng và thích ứng hoàn hảo với các loại khác nhau thiết bị.

Một thiết kế thiệp thành công trông như thế nào? Để người dùng muốn bấm vào thẻ và làm quen với nội dung ẩn đằng sau nó. Thẻ sẽ đóng vai trò là nơi chứa nội dung cụ thể - văn bản, biểu mẫu đăng ký, video.

Làm nghề tự do.Hôm nay sẽ cho bạn biết cách thiết kế thành công một thiết kế danh thiếp cho trang web của bạn.

Bắt đầu với bố cục đen trắng

Bắt đầu thiết kế của bạn với wireframe màu đen và trắng. Hãy suy nghĩ về từng thẻ và nội dung nào sẽ ẩn sau nó.

Lập kế hoạch cho các yếu tố như khoảng cách, hình ảnh và phông chữ, đồng thời xem xét các thẻ không có màu sắc hoặc hình ảnh. Xem cách mỗi thẻ hoạt động trong giai đoạn thiết kế. Tất cả các yếu tố của bản đồ đều ở đó. Có dễ hiểu tại sao cô ấy lại ở đây không? Bạn sẽ bấm vào nó? Cấu trúc phải rõ ràng, không có nút "Bấm vào đây" nhấp nháy màu đỏ.

Như với bất kỳ thiết kế nào, nếu đường viền không hoạt động với màu đen trắng thì thiết kế cuối cùng cũng có thể không hoạt động.

Để lại nhiều khoảng trắng hơn giữa các thẻ

nhất một vấn đề lớn Khi bắt tay vào thiết kế những tấm thiệp nhỏ gọn, điều quan trọng không phải là tạo ra một bầu không khí lộn xộn. Đây là nơi không gian có ích. Vậy thì sao nhiều không gian hơn, nó sẽ càng thoải mái hơn cho người dùng.

Thêm khoảng trắng sẽ giúp các phần tử có nhiều không gian hơn để thở; điều này sẽ làm cho bức tranh tổng thể rộng rãi hơn và có tác động tốt đến khả năng đọc.

Bạn có thể đặt khoảng cách gấp đôi khoảng cách bình thường. Không gian thêm sẽ giúp bạn tạo ra một thiết kế mở và sắp xếp nội dung rõ ràng hơn.

Các bản đồ có thể cạnh tranh với nhau để thu hút sự chú ý của người dùng trên màn hình lớn. Việc thêm khoảng trắng sẽ giúp thiết kế dễ đọc hơn.

Thêm màu sắc và bóng tự nhiên

Bây giờ là lúc nghĩ về màu sắc và độ bóng cho thiết kế. Bám sát màu sắc tự nhiên và bắt chước thực tế trong phong cách thiết kế.

Không, ở đây chúng ta không nói về chủ nghĩa đa dạng, chúng ta đang nói về việc tạo ra màu sắc bằng các đường viền và bóng tự nhiên. Hãy suy nghĩ về cách thẻ sẽ được xem. Người dùng sẽ có cảm giác giống như thể họ đang cầm thẻ trên tay trên thực tế.

Việc sử dụng một số quy tắc vật lý cơ bản sẽ cho phép bạn trình bày thiết kế của từng tấm thiệp một cách tự nhiên hơn:

Ánh sáng sẽ tạo ra một số bóng ở nền và phía dưới;

Phần tối nhất của thiết kế phải là phần dưới cùng của hình ảnh, do điều kiện ánh sáng thường rơi từ trên xuống.

Các nút và lời kêu gọi hành động phải được đặt ở vị trí sao cho dễ tương tác.

Không nên có nhiều hơn một thông điệp thông tin trên một thẻ.

Tạo các lớp đơn giản

Sử dụng các lớp đơn giản và tạo phong cách thống nhất bản đồ cho toàn bộ giao diện. Bạn không biết bắt đầu từ đâu? Nguyên tắc thiết kế Material Design của Google có thể phục vụ như là một hướng dẫn cho bạn.

TRONG vật liệu thiết kế các tính chất vật lý của giấy được dịch lên màn hình. Nền của ứng dụng trông giống như kết cấu phẳng, mờ đục của một tờ giấy. Kết quả là đối tượng kỹ thuật số trông như thật và người dùng muốn chạm vào nó thì nhấp vào bản đồ. Khái niệm này cực kỳ đơn giản và được đảm bảo để hoạt động.

Sử dụng phông chữ đơn giản

nhất Quyết định tốt nhất là một phông chữ sans serif đơn giản. Để tránh gây khó đọc, hãy tránh các tùy chọn quá mỏng hoặc dày. Trên hầu hết các bản đồ, hai phông chữ khác nhau (ngay cả khi chúng thuộc cùng một họ) hoạt động tốt—một cho tiêu đề và một cho phần lớn văn bản.

Điều gì khác là quan trọng cho khả năng đọc? Đảm bảo bao gồm độ tương phản giữa màu phông chữ và nền của mỗi thẻ.

Giới hạn số lượng thành phần UI

Một thẻ - một hành động. Đây là một tiên đề.

Điều này có nghĩa là bạn không nên bao gồm nhiều thành phần giao diện người dùng giao diện người dùng, chẳng hạn như các nút. Chúng trông không đẹp chút nào trên bản đồ và thực sự không cần thiết ở đó.

Nhưng nếu bạn cho rằng người dùng cần hướng dẫn hành động bằng hình ảnh thì chỉ cần một nút là đủ. Giữ hình dạng và thiết kế đơn giản.

Có lẽ nút bấm là thành phần giao diện duy nhất bạn cần.

kết luận

Không có công thức kỳ diệu nào để tạo ra thiết kế thiệp hoàn hảo, nhưng có những giải pháp thiết kế khuyến khích mọi người dùng nhấp vào thẻ. Thực hiện theo cách tiếp cận tối giản ngay từ đầu, chừa nhiều khoảng trắng hơn, tập trung vào phông chữ đơn giản, tạo hành động riêng cho từng thẻ.

Kết quả là một thiết kế thiệp thân thiện với người dùng và trông thật tuyệt vời.