Ландшафта у айфонов это

Ландшафтный дизайн с Garden Design Pro

время чтения: 1 минута

Если у вас есть дача или небольшой земельный участок, которые вы хотите «облагородить», но не уверены, с чего начать работу по перепланировке, устанавливайте на ваш iOS-гаджет Garden Design Pro. На данный момент это единственное доступное приложение, которое подскажет, как лучше украсить приусадебный участок и покажет в формате 3Д-анимации, каков будет результат по окончанию ландшафтных работ.

Как работает

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

В приложении доступна огромная база объектов, которые обычно можно найти в саду – начиная от камней для дорожки и заканчивая плетеной мебелью. Более 450 видов растений можно виртуально «посадить» на вашем анимированном участке, если каких-то кустарников или цветов в архиве приложения нет, то можно сфотографировать или найти фото нужного растения в сети. Каждый объект можно изменять по цвету, размеру и расположению прямо в редакторе приложения.

Создавая новый проект в Garden Design Pro, пользователь сможет загрузить в него не более 100 объектов одновременно, чтобы получить четкий виртуальный план по дизайну сада. Готовый проект по устройству приусадебного участка можно выслать друзьям по электронной почте или опубликовать его на страничке своего аккаунта в Фейсбуке или Твиттере.

Garden Design Pro – уникальное приложение для садоводов-любителей, которые давно мечтают о перепланировке своего земельного участка. На сайте разработчиков программы находятся подсказки и советы, как правильно использовать огромный потенциал приложения.

Разработчик: iDesafio

Текущая версия: 1.2

Совместимость: iPhone, iPod touch и iPad.

Источник статьи: http://iphone-gps.ru/programs/landshaftnyj-dizajn-s-garden-design-pro

10 мобильных приложений для дачного участка

У меня и у моих родителей никогда не было дачи. Точнее был небольшой огородный участок в 90-х, но он канул в лету с застройкой этого участка земли более ликвидными постройками.

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

1. Лунный посевной календарь (iOS)

Как правило, такие узкоспециализированные приложения разрабатывают настоящие фанатики — некоторые их них делаются буквально под себя, и тем интереснее смотреть, как приложение может набрать рост и популярность.

В этом приложении пять функциональных экранов: Календарь (такой как висел в детстве в каждой кухне), Месяц, Энциклопедия, Заметки, Избранное.

Календарь . Здесь показывается восход и заход солнца и луны и фазы лунного календаря. С помощью Календаря можно узнать какие сегодня лунные сутки и какой сегодня лунный день, а так же все благоприятные лунные дни для работ в саду и огороде. Раздел Энциклопедия состоит из пяти глав: Овощи, Ягоды и фрукты, Хвойные растения, Кустарники и Заготовки на зиму. В этих подразделах можно найти информацию о выращивании и уходе за разными видами огородных растений и советы по выращиванию урожая, описание и уход за хвойными деревьями и кустарниками, которые создадут благоприятный ландшафт на садовом участке.

Стоит отметить, что приложение платное — 149 ₽, и доступ к энциклопедии будет доступен только после оплаты. Отзывов в Apple Store у приложения не много, а тестовой версии нет, поэтому сложно сказать действительно ли полезны разделы внутри.

2. Садовый Менеджер: Учёт растений на грядках (Android)

Здесь все посерьезнее: в приложении можно менеджерить, не побоюсь этого слова, свои грядки прямо на схематической карте участка. На главном экране можно создавать грядки с учетом размера, затем в созданные грядки добавлять растения , которые планируете посадить, а после — добавлять информацию о посадке (название, сорт, дата посадки и тд.). Таким образом, у вас в телефоне полная схема вашего огорода с информацией о том, что посажено и когда.

Приложение также платное — 189 ₽. Скачать в Google Play (рейтинг 4,1, разработчик из Самары AzaDev).

3. Идеи для дачи (Android)

