Thực đơn
trang chủWindows 10

Bí quyết thiết kế thiệp hiệu quả - SkillsUp - danh mục 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. Bí mật thiết kế web phong cách thẻ

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 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 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à 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.

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 ngày 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 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ế 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.

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 “Nhấp 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 thì á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à sự 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 tới 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

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à co lại, 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. 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.

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, các trang có cuộn dài đang 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 thanh lịch.

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 đối vớ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 suy nghĩ về điều này: thiết kế thẻ “dẫn tầm mắt” của khách truy cập theo một con đường hợp lý. Mỗi thẻ là một phần của hàng hoặc cột hướng tầm nhìn của khách truy cập dọc theo các đường ngang và dọc thống nhất. 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 xuất hiện ở hà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 xưa 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.

Sử dụng hình ảnh là một thế mạnh của 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. Những bức ảnh chất lượng cao, 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 trải 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 trong cộng đồng sáng tạo trực tuyến như một hình mẫu cho nghệ thuật do người dùng tạo ra.

Ý tưởng của trang web là để mọi người chiêm ngưỡng các hình minh họa, đồ họa và hình ảnh đủ loại, vì vậy thiết kế thẻ thực sự là cách phù hợp nhất để thực hiện ý tưởng đó. 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 vị trí mong muốn của họ một cách siêu tiện lợi. Đâ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 nói rằng thiết bị di động đã vượt qua máy tính để bàn với số lượng người dùng khổng lồ. Chỉ riêng năm 2015 tại Mỹ, tỷ lệ sử dụng phương tiện kỹ thuật số trên thiết bị di động đạt 51% so với máy tính để bàn là 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. Đúng là không hẳn là một hình ảnh hoàn hảo do có nhiều mẫu khác nhau có sẵn, nhưng vẫn là một hình ảnh 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 được sử dụng miễn là 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. Tuy nhiên, thiết kế thiệp có thể là một ngoại lệ! Do có nhiều công dụng và lợi ích thiết thực mà nó mang lại nên 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ự phát triển của Internet di động trong vài năm gần đây, phương pháp thiết kế này đang trở thành một phương pháp thiết kế chủ yếu được ngày càng nhiều người trải nghiệm 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.