марта 16 2015
+7

Интерфейс загрузки изображений (концепт)

Alyona    16 марта 2015, 21:10    в избранное в избранном    14 комментариев
Скины и шаблоны - принципы, концепции, стандарты   

В продолжение темы https://altocms.ru/1029.html , которая вызвала живую дискуссию участников сообщества, хочу предложить свое видение интерфейса загрузки изображений. Концепция за исключением мелочей отталкивается от идей aVadim в большей степени, а так же предложений Klaus и inliquid

Концепт не предлагает «изобретение велосипедов», а является продолжением существующего функционала. Загрузка изображений выносится под редактор bbcodes и объединяется с фотосетом. Т.о. все управление и загрузкой изображений осуществляется из единого интерфейса.

Подробности под катом. Кнопки «Добавить изображения» и «Добавить опрос» вынесены сразу под редактор. По сути они являются вкладками с подгружаемым на ajax содержимым.


Содержание вкладки «Добавить изображения» повторяет содержимое модального окна.


После загрузки изображений, происходит перенаправление в «Этот топик». Здесь доступны опции масштабирования и выравнивания, так же можно вставить одно или несколько изображений в место где находится курсор. Здесь можно выбрать как выводить изображения — в ряд, фотосет (который кстати теперь можно просто удалить из шаблона, если в нем нет необходимости), либо другой вывод.

Идея Вадима, добавить иконки по работе с конкретным изображением. Хотелось сделать так, чтобы не перегружать интерфейс, надеюсь получилось :) При наведение на изображение, кроме размеров подсвечивается иконка «редактировать»


Тоже идея Вадима, так же некоторые идеи по этому поводу были от nikto — по клику разворачивается окно в котором можно задать описание и если включен фотосет, то можно отметить как превью. Думаю эта кнопка будет использоваться не часто и разворачивать ее по событию hover вполне достаточно.


К тому же теперь просто по клику на изображение можно прямо вставлять его в топик (без кнопки вставить выбранное).

В редакторе bbcodes, теперь эту кнопку можно использовать только для оборачивания ссылки в «a href» без всяких всплывающих окон


В целом концепт не дает революционных изменений, а является логическим продолжением существующих функций.
Теги:

Похожие статьи

  • Проблема с изображениями
    При добавлении в топик фотосета, главная фотография не отображается, даже если установлена галочка «Отмечено как превью». Загруженные с компьютера изображения всегда показываются в начале топика, даже если их удалить....
  • Обработка изображений в Alto CMS – что нас ждет?
    После двух статей – про фотогалерею и про планы развития движка — появилось немало вопросов именно по работе с изображениями, что и как будет, и чего от всех этих изменений ждать. В этой статье я хочу рассказать обо...
  • Плагин Alian - альтернативный вариант фотосета
    Плагин представляет собой некоторую доработку и расширение функционала стандартного фотосета, а так же предоставляет удобный инструмент управления всеми изображениями в топике.
  • Автопревью из фотосета и youtube
    Стоит плагин Topic-intro, проблемы: 1- указываю в топике ссылку на видео с ютуба, качество превью оч. низкого качества. 2- в топике загружаю картинки в фотосет, но автоматически превью из них не создается. По...

14 комментариев

0
Эмм… а напомните когда это в альто поддержка bb-тегов образовалась? o_O

Где же модальное окно которые вы хотели (я по-прежнему хочу) — как будет на мобильных устройствах?
Как-то сложно…

«С этого компьютера»
«Из Интернет»
Дальше должна быть кнопка «Уже загруженные», такая же иначе логика распадается.

Если это окно, то эти 3 лучше сделать не кнопками а вкладками.

Совершенно непонятна мне логика переноса из уже загруженных в текущий топик — если я зайду в уже загруженные отмечу галочкамии также будет — преейду в «этот топик» или как? И потом еще раз надо нажать чтобы вставить? Слишком много кликов и переходов…

