Комментарий: Эта статья представляет весь процесс разработки Netease Weibo с HTML5
HTML5 все больше пользуется отдачи от команд разработчиков Интернета дома и за рубежом. Иностранные, Google с энтузиазмом разрабатывает веб -магазин Chrome, Microsoft выпустила ирландский весенний веб -сайт, который поддерживает разработку технологий HTML5, а Nokia вложила значительные средства в покупку и создание бизнеса Nokia Map. Внутренние интернет -гиганты также заинтересованы в новых стандартах веб -разработки, взорванных со всего океана, и начали проверять продукты HTML5.Netease Weibo Weibo Platform Platform Product был успешно запущен в первом квартале 2012 года. Теперь я поделюсь опытом и уроками, извлеченными из разработки этого проекта с вами, и я надеюсь расти вместе с вами в среде разработки HTML5.
Кадровое покрытие
1. Конфигурация разработчика
Менеджер по продукту: 1 человек;
Дизайнер взаимодействия: 1;
Визуальный дизайнер: 1;
Фронт-инженер: 1;
Закулисные инженеры: 2;
Тестер: 1 человек.
2. Время развития
Дизайнер взаимодействия: 22 рабочих дней;
Визуальный дизайнер: 14 рабочих дней;
Фронт-инженер: 50 рабочих дней;
Бэкэнд-инженер: из-за использования исходных данных бэкэнд вам нужно только сотрудничать с инженером-интерфейсом, чтобы вызвать данные
Среди них взаимодействие и фронт используют самое длинное время во всем цикле разработки.
Netease Weibo Precass Process Development
1. Планирование функциональных требований: отличается от веб -и местных клиентов
Человек, ответственный: менеджер по продукту; Участник: дизайнер взаимодействия
Netease Weibo Web App (все относятся к мобильным телефонам в этой статье) отличается от веб -продуктов, а также отличается от местных клиентов.
1. По сравнению с Интернетом, веб-приложение Netease Weibo обладает сильными преимуществами, такими как мобильность и богатые медиа, и имеет недостатки, такие как пространство для презентаций небольших информационных презентаций и глубокая информационная архитектура. Ситуации использования двух разных. Weibo Web в основном используется захватывающим в изобилии и превосходных сетевых условиях; Веб -приложения Weibo в основном используются в тривиальных времени и сетевых условиях неравномерного качества.
Следовательно, веб -приложение Netease Weibo должно избегать крупных и полных функций, и необходимо извлечь и выбирать функции, наиболее часто используемые пользователями в мобильной среде из Интернета, и добавлять уникальные функции потребностей на мобильной стороне (например, локализованная сервисная функция будет рассматриваться на стадии итерации).
2. По сравнению с местными клиентами, Netease Weibo Web App имеет преимущества отсутствия установки, простого обновления, низкой стоимости разработки и адаптации. Он также имеет преимущества медленной скорости отклика, низкие разрешения для извлечения нативных элементов управления мобильного телефона и немного слабой стабильности.
Основываясь на преимуществах и недостатках этих двух, Netease Weibo Web App необходимо, чтобы догнать высококачественный опыт местных клиентов и попытаться обеспечить легкий и быстрый.
Одним словом, функции веб -приложения может быть более утонченным, чем у веб -и локальных клиентов, удовлетворяя наиболее основные потребности пользователей в мобильных средах.
Netease Weibo Web Planning Planning, как показано ниже:
2. Информационная архитектура дизайн: как можно более мелкому и узкому
Человек, ответственный: дизайнер взаимодействия; Участник: менеджер по продукту
Люди, которые создали продукты мобильного интернета, должны знать, почему информационная архитектура должна быть максимально мелкой и узкой. Самая большая причина - это небольшое и дорогое пространство дисплея мобильного телефона. Информационная архитектура локального клиента мобильного телефона должна быть мелкой и узкой, и веб -приложения нуждаются в этом еще больше, потому что на странице браузера всегда есть нижняя панель инструментов браузера, что вызывает небольшой кусочек уже тесного пространства дисплея. Как показано на рисунке ниже:
Панель инструментов браузера в нижней части экрана мобильного телефона очень бесполезна для продуктов веб-приложений: само веб-приложение является приложением с закрытым контуром и не требует панели инструментов браузера. Даже если это не влияет на большую информационную архитектуру, она разрушит драгоценное пространство отображения и окажет важное влияние на разработку навигационной системы (эта часть была кратко проанализирована в предыдущей статье «Обсуждение на навигационном дизайне веб -приложения iPhone»).
Введение статьи WebJX: Netease Weibo, фактическая разработка HTML5.
3. Дизайн взаимодействия: простой и эффективный
Человек, ответственный: дизайнер взаимодействия; Участники: менеджер по продукту, визуальный дизайнер, инженер фронт-элитного, бэк-энд техник
Концепция дизайна взаимодействия:
Концепция концепции дизайна взаимодействия этого продукта поступает: обследование сценария использования пользователей, анализ конкурентов, статус исследования веб -приложений и собственные требования Weibo Web App. Концепции дизайна взаимодействия, наконец, суммированные в основном:
1. Увеличенная простота поиска:
Укрепление глобальной навигации, быстрого возвращения на домашнюю страницу, регулярные общие операции, своевременные демонстрации анимации, простая и четкая компоновка веб -страницы и т. Д.
2. Повышение эффективности использования
Уменьшите уровень информационной архитектуры, дайте соответствующую запись клавиш сочетания, обеспечить безопасные области сенсорного прикосновения, рассмотреть привычки просмотра пользователей, уделять приоритет основных функций, устранить ненужный визуальный шум и т. Д.
3. более умный и внимательный
Он поддерживает автономное использование, автоматическое заполнение информации при редактировании после неожиданного перерыва, осторожного использования ящиков предупреждения, помощи в реализации предложений поиска, панели инструментов, организованных для текущих потребностей задач, активной и эффективной обратной связи и т. Д.
4. Повышение концентрации задачи
Одиночный путь работы задачи, своевременная скрытая навигация вкладок, устранение коэффициентов помех, недоступная кнопка дисплея серого, максимизация страницы задачи, минимизация функций и т. Д.
5. Последовательность платформы:
Посмотрите его сейчас, щелкните по нему, просмотр списка платформы iOS, анимацию экрана во время операций вперед и return, модальное представление платформы iOS, флажок предупреждения, нативные элементы управления, простая и четкая логика прыжков и т. Д.
Концепция интерактивного дизайна на этом этапе больше не просто концепция, а скорее конкретное руководство по дизайну для продукта веб -приложения. Метод реализации дизайна, который несет концепцию Beautiful Design, является важной реализацией на этапе исследования дизайна.
Есть много контента дизайна и деталей, здесь мы возьмем только одну детали, чтобы поделиться с вами:
Усовершенствованная простота поиска - улучшенная глобальная навигация
По сравнению с оригинальным WAP Weibo, фиксированное существование глобальной навигационной панели является большим изменением. Давайте кратко проанализируем причины для этого:
- Какова среда использования пользователя? - Наружные мобильные ситуации (например, в метро или в линии) или в помещении состояния холостого хода (например, просмотр Weibo перед тем, как ложиться спать);
- Какова цель пользователя, приезжающего на эту страницу? -Browse Weibo;
–Что простые действия, которые пользователи используют на этой странице? - Потяните, чтобы прочитать, вернуть и загрузить новую информацию, нажмите другие вкладки, чтобы выполнить прыжок;
- Каковы преимущества, если глобальная навигационная строка установлена на вершине? - Удобно для пользователей, чтобы вернуться в верхнюю, удобную для пользователей, чтобы загружать новую информацию, удобную для пользователей для переключения вкладок, и имеет сильное чувство глобального управления;
- Каковы недостатки, если глобальная навигационная панель зафиксирована наверху? -Вывая ценная информация пространство отображения
…………
Во время использования пользователя поведение прикрепления, освежающих и переключения вкладок также является относительно частым поведением, и необходимо обеспечить удобство работы. Фиксированная глобальная навигационная панель может соответствовать этому требованию: щелчок к клавишу дома может быть увенчана и обновлена, что может облегчить пользователям переключение вкладок. В то же время фиксированная глобальная навигационная строка может дать возможность пользователям четко знать, куда они находятся и куда они могут пойти, давая пользователям сильное чувство глобального контроля.
4. Визуальный дизайн: эксперимент свежего стиля
Человек, ответственный: визуальный дизайнер; Участники: менеджер по продукту, дизайнер взаимодействия, инженер фронт-эндов
Определение визуального стиля веб -приложения Netease Weibo обсуждалось по нескольким углам:
1. Должны ли мы сохранить цветовой тон в соответствии с локальным клиентом Netease Weibo?
Продукты должны поддерживать определенную последовательность на разных платформах, а стиль цвета также является важной частью формирования темперамента продукта. Так нужно ли нам использовать скины, похожие на локального клиента Netease Weibo? Основной цвет локального клиента Netease Weibo - красный.
Анализ заключается в следующем:
- Преимущества использования этого красного: более сильная консистенция продукта; Темперамент продукта, образованный красным, более энергичен.
-Недостаток использования этого красного цвета заключается в том, что красная область слегка привлекательна по сравнению с содержанием Weibo, и иммерсивное чтение труднее достичь;
Используя веб -приложение Netease Weibo через браузер Safari, конечный визуальный эффект отличается от локального клиента, что панель инструментов браузера всегда занимает линию места в нижней части экрана. Красный - это относительно шумный цвет, в то время как панель инструментов браузера синий и серый, что является относительно тихой. Огромный разрыв между этими двумя цветами делает очки чрезвычайно неудобными.
Основываясь на вышеуказанном анализе, он не подходит для использования красного цвета локального клиента.
Введение статьи WebJX: Netease Weibo, фактическая разработка HTML5.
2. Каково влияние работы в браузере сафари?
Веб -приложение Netease Weibo запускается и отображается из браузера Safari, который является одной из средств для этого продукта. Веб -страница дает людям легкое и упорядоченное чувство, в то время как местный клиент дает людям тяжелое и стабильное чувство.
Поэтому легкий визуальный стиль - хороший выбор.
3. Текущие тенденции визуального стиля
Свежий стиль, возглавляемый Metro UI и Google+, стал значительной тенденцией развития визуального стиля. После периода изысканного и сложного визуального опыта я вернулся к простоте, и свежий визуальный стиль стал популярным.
Таким образом, визуальные дизайнеры пробовали несколько визуальных попыток, в том числе красный, прохладный черный и свежий светло -серый. Сравнив из нескольких сторон, все согласились, что свежий и светло -серый цвет был. Свежий и светло -серый - основной цвет, а состояние щелченого значка - красный, обычно используемый Netease, который в определенной степени поддерживает консистенцию визуального стиля.
5. Front-End Development: сломайте хитрости
Ответственный человек: инженер фронт; Участники: менеджер по продукту, дизайнер взаимодействия, визуальный дизайнер, бэк-техник
Когда вы достигнете этой части, вы можете быть больше обеспокоены тем, на что похож конкретный код и какова структура реализации? Извините, секреты продукта, участвующие в компании, и конкретный код реализации не может быть отображен всем. Простите меня!
Здесь мы выбираем 2 вопросы сети, чтобы кратко ответить:
Вопрос 1: Можете ли вы рассказать о передней архитектуре? Почему Sencha не используется?
Ответ: Поскольку Sencha Touch 1.x/2.x, JQuery Mobile и т. Д. Не идеально подходит для настройки, производительности и потребления ресурсов, Front-Tend Netease разработала свою собственную структуру. Как вы сказали, он использует Seajs для обработки загрузки сценариев, и Iscroll имитирует прокрутку. Кажется, что эффект все еще хорош. Front-end Netease продолжит улучшать эту структуру.
Вопрос 2: Можете ли вы сфотографироваться и загрузить фотографии?
Safari iPhone не дает разрешения на получение камер и галереи, поэтому это требование еще не выполнено. Кстати, если Android даст разрешения, это определенно удовлетворит эту срочную потребность в то время.
6. Последующая работа
Последующая работа в основном включает в себя интерактивную проверку, визуальный осмотр, тестирование QA, краткое изложение и обратную связь, чтобы исправить проблемы после его запуска, и планирование для следующей итерации. Все понимают процесс проекта, поэтому я не скажу много.
Уроки, извлеченные из этого
1. Чувства к рабочим процессам
1. Станьте отличным опытом дизайна в качестве гида.
Этот проект является типичным примером ориентированного на дизайн подхода. Во-первых, это дает дизайнерам достаточно времени и места для игры, в то время как технологии могут быть контратакованы. Эта рабочая идея является краеугольным камнем всего продукта, чтобы получить хороший пользовательский опыт. Технология HTML5 мощная и имеет слишком много возможностей; И дизайн заключается в том, чтобы превратить эти технические возможности в плесени.
2. Менеджер продукта, взаимодействие, видение, фронтальное общение своевременно и частым образом
На протяжении всего проекта управляющие продуктами, дизайнеры взаимодействия, визуальные дизайнеры и фронт-инженеры проводят встречу каждую неделю. Позже было доказано, что это частое общение значительно снижало скорость переработки и повышенную эффективность развития.
3. Бегите быстро с небольшими шагами и сосредоточьтесь на итерации.
Продукты Netease Weibo являются относительно сложными, а прогресс в разработке HTML5 относительно медленная, а рабочая сила ограничена. Невозможно заполнить все функциональные детали и одновременно выйти в Интернет. В противном случае, для отладки потребуется один месяц, добавив тяжелое бремя к быстрому развитию продукта. Следовательно, это стало неизбежным выбором, чтобы выполнить только самые основные функции в первом выпуске.
2. Пользовательский опыт
1. Навигационная система более подходит в верхней части экрана.
Панель инструментов браузера всегда существовала, что делает навигационную панель вкладок, которая больше не подходит для исправления в нижней части экрана, и верхней вершина является более подходящей.
2. Удобство важнее, и наиболее часто используемые функции устранены.
Из -за производительности продукта и производительности браузера текущая беглость веб -приложений и скорость прыжков по -прежнему не сопоставимы с местными приложениями, а стоимость прыжка немного выше. Следовательно, необходимо приблизить наиболее часто используемые функции к пользователям, чтобы снизить стоимость ожидания, вызванные скачками.
3. Визуальный черновик - это баланс между эстетикой и простотой. Большинство визуальных черновиков должны быть реализованы с использованием кода.
Почти все видение реализуется через код, и лучше не быть слишком сложным для визуального дизайна. Для инженеров фронт-инженеров также требуется время, чтобы переваривать визуальные черновики.
3. Понимание технической реализации
1. Ограничения разрешения браузера Safari, веб -приложения не может вызовать инструменты камеры и не поддерживает функцию загрузки изображения.
Это головная боль и беспомощная вещь. Разрешения, предоставленные системе iOS для веб -приложения, слишком низкие. Напротив, веб -приложение Android System может получить элементы управления камерой, а также поддерживать функцию загрузки изображения Weibo (но версия Android еще не была разработана).
2. Катранс не может достичь гладких эффектов, таких как местные клиенты.
Причины: хорошие кат -сцены разрушат производительность продукта; Технология HTML5 не такая идеальная и зрелая; По -прежнему не хватает мощного браузера.
краткое содержание
В дополнение к вопросам разрешения системы iOS, превосходная производительность веб -приложения близка к производительности Native App. HTML5 Technology дала WAP веб -страницы новую жизнь и принесла разрушительные изменения в WAP. В проектах HTML5 функциональное планирование лучше всего подходит для переработки; Информационная архитектура должна быть настолько мелкой и узкой, насколько это возможно; Дизайн взаимодействия должен стремиться к простоте и эффективности; Визуальный дизайн также учитывает специальную операционную среду браузера; Фронт-конечности не только необходимо постепенно переваривать дизайн взаимодействия и визуальный дизайн, но и смело пытаться контратаковать в новых технологиях и новых проблемах. Частое общение между всей командой очень необходимо, и лучше всего предпринять небольшие шаги и выполнить быстрые шаги разработки.
С ограниченной рабочей силой и энергией неизбежно существуют предубеждения. Все могут суетиться! С нетерпением жду возможности обсудить с вами эту интересную тему.