Дизайн мобильных приложений *

Привет, Хабр! Первая запись в корпоративном блоге не претендует на некую энциклопедическую значимость, поэтому просим не судить строго, это всего лишь знакомство с компанией и разрабатываемым продуктом.

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

Официальное руководство от Apple по разработке интерфейса для Apple Watch — теперь и на русском! Технические переводчики Alconost потрудились на славу. Правда, пока этот материал верстался, Apple выкатила новую версию гайдлайна, так что следите за обновлениями и в нашем блоге.

В настоящее время департамент мобильной разработки Rambler&Co активно расширяется, в том числе и в плане iOS-разработчиков и UX дизайнеров. Большое количество людей и проектов, ведущихся ими, усложняет и без того непростой процесс передачи дизайна разработчикам. Всем, так или иначе связанным с мобильной разработкой, знакомы проблемы и разногласия, возникающие на стыке интересов программиста и дизайнера — начиная тем, в каких единицах измерять расстояния, и заканчивая тем, кто должен нарезать элементы экранов в различных разрешениях. Чтобы окончательно решить проблему в рамках нашей компании, мы решили подготовить подробные гайдлайны по этому взаимодействию.

Wireframesketcher — предназначен для прототипирования графических интерфейсов.
В нем можно создавать интерактивные прототипы веб-сайтов и приложений как для настольных компьютеров так и для смартфонов, а также других мобильных устройств.
Авторы позиционируют Wireframesketcher как инструмент для профессионалов и у них на это есть все основания. Приложение разработано на основе Eclipse IDE либо может быть установлено в качестве плагина к Eclipse, а это обеспечивает кроссплатформенность приложения (Linux/Mac/Windows) и дает возможность использовать большой арсенал разработанных для этой IDE инструментов, в том числе поддержку различных систем контроля версий и других плагинов. Что касается контроля версий, то его легко осуществлять, так как для хранения данных проекта используются текстовые XML файлы. Также для Wireframesketcher имеется достаточно обширная библиотека макетов, шаблонов, виджетов и иконок.

В этой статье я хочу показать пример создания прототипа простого веб-сайта в Wireframesketcher. В данном случае под прототипом будет пониматься совокупность нескольких слинкованных интерактивных т.н. проволочных макетов страниц веб-сайта (wireframes). В дальнейшем для простоты я буду использовать «оригинальное» название «wireframe» сокращенное до «фрейм» именно в этом контексте.

Решение, изложенное в статье, расписано для пользователей OSX. Но его достаточно просто можно адаптировать и под другие популярные операционные системы.

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

• иконка для отображения на вкладках браузеров;
• иконка веб-приложения, отображаемая в safari mobile;
• иконка мобильного приложения, отображаемая на главном экране в ios;
• большая иконка для app store;
• маленька иконка для app store;
• иконка для поиска в spotlight.

А теперь внимание: практически для каждого пункта из этого списка есть еще и свои собственные размеры — в зависимости от типа устройства и версии iOS. Подробная спецификация иконок для веб-приложения и приложения для ios находится здесь.

Пятая версия Android была выпущена почти полгода назад. Несмотря на это, большинство приложений в маркете до сих пор упорствуют в стиле Holo. То ли новый Material-стиль пока не по зубам среднему разработчику, то ли Android L еще не успел прочно войти в обыденность.

Как бы там ни было, новая парадигма дизайна активно пропагандируется «корпорацией добра», да и выглядит достаточно неплохо, несмотря на некоторую непоследовательность. И все больше появляется добрых волшебников, помогающих нам, простым разработчикам, оставаться «в струе» изменчивого мира мобильного UI.

Если вы, как я недавно, твердо решили обернуть своё, давно не обновлявшееся, приложение в новую «шкурку», этот обзор инструментов и библиотек может сэкономить вам N часов времени.

Организация Глобальной инициативы в области инклюзивных ИКТ (G3ict) в сотрудничестве с Adobe Systems Incorporated выпустила белую книгу по вопросам разработки доступных интерфейсов для мобильных приложений с помощью фреймворка PhoneGap, также известного как Apache Callback или Apache Cordova. Данный десятистраничный документ описывает текущее состояние доступности мобильных приложений, преимущества, присущие подходу PhoneGap в отношении создания доступных кросс-платформенных приложений этой категории, а также мотивы Adobe в отношении создания специального плагина, который сокращает разрыв между технологиями web-доступности и нативными accessibility API мобильных платформ.

Напомним, что представленный около года назад PhoneGap Mobile Accessibility Plugin, передаёт приложениям такую информацию, как состояние настроек увеличения шрифта и прочего. В результате, PhoneGap-приложения получают более тесное взаимодействие с функциональностью доступности в той или иной операционной системе, сопоставимую с нативными приложениями.

Так как Sketch был создан специально для работы над мобильными и веб-интерфейсами, неудивительно что он стал одним из самых быстрых и гибких инструментов для прототипирования. Эти 10 советов сделают его еще более мощным средством.

Идеей экрана, заполненного иконками для запуска приложений, смартфоны обязаны «классическому» десктопному рабочему столу. Но несмотря на большой путь, пройденный смартфонами за последние годы, концепция иконок, являющихся ссылками на некие независимые приложения не претерпела каких-либо изменений. Может быть, пришло время пересмотреть этот подход?

Universal Widget позволяет размещать на рабочем столе Android информацию о любой из ваших систем, описанную в формате JSON. Например, статистику посещений вашего сайта, информацию о заказах в интернет-магазине, загрузку процессора на сервере и т.д.



Три простых шага для размещения информации на рабочем столе:

1) Создайте скрипт – провайдер данных в формате JSON
2) Установите Universal Widget
3) В настройках виджета задайте адрес скрипта — провайдера данных, а также интервал обновления

Недавно в одном издании я увидел крайней любопытную статистику: оказывается, на каждого россиянина приходится в среднем чуть больше 20 м² жилья, тогда как в Германии, несмотря на большую плотность населения, этот показатель в 4 раза, а в США — в 6 с лишним раз выше. Неудивительно, что квартирный вопрос стоит всё также остро, как и во времена Булгакова. Но новое время приносит новые решения — стартапов, предлагающих помощь с арендой и покупкой жилья на рынке уже довольно много. Один из них — проект компании Fast Lane Ventures сайт DOMGEO.RU, бесплатный поисковик жилой и коммерческой недвижимости по Москве.

Но сегодня мы поговорим не о самом сайте, а о мобильном приложении DOMGEO для платформ iOS и Android. Будучи пользователем аппаратов Sony уже долгое время, я протестировал именно версию для Andorid.