Delphi: новый дизайн пользовательского интерфейса в приложении - PullRequest
4 голосов
/ 21 августа 2011

Мне нужны ваши предложения, как организовать и сделать красивый графический интерфейс пользователя.

Теперь у меня есть что-то вроде этого: enter image description here

Существует древовидное представление (оно занимает много места ...) в виде меню с назначенными кадрами для каждого элемента. Все фреймы имеют кнопки управления (панель инструментов) и что-то из этого списка: представления списка, сетки строк, индикаторы выполнения, заметки, расширенные правки, веб-браузер, палитры цветов, списки, метки, правки и т. Д.

У меня недостаточно опыта для создания хорошего, простого и графического пользовательского интерфейса, и у меня нет идей, что делать.

Самое сложное для меня - мне нужно создать красивый SDI, но нынешний интерфейс похож на MDI (кадры с большим количеством элементов управления вместо окон).

Итак, я пытаюсь скопировать пользовательский интерфейс из другого программного обеспечения: http://www.addictivetips.com/windows-tips/150-best-windows-applications-of-year-2010-editors-pick/ + Снимки экрана . Но я не могу найти что-то подходящее для меня: (

Добавлено:

У меня есть идея использовать стеклянный эффект («меню» вместо древовидного представления слева), но он выглядит сложно: кнопки на стекле и кнопки внизу (панель инструментов).

enter image description here

Другая версия: enter image description here

Пожалуйста, посоветуйте мне, что делать или дайте мне направление. Спасибо!

Ответы [ 4 ]

7 голосов
/ 21 августа 2011

Учтите, что большинство мониторов теперь имеют 16/10 или 16/9, то есть больше не имеют формат изображения 4/3.

Таким образом, это не потеря места для размещения дерева слева или даже панели инструментов команд слева вместо верхней части окна. Ваш первый скриншот был не хуже, в этом аспекте. Я просто пишу средство просмотра журнала с таким дизайном : журнал событий имеет полную высоту приложения.

Лента Office 2007/2010 , например, хорошо выглядит, но занимает слишком много места по вертикали ИМХО при ежедневном использовании. Некоторые пользователи (среди меня) разочарованы этой лентой. Например, я не нахожу это очень полезным в ноутбуке. Великолепные пользовательские интерфейсы дают полное пространство контенту, а не командам. Хром является хорошим примером этого. А мобильные приложения имеют тенденцию максимально использовать доступное пространство.

Только мои 2 цента.

2 голосов
/ 23 августа 2011

Вы пытаетесь создать приложение с вкладками, поэтому я бы предложил использовать какой-либо элемент управления вкладками.
Даже тот, который по умолчанию в Delphi позволяет добавлять изображения на вкладки.

Что-то вродеэто:

enter image description here

Несколько соображений:

Как часто используется приложение?

Если ваши пользователи будут использовать приложение ежедневно, постарайтесь максимально использовать полезное пространство, т.е. сделать элементы управления настолько маленькими, насколько это необходимо.
Если приложение редко используется вашими пользователями, сделайте элементы управления большими и яркими,пометьте каждую кнопку, чтобы все было понятно, и время, чтобы выяснить, где находится то, что минимизировано, это также означает использование знакомых элементов пользовательского интерфейса.

Вы нацеливаетесь на слонов или мышей?
Если ваша аудитория подкована в компьютерах (мыши), вы можете сойти с рук больше экспериментов и побрякушек;если вы имеете дело с вечными новичками, вам нужно придерживаться основных вещей.

Помните, пользовательский интерфейс является контрактом
Убедитесь, что элементы управления работают так, как объявлено.Если что-то похоже на кнопку, сделайте это как кнопку.Не маскируйте меню, чтобы оно выглядело как список / древовидное представление.
Меню выполняет действие (это скрытая кнопка), список выбирает один элемент, с которым можно работать.

Мое мнение
Мне не нравится ваш начальный скриншот, потому что он пытается принудительно настроить tabsheet / pagecontrol в формате древовидного представления, при этом называя меню элементов.Это создает неуклюжий интерфейс.
Я никогда не видел, чтобы меню использовалось для переключения между представлениями, а древовидная структура создает очень маленькую цель для сокрытия.Вдобавок к этому он допускает многократное вложение.
Дерево - это концепция, которую понимает каждый программист, но очень немногие за пределами этой группы работают, ИМХО, не используют дерево в вашем приложении! и избегайте просмотра дерева.
Это плохой элемент управления для работы, потому что:

  • Это позволяет вложить> 2 NONO в мою книгу ;
  • Слишком маленький, чтобы ударить мышью, еще хуже тачпад;
  • Что случилось со знаком [>] впереди, почему я хочу свернуть дерево только с одним уровнем вложенности, и когда я это делаю, и [+] отображается перед «главным меню», гдена земле исчезли пункты моего подменю?

Мне нравится ваша последняя версия, но

  • Для каждой кнопки нужны текстовые метки;
  • Сделайте вертикальный контроль страниц, похожий на лист с вкладками, это сразу же прояснит ваши намерения;
  • Я бы хотел увидеть строку состояния;
  • Стекло может выглядеть круто, но наличие мусора с экранов ниже просвечивает ваше приложение, и все выглядит очень занятым, что не очень хорошо, если вы пытаетесь сосредоточиться на этом конкретном приложении;
  • Убедитесь, что разделители установлены между всеми панелями, и визуально выделите разделитель, установив beveled:= true и width/height:= 5 , чтобы вы могли поразить этот разделитель
  • Панель info имеет собственную подпись, огромная трата пространства.Достаточно того, что в каждом окне есть строка заголовка, которая почти ничего не делает, не умножает неинтерактивное пространство.

Наконец
Сделайте, как говорит Дэвид, и купитекопия about face, это лучшая книга по дизайну пользовательского интерфейса, которую я когда-либо видел.http://www.cooper.com/#about:books

2 голосов
/ 21 августа 2011

Говоря лично о вашем первом снимке экрана, кнопки на панели инструментов слишком большие.Они слишком сильны, даже на второй взгляд.

Я бы уменьшил их размер.Или, когда эта программа предназначена для детей или сенсорных устройств, другие элементы управления и размеры шрифта должны быть увеличены.

1 голос
/ 21 августа 2011

Первая картинка - лучшая версия для стандартных настольных компьютеров с мышью.

Третья картинка подойдет для планшетов с их сенсорными экранами.Но это требует некоторых улучшений.В настоящее время я не вижу, на какой странице я сейчас нахожусь, даже больше: нет никаких признаков того, что эти кнопки действительно переключают страницы.Я думаю, вам здесь нужен какой-то таб-контроль.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...