Chào mừng! Tôi là Sparsh Malhotra và hôm nay, tôi rất vui được chia sẻ với bạn một chủ đề mà tôi rất tâm đắc — thiết kế giao diện người dùng. Là một nhà phát triển giao diện người dùng, tôi luôn quan tâm đến việc tạo giao diện người dùng tuyệt đẹp, nhưng hãy thành thật mà nói — điều đó không phải lúc nào cũng dễ dàng.

Tôi đã từng ước rằng mình có thể làm cho những ý tưởng của mình trở nên tuyệt vời mà không cần nhờ đến nhà thiết kế, nhưng mỗi khi cố gắng tự thiết kế một thứ gì đó, tôi lại cảm thấy nản lòng và bỏ cuộc. Bạn có thể liên hệ? Nếu vậy, bạn không đơn độc.

Đó là lý do tại sao tôi ở đây để nói với bạn rằng việc thiết kế giao diện người dùng đẹp không nhất thiết phải là một cuộc đấu tranh. Bạn có thể tận dụng quan điểm độc đáo của mình với tư cách là nhà phát triển về cách người tiêu dùng tương tác với phần mềm để tạo giao diện người dùng tốt hơn. Và bằng cách tuân theo các kỹ thuật và xu hướng thiết kế giao diện người dùng mới nhất, bạn có thể ít phụ thuộc hơn vào nhà thiết kế thực sự trong nhóm.

Trong loạt bài này, “Cách sử dụng giao diện người dùng vào năm 2023”, tôi sẽ thảo luận về các chiến lược và lời khuyên mà tôi đã chọn để giúp tôi thiết kế các giao diện người dùng đẹp mắt mà người dùng yêu thích. Tôi sẽ cung cấp cho bạn các mẹo và ví dụ hữu ích để giúp bạn bắt đầu với mọi thứ từ bảng màu cho đến kiểu chữ, thiết kế bố cục, v.v.

Vì vậy, cho dù bạn là nhà phát triển dày dạn kinh nghiệm hay mới bắt đầu, hãy sẵn sàng nâng kỹ năng thiết kế giao diện người dùng của bạn lên một tầm cao mới. Bạn đã sẵn sàng để bắt đầu cuộc hành trình này với tôi? Tuyệt vời! Đi nào!

PHẦN 1 — Hãy bắt đầu lại từ đầu

Bước đầu tiên quan trọng: Chọn tính năng thay vì bố cục

Bạn thiết kế gì đầu tiên khi bắt đầu thiết kế cho một ứng dụng mới? Nếu đó là thanh điều hướng ở đầu trang thì bạn đang mắc lỗi.

Thiết kế vỏ ứng dụng, bao gồm việc xác định bố cục của trang, chẳng hạn như vị trí đặt các mục điều hướng, có điều hướng trên cùng hay thanh bên, nên sử dụng vùng chứa hay toàn bộ chiều rộng cho nội dung trang và vị trí để đặt logo, không phải là điểm khởi đầu tốt nhất. Cách tiếp cận này có thể dẫn đến việc bị mắc kẹt trong quá trình thiết kế và bỏ qua các khía cạnh thiết yếu khác của thiết kế.

Một ứng dụng về cơ bản là một nhóm các tính năng.

Nếu không có ý tưởng rõ ràng về các tính năng của ứng dụng và cách chúng hoạt động cùng nhau, thật khó để đưa ra quyết định sáng suốt về các yếu tố thiết kế sẽ hoạt động tốt nhất. Vì vậy, điều cần thiết trước tiên là tập trung vào các tính năng của ứng dụng và thu thập thông tin về cách chúng sẽ tương tác trước khi đưa ra bất kỳ quyết định nào về thiết kế của ứng dụng.

Thông tin chi tiết có thể đợi

Trong giai đoạn đầu của thiết kế tính năng, rất dễ bị sa lầy với các chi tiết nhỏ như kiểu chữ và bóng đổ. Mặc dù các yếu tố này quan trọng, nhưng điều quan trọng hơn là tập trung vào mục đích rộng lớn hơn của tính năng và cách tính năng này phù hợp với thiết kế tổng thể. Chỉ khi các yếu tố cốt lõi đã sẵn sàng, bạn mới nên bắt đầu tinh chỉnh các chi tiết để đảm bảo chúng phù hợp với các mục tiêu thiết kế rộng lớn hơn. Bằng cách ưu tiên các khía cạnh cốt lõi trước, bạn có thể tạo ra một thiết kế gắn kết và hiệu quả hơn, phục vụ tốt hơn nhu cầu của người dùng.

Các thiết kế có độ trung thực thấp cho phép quá trình thiết kế diễn ra nhanh chóng, cho phép bạn chuyển sang xây dựng sản phẩm cuối cùng một cách nhanh chóng. Sử dụng các bản phác thảo và khung lưới để lên ý tưởng, sau đó tinh chỉnh thiết kế bạn đã chọn ở các định dạng có độ trung thực cao hơn. Bằng cách ưu tiên tốc độ và sử dụng mô hình có độ trung thực thấp để khám phá ý tưởng, bạn có thể nhanh chóng phát triển thiết kế cuối cùng hiệu quả hơn.

