Перейти к содержимому














Фотография
Нужна помощь

Совет по мобильному дизайну



  • Авторизуйтесь для ответа в теме
Сообщений в теме: 11

#1 Kot9tko

Kot9tko

    Гарант Slivup.biz

  • Сливапер LVL 5
  • Сообщений: 1 025
  • Регистрация: 12.03.2014
  • Заработано: 5 руб.
Репутация: 431

Награды: 20

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 12:05

Всем привет. Сразу к делу. Стоит задача сделать более качественный и адекватных мобильный шаблон для одного из моих сайтов. Но есть маленькая сложность которая ставит меня в тупик - Как сделать адекватный вывод категорий в мобильной версии?

 

Я прекрасно понимаю что для этого нужны тесты и всё такое. Но блин с чего-то же надо начать.

 

Структура категорий:

 

Главная категорий - подкатегория.

 

P.S: Всего основных (главных категорий) будет три.

 

Немного подумав, решил набросать в axure вариант для мобилки: https://s.mail.ru/14aB/qQgz3F1vv

 

Но вот, куда тут деть подкатегории? Может есть у кого мысли, статьи на эту тему?!

 

P.S: Не хочу вписывать категории в основную часть сайта, всё потому, что сайт статейник  + сервисная составляющая, которая будет сильно уходить в низ а не быть на верхней части экрана. да и не хочется мудрить с этим - одни только проблемы по верстке и самое главное, дизайн терпит уродство.



#2 RusZarj

RusZarj
  • Сливапер LVL 6
  • Сообщений: 1 398
  • Регистрация: 27.01.2014
  • Заработано: 102 руб.
Репутация: 754

Награды: 24

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 12:16

Дак для этого же и существует меню-гамбургер, чтоб не изобретать велосипед



#3 zigfridjke

zigfridjke
  • Platinum
  • Сообщений: 540
  • Регистрация: 03.05.2014
  • Заработано: 28 руб.
Репутация: 621

Награды: 26

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 12:24

В целом все норм. Либо сделать всплывашку на весь экран как в примерах. 

Вопрос много под категорий? 13 или 86? 

Вот несколько примеров как у другиих...

https://cloud.mail.r.../MA7i/zHnok2k7K


А в целом посмотри UI KIT мобильные тым есть много решений этой задачи. Особенно комерческих магазинов.


UP...

сейчас накидаю ещё вариантов примеров в эту папку



#4 Kot9tko

Kot9tko

    Гарант Slivup.biz

  • Сливапер LVL 5
  • Сообщений: 1 025
  • Регистрация: 12.03.2014
  • Заработано: 5 руб.
Репутация: 431

Награды: 20

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 12:41

В целом все норм. Либо сделать всплывашку на весь экран как в примерах. 

Вопрос много под категорий? 13 или 86? 

Вот несколько примеров как у другиих...

https://cloud.mail.r.../MA7i/zHnok2k7K


А в целом посмотри UI KIT мобильные тым есть много решений этой задачи. Особенно комерческих магазинов.


UP...

сейчас накидаю ещё вариантов примеров в эту папку

Спасибо. Да, подкатегорий много 56 в одной.

Ещё раз огромное спасибо. Сейчас буду смотреть.

p.S: На данный момент у вас в папке я не вижу систему с под категориями. Заходил я кстати на Мвидео , эльдорадо, у которых есть такая же печаль с категориями и подкатегориями. Но не то. Они подкатегории выводят в основной части дизайна, что для меня будет критично. Стремлюсь не загружать основную часть дизайна.


Дак для этого же и существует меню-гамбургер, чтоб не изобретать велосипед

Тоже как вариант. Но в моём случае каждая категория активна. Но я думаю можно вывести блок с подкатегориями (гамбургер) - чтобы допустим если человек находится в какой-то подкатегории и нажимая на вывод меню (три полоски) он видел все подкатегории той категории, в которой он находится. (не важно, это будет полная новость статьи или краткая).



#5 zigfridjke

zigfridjke
  • Platinum
  • Сообщений: 540
  • Регистрация: 03.05.2014
  • Заработано: 28 руб.
Репутация: 621

Награды: 26

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 13:04