Довольно странное приложение в виде ленты постов с идеями для дома и сада, зато бесплатное. Контент приложения дублирует группу «Идеи для дома» в Вконтакте. Здесь, если все же совсем нечем заняться субботним вечером, можно листать посты с фотографиями, картинками и мемами на тему загородных и дачных домов, устройство сада и огорода. Плюс только один — можно переслать ссылку с понравившимся постом с коллекцией фотографий в другие социальные сети и мессенджеры. Скачать в Google Play (рейтинг 3,8, разработчик Tekokotaapp).

4. Дачные заготовки (Android)

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

Приложение бесплатно. Скачать в Google Play .

5. Сады России (iOS, Android)

А теперь о том, где купить саженцы, цветы и декоративные кустарники для дачи: приложение от научно–производственного объединения «Сады России», по сути — интернет-магазин всего для вашего огорода и сада. Компания «Сады России» является крупнейшим в России производителем и поставщиком семян и саженцев плодовоовощных культур, цветов, декоративных кустарников с доставкой по России. В приложении как раз удобно выбрать все для дачи и сада и сформировать доставку.

Скачать в App Store (рейтинг 2,8, разработчик ООО «НПО «Сад и огород») Google Play (рейтинг 3,7).

6. Цветовод

Приложение «Цветовод» поможет построить графики полива за комнатными растениями. Добавляете выбранное растение в «Мои растения», после чего появится календарь полива, при необходимости можно настроить уведомления в удобное время, например, 10 утра.

Приложение платное — 149 ₽. В платной версии можно добавлять неограниченное количество цветов (всего в справочнике 250 растений), а также вести календарь заданий — полива или пересадки.

Скачать в App Store (рейтинг 2,9, разработчик Inventos, LLC).

7. Мой Дачный клуб

А теперь о том, что почитать. Приложение «Мой дачный клуб» — мобильная версия печатного журнала для дачников и огородников «Дачный клуб». В приложении доступны полноценные версии страниц журнала в довольно удобном, читаемом виде. В журнале собраны статьи на тему хозяйства, сада, огорода, комнатных, садовых и тепличных растений.

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

Скачать в App Store (рейтинг 5,0, разработчик VIKTOR OREHOVSKI).

8. Садовый клуб «Сияние»: Чат для общения садоводов

Приложение «Сияние» напоминает форумы, которые были популярны в 2000-х, только вместо форумов — тематические чаты садоводов-любителей. Судя по аудитории чатов — публика в них, в основном региональная, причем не только из регионов России, но и стран СНГ.

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

Регистрация в приложении по номеру телефона. После чего, выбрав свою страну и город, можно просматривать чаты, получать уведомления на выбранные чаты или получать уведомления от пользователей своего региона. В отдельной вкладке приложения доступен «Учебник садовода» — по кнопкам раздела можно перейти на сайт и канал на YouTube с садовыми инструкциями и другой полезной информацией по садоводству. Приложение может быть действительно кладезью полезных советов и примеров других садоводов-любителей, где можно сразу получить ответ по даче и огороду. Аудитория приложения действительно впечатляет — среднее количество участников чатов-форумов 5-7 тысяч человек и каждый участник может задать вопрос и получить ответ.

Приложение бесплатное. Доступно в App Store (рейтинг 4,1, разработчик Dmitry Ivantsov) и Google Play (рейтинг 4,1).

9. Идеи для дачи — Фазенда

Приложение, как видно из название, предлагает советы и решения для обустройства дома и дачного участка, которые можно сделать своими руками и поделиться с другими участниками. В разделе «Беседка» можно задавать вопросы и отвечать в темах, созданных другими участниками.

Приложение бесплатное, доступно в Google Play (рейтинг 4,4).

Источник статьи: http://zen.yandex.ru/media/id/5b97924706d85100aeeec280/10-mobilnyh-prilojenii-dlia-dachnogo-uchastka-5ea83eaeb795a2687b1ed189

Полные иллюстрированные гайдлайны по дизайну под iOS 13

Возможно, вы никогда не проектировали приложение для iPhone и не знаете, с чего начать.

Возможно, вы уже спроектировали с десяток приложений, но ищите лучшие примеры. Руководство Apple «Human Interface Guidelines» просто ужасно.

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

