Как я могу улучшить эстетику уродливой формы окна, заполненной слишком многими (необходимыми) функциями?

Один из оконных диалогов программного обеспечения, над которым я работаю, выглядит примерно так: (оригинальный снимок экрана, скопированный из этого сообщения ужаса кодирования, другие примеры доступны по этому такому вопросу)

Дело в том, что ни один из параметров не может быть удален (те, которые уже могли быть), и что все они должны быть видны с первого взгляда (то есть не допускаются вкладки). вариант в моем конкретном проекте.

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

Как сделать этот диалог ~~более удобным для пользователя,~~ не вызывая ужаса, не удаляя функции?

Изменение: Пример GUI, который я взял, имеет много очевидных недостатков дизайна (см. Ответы 1 2), но даже после исправления тех (которые я сделал на программном обеспечении, над которым я работаю), диалог все равно выглядит довольно уродливо.

Ниже приведен еще один пример (кредит). Элементы управления (почти) выстроены правильно, используются соответствующие элементы управления и т.д., Но общий результат все еще выглядит ужасно:

_{(источник: judahhimango.com)}

Ответ 1

Учитывая ограничения, я думаю, у вас не будет много вариантов.

Хорошей отправной точкой было бы равное выравнивание и дистанции управления, чтобы увеличить общую симметрию с конечной целью уменьшить визуальный беспорядок.

<сильные > Примеры:

Групповые поля "Special" и "Running options" должны иметь равную высоту.
Расстояние между четырьмя кнопками "Сохранить настройки" и "Выход" должно быть равно.
Все кнопки должны иметь одинаковую высоту, если это возможно, избегать переноса слов.
Используйте одну и ту же высоту для всех однострочных полей редактирования.
Квота квоты и ее текстовое поле должны быть на той же базовой линии.
Расстояние между заголовком группового окна и его первым элементом управления должно быть равным (сравните "Параметры запуска" с "Параметры поиска" )
Увеличить расстояние между элементами управления в целом, то есть сделать форму менее плотной.

Исправления содержимого:

Используйте те же заголовки/имена для одних и тех же вещей. Например, вы используете "Добавить в l ogfile", но "Overwrite L ogfile
Используйте тот же случай символов, иногда он " O первый первый", " E очень S ingle W ord", а иногда " C с амелем". Решите по одной схеме и используйте ее, следовательно (наиболее часто встречаются случаи и заголовок)
Не пытайтесь быть крутым, "Go 2 фон" выглядит не очень профессионально.
Избегайте элементов управления с помощью нечитаемых ярлыков или без содержимого. Это не помогает, если пользователь должен остановиться на каждом элементе управления и подумать: "Что делает эта вещь?"

Некоторые более радикальные/противоречивые изменения:

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

Эмпирическое правило:

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

Об использовании цветов и значков:

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

Ответ 2

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

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

взгляните на это

Там четкая граница между цветком и его фоном. Малая глубина резкости фотографии дает четкий контраст и позволяет очень быстро создать мысленный силлуэт.

джунгли http://www.statravelbuzz.co.uk/wp-content/jungle-taranaki-new-zealand.jpg

что происходит на этом изображении? Там слишком много деталей, и это повсеместно.

посмотри здесь

http://www.papress.com/thinkingwithtype/text/line_spacing.htm

_{(источник: papress.com)}

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

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

Ответ 3

сеточные системы сеточные системы http://ecx.images-amazon.com/images/I/51kcWOOyUoL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA240_SH20_OU01_.jpg

мышление с типом

другие рекомендации:

хватит воровать овец

элементы типографского стиля

дизайн повседневных вещей

гуманный интерфейс

Ответ 4

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

Ответ 5

Дело в том, что ни один из вариантов не может быть удален (те, которые могли уже быть), и что все они должны быть видны с первого взгляда (т.е. никакие вкладки не допускаются)

Вздох. Я бы сказал, что, поскольку все видно с первого взгляда, они практически становятся невидимыми в море контроля.

Это сказанное, ff (да другой список) - мои предложения:

