Một Nhận Thức Duy Nhất Đã Thay Đổi Hoàn Toàn Cách Tôi Thiết Kế Ứng Dụng Và Trang Web
Bạn có biết khoảnh khắc khi một thiết kế cuối cùng 'khớp' và bạn tự hỏi tại sao không ai giải thích theo cách đó trước đây? Tôi từng nghĩ thiết kế UI/UX chỉ là làm cho mọi thứ đẹp, cho đến khi tôi nhận ra nó thực sự là làm cho mọi thứ có cảm giác như một người bạn cũ. Nếu bạn đang chập chững bước vào thiết kế giao diện, hoặc chỉ đang muốn nâng cao trình độ, hãy để tôi dẫn bạn qua những điều thực sự quan trọng — không vòng vo, chỉ là những điều tôi ước mình biết sớm hơn.
Tôi nhớ lúc nhìn chằm chằm vào khung vẽ Figma trống đầu tiên của mình, hoàn toàn tê liệt. Tôi đã xem mọi hướng dẫn ui ux design tutorial có thể tìm thấy, nhưng không hướng dẫn nào cho tôi biết nên bắt đầu từ đâu. Bí mật ư? Hãy bắt đầu bằng từ ngữ, không phải bằng hình chữ nhật. Trước khi mở các công cụ thiết kế ui tốt nhất của bạn, hãy lấy một cuốn sổ và ghi ra những gì ai đó muốn làm trên màn hình của họ. Đó là trái tim của ux design principles — thấu hiểu con người ở phía bên kia. Một khi tôi ngừng ám ảnh về gradient và đổ bóng, mọi thứ trở nên dễ dàng hơn.
Hãy nói về con voi trong phòng: giải thích ux vs ui mà không cần thuật ngữ chuyên ngành. UX là logic của việc làm một chiếc bánh mì — các bước, trình tự, cảm giác nhẹ nhõm khi bánh mì không bị ỉu. UI là cách bày biện, những giọt sốt được rưới nghệ thuật, vẻ ngoài đẹp đến mức bạn phải chụp ảnh. Khi mọi người hỏi tôi cách thiết kế giao diện ứng dụng thực sự hiệu quả, tôi bảo họ: hãy thiết kế công thức bánh mì trước, rồi làm cho nó đẹp. Bạn không thể phủ kem cho một chiếc bánh chưa nướng. Đó là lý do tôi hơi nhăn mặt khi người mới bắt đầu lao ngay vào một hướng dẫn figma cho người mới và bắt đầu đẩy pixel trước khi họ phác thảo xong một luồng người dùng. Figma là một cỗ máy mạnh mẽ — dễ dàng là một trong những công cụ thiết kế ui tốt nhất — nhưng nó chỉ là một cây búa. Bạn vẫn cần biết mình đang xây dựng cái gì.
Nhân tiện, hãy vận dụng điều này vào một số nguyên tắc cơ bản về thiết kế giao diện website. Bố cục website tốt không phải là sự sáng tạo; đó là sự quen thuộc. Mọi người kỳ vọng logo ở phía trên bên trái, thanh điều hướng ở trên cùng, một lời kêu gọi hành động rõ ràng, bởi vì não họ đã được huấn luyện bởi hàng triệu trang web khác. Khoảnh khắc bạn phá vỡ khuôn mẫu đó, bạn đang khiến họ phải suy nghĩ — và suy nghĩ đồng nghĩa với sự cản trở. Tôi từng thiết kế lại một trang thanh toán thương mại điện tử và thấy tỷ lệ bỏ giỏ hàng giảm 20% chỉ bằng cách di chuyển nút "tiếp tục" đến vị trí mà mọi người mong đợi. Đó là phép màu thầm lặng của những mẹo thiết kế giao diện người dùng: chúng nghe có vẻ nhàm chán cho đến khi chúng giúp bạn kiếm tiền hoặc tiết kiệm thời gian.
Bây giờ, thiết kế giao diện ứng dụng di động mang đến những đặc thù riêng. Ngón tay cái là kẻ thống trị màn hình. Tôi luôn đặt các hành động chính vào vùng thân thiện với ngón cái — nửa dưới của điện thoại. Khi phác thảo một ứng dụng, tôi thực sự cầm điện thoại bằng một tay và kiểm tra xem mình có thể chạm tới các nút mà không phải làm động tác yoga ngón tay không. Phần lớn cách để trở thành một nhà thiết kế UI nằm ở kiểu soi mói đồng cảm này. Bạn không cần một tấm bằng hoành tráng; bạn cần trở nên quan sát một cách khó chịu đối với tất cả những bực bội nhỏ nhặt trong các ứng dụng bạn dùng hàng ngày. Ứng dụng cà phê giấu nút "đặt lại" sâu ba màn hình? Hãy sửa điều đó trong đầu. Viết nó ra. Chúc mừng, bạn đang suy nghĩ như một nhà thiết kế UI.
Nếu bạn đang tự hỏi làm thế nào để trở thành một nhà thiết kế UI mà không tốn kém nhiều, đây là lộ trình của tôi: Tôi đã học một khóa hướng dẫn thiết kế UI/UX miễn phí trên YouTube để nắm những điều cơ bản nhất, sau đó tôi ngay lập tức tái tạo một màn hình từ một ứng dụng mà tôi yêu thích. Không phải cả một ứng dụng — chỉ một màn hình, từng pixel một, trong Figma. Đây là hướng dẫn Figma cho người mới bắt đầu duy nhất bạn thực sự cần, vì bạn học công cụ trong khi kỹ nghệ ngược các quyết định thiết kế tốt. Tôi nhìn vào một thành phần và tự hỏi: tại sao phần đệm (padding) này là 16px mà không phải 8px? Tại sao màu xám này mà không phải màu đen? Dần dần, các quy tắc vô hình của nguyên tắc thiết kế UX trở nên hữu hình. Bạn bắt đầu thấy rằng thiết kế tốt là một chuỗi các quyết định nhỏ, có chủ đích mà hầu hết mọi người không bao giờ nhận ra — nhưng họ chắc chắn cảm nhận được khi thiếu chúng.
Có một cạm bẫy phổ biến mà tôi muốn giúp bạn tránh: bẫy Dribbble. Dribbble đầy những ý tưởng bay bổng đẹp mắt nhưng phi thực tế, có thể phá vỡ khả năng sử dụng trong thực tế. Thiết kế UI ứng dụng di động thực thụ phải xử lý tên dài, trạng thái trống, thông báo lỗi, thời gian tải chậm. Những thứ đó không hào nhoáng, nhưng chúng là thứ phân biệt một người chuyên nghiệp với một người làm theo sở thích. Khi tôi đưa ra các mẹo thiết kế giao diện người dùng, tôi luôn nói: hãy thiết kế các trạng thái xấu xí trước. Thiết kế màn hình khi Wi-Fi bị mất. Thiết kế điều gì xảy ra khi người dùng không có món nào trong giỏ hàng. Nếu thiết kế của bạn vẫn mang lại cảm giác hữu ích trong những khoảnh khắc đó, bạn đã làm đúng.
Giờ, về những công cụ thiết kế UI tốt nhất — Figma rõ ràng là ứng viên được yêu thích, và vì lý do chính đáng. Nó có tính cộng tác, chạy trên trình duyệt và miễn phí cho cá nhân. Tôi dùng nó cho mọi thứ từ wireframe đến nguyên mẫu độ trung thực cao. Nhưng đừng bỏ qua bút và giấy. Những ý tưởng nhanh và rõ ràng nhất của tôi cho các nguyên tắc cơ bản về thiết kế UI website thường bắt đầu bằng những bản phác thảo lộn xộn trên một cuốn sổ chấm điểm (dot-grid). Khi chuyển sang Figma, tôi cũng dựa vào các plugin như Content Reel để điền văn bản thực tế, và Stark để kiểm tra khả năng tiếp cận (accessibility). Rất nhiều nội dung hướng dẫn thiết kế UI UX bỏ qua khả năng tiếp cận, nhưng đó là một nguyên lý cốt lõi của các nguyên tắc thiết kế UX: nếu một người khiếm thị không thể sử dụng giao diện của bạn, thì đó là một giao diện tồi, chấm hết.
Tôi thường được yêu cầu cô đọng cách thiết kế giao diện ứng dụng thành một câu duy nhất. Câu trả lời của tôi: hãy thiết kế các cuộc hội thoại. Mỗi cú chạm là một từ, mỗi màn hình là một câu trả lời. Nếu ứng dụng của bạn có cảm giác như đang trò chuyện với một người bạn hữu ích và hơi hóm hỉnh, bạn đã thành công. Đó là lý do tôi thích các tương tác vi mô (micro-interactions) — một cú nảy nhẹ khi thứ gì đó tải xong, một rung nhẹ khi nhấn giữ. Chúng tương đương với một cái gật đầu hiểu ý trong hội thoại giữa người với người, và chúng khiến thiết kế UI ứng dụng di động trở nên sống động, không máy móc.
Nếu bạn vẫn đang tìm hiểu về UX vs UI cho sự nghiệp của mình, hãy nhớ: bạn không cần phải chọn một thứ mãi mãi. Ban đầu tôi bị thu hút bởi mặt hình ảnh hơn, nhưng khi làm nhiều dự án hơn, mảng nghiên cứu và tâm lý học của UX bắt đầu mê hoặc tôi. Một hướng dẫn thiết kế UI UX vững chắc sẽ luôn dạy bạn rằng các giao diện tốt nhất đến từ sự kết hợp. Khi tôi hướng dẫn những người mới về cách trở thành nhà thiết kế UI, tôi thúc đẩy họ làm ít nhất một dự án trong đó họ phỏng vấn ba người dùng. Ban đầu việc đó khá đáng sợ, nhưng bạn sẽ học được từ ba cuộc phỏng vấn nhiều hơn là mười giờ xem hướng dẫn thụ động.
Bối cảnh thay đổi nhanh chóng, nhưng các nguyên tắc nền tảng thì không. Cho dù bạn đang đắm mình trong một hướng dẫn Figma cho người mới bắt đầu hay đang trau chuốt một sản phẩm trong portfolio, hãy luôn tự hỏi: điều này có giúp cuộc sống của người dùng dễ dàng hơn không, hay chỉ đẹp hơn thôi? Bởi vì giao diện đẹp nhất thế giới cũng không thể cứu vãn một trải nghiệm khó hiểu. Và bố cục đơn giản nhất, được hỗ trợ bởi các nguyên tắc thiết kế UX vững chắc, có thể khiến một ngày của ai đó bớt căng thẳng hơn một chút. Đó là niềm vui thực sự của nghề này — nó không phải về điểm ảnh, mà là về con người. Hãy đi tạo ra thứ gì đó có cảm giác như một cái ôm dưới dạng ứng dụng.