Размеры экранов iPhone

В течение 5 или 6 лет после выпуска первого iPhone размеры экрана были вполне управляемыми. Если ваш дизайн работал на экране с разрешением 320×480, вы были великолепны. Теперь это дикий запад. Только за последние 3 года добавилось 3 новых размера экрана!

Вот полный список размеров экранов iPhone (добавьте эту ссылку в закладки; или скачайте PDF-файл ниже).

Устройство	Размер артборда	Масштаб экспорта
11 Pro Max, XS Max	414 x 896	@3x
11 Pro, X, XS	375 x 812	@3x
11, XR	414 x 896	@2x
6+, 6S+, 7+, 8+	414 x 736	@3x*
6, 6s, 7, 8	375 x 667	@2x
5, 5s, 5c, SE	320 x 568	@2x
4, 4s	320 x 480	@2x
1, 2, 3	320 x 480	@1x

Предстоящие воркшопы

Как создать иллюстрации, когда не умеешь рисовать

Текст, форма, цвет или сайт на одной лишь типографике

*Технически дисплей телефона 2.61x

• Размер артборда. Это «размер точки» или «@ 1x» размер данного устройства. Я настоятельно рекомендую проектировать артборды такого размера. (Ниже я объясню, чем отличаются точки от пикселей)
• Масштаб эскпорта. Это как сделать растровое изображение (PNG, JPG) намного больше при экспорте, чтобы максимально использовать преимущества более высокого разрешения некоторых устройств.

Артборд какого размера мне следует использовать для дизайна iPhone?

Используйте для своей аудитории наиболее распространенный размер экрана iPhone, но, если в вашем приложении есть экраны с большим объемом данных, обязательно протестируйте их на дисплеях меньшего размера.

• Если вы записываете аналитику в своем текущем приложении или веб-сайте, отметьте их * для наиболее распространенных размеров экрана вашей аудитории
• Если вы проектируете приложение для широкой аудитории, используйте общий самый популярный размер экрана iPhone: 375x667pt
• Если вы проектируете приложение для тех, кто разбирается в технологиях или дизайне, самым популярным размером экрана iPhone, скорее всего, будет новейший 375x812pt.

* Google Analytics записывает это в Audience > Mobile > Devices, затем перейдите на ярлык «Primary Dimension» и установите для него «Screen Resolution».

Дизайн, который хорошо работает на более узком экране (375pt), почти наверняка будет хорошо работать на более широком экране (414pt) – но не наоборот. Поэтому всегда лучше сначала спроектировать более узкие экраны, а затем перепроверить и настроить их для более крупных экранов. Поскольку высота не является ограничением, не так важно, имеют ли ваши артборды высоту 667 или 812 пикселей.

iOS Точки vs. Пиксели

«Точка» (point) – это показатель, по которому дизайнеры могут сравнивать размеры шрифтов и элементов интерфейса на iOS девайсах. «Пиксель» (pixel) – это крошечный квадрат света, из которых состоит экран вашего iPhone. Меньшие пиксели означают более четкое изображение, и это здорово. Но если вы просто уменьшите свои пиксели, все на экране тоже уменьшится! Чтобы сбалансировать это, дизайнеры измеряют размер элементов на экране в точках. Если пиксели в два раза меньше изначальной высоты / ширины, мы можем просто использовать квадрат 2×2 пикселя для каждой точки (это называется масштаб @ 2x). А если пиксели составляют примерно треть изначальной высоты / ширины, мы можем использовать квадрат 3х3 пикселя для каждой точки.

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

iPhone Layout

Хотя разные iOS-приложения имеют разный Layout, многие стандартные страницы будут иметь Layout, подобный следующему:

Примечание: в разделе загрузок в конце статьи у меня есть шаблон iPhone для Sketch, у которого есть линейки, разделяющие эти области страницы, а также строка состояния и индикатор «Домой». Это позволяет очень быстро заполнять этот фреймворк страницы.

Строка состояния

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

