Làm thế nào bạn sẽ đại diện cho khoảng cách đồ họa?

Đồng ý,

Vì vậy, điều này có thể hơi "chủ quan" nhưng tôi đang tìm kiếm một số ý tưởng.

Tôi muốn biểu thị khoảng cách dưới dạng biểu đồ thanh (loại) càng "đầy" càng gần với mọi người.

Chúng càng ở xa, biểu đồ thanh càng ít nếu bạn muốn.

Tôi không chắc làm thế nào tôi sẽ đại diện cho điều đó. Tôi đã tạo ra đồ họa này để cho bạn thấy quá trình suy nghĩ của tôi.

Bạn có nghĩ mọi người sẽ hiểu? Tôi có nên chỉ định các cạnh "FAR" và "ĐÓNG" không? Hay chỉ hiển thị khoảng cách?

Mọi người sẽ hiểu rằng khi biểu đồ thanh đầy, mọi người gần hơn?

Tôi có nên cũng có thể chỉ định khoảng cách thực tế? (Hoặc là mét, km, v.v.) Hoặc từ bỏ hoàn toàn biểu đồ thanh?

Làm thế nào bạn biểu thị khoảng cách bằng đồ họa để mọi người thoạt nhìn có một ý tưởng hay về việc người kia ở gần hay xa?

EDIT : Ok, vì vậy đã nói chuyện với khách hàng để biết thêm chi tiết và những gì họ nghĩ ra là một cái gì đó giống với vòng tròn mà @Scott cung cấp, nơi người dùng hiện tại đang ở "giữa" và những người xung quanh người dùng đang ở trong "quỹ đạo". Họ đã nhìn thấy nó ở đâu đó và muốn điều đó, trái ngược với việc hiển thị khoảng cách cho mỗi người dùng.

Do đó, tôi sẽ phải hiển thị văn bản như "150m" hoặc "Gần đó" trái ngược với biểu đồ thanh có khoảng cách.

Tuy nhiên, tôi cũng muốn cảm ơn MỌI NGƯỜI đã cung cấp câu trả lời, một số ví dụ rất tuyệt vời, tôi yêu chúng và nó đưa ra một bảng ý tưởng tuyệt vời để rút ra. Vì "tóm tắt" phần nào thay đổi so với yêu cầu ban đầu, tôi nghĩ rằng tốt nhất nên chỉnh sửa câu hỏi này để cung cấp thêm một số phản hồi.

Ví dụ cập nhật bằng cách sử dụng một thiết kế nêm. Để rõ ràng, khoảng cách mẫu đã được thêm vào biểu đồ và văn bản đã bị xóa.

Ví dụ với văn bản Bắt đầu và Kết thúc

Vì kích thước nhỏ là một yếu tố cho thiết bị cầm tay, đây là hai tùy chọn tiết kiệm không gian 100px x 100px.

Động não dựa trên yêu cầu mới nhất

Đây là một ý tưởng tiết kiệm không gian cho thiết bị di động đặt ứng dụng trong danh sách thả xuống. Với kích thước lớn hơn của danh sách thả xuống, bản đồ có thể chứa nhiều thông tin hơn như nhãn người dùng và lưới khoảng cách.

Cách đây nhiều năm, tôi có một trò chơi Amiga có tên F19 Stealth Fighter. HUD về điều này có một cái gì đó rất giống với những gì bạn mô tả. Đối với những quả bom mà bạn thả, thay vì bắn, bạn được hiển thị một dòng có hai "bài" ở mỗi đầu gần nhau hơn khi bạn đến gần mục tiêu hơn.

Đây là một đại diện hiện đại đơn giản:

Nếu bạn muốn hiển thị khoảng cách giữa hai người, có lẽ trực quan nhất là hiển thị khoảng cách giữa hai người. Trong mockup thô bên dưới vẫn còn một số loại thanh, nhưng nó đang chỉ về phía sau. Khoảng cách được thể hiện theo vị trí (bằng cách di chuyển người sang phải) và kích thước (thu hẹp người).

Khi bạn muốn có thêm một chỉ báo giống như thanh, bạn có thể tô màu một phần của hình tam giác như bên dưới. Và bạn có thể thêm nhãn vào các dòng.

Có lẽ người 'tham chiếu' bên trái có thể bị bỏ.

