Комментарии 16
1. Обязательным элементом каждого сайта является селектор с поиском наподобие select2 без него жизни нет. С поиском ключевое слово. Кстати на вашем примере раскрытого списка вижу :selected но не вижу :hover и :selected:hover
2. UIKit должен быть совершенно не таким, потому как:
— input, input:disabled, input.error, etc и для всех них :hover, :focus и так по каждому типу
— Для кнопок нужен :active
— Для чекбоксов :checked, :disabled, их сочетание (и снова не забываем про :hover)
— В кит нужно выносить только стили, для цветов же вот так
— etc, изложить это в рамках одного коммента довольно сложно, но если уж делать — делать хорошо. Инет итак наводнен бесполезными «китами»
3. Ползунок для фильтра с ценой — совершенно бесполезное ненужное изобретение
4. Блок с количеством товаров должен быть инпутом если планируется какое либо значимое количество. Да и во всех остальных случаях тоже было бы неплохо.
5. Почему в демонстрации переключателей один из них синий но расположен слева — для меня загадка. Что делает на отдельной строке подсказка (i) тоже не понятно.
6. Бесконечного скролла («показать еще») быть не должно в природе, если ваш контент хоть сколько нибудь важен, а равно и переходы на него с поисковиков.
7. Стили для карт в статье «что должно быть в макете»? Серьезно? Это очень редкая, мало где применимая и ненужная фича.
8. Почему только 404? Где куда более страшные 5**?
9. «В UI Kit могут входить кнопки» не могут а должны и в этот список стоит добавить Input/textarea, select
10. Обязательно нужно добавить примеры сообщений валидации полей/формы.
11. Почему у вас одновременно круглые кнопки и кнопки с острыми углами для меня загадка, в ките должно быть однозначность, посему там должны остаться только кнопки проработанные под конкретный дизайн. А вообще, кнопки с большим радиусом скругления рядом с прямыми линиями — преступление.
Зы на скриншоте «Оформление заказа на на сайте Румиком» плохо почти все. Отсутпы, типографика, расположение элементов: «заказ в один клик» либо совсем убрать либо заменить на «успешно/отправлено/etc», padding-bottom модала существенно увеличить, padding-top/bottom у заголовка уменьшить, причем верхний сильнее, Margin-bottom у заголовка уменьшить. Крестик отцентрировать по заголовку. Внизу добавить «Понял/Ок»
Зызы пожалуйста, не надо так
2. UIKit должен быть совершенно не таким, потому как:
— input, input:disabled, input.error, etc и для всех них :hover, :focus и так по каждому типу
— Для кнопок нужен :active
— Для чекбоксов :checked, :disabled, их сочетание (и снова не забываем про :hover)
— В кит нужно выносить только стили, для цветов же вот так
— etc, изложить это в рамках одного коммента довольно сложно, но если уж делать — делать хорошо. Инет итак наводнен бесполезными «китами»
3. Ползунок для фильтра с ценой — совершенно бесполезное ненужное изобретение
4. Блок с количеством товаров должен быть инпутом если планируется какое либо значимое количество. Да и во всех остальных случаях тоже было бы неплохо.
5. Почему в демонстрации переключателей один из них синий но расположен слева — для меня загадка. Что делает на отдельной строке подсказка (i) тоже не понятно.
6. Бесконечного скролла («показать еще») быть не должно в природе, если ваш контент хоть сколько нибудь важен, а равно и переходы на него с поисковиков.
7. Стили для карт в статье «что должно быть в макете»? Серьезно? Это очень редкая, мало где применимая и ненужная фича.
8. Почему только 404? Где куда более страшные 5**?
9. «В UI Kit могут входить кнопки» не могут а должны и в этот список стоит добавить Input/textarea, select
10. Обязательно нужно добавить примеры сообщений валидации полей/формы.
11. Почему у вас одновременно круглые кнопки и кнопки с острыми углами для меня загадка, в ките должно быть однозначность, посему там должны остаться только кнопки проработанные под конкретный дизайн. А вообще, кнопки с большим радиусом скругления рядом с прямыми линиями — преступление.
Зы на скриншоте «Оформление заказа на на сайте Румиком» плохо почти все. Отсутпы, типографика, расположение элементов: «заказ в один клик» либо совсем убрать либо заменить на «успешно/отправлено/etc», padding-bottom модала существенно увеличить, padding-top/bottom у заголовка уменьшить, причем верхний сильнее, Margin-bottom у заголовка уменьшить. Крестик отцентрировать по заголовку. Внизу добавить «Понял/Ок»
Зызы пожалуйста, не надо так
Я не имею отношения к автору статьи и тем более к обучающим курсам, но с Вами не согласен по некоторым пунктам:
1. Если честно, мы в своих проектах двойной селект используем максимум в админках.
2. Зачем чекбоксам hover? Если и так понятно что это и не перепутаешь (если не мудрить)
3. Ползунок с ценой я в магазинах регулярно двигаю и считаю, что это довольно полезным элементом формы.
6. Бесконечный скрол и кнопка «показать ещё» ничего общего не имеют, тем более, что в своей практике мы вполне успешно решаем вопрос сео дублированием пагинация под/над кнопкой «показать ещё» и смещением истории (history api) при нажатии на эту кнопку. Но я как и Вы против бесконечного скрола — это ад и муки для пользователя, но опять же иногда это очень полезно (листать так логи например).
Но вот 7-10, я прям обеими руками «за», хотя статья и не полная на 100%, и пусть в ней есть огрехи, но если дизайнер (студия) полностью выполнит все пункты статьи, то это будет тоже отлично. Знаю по себе, как человек, которому приходится работать по продуктам с дизайнерами: то нужно окошко дорисовать про успех, то про ошибку, то валидацию в форме (особенно ошибки на чекбоксах про принять соглашение), то форму в процессе отправки (часть полей деактивировано, есть анимация и неактивный сабмит) и обычно это надо через несколько недель после сдачи в момент разработки, т.е. когда дизайнер мог и позабыть какую идею вкладывал в дизайн, потому что он занимается уже другим, а ты в это время только-только в него въехал и он только начал нравится на 100% (стадия принятия) и думаешь глядя на доработки: «а точно это сюда было нарисовано?»
1. Если честно, мы в своих проектах двойной селект используем максимум в админках.
2. Зачем чекбоксам hover? Если и так понятно что это и не перепутаешь (если не мудрить)
3. Ползунок с ценой я в магазинах регулярно двигаю и считаю, что это довольно полезным элементом формы.
6. Бесконечный скрол и кнопка «показать ещё» ничего общего не имеют, тем более, что в своей практике мы вполне успешно решаем вопрос сео дублированием пагинация под/над кнопкой «показать ещё» и смещением истории (history api) при нажатии на эту кнопку. Но я как и Вы против бесконечного скрола — это ад и муки для пользователя, но опять же иногда это очень полезно (листать так логи например).
Но вот 7-10, я прям обеими руками «за», хотя статья и не полная на 100%, и пусть в ней есть огрехи, но если дизайнер (студия) полностью выполнит все пункты статьи, то это будет тоже отлично. Знаю по себе, как человек, которому приходится работать по продуктам с дизайнерами: то нужно окошко дорисовать про успех, то про ошибку, то валидацию в форме (особенно ошибки на чекбоксах про принять соглашение), то форму в процессе отправки (часть полей деактивировано, есть анимация и неактивный сабмит) и обычно это надо через несколько недель после сдачи в момент разработки, т.е. когда дизайнер мог и позабыть какую идею вкладывал в дизайн, потому что он занимается уже другим, а ты в это время только-только в него въехал и он только начал нравится на 100% (стадия принятия) и думаешь глядя на доработки: «а точно это сюда было нарисовано?»
1. То есть это вы из тех адептов что нас на сайтах заставляет Россию искать в длинном списке без поиска?) И вы же заставляете возраст накликивать стрелочками?) Селект с поиском элемент универсальный и должен использоваться по максимуму. Можете кинуть ссылку на произвольный сайт и я расскажу как его улучшить селектами.
2. Затем что у них есть еще и тултип и он должен быть кликабельным и я хочу точно знать на что я кликаю, кроме того я могу выбирать элемент табом, и в третьем «зачем ховер» вопрос некорректный, он должен быть.
6. Бывает но хорошие реализации очень редки и сложны, уж лучше рекомендоватьн е делать его вообще.
К сожалению, не будет. Мы получим просто бесполезный кит, который надо сильно дорабатывать и не получим нормальных решений по целому ряду пунктов.
Вы уж простите, но нафиг такое, переделывать пока не будет хорошо. Дизайн который нужно проводить через «стадию принятия» я не приму никогда.
Ну значит плохо было сделано.
Вот потому я требую сразу, если этого нет то зачем это все?
На мобилах может быть, но цену указать намного быстрее, тем более что ползунки вида от рубля до миллиона просто невозможно использовать.
2. Затем что у них есть еще и тултип и он должен быть кликабельным и я хочу точно знать на что я кликаю, кроме того я могу выбирать элемент табом, и в третьем «зачем ховер» вопрос некорректный, он должен быть.
6. Бывает но хорошие реализации очень редки и сложны, уж лучше рекомендоватьн е делать его вообще.
но если дизайнер (студия) полностью выполнит все пункты статьи, то это будет тоже отлично.
К сожалению, не будет. Мы получим просто бесполезный кит, который надо сильно дорабатывать и не получим нормальных решений по целому ряду пунктов.
стадия принятия
Вы уж простите, но нафиг такое, переделывать пока не будет хорошо. Дизайн который нужно проводить через «стадию принятия» я не приму никогда.
а точно это сюда было нарисовано
Ну значит плохо было сделано.
то нужно окошко дорисовать про успех, то про ошибку, то валидацию в форме
Вот потому я требую сразу, если этого нет то зачем это все?
Ползунок с ценой я в магазинах регулярно двигаю и считаю, что это довольно полезным элементом формы.
На мобилах может быть, но цену указать намного быстрее, тем более что ползунки вида от рубля до миллиона просто невозможно использовать.
Я с вами не соглашусь. Эта статья закрывает большую часть моих болей, дизайнеру переслал.
1) Да пусть отрисовывают хоть что-нибудь. А то нарисовали макет, а как это будет выглядеть, если куда-то нажать они забыли.
2) Пусть будет хоть какой-нибудь, надо чаще им рассказывать про единообразие в макете. Иначе будет 18 разных кнопок потому что «ну вот здесь вот так и вообще мы всё согласовали, верстай 18 кнопок».
3) Определенно. Но если заказчик его хочет, то пусть дизайнер сначала отрисует
4) Так он итак инпут, просто кнопки по бокам меняют значение.
6) Определенно! Но пусть нарисуют что-нибудь, а не сиди как дурак и думай что здесь вообще должно быть. А то сделаешь на своё усмотрение, а потом начинается «а давайте подвинем и другие цвета сделаем»
7) Да, редкая. Но когда она встречается, эти стили ждёшь месяц.
8) У нас в компании для бэка их не существует. В любой непонятной ситуации на 404 отправляет.
10) Это уже от дизайнера зависит. Но предложение дельное
1) Да пусть отрисовывают хоть что-нибудь. А то нарисовали макет, а как это будет выглядеть, если куда-то нажать они забыли.
2) Пусть будет хоть какой-нибудь, надо чаще им рассказывать про единообразие в макете. Иначе будет 18 разных кнопок потому что «ну вот здесь вот так и вообще мы всё согласовали, верстай 18 кнопок».
3) Определенно. Но если заказчик его хочет, то пусть дизайнер сначала отрисует
4) Так он итак инпут, просто кнопки по бокам меняют значение.
6) Определенно! Но пусть нарисуют что-нибудь, а не сиди как дурак и думай что здесь вообще должно быть. А то сделаешь на своё усмотрение, а потом начинается «а давайте подвинем и другие цвета сделаем»
7) Да, редкая. Но когда она встречается, эти стили ждёшь месяц.
8) У нас в компании для бэка их не существует. В любой непонятной ситуации на 404 отправляет.
10) Это уже от дизайнера зависит. Но предложение дельное
Вот как раз изза «что нибудь» с интерфейсами и происходит то что происходит.
Каждому дизайнеру нужно выдать страницу со всеми возможными элементами и шаблон для цветов наподобие того что я картинку кинул. И тогда они все дружно начнут делать по шаблону а не каждый по своему.
Я вот только недавно нанимал дизайнера и в тч встречался с последствиями курсов: 1 из 5 знает что такое композиция, 1 из 20 оформляет блок с учетом всех нюансов, причем этот 1 был как раз из недавних выпускников и наголову превосходил по уровню «бывалых ui-дизайнеров», когда задал уточняющие вопросы человек мне ответил что просто делает как учили. И получается ведь хорошо.
Зы я кроме всего прочего считаю что статья школы должны быть намного выше уровнем. Я бы постеснялся ее кому либо кидать хотя бы изза блока «Оформление заказа на на сайте Румиком», ну нельзя так делать, нельзя.
Зызы если апач/nginx свалится скажем изза косяка в конфиге то вы получите 500
Каждому дизайнеру нужно выдать страницу со всеми возможными элементами и шаблон для цветов наподобие того что я картинку кинул. И тогда они все дружно начнут делать по шаблону а не каждый по своему.
Я вот только недавно нанимал дизайнера и в тч встречался с последствиями курсов: 1 из 5 знает что такое композиция, 1 из 20 оформляет блок с учетом всех нюансов, причем этот 1 был как раз из недавних выпускников и наголову превосходил по уровню «бывалых ui-дизайнеров», когда задал уточняющие вопросы человек мне ответил что просто делает как учили. И получается ведь хорошо.
Зы я кроме всего прочего считаю что статья школы должны быть намного выше уровнем. Я бы постеснялся ее кому либо кидать хотя бы изза блока «Оформление заказа на на сайте Румиком», ну нельзя так делать, нельзя.
Зызы если апач/nginx свалится скажем изза косяка в конфиге то вы получите 500
Зызы если апач/nginx свалится скажем изза косяка в конфиге то вы получите 500
Когда задурит web-server, Вы получите его дефолтную страницу, на которую обычно влияния ноль целых хрен десятых, до root Вашего сайта он вообще не дойдёт (исключения — если есть доступ (хотя бы частичный, в случае nginx — к sites-available/sites-enabled) к конфигурации самого web-сервера, или весь сервис разворачивается самостоятельно, от apt-get nginx и до обеда :-), тогда да, можно предложить серверу свой дизайн на любую ошибку).
Единственный шанс показать эту группу ошибок самому (а не дефолт от Apache/nginx) — это если начинает пятисотить бекенд сайта, точнее API, которое используется. А это показывать будем модалкой сообщения об ошибке (не, я могу себе представить, что будет прямо отдельная страница вместо тултипа, но я не знаю настолько толк в извращениях, чтобы заставить посетителя потерять свою позицию и жать на «Назад» вдобавок к облому с результатом сайта).
А вот роутинг по страницам зачастую действительно выполняется самостоятельно (особенно если это SPA/PWA, или присутствует навык написания .htaccess), и тут своя страница 404 — очень уместна даже без доступа к конфетам nginx/Apache.
P.S. С остальными Вашими комментариями/замечаниями к статье согласен обеими руками, ногами и всем остальным в наличии :-)) /kspshnik
Кнопка «Вверх»
Её обычно рисуют для длинных лендингов и каталогов с товарами, чтобы пользователю было удобно вернуться наверх страницы.
Одно из самых бесполезных ux-изобретений для веба. Где-то рядом с куки-баннерами. Если надо вернуться наверх, есть отличная кнопка Home, прекрасный скроллбар и крайне недооценённая прокрутка нажатием на колесо. Для мобильных этот вопрос тоже по-хорошему решается на уровне браузера, как у Оперы, например, если скроллить сильно, а не понемногу.
Во-первых UI, а не UX. Во-вторых не проецируйте свой опыт на всех. У кого-то нет кнопки Home, скрола, руки. Тут как раз фидбэк пользователей показал, что фича удобна и нужна. Ну и лично я, тут же, на Хабре, часто пользуюсь этой большой удобной плашкой слева.
Речь всё же о поведении фичи и пользовательском опыте, а также о том, что эта задача решена давно аж несколькими способами. А в плане UI с фичей тоже всё плохо, поскольку она ни капли не стандартизирована и каждый делает её как хочет и где хочет. Я считаю, что это проблема, и также считаю, что при нужде в этой фиче решить это универсально на уровне браузеров было бы лучшей идеей (пример с мобильной оперой для тех, у кого нет кнопок, скролла и ног приводил).
Также, фидбэк пользователей показал, что пользователи не умеют пользоваться уже имеющимися стандартными инструментами, и вместо того, чтобы научить (или исправить имеющиеся стандартные решения так, чтобы они стали удобнее), людям прививают плохие привычки, а потом этим привычкам пытаются угодить, замусоривая интерфейсы самопальным костылём.
Также, фидбэк пользователей показал, что пользователи не умеют пользоваться уже имеющимися стандартными инструментами, и вместо того, чтобы научить (или исправить имеющиеся стандартные решения так, чтобы они стали удобнее), людям прививают плохие привычки, а потом этим привычкам пытаются угодить, замусоривая интерфейсы самопальным костылём.
Порой дизайнер предоставляет заказчику макет, в котором чего-то не хватает...
Порой? Зачастую! Обычно выглядит так: заказчик — «Нарисуйте нам макеты главной для десктопа и мобилок, а дальше программисты сам сделают».
Даже больше скажу: нет ни одного проработанного на 100% темплейта, даже если шаблон в основе хорош то на формах начинаются проблемы, а ка ктолько доходим до таблиц — все, жизни нет.
С шаблонами всегда не было ничего хорошего. Год назад изучал рынок шаблонов под фигму. Получилось выгоднее с нуля нарисовать самому и доплатить фронту для создания полноценной библиотеки. Правда заказчик все-равно потом все испоганил )
del
Зачем была нужна статья, если в конце такое:
pic
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Что должно быть в макете сайта: шпаргалка для дизайнера