Mũi tên vuông hay cong: chọn connector thế nào để sơ đồ UX dễ đọc?

Cùng nối hai khối thông tin, nhưng đường nối vuông bo góc và đường nối cong tạo cảm giác khác nhau: một bên có cấu trúc rõ ràng, một bên mềm và liên tục. Trong UX Design, lựa chọn nên dựa vào cách người dùng theo dõi mối quan hệ, bên cạnh phong cách hình ảnh.

Ảnh minh họa do bạn đọc cung cấp; cả hai đường trong mỗi cặp đều hướng từ trái sang phải.

Hai kiểu đường nối gọi là gì?

Đây là tên của đường nối (connector); đầu mũi tên thể hiện hướng. Công cụ khác nhau có thể dùng tên khác nhau. Chẳng hạn, draw.io phân biệt kiểu định tuyến orthogonal, curved và cách xử lý góc bo. Tài liệu draw.io.

Đường vuông bo góc: dễ tổ chức theo hàng, cột

Rounded Orthogonal Connector đi theo các đoạn ngang và dọc, chỉ uốn nhẹ tại điểm chuyển hướng.

Về bố cục, kiểu này thuận tiện khi các khối được căn theo lưới. Bạn có thể cho đường nối đi qua khoảng trống giữa các hàng, cột, giúp sơ đồ trông có trật tự.

Ví dụ, trong quy trình tiếp nhận → kiểm tra → phê duyệt, đường vuông dễ bố trí quanh các bước và dành đoạn thẳng để đặt nhãn như “Đạt” hoặc “Cần bổ sung”.

Điểm cần chú ý là số lần đổi hướng. Một đường vòng qua quá nhiều góc có thể khiến người đọc mất dấu đích đến. Bo góc giúp nét vẽ mềm hơn, nhưng không tự giải quyết được một đường đi phức tạp.

Đường cong: tạo luồng nhìn liên tục

Curved Connector chuyển hướng bằng đường cong thay vì những đoạn gấp khúc.

Về thiết kế, kiểu này có thể phù hợp khi các khối nằm tự do, tỏa ra từ một ý tưởng trung tâm hoặc cần phân biệt nhiều đường nối giữa cùng hai nút.

Ví dụ, một mindmap có các nhánh bao quanh chủ đề chính thường dễ bố trí đường cong theo hướng từng nhánh. Trong node editor, đường cong cũng tạo chuyển tiếp mềm giữa cổng ra và cổng vào.

Tuy nhiên, khi sơ đồ dày đặc, các đường cong có thể chồng lên nhau thành một vùng khó theo dõi. Cần kiểm tra khoảng cách, điểm giao và vị trí nhãn.

Các nhận định trên là hướng lựa chọn bố cục của Vibe AI Coder, không phải kết luận từ một bài thử nghiệm người dùng. Không có quy tắc rằng đường vuông luôn dễ đọc hơn hay đường cong luôn đẹp hơn.

🔎 Nhìn kỹ ví dụ: hướng quan trọng hơn kiểu đường

Trong ảnh, cả đường phía trên lẫn phía dưới đều đi từ khối bên trái đến khối bên phải. Đây là hai đường cùng hướng, chưa phải vòng lặp hai chiều.

Nếu muốn biểu diễn phản hồi, một đường cần hướng ngược lại. Nếu muốn thể hiện hai quan hệ khác nhau, nên thêm nhãn, chẳng hạn “Gửi yêu cầu” và “Gửi dữ liệu bổ sung”.

Người dùng cần hiểu ai gửi gì cho ai trước khi cảm nhận đường nối mềm hay vuông. Hai đường cùng hướng mà không có nhãn dễ khiến người xem tự đoán ý nghĩa.

Lưu ý khi triển khai bằng SVG

Không thể nhìn ảnh rồi khẳng định đường cong bên phải chắc chắn dùng Bézier. SVG hỗ trợ Bézier bậc hai (Q), Bézier bậc ba (C) và cung elip (A). Đường vuông bo góc cũng có thể kết hợp đoạn thẳng với các lệnh tạo đường cong. Tài liệu SVG của MDN.

“Rounded Orthogonal Path” và “Curved Bézier Path” là cách mô tả hình học, không phải tên thuộc tính CSS chuẩn. Nếu bạn giao việc cho AI viết giao diện, nên mô tả cả đường đi, điểm nối và đầu mũi tên thay vì chỉ đưa một tên gọi.

Ví dụ yêu cầu rõ hơn: “Nối cạnh dưới của khối A với cạnh dưới của khối B, đường đi ngang và dọc, bo các góc, đầu mũi tên hướng vào B; không đi xuyên qua khối khác.”

Chọn kiểu nào?

Ưu tiên đường vuông bo góc khi sơ đồ căn theo lưới, cần bố trí đường đi quanh các khối và đặt nhãn trên đoạn thẳng.

Thử đường cong khi bố cục tự do, tỏa nhánh hoặc có nhiều quan hệ cần tách bằng những độ cong khác nhau.

Trước khi chốt, hãy thu nhỏ sơ đồ về kích thước sử dụng thực tế. Kiểm tra ba điều: theo được từng đường từ đầu đến cuối, đọc rõ nhãn và nhận ra hướng mũi tên. Đó là tiêu chí UX hữu ích hơn việc chỉ chọn kiểu trông đẹp.

Đọc thêm cách viết prompt rõ ràng và vibe coding là gì.

#UXDesign #UIDesign #Diagram #SVG #VibeCoding