Ощущается как +3

Новая тема

Вы не можете создавать новые темы.
Т.к. вы неавторизованы на сайте. Пожалуйста назовите себя или зарегистрируйтесь.

Список тем

Нужна помощь - проектирование интерфейса.

Серьёзная тема

С друзьями на NN.RU

У вас пока нет друзей на NN.RU, поэтому ссылка на тему не может быть отправлена.

Воспользуйтесь поиском, чтобы найти новых друзей.

В социальных сетях

Афраний

19.12.2016

Аналогичную тему завёл на webdevelopers

Подскажите, пожалуйста! Делаю сайт, точнее панель управления своим проектом.

Пользователь логинится на сайте и по одной из ссылок заходит в список объектов (Компании).
У каждого из этих объектов множество свойств, которые было бы неплохо отобразить на экране.
То есть по сути - панель сводной информации (Бюджет и т.д.).
P.S. Также есть мысль поставить чекбокс совместимости с Законодательством РФ.
Она будет добавлять такие поля как ИНН, КПП и т.п.

Сложность ещё и в том, что каждый объект содержит ещё два списка объектов других типов (Сотрудники и Филиалы).
Поэтому есть мысль свойства самого объекта отобразить таким же виджетом, но отдельным.

И вот тут... Я использую AdminLTE, но нужного мне элемента нет - надо создавать самому.
А я пока не силён в адаптивной вёрстке. В общем, кто может подсказать, что почитать о проектировании интерфейсов?

P.S. Обращался в поиск гугла - предлагает использовать для виджета iframe и практически все виджеты - для ВК и ФБ.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

henry

19.12.2016

1) Группировка - набор вкладок и блоки (только ровно их расположить).
2) Свойства объекта на странице объектов - либо новая страница, либо всплывающее окно, либо сам объект дополняется полями, в границах этого объекта. Мне было бы удобнее новую страницу, в этом случае нужно показывать структуру навигации хлебными крошками.
3) Наверняка новый элемент можно создать по аналогии существующих. Посмотрите хелпы по AdminLTE или в исходники.
4) Адаптивность если в вебе, то гуглить по meta name=viewport content=width=device-width, initial-scale=1 или использовать bootstrap или аналоги.
5) Меньше анимации и прочего блюра.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Афраний

19.12.2016

Спасибо, наверное самый полный ответ.
AdminLTE и так на базе Bootstrap. Анимации нет.

Тут вопрос как раз в компоновке. Я показываю Компании в виде окон (сделаю их свёрнутыми, а нужную пользователь сам раскроет).
А вот в этих окнах - элементы. И первый элемент (по задумке) - свойства самой Компании:
(Бюджет, Владелец, количество тех, кому настройки этой Компании доступны и т.д.)

... может быть, так понятнее будет.
Я зашёл на сайт под пользователем для просмотра списка компаний --->
(компания пока одна, окно сворачивается)

Хотелось бы, чтобы ещё и вёрстка не поплыла.

оригинал

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

henry

19.12.2016

Верстку смотрите как в Bootstrap grid делают. В мобильной версии у вас получится что все окна встанут в вертикальный столб, что-то типа аккордиона.
Обычные рассуждения, тема UI сложна и требует времени для изучения, а задачу вам надо сейчас решать. Поэтому делайте логично и просто.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Афраний

19.12.2016

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

А что касается решения задачи - время как раз терпит: это мой собственный проект.
Это не работа на дядю, поэтому я могу себе позволить изучить вопрос.
Вот, пытаюсь сделать виджет, который будет отображаться в окне.

Насчёт аккордеона - не вопрос; да и вряд ли будут такие, кто будет иметь более 10 компаний.
Скорее одна-две компании для владельца (Заказчика) и четыре-шесть компаний для фрилансера (Исполнителя).

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

henry

19.12.2016

вот в таком схематичном виде, row и col-xx-xx это классы бутстрап блоков. всё должно красиво адаптироваться.
внутри вашей оконнной области:
"row"
__"col-xs-12 col-md-6 col-lg-4" (окно1)
____ "row"
______"col-xs-12 col-md-6" (половина окна под меню)
________... менюхи
______ (/половина окна под меню)
______"col-xs-12 col-md-6" (половина окна желтое содержимое)
________... содержимое
______ (/половина окна желтое содержимое)
____
__(/окно1)

сорри за оффтоп, вебразработка уже.

Акордион сугубо для автореализации коллпса, хотя проблем сделать коллапс индивидуально - нет.

нажмите, чтобы увидеть спрятанный текст

Литература по UX и UI-дизайну