Чтобы уменьшить беспорядок, увеличьте общую форму, и все элементы управления будут разнесены во всех направлениях.
Стандартизуйте высоту элементов управления, например, все текстовые поля должны иметь одинаковую высоту, все кнопки имеют одинаковую высоту и т.д.
Совместите метки с текстовыми полями более последовательно
Вместо этого сделайте так, чтобы макет стекал вниз: 1 столбец, ширина каждой группы которого равна ширине всех остальных групп.
Установите все имена групповых блоков жирным шрифтом, чтобы они выделялись
Поместите все эти команды "wGetStart.bat" в отдельную группу

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

Ответ 6

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

Это выглядит примерно так (после исправления выравнивания и избыточности и небольшой перегруппировки групп):

_{(источник: zuschlogin.com)}

Ответ 7

Поскольку вкладки не разрешены, вы можете создать больше сетки, например layout.

Ответ 8

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

Ответ 9

Здесь мой случайный выбор предложений:

сделать это больше, это позволяет более структурированную группировку, уменьшая ограничение пространства для каждой группы.
добавить некоторую структуру, группируя параметры, которые пользователь может захотеть объединить в одно и то же время
добавить значащие заголовки (может потребоваться предыдущий элемент). "специальные", "параметры запуска", "параметры поиска" на самом деле не содержат никакой полезной информации.
убедитесь, что только опции, которые могут быть объединены случайным образом, - это флажки (например, "нет информации", "вся информация", "некоторая информация" действительно полностью независимые параметры? То же самое для "append to logfile", "overwrite logfile" ).
используйте соответствующие элементы управления (счетчик для ввода номера, диалог выбора файлов для файлов, переключатели для взаимоисключающих элементов,...)
деактивировать элементы управления, которые не имеют смысла с текущей конфигурацией (например, текстовое поле пользовательского каталога).
переместить все действия в одно место.
скрыть полосы прокрутки, если они на самом деле не нужны (т.е. уменьшить визуальный беспорядок)
быть более последовательным (почему это "параметры запуска" и "параметры поиска", но не "специальные параметры"?)

Ответ 10

Одна вещь, которую вы можете иметь, но очевидна для примера WGET - это использование главного меню, например. Файл, Редактировать, Инструменты, Справка. А также панель кнопок?

Ответ 11

Помимо других очень необходимых изменений, добавление баннера (отображение логотипа компании или что-то в этом роде), похоже, улучшает общий внешний вид диалогового окна.

Я знаю, что это пустая трата пространства, но, похоже, улучшает глобальное ощущение о окне.

alt text http://img24.imageshack.us/img24/3423/wget.jpg

Ответ 12

Сначала определите иерархию блоков управления. Даже если все должно быть видимым, я думаю, что некоторые функции важнее других. Также сделайте четкое разделение между функциями, которые применяются к домену (например, Start wGetStart.bat) и функциями, которые применяются к программному обеспечению (например, Save settings).

Во-вторых, упорядочьте макет в соответствии с этой иерархией: наиболее существенным для верхнего и левого.

В-третьих, пусть ваш дизайн дышит. Пространство является основополагающим для определения содержимого.

Ответ 13

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

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

Это диалоговое окно для настройки набора параметров, и это, вероятно, совершенно функционально и не очень важно для ваших пользователей. Вы могли бы приложить много усилий в какой-то странный, удобный интерфейс замены, который может произвести впечатление на StackOverflow code-noscenti, но мы не платим зарплату.

Теперь второе окно - это кусок дерьма.

Ответ 14

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

Вы говорите, что это используется трейдерами. Хотя я никогда не занимался этим сегментом рынка, я часто обращался к руководителям, которым нужна очень конкретная информация для запуска своего бизнеса, и первое сокращение приложения почти всегда выглядело так, как вы показали.

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

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

Ответ 15

Дублирование - все они могут быть доступны мгновенно, но они могут быть доступны и в других местах. Таким образом, вы можете использовать ускоритель клавиатуры, меню, съемную панель, область с вкладками...

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

Ответ 16

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

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

Юзабилити - это не просто эстетика ИМХО. Речь идет о том, чтобы понять, что приложение намерено делать. Я бы реорганизовал это приложение, чтобы предоставить ярлыки для общих шаблонов вариантов. Если в 90% случаев я собираюсь использовать определенную конфигурацию параметров, почему мне нужно видеть каждую функцию, перечисленную в пользовательском интерфейсе, в 100% случаев? Это просто лишний беспорядок. Разумная настройка по умолчанию - это мощная конфигурация. Вам не нужно жертвовать функциями, в некотором смысле не заставляя меня думать - это функция, возможно, самая важная функция.

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