Chọn tiếng nói thiết kế của bạn

Thiết kế cũng giống như tính cách — chúng truyền đạt những đặc điểm và giá trị nhất định. Một trang web ngân hàng có thể nhắm đến một giao diện chuyên nghiệp và an toàn, trong khi một công ty khởi nghiệp thời thượng có thể hướng đến một cảm giác vui tươi và thú vị. Điều quan trọng là chọn cá tính thiết kế phù hợp với thông điệp của thương hiệu và đối tượng mục tiêu.

Mặc dù nghe có vẻ trừu tượng, nhưng việc gán cá tính cho một thiết kế thực sự dựa trên các yếu tố vững chắc và cụ thể: -

Lựa chọn phông chữ

Kiểu chữ đóng một vai trò quan trọng trong việc xác định cảm giác của một thiết kế.

• Nếu bạn muốn có một cái nhìn thanh lịch hoặc cổ điển, bạn có thể muốn kết hợp kiểu chữ serif trong thiết kế của mình:

• Để có vẻ vui tươi, bạn có thể sử dụng kiểu chữ sans serif tròn:

• Nếu bạn muốn có một cái nhìn đơn giản hơn, hoặc muốn dựa vào các yếu tố khác để thể hiện cá tính, thì một kiểu chữ sans serif trung tính sẽ rất phù hợp:

Các nhà thiết kế không cần phải là chuyên gia về tâm lý màu sắc để sử dụng nó một cách hiệu quả. Chú ý đến cách màu sắc khiến bạn cảm thấy và chọn những màu phù hợp với cá tính và thông điệp của thiết kế có thể tạo ra tác động thị giác mạnh mẽ.

• Màu xanh an toàn và quen thuộc — không ai từng phàn nàn về màu xanh:

• Vàng có thể nói là “đắt” và “tinh vi”
• Màu hồng vui hơn một chút và không quá nghiêm túc

Làm tròn các góc trong một thiết kế có vẻ như là một chi tiết nhỏ, nhưng nó có thể ảnh hưởng đáng kể đến cảm giác và tính thẩm mỹ tổng thể.

• Bán kính đường viền nhỏ khá trung lập và bản thân nó không thực sự truyền đạt nhiều tính cách
• Bán kính đường viền lớn bắt đầu mang lại cảm giác vui tươi hơn
• Không có bán kính biên giới nào cảm thấy nghiêm túc hoặc trang trọng hơn rất nhiều

Sử dụng các hệ thống thiết kế được xác định trước

Thật dễ dàng để rơi vào cái bẫy khi nghĩ rằng có vô số tùy chọn về màu sắc, phông chữ và các yếu tố thiết kế khác là một điều tốt. Xét cho cùng, có nhiều lựa chọn hơn đồng nghĩa với nhiều khả năng tạo ra thứ gì đó thực sự độc đáo, phải không? Không hẳn là chính xác lắm.

Trên thực tế, có quá nhiều tùy chọn thực sự có thể cản trở quá trình thiết kế của bạn. Khi bạn có quá nhiều quyết định phải đưa ra, mỗi quyết định đều cảm thấy khó khăn hơn quyết định trước. Bạn thấy mình đau đầu với cả những chi tiết nhỏ nhất, chẳng hạn như nên sử dụng cỡ chữ 12px hay 13px hay bóng hộp nên có độ mờ 10% hay 15%. Với rất nhiều khả năng, thật dễ dàng để cảm thấy choáng ngợp và bị mắc kẹt trong trạng thái do dự.

• Xác định hệ thống trước

Đừng với tới công cụ chọn màu mỗi khi bạn cần chọn một sắc thái tím mới — hãy chọn từ bộ 8–10 sắc thái đã chọn trước.

Tương tự như vậy, không điều chỉnh kích thước phông chữ từng pixel một cho đến khi nó trông hoàn hảo. Xác định trước tỷ lệ loại hạn chế và sử dụng tỷ lệ đó để đưa ra bất kỳ quyết định nào về kích thước phông chữ trong tương lai.

• Thiết kế bằng cách loại bỏ

Bắt đầu bằng cách đoán kích thước nào sẽ hoạt động tốt nhất, có thể là 16px. Sau đó, so sánh nó với các tùy chọn ở hai bên, chẳng hạn như 12px và 24px. Thông thường, hai trong số ba tùy chọn sẽ tỏ ra kém hơn rõ ràng. Nếu các tùy chọn kém hơn là những tùy chọn ở đầu bên ngoài, thì tùy chọn ở giữa có thể là lựa chọn tốt nhất.

Phương pháp này có hiệu quả đối với bất kỳ yếu tố thiết kế nào có hệ thống tùy chọn xác định. Bằng cách hạn chế các lựa chọn của bạn đối với những lựa chọn có sự khác biệt đáng chú ý, việc chọn ra lựa chọn tốt nhất là một nhiệm vụ đơn giản.