Tôi nghĩ rằng các mục khoảng cách hoạt động tốt hơn và trực quan hơn nhiều, nhưng tôi sẽ đảo ngược mọi thứ một chút. Khoảng cách lớn nên dài và đỏ, khoảng cách ngắn nên ngắn và xanh. Những gì bạn đã đăng dường như đọc ngược lại với điều này. Tôi mong muốn các thanh dài sẽ "xa" và có màu đỏ.

Không biết bố cục tổng thể của bạn, một khả năng khác có thể là sử dụng một vòng tròn có dấu chấm ....

Sử dụng hình ảnh Talkingrock đã tạo:

Tôi nghĩ điều gì có ý nghĩa nhất, với tôi, sẽ là nó được hoán đổi như vậy:

Bắt đầu ở Far Apart và sáng lên khi bạn đến gần nhau. Tôi nghĩ rằng việc thay đổi văn bản từ "Xa gần" thành một cái gì đó giống như "Xa nhau" hoặc "Gặp nhau" hoặc một cái gì đó cho thấy hai người đến một điểm đến duy nhất sẽ giúp truyền đạt ý tưởng hơn nữa.

Tôi muốn biểu thị khoảng cách dưới dạng biểu đồ thanh (loại) càng "đầy" càng gần với mọi người.

Tuy nhiên, điều đó trái ngược với những gì một biểu đồ thanh hiển thị. Giá trị càng cao, thanh càng lớn. Muốn làm điều ngược lại có khả năng sẽ thêm sự nhầm lẫn hoặc bất đồng hình ảnh vào dữ liệu thực tế.

Để làm cho điểm trực tiếp hơn một chút, hãy thay thế 'xa / gần' bằng 'lớn / nhỏ'. Điều này sẽ không có ý nghĩa gì:

                            ---        
                     ---    | |        
              ---    | |    | |        
       ---    | |    | |    | |
       | |    | |    | |    | |
big    ---    ---    ---    ---     small

Như vậy, tôi nghĩ bạn cần bỏ ý tưởng 'lật' tỷ lệ với các nhãn. Nếu bạn đang cố gắng giao tiếp một khoảng cách lớn hơn, hãy để thanh lớn chỉ ra điều đó. Đó là mối tương quan trực quan nhất.

Nhưng có lẽ giải pháp không phải là một biểu đồ thanh. Có vẻ như bạn đang cố gắng thực hiện một số phép ẩn dụ 'tín hiệu định vị'. Bạn càng ở gần, tín hiệu càng mạnh. Tôi nghĩ đó là một ý tưởng tốt, nhưng hãy xem xét một hình ảnh khác hơn là biểu đồ thanh cho điều đó. Có thể là một 'đốm sáng' (hoặc dấu chấm) của một số loại.

Bạn hỏi làm thế nào để biểu thị khoảng cách bằng đồ họa , nhưng tất cả các câu trả lời dường như dựa vào văn bản trong ảnh (các từ "xa" và "đóng", v.v.). Vì vậy, tôi đề nghị bạn chỉ cần viết "3 dặm ngoài" hoặc "200m đi" và sử dụng bất kỳ loại 'tiến bộ mét' nền mà đầy lên theo chiều ngang.

Đưa ra khoảng cách bằng số không nhất thiết phải hữu ích đối với một người đang đọc các số thực, nhưng các số và đơn vị đo lường làm cho nó hoàn toàn rõ ràng trong nháy mắt những gì bạn đang đo và nếu có sự thay đổi xảy ra.

Bối cảnh của bạn không rõ ràng nhưng rất quan trọng. Về mặt khái niệm, khoảng cách có thực sự là những gì bạn muốn đại diện? Hay đó thực sự là về việc thể hiện mức độ gần gũi của người dùng với trạng thái mà họ đang tìm kiếm, trong đó "khoảng cách" chỉ là số liệu cho điều đó?

Hãy xem xét rằng những gì bạn đang thực sự cố gắng thể hiện là mức độ gần gũi của người dùng để đạt được trạng thái mong muốn. Trạng thái mong muốn nên được đưa ra ấn tượng mạnh nhất trên màn hình.

Nói cách khác, trong ngữ cảnh ứng dụng của bạn, nếu người dùng tìm cách gần gũi hơn với người dùng khác, thì bạn sẽ không muốn một thanh (hoặc bất cứ thứ gì) mạnh hơn với khoảng cách lớn hơn, vì ấn tượng này hoàn toàn trái ngược với người dùng mục tiêu.