Переход по клику на изображение — тоже самое — сложно и не очевидно. А как обратно? Кнопкой назад браузера? Сейчас как не странно логика работы с фотосетом в 1.0 стандартная более менее преемлема. Картинки загрузились в ряд — можно добавить описание и отметить как превью, никуда не переходя. Думаю должна быть небольшая кнопка «отметить как превью» или просто отмечать по клику на картинке. От описания можно отказаться — по сути лишний функционал, которым пользется 0.1% аудитории и то по праздникам.

Почему нет кнопки «повернуть»? Это движком не предусмотрено?
Отредактирован:
0
Эмм… а напомните когда это в альто поддержка bb-тегов образовалась? o_O
Все верно там ошибка — оборачивание в a href. Но замечания по ошибкам лучше присылать прямо в лс :)

С этого компьютера»
«Из Интернет»
Дальше должна быть кнопка «Уже загруженные», такая же иначе логика распадается.

Это предложения по модальному окну (там сейчас именно так)? Вообщето там написано:
Загрузить изображения: с компьютера | из интернета
Уже загруженные: Этот топик и т.д.
По вашей логике Загрузить изображения: тоже должно быть кнопкой? ;)

Совершенно непонятна мне логика переноса из уже загруженных в текущий топик — если я зайду в уже загруженные отмечу галочкамии также будет — преейду в «этот топик» или как? И потом еще раз надо нажать чтобы вставить? Слишком много кликов и переходов…

Вы сломали мой мозг :) Там русским по белому написано — из любого места ставите галочки и нажимаете вставить выбранное и они вставляются. И все. И больше никаких кликов. Честно :)

Переход по клику на изображение — тоже самое — сложно и не очевидно. А как обратно? Кнопкой назад браузера? Сейчас как не странно логика работы с фотосетом в 1.0 стандартная более менее преемлема. Картинки загрузились в ряд — можно добавить описание и отметить как превью, никуда не переходя. Думаю должна быть небольшая кнопка «отметить как превью» или просто отмечать по клику на картинке. От описания можно отказаться — по сути лишний функционал, которым пользется 0.1% аудитории и то по праздникам.

На это уже обратили внимание aVadim и nikto. Это будет меняться, пока не знаю как.

По поводу того быть или нет модальному окну и как оно на мобильных девайсах. Управление изображениями внизу редактора, действительно удобнее окна и с компьютера и со смартфона или планшета — проверено на 3-х устройствах 4, 4.7, 8". Кстати, где там в esotalk всплывающие окна? :)
0
Кстати, где там в esotalk всплывающие окна? :)

Информационные и ошибки слева внизу, и кстати они не закрываются как в вльто через пару сек, так что даже не успеваешь прочитать)) Что касается работы с постами и вставки то там настолько все изумительно что это не нужно. :)) Да, забыл сказать что esoTalk фантастически хорош в мобильной версии. Давайте лучше не продолжать а то дойдем до таких моментов как вставка ссылки на пользователя при наборе @ и первых символов, как на гитхабе, или нотификация об упоминаниях вашего ника, о комментариях на сайте, возможность игнора темы, пользователя, раздела, или автоподгрузка содержимого темы так что возникает ощущение полной реализации comet-сервера. и т.д. и т.п. :D Это все в альто 5.0 наверно появится)))
0
Я о работе с изображениями там нет модальных окон.

Информационные и ошибки слева внизу, и кстати они не закрываются как в вльто через пару сек, так что даже не успеваешь прочитать))

Согласна, но это осталось от ls, думаю когда нибудь это решат )
0
По вашей логике Загрузить изображения: тоже должно быть кнопкой? ;)
при чем тут загрузить? У вас нарисовано
«С этого компьютера»
«Из Интернет»
Я говорю что «Уже загруженные» — это в той же категории, и должна быть такая же кнопка.
0
2 подзаголовка «Загрузить изображения» и «Уже загруженные» а уже в них идут пункты меню. Сделанные кнопками «С этого компьютера» «Из Интернет», чтобы выделить их и пользователь не искал глазами как это сделать. А почему бы вам не нарисовать интерфейс как вы его видите? :)
0
Идея Вадима, добавить иконки по работе с конкретным изображением. Хотелось сделать так, чтобы не перегружать интерфейс, надеюсь получилось :)

