close

Вход

Забыли?

вход по аккаунту

?

Внутренняя страница

код для вставкиСкачать
Постановка задачи
Разработать и реализовать дизайн сайта с использованием Bootstrap по предоставляемым
эскизам и функциональному описанию страниц.
Краткое описание проекта
Проект носит название "Паскаль*66" ("Паскаль шестьдесят шесть"). Суть проекта площадка для заказа работ студентами (и школьниками) у исполнителей (фрилансеров).
Требования
- Bootstrap 3
- на выходе: HTML+CSS
- светлая цветовая схема (но не ванильная)
- легкий современный стиль дизайна
- соблюдение основных правил юзабилити
Логотип и авторская графика
В качестве логотипа использовать фотографию (портрет) Паскаля Блеза, обработав в
соответствии с цветовой схемой сайта. Можно использовать стилизованное изображение
(а-ля набросок карандашом), фотографическая точность не обязательна.
В качестве элементов оформления можно использовать изображения изобретений Паскаля
Блеза (счетную машину).
Пиктограммы
Использовать из набора Bootstrap для лучшего визуального восприятия информации (в
подписях), а также в качестве "всплывающих" командных кнопок (удалить, ответить,
лайк...)
Шрифты и стили
Использовать только стандартные шрифты. Для каждого используемого стиля текста
(кроме заголовка) должен быть предусмотрен вариант выделения важного фрагмента и
вставка гиперссылки в тексте.
Общая разметка страницы (макет)
Будет три типа размещения функциональных групп элементов на странице:
1) стартовая (главная) страница
2) внутренняя страница (профиль, личный кабинет, настройки)
3) информационная страница (текст)
Каждый из этих макетов должен иметь вариант для авторизованного пользователя (с
меню, приветствием, быстрым переходом в ЛК) и для гостя (с формой авторизации,
ссылкой на регистрацию).
Принципиальное отличие в том, что для типа 1 и 3 главным по смыслу является контент
(т.е. элементы авторизации/навигации не должны сжирать слишком много пространства),
а для типа 2 важно обеспечить удобство навигации по внутренним страницам (быстрый
удобный доступ ко всем функциям сайта в соответствии с юзкейсами).
Стартовая страница
(см. 01_Главная)
Содержит:
- логотип, название сайта ("Паскаль*66"), слоган сайта ("сайт помощи учащимся..")
- форму авторизации, ссылку на регистрацию
- перечень видов работ (доклад, реферат, курсовая и т.п.) из 6-12 элементов (меняется
динамически). Предусмотреть выделение элемента из списка (при наведении мыши), т.е.
выбор.
- подсказку-пояснение к типу работы (может быть всплывающей, либо просто
динамически-обновляемое поле при наведении)
- элемент перехода к странице "авторам" в виде ссылки или надписи + кнопки (то что на
примере "все далаешь сам?")
- подвал с копирайтом и 4-6 статическими ссылками на другие страницы сайта
Может иметь свою собственную разметку (отличную от 2 и 3), более ориентированную на
визуально-приятное подсознательное восприятие, чем на контент.
Внутренняя страница
(см. 02_Личный кабинет_Моя страница)
Содержит:
- логотип, название сайта, слоган сайта
- информацию об авторизованном пользователе или форму регистрации
- элемент навигации по внутренним разделам сайта (сообщения, настройки, ответы,
баланс...). Содержит 6-10 элементов. Должен обладать способностью выделения
актуальных (требующих внимания) - например при наличии непрочитанных сообщений
пункт "сообщения" должен как-то выделяться визуально. Должен обладать опциональной
возможностью числовых подписей к каждому пункту (например кол-во сообщений рядом
с пунктом "сообщения").
- подвал (с 4-6 статическими ссылками и копирайтом)
Заметка: некоторые внутренние страницы состоят из 2-4 "вкладок" или подразделов.
Например на странице "Задания" должны быть вкладки (подразделы) "Мои задания",
"Поиск" и "Подписки". Требуется предусмотреть в дизайне (опционально) наличие этих
"вкладок" (или подразделов).
Детальное описание функциональных элементов нескольких внутренних страниц,
требующих дизайна - ниже.
Информационная страница
(см. 04_Размещение задачи №1)
Третий тип разметки, ориентированный на контент в первую очередь.
Содержит:
- логотип, название сайта, слоган сайта
- информацию об авторизованном пользователе или форму регистрации
- большую область для контента
- подвал
Элементы управления
Должно быть выполнено оформление в общем стиле для следующих элементов:
- Заголовок 1 - самый главный заголовок страницы
- Заголовок 2 - второй по значимости заголовок
- Заголовок 3 - третий по значимости (менее значительный) заголовок
- Текстовое однострочное поле ввода. Вариант с подписью слева и с подписью сверху +
опциональная иконка. Вариант оформления "неверный ввод" (выделение поля). Вариант
оформления "правильный ввод" (цвет, галочка справа или пиктограмма). Опционально:
подсказка к полю ввода ("пароль должен содержать от 6 до 10 буквоцифр")
- Чекбокс ("галочка")
- Радиокнопка
- Кнопка
- Выпадающий список для выбора одного элемента
- Выпадающий список для выбора нескольких элементов (список с "галочками"?)
- Элемент выбора даты (с выпадающим календарем)
- Многострочное поле ввода
- Колодец - элемент, куда можно поместить текст/форму, если ее требуется выделить
визуально из контента
- индикатор загрузки/обновления - анимированный gif в двух вариантах (большой и
мелкий) для вывода либо в контенте (когда подгружается небольшой блок/элемент), либо
вместо блока (подгружается значительная визуальная область)
PS: в выпадающих списках предусмотреть возможность "невыбираемых" элементов
(будут использоваться для группировки, например список предметов "Технические:
алгебра, черчение, программирование. Гуманитарные: биология, география, экономика." в нем пункты "Технические" и "Гуманитарные" должны визуально отличаться и в
зависимости от типа списка, либо быть невыбираемыми, либо при нажатии выбирать все
элементы, входящие в этот раздел).
Описание внутренних страниц сайта
Ниже идет описание функциональных блоков внутренних страниц сайта, требующих
отдельного внимания. Общая разметка и оформление должны быть выполнены в
соответствии с описанным ранее в пункте "Внутренняя страница". Далее указываются
лишь особые моменты (то что составляет контент внутренних страниц).
Профиль/моя страница
(см. 02_Личный кабинет_Моя страница)
Личная страница пользователя. Выводится в двух вариантах: "для себя" (своя страница с
возможностью редактирования) и "чужая" (посетитель просматривает профиль другого
пользователя).
Содержит:
- аватар (фото). Размеры выбрать исходя из дизайна, но не нужно делать слишком
большим (это не сайт знакомств!)
- имя/ник
- метка "онлайн" или когда заходил последний раз
- общий рейтинг ("звездочки")
- анкету из 3-8 полей (город, дата регистрации, е-мейл, специализация, о себе...)
- блок очков, состоящий из двух целочисленных счетчиков (выполненные и
невыполненные работы) и трех процентных навыков (активность, оперативность,
продуктивность)
- элемент для связи с пользователем ("Написать ЛС")
- ленту отзывов/оценок по выполненным работам
Каждый блок в ленте отзывов состоит из:
- аватара пользователя, написавшего отзыв
- имени/ника пользователя (с опциональной меткой "онлайн")
- даты/времени отзыва (м.б. в текстовом виде: "час назад", "вчера" и т.п.)
- текстового комментария пользователя (опционально)
- числовой оценки пользователя (опционально)
- типа и темы выполненной работы со ссылкой на нее (опционально)
- всплывающих элементов управления (если на своей страницы) - появляются при
наведении мышью в виде кнопок: ответить, редактировать, удалить
Блоки в ленте бывают трех видов:
1) просто коммент (а-ля запись на стене)
2) оценка по выполненной работе (обязательно содержит ск. баллов заработал автор)
3) неопубликованная оценка по работе (видна только на своей странице)
Все три вида должны четко визуально отличаться друг от друга и понятны по смыслу.
Например "неопубликованная оценка" может быть блеклым (серым) вариантом
"опубликованной оценки".
Общее замечание по дизайну страницы
Страница "Профиль" является "лицом" пользователя системы. Главная ее задача, чтобы у
посетителя четко формировалась оценка пользователя (насколько он крут). Поэтому
рейтинги наиболее важны. Следующая задача страницы - дать посетителю более
детальное представление о пользователе (откуда, как давно, что люди говорят) и
обеспечить контакт.
Задание
(см. 03_Задание)
Страница "задание" является рабочим столом пользователей.
Содержит:
- тип работы (диплом, курсовая, реферат...)
- тему работы
- статус работы (выполнена, торгуется, ждет подтверждения и т.п.)
- счетчик просмотров страницы
- опционально: элемент для подписки на работу (кнопка? ссылка? иконка?) и отмены
подписки
- предмет
- дату сдачи (с опциональным выделением "срочности")
- ссылку на заказчика
- дополнительную информацию (текстовое описание)
- опционально: блок прикрепленных файлов с элементами управления (загрузить, удалить)
- блок стоимости работы: может содержать фикс. цену, может содержать ограничение
цены ("до 2000р"). Опционально: элемент предложения своей цены
- ленту "диалогов", состоящую из блоков различного типа
- опционально: поле написания сообщения в ленту с возможностью прикрепления файлов
Все блоки в ленте содержат:
- аватар
- имя-ник пользователя (с опциональной меткой "онлайн")
- рейтинг пользователя (опционально)
- дату-время
- элементы управления блоком (ответить, удалить, редактировать)
- визуальное выделение авторства блока. Если блок от заказчика работы, то он должен
визуально отличаться от остальных.
Тип блока 1: сообщение. Содержит текст сообщения/вопроса от пользователя системы +
все стандартные элементы для блока.
Тип блока 2: предложение выполнить работу.
Содержит:
- опционально: кнопки действий (принять, отказаться)
- опционально: цену
- системное сообщение ("предлагает выполнить работу..")
- опционально: краткий комментарий от пользователя ("выбери меня, не пожалеешь")
Тип блока 3: системное сообщение.
Содержит:
- текст сообщения ("Заказчик отказался от работы без объяснения причин")
- опционально: кнопки действий
Общее замечание по дизайну страницы
Страница служит инструментом взаимодействия заказчика и исполнителя. Главный
критерий - удобство работы. Т.е. посетитель (заказчик, исполнитель или потенциальный
исполнитель) должен в первую очередь понимать что за работа (тема, предмет), в каком
она состоянии сейчас и какие обновления произошли с момента последнего захода. При
этом ключевая информация (системные сообщения, сообщения от заказчика) должны
быть визуально заметны (на случай, если страница будет сильно "зафлужена").
Задания
(см. 07_ЛК задания_Поиск)
Внутренняя страница "Задания" состоит из трех вкладок: "Мои задания", "Поиск",
"Подписки".
Дизайн всех вкладок однотипный: блок фильтров/поиска (форма с перечнем критериев
отбора) и лента заданий.
Отличия только в блоке "задание" ленты заданий.
Для вкладки "Мои задания" блок содержит:
- Тип работы (диплом, реферат и т.п.)
- Тему работы
- Дату размещения задания
- Дату завершения конкурса (сдачи)
- статус работы (торгуется, выполнена, сдана, в работе...)
- дату обновления информации
- признак "честная сделка" (опционально)
- стоимость работы
Для вкладок "Поиск" и "Подписки" блок содержит:
- Аватар
- Имя-ник разместившего работу
- Тип работы
- Тему работы
- Предмет
- Дату сдачи
- Статус работы
- признак "честная сделка" (опционально)
- дату обновления
Новости
(см. 10_ЛК_Новости)
Внутренняя страница "Новости" представляет собой ленту событий.
Элементы ленты бывают трех видов:
- Системные: сообщения от системы
- Пользовательские: события, связанные с действиями пользователей
- Управленческие: заменяют собой пользовательские сообщения после удаления
Пользовательская новость содержит:
- аватар
- имя-ник пользователя
- дату-время
- опционально: тип работы, которой касается новость
- опционально: тему работы, которой качается новость (со ссылкой на работу)
- текст новости (генерируется сайтом) с событием
- элемент управления "удалить" (кнопка, ссылка, иконка?)
Системная новость содержит:
- дату-время
- опционально: тип работы, которой касается новость
- опционально: тему работы, которой качается новость (со ссылкой на работу)
- текст новости (генерируется сайтом) с событием
Управленческая запись содержит:
- текст сообщения
- опционально: элемент(ы) управления (командные кнопки) с возможными действиями
Сообщения
(см. 11_ЛК сообщения_диалоги)
Страница "сообщения" служит для переписки пользователей сайта. Дизайн должен быть
реализован подобно привычным средствам общения (VK.com, facebook, Viber...).
Однако учесть, что привычной "адресной книжки" (списка друзей) не будет, но как-то
нужно хранить историю сообщения (и иметь к ней доступ) с любым пользователем.
Поэтому вариант VK.com с их "диалогами" кажется более уместным.
Документ
Категория
Программирование, Базы данных
Просмотров
39
Размер файла
60 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа