Tạo kiểu cho các nút thiết kế phẳng sạch sẽ để chúng thể hiện khả năng chi trả và trông 'được thiết kế tốt'

Tôi đã bắt đầu một khung CSS nhỏ gần đây. ( http://mincss.com nếu có ai quan tâm) Tôi nhanh chóng đưa ra một thiết kế ban đầu cho một số nút. Sau khi yêu cầu phản hồi về UX StackExchange (và nhận được nhiều phản hồi tốt), tôi được đề nghị đến đây để được tư vấn thêm về việc cải thiện chúng.

Đây là những gì họ trông giống như bây giờ, sau phản hồi của UXStackExchange. Tôi đã xóa viền đen, thêm "bóng" 3px và xóa góc xiên 1px:

Tôi sẽ cho một cái nhìn thiết kế phẳng.

Tôi có 3 câu hỏi còn lại:

• Các nút này có đủ khả năng chi trả không? (Đây có vẻ là một vấn đề với thiết kế phẳng)
• Bạn có đề nghị thêm một gradient nhỏ?
• Chúng có được thiết kế tốt không? (chủ quan tôi biết, nhưng tôi không thể nghĩ ra cách nào tốt hơn để hỏi điều này)

Tôi sẽ vui mừng chào đón (và có thể sử dụng) bất kỳ phản hồi nào về các nút này.

Tôi nghĩ rằng một gradient rất tinh tế chắc chắn sẽ cải thiện tính thẩm mỹ của các nút. Vì kiểu "Metro" của Windows 8 là một người ủng hộ phong cách này, nên tôi sẽ sử dụng nó làm ví dụ:

Thoạt nhìn, "gạch" trông giống như chúng là một màu phẳng, nhưng nếu bạn nhìn kỹ có một độ dốc rất nhẹ từ trái sang phải. Nó đáng chú ý hơn trên một số người khác, nhưng tất cả họ đều có nó. Như Yisela đã nói, bạn muốn độ dốc này hầu như không đáng chú ý, gần như tiềm thức.

Như bạn đã đề cập, khi thiết kế các nút phẳng, bạn cần để mắt đến một vài điều. Người đầu tiên, tôi nói: Nó có giống nút không?

Đây không nhất thiết là thứ chỉ phụ thuộc vào nút, mà phụ thuộc vào các yếu tố còn lại của giao diện người dùng của bạn. Nếu bạn đang sử dụng các nút phẳng, tôi khuyên bạn nên tránh các hình dạng / kiểu tương tự ở mọi nơi khác. Bạn cần duy trì vốn từ vựng trực quan để mọi người có thể nhận ra ngay các yếu tố này dưới dạng nút chứ không phải thứ gì khác.

Bóng là tốt cho điều này, bởi vì chúng cho ấn tượng về âm lượng. Do đó, chúng dễ nhìn hơn. Thêm vào đó, chúng ta đã quen với các nút có hiệu ứng đó. Tuy nhiên tôi sẽ xem xét sử dụng màu tương tự với màu của nút. Ví dụ: thay vì sử dụng màu đen cho nút màu đỏ, hãy sử dụng màu đỏ với độ mờ 50%. Một tùy chọn khác để làm cho các nút rõ ràng hơn là thêm một biểu tượng (màu trắng, đặc).

Tôi sẽ rất cẩn thận với độ dốc . Không phải vì chúng xấu, mà bởi vì trong xu hướng phẳng siêu đơn giản hiện nay, chúng không phù hợp lắm. Đặc biệt nếu màu sắc hoặc sắc thái bạn sử dụng rất khác nhau. Một gradient nhỏ có thể trông thực sự đẹp, nhưng nó phải nhỏ, hầu như không đáng chú ý.

Tóm lại, tôi thích cách họ nhìn. Tôi sẽ chỉ thay đổi màu bóng thành một cái gì đó nhẹ hơn, và có thể làm cho văn bản nền trước cũng sáng hơn, màu trắng có thể. Phông chữ đẹp và bạn đang sử dụng phần đệm tốt, thật tuyệt! Tôi thấy bạn đang sử dụng chúng trong trang web, nhưng bên dưới chúng bạn có một bộ thông báo có màu pastel trông hơi giống nhau. Tôi sẽ xem xét lại phong cách của họ, vì chúng có thể hơi khó hiểu và tôi cố gắng sử dụng các màu giống nhau trên toàn bộ trang web (tất cả các phấn màu hoặc tất cả độ tương phản).

Mặc dù tôi có thể tôn trọng việc tạo các nút tối thiểu như vậy nhưng bạn thực sự cần phải xem xét nếu / làm thế nào chúng có thể được áp dụng trên web trên các trang web khác nhau, khi bạn đang tạo một khung. Nếu bạn đang cung cấp các nút, bạn cần đảm bảo cung cấp mọi thứ khác mà ai đó có thể sử dụng như bảng, biểu mẫu, v.v. (Tôi chắc chắn rằng bạn vẫn đang làm việc).

Hãy xem Bootstrap nếu bạn chưa có. Bootstrap là một khung CSS đơn giản và tuyệt vời có thể dễ dàng điều chỉnh hoặc tích hợp vào một trang web khác và có thể cung cấp cho bạn một số ý tưởng.

Bây giờ, theo như các nút thực tế này, tôi sẽ chơi xung quanh với một đường viền, vì điều này giúp đóng gói thành phần và một đường viền là khá phổ biến đối với rất nhiều nút. Tôi đã kiểm tra trang web và tôi thích các trạng thái di chuột / nhấp chuột và tôi nghĩ bạn đã làm tốt với các trạng thái đó.

Nếu bạn muốn giới thiệu độ dốc, hãy nhất quán và đảm bảo rằng bạn cũng sử dụng chúng cho các yếu tố khác, nếu không, bạn sẽ có độ sâu cạnh tranh sẽ gây mất tập trung.

Các nút trông đẹp, tuy nhiên loại nút thể hiện khả năng chi trả và cảm giác theo kiểu phẳng nói chung là một khi phần bóng được đặt là một dải nhỏ ở dưới cùng của phần tử chính (nút) và chủ yếu là màu tối hơn của nút màu.