Строка состояния содержит индикаторы времени, сигнала, Wi-Fi и батареи, и может быть написана (текст и иконки) черным или белым цветом.

Фон для строки состояния может быть любого цвета – или даже быть прозрачным. Чтобы найти вариации цвета, которые соответствующим образом контрастируют с белым, используйте Accessible Color Generator.

Если вы используете строку состояния не для светлых изображений, вы, вероятно, захотите использовать белый текст.

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

Подобная строка состояния в стиле «матовое стекло» не добавляет никаких дополнительных цветов, границ или ненужных элементов, привлекающих внимание к интерфейсу – она ​​просто размывает любые цвета под ней, делая текст более читабельным.

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

Только начиная с iPhone X появилась «челка» и закругленные углы на границе. Старые iPhone (и все iPad) имеют более короткую и компактную строку состояния.

Панель навигации

В навигационной панели приложение отображается навигация (сюрприз!), заголовок страницы, основные действия страницы и (часто) поиск.

Вы можете представить навигационную панель iOS, как состоящую из трех «строк».

В моем Sketch-шаблоне интерфейса iPhone, я разместил направляющие во всех местах, где обычно располагаются эти строки.

• Строка состояния: 44pt в высоту
• Первая строка: 44pt в высоту
• Вторая строка: 54pt в высоту
• Третья строка: 48pt в высоту

(Эти измерения не всегда точны, и значения в стандартных iOS-приложениях несколько отличаются, но эти цифры помогут вам начать работу)

Таким образом, приложение для iPhone будет показывать одну, две или три строки, в зависимости от (а) потребностей страницы и (б) состояния скролла.

Используйте одну строку, если вам просто нужно компактно отобразить некоторые действия страницы (даже заголовок страницы не является обязательным).

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

Но, если вам нужно показать поиск, то понадобиться третья строка (даже, если первая строка оставлена ​​пустой!).

На скриншотах выше показано только pre–scrolled поведение. Как только пользователь начинает скроллить, iOS начинает вести себя следующим образом.

Если панель поиска должна быть всегда видна, она просто перемещается вверх из третьей строки во вторую во время прокрутки приложения.

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

Когда строки навигационной панели iOS исчезают при прокрутке, они снова появляются, когда пользователь прокручивает страницу вверх.

Обратите внимание, что переходы между состояниями очень плавно анимированы – небольшая, но характерная деталь стиля iOS.

Панель вкладок

В iOS-приложениях основные пункты назначения в приложении перечислены в виде вкладок в нижней части.

Давайте отметим несколько особенностей стиля:

• Выбранная иконка обозначается цветом заливки темы приложения.
• Фон может быть слегка полупрозрачным и размытым – эффект «матового стекла», в стиле навигационной панели
• Метки имеют текст 10-11pt в SF, шрифт по умолчанию

И несколько замечаний о поведении панели вкладок и ее кнопок:

• Различные вкладки запоминают свое состояние. Если вы путешествуете в определенное место назначения на одной вкладке, переключаетесь на другую вкладку, а затем переключаетесь обратно на первую вкладку, вы будете там, где остановились в этой вкладке, а не на ее «главном экране»
• Если вы нажмете на активную вкладку, вы вернетесь к «главному экрану» для этой вкладки
• Панель вкладок всегда видна внутри приложения, за исключением: 1) момента, когда отображается клавиатура 2) когда открыто модальное окно (во время критически важных задач пользователь должен сосредоточиться на текущей задаче, а не переходить к другим частям приложения)

Всего должно быть 2-5 вкладок. Если вам нужно отобразить больше 5 вкладок, пятой иконкой должно быть «More», чтобы показать другие пункты назначения на экране выбора при нажатии.

Индикатор «Домой»

Все новые iPhone (X и более поздние версии) имеют индикатор «Домой» (home indicator) – тонкую закругленную полоску, всегда присутствующую внизу экрана. За исключением тех случаев, когда вы уже на главном экране.

Он черный на всех светлых экранах, но может быть белым на темных экранах.

Слегка перетаскивая его, вы можете перемещаться между приложениями и главным экраном:

