Автор Тема: (Разработчикам) Рекомендация по улучшению дизайна!  (Прочитано 4823 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн DDP

  • Новичок
  • *
  • Сообщений: 11
  • Репутация +4/-0
    • Просмотр профиля
Господа, выходя за рамки разработки, полезно посмотреть на конкурентов!

Дизайн очень важная составляющая органайзера, вы ведь заинтересованы, чтоб пользователю хотелось в него чаще заглядывать :)?

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


"Чистота -- залог здоровья, порядок прежде всего!"


Хочу вам показать пару скринов, того, что параллельно использую, т.к. ощущение советского АвтоВАЗа почему-то до сих пор не покидает при виде интерфейсов большинства современных российских программ.
« Последнее редактирование: 31 Мая 2015, 18:30:08 от DDP »

Эти пользователи сказали Вам СПАСИБО:


Оффлайн Ilya_Iv

  • Опытный
  • *****
  • Сообщений: 497
  • Репутация +59/-0
    • Просмотр профиля
    • Зеркало LeaderTask
Это вы ещё не видели LT до версии 7.5  ;D. Но лично мне по внешнему виду он тогда и сейчас вполне устраивает.
Больше вопросов к функционалу сейчас.

Оффлайн DDP

  • Новичок
  • *
  • Сообщений: 11
  • Репутация +4/-0
    • Просмотр профиля
Это сообщение разработчикам:


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

 О кнопках.
Когда кнопки очень объемны, то плохо гармонируют со спокойной оболочкой, оптически они начинают лезть вперед -- это закон восприятия, то же касается слишком ярких цветов: чем ярче и "теплее" оттенок, тем ближе (работает закон воздушной перспективы).
 Если кнопки делать слишком объемными и слишком яркими, то они плохо спишутся с общей оболочкой, в итоге кнопки начнут спорить с ярлыками, оптически вылезая на передний план, затрудняя пользователю распознавание выделенных задач либо ярлыков.
 Хорошую и универсальную тенденцию в этом плане выбрала компания Adobe, у них объемность на кнопках присутствует, но как бы малозаметно, что позволяет лаконично вписать их в один общий тон с оболочкой, оттенки светотени на них есть, но как бы намеком и не броско, что придает солидности, держа все в едином стиле на более тонком уровне. Подобные кнопки позволяют более читабельно отобразить на них текст или символы, потому что слишком объемная кнопка содержит много оттенков от темных в тенях, до очень светлых на бликах, символ же хорошо читается на каком-то более-менее ровном фоне, особенно если он темнее или светлее его, а разброс оттенков на объемной кнопке не может это нормально обеспечить, когда в тоже время мене объемные кнопки легко с этим справляются, потому что графически и свет, и тень на них близки по тону.

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

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

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

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

 Немного о шрифтах здесь и здесь.

 Вот, что делает Гугл.


Обратите внимание на акценты в виде ярких цветовых пятнышек на бело-сером фоне, это сделать довольно просто, причем для этого не нужны яркие цвета, достаточно просто чистых оттенков, попробуйте также эффективно выделить главное, когда все пестрит излишними графическими контрастами,  деталями и цветами!  *be*



И пару скринов хороших примеров:














А вот скрин российского архитектурного САПР:




« Последнее редактирование: 02 Марта 2015, 02:12:03 от DDP »

Оффлайн DDP

  • Новичок
  • *
  • Сообщений: 11
  • Репутация +4/-0
    • Просмотр профиля



Никого не хотел обидеть. Надеюсь мой обзор был полезен. :)

Оффлайн OlZin

  • Авторитет
  • Эксперт
  • *****
  • Сообщений: 902
  • Репутация +155/-2
  • Жить надо!!
    • Просмотр профиля
... полезен, полезен..., я про шрифты почитал.

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

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

Оффлайн Дмитрий Маслов

  • Администратор
  • Маэстро
  • *****
  • Сообщений: 6053
  • Репутация +218/-18
  • Я делаю мир таким!
    • Просмотр профиля