Это одна из вещей, которые OS X действительно хорошо. В OS X есть много возможностей и возможностей настройки, "скрытые функции", если хотите. Но ОС по умолчанию имеет разумные и прямые варианты. Предоставляйте инструменты для опытных пользователей, но не загромождайте систему в первый раз или случайным пользователем. Это не жертвует функциональностью, она эффективно организует функциональность.

Это мое первое предложение. Но если вы не хотите скрывать параметры, я бы сделал это длинным прокручиваемым вертикальным списком, организованным в ясных шагах с объяснением для каждого шага:

Шаг 1: укажите URL ______________

Шаг 2. Настройка хостов _____________

Шаг 3: Настройте параметры поиска:

() опция

И так далее...

На каждом шаге укажите некоторый контекст значения параметров конфигурации.

Преимущество этого заключается в том, что вы можете эстетически очистить пользовательский интерфейс и предоставить полезные советы по настройке. Я не знаю, что означает "Empty wGetStart.bat". Я предполагаю, что это опустошает пакетный файл. Предоставьте мне объяснение, чтобы я знал, хочу ли я нажать эту кнопку или нет. А затем позвольте мне скрыть объяснения под складным меню, если я регулярно использую интерфейс.

Мои два цента.

Ответ 17

Это может быть неприемлемо, но...

Скрыть все параметры в таблице стилей, так же как все параметры форматирования абзаца скрыты в текстовом процессоре. В большинстве случаев пользователь просто выбирает именованный стиль. Когда нужны страшные вещи, щелчок кнопки "Дополнительно" может вырастить форму, чтобы сразу просмотреть все параметры, чтобы позволить некоторым переопределить или разрешить определение новых именованных стилей.

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

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

Они могут быть объединены, так что ваш итоговый дисплей говорит что-то вроде "like < style name > , except...", в зависимости от стиля, который в наименьшей степени отличается от текущих параметров.

Ответ 18

В комментарии вы говорите, что пользователь "должен иметь всю доступную информацию сразу". Означает ли это, что они должны видеть все флажки и рамки и полосы прокрутки сразу или только информацию?

Например, вместо того, чтобы иметь множество флажков для опции 1, вариант 2, вариант 3 и т.д. в главном графическом интерфейсе, показывать только выбранные параметры и давать пользователю возможность открыть окно конфигурации, когда им нужно что-то измените.

Вместо этого:

+- Feature Set X - +
|                  |
|  [x] option 1    |
|  [x] option 2    |
|  [ ] option 3    |
|  [x] option 4    |
|                  |
+------------------+

показать это:

feature set x: option 1, option 2, option 4  [configure...]

Это позволяет пользователям видеть все выбранные параметры без необходимости приобретать ценную недвижимость для всех виджетов, необходимых для изменения значений.

(извинения, если искусство ascii не отображается правильно - оно выглядит правильно в фиксированном шрифте: - \)

Ответ 19

Интересная статья на эту тему:

Управление сложностью пользовательского интерфейса от Brandon Walkin.

Ответ 20

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

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

Ответ 21

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

Некоторые вещи, которые, возможно, не обсуждались:

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

а. В разделе "Параметры запуска" я вижу три параметра флажка "Вся информация", "Нет информации", "Информация". Если за один раз можно выбрать только один, то, возможно, их можно будет изменить в меню выбора выпадающего списка. Также под тем же "Запуск Параметры" есть Append Logfile, Overwrite Logfile, который снова вы можете преобразовать в раскрывающееся меню, так как вы можете выбрать только один.

б. Два текстовых поля, в которые вы можете разместить хосты, возможно, можно объединить в один gridview с тремя столбцами. Первый столбец - это хост, второй - флажок "Принять", а третий - флажок "Отклонить".

Просто используя разные элементы управления, мы все еще можем видеть все, что нам нужно, но с меньшим количеством элементов управления в приложении.

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

Надеюсь, что это поможет.