thiết kế chuyên nghiệp của một menu dọc cực kỳ mỏng

7

Ok, vì vậy tôi là một lập trình viên và là một thảm họa hoàn toàn trong thiết kế web. Cho đến bây giờ tôi đã có thể tạo ra các giao diện "chấp nhận được" với sự trợ giúp của các khung như bootstrap, nhưng tôi bị mắc kẹt với một menu phụ nhỏ. Điều tốt nhất tôi có thể đưa ra là:

Đó là một menu bên nhỏ trên một trang mà bạn có RDP-client trong trình duyệt, do đó, yêu cầu chính là nó RẤT mỏng và tốt nhất là nổi ở bên trái màn hình (thay đổi nó sang ngang và dán vào trên cùng của màn hình không phải là một tùy chọn). Nó cũng sẽ hiển thị AT TẤT CẢ lần, vì vậy không xuất hiện khi di chuột vào đúng khu vực bằng chuột của bạn. Nó chứa ba nút có thể nhấp (MENU, KEYS, ĐÓNG). Và như một lưu ý phụ: các phím nút là loại giải pháp cụ thể và là một mô tả rõ ràng trong ngữ cảnh của người dùng.

Câu hỏi của tôi là: làm thế nào tôi có thể làm cho menu này đáp ứng các tiêu chí trên rất mỏng -> rộng ~ 20px luôn hiển thị và vẫn làm cho nó trông chuyên nghiệp và không bị phân tâm? Tôi thực sự sẽ đánh giá cao bất kỳ hình thức tư vấn và lời khuyên!

website-design interface-design css

— ấu trùng11
nguồn

Chính xác thì ba lựa chọn làm gì? Tôi đoán Menu sẽ hiển thị một menu, tốt, với các tùy chọn RD khác; Phím sẽ đưa lên một bàn phím ảo? Cung cấp cho bạn một danh sách các phím tắt bạn có thể sử dụng trong máy khách RDP? Thứ gì khác? Và Đóng (như tôi đang giả sử) đóng kết nối / phiên RDP hiện tại, về cơ bản là đăng xuất bạn? Và nếu dự đoán của tôi là chính xác, có lý do cụ thể nào bạn đã đưa Khóa và Đóng vị trí nổi bật (không được nhúng) như vậy không, thay vì chỉ có một menu với tất cả các tùy chọn? Có bao nhiêu tùy chọn trong thư mục Menu ?

— Janus Bahs Jacquet

@Janus Bahs Jacquet, có một điều là hầu hết người dùng không quen thuộc với những thứ như biểu tượng menu hamburger ... Tôi chắc chắn rằng khi ba điều này không phải lúc nào cũng có thể nhìn thấy tôi sẽ nhận được khiếu nại và câu hỏi ... Nhưng tôi đang suy nghĩ về việc chuyển sang chỉ một biểu tượng đóng và biểu tượng hamburger sẽ mở menu và di chuyển nút phím phụ ở đó.

— larzz11

@ larzz11 Tất nhiên phụ thuộc vào cơ sở người dùng của bạn, nhưng biểu tượng bánh hamburger rất phổ biến những ngày này mà tôi mạo hiểm gần như tất cả người dùng đều rất quen thuộc với nó.

— Janus Bahs Jacquet 4/2/2016

8

Cân nhắc sử dụng các mẫu UI đã thiết lập như biểu tượng menu burger hoặc mũi tên để hiển thị rằng có hình vẽ hoặc menu. Biểu tượng này đủ để mọi người biết có các nút điều hướng / cài đặt được nhấp vào.

Đây chỉ là một bản phác thảo nhanh, nhưng bạn có thể nhận được các biểu tượng như thế này từ thư viện Bootstraps.

— Uống cà phê
nguồn

Mmm đó là một ý tưởng tốt. Bây giờ tôi nghĩ về nó, sẽ hơi quá mức / dư thừa để tạo một menu trong đó một trong các nút sẽ mở một menu khác .... Đó là nút đóng mà tôi muốn hiển thị mọi lúc, nhưng tôi đoán nó có thể được chuyển sang menu khác và sau đó chỉ cần một nút nhỏ mở menu lớn hơn ....

— larzz11

Bạn có thể chỉ cần một chữ X trong một hộp lên đến góc trên cùng bên trái, sau đó đặt menu xuống đủ để nó không bị bấm một cách tình cờ. Đôi khi thiết kế chỉ đơn giản là loại bỏ mọi thứ cho đến khi nó ở các yếu tố cơ bản, sau đó chỉ cần thêm một chút đánh bóng. Tôi nghĩ rằng tất cả chúng ta đều có lỗi khi nghĩ quá nhiều thứ :) rất vui vì điều đó có ích.

— Tiêu thụ cà phê

"Đôi khi thiết kế chỉ đơn giản là loại bỏ mọi thứ cho đến khi nó ở các yếu tố cơ bản, sau đó chỉ cần thêm một chút đánh bóng." Tôi nghĩ rằng tôi nên đóng khung cái đó :)

— larzz11

@ larzz11: nó (có thể) được chuyển thể từ câu nói nổi tiếng của St Exupery:"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"

— Olivier Dulac

@OlivierDulac Tôi nghĩ rằng tôi đang diễn giải một ai đó :) đó là điều thực sự bị mắc kẹt từ trường đại học.