Спасибо! Теория понятна. Если есть желание помочь, то давайте перейдем к практике. Давайте поменяем конкретные вещи. Ссылаться на конкурентов или вообще на другие области не корректно - у нас разный функционал и мы стараемся чтобы интерфейс весь этот функционал уместил, при этом отображая максимум полезной информации.
Вот вы пишите - не нравится дизайн календаря, так давайте его менять. Что конкретно и как поправить?
Что касается линий в дереве задач, то они настраиваются здесь (смотри картинку)
Шрифты тоже настраиваются.

Оффлайн DDP

  • Новичок
  • *
  • Сообщений: 11
  • Репутация +4/-0
    • Просмотр профиля
Приветствую, господа!

Радует ваша отзывчивость и подвижность, это вселяет надежду, что вы будете развивать свой продукт во всех направлениях. Вы даже выпустили обновления, где пытались исправить дизайн :) . Господа, это круто! Я не выдержал и решил потратить свое драгоценное время, чтоб помочь сделать это более профессионально.

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

И так, поехели...

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

 Теперь по порядку:

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

        Было:




        Стало:





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












На скринах ниже компоновка расстояний на левой панели между календарем, входящими, проектами, категориями , контактами, сотрудниками:




                


3) Значки. Часть ваших значков была объемной, часть плоской -- это разрушает стиль и чувство целостности. Большая часть ваших значков, если рассматривать различные контекстные меню, фильтры и прочее, в большей своей части имею исполнение плоское, и это правильно -- оно лучше читается, особенно при таком маленьком размере и разрешении.
 Я перерисовал ваши объемные значки под плоские, чтоб они были в одном стиле.

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

 Силуэт выдает!

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

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

 Вспомните: "Все гениальное -- просто" :)
 
4) Цвет. Чистые цвета несут радость, сочетания цветов на контрасте концентрируют внимание.

Вообще тема цвета всегда относительна, потому что плохих цветов нет, бывает их плохое сочетание.
Стоит сказать о том, что такое чистый цвет и просто ядовитый оттенок.
 "Чистый цвет" - это не R255;G0;B0, как может многим показаться, но совершено справедливо утверждение, что чистый красный, это просто красный цвет. В чем разница? Реактивная насыщенность (saturation) до предела в параметрах RGB делает оттенок ядовитым. Чтоб на белом или сером фоне сделать яркое пятно, для этого не нужно выставлять красный до предела типа R255;G0;B0, если этот же красный по цветовой насыщенности понизить со 100% на 80-90%, то, поверьте, он останется достаточно красным и насыщенным, чтоб ярко смотреться на белом или сером фоне, потому что по насыщенности белый, серый, а также черный равны 0%. Попробуйте, в графических редакторах есть схема HSB, где S (saturation) - это насыщенность.
 В чем разница?
 Ответ: цвета с немного пониженной насыщенностью в нейтральной фоновой с точки зрения цвета среде (оттенки серого, черный, белый) будут смотреться благородно и ярко одновременно, что акцентирует внимание, но при этом не несет негативного раздражительного воздействия. Бывают места, где цветные пятна должны быть еще менее насыщенными, чтоб не отвлекать от главного.

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


Хочу обратить внимание, что -- это не редизайн, а всего лишь работа над ошибками.


P.S. Постарался изложить более доступно, если есть вопросы, особенно по цвету, обращайтесь -- помогу. :)


Cкрин окна органайзера целиком, он довольно-таки широкий, чтоб просмотреть, нужно под картинкой прокрутить вправо:
« Последнее редактирование: 30 Марта 2015, 03:06:46 от DDP »

Оффлайн Ilya_Iv

  • Опытный
  • *****
  • Сообщений: 497
  • Репутация +59/-0
    • Просмотр профиля
    • Зеркало LeaderTask
Поддержу последний пост во всём, кроме одноцветных значков на панели фильтра. Семь серых силуэтов подряд одного цвета, причём первые 3 тёмные квадраты (условно), первые 4 — просто квадраты, потом два диагональных, четвёртый и седьмой вообще слишком похожи.
Уж раскрасьте их в "чистые цвета", как значки исполнителя и заказчика. Тем более, что в панели навигатора почти все они уже есть в цвете.

И да, эти красивые закруглённые плашки задач... убраны в 9.4.0.4.

Оффлайн DDP

  • Новичок
  • *
  • Сообщений: 11
  • Репутация +4/-0
    • Просмотр профиля
 Можно, только осторожно ;)

