Задать вопрос
@WinnerIT
Программист и фотограф-любитель
дизайн

Чем заменить элемент?

Доброго времени суток!

Есть вот такой самодельный элемент:
ea24e53628d046bea01d2df62066f5f3.PNG
оранжевый - это Progressbar показывает прогресс обработки урока,
текст - это название урока.
Зеленым окрашен урок, который полностью обработан и его нельзя выбрать.
На остальные уроки можно кликнуть и "войти" в его содержимое.

Может у кого-нибудь есть идея, как выше описаный функционал выразить в более удобном/практичном/красивом элементе интерфейса?
  • Вопрос задан
  • 225 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Zifix
@Zifix
Barbatum
Все просто — одна ячейка, фон которой — прогрессбар, поверх название урока. Можно на подложке, можно подобрать цвета, чтобы белый был одинаково хорошо виден на заполненной и незаполненной половинах. Неактивный урок, как правильно написали, приглушить, фон прогрессбара темно-зеленым, заполнение ярче. И уберите градиенты, 2015 год уже.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 4
@GreatRash
1) У вас прогрессбар не информативен. Нужно или показать процент выполнения урока, или сколько заданий выполнено (если там есть задания), например 10/100.

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

3) Выкинуть в утиль все эти рамки от которых нет никакого толку.
Ответ написан
1 комментарий
1 комментарий
RiseOfDeath
@RiseOfDeath
Диванный эксперт.
Ну я бы только прогрессбар и название местами поменял (т.е. разместил прогрессбар справа), хотя не уверен что это правильно будет.
Остальное мне кажется вполне нормальным. Разме что можно добавить какую-нибудь пиктограмму, которая делала бы более очевидным куда нажимать (какую-нибудь кнопочку "начать" к каждому уроку, которая я бы работала одновременно с текущим способом входа)
Ответ написан
Комментировать
Комментировать
@Makarych90
Вот оригинально. и можно сделать одним CSS prnt.sc/8mglsd
Ответ написан
1 комментарий
1 комментарий
@zakraben
Тайм лайн плюс процент завершения.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Продуктовый дизайнер в команду дизайн-системы
Точка
До 240 000 ₽
Арт-директор
ЛАНИТ • Москва
До 300 000 ₽
Senior UX/UI product designer/Старший продуктовый дизайнер [дизайн интерфейсов]
HelloClient CRM
от 100 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Убрать подпись с печати, в идеале перенести в вектор
19 апр. 2024, в 12:24
1000 руб./за проект
Доработать сайт на React + Nest
19 апр. 2024, в 12:05
1500 руб./в час
Разработать программу в CodeSys
19 апр. 2024, в 12:00
250 руб./за проект
Ещё заказы