Переверстка дашборда от MI Fit
Это будет экспериментальный пост с переверсткой мобильного дашборда в приложении MI Fit от Xiaomi.
Я пользуюсь их браслетом MI Band уже четвертый год и меня всегда бесил их дашборд с историей активности. Недавно делал мобильную версию дашборда для обзора рынка вакансий в BI области и понял, что дашборд в мобильном — это отдельная история и не так все просто, поэтому решил потренироваться и взял пример, который давно не нравится.
Вот как это выглядит в приложении:
Вот как я переверстал дашборд:
Я больше занимался логикой, чем графической версткой, но и её попытался подтянуть. Что я изменил:
— сместил график вправо и сделал столбики более пропорциональными, чтобы влезло больше данных;
— обозначил на графике цель пунктирной линией и подсветил градиентом ее достижение;
— добавил подписи на график;
— сделал более приятную верстку фактоидов внизу (убрал выравнивание по центру и сделал меньше расстояния);
— дополнил фактоид с шагами буллет-чартом. К нему явно нужна легенда. Я бы по клику разворачивал его с анимацией в полноценный бар-чарт. Вот так:
— сделал фактоиды более осмысленными (не смог придумать зачем нужно знать накопительную сумму калорий за месяц, заменил на потраченные калории в день) ;
— дополнил фактоиды доп информацией и картой с перемещениями;
— заменил в цифрах пробелы на полупробелы.
Если вы бы сделали как-то по другому, предлагайте. Если вам понравился сам формат заметки или хотите чтобы я разобрал ваш дашборд, пишите.
UPD
Кирилл Беляев предложил сдвинуть по высоте верхний график и сразу показывать бар-чарт, вместо буллет-чарта. Кажется, что для массовой программы это неплохое решение, хотя и хочется всех учить более сложным типам визуализаций.
«И внизу „д“, „нед“ и „м“ можно по человечески написать, места хватит.» — вот за это люблю Кирилла, смотрит не только на то, что в фокусе, но и вообще на интерфейс в целом.
У меня получился такой вариант как-то так, хотя можно было ещё и места под карту дать по-больше:
