- Основные разделы
- Адаптивность. каркас и глобальные компоненты
- Адаптивность. проектирование навигации
- Благодарности
- Бонусы
- вконтакте — общение и музыка
- Вышло обновлённое приложение vk для ipad — с нормальным масштабированием и поддержкой внешних клавиатур — мобайл на dtf
- Лучшие программы для управления контактами на iphone и ipad | всё об ipad
- Можно ли управлять контактами с помощью ipad?
- Новый процесс проектирования
- Предыстория
- Редактирование контактов на ipad
- Руководство пользователя ipad
- Универсальное приложение
- Заключение
Основные разделы
Применив каркасы и принципы, мы получили дизайн корневых экранов на iPad:
- лента — типичные острова;
- сервисы — своеобразные, со своей вёрсткой;
- мессенджер — с представлением Master & Detail;
- клипы — на полный экран, но с сохранением пропорций видео.
А ещё на iPad в таббаре много свободного места, и мы добавили в меню музыку и уведомления. Теперь приложение ВКонтакте на iPad даже чуть более функциональное, чем на iPhone.
Адаптивность. каркас и глобальные компоненты
Чтобы ускорить дизайн и разработку, мы использовали системный подход: выделили структуры экранов (каркасы) и большие компоненты, а затем описали для них правила адаптации к iPad. Дизайнеры придерживались правил — и разработчики один раз заводили, например, снекбар, и он правильно работал во всех случаях.
Гайды. Глобальные правила и примеры компонентов мы вынесли на отдельную страницу в Figma — Guide. Дизайнеры брали оттуда готовые объекты, а разработчики ориентировались на примеры и реализовывали их в коде.
Пример гайда по модальному окну для историй и мини-приложений
Каркасы экранов. Мы вывели несколько типовых структур страниц, которые чаще всего встречались в приложении.
- Материк. Залитый фон, одна длинная белая колонка с контентом. Подходит почти всем страницам.
- Широкий материк. Нужен для страниц, где много, например, фотографий или видео. Рука не поднималась ужимать яркий медиаконтент в узкую колонку материка, и мы разрешили быть ему широким.
- Острова. Несколько материков, которые живут на серой странице. Острова появляются в дизайне «ленточных» страниц: новостей, стены пользователя, закладок, лайков.
- Hero. А ещё у нас бывают страницы про одну сущность: автора клипов, маску, эффект, флешмоб. Или настроечные экраны, в которых не так много контента, но хочется акцентировать внимание на заголовке. Для этого мы просто растянули шапку с градиентом на всю ширину.
Основные каркасы
Совет✨: новый Auto Layout 2.0 от Figma заметно ускоряет адаптацию экранов для iPad. Особенно настройка фиксированной ширины у родительского контейнера и Fill у всех внутренних фреймов.
Модальные окна. Для модальных окон мы взяли системные размеры Form Sheet и Page Sheet и придерживались их. Модальная карточка приобрела ширину Form Sheet, а модальная страница обзавелась двумя ширинами: 416 и 640 точек.
Частным случаем модального окна были выезжающие из шапки панели. Например, в новостной ленте можно переключиться между разными типами контента. В мобильной версии меню выезжало просто из шапки. А на iPad мы ограничили меню по ширине в 416 точек, скруглили уголки и навесили разделитель. Получился новый компонент — «галстук».
Конечно, его можно было сделать в виде контекстного меню. Но это потребовало бы больше разработки, чем просто задать максимальную ширину и скруглить углы.
Пример «галстука»
Адаптивность. проектирование навигации
Самое верхнеуровневое проектирование любого продукта — это информационная архитектура и навигация. Структуру мы оставляли такой же, как на iPhone, а вот над навигацией пришлось подумать.
Мы постоянно работаем над ней в приложении. Тестировали разные варианты, и один был с левым меню, в котором сконцентрированы наиболее часто используемые разделы. Его мы и решили взять за основу версии для iPad.
Новый дизайн ленты новостей и открытое боковое меню
Сначала разбили весь экран на две колонки: сайдбар с навигацией слева и основной контент справа. Идея навигации была в том, чтобы взять боковое меню из мобильной версии и добавить пункты таббара в самый верх. У пользователя остаётся в быстром доступе вся основная навигация, а ещё можно быстро переходить к второстепенным пунктам меню. Так рекомендует адаптировать приложения и Apple.
Но мы решили на всякий случай попробовать разные концепты — чтобы было из чего выбирать. Набросали три варианта навигации в приложении. Первый был предпочтительным: в ландшафтной ориентации всегда доступна навигация, достаточно площади для контента, а в портретной меню компактно схлопывается.
Затем мы замиксовали подходы и сделали в ландшафте всегда раскрытую навигацию, а в портрете выезжающее меню, как на iPhone (по умолчанию оно скрыто, чтобы не съедать ширину).
Финальный вариант был самым простым: таббар остаётся, а боковое меню открывается из шапки экрана.
Обсудили с разработчиками возможности и остановились на третьем варианте. Адаптация интерфейса к планшету и так довольно непростая и порождает много багов — а мы не хотели ещё больше усложнять коллегам работу. К тому же сайдбар замедлил бы вёрстку экрана мессенджера, где мы планировали использовать Split View. Но мы всё же держим в уме первый вариант навигации с сайдбаром — на будущее.
Благодарности
Над приложением работала огромная команда. Спасибо менеджерам, разработчикам, тестировщикам, отделу маркетинга и исследований и всем-всем-всем.
Бонусы
Советы дизайнерам, которые будут проектировать универсальное приложение
1.Подождите 5 лет (зачёркнуто).
2. Найдите iPad и воспользуйтесь приложениями. И системными, и сторонними. Так будет легче найти удачные приёмы и понять общие принципы.
3. Подумайте о контексте и внимании. iPad — что-то среднее между ноутбуком и телефоном. Он не такой мобильный, поэтому пользователи могут фокусироваться на нескольких частях экрана.
4. Выделите сетку и основные компоненты в отдельные правила, чтобы упростить разработку. Чем больше автоматических адаптаций, тем проще.
5. Учитывайте рекомендации Apple. Посмотрите лекцию Designed for iPad и попробуйте применить советы из неё.
6. Постройте эффективный процесс. Если у вас в команде несколько дизайнеров, распределите зоны ответственности. А ещё такая задача — самый подходящий момент, чтобы синхронизироваться с разработчиками после каждого макета, если вы ещё так не делаете.
Макеты для iPadТеория — это круто, но лучше закреплять всё на практике и примерах. Поэтому мы подготовили публичный Figma-файл в комьюнити @vk. Там больше 200 экранов!
Заглядывайте в макет, дублируйте его к себе и экспериментируйте! Прикольные концепты можно закинуть в VK Designers — лучшие опубликуем в сообществе. Не стесняйтесь <3
вконтакте — общение и музыка
ВКонтакте объединяет десятки миллионов людей, предлагая безграничные возможности для общения, знакомств, развлечений, бизнеса и обмена новостями из любой точки мира. Прямо в приложении вы можете вызывать такси, заказывать доставку еды, следить за своим здоровьем, искать работу, записываться в салоны красоты и многое другое — во вкладке «Сервисы».
Оставайтесь на связи с близкими: в мессенджере ВКонтакте вы можете общаться в чатах и диалогах не только с друзьями, но и с людьми из вашей телефонной книги. В групповых аудио- и видеозвонках вы сможете объединить до 128 человек — бесплатно и без ограничений по времени. Моментально переводите деньги друзьям или другим людям прямо в переписке: так легко разделить счёт в кафе или скинуться на подарок.
Проводите свой досуг приятно и полезно. Слушайте любимую музыку и легко находите новые треки благодаря улучшенным рекомендациям. Узнавайте больше из подкастов и размещайте их сами. Смотрите и создавайте клипы ВКонтакте — короткие вертикальные видео на самые разные темы, а ещё следите за онлайн-трансляциями, делитесь фотографиями, играйте в игры, вступайте в сообщества, находите самые интересные новости об увлечениях в тематических лентах. Также вы можете соревноваться с близкими в количестве пройденных шагов — они подсчитываются благодаря синхронизации с Apple Health. Отправляйтесь на долгие прогулки, чтобы возглавить рейтинг!
Оформите подписку VK Combo: с ней вы сможете слушать музыку без рекламы и сколько угодно в фоне, а ещё получите скидки на Еду и Такси ВКонтакте, в приложениях Delivery Club и «Ситимобил», в «Макдоналдс» и «Самокате». Подписка стоит 149 рублей в месяц, первые 3 месяца — в подарок.
Оплата снимется с вашей учётной записи в iTunes, когда вы подтвердите покупку. Если это случится до окончания бесплатного пробного периода, то его оставшаяся часть будет аннулирована. Если вы не отключили автопродление за 24 часа до конца оплаченного периода, то подписка продлится, а с вашего аккаунта будет снята оплата за новый период. Вы можете управлять подпиской и отключить автопродление в настройках учётной записи iTunes.
Условия использования: vk.com/terms
Политика конфиденциальности: vk.com/privacy
Вышло обновлённое приложение vk для ipad — с нормальным масштабированием и поддержкой внешних клавиатур — мобайл на dtf
{
«author_name»: «Igor Konkov»,
«author_type»: «self»,
«tags»: [«u043du043eu0432u043eu0441u0442u0438″,»vk»,»apple»],
«comments»: 66,
«likes»: 21,
«favorites»: 8,
«is_advertisement»: false,
«subsite_label»: «mobile»,
«id»: 689527,
«is_wide»: true,
«is_ugc»: true,
«date»: «Thu, 01 Apr 2021 10:39:18 0300»,
«is_special»: false }
Лучшие программы для управления контактами на iphone и ipad | всё об ipad
Функционала стандартного приложения “Контакты” многим пользователям iOS не хватает. Мне кажется, Apple в принципе недостаточно развивает стандартные приложения, занимаясь в обновлениях различными свистелками и перделками вместо внедрения действительно полезных штук. На помощь, как обычно, приходят сторонние приложения.
Первоочередная задача – обезопасить свои контакты от потери. Для этого нужны программы, которые умеют делать резервные копии контактов и восстанавливать их в случае необходимости. Я нашёл две программы, которые легко справляются с поставленной задачей.
Easy Backup – Резервное копирование контактов для учётных записей iCloud, Google, Gmail and Yahoo
Easy Backup осуществляет бэкап в один клик. Его можно отослать на почту или залить в облако. Программа умеет делать не только бэкап, но и находить и объединять дубликаты. Есть даже автокопирование, но за него нужно платить 10 долларов, что явно много для тех у кого счёт контактов не идёт на тысячи.
Также понравилась функция “Дни рождения”. Если внести все дни рождения в Контакты, то вы никогда не забудете про них.
Скачать бесплатно (есть встроенные покупки)
Pro-версия
My Contacts Backup – простая программа, которая делает резервную копию в формате vCard или таблицы CSV, которую понимает Excel. Затем контакты можно отослать себе на почту. Если с вашими контактами что-то случится, то вам достаточно будет войти на почту и открыть вложение. Контакты импортируются назад в телефон или планшет.
Бесплатная версия позволяет бэкапить до 500 контактов. Если их больше, то нужна Pro версия.
Connect – Contact Manager for iPhone
Из названия приложения видно, что оно заточено под iPhone – версии для iPad нет. В США, судя по рейтингу американского App Store, программа очень популярна. У нас – пока нет (ни одного отзыва и оценки), хотя программа очень любопытная.
Connect позволяет удобно и быстро сгруппировать контакты (весь дизайн построен на свайпах). Помогает делать групповые почтовые рассылки и iMessage ( смс). Если у контакта внесены сервисы мгновенного обмена сообщениями (например, Skype), то Connect позволяет сразу позвонить/написать в них (стандартное приложение Skype не поддерживает).
Очень приличная программа по организации и управлению контактами. При этом Connect полностью бесплатен. Рекомендую.
Скачать Connect – Contact Manager for iPhone
В этом мини-списке не хватает многих программ по двум причинам:
Если знаете ещё стоящие приложения, которыми вы пользуетесь для работы с Контактами – пишите комментарии! 🙂
Можно ли управлять контактами с помощью ipad?
Хотя можно добавлять контакты прямо в iPad (дальше я расскажу, как это делается), гораздо легче добавлять, редактировать, группировать и удалять их на компьютере, а затем синхронизировать с iPad.
Создание групп контактов
А нужно ли синхронизировать все контакты? Например, если вы используете iPad только для связи с друзьями и родными, зачем захламлять его рабочими телефонами и адресами?
Чтобы определить, какие контакты копировать в iPad, можно создать группы контактов и синхронизировать только нужные. Это делается так:
«Адресная книга» (Address Book) на Mac. Выберите в меню «Файл» пункт «Новая группа» (File New Group), наберите название группы и нажмите Return. Затем заполните группу, перетащив…
§
По умолчанию приложение «Контакты» отображает контакты, отсортированные по фамилии (или названию компании), а затем по имени (чтобы решить проблему совпадения фамилий). В большинстве случаев это оправданно, но вы можете предпочесть неформальный подход и сортировать контакты по имени, а затем по фамилии.
Для этого сделайте следующее.
1. Вернитесь на Домашний экран iPad и нажмите «Настройки» (Settings). Появится окно настроек.
2. Нажмите «МаіІ, Контакты, Календари». Появится окно почты, контактов и календарей.
3. Прокрутите страницу до раздела «Контакты».
4. Нажмите «Сортировка» (Sort Order), чтобы увидеть опции сортировки.
5. Нажмите «Имя, Фамилия» (First, Last). Теперь сортировка контактов будет производиться по имени.
Новый процесс проектирования
Чтобы не затягивать запуски и не разрабатывать при каждом обновлении варианты под разные устройства, мы решили сделать приложение для iPhone и iPad универсальным. Это позволяет за один подход адаптировать его почти полностью к разным размерам экранов. А в будущих фичах адаптивность заведётся почти самостоятельно.
И мы попробовали несколько идей.
Один из первых смелых концептов. Две колонки, новая шапка, плеер внутри таббара. Одним словом — шик
Макет смелый и эффективно использует пространство экрана, но нам не подошёл. Он подразумевает дополнительную разработку под iPad — а мы как раз хотели от неё отказаться, чтобы не замедлять запуск новых фич. Поэтому потребовались ограничения для дизайнерских решений.
Поэтому что мы сделали дальше? Взяли приложение для iPhone и растянули.
Более спокойный концепт
Эта идея сработала. С ней разработчикам не приходится заново верстать каждый экран — достаточно настроить правила адаптации ключевых экранов к широкому размеру.
А чем отличается iPad от ноутбука или телефона, кроме размера экрана?
В первую очередь контекстом использования. Сидеть за ноутбуком удобно, когда ты не находишься в движении и есть стол, где можно расположить устройство. В твоём распоряжении клавиатура для ввода, а ещё тачпад или мышь. В такой комфортной рабочей обстановке, за компьютером, пользователи могут распространять фокус внимания на несколько окон и состояний. Сами приложения могут быть сложнее, если это уместно.
Мобильный телефон — маленький. Нет дополнительных устройств ввода, только пальцы. Благодаря этим и другим ограничениям получилось компактное устройство, которым удобно пользоваться на ходу, в автобусе, тренажёрном зале. Но в таких условиях люди не могут охватить вниманием сразу несколько окон. Поэтому мобильные приложения открываются на полный экран, а каждая страница заточена под конкретную задачу.
Планшет — что-то среднее между ноутбуком и телефоном. По умолчанию без клавиатуры и мышки, но с большим экраном. Планшетом можно пользоваться на ходу, но уже не так удобно. При этом дизайнеры ожидают, что владельцы устройств справятся с несколькими фокусами внимания или приложениями. Поэтому появились разделения на колонки, Split View, Slide Over и другие возможности.
При проектировании навигации в новом приложении мы учли основные особенности условий, в которых используется iPad. Пока не поддерживаем технологии многозадачности iPadOS в полную силу, но займёмся этим в будущем.
Сколько фокусов внимания может сохранять пользователь на разных девайсах
После проработки основных концептов и обсуждения с разработчиками мы приступили к важному этапу — проектированию системы адаптации.
Предыстория
Последние несколько лет у нас было два приложения в App Store: ВКонтакте (для iPhone) и «ВКонтакте для iPad».
Скриншоты отдельного приложения для iPad
Редактирование контактов на ipad
Можно выполнить описанные ниже действия.
Руководство пользователя ipad
Добро пожаловать!
Поддерживаемые модели
iPad Pro (12,9 дюйма, 5-го поколения)
iPad Pro (12,9 дюйма, 4-го поколения)
iPad Pro (12,9 дюйма, 3-го поколения)
iPad Pro (11 дюймов, 3-го поколения)
iPad Pro (11 дюймов, 2-го поколения)
iPad Pro (11 дюймов, 1-го поколения)
iPad Pro (12,9 дюйма, 1-го и 2-го поколения)
iPad Pro (10,5 дюйма)
iPad Pro (9,7 дюйма)
iPad Air (4-го поколения)
iPad Air (3-го поколения)
iPad Air 2
iPad (8-го поколения)
iPad (7-го поколения)
iPad (6-го поколения)
iPad (5-го поколения)
iPad mini (5-го поколения)
iPad mini 4
Что нового в iPadOS 14
Быстрые команды
Акции
Советы
Copyright
Универсальное приложение
Подготовка
Немного расскажу про инструменты и план работы. С прошлого года мы работаем в Figma, и пришло время по максимуму использовать главную функцию редактора — мультиплеер.
Мы собрали почти всех дизайнеров и распределились по командам. Я стартовал сразу и готовил систему, а другие продуктовые дизайнеры подхватывали новые описанные компоненты и утаскивали в свои макеты. Каждый из нас отвечал за свой продукт: музыку, видео, мессенджер, клипы, сервисы, ленту новостей, истории, постинг, звонки, стикеры и подарки, сообщества, маркет, инфраструктуру.
Мы планировали использовать нативные iOS-компоненты. Поэтому для дизайна под iPad потребовались хорошие знания по работе модалок и навигации. Ещё нам пригодилось приложение Adaptivity (A). Оно платное, но помогло разобраться, какие стандартные размеры у модальных окон и таблиц и как они меняются при разных ориентациях устройства.
На этом мы завершили подготовку.
Заключение
Мы избавились от старого подхода с двумя приложениями для iPhone и iPad — и сделали одно, универсальное. Больше нет причин откладывать поддержку планшета — все основные компоненты и так адаптированы под большой экран, а отдельные легко укладываются в описанные каркасы.
Ещё один плюс — тёмная тема пришла и на iPad 🌚 Планшетом стало комфортно пользоваться ночью: экран не слепит и ничего не отвлекает от контента.
Fun fact: так как мы сделали универсальное приложение, пути назад нет. Без поддержки iPad в новых версиях Apple будет отклонять релизы, поэтому версия для планшета теперь всегда под контролем 🤠
Это только начало! Не все идеи вошли в итоговый интерфейс. Мы не хотели откладывать релиз только ради концептуальных и смелых решений — пользователи ждут. Но в будущем планируем использовать все возможности iPad и сделать важные функции ещё удобнее. Речь о Split View, более удобном музыкальном плеере, поддержке технологии Picture in Picture, контекстных меню и многом другом. А ещё в глубинах ВКонтакте остались экраны, до которых мы ещё не добрались. О них тоже позаботимся и адаптируем.