— Tiêu thụ cà phê

1

Đây chỉ là phần bổ trợ của tôi về một trong những câu hỏi của bạn trong các bình luận liên quan đến nút đóng.

Khi sử dụng menu burger, bạn thường không thấy nút đóng mọi lúc, điều gì xảy ra, bạn nhấp vào biểu tượng menu (menu burger), menu đầy đủ mở ra và bằng cách này hay cách khác, biểu tượng burger thay đổi thành biểu tượng đóng.

Khi nhấn nút đóng, menu sẽ đóng lại và nó thay đổi trở lại biểu tượng menu burger.

Nó trông tốt hơn và bạn không bị bỏ lại với một nút đóng mà không làm gì khi menu không mở.

Một điều nữa

Tôi muốn đề cập rằng chiều rộng 20px là nhỏ..như, nhỏ này: và đối với tôi, nó quá nhỏ để có trải nghiệm người dùng tốt. Mặt khác, mỏng là một điều nhưng không thể nhận thấy ... bạn không muốn điều đó.

— Alin
nguồn

2

Tôi thấy mọi thứ trượt xung quanh khi con chuột của tôi ở gần chúng vô cùng khó chịu

@GOROIE Vâng, thì đó là một điều tốt tôi đã đề cập vào biểu tượng gần gũi chỉ xuất hiện sau khi đơn được được nhấp không dao động , phải không? Sẽ thật ngớ ngẩn khi nghĩ rằng nút đóng xuất hiện khi biểu tượng menu được di chuột ... một lần nữa, nó sẽ đóng lại nếu nó làm gì?!

— Alin

Tôi tin rằng bạn đang hiểu nhầm mục đích của nút 'đóng'. Trừ khi tôi đọc sai câu hỏi, đó không phải là một nút đóng menu Menu mở rộng này; thay vào đó, menu có nhiều tùy chọn khác nhau mà bạn có thể thực hiện với máy khách Remote Desktop là trang chính và nút đóng ở đây là một nút đóng nút kết nối / phiên bản Remote Desktop hiện tại.

— Janus Bahs Jacquet

1

Bạn có thể cân nhắc sử dụng menu trượt ra một phần khi người dùng có chuột ở gần menu để tiết kiệm không gian trực quan.

Trạng thái mặc định:

Khi chuột ở gần (sử dụng hình ảnh động để chuyển tiếp):

Nếu được phép, bạn thậm chí có thể mở thêm khi một trong các phần được nhấp.

— Zach Saucier
nguồn

Cá nhân, tôi thấy điều này là rắc rối - một số. Bạn phải đảm bảo không có gì xuất hiện dưới / gần "mũi tên menu". Nếu không, bạn có thể đang cố gắng làm nổi bật một số văn bản, vô tình mở menu. Âm thanh khó chịu. Nếu một menu được mở, hãy để tôi quyết định khi nào mở nó, vì tôi cảm thấy khá khó chịu khi máy tính của tôi nghĩ rằng nó biết tôi muốn gì (khi nào nó không). Đây chỉ là quan điểm cá nhân của tôi.

— Vince Emigh

@VinceEmigh không thực sự rắc rối để đảm bảo không có gì ở bên dưới menu .. Dù sao trang cũng phải có lề, vì vậy hãy đảm bảo lề ít nhất là kích thước của menu không thực sự là vấn đề.

— Cai

@CAI Tôi không có nghĩa là trực tiếp dưới menu. Không phải ai cũng cảm thấy thoải mái khi di chuyển chuột và việc quá mức nó có thể dẫn đến việc bạn vô tình mở menu, điều này có thể che khuất dữ liệu bạn thực sự muốn. Các trang web có lề, nhưng chuột có thể gây rối và mọi người có thể lấn lướt khi di chuyển chuột. Lợi nhuận của trang web có thể đủ lớn để chiếm một menu mở, nhưng điều đó hạn chế chiều rộng của menu của bạn (không muốn tỷ lệ lợi nhuận quá lớn)

— Vince Emigh

2

Tôi đồng ý với quan điểm của bạn nói chung nhưng câu hỏi nêu rõ thực đơn phải rộng ~ 20px vì vậy tôi không thấy vấn đề gì trong trường hợp này.

— Cai

0

Vì bạn đang sử dụng bootstrap, nên dễ dàng sử dụng glyphicon để hiển thị rằng đó là một menu, thay vì từ.

<div><span class="glyphicon glyphicon-menu-hamburger"></span></div>

Đầu tiên, bạn nên xem xét thực tế rằng 20px là cách để làm mỏng. nó chỉ giống như một số đốm sáng trong trang, hoàn toàn không phải thứ gì đó mời người dùng nhấp vào. Tôi đề nghị 50px. Đó là một kích thước tiêu chuẩn mà người dùng sẽ thấy, và sẽ cảm thấy thoải mái.

Nếu thực sự không thể sử dụng menu dày hơn, hãy cân nhắc sử dụng hộp 50px / 50px ở phía trên bên trái màn hình.

Nếu bạn phải sử dụng các từ, thay vì một biểu tượng, bạn chắc chắn không nên đặt các chữ cái này bên dưới các chữ cái khác. Hãy thử xoay tiêu đề sang một bên (và sử dụng phông chữ mỏng hơn).

— MJH
nguồn