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

От переводчика
Principle — приложение для Mac OS, которое позволяет в два счета создать анимацию элементов пользовательского интерфейса и сгенерировать его интерактивный прототип. Будь то многоэкранное приложение или просто придуманный вами контрол, так просто и быстро реализовать это раньше не позволял ни один сервис. Бенжамин Бергер — бета-тестер ранней версии Principle, описал свой опыт в статье на Medium, где рассказал о первых впечатлениях и привел пару наглядных примеров использования.

Недавно я писала о том, как готовить графику для Android, какие сложности возникают во время нарезки и как сделать так, чтобы приложение на выходе полностью соответствовало дизайну. Теперь я делюсь опытом и по iOS. В e-Legion мы работаем с пакетом Adobe и для нарезки графики используем Illurstator.

Проектирование продукта или сервиса — очень ответственный процесс. В области дизайна это направление вылилось в целую индустрию UI/UX-специалистов и студий, которые разрабатывают специальные методологии и задают структуру творческому процессу поиска нужного дизайна.

Этот подход позволяет обосновывать принятие тех или иных дизайн-решений на основе данных — количество переходов для выполнения задачи, отзывы с полевого тестирования и так далее. Аналогичного мнения придерживаемся и мы при разработке нашего IaaS-провайдера.

Здравствуйте, Хабр!

Не успели мы сдать в верстку отличную книгу с интригующим названием "Дизайн. Книга для недизайнеров" (ждите в октябре), как нас увлекла еще более своеобразная дизайнерская работа, автор которой позволил себе усомниться в целесообразности дальнейшего умножения графических интерфейсов и предлагает ликвидировать их как класс. Мы решили перевести статью с выдержкой из этой книги, которая как минимум позабавит вас перед выходными. Если же вы — человек с художественной и творческой жилкой, когда-либо захлопывавший ключи в автомобиле, то просим не только ознакомиться со статьей, но и помочь нам определиться с востребованностью книги.

23 мая в Москве прошел Dribbble Meetup 2015. На этой неформальной конференции для дизайнеров выступили полтора десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Команда Zeplin, Игорь Мустаев (Лавка букв), Анатолий Громов (Fjord), Данил Криворучко (Charlex), Олег Турбаба (SFÇD), Павел Шумаков (Вконтакте), Елена Лазутина, Алексей Рыбин (Great Simple Studio), Андрей Кармацкий (Яндекс), Антон Карташов (Иннова), Павел Скрипкин (Mail.Ru Group) и Евгений Беляев (Авито), Дмитрий Новиков (MacPaw), Дмитрий Чута (Chapps), Олег Андрианов (Одноклассники). Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.

О дизайне мобильных приложений написано уже много всего. Тем не менее в этой сфере есть огромное количество нюансов. Некоторые известны не всем, другие быстро забываются. В этом посте мы постараемся описать несколько приемов работы с дизайном приложения, которые можно назвать эффективными и проверенными.

В идеале приложение для мобильного устройства должно работать со скоростью мысли. Более того, интерфейс приложения должен быть понятен даже новичку.

Отличный дизайн невидим

Airbnb, Disney World, Uber и Nest. Эти все феноменальные продукты, общая стоимость которых превышает $135 миллиардов. Но не только их сервисы достигли отличных показателей, их взаимодействия с пользователем настолько хорошо продумано и выполнено, что оставляет незамеченной их стратегию. Другими словами, «пользовательский опыт» остался в тени.

Хороший дизайнер может организовать хаос. Опытный дизайнер может этот хаос устранить.

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июнь 2015. Вы можете получать свежие обзоры по почте.

Где я нахожусь, куда мне идти, кажется я заблудился…

На следующий день после прилета в Нью-Йорк я договорился встретиться с другом в Центральном парке у Conservatory Garden Center Fountain. Огромный парк с бесконечными тропинками, лужайками, мостами, прудами, одна большая экосистема внутри мегаполиса из металла и стекла. Чтобы быстрее добраться до места, мне посоветовали поставить апп — официальное приложение Central Park.

Houston we have a problem

Друга я, конечно, нашел, но приложение захотелось тут же удалить. В этот момент и родилась идея сделать свой концепт, обьясняя логику и улучшения. О том, чем плох апп в нынешней версии и как его сделать удобнее — под хабракатом.

Во время нарезки графики под приложения часто возникает множество сложностей: от разрешения устройств и проблемы с сетками и рекомендациями Google до непосредственно передачи приложения разработчику. За 2 года я работала над дизайном более 10 приложений, научилась находить решения самых разных проблем и делать так, чтобы в конечном итоге приложение выглядело так же, как и в дизайне.
Об этом и пойдет речь под катом.

