Официальное приложение от разработчиков ВКонтакте. Поддерживает все необходимые функции сайта VK.com – от личных сообщений и новостей до публикации фотографий, прослушивания музыки и просмотра видео.
Описание
Павел Дуров назвал это приложение лучшим, что могла сделать компания для мобильных платформ. По его словам, каждое обновление приложения подразумевает серьезную работу над всеми элементами, а не просто поверхностное переделывание. Для тех, кто немалую часть времени проводит в социальной сети ВКонтакте, это ценная находка. Интерфейс приложения практическим во всём повторяет компьютерную версию, но, в то же время, оптимально адаптирован под экран смартфона. Что касается планшетов, то тут мы рекомендуем использовать VK for iPad.
Возможности:
- просмотр расширенных профилей друзей;
- управление заявками в друзья;
- просмотр новостей;
- отправка и получение сообщений;
- просмотр, загрузка и редактирование фотографий;
- комментирование записей и фото;
- поиск людей и сообществ;
- прослушивание музыки;
- просмотр видео;
- просмотр групп;
- редактирование статуса;
- отображение вложений (изображений, документов);
- репост фоток и записей;
- шифровка данных по протоколу https для обеспечения безопасности;
Принцип работы:
Официальное приложение ВКонтакте работает на всех версиях iOS, даже на таких стареньких, как 3GS. Оно использует пространство экрана наилучшим образом. Таким образом, картинки, записи и комменты выводятся на всю ширину экрана. Масштабировать, как правило, ничего не приходится. При этом фотографии, да и профили в целом выглядят очень красиво.
VK Live: Что это такое?
После входа вы попадете на ленту новостей. Доступ к основному меню осуществляется нажатием на кнопку в левом верхнем углу.
Плюсы:
- уведомления о событиях без открытия приложения;
- экспорт профилей друзей в телефонную книгу;
- интегрированный фоторедактор;
- расширенный набор смайликов;
- открытие прямых ссылок vk.com;
- настройки безопасного поиска видеозаписей (для детей, к примеру);
- скачать VK App на iPhone можно бесплатно.
Минусы:
- не отображается собственная стена;
- не отображает музыкальные альбомы и тексты песен;
Приятно, что VK App работает на всех версиях операционки iOS. Это невероятно удобный инструмент коммуникации через интернет. если вы часто общаетесь с друзьями в соцсети ВКонтакте для вас это приложение будет просто незаменимым.
Аналоги:
VK for iPad – также официальное приложение от ВКонтакте, оптимизированное для планшетов.
Источник: softobase.com
ВКонтакте 7.12.1
Объяснение Финала «Дома Совы»
ВКонтакте для iOS – официальное приложение для самой популярной российской социальной сети.
Возможности Вконтакте
- обмен текстовыми и голосовыми сообщениями с фотографиями, музыкой, видеозаписями и документами;
- групповые чаты;
- просмотр новостей, групп, пабликов и страниц других пользователей;
- просмотр видеозаписей и прослушивание музыки;
- сохранение музыки в кеше для прослушивания без Интернета;
- регистрация непосредственно из окна приложения;
- подписка на страницы интересных людей и знаменитостей;
- вступление в группы по интересам;
- знакомства с новыми людьми.
Особенности приложения
Приложение «Вконтакте» для мобильных устройств, работающих на базе iOS полностью адаптирует функции социальной сети для их полноценного использования на гаджете. Вход осуществляется с помощью логина и пароля, выбранных во время регистрации. Содержимое страниц можно открывать в самом приложении или в браузере.
С помощью приложения можно не только просматривать контент (фотографии, видеозаписи и пр.), но и добавлять его в свои альбомы или прикреплять к сообщениям. Работа приложения осуществляется по шифрованному протоколу, что гарантирует безопасность данных.
- наиболее быстрое и удобное приложение социальной сети для iOS;
- интерфейс точно воспроизводит дизайн сайта ВКонтакте;
- максимально эффективное использования пространства на экране гаджета.
Источник: biblsoft.com
Почему мы не обновляли приложение ВКонтакте для iPad пять лет, а теперь обновили
С апреля (и навсегда) iOS-приложение ВКонтакте станет универсальным — все обновления будут доступны одновременно на iPhone и iPad.
30 630 просмотров
Я Матвей Правосудов, старший продуктовый дизайнер ВКонтакте. Расскажу про дизайн универсального приложения: от концептов и возникших проблем до принятых решений и итогового результата. Бонусом — советы (на случай, если вы окажетесь в похожей ситуации) и публичные макеты в Figma для всех желающих.
Предыстория
Последние несколько лет у нас было два приложения в App Store: ВКонтакте (для iPhone) и «ВКонтакте для iPad».
Скриншоты отдельного приложения для iPad
В 2015 году каждую крупную фичу мы проектировали отдельно под iOS (для iPhone), Android, веб, m.vk.com и iPad. Мы делали независимую и сильно отличающуюся версию для планшетов, хотя аудитория iPad была (и остаётся) значительно меньше, чем на других платформах.
Со временем количество новых функций и продуктов (а значит, и обновлений) росло. Адаптировать их для каждой платформы становилось всё сложнее. Мы сфокусировались на версии с самой большой аудиторией — мобильном приложении ВКонтакте: по количеству пользователей оно обогнало не только iPad, но и vk.com с m.vk.com. Прежний подход с отдельной версией для планшетов оказался неэффективным — и стало ясно, что нужно новое решение.
Прийти к нему помогла наша единая дизайн-система. Мы уже некоторое время работаем над ней, чтобы ускорять разработку и делать процессы проще. Например, уже рассказывали про работу с цветами в тёмной теме и делились библиотеками компонентов, которыми каждый день пользуемся сами. Универсальное приложение для iPhone и iPad — логичный следующий шаг.
Новый процесс проектирования
Чтобы не затягивать запуски и не разрабатывать при каждом обновлении варианты под разные устройства, мы решили сделать приложение для iPhone и iPad универсальным. Это позволяет за один подход адаптировать его почти полностью к разным размерам экранов. А в будущих фичах адаптивность заведётся почти самостоятельно.
И мы попробовали несколько идей.
Один из первых смелых концептов. Две колонки, новая шапка, плеер внутри таббара. Одним словом — шик
Макет смелый и эффективно использует пространство экрана, но нам не подошёл. Он подразумевает дополнительную разработку под iPad — а мы как раз хотели от неё отказаться, чтобы не замедлять запуск новых фич. Поэтому потребовались ограничения для дизайнерских решений. Конечно, мы обожаем крутые концепты, но в этой задаче нужна простая система навигации и сетки. И она должна хорошо работать как на iPhone, так и на iPad.
Поэтому что мы сделали дальше? Взяли приложение для iPhone и растянули.
Более спокойный концепт
Эта идея сработала. С ней разработчикам не приходится заново верстать каждый экран — достаточно настроить правила адаптации ключевых экранов к широкому размеру.
Закапываясь в ограничениях, легко сделать быстрое в разработке, но неудобное приложение. Чтобы не попасть в эту ловушку, мы нашли баланс: глобальные компоненты адаптируем, но локально пользуемся преимуществами iPad.
А чем отличается iPad от ноутбука или телефона, кроме размера экрана?
В первую очередь контекстом использования. Сидеть за ноутбуком удобно, когда ты не находишься в движении и есть стол, где можно расположить устройство. В твоём распоряжении клавиатура для ввода, а ещё тачпад или мышь. В такой комфортной рабочей обстановке, за компьютером, пользователи могут распространять фокус внимания на несколько окон и состояний. Сами приложения могут быть сложнее, если это уместно.
Мобильный телефон — маленький. Нет дополнительных устройств ввода, только пальцы. Благодаря этим и другим ограничениям получилось компактное устройство, которым удобно пользоваться на ходу, в автобусе, тренажёрном зале. Но в таких условиях люди не могут охватить вниманием сразу несколько окон. Поэтому мобильные приложения открываются на полный экран, а каждая страница заточена под конкретную задачу.
Планшет — что-то среднее между ноутбуком и телефоном. По умолчанию без клавиатуры и мышки, но с большим экраном. Планшетом можно пользоваться на ходу, но уже не так удобно. При этом дизайнеры ожидают, что владельцы устройств справятся с несколькими фокусами внимания или приложениями. Поэтому появились разделения на колонки, Split View, Slide Over и другие возможности.
При проектировании навигации в новом приложении мы учли основные особенности условий, в которых используется iPad. Пока не поддерживаем технологии многозадачности iPadOS в полную силу, но займёмся этим в будущем.
Сколько фокусов внимания может сохранять пользователь на разных девайсах
После проработки основных концептов и обсуждения с разработчиками мы приступили к важному этапу — проектированию системы адаптации.
Универсальное приложение
Немного расскажу про инструменты и план работы. С прошлого года мы работаем в Figma, и пришло время по максимуму использовать главную функцию редактора — мультиплеер.
Мы собрали почти всех дизайнеров и распределились по командам. Я стартовал сразу и готовил систему, а другие продуктовые дизайнеры подхватывали новые описанные компоненты и утаскивали в свои макеты. Каждый из нас отвечал за свой продукт: музыку, видео, мессенджер, клипы, сервисы, ленту новостей, истории, постинг, звонки, стикеры и подарки, сообщества, маркет, инфраструктуру. Когда макеты очередного продукта были готовы — мы перетаскивали их из черновиков на мастер-страницу команды. Разработчики тоже не отставали и оперативно применяли свежие макеты.
Мы планировали использовать нативные iOS-компоненты. Поэтому для дизайна под iPad потребовались хорошие знания по работе модалок и навигации. Ещё нам пригодилось приложение Adaptivity (A). Оно платное, но помогло разобраться, какие стандартные размеры у модальных окон и таблиц и как они меняются при разных ориентациях устройства.
На этом мы завершили подготовку.
Адаптивность. Проектирование навигации
Самое верхнеуровневое проектирование любого продукта — это информационная архитектура и навигация. Структуру мы оставляли такой же, как на iPhone, а вот над навигацией пришлось подумать.
Мы постоянно работаем над ней в приложении. Тестировали разные варианты, и один был с левым меню, в котором сконцентрированы наиболее часто используемые разделы. Его мы и решили взять за основу версии для iPad.
Новый дизайн ленты новостей и открытое боковое меню
Сначала разбили весь экран на две колонки: сайдбар с навигацией слева и основной контент справа. Идея навигации была в том, чтобы взять боковое меню из мобильной версии и добавить пункты таббара в самый верх. У пользователя остаётся в быстром доступе вся основная навигация, а ещё можно быстро переходить к второстепенным пунктам меню. Так рекомендует адаптировать приложения и Apple.
Но мы решили на всякий случай попробовать разные концепты — чтобы было из чего выбирать. Набросали три варианта навигации в приложении. Первый был предпочтительным: в ландшафтной ориентации всегда доступна навигация, достаточно площади для контента, а в портретной меню компактно схлопывается.
Затем мы замиксовали подходы и сделали в ландшафте всегда раскрытую навигацию, а в портрете выезжающее меню, как на iPhone (по умолчанию оно скрыто, чтобы не съедать ширину).
Финальный вариант был самым простым: таббар остаётся, а боковое меню открывается из шапки экрана.
Обсудили с разработчиками возможности и остановились на третьем варианте. Адаптация интерфейса к планшету и так довольно непростая и порождает много багов — а мы не хотели ещё больше усложнять коллегам работу. К тому же сайдбар замедлил бы вёрстку экрана мессенджера, где мы планировали использовать Split View. Но мы всё же держим в уме первый вариант навигации с сайдбаром — на будущее.
Адаптивность. Каркас и глобальные компоненты
Чтобы ускорить дизайн и разработку, мы использовали системный подход: выделили структуры экранов (каркасы) и большие компоненты, а затем описали для них правила адаптации к iPad. Дизайнеры придерживались правил — и разработчики один раз заводили, например, снекбар, и он правильно работал во всех случаях.
Гайды. Глобальные правила и примеры компонентов мы вынесли на отдельную страницу в Figma — Guide. Дизайнеры брали оттуда готовые объекты, а разработчики ориентировались на примеры и реализовывали их в коде.
Пример гайда по модальному окну для историй и мини-приложений
Каркасы экранов. Мы вывели несколько типовых структур страниц, которые чаще всего встречались в приложении.
- Материк. Залитый фон, одна длинная белая колонка с контентом. Подходит почти всем страницам.
- Широкий материк. Нужен для страниц, где много, например, фотографий или видео. Рука не поднималась ужимать яркий медиаконтент в узкую колонку материка, и мы разрешили быть ему широким.
- Острова. Несколько материков, которые живут на серой странице. Острова появляются в дизайне «ленточных» страниц: новостей, стены пользователя, закладок, лайков.
- Hero. А ещё у нас бывают страницы про одну сущность: автора клипов, маску, эффект, флешмоб. Или настроечные экраны, в которых не так много контента, но хочется акцентировать внимание на заголовке. Для этого мы просто растянули шапку с градиентом на всю ширину.
Основные каркасы
Совет✨: новый Auto Layout 2.0 от Figma заметно ускоряет адаптацию экранов для iPad. Особенно настройка фиксированной ширины у родительского контейнера и Fill у всех внутренних фреймов.
Модальные окна. Для модальных окон мы взяли системные размеры Form Sheet и Page Sheet и придерживались их. Модальная карточка приобрела ширину Form Sheet, а модальная страница обзавелась двумя ширинами: 416 и 640 точек.
Частным случаем модального окна были выезжающие из шапки панели. Например, в новостной ленте можно переключиться между разными типами контента. В мобильной версии меню выезжало просто из шапки. А на iPad мы ограничили меню по ширине в 416 точек, скруглили уголки и навесили разделитель. Получился новый компонент — «галстук».
Конечно, его можно было сделать в виде контекстного меню. Но это потребовало бы больше разработки, чем просто задать максимальную ширину и скруглить углы.
Источник: vc.ru