При наведение на изображение, кроме размеров подсвечивается иконка «редактировать»


Тоже идея Вадима, так же некоторые идеи по этому поводу были от nikto — по клику разворачивается окно в котором можно задать описание и если включен фотосет, то можно отметить как превью. Думаю эта кнопка будет использоваться не часто и разворачивать ее по событию hover вполне достаточно. К тому же теперь просто по клику на изображение можно прямо вставлять его в топик (без кнопки вставить выбранное).

0
Сразу извиняюсь, но если все сделали без модального окна заботясь в том числе и о людях с мобильными, то может и не стоит вводить это окно?
Я вижу два выхода, либо как в текущей загрузке фотосета картинки ставить вертикально, да получится длинная штука в высоту, зато возле каждой есть текстовое поле, либо при нажатии на картинку выводить не модальное окно, а под ней выводить текстовое поле и галочку что это может быть превью. Описание к картинкам могут быть полезны именно в фотосете и в таком случае их будут массово писать к каждой картинке и каждый раз бегать в модальное окно, ну как-то не очень
0
Сразу извиняюсь, но если все сделали без модального окна заботясь в том числе и о людях с мобильными, то может и не стоит вводить это окно?

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

Я вижу два выхода, либо как в текущей загрузке фотосета картинки ставить вертикально, да получится длинная штука в высоту, зато возле каждой есть текстовое поле, либо при нажатии на картинку выводить не модальное окно, а под ней выводить текстовое поле и галочку что это может быть превью.

В этом то и проблема :) В текущем виде при наличии 20+ фото в фотосете, с мобильного найти нужное нереально, приходится скролить огромную простыню, чтобы найти нужное изображение. Мне кажется гораздо удобней будет видеть их все перед глазами (на одном экране).
0
Опять же могу ошибаться, пробовала на нескольких устройствах и у меня сложилось такое мнение :) Но надо тестировать, пробовать это единственный способ добраться до истины.

ls изначально не был расчитан на использование на мобильных устройствах, тогда их просто не было ) Думаю настало время, кроме адаптивности поработать и с ui
0
Вы можете добавить функцию «отменить»? На против фото перед загрузкой.

Случайно не то фото выбрал, пришлось закрывать и обновлять страницу, что бы занаво выбрать другие перед загрузкой.
0
Скажите, пожалуйста, а интерфейсы загрузки в experience и start-kit будут разные?
0
Нет, одинаковые
0
Хотелось бы поднять еще раз эту тему. Попробовал как работает сейчас форма загрузки изображений в фотосет или топик, и честно говоря разочарован полностью.

Коллеги, это шаг назад в плане юзабилити. Да теперь можно загрузить несколько изображений но честное слово лучше бы оставалось как было, потому что разобраться с этим нормальный юзер будет не в состоянии. И я плохо представляю себе как должен убеждать пользователей в том что я адекватен, когда предлагаю им пользоваться таким новшеством, и зачем вообще было нужно так делать.

1. При загрузке загружаются миниатюры которые можно повернуть или удалить. Но сами изображения загружаются только после того как пользователь нажмет на загрузить. Знаете сколько я продвинутый юзер и точно лучше разбирающийся в альто чем рядовой пользователь потратил времени чтобы понять это?????
Вот к примеру, если миниатюр много, то я даже не понимаю что происходит — я нажимаю «загрузить», но не вижу изменений, а оказывается, где-то выше появляется прогресс бар под самой верхней миниатюрой. НЕ видя отклика я просто ухожу со страницы и все теряется. Т.е. у меня полное ощущение что загрузка просто не работает.

Вот зачем было добавлять дополнительный шаг? Какой смысл? Было 1 шаг, стало 2 шага. Вы что серьезно?
Что за бред — сначала грузить миниатюры и давать их повернуть только на этом шаге? Почему я не могу изменить параметры и повернуть после загрузки?

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

Вынужден констатировать что получилась фича ради фичи (в плане удобства — деградация).
Отредактирован:
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.