• Перетащите слегка вверх: вы перейдете на экран многозадачности для переключения между приложениями.
• Перетащите далеко вверх: вы перейдете на главный экран

Обычно индикатор «Домой» имеет свою собственную «рамку» высотой 34pt, в которой другие фиксированные элементы не отображаются.

Но прокручиваемые списки могут отображаться при скролле под индикатором «Домой» – и вы даже можете выбрать нажатием элемент под ним. Индикатор «Домой» реагирует только на свайп вверх.

Навигация

Основные пункты назначений приложений

Навигация между основными областями приложения описана в разделе Панель вкладок.

«Назад»

В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

Метод навигации «Назад»	Контекст, в котором используется
Тап по действию «Назад» в верхней левой части экрана	Любой экран, на котором присутствует действие «Назад»
Свайп вправо от левого края экрана	Любой экран, на котором присутствует действие «Назад»
Тап по действию «Отмена» или «Готово» вверху экрана	Модальные окна
Свайп вниз на контент экрана	Модальное или полноэкранное представление (например, фото или другие медиа)

2 первых способа обычно применяются к одним и тем же экранам.

Посмотрите раздел модальные окна ниже, чтобы узнать больше о том, как их закрыть.

Поиск

В iOS-приложениях есть 3 основных точки входа:

1. Панель поиска в навигационной панели
2. Иконка поиска на навигационной панели
3. Иконка поиска на панели вкладок

Однако, независимо от того, где находится точка входа в поиск, процесс поиска выглядит довольно схожим:

При желании вы можете показать популярные или недавние поисковые запросы под окном поиска. В своем курсе Learn UX Design я расскажу о лучших примерах поиска, которые касаются разработки интуитивно понятных и простых в использовании приложений

Модальные окна (Modal Sheets)

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

Теперь в iOS 13 для этого у нас есть идеальный элемент интерфейса – Modal sheet.

Modal sheet – это обычная страница, которая (а) скользит снизу вверх, закрывая почти всю предыдущую страницу, но (б) оставляет предыдущую страницу видимой, но утопленной в фоновом режиме.

Modal sheet можно закрыть:

• Нажатием на действие «Закрыть» вверху («Отмена» в верхнем правом углу)
• Свайпом вниз по самой модальной карточке

Элементы интерфейса и элементы управления

Списки (AKA Табличные представления)

Помните: «90% мобильного дизайна – это списки». Если вы хотите научиться проектировать приложения для iPhone, узнайте, что Apple думает о своих списках (или, как они их называют, «Табличные представления»)

Всякий раз, когда вы создаете список на iPhone, вам нужно задать себе три вопроса:

1. Какой текст я хочу отобразить?
2. Хочу ли я добавить иконку / изображение?
3. Что расположено в правой половине клетки?

Давайте рассмотрим каждый из них по очереди.

Какой текст вы хотите отобразить в каждом элементе списка? Вы можете выбрать:

1. Только основной текст (17pt обычный)
2. Основной текст (17pt обычный) со вторичным текстом (15pt обычный)
3. Кастомный макет – например, основной текст (17pt обычный), вторичный текст (15pt обычный, НО СВЕТЛЕЕ) и третичный текст (15pt обычный, НО СВЕТЛЕЕ)

Слева от текста вы можете при желании отобразить иконку или изображение.

Наконец, есть несколько вариантов для правой части элемента списка:

• (Указывающий направо) шеврон. Почти по умолчанию он позволяет пользователям понять, что при нажатии они перейдут на другой экран
• Текст и шеврон. Это означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет здесь показано
• Галочка. Позволяет пользователю выбирать один из элементов списка в этой группе (Примечание: не множественный выбор, как веб-списки с флажками)
• Переключатель. Позволяет пользователю включать или отключать свойство, на которое ссылается элемент списка.
• Текстовые кнопки. Используйте системный цвет для ссылки на другую страницу или сценарий. Используйте красный текст для обозначения «разрушительного действия» – выключения или удаления чего-либо и т. д.

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

Кнопки

