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

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

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

• Используйте одни и те же заголовки / имена для одних и тех же вещей. Например, вы используете «Добавить в l ogfile», но «Перезаписать L ogfile
• Используйте тот же регистр символов, иногда это« O только первый один "," E очень S ingle W ord ", а иногда" это C amel-cased ". Выберите одну схему и используйте его соответственно ( Падеж приговора и Падеж заголовка являются наиболее распространенными)
• Не пытайтесь быть крутым »,
• Попробуйте заменить коллекцию флажков флажком или сеткой свойств.

Практическое правило:

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

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

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

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

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

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

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

An interesting article on this topic:

Managing UI Complexity by Brandon Walkin.

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

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

Это может не подходить, но ...

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

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

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

В комментарии вы говорите, что пользователю «ДОЛЖНА быть доступна вся информация сразу». Означает ли это, что они должны видеть все флажки, фреймы и полосы прокрутки одновременно или только информацию ?

Например, вместо того, чтобы иметь множество флажков для варианта 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 не отображается правильно - оно выглядит правильно с фиксированным шрифтом: - \)

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

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

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

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

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

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

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

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

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

Шаг 2: Настройте хосты _____________

Шаг 3: Настройте параметры получения:

() параметр

() параметр

() параметр

() параметр

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

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

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

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

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

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

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

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

Во-вторых, организуйте макет в соответствии с этой иерархией: наиболее важные сверху и слева.

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

Одна вещь, которая может быть у вас, но очевидная для примера WGET, - это использование главного меню, например, File, Edit, Tools, Help. А еще панель кнопок?

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

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

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

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

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

При этом ff (да, еще один список) являются моими предложениями:

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

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

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

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

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

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

прекратите воровать овец

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   a. В разделе «Параметры запуска» я вижу три параметра флажка: Вся информация, Нет информации, Некоторая информация. Если за раз можно выбрать только один, то, возможно, их можно будет изменить в раскрывающемся меню выбора. Также в разделе «Параметры выполнения» есть «Добавить файл журнала», «Перезаписать файл журнала», которые снова можно преобразовать в раскрывающееся меню, поскольку вы можете выбрать только один.

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

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