Пинаем дизайн интерфейса программы

Уважаемые коллеги,

Прошу разнести в пух и прах дизайн интерфейса (на картинке). Понятно ли назначение элементов, что нужно переделать, как именно и почему?

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

Для этого создал и платный проект, если кто-то из спецов может поделиться опытом за деньги - ссылка

Итак, что тут не так, как бы вы сделали лучше и почему?

Спасибо заранее за все конструктивные идеи. Жалеть никого тут не надо, ругайтесь смело, если это необходимо.

Ник

Там, где надпись "Tip: select a template..." логично было бы поставить вторую кнопку Import рядом с надписью, под списком, имхо

Юлия, это стандартный контрол, здесь сделать ничего нельзя. Граница лист-бокса становится чёткой при наведении мыши (то есть там всё хорошо видно).

Правая часть полосы прокрутки размыта.
Скролин странно выглядит как будто съехал в левую сторону от полосы прокрутки
Полоса прокрутке вверху закончена в низу нет, разное расстояние от нала и конца у кнопок вверх/вниз
Кнопка "экспорт в файл" длинновата, в сочетании с Suqqest... выглядит не гармонично
Полоса возле кнопки с "..." оформлена не аккуратно, визуально низ сливается немного с самой формой
И отступы от Templates и Tip к форме: сделать бы побольше, а то как-то налеплено
Поменять цвет кнопки Ок, и цвет ссылок.

Поищите тогда скролин лучшего качествая...т.к его разработка на сколько я знаю очень трудоёмкая.

Julija_Kostuyk, установите себе Windows 7.

Цитата ("klimz"):

Julija_Kostuyk, установите себе Windows 7.

Спасибо за совет, но меня XP вполне устраивает.

Юля, это стандартные контролы, они рисуются в соответствии с выбранной темой.
А Jekyll в целом прав.

Цитата ("Jekyll"):

Там, где надпись "Tip: select a template..." логично было бы поставить вторую кнопку Import рядом с надписью, под списком, имхо

Тогда будет две кнопки Import, и это не есть хорошо...

Забыл сказать, что интерфейс мультиязычный, строка с Tip может быть длиннее (например на немецком), и туда на один уровень вставлять нельзя.

Цитата ("Sivis"):

Юля, это стандартные контролы, они рисуются в соответствии с выбранной темой.

может и в проге они нормально выглядят, но на файлике не очень, просили придираться к мелочам, вот и придралась, всего-то...

Лучше Tip и Templates выровнять по левой стороне и отступы от формы немного увеличить.

Цитата ("Julija_Kostuyk"):

отступы от Templates и Tip к форме: сделать бы побольше, а то как-то налеплено...

Тут соглашусь. По остальному - кнопки это стандартные контролы, можно их удалять, менять расположение или размер. Синий цветдля ссылок вроде бы брали стандартный (для HTML ссылок). Или вправду не тот синий?

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

Юлия, с такими отступами значительно лучше. Спасибо!

) помоему отлично получилось ))

Спасибо

Кнопки "Ок" "Apply" "Cancel" (это традиционно)

Что означает "Apply"? Может можно от него отказаться? В большинстве случаев кнопка, которая вводит в заблуждение. Я нажал "Применить", а потом "Отмена". Программа отменит то, что я уже применил? Если нет, то зачем кнопка "Отмена", если да, то зачем кнопка "Применить"? А если нажать "Применить", то чем будут отличаться кнопки "Ок" и "Отмена"?

Кроме того, эти кнопки не выравнены ни с одним элементом интерфейса окна - не хорошо.

Окно "Примера" тоже хорошо бы выравнять по краям, как список выше.

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

Еще одно замечание: почему верхняя ссылка с тремя точками, а нижние без?

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

Цитата ("shapod"):

Кнопки "Ок" "Apply" "Cancel" (это традиционно)

Поясните плиз, имеется в виду порядок кнопок или надписи на них?

Цитата ("shapod"):

Что означает "Apply"? Может можно от него отказаться? В большинстве случаев кнопка, которая вводит в заблуждение. Я нажал "Применить", а потом "Отмена". Программа отменит то, что я уже применил? Если нет, то зачем кнопка "Отмена", если да, то зачем кнопка "Применить"? А если нажать "Применить", то чем будут отличаться кнопки "Ок" и "Отмена"?

Apply означает применить изменения, не закрывая окно. OK - то же самое с закрытием окна. Это традиционное поведение, если я не ошибаюсь.

Цитата ("shapod"):

Окно "Примера" тоже хорошо бы выравнять по краям, как список выше.

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

Цитата ("shapod"):

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

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

Цитата ("shapod"):

Еще одно замечание: почему верхняя ссылка с тремя точками, а нижние без?

Это лажа, согласен, исправим.

Цитата ("shapod"):

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

А вот это самое главное и интересное. Я знал, что не всё так очевидно. В общем можно импортировать из шаблона (список вверху) или из файла (поле над Import). Шаблоны они также и файлы физически, поставляются с продуктом. Но юзер может и свои файлы искать, например свою резервную копию. С помощью кнопки с тремя точками. В общем ясно, что неочевидно всё.

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

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

Цитата ("wrc"):

Поясните плиз, имеется в виду порядок кнопок или надписи на них?

Порядок. Посмотрите на стандартные окна винды (настройка экрана в старых версиях)

Цитата ("wrc"):

Apply означает применить изменения, не закрывая окно. OK - то же самое с закрытием окна. Это традиционное поведение, если я не ошибаюсь.

Не ошибаетесь. Но это не значит, что это хорошо.
Вы нажали "Применить" - чем теперь отличаются кнопки "Ок" и "Отмена"? Если я нажму "Отмена", программа отменит предыдущее "Применить"?
Что произойдет в программе при нажатии "Применить"? Как пользователь увидит применение? Если при применении произойдет какое-то изменение, то лучше сделать кнопки "Применить" и "Закрыть".

Цитата ("wrc"):

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

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

Цитата ("wrc"):

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

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

Цитата ("wrc"):

спасибо

Пожалуйста.

Цитата:

Порядок. Посмотрите на стандартные окна винды (настройка экрана в старых версиях)

На картинке свойства экрана на XP. Порядок кнопок такой же. Не там смотрю?

Цитата:

Вы нажали "Применить" - чем теперь отличаются кнопки "Ок" и "Отмена"? Если я нажму "Отмена", программа отменит предыдущее "Применить"?
Что произойдет в программе при нажатии "Применить"? Как пользователь увидит применение? Если при применении произойдет какое-то изменение, то лучше сделать кнопки "Применить" и "Закрыть".

Отмена будет недоступна в таком случае, то есть на неё невозможно будет нажать (она будет "серая". При нажатии "Применить" изменения отображаются в программе (эту визуально другая часть на экране, совсем другие окна).

Цитата:

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

Произойдет авто-масштабирование в имеющуюся область для примера с сохранением пропорций.