Bí quyết thiết kế web theo phong cách thẻ. Thiết kế thiệp - Hướng dẫn cơ bản

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 đáp ứng

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 một thẻ duy nhất Kinh nghiệm người dùng và phát nó 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 trang web 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.

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

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ẻđã có những thay đổi đáng kể kể từ khi thành lập. 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 một số lượng lớn nội dung như blog hoặc danh mục đầu tư và 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ẻ thật là 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, 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ả.

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

Sắp xếp thẻ

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

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

Thiết kế thẻ là một trong những định dạng bố cục trang web linh hoạt nhất, cho phép bạn tạo ra 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.

Và cho dù bạn cảm thấy thế nào về khái niệm này, thẻ đã có vị trí vững chắc trong thiết kế.

Thẻ là gì?

Đây là những hình chữ nhật nhỏ có hình ảnh và văn bản đóng vai trò là điểm khởi đầu cho việc nghiên cứu sâu hơn về vấn đề này. Thẻ là điều đầu tiên bạn nghĩ đến nếu bạn cần cân bằng giữa tính thẩm mỹ của giao diện và khả năng sử dụng. Tất cả chỉ vì nó Một cách thuận tiện hiển thị nội dung bao gồm các yếu tố khác nhau.

Thẻ ví dụ. Nguồn: Vật liệu thiết kế.

Ẩn dụ tuyệt vời

Các thẻ trong giao diện là một phép ẩn dụ tuyệt vời vì chúng rất giống với thẻ thật, hữu hình thẻ. Trước khi xuất hiện thiêt bị di động, chúng ở khắp mọi nơi: danh thiếp, thẻ bóng chày, thẻ chơi, v.v. Thẻ như một mô hình tương tác đã trở nên khá phổ biến. Vì thế người dùng ở mức độ trực quan hiểu thẻ chứa gì.

Thẻ là một cách tuyệt vời truyền tải những câu chuyện nhanh. Ví dụ tốt từ đời thực- thẻ bóng chày. Cả hai mặt của tấm thiệp nhỏ đều chứa đựng tất cả Thông tin mấu chốt về người chơi bạn cần.

Mỗi thẻ đại diện cho một người chơi. Nguồn ảnh: liveauctiongroup

Tổ chức nội dung

Nội dung của thẻ được chia thành các khối ngữ nghĩa, từ đó tiết kiệm không gian màn hình. Giống như các câu trong văn bản được nhóm thành các đoạn văn và tạo thành các khối ý nghĩa, các yếu tố khác nhau được thu thập trên một tấm thẻ sẽ tạo nên một đơn vị nội dung hoàn chỉnh.

Một ví dụ về việc lựa chọn thẻ. Nguồn: Thiết kế Vật liệu

Bố cục thẻ chiếm vị trí dẫn đầu trong thiết kế khi những gã khổng lồ như Facebook bắt đầu triển khai giao diện thẻ trên máy tính để bàn và ứng dụng di động. Sử dụng Facebook một cách tối đa thiết kế “thùng chứa”để nhóm thông tin một cách thuận tiện bất chấp luồng dữ liệu gần như vô tận.

Vẻ ngoài hấp dẫn

Thông thường thiết kế thẻ phụ thuộc rất nhiều vào Các yếu tố hình ảnh. Hình ảnh — cái này mạnh bên của thiết kế này. Các studio thiết kế xác nhận rằng việc sử dụng hình ảnh sẽ đưa thiết kế của trang web hoặc ứng dụng lên một tầm cao mới - bởi vì chúng thu hút sự chú ý ngay lập tức và hiệu quả. Việc tập trung vào hình ảnh sẽ tự động làm cho thiết kế thẻ trở nên hấp dẫn hơn đối với người dùng.

Lấy ví dụ, Dribbble — nổi tiếng ở cộng đồng sáng tạo một trang web nơi các nhà thiết kế giới thiệu tác phẩm của họ. Thiết kế thẻ có lẽ phù hợp nhất để hiển thị loại nội dung này.

Trang web Dribbble.

Cách thiết kế một tấm thiệp

Các thẻ trong cùng một bố cục phải được cùng chiều rộng, nhưng chiều cao có thể khác nhau. Chiều cao tối đa thẻ bị hạn chế không gian có sẵn nền tảng, nhưng có thể được mở rộng tạm thời (ví dụ: để hiển thị trường nhận xét).

Chiều cao của thẻ có thể cố định hoặc thay đổi. Nguồn ảnh: Intercom

Từ góc độ thiết kế, tấm thiệp phải có các góc tròn và bóng ngắn. Các góc được bo tròn làm cho bản đồ trông giống như một khối nội dung riêng biệt và bóng tạo cảm giác về chiều sâu.