Спасибо. Да, подкатегорий много 56 в одной.


p.S: На данный момент у вас в папке я не вижу систему с под категориями.

К примеру вот
https://cloud.mail.r...2-12-02-45.jpeg

Вот тут посмотрите как исполнены мобильные киты.
https://ui8.net/



#6 Kot9tko

Kot9tko

    Гарант Slivup.biz

  • Сливапер LVL 5
  • Сообщений: 1 025
  • Регистрация: 12.03.2014
  • Заработано: 5 руб.
Репутация: 431

Награды: 20

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 13:16

К примеру вот
https://cloud.mail.r...2-12-02-45.jpeg

Вот тут посмотрите как исполнены мобильные киты.
https://ui8.net/

Спасибо. Хочу услышать ваше мнение: В моём случае, все главные категории кликабельны. Тобишь если человек зайдёт допустим в категорию АВТО, он увидит все новости подкатегорий АВТО. Вот как в моём случае сделать категории в мобилке? забить на главную категорию и сделать при нажатии на категорию, чтобы выпадала менюшка с подкатегориями?

 

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

Хотя тут без тестов никуда...



#7 zigfridjke

zigfridjke
  • Platinum
  • Сообщений: 540
  • Регистрация: 03.05.2014
  • Заработано: 28 руб.
Репутация: 621

Награды: 26

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 13:42

Спасибо. Хочу услышать ваше мнение

Хотя тут без тестов никуда...

Можно  макет? ПК увидеть и главную мобилки. 



#8 RusZarj

RusZarj
  • Сливапер LVL 6
  • Сообщений: 1 398
  • Регистрация: 27.01.2014
  • Заработано: 102 руб.
Репутация: 754

Награды: 24

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 15:21

Хотя тут без тестов никуда...

Маркетинговыми агентствами уже не один миллион $ потрачен на тесты, какие меню лучше для мобилки, и все тесты как один сходятся в одном - гамбургер. С категориями на весь экран после нажатия на гамбургер.

Как здесь: https://cloud.mail.ru/public/MA7i/zHnok2k7K/76467c49613927.58b981fdb45a9_cr_cr.jpg



#9 slivok

slivok
  • Сливапер LVL 5
  • Сообщений: 90
  • Регистрация: 17.04.2015
  • Заработано: 74 руб.
Репутация: 193

Награды: 14

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 15:40

Можно засунуть такое меню в гамбургер. Очень удобно с подкатегориями

https://codepen.io/I...dd?editors=1010



#10 Kot9tko

Kot9tko

    Гарант Slivup.biz

  • Сливапер LVL 5
  • Сообщений: 1 025
  • Регистрация: 12.03.2014
  • Заработано: 5 руб.
Репутация: 431

Награды: 20

  
  
  
  
  
  
  
  

Отправлено 08 Июль 2017 - 21:27

Можно засунуть такое меню в гамбургер. Очень удобно с подкатегориями

https://codepen.io/I...dd?editors=1010

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



#11 slivok

slivok
  • Сливапер LVL 5
  • Сообщений: 90
  • Регистрация: 17.04.2015
  • Заработано: 74 руб.
Репутация: 193

Награды: 14

  
  
  
  
  
  
  
  

Отправлено 09 Июль 2017 - 05:23



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

 

Вот сделал гифку. Меню называется Drilldown Menu

https://ibb.co/iFtAhv

 

Нашел сайт где применяется такое меню

http://www.elisabettafranchi.ru


Сообщение отредактировал slivok: 09 Июль 2017 - 13:47


#12 Kot9tko

Kot9tko

    Гарант Slivup.biz

  • Сливапер LVL 5
  • Сообщений: 1 025
  • Регистрация: 12.03.2014
  • Заработано: 5 руб.
Репутация: 431

Награды: 20

  
  
  
  
  
  
  
  

Отправлено 09 Август 2017 - 12:15

Вот сделал гифку. Меню называется Drilldown Menu

https://ibb.co/iFtAhv

 

Нашел сайт где применяется такое меню

http://www.elisabettafranchi.ru

Прикольное меню. Спасибо. Буду значит подобное делать.





Похожие темы Collapse

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

×

Зарегистрируйся моментально!