Многие корпорации уделяют особое внимание мобильным пользователям – действительно, доля тех, кто практически не выпускает смартфоны из рук, непрерывно растёт. У обладателей умных мобильных устройств за время использования девайсов формируются определённые привычки, связанные с особенностями организации новостных лент в социальных сетях. Свои ожидания они переносят и на другие информационные приложения, в частности, новостные ленты: пользователям нужен актуальный контент, релевантный их интересам, комфортный режим просмотра и минимальное время ознакомления с новостями.

Команда Top Story выпустила мобильное приложение для чтения новостей и создания подписок, которое учитывает интересы хозяина смартфона. Top Story знает, насколько важно, чтобы приложение было удобным, приятным и отзывчивым, поэтому в еженедельных релизах обязательно присутствуют доработки интерфейса. Мы уделяем значительное внимание каждому элементу и их работе в совокупности. Команда TopStory готова вам рассказать, как шаг за шагом мы проходили путь к удобному и интуитивно понятному интерфейсу.

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2015.

Компания Adobe выпустила обновление для своего приложения Photoshop, содержащее массу полезностей и долгожданных улучшений для пользователей, особенно эти улучшения порадуют разработчиков макетов сайтов и интерфейсов приложений. В статье-переводе содержится краткий обзор топовых функций и ссылки на обучающие и справочные материалы, комментарии переводчика.

Каждый раз, как кто-то узнает, что я дальтоник, я отвечаю на один и тот же вопрос: «Какой это цвет?». В 95% случаев я отвечу правильно, и поэтому мне задают еще один вопрос: «Подожди, значит, ты понимаешь, что это [вставить название цвета]? Так что ты видишь?». И тут начинается процесс объяснения того, как работает дальтонизм, и как он на меня влияет.

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

Вместо вступления

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

В один из таких дней я наткнулся на заметку «Конкурс для дизайнеров от Почты Mail.Ru». Обычно я не принимаю участия в подобных конкурсах, но здесь совсем другая история. Задание мне показалось нестандартным и от того очень интересным. Меня это зацепило с профессиональной точки зрения. Смогу ли я решить поставленную задачу или на худой конец разработать и предложить концепты, которые получат применение в готовом приложении?

С этими мыслями я приступил к работе.

От переводчика

Привет, %юзернейм%!

Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

Материал расчитан на новичков, и немного рассказывает о двух вещах:

1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

Мне этот материал интересен с той точки зрения, что я был бы очень благодарен, если бы в самом начале моей работы дизайнером интерфейсов мне кто-нибудь рассказал о пиксельной сетке. Поэтому, я надеюсь, что облегчу кому-то жизнь, публикуя этот перевод.

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание

• Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
• Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;

Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator

От переводчика

Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

В заключение вступительной части хочу попросить не обращать внимания на то, что я новичок в дизайне, и этой мой первый в жизни перевод. Отнеситесь критично, тема серьёзная. Призываю делиться своими соображениями и опытом в комментариях.

Краткое содержание

Эта часть для тех, кому лень вникать в аспекты, но хочется побыстрее получить инструкции.
Либо для тех, кто уже читал полную статью, но теперь хочет быстро без лишних абзацев, на другом рабочем месте применить все необходимые настройки.

Настройки Abobe Illustrator

1. Edit > Preferences > Units > General → Pixels
   Edit > Preferences > Units > Stroke → Pixels
2. Edit > Preferences > Guides & Grid > Gridline every → 1px
   Edit > Preferences > Guides & Grid > Subdivisions → 1px
3. Edit > Preferences > General > Keyboard Increment → 1px
4. View > Snap to Grid
   View > Snap to Point
5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator

На сегодняшний день проблема поиска и систематизации полезного контента в электронной переписке актуальна для всех почтовых приложений. В почте содержится огромное количество информации — фотографии, документы, счета, подтверждения бронирования, подтверждения о заказах в интернет-магазинах и многое другое. Но искать их в общем списке писем не слишком удобно. Поэтому почтовые сервисы предлагают различные решения, призванные упростить работу с такой информацией — например, поиск и сортировку по каким-то критериям, треды, сводный раздел со всеми вложениями из писем. Однако эти ухищрения не позволяют полностью решить стоящую проблему.

Почта Mail.Ru запускает конкурс на дизайн концепции мобильного интерфейса. Задача конкурса — предложить подход для удобной и эффективной работы с информацией, накопившейся в электронной почте.

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

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