Điều này cũng đúng với màu sắc; trong sơ đồ màu đỏ -> màu xanh lá cây, bạn thường muốn màu xanh lá cây tương ứng với trạng thái mục tiêu và màu đỏ ngược lại, vì vậy nếu người dùng đang tìm cách ở gần hơn thì bạn sẽ muốn màu xanh lá cây ở khoảng cách nhỏ hơn.

Với ý nghĩ đó, các thanh hoặc nêm sẽ làm được, nhưng trong cả hai trường hợp, bạn sẽ muốn các thanh / nêm có màu xanh và đầy (và nêm lớn hơn) ở phía trạng thái mong muốn (ví dụ: khoảng cách thấp hơn nếu người dùng tìm cách gần hơn).

Dọc theo những dòng đó, khả năng truy cập sang một bên (đây chỉ là một ví dụ minh họa) , nếu tất cả những gì bạn thực sự muốn làm là tạo ấn tượng về mức độ gần gũi của người dùng với trạng thái mong muốn của họ thay vì cung cấp thông tin chính xác về khoảng cách, thì một chỉ báo có thể như đơn giản như một hình vuông tĩnh mờ dần từ màu đỏ qua màu vàng sang màu xanh lục ở trạng thái đích (có thể gần hơn hoặc xa hơn), có thể thu được nhãn, đường viền hoặc hình động khi đạt đến trạng thái đích.

Các tùy chọn thiết kế trong các câu trả lời khác ở đây đều tuyệt vời, nhưng từ góc độ UX, hãy chắc chắn suy nghĩ về cách bạn đang sử dụng các thiết kế đó và những gì bạn đang cố gắng thực hiện: Nếu bạn đang cố gắng khuyến khích người dùng đạt đến trạng thái mục tiêu, bạn không muốn, ví dụ, các thanh của bạn ngắn hơn và biến mất ở trạng thái đó. Đó là chống động lực.

Giai thoại (tôi không có bằng chứng trong tay) Tôi cũng sẽ nghi ngờ rằng người dùng sẽ dễ dàng chọn ra thanh lớn nhất trong một nhóm trong nháy mắt so với nhỏ nhất. Sau đó tôi sẽ tưởng tượng rằng nếu bạn có nhiều chỉ báo trên màn hình và ứng dụng của bạn muốn cho phép người dùng nhanh chóng tìm thấy "tốt nhất" (gần nhất hoặc xa nhất tùy theo ngữ cảnh), thì chỉ báo mạnh hơn đại diện cho các trạng thái mong muốn hơn sẽ giúp ích trong vấn đề này.

Cá nhân tôi thích một cái nêm, với mặt lớn hơn ở bên phải, chuyển sang màu xanh khi nó lấp đầy và gần hơn là mặt lớn hơn ( giả sử gần hơn là mục tiêu ), vì điều này gợi nhớ đến tôi về tín hiệu điện thoại di động phổ biến và phổ biến hiện nay mét (4 thanh là thú vị, 1 là không).

Tôi nghĩ bạn nên tạo thanh tất cả một màu, sau đó sử dụng một điểm đánh dấu quan trọng như mũi tên hoặc thanh màu khác được phủ theo chiều dọc để hiển thị khoảng cách tương đối từ điểm bắt đầu bên trái và điểm cuối bên phải. ( Chỉnh sửa: Tôi tin rằng thuật ngữ chính thức là một thanh trượt)

Đây là một ví dụ từ một trò chơi trong đó các biểu tượng nhân vật được sử dụng làm điểm đánh dấu và có nhiều hơn một điểm đánh dấu:

Và đây là một ví dụ thực tế hơn:

Chỉnh sửa: (Một chút biện minh cho đề xuất của tôi)

Các phiên bản gốc như được trình bày trong câu hỏi trông quá giống các thanh tiến trình được dự kiến ​​sẽ đại diện cho tiến trình, không phải khoảng cách. Nếu một cái gì đó trông giống như một thanh tiến trình (ngay cả khi nó được dán nhãn) bắt đầu đi lùi, một số người dùng sẽ bị nhầm lẫn vì nó trông không tự nhiên và phản trực giác với những gì mọi người mong đợi.

Bằng cách có một thanh màu duy nhất với một số hình thức đánh dấu, điểm đánh dấu sẽ trở thành tiêu điểm và cảm giác tự nhiên hơn là nó có thể di chuyển dọc theo thanh. Việc bổ sung các rãnh cho điều này cũng mang lại cảm giác rằng một số hình thức đo lường đang diễn ra (trong trường hợp này là khoảng cách).