Обычно мы думаем о кнопках, как о цветных прямоугольниках с центрированным текстом. И приложения для iPhone, безусловно, используют подобные кнопки. Но, если вы пришли из мира веб-дизайна, вы можете удивиться, узнав, что многие кнопки в iOS представляют собой просто (а) иконки или (б) цветной текст расположенные в: (1) навигационной панели (вверху экрана) или (2) панели действий (внизу экрана).

Тем не менее, iOS также имеет кнопки на странице.

Поскольку действия со всей страницей появляются в фиксированных меню (панель навигации или панель действий), многие кнопки на странице применяются только к определенной части страницы и, следовательно, появляются на карточках.

Элементы управления вводом

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

Текстовые поля

Поле ввода текста выглядит как элемент списка с подсказкой, которая исчезает при наборе текста.

Переключатели (Switches)

Переключатели появляются внутри элемента списка с меткой слева и переключателем двоичного выбора справа.

Выбор даты и / или времени

Сначала он выглядит как элемент списка с меткой слева и значением справа, но, если вы нажмете на элемент списка, он развернется в специальный элемент управления «spinner».

Вы можете изменить это, чтобы выбрать (a) только время, (b) только дату, (c) и время и дату, или (d) какое-то другое пользовательское значение. При этом я не рекомендую использовать это в качестве универсальной замены для выпадающих списков. Вместо этого на мобильных устройствах вам часто нужно использовать п «экран выбора», который является отличной отправной точкой.?

Экраны выбора

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

(1) Один элемент списка с меткой, значением и шевроном приводит к (2) странице с множеством вариантов в списке, один из которых может быть выбран, и выбор отображается с помощью галочки.

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

Типографика

Для получения дополнительной информации о типографике iOS (и, в частности, о размерах шрифтов), см. другую статью автора.

У iOS есть отличительная парадигма для стиля текста. Когда многие дизайн-системы используют стиль с размером или заглавными буквами, iOS-стили используют вес шрифта или цвет. Вот краткий обзор стилей текста iOS:

Элемент	Стиль
Заголовок страниц (unscrolled)	34pt полужирный #000
Заголовок страницы (scrolled)	17pt средний #030303
Простой текст, Заголовки элементов списка, Ссылки	17pt нормальный #000
Вторичный текст	15pt нормальный#8A8A8E
Третичный текст, Подписи	13pt нормальный #8D8D93
Кнопки, Элементы ввода текста	17pt нормальный, разные цвета
Метки панели действий	10pt обычный #8A8A8E

Текст заголовка

Заголовки страниц пишутся двумя разными способами в приложениях для iPhone.

Когда пользователь еще не прокрутил (или прокрутил, но затем прокрутил обратно вверх):

• Размер: 34pt
• Вес шрифта: полужирный
• Цвет: #000
• Цвет темной темы: #FFF
• Выравнивание: по левому краю

Когда пользователь прокрутил вниз:

• Размер: 17pt
• Вес шрифта: средний
• Цвет: #030303
• Цвет темной темы: #FFF
• Выравнивание: по центру

Текст по умолчанию

«Стиль по умолчанию» для текста в приложениях на iPhone – это:

• Размер: 17pt
• Вес шрифта: нормальный
• Цвет: #000
• Цвет темной темы: #FFF

Вы можете многого добиться, сделав небольшие изменения в этом базовом стиле.

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

Аналогично, текстовые кнопки ссылок в основном являются текстом по умолчанию, но с разными цветами.

И текст подсказки для поля поиска – это текст по умолчанию, но светло-серый.

Вторичный текст

iOS-приложения имеют стандартизированный стиль для любого вспомогательного «вторичного» текста.

• Размер: 15pt
• Вес шрифта: нормальный
• Цвет: #8A8A8E
• Цвет темной темы: #8D8D93

Третичный текст и подписи

Любые пояснительные «подписи» делаются еще меньше и легче, чем вторичный текст.

• Размер: 13pt
• Вес шрифта: нормальный
• Цвет: #6D6D72
• Цвет темной темы: #8D8D93