К чему пестрота? Не стоит все подряд разукрашивать. Лучше зажигать иконки только активного фильтра, все равно эта панель прячется. Зачем дублировать цвета еще и на панели фильтра? Это же по сути дела ссылки или тэги, в неактивном состоянии это фантом, зачем им маячить, когда они неактивны. Для этого есть левая панель, там иконки всегда цветные. А вот если выбран в фильтре какой-то проект или категория, то тут я соглашусь, смысл есть, кроме названий надписью будет видно что в фильтре активно.

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

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

 Я еще раз прикреплю скрин другого органайзера, который использую в работе, чтоб было понятно и наглядно. Не хотелось бы тратить время на дискуссии -- это не продуктивно, если нужна помощь, то пожалуйста, готов помочь.
« Последнее редактирование: 30 Марта 2015, 07:51:15 от DDP »

Эти пользователи сказали Вам СПАСИБО:


Оффлайн Андрей_

  • Новичок
  • *
  • Сообщений: 3
  • Репутация +0/-0
    • Просмотр профиля
Поддерживаю тему. Давно пора интерфейс менять. Относительно современных программ он явно устарел (до сих пор отдает чем-то типа MS Office 2003).
А для разработчиков данная тема вобще подарок, в том смысле ,что не надо что-то придумывать, есть уже готовый макет который предложен, да еще и бесплатно  ;).
Плюс ко всему координальных изменений в программе не надо делать, только поменять несколько элементов и значки.  (sup)

Оффлайн Дмитрий Маслов

  • Администратор
  • Маэстро
  • *****
  • Сообщений: 6053
  • Репутация +218/-18
  • Я делаю мир таким!
    • Просмотр профиля
Хочу обратить внимание, что -- это не редизайн, а всего лишь работа над ошибками.
P.S. Постарался изложить более доступно, если есть вопросы, особенно по цвету, обращайтесь -- помогу. :)
Спасибо за подробное описание, за советы и помощь!

Оффлайн DDP

  • Новичок
  • *
  • Сообщений: 11
  • Репутация +4/-0
    • Просмотр профиля
Что-то интерфейс не меняется, либо разработчиков мало, чтоб задействовать ресурс на дизайн, либо технические проблемы с реализацией, либо нет желания.

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

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

 Есть разница между:

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

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

 
Продукт должен быть желанным!

Оффлайн OlZin

  • Авторитет
  • Эксперт
  • *****
  • Сообщений: 902
  • Репутация +155/-2
  • Жить надо!!
    • Просмотр профиля
Да, там отбросить графический мусор, там смягчить линии отрисовки, сям заакцентировать, и, кажется можно привести LeaderTask к “цивильному виду”. Но, как мне представляется не всё так просто.
Вспомните простой ремонт в квартире, и как его порой геморойно провести. Вот и Дмитрий пишет…
Перед выпуском не планируем заменять иконки - на самом деле это очень большая работа, даже не в плане вставить эти иконки в программу, а в том что нужно будет переделывать все скриншоты на сайте, в статьях, в справке, переделывать видео и прочее. По мелочи можно что-то сменить, но не в целом.
Рано или поздно конечно дойдем и до внешнего вида и скорее всего будем менять всё полностью, вплоть до логотипа.
Я периодически пересматриваю ваши посты в поисках идей и решений, это действительно очень влияет на развитие продукта. Спасибо за ваш труд!

Вспомните глубокий ремонт с реконструкцией, с поиском и грамотной реализацией инженерных и дизайнерских решений. Сложно ведь?
Так и тут – в LeaderTask. Для меня ремонт с реконструкцией - это интерфейсное изменение программы, так, чтобы любая функция в программе осуществлялась по правилу “всё во всём, всё в одном, одно во всём”. В прошлом я пытался ответить на так поставленный вопрос:
- здесь, с попыткой наметить пути развития в рамках нынешней реализации LT,
- здесь и здесь, с поиском инструментов интеграции функционала внутри LT,
- или здесь, с пробой осмыслить LT для профессионалов.
Поверьте, то была серьёзная задача. И представьте каково похожее реализовать программно в LeaderTask.

Но это надо, надо делать!