- Что такое гайдлайны мобильных приложений и зачем они нужны?
- Что это и зачем это вообще нужно?
- Google Material Design System
- Apple Human Interface Guidelines
- Почему нужно использовать гайды?
- Полезные ссылки
- Гайдлайны мобильных приложений
- Apple
- Windows Phone
- Apple
- Windows Phone
- Гайдлайны мобильных платформ ios android
- Что пишут в блогах
- Онлайн-тренинги
- Что пишут в блогах (EN)
- Blogposts:
- Разделы портала
- Про инструменты
Что такое гайдлайны мобильных приложений и зачем они нужны?
Jun 14, 2018 · 4 min read
Когда речь заходит о дизайне мобильного приложения, первое, что на ум приходит любому дизайнеру, понимающего специфику — это гайдлайны.
Что это и зачем это вообще нужно?
Основная задача мобильного приложения состоит в том, чтобы помочь решить проблему пользователя как можно быстрее. Здесь речь идет о секундах, а иногда и о долях секунд.
Представьте, если бы каждое мобильное приложение имело б ы свой уникальный дизайн и навигацию. Тогда пользователю каждый раз приходилось бы тратить время на то, чтобы разобраться в интерфейсе, понять, где кнопка, которую можно нажать, а где просто текст в рамке. Тогда бы на решение проблемы уходило в разы больше времени и счет шел бы уже не в секундах, а в минутах. Это полностью идет вразрез принципам мобильного приложения.
Именно для ускорения процесса решения проблем пользователя в приложении и были придуманы гайдлайны.
Гайдлайны (Guidelines) — набор рекомендаций, правил, принципов от создателей платформы, операционной системы, благодаря которым приложения под эти платформы и ОС от разных разработчиков выглядят единообразно. Гайдлайны мобильных приложений описывают принципы навигации и взаимодействия, элементы интерфейса и их стиль, используемую типографику и иконографию, цветовые палитры и многое другое.
Кроме того, гайдлайны способны сократить время и стоимость разработки мобильного приложения, так как всё то, что описано в гайдах, как правило, уже реализовано в виде готового элемента в коде и разработчику не нужно изобретать велосипед с нуля.
На данный момент существуют два гайда под две небезызвестные платформы:
Google Material Design System
Google Material Design был представлен вместе с Android 5.0 в июне 2014 года, а с мая этого года стал полноценной дизайн-системой и уже может быть использован и на других платформах (например, смарт-тв, десктоп- или даже веб-приложение, iOS-устройство). Изначально был направлен только на ОС от Google: Android Wear, Android TV, Android Auto.
Основными идеями Material Design являются принцип глубины интерфейса, его интерактивность (отзывчивость) и движение (анимация изменения состояния).
Здесь каждый элемент навигации находится на определенной высоте относительно другого элемента и реагирует на нажатия пользователя. Например, боковое меню находится над панелью навигации, а карточка из списка под ней. Кнопка как бы опускается вниз при нажатии на неё, меняет за собой отбрасываемую тень и заливается цветом с эффектом чернил.
Material Design в качестве прообраза для всей системы использует бумагу и чернила на ней. Любой интерфейс построенный по канонам Material можно представить в виде отдельных листков бумаги, которые наслаиваются друг на друге и отбрасывают тень.
В Material Design System есть все. Здесь есть все системные иконки, UI-киты, шрифты, цветовые палитры, и даже плагин для Sketch для генерации кастомного UI. И все это можно скачать прям тут. Здесь вы найдете все размеры для каждого даже самого незначительного элемента интерфейса. Найдете кучу примеров, как делать можно, а как делать нельзя. Увидите кучу анимированных примеров. Найдете инфу про типографику, где и какой шрифт нужно использовать, с каким отступом, интерлиньяжем и кеглем. Везде по всему гайду есть ссылки на нужные разделы и если вы не знаете чего-то, то об этом сразу будет внизу сноска.
Словом, Google сделали самый лучший гайд (а сейчас уже дизайн-систему) в истории мобильного мира.
Apple Human Interface Guidelines
Apple Human Interface Guidelines был представлен вместе с iOS 7 июне 2013 и с тех пор расширился для использования с другими ОС от Apple (watchOS, macOS, tvOS).
Основной идеей Human Interface Guidelines является простота и «воздушность» интерфейса. Во главу угла возводится контент, а интерфейс уходит на второй план. Приветствуется интерактивность (отзывчивость) и анимация изменения состояния элементов интерфейса. Размытие окон на нижнем уровне, градиентные заливки, болдовая типографика в лучших традициях швейцарского стиля.
В отличие от Material Design System в Human Interface Guidelines нет четких правил и конкретных спецификаций. Например, нельзя в гайдах от Apple посмотреть размер кнопок. Некоторые элементы интерфейса просто в гайде отсутствуют, хотя используются в официальных приложениях от Apple. Здесь в отличие от Google, Apple как бы разрешает дизайнеру «поиграть со шрифтами» и дает больше свободы для кастомизации в рамках платформы.
В разделе загрузок также есть UI-киты для всех популярных инструментов и шрифты. Иконки придется искать свои, по какой-то причине Apple не дает возможности скачать системные иконки.
В общем и целом гайд iOS гораздо более беднее, чем гайд для Android. Поэтому я рекомендую использовать сторонние интерпретации. Например, вот здесь можно найти хорошую интерпретацию.
Почему нужно использовать гайды?
Подводя итог по гайдлайнам. Использовать их при дизайне мобильного приложения просто необходимо по четырем причинам:
- Ускоряется процесс дизайна
- Ускоряется разработка
- Удешевляется разработка
- Пользователь получает быстрый и понятный интерфейс
Полезные ссылки
- material.io — официальные гайды Material Design от Google
- material.io/tools/theme-editor — плагин Sketch для UI кита
- materialdesignicons.com — расширенная версия Material-иконок
- uplabs.com/android — за вдохновением и идеями для Android сюда
- materialdesignkit.com/ — сторонний UI-кит для Photoshop
- developer.apple.com/ios/human-interface-guidelines — гайды Apple HIG
- ivomynttinen.com/blog/ios-design-guidelines — сторонние гайды
- iosdesignkit.io — сторонний UI-кит для Sketch и Photoshop
- uplabs.com/ios — за вдохновением и идеями для iOS сюда
- icons8.com/ios-icons — лучшая коллекция iOS-иконок
Буду рад вашим комментариям 💬 и аплодисментам 👏.
Источник
Гайдлайны мобильных приложений
Эта статья для тех, кто собирается заняться мобильной разработкой. Профессионалы разработки все это уже знают.
Apple
Начнём, пожалуй, с самого проработанного руководства от Apple. На первый взгляд всё выглядит несколько скупо, на каждый инструмент или раздел приходится 2-3 картинки и считанное количество абзацев: гайдлайн очень хорошо проработан с точки зрения подачи информации на единицу текста. Усвоить полностью все рекомендации можно буквально за несколько часов.
Из минусов стоит отметить отсутствие русского языка, но есть любительский перевод. Почитать: medium.com/ios-guidelines-in-russian.
Обратите внимание на пошаговое руководство по разработке приложений для iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Руководство поможет человеку, даже мало знакомому с разработкой приложений, позакомиться с этапами разработки. Для этого сначала необходимо скачать главный инструмент разработчика Xcode, а после с пошаговыми инструкциями создать свой первый мини-шедевр.
Совместив гайдлайн с руководством для разработчика, можно постигнуть начальное понимание разработки приложение для iOS. Для всего остального, в том числе разжёвывания прочитанного, есть профессия — «Разработчик iOS».
Материальный дизайн от Android — это словосочетание часто встречается на просторах интернета, но, к сожалению, многие понимают под ним просто набор графических надстроек Google, не более. На самом деле это достаточно строгая рекомендация, которая призвана сделать ваше приложение понятным и простым для освоения пользователя.
Руководство простирается от общего введения до использования конкретных инструментов. Основы и первые шаги разработчика сопровождаются картинками и видео: сразу видно, что над этим мануалом в Google работали достаточно усердно.
С точки зрения полезности представленного контента также можно высказаться только в положительном ключе: каждое свойство инструмента, каждое действие снабжено текстовым и графическим описанием, также ссылками на руководство по разработке. Поэтому даже без наличия конкретных указаний к действию, создать серьёзное приложение Material Design сможет и новичок, и готовый специалист.
Минус всё тот же: русского языка найти не удалось. Хорошая обзорная статья на русском от Redmadrobot: «Material Design: на Луну и обратно».
Windows Phone
После внимательного изучения и работы с подобными руководствами от Google и Apple, не покидает ощущение некоторой «топорности» гайдлайна Windows Phone. Кажется, что создателям очень не хотелось придерживаться корпоративной политики оформления подобной документации, но начальство настояло.
Главный плюс гайдлайна — русский язык. Информация изложена подробно, но недостаточно удобно структурирована, многовато «воды» для подобного руководства. Однако, если рассматривать гайдлайн не как учебник, который надо сначала прочитать, а потом приступать к разработке, а как карманный справочник — тогда можно признать, что подобное излишество полезно.
Все производители популярных мобильных платформ ответственно и с умом подошли к разработке главного дизайнерского руководства. Работать с каждым из них удобно, приятно, а главное полезно. Дело за малым — научиться создавать приложения, тогда гайдлайны точно пригодятся.
Что думаете о гайдлайнах? Рассказывайте.
Обучение по гайдлайнам: факультет «Android-разработчик».
Guidelines – набор рекомендаций от создателей платформы, благодаря которым приложения сторонних разработчиков выглядят единообразно. На сегодняшний день все популярные платформы имеют в открытом доступе свои гайдлайны.
Эта статья для тех, кто собирается заняться мобильной разработкой. Профессионалы разработки все это уже знают.
Apple
Начнём, пожалуй, с самого проработанного руководства от Apple. На первый взгляд всё выглядит несколько скупо, на каждый инструмент или раздел приходится 2-3 картинки и считанное количество абзацев: гайдлайн очень хорошо проработан с точки зрения подачи информации на единицу текста. Усвоить полностью все рекомендации можно буквально за несколько часов.
Из минусов стоит отметить отсутствие русского языка, но есть любительский перевод. Почитать: medium.com/ios-guidelines-in-russian.
Обратите внимание на пошаговое руководство по разработке приложений для iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Руководство поможет человеку, даже мало знакомому с разработкой приложений, позакомиться с этапами разработки. Для этого сначала необходимо скачать главный инструмент разработчика Xcode, а после с пошаговыми инструкциями создать свой первый мини-шедевр.
Совместив гайдлайн с руководством для разработчика, можно постигнуть начальное понимание разработки приложение для iOS. Для всего остального, в том числе разжёвывания прочитанного, есть профессия — «Разработчик iOS».
Материальный дизайн от Android — это словосочетание часто встречается на просторах интернета, но, к сожалению, многие понимают под ним просто набор графических надстроек Google, не более. На самом деле это достаточно строгая рекомендация, которая призвана сделать ваше приложение понятным и простым для освоения пользователя.
Руководство простирается от общего введения до использования конкретных инструментов. Основы и первые шаги разработчика сопровождаются картинками и видео: сразу видно, что над этим мануалом в Google работали достаточно усердно.
С точки зрения полезности представленного контента также можно высказаться только в положительном ключе: каждое свойство инструмента, каждое действие снабжено текстовым и графическим описанием, также ссылками на руководство по разработке. Поэтому даже без наличия конкретных указаний к действию, создать серьёзное приложение Material Design сможет и новичок, и готовый специалист.
Минус всё тот же: русского языка найти не удалось. Хорошая обзорная статья на русском от Redmadrobot: «Material Design: на Луну и обратно».
Windows Phone
После внимательного изучения и работы с подобными руководствами от Google и Apple, не покидает ощущение некоторой «топорности» гайдлайна Windows Phone. Кажется, что создателям очень не хотелось придерживаться корпоративной политики оформления подобной документации, но начальство настояло.
Главный плюс гайдлайна — русский язык. Информация изложена подробно, но недостаточно удобно структурирована, многовато «воды» для подобного руководства. Однако, если рассматривать гайдлайн не как учебник, который надо сначала прочитать, а потом приступать к разработке, а как карманный справочник — тогда можно признать, что подобное излишество полезно.
Все производители популярных мобильных платформ ответственно и с умом подошли к разработке главного дизайнерского руководства. Работать с каждым из них удобно, приятно, а главное полезно. Дело за малым — научиться создавать приложения, тогда гайдлайны точно пригодятся.
Что думаете о гайдлайнах? Рассказывайте.
Обучение по гайдлайнам: факультет «Android-разработчик».
Источник
Гайдлайны мобильных платформ ios android
Что пишут в блогах
Стоимость в цвете — 2500 рублей самовывозом (доставка еще 500-600 рублей, информация по ней будет чуть позже)
Заказать — https://shop.testbase.ru/buy/book. Пока самовывоз (см ниже где и когда!!). С почтой разберемся чуть позже.
Где: Кострома / онлайн
2 декабря буду выступать в Костроме. Приходите увидеться очно, или подключайтесь онлайн.
Онлайн-тренинги
Что пишут в блогах (EN)
- You are brought into a project that is sort of a dream project. It may be a contract, it might be a new job, or. » target=»_blank» rel=»nofollow»>A Followership Hack
- Playwright is an awesome new browser automation library. With Playwright, you can automate web UI interactions for testing or for web scraping with a. » target=»_blank» rel=»nofollow»>Want to learn Playwright with Python? Take this workshop!
- Reading Time: minute “Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser. » target=»_blank» rel=»nofollow»>Testival Community Ending Scene
- Dark Patterns For Disabled People
- I haven’t made time to blog here much this year because of pair blogging with Janet Gregory on AgileTestingFellow.com, along with other writing. » target=»_blank» rel=»nofollow»>Agile Testing Days 2021 – 1 of ? – Asking new questions
- Since 9 years, PractiTest and TeaTimeWithTesters are now running the annual State of Testing survey. Over the last years the survey provided. » target=»_blank» rel=»nofollow»>State of Testing Survey 2022 is live
- Making progress in removing Robot Framework from my world. Why, you might ask, especially when so many managers in Finland have been taught to expect. » target=»_blank» rel=»nofollow»>Removing Robot Framework From My World
- It’s Thanksgiving in the US – well, yesterday was. Instead of links this week, I’d like to share 5 things I’m thankful for.
Blogposts:
Разделы портала
Про инструменты
Дизайн мобильного приложения — один из главных факторов для пользователя, а значит и для разработчика. Хороший дизайн удерживает пользователя в приложении, плохой и нелогичный — заставляет его удалить. Ошибки дизайна, найденные в готовом приложении, исправлять очень дорого — ведь все приложение уже работает по установленным правилам. Поэтому тестировщик может помочь команде разработки, отметив возможные ошибки и неточности еще в момент их появления. Чтобы сделать процесс проще, создатели мобильных ОС сделали документы, где описаны основные принципы дизайна приложений и возможные трудности. Эти документы называются гайдлайнами, и хороший тестировщик должен иногда обращаться и к ним. В этом видео мы рассказываем о том, какие гайдлайны есть для Android и iOS:
Это и другие видео вы можете увидеть на нашем youtube-канале. Подписывайтесь, чтобы регулярно получать новые видео по тестированию!
Мы читаем эти гайдлайны и работаем с ними на курсе Тестирование мобильных приложений.
Источник