Минимальный размер текста

Просто определив минимальный размер текста вы сможете избежать головной боли с любой дизайн-системой. Для iOS-приложений это метки на панели действий с размером 10pt:

• Размер: 10pt
• Вес шрифта: нормальный
• Цвет: #999 (когда не выделен)
• Цвет темной темы: #757575 (когда не выделен)

Иконки приложений

Если вы создадите иконку приложения, которая будет отображаться во всех возможных местах для всех возможных моделей iPhone и iPad, вам в конечном итоге потребуется создать примерно с десяток вариантов одной и той же иконки.

Вы можете сделать это следующим образом.

(Если вы используете Sketch, вы можете сделать это довольно просто с помощью их шаблона – File > New from Template > iOS App Icon)

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

Вот план дизайна иконки iOS-приложения 80/20 от Эрика:

1. Создайте квадратную иконку, которая будет хорошо смотреться с разрешением 60x60px (и убедитесь, что она хорошо выглядит в маске с помощью Apple superelljpse *)
2. Увеличьте ее до @ 2x (120x120px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
3. Увеличьте ее до @ 3x (180x180px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
4. Увеличьте ее до 1024x1024px
5. Экспортируйте все 4 размера в формате PNG. Готово ?

Суперэллипс iOS (AKA «Squircle») Форма иконки

Даже если вы всегда экспортируете свои иконки в виде квадратов, Apple будет урезать углы, используя форму, называемую суперэллипсом.

Суперэллипс – или squircle – очень похож на обычный прямоугольник с закругленными углами. На самом деле, разница в основном невидима невооруженным глазом. Логические обоснования для Apple: (а) суперэллипс более плавно переходит от прямой части к изогнутой, давая в итоге более органичную форму, и (б) он лучше согласуется с углами аппаратных устройств Apple.

Это действительно имеет значение, только если ваша иконка имеет границу, и в этом случае форма вашей границы должна определяться суперэллипсом, а не скругленным прямоугольником. Вот как создать суперэллипс в Sketch и Figma:

Как создать в Sketch Apple-иконку в форме суперэллипса

1. Создайте квадрат, используя меню «Insert» или клавишу «r».
2. Измените радиус угла на длину одного размера, умноженную на 0,222
3. Измените «Radius (Round Corners)» на «Radius (Smooth Corners)»

Как создать в Figma Apple-иконку в форме суперэллипса

1. Создайте квадрат, используя пункт меню «Rectangle» или клавишу «r»
2. Измените радиус угла на длину одного размера, умноженную на 0,222
3. Откройте меню «Independent Corners» (справа от настройки радиуса угла)
4. Откройте меню «Corner Smoothing» (иконка «…») и установите для него индикатор «iOS» на 60%.

Другие особенности iOS

Есть пара вещей, о которых вам, вероятно, стоит знать, если вы проектируете приложение для iPhone. Я просто перечислю их здесь:

Размер цели нажатия (Tap Target Size)

Все, что пользователь должен иметь возможность нажимать – каждая кнопка, каждый ползунок, каждый элемент управления вводом – должны иметь размер не менее 44×44 pt.

Единственное исключение, когда нарушать это правило простительно – это текстовые ссылки. В тексте абзаца каждая строка текста, вероятно, будет немного короче, чем 44pt. Это означает, что (a) ваши ссылки будут иметь цель нажатия размером менее 44pt и (b) если в двух последовательных строках текста есть ссылки в одной и той же позиции, пользователям будет довольно сложно точно их нажать. Хотя этого не всегда можно избежать, стоит знать, что нужно стараться это минимизировать.

Темная тема

Начиная с iOS 13 появилась поддержка темной темы на уровне ОС. Приложения имеют (как правило) темный фон и светлый текст вместо светлого фона и темного текста.

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

• Цвета текста инвертированы. Черный текст становится белым, темно-серый текст становится светло-серым, а средний серый текст остается в основном таким же. Если вы посмотрите на приведенные выше стилитипографики, вы заметите, что iOS фактически отбрасывает несколько дополнительных оттенков и упрощает цвета текста для своей темной темы. Если вы не знаете, нужно ли делать серый цвет средней яркости темнее или светлее, выберите вариант с более контрастным текстом по отношению к фону.
• Цвет фона смещен. В отличие от текста, где более темные цвета становятся более светлыми, фоновые цвета просто смещаются в темную сторону. Если цвет фона был светлее в светлой теме, он все еще светлее в темной. Почему? Потому что свет падает с неба. Если вы осознаете это, вы поймете, что мы полагаемся на цвет фона для глубинных сигналов (в отличие от текста). И поэтому он работает совершенно по-другому.
• Тематические цвета видны на темном фоне. Любые акцентные цвета, которые вы ранее использовали на светлом фоне, теперь должны аналогичным образом выделяться на темном фоне. Поскольку яркость белого составляет 100%, а черного – 0%, это часто означает, что вы будете снижать яркость ярких цветов (и, в моей более широкой теории регулировки цветов, повышать их насыщенность).

Создание темной темы интерфейса – это отдельная тема, заслуживающая отдельного руководства, и это одна из тех вещей, которые я более подробно рассмотрю в своем курсе Learn UI Design.

Ресурсы

Я создал несколько ресурсов. Ссылки и описания ниже ?

Таблица размеров экранов iPhone

Пиксели, точки, дюймы, боже мой. Это краткое руководство по размеру и разрешению экрана каждой модели iPhone.

Шаблон дизайна iPhone 11

Этот файл Sketch (который вы также можете открыть в Figma) включает артборд iPhone 11 с (а) линейками для выделения общих участков экрана, (б) маской с «челкой» и закругленными углами и (в) строкой состояния, которую легкой перекрасить. Скачав его, откройте в Sketch и выберите File > Save as Template для быстрого доступа.

Дополнительные ресурсы

Руководство Apple «Human Interface Guidelines» для iOS. Известно, что стандарты Apple трудно читать. Сначала вам нужно пройтись по их абстрактным принципам, и вы постоянно будете сталкиваться с их нестандартной терминологией (почему списки называются «Таблицами» (Tables ) и расположены в разделе «Представления» (Views) !? Разве это не должно быть в разделе «Элементы управления»? Нет, но по-видимому, простой текст является «элементом управления» – просто посмотрите раздел «Метки» (Labels). В любом случае, я скажу, что, как только вы перестроите свое мышление, руководство Apple обретет больше смысла. Кроме того, если вы проектируете приложение для iPhone, вам все равно придётся его прочитать. Лучше всего к этому привыкнуть.

iOS vs. Android App UI Design: Полное руководство. Хорошо, допустим, вы решите, что в какой-то момент будете делать версию своего приложения для Android. Лучше всего начать думать о некоторых конструктивных различиях уже сейчас. Кто знает, в конечном итоге возможно вы позаимствуете ряд идей из принципов дизайна Android.

Рекомендации по размерам шрифта iOS. Одна из самых неожиданных частей в разработке интерфейса – это интуитивное понимание того, какой размер шрифта использовать. Итак, чтобы помочь с этим, я написал самое полное в мире руководство по размерам шрифтов.

iOS дизайн рекомендации от Ivo Mynttinen. Самое полное руководство, которое я смог найти, по созданию приложений для iPhone, написанное понятным языком (помимо этой статьи ?).

Подводя итог

Я что-то упустил? В чем-то ошибся? Напишите мне [email protected] . Я буду обновлять это руководство для повышения его точности и читабельности.

Последнее примечание ?

Вас также могут заинтересовать:

• Learn UI Design, мой полноформатный онлайн-видео курс по дизайну пользовательского интерфейса
• The Design Newsletter, информационная рассылка, на которую уже подписалось более 30 000 человек. Она содержит оригинальные статьи о дизайне, нацеленные на предоставление вам тактических советов по улучшению ваших UX / UI навыков.

Источник статьи: http://ux.pub/polnoe-illyustrirovannoe-rukovodstvo-po-dizaynu-pod-ios-13/