Các góc tròn và bóng ngắn. Nguồn: Thiết kế Vật liệu

Những yếu tố này tạo thêm sự tinh tế về mặt hình ảnh cho thiết kế mà không làm người dùng mất tập trung vào nội dung. Thêm vào đó, chúng làm cho tấm thẻ dường như nhảy ra khỏi trang giấy. Bạn cũng có thể áp dụng hiệu ứng hoạt hình và chuyển động.

Nguồn ảnh: Behance

Ưu điểm của thẻ

Nếu sử dụng thẻ đúng cách, bạn có thể cải thiện đáng kể UX của ứng dụng. Nhờ chức năng và hình thức, thẻ hoạt động như một yếu tố thú vị và trực quan của giao diện.

Dạng dễ tiêu hóa

Như bạn đã biết, Nội dung chính. Các thẻ trong thiết kế là những thùng chứa có thể chứa đầy bất cứ thứ gì. Nếu bạn đưa nội dung lên thẻ, người dùng sẽ dễ dàng tiếp thu nội dung đó hơn. Vì vậy, người dùng nhận được dễ dàng truy cậpđến nội dung thú vị đặc biệt họ- thúc đẩy sự gắn kết sâu sắc.

Bộ sưu tập thẻ này chứa các thẻ có nhiều loại nội dung khác nhau. Nguồn: Thiết kế Vật liệu.

Thiết kế đáp ứng và di động

Điều quan trọng nhất của thẻ là chúng dễ thao tác. Thiết kế dựa trên thẻ hoạt động tốt cho cả máy tính để bàn và thiết bị di động vì thẻ trình bày nội dung theo từng phần nhỏ, dễ hiểu. Chúng cũng tốt cho thiết kế đáp ứng vì chúng phục vụ thùng đựng thông tin, có thể dễ dàng thu nhỏ.

Cuối cùng, thẻ giúp tạo ra tính thẩm mỹ thống nhất trên nhiều các thiết bị khác nhau. Vì vậy, thiết kế thẻ cung cấp trải nghiệm người dùng nhất quán trên mọi thiết bị.

thiết kế ngón tay cái

Thẻ rất đơn giản được thiết kế để phù hợp với ngón tay cái. Thiết kế thẻ dường như được điều chỉnh đặc biệt cho các ứng dụng. Đây chính là nó Lý do chính sự phổ biến của thẻ ở thiết kế di động. Thẻ kỹ thuật số trên điện thoại của bạn hoạt động giống như thẻ vật lý, mang đến cho người dùng trải nghiệm tương tác thoải mái. Họ không cần phải suy nghĩ: “Mọi thứ ở đây hoạt động như thế nào?” Người dùng thích sự đơn giản của thiết kế thẻ và hiểu nguyên tắc một cách trực quan: lật thẻ về phía thông tin thêm hoặc vuốt để xem cái tiếp theo.

Vuốt sang phải. Nguồn: Dribble

Sử dụng ở đâu?

Ruy-băng

Khai trương mới

Thẻ là một cách tự nhiên để hiển thị nội dung mới. Hãy xem mẫu thẻ Tinder: vuốt thẻ từ phải sang trái, bạn sẽ tìm thấy ngày càng nhiều người mới phù hợp với sở thích của mình.

Nguồn ảnh: Tinder

Pinterest sử dụng thẻ- ghim trong lưới động của nó để sắp xếp nội dung và thu hút người dùng cuộn vô tận.

