Комментарии 21
У меня первая ассоциация по новому дизайну — Skype, а слои Habrahabr на Ipad :) Концепция вполне привлекательна, не имею ничего против.
Пример с четвертым слоем на мой взгляд, не совсем удачная идея (в контексте скриншота). Слишком мало места для превью файла.
Пример с четвертым слоем на мой взгляд, не совсем удачная идея (в контексте скриншота). Слишком мало места для превью файла.
Каждый год — новый интерфейс, прелестно!
А если серьёзно, то круто сделано. Единственный вопрос — на небольшом экране новый слой будет к левому краю сразу сдвигаться?
А если серьёзно, то круто сделано. Единственный вопрос — на небольшом экране новый слой будет к левому краю сразу сдвигаться?
Каждый год — новый интерфейс, прелестно!
В постоянном поиске новых решений, как-то так.
на небольшом экране новый слой будет к левому краю сразу сдвигаться?
Думали над этим, начали с больших экранов и теперь идем по убывающей. Пока предполагается, что по мере уменьшения рабочей области видимые области нижних слоев будут пропорционально уменьшаться, оставляя активному слою больше места. С какого-то момента, когда смысл в этих отступах из-за размеров экрана пропадет вовсе — вкладки слоев будут разворачиваться на весь экран, например на мобилках.
А в итоге кроме интересной концепции и реализации для конкретного проекта что-то получилось? Какой-то фреймворк или готовая тема? На GitHub поделиться не желаете? ))
Нет, фреймворка нет, а созданием тем мы не занимаемся :)
Жаль, даже посмотреть негде (вне вашего проекта разумеется).
Если интересует сама концепция:
контент обернут враппером, растянутым на всю высоту и ширину (за вычетом сайдбара);
главное окно контента всегда на своем месте;
при клике по определенным ссылкам в конец враппера добавляется, скажем, .slide с абсолютным позиционированием, top:0; right:0; bottom:0; и изначальной width:0;
идет подгрузка контента по аяксу и одновременно начинается анимация развертывания (на данный момент ширина вычисляется в js, но, думаю перейти на css и количественные селекторы — это явно облегчит оптимизацию под разные экраны и мобилки)
При свертывании — обратная анимация ширины в ноль и удаление из DOM слоя. Если есть вышележащие слои — они сворачиваются одновременно.
контент обернут враппером, растянутым на всю высоту и ширину (за вычетом сайдбара);
главное окно контента всегда на своем месте;
при клике по определенным ссылкам в конец враппера добавляется, скажем, .slide с абсолютным позиционированием, top:0; right:0; bottom:0; и изначальной width:0;
идет подгрузка контента по аяксу и одновременно начинается анимация развертывания (на данный момент ширина вычисляется в js, но, думаю перейти на css и количественные селекторы — это явно облегчит оптимизацию под разные экраны и мобилки)
При свертывании — обратная анимация ширины в ноль и удаление из DOM слоя. Если есть вышележащие слои — они сворачиваются одновременно.
Жаль, что на айпаде в вертикальной ориентации вся эта красота со слоями не помещается. Идея сама по себе отличная — понятен контекст, активация новых слоев не перебрасывает в незнакомое состояние. Не думали над вариантами, чтобы самый старый/родительский слой сжимался в вертикальную колбасу из пиктограмм на узких экранах?
В таком подходе есть одна проблема — это прокрутка контента внутри блоков, если он не вмещается в него. Если по-горизонтали можно делать переносы на новую строку, то по вертикали всё сложнее. Полоса прокрутки будет чаще ломать всю красоту и удобство подобного подхода. Этот способ хорошо подходит для страниц с относительно небольшим количеством контента.
ХЗ коллеги. Оригинальный интерфейс ради оригинального интерфейса — нормально для личного проекта дизайнера, а не бизнеса.
Может я не целевая аудитория, но мне на оригинальность интерфейса скажем мягко наплевать, мне важно чтобы он был понятным и предсказуемым и мне не приходилось ломать голову над тем, а что мне нужно сделать для выполнения привычных функций.
Кстати работает интерфейс кривовато.
Может я не целевая аудитория, но мне на оригинальность интерфейса скажем мягко наплевать, мне важно чтобы он был понятным и предсказуемым и мне не приходилось ломать голову над тем, а что мне нужно сделать для выполнения привычных функций.
Кстати работает интерфейс кривовато.
После осмысления нами всего функционала будущего сервиса постепенно начала вырисовываться основная проблема. Планировалось, что пользователь будет работать с каждым из своих сайтов, выбирая его из списка. Однако, было непонятно как показать человеку наиболее полную картину состояния сайта и одновременно предоставить инструменты для работы с ним. Инструменты могли вызываться при разных сценариях, но работа с ними требовала одновременного отображения и нескольких других инструментов, причем каждый раз различного их набора. Работа человека с одним инструментом могла поменять содержание в других, а отображать изменения было необходимо мгновенно.
Т.е. сделано все не столько с целью соригинальничать, сколько для удобства работы. «Меньше всего нам хотелось сделать что-то обыденное» — сказано именно потому, что при обычном подходе нет возможности добиться результата, описанного в цитате выше.
Интересная задумка, интересно было бы реализовать что то подобное в рамках CRM — систем.
ps письмо с подтверждением реги в gmail приходит в спам =(
ps письмо с подтверждением реги в gmail приходит в спам =(
А чем не угодили стандартные хлебные крошки? Слева держите список всех сайтов, раз уж решили, что он виден всегда, а справа в одной панели все вложенные элементы. Очень условный мокап на основе Проводника: bit.ly/1QFpaAJ
Чтобы пользователь не терялся, когда уходит вглубь иерархии, можно использовать анимацию переката. Для этого не обязательно класть слой поверх — например, вот тут все работает в одной панели: bit.ly/1RcFynm
PS линки режутся из-за кармы, извиняйте.
Чтобы пользователь не терялся, когда уходит вглубь иерархии, можно использовать анимацию переката. Для этого не обязательно класть слой поверх — например, вот тут все работает в одной панели: bit.ly/1RcFynm
PS линки режутся из-за кармы, извиняйте.
Ха, точно такая же идея была в голове, думал макет нарисовать а уже все готово, эх..)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Прелести интерфейса на частично перекрывающихся слоях