1. Smashing UX Design: Foundations for Designing Online User Experiences
Из книги вы узнаете, чем занимается UX-специалист, освоите основные дизайн-инструменты и научитесь изучать свою аудиторию.

2. 100 Things Every Designer Needs To Know About People
Здесь собраны 100 советов, которые помогут оправдать ожидания пользователей. Что заставляет пользователя остаться на странице? Какой тип и размер шрифта выбрать? Какой длины должно быть предложение?

3. Usable Usability: Simple Steps for Making Stuff Better
Как понять нужды своего клиента? Как превысить его ожидания? Как воплотить свой замысел в жизнь? Книга с практическими примерами, таблицами и схемами.

4. Don"t Make Me Think, Revisited: A Common Sense Approach to Web Usability
Книга о создании интуитивно понятного дизайна с проиллюстрированными практическими примерами. Также здесь затрагиваются тонкости дизайна для мобильных устройств.

5. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics
Книга для тех, кто не знает, как правильно представить и проанализировать статистические данные для улучшения UX.

6. The UX Book: Process and Guidelines for Ensuring a Quality User Experience
Книга о том, как создавать адекватные шаблоны и прототипы на основе запросов аудитории и улучшить дизайн продукта.

7. Lean UX: Applying Lean Principles to Improve User Experience
Эта книга ставит своей задачей научить читателя находить и избавляться от лишних элементов в дизайне UX.

8. The User Experience Team of One: A Research and Design Survival Guide
Книга охватывает все ключевые этапы работы UX-дизайнера: планирование, исследование аудитории, разработка шаблона, разработка дизайна и тестирование.

9. The Elements of User Experience: User-Centered Design for the Web and Beyond
Простым языком о работе с UX: от стратегии до графического дизайна.

10. Sketching User Experiences: The Workbook
Самоучитель для дизайнера: множество техник создания шаблонов, эскизов раскадровок, интерактивных изображений, анимаций и др. Содержание книги подается в форме скетчей.

11. A Project Guide to UX Design: For user experience designers in the field
О создании сайта, который бы удовлетворял требованиям владельца и пользователей.

12. Agile Experience Design: A Digital Designer"s Guide to Agile, Lean, and Continuous
Как создавать UX с использованием гибких методологий разработки.

13. Universal Principles of Design, Revised and Updated
125 советов по улучшению юзабилити, восприятия и привлекательности продукта.

14. UI is Communication: How to Design Intuitive, User Centered Interfaces
Книга-руководство по решению актуальных проблем пользовательских интерфейсов. Интересен подход автора, возвышающий важность функциональности интерфейса над эстетической составляющей.

15. Designing with the Mind in Mind: Understanding User Interface Design Guidelines
Что происходит в голове пользователя при взаимодействии с интерфейсом? В книге описаны нетривиальные подходы к поиску ответа на этот вопрос.

16. Evil by Design: Interaction Design to Lead Us into Temptation
Книга о хитростях психологии пользователя: что вынуждает его нажать на ту или иную кнопку? Здесь приведены советы по созданию качественного дизайна интерфейса.

17. Simple and Usable Web, Mobile, and Interaction Design
Главная цель этой книги - создание как можно более простого в обращении интерфейса. Интересный материал со множеством теоретических советов и практических примеров.

18. Designing Interfaces
Книга-сборник моделей создания достойного UI. Полезное пособие для новичков, желающих приобрести опыт в создании интерфейсов.

19. The Best Interface Is No Interface: The simple path to brilliant technology
Первая часть книги повествует об актуальных проблемах дизайна интерфейсов. Во второй части описываются различные пути решения этих проблем.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Афраний

19.12.2016

Спасибо, по поводу вёрстки Bootstrap я в курсе.
Я пытаюсь для отрисовки виджета использовать info-box

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

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

henry

19.12.2016

Да незачто, просто этой литературы так много, что найти её обзоры можно хоть в соцсетях, хоть в обзорных статьях. Самое главное - выбрать из списка только одну книгу.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Афраний

19.12.2016

Попробую объяснить логику.
1. Заказчик регистрируется на сайте.
2. Заказчик создаёт Компанию.
3. Заказчик задаёт Отделения (филиалы) для компании.
4. Заказчик выбирает Услуги и назначает их Компании.
5. Заказчик пополняет бюджет Компании.
6. Заказчик выбирает и приглашает Исполнителя, который оказывает Услуги.
7. По факту оказания Услуг деньги из бюджета Компании снимаются и передаются Исполнителю.

Обращаю внимание на то, что:
Бюджет принадлежит Компании, а не Заказчику. У каждой Компании свой бюджет.
Таким образом, Заказчик, имеющий несколько Компаний, не сможет истратить бюджет "не туда".
Бюджет состоит из так называемых "платёжных единиц", которые:
1. покупаются только целиком 2. Не привязаны ни к одной валюте (можно приобрести по карте VISA).
(для российских компаний возможна выписка счёта государственного образца с указанием цен в рублях)
Платёжные единицы подразумевают возможность кредитования, скидок и работы в тестовом (демонстрационном) режиме.

В общем, мне надо сделать виджет, на котором можно быстро просмотреть сводную информацию о Компании.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

henry

19.12.2016

ТЗ есть - уже хорошо, но для задачи хватило бы и абстракции.
Вот например создание филиалов - просто новый элемент списка.
Выбор и назначение услуг - список услуг с чекбоксами (выбор - галочка).
Ваш виджет это список слева и виджет объекта выбранного элемента - справа.

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

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Афраний

19.12.2016

Не всё так просто. У филиалов тоже есть свойства, так что в данном случае это не просто список.
Да и Персоны (Заказчики, Исполнители) - имеют Портрет (Профиль), в котором есть фото и ID для поиска.

А в целом я вижу это так --->

оригинал

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

henry

19.12.2016

в итоге это все равно будет элемент списка, который развернется в окно. просто на десктоп это будет в виде блоков на странице, а на мобайл - в один столб.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Афраний

19.12.2016

Да-да, вот когда я попытался сделать такой блок, а в него вставить ещё два блока - вёрстка и поплыла.
Подозреваю, надо сделать так, чтобы блок определял свою высоту исходя из высоты дочерних элементов.
... не задавать же фиксированные размеры блока? Это противоречит концепции адаптивной вёрстки.

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

DimN

19.12.2016

Афраний писал(а)
чекбокс совместимости с Законодательством РФ

Звучит перспективно :о)

Ответить

Ссылка на сообщение

открыть ссылку в новом окне

В социальных сетях

Новая тема

Список тем

Последние темы форумов

Форум Тема (Автор) Последний ответ Ответов

Бизнес форум Кто торгует на маркетплейсах ? - =Bob= 23.04.2024 в 18:12:21 63

Юридический Нужен хороший адвокат. - Luchana 23.04.2024 в 18:48:14 3

Web-разработчики Нужен сайт визитка - leopink 22.04.2024 в 18:22:53 17

Бухучет и аудит ЕФС-1 в части НСС - Zabavuchka-net 19.04.2024 в 15:22:59 15

Недвижимость Сдам комнату в центре сормова на ул. Культуры - brodaga74 18.04.2024 в 22:11:06 10

Форум трейдеров Очередное обострение ублюдка - поар принять меры - Юристище 13.04.2024 в 23:30:51 14

Медицина Дюфастон 10мг 112 таблеток продаю - AleXey 84 22.04.2024 в 12:30:26 6

Подбор персонала Вакансия уборщицы в спортзал - anzhe 13.04.2024 в 15:42:55 3

Разработчики ПО Не пора ли удалять форум? - Афраний 19.03.2024 в 18:30:00 13

Банковский форум Открыть Российскую банковскую карту - без посещения банка - user_280853720 10.10.2023 в 14:56:36 5

Объявления на НН.РУ - Бизнес

Добавить объявление

Комплексная автоматизация и цифровизация бизнеса под ключ.

Добро пожаловать в новую эру автоматизации бизнеса! Поможем вашему бизнесу стать более успешным, организованным и...
Цена: 500 000 руб.

Ремонт гидравлических насосов экскаватора.

Оказываем спектр услуг по ремонту узлов и агрегатов экскаваторов российских и зарубежных производителей. Наш сервисный участок...

Полипропилен Бален 030, ПП 250/270. Первичное сырьё Распродажа склада.

Полипропилен Бален 030, ПП 250/270. Распродажа склада. Распродажа первичных полимеров: - Красители суперконцентраты (СКП), мастербатч...
Цена: 120 руб.

Куплю ионообменную смолу

Куплю ионообменную смолу
Цена: 10 руб.

Добавить вакансию Добавить резюме Работа для разработчиков ПО в Нижнем Новгороде

Frontend-разработчик Profit Search

40000 -
50000 руб.

Стаж работы 3-5 лет, частичная занятость

Разработчик .net Profit Search

70000 -
100000 руб.

Неполное среднее образование, стаж работы 3-5 лет, полная занятость

Программист-разработчик Full-Stack ГК "Kolobox"

70000 -
100000 руб.

Высшее образование, стаж работы более 5 лет, полная занятость

Программист 1С НПП ПРО-М

от 110 000 руб.

Высшее образование, стаж работы 3-5 лет, полная занятость