Hai dịch vụ này có điểm gì chung? Họ lấy thông tin từ ứng dụng và biến nó thành có liên quan vào thời điểm hiện tạ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ế 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 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 hợp lý và cân xứng 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ư đ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. (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 Material Design, các đặc tính 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ẻ.

Dịch Thuật – Bàn Làm Việc

26.12.2016

Thẻ là những thùng chứa thông tin nhỏ gọn.. Thẻ gần như đã trở thành một yếu tố bắt buộc phải có khi cân bằng giữa tính thẩm mỹ với khả năng sử dụng đơn giản. Thiết kế danh thiếp ban đầu được giới thiệu bởi các dịch vụ như Pinterest và Facebook, và ngày nay ảnh hưởng của nó đã lan rộng sang nhiều ngành công nghiệp.

Thiết kế thẻ được thực hiện tốt có thể cải thiện UX ( Kinh nghiệm người dùng) của ứng dụng của bạn. Trong bài viết này, tôi sẽ mô tả 5 kỹ thuật hữu ích để triển khai thiết kế thẻ và đưa ra một số ví dụ thú vị.

• Đọc thêm:

1. Thực hiện quy tắc “Một lá bài - một khái niệm”

2. Toàn bộ bề mặt của thẻ phải nhấp vào được

Theo Định luật Fitt và cho phép người dùng nhấp/chạm vào bất kỳ phần nào của thẻ, không chỉ liên kết văn bản hoặc hình ảnh. Vùng tiếp xúc lớn cải thiện đáng kể khả năng sử dụng trên cả màn hình cảm ứng và thiết bị sử dụng chuột.

Khuyên bảo: Thật tốt khi các lá bài đổ bóng, thể hiện chiều sâu - đây là xác nhận trực quan khả năng nhấp của thẻ.

3. Làm thiệp hấp dẫn

Thiết kế thẻ hoạt động vì thiết kế tốt và khả năng sử dụng tuyệt vời. Bằng cách thêm tính thẩm mỹ vào thiệp, bạn làm cho chúng dễ nhận biết và sáng tạo.

Khi thiết kế thiệp, bạn cần tập trung vào những điểm sau:

Hình ảnh

Nhấn mạnh vào hình ảnh chính là điểm mạnh của thiết kế thiệp. Nghiên cứu xác nhận hình ảnh đó “nâng tầm” thiết kế. Như vậy, việc chú trọng sử dụng hình ảnh giúp thiết kế giao diện thẻ hấp dẫn hơn với người dùng.

Bóng và độ dốc

Bóng và độ dốc đã trải qua một chặng đường dài để được cảm nhận và liên kết với các đối tác vật lý của chúng. Nhưng hãy suy nghĩ cẩn thận về cách bạn sử dụng bóng và độ chuyển màu: nếu bóng được đổ từ mọi góc và cạnh, ảo giác rằng tấm thiệp là một vật thể vật lý sẽ bị hủy hoại.

Kiểu chữ

Bạn cũng có thể thu hút sự chú ý của người dùng bằng văn bản. Mọi thứ trong thiết kế danh thiếp phải dễ đọc và dễ hiểu:

• Sử dụng phông chữ đơn giản Và bảng màu(văn bản được đọc tốt nhất trên nền tương phản).
• Cố gắng sử dụng số lượng phông chữ tối thiểu. Đối với thiết kế thiệp, một phông chữ là quá đủ.

Khuyên bảo: Phông chữ sans-serif thông thường rất phù hợp cho thẻ.

• Đọc thêm:

4. Giới hạn nội dung thẻ

Thẻ thường ngắn gọn và chứa liên kết đến thông tin chi tiết hơn. Khi bạn cố gắng gói quá nhiều nội dung vào một tấm thiệp bằng cách làm cho nó quá rộng hoặc quá dài, nó sẽ mất đi thông điệp ban đầu vì nó không còn giống một tấm thiệp nữa.

Dưới đây là một ví dụ về giao diện thẻ. Hãy để ý tấm thẻ ở giữa. Vấn đề là có rất nhiều thông tin trên đó khiến tấm thẻ trở nên khó hiểu.

5. Tận dụng hình ảnh động và chuyển động

Ảnh động có thể có tác động tích cực đến UX nếu được sử dụng đúng cách. Chúng giúp mọi người điều hướng giao diện thẻ tốt hơn và thiết lập kết nối trực quan giữa tiểu bang khác nhau cho mỗi thẻ.

Tín hiệu thị giác

Các tín hiệu trực quan giúp người dùng hiểu cách tương tác tốt nhất giao diện người dùng. Loại hoạt ảnh này được sử dụng khi bạn cần chứng minh cách hoạt động của một số chức năng thiết kế nhất định.

Phản hồi trực quan

Phản hồi trực quan rất quan trọng trong thiết kế giao diện. Nó hoạt động vì nó đáp ứng mong muốn tự nhiên của người dùng xác nhận. Trong cuộc sống thực, các đồ vật phản ứng với sự tương tác và đây là điều mọi người mong đợi ở đồ vật. Đối với các ứng dụng hoặc trang web dành cho máy tính để bàn, bạn có thể sử dụng hiệu ứng di chuộtđể chỉ ra rằng các đối tượng có thể được tương tác. Hoạt ảnh di chuột làm tăng mức độ hiểu biết, đồng thời giúp trải nghiệm người dùng trở nên thú vị hơn.

Sử dụng hiệu ứng di chuột, bạn cũng có thể mở ra các tùy chọn. Trong ví dụ bên dưới, hiệu ứng di chuột cho phép người dùng thay đổi màu sắc, trả lời tin nhắn, gửi hoặc xóa chúng.