Как выглядят приложения на айфоне

Как выглядят приложения на iPhone X

В закладки

Разработчики уже получили специальный API и инструкции по созданию приложений для iPhone X. Некоторые из программистов стараются интересно обыграть «островок».

Кому-то горб не понравился, и разработчик стилизовал программу под стиль Galaxy S8.

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

А вот так выглядит приложение, не адаптированное под новый экран iPhone X.

У разработчиков осталось 1,5 месяца до релиза нового смартфона. Мне кажется, этого времени достаточно, чтобы довести свои приложения до ума.

В закладки

Артём Баусов

Главный по новостям, кликбейту и опечаткам. Люблю электротехнику и занимаюсь огненной магией. Telegram: @TemaBausov

�� Читайте также . Всё по теме

Google показала умные часы Pixel Watch 2 с улучшенной автономностью и новыми датчиками

Google представила флагман Pixel 8 Pro со встроенным датчиком температуры

Samsung представила народный смартфон Galaxy S23 FE и планшет Galaxy Tab S9 FE. МТС уже привезла их в Россию

Легендарная игра Hitman: Blood Money выйдет на iPhone и Android

В iOS 17.1 нашли упоминания Apple Pencil с USB-C

Вот насколько уменьшился iPhone 15 Pro в сравнении со старыми моделями. Секрет не в рамках

Зачем нужен титановый корпус в новых iPhone 15 Pro. Польза и главный минус

В iOS 17 не будет поддержки iPhone 8 и iPhone X

�� Комментарии 61

кретинизм полный с этим горбом, почему нельзя было сделать по-человечески, как это сделал Samsung? iphone держится только из-за ios, если бы у samsung была ios, все бы уже давным давно забыли что такое apple и iphone.

@CIA_agent , но у Samsung нет iOS)

@Артём Баусов , и это очень повезло пользователям Самсунг, ни кто не указывает что надо делать

@Vladim , так разницы никакой почти нет между осями, стабильность одинаковая, скорость работы так же, приложения на iOS более красивые, ну кому как, красота не всегда значит удобство, тот же телеграм на ведре для меня практичней и удобней чем на iOS, ютуб тоже стал ios-подобный, свайпить мне было удобней чем снизу клацать. Почти все приложения есть и там и там, разве что нет для меня acestream на iOS, но зато есть на mac os.Так что я хз какая между осями разница.

@Lannister , но про приложения это вы загнули, андроида и iOS это как винда и мак.

@Vladim , сутками любуетесь иноночками и анимациями ? Что на iOS, что на ведре функционал приложений одинаковый. Разный дизайн и все, но дизайн не всегда в плюс идет, как я выше и написал, привел в пример два приложения коими часто пользуюсь.

@Lannister , причём здесь иконки, ))) iOS закрытая ось, все решает Эппл, вот в чем различие.

@CIA_agent , если бы у бабушки был х. то она была бы дедушкой… а вот сони сама упустила свою возможность быть на иос, почему они выбрали Андройд до сих пор не понимаю

@Seva2006 , а можно поподробнее?

@Seva2006 , вы с макОСью напутали)

@Seva2006 , А что они должны были выбрать, Windows XP?

@CIA_agent , Сложно забыть про ЭПЛ, пользуясь АЙОСом. А значит и про айфоны вспоминали бы время от времени

@CIA_agent , если бы у samsung была ios, они бы накатали на неё гадкий ТачВиз, и всё бы вернулось на круги свои))…

@NBoyRu , тачвиз – лучшее что есть. Это признают даже упоротые фаны чистого дроида.

@WannaBeYou , уточню – лучшее, что есть у самсунг 😉

@serusschip , нет, вообще.

@CIA_agent , вы неадекватно воспринимаете ситуацию. В связке iPhone + iOS на первом месте как раз iOS. Железка вторична. В разработку iOS ввалено много миллиардов долларов. И это главное сокровище Apple, а не смартфон, который может сделать каждый китаец

@iFilin , грустно что замечательную ОС губят такими идиотскими дизайн-решениями (я про гроб)

@CIA_agent , сложно что либо сказать про этот горб, пока нет на руках iPhone X. Поживем-увидим.

@iFilin , ну я уже посмотрел в симуляторе в xcode (я девелопер) как это все выглядит – если коротко, то ужасно.

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

@CIA_agent , вот именно, что на Самсунге нет iOS, так что через полтора месяца меняю свой s8 на Х. Тот же самый дизайн + айось = лучший телефон.

@control , что именно самое неприемлемое для вас оказалось на самсунге? может, просто времени мало прошло? вопрос без подкола, просто интересно, так как сам год назад перешел на самсунг с айфона, и не вижу каких-то ощутимых отличий или недостатков, правда, привыкнуть по настоящему к андроиду заняло пару месяцев а может и подольше)

@pupzem , честно говоря, экосистемы не хватает: синхронизация фото между устройствами, передача файлов на другие айфоны, Эппл тиви и прочее. Большой косяк Самсунга – дисплей выгорел-таки под клавиатурой, я очень сильно разочарован. В остальном телефон тоже нравится, хороший, красивый, камера отличная, но вот не моё в итоге.

@CIA_agent , Эппл все делает не “по-человечески”, а по-инопланетному, поэтому они и лидеры рынка смартфонов итд.)

@CIA_agent , Потому что тогда iPhone будет как все телефоны с экраном от края до края. Раньше iPhone узнавали по кнопке Home с TouchID. Сейчас будут по островку.

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

@CIA_agent , если бы они это сделали, то самсунг подал бы на них в суд за копирование дизайна. Если вы не знаете, дизайн без рамок – это патент как бы…
Но все равно мне этот горб противен. Он ужасен.

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

@Veni Vidi Vici , а для чего нужен безрамочный экран? ;). Правильно, чтобы влезало больше контента. Наверху освободили место от статусной строки (уехала к ушам), а внизу “запрещенное” место для интерактивных элементов. Информацию туда выводить можно. Кнопки – нельзя.

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

@Артём Суровцев , и всегда в черном цвете

@Артём Суровцев , не края, а “уши”. Или Вы это и имели ввиду?

@Артём Суровцев , а в горизонтальном режиме?

@butaka , можно в “уши” засунуть элементы управления.

@Артём Суровцев , вы предлагаете путь Самсунг, сделать так как все ждут. Apple так никогда не делает.

Если все программы начнут адаптировать под Х, то что будет с владельцами 7 и 8.
Зная способности наших “рукастых” программеров, то становится страшно!

@zaitsevde , а есть возможность ещё более нелепый вопрос задать? действительно, как же они смогут, ведь нет разницы между 4-8 айфонами, айпадами разными, ну вот никогда не адаптировали, как же справятся

В Питере – пить, на iPhones.ru – ныть.

В Apple извернулись и сделали мегакрутой и мегаузнаваемый девайс. Да даже если я просто карандашом на бумаге нарисую за 5 сек такую форму дисплея – все увидят в моих каракулях iPhone, а не очередной китайско-корейскую парашу для любителей говна с алишки.

В общем ссу в рот всем, кто обзывает этот божественное дизайнерское решение горбом и считает что без него было бы ЛУДШЕ и вообще “аппле уже не торт”, потому что если до сих пор не поняли, что от вашего нытья и детских обзывков ничего не изменится и всем по сараю на ваше мнение, то есть шанс что уринотерапия поможет.

@Unexposed , ты явно из Питера )

@Unexposed , и ты явно пидop

@Unexposed , от Ваших восторгов (или нытья?) тоже ничего не изменится. А теперь закройте экран телевизора или монитора аналогичным по пропорциям островком. Удобно будет? И, кстати, не совсем честной получается диагональ экрана в 5,8″, так-как от экрана кусок отняли, вроде по измерениям диагонали 5,8″, а по площади меньше экранов с такой же диагональю.
..
И да, ссыте себе.

@I-van-ich , на площадь влияет при аналогичной диагонали не только островки, но и соотношение сторон. Максимальная площадь при равной диагонали у соотношения 1:1 (квадрат).

@WannaBeYou , это да, но экран, всё же, с прямыми сторонами и экран с “островком” – разные вещи при прочих равных.

@Unexposed , Тим Кук в глаз попал (с)

@Unexposed , можно с одним точно согласиться – телефон действительно сделали узнаваемый, потому что никто еще не додумался часть экрана перегородить сенсорами. Было бы еще более узнаваемо, если эти сенсоры в самой середине экрана вставили

@Unexposed , тут прикол такой) местные девки веяно недовольны. просто всем говорят, что недовольны эплом, а на самом деле свой зарплатой))

проще смириться с тем, что не можешь позволить себе мечту, если ненавидишь ее 😉

Чудовищная гадость. Как если такой горб сделать на мониторе или телевизоре, а потом объяснять, как снимать программы, чтобы они хорошо смотрелись.

@Y G , На вкус и цвет товарищей нет,я когда впервые увидел его тоже пребывал в непонятном состоянии,но всё же после презентации я понял,что обязательно должен подержать его в руках,ведь это необходимо. Как когда-то это было с моим первым iphone 3gs.
З.ы Если не зайдёт,то всегда есть 8)

@Y G , на мой взгляд, не совсем правильно сравнение с горбом на телевизоре. Если сделать горб на экране от iPhone 6-8 или обычном телевизоре с соотношением 16/9, то да, стремно. Но что сделала Apple? Они грубо говоря взяли экран от iPhone 6-8 и, не меняя ширины, сделали большую прибавку в высоте. Получилось соотношение сторон почти 20/9. И добавили горб. Ну и сделали в 1,5 раза чётче. Ну и OLED. Но это не суть. Суть в том, что на этом экране помешается гораздо больше контента по высоте, даже за вычетом «опасных» зон с горбом и симметрично с другой стороны. То есть, даже если вписать прямоугольник в экран iPhone X, то он будет гораздо больше по высоте, и такой же по ширине, по сравнению с экраном IPhone 6-8. Сравнивать экран Х с plus версией некорректно, так как у plus больше программная ширина (414 против 375). Плюсовая версия с горбом ещё увидит свет.

Apple вроде как запретила скрывать этот островок разработчикам приложений (я про стиль а-ля самсунг).

@bRiP4 , Да запретили,вроде даже было письмо опубликованное на Айфонс.

Я любил apple за 3gs, я орал от удовольствия купив себе 5s, у меня был неприятный осадок после покупки 7, но Х, Х это трандец. Мне пол года заливали какая круть отказ от 3.5мм и кнопки home. Сейчас оказалось что псевдо кнопка была чудом на три дня. Сегодня мне вливают что кусок пластика на экране это норма, что разблокировка по отпечатку – устарела.
Сорян, но почти год хожу паралельно 7 и S7. За год не нашел ни одного плюса айфона перед самсой, а очень хотелось. Андроид оказался в разы удобнее в ежедневии – мне не нужны переходники, мне не нужен айтюнс чтоб слить/залить контент на телефон там где нет интернета, у меня полноценный нфц и море других плюшек. Сложность андроида? Да ну, отрубление какихто функционалов в андроиде сделано в разы логичнее и не спрятано в жопе.
Увы, ни сам апарат, ни ось не имеют ничего общего с тем что было. Больше кайфа от 5s когда держу в руках, чем от 7ки.
Островок, отсуствие тачайди, неполноценный функционал и бл*ть опять сраный айтюнс – нет спасибо, в этом году я 1000% не обновлюсь, посмотрим что будет в след. году, но думаю что останусь с 7 и s7 еще как минимум 2 года.

Ржу с Эппла. Самсунг в S8 сделал примерно такую же рамку по высоте, как у Эппла – этот прыщ. Эппл могу бы спокойно сделать также – и собирать сливки, но им нужно было выебнуться, чтобы не как у Самсунга. Стивы куки, че.

Как выглядят приложения на айфоне

Как могут выглядеть приложения с iOS 11 и новым iPhone

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

Дизайнер интерфейсов Максим Петрив нарисовал несколько мокапов, на которых продемонстрировал предполагаемый внешний вид App Store на новом iPhone, а также приложений вроде Spotify и Netflix, ну и традиционному экрану блокировки место нашлось. Часть дисплея постоянно занимает кнопка Home, встроенная в него, хотя в коде прошивки HomePod было найдено упоминание о том, что в приложениях кнопку можно будет скрыть.

Многие приложения будут видоизменены с официальным релизом iOS 11, в том числе произойдет глобальное обновление App Store. А после выхода нового iPhone разработчики смогут быстро адаптировать свои программы под новый дисплей.

Как выглядят приложения на iPhone X

В закладки

Разработчики уже получили специальный API и инструкции по созданию приложений для iPhone X. Некоторые из программистов стараются интересно обыграть «островок».

Кому-то горб не понравился, и разработчик стилизовал программу под стиль Galaxy S8.

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

А вот так выглядит приложение, не адаптированное под новый экран iPhone X.

У разработчиков осталось 1,5 месяца до релиза нового смартфона. Мне кажется, этого времени достаточно, чтобы довести свои приложения до ума.

В закладки

Артём Баусов

Главный по новостям, кликбейту и опечаткам. Люблю электротехнику и занимаюсь огненной магией. Telegram: @TemaBausov

�� Читайте также . Всё по теме

Foxconn планирует построить завод по производству AirPods в Индии за $200 млн

В Яндекс Музыке появились рекомендации треков без слов

Крупная биржа NASDAQ снимет с торгов акции Яндекса, Ozon, Qiwi и HeadHunter

Администрация Байдена угрожает TikTok полной блокировкой, если владельцы не продадут его

Разработчик показал, как ChatGPT с GPT-4 может создавать приложения для iPhone

Вышел джейлбрейк для iPhone 8 и X на iOS 16

Как сделать Hard Reset на любой модели iPhone и iPad. Принудительно перезагружаем зависший гаджет

Чем удивила Apple на презентациях каждой модели iPhone. Будет ли эмейзинг в этом году?

�� Комментарии 61

кретинизм полный с этим горбом, почему нельзя было сделать по-человечески, как это сделал Samsung? iphone держится только из-за ios, если бы у samsung была ios, все бы уже давным давно забыли что такое apple и iphone.

@CIA_agent , но у Samsung нет iOS)

@Артём Баусов , и это очень повезло пользователям Самсунг, ни кто не указывает что надо делать

@Vladim , так разницы никакой почти нет между осями, стабильность одинаковая, скорость работы так же, приложения на iOS более красивые, ну кому как, красота не всегда значит удобство, тот же телеграм на ведре для меня практичней и удобней чем на iOS, ютуб тоже стал ios-подобный, свайпить мне было удобней чем снизу клацать. Почти все приложения есть и там и там, разве что нет для меня acestream на iOS, но зато есть на mac os.Так что я хз какая между осями разница.

@Lannister , но про приложения это вы загнули, андроида и iOS это как винда и мак.

@Vladim , сутками любуетесь иноночками и анимациями ? Что на iOS, что на ведре функционал приложений одинаковый. Разный дизайн и все, но дизайн не всегда в плюс идет, как я выше и написал, привел в пример два приложения коими часто пользуюсь.

@Lannister , причём здесь иконки, ))) iOS закрытая ось, все решает Эппл, вот в чем различие.

@CIA_agent , если бы у бабушки был х. то она была бы дедушкой… а вот сони сама упустила свою возможность быть на иос, почему они выбрали Андройд до сих пор не понимаю

@Seva2006 , а можно поподробнее?

@Seva2006 , вы с макОСью напутали)

@Seva2006 , А что они должны были выбрать, Windows XP?

@CIA_agent , Сложно забыть про ЭПЛ, пользуясь АЙОСом. А значит и про айфоны вспоминали бы время от времени

@CIA_agent , если бы у samsung была ios, они бы накатали на неё гадкий ТачВиз, и всё бы вернулось на круги свои))…

@NBoyRu , тачвиз – лучшее что есть. Это признают даже упоротые фаны чистого дроида.

@WannaBeYou , уточню – лучшее, что есть у самсунг ��

@serusschip , нет, вообще.

@CIA_agent , вы неадекватно воспринимаете ситуацию. В связке iPhone + iOS на первом месте как раз iOS. Железка вторична. В разработку iOS ввалено много миллиардов долларов. И это главное сокровище Apple, а не смартфон, который может сделать каждый китаец

@iFilin , грустно что замечательную ОС губят такими идиотскими дизайн-решениями (я про гроб)

@CIA_agent , сложно что либо сказать про этот горб, пока нет на руках iPhone X. Поживем-увидим.

@iFilin , ну я уже посмотрел в симуляторе в xcode (я девелопер) как это все выглядит – если коротко, то ужасно.

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

@CIA_agent , вот именно, что на Самсунге нет iOS, так что через полтора месяца меняю свой s8 на Х. Тот же самый дизайн + айось = лучший телефон.

@control , что именно самое неприемлемое для вас оказалось на самсунге? может, просто времени мало прошло? вопрос без подкола, просто интересно, так как сам год назад перешел на самсунг с айфона, и не вижу каких-то ощутимых отличий или недостатков, правда, привыкнуть по настоящему к андроиду заняло пару месяцев а может и подольше)

@pupzem , честно говоря, экосистемы не хватает: синхронизация фото между устройствами, передача файлов на другие айфоны, Эппл тиви и прочее. Большой косяк Самсунга – дисплей выгорел-таки под клавиатурой, я очень сильно разочарован. В остальном телефон тоже нравится, хороший, красивый, камера отличная, но вот не моё в итоге.

@CIA_agent , Эппл все делает не “по-человечески”, а по-инопланетному, поэтому они и лидеры рынка смартфонов итд.)

@CIA_agent , Потому что тогда iPhone будет как все телефоны с экраном от края до края. Раньше iPhone узнавали по кнопке Home с TouchID. Сейчас будут по островку.

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

@CIA_agent , если бы они это сделали, то самсунг подал бы на них в суд за копирование дизайна. Если вы не знаете, дизайн без рамок – это патент как бы…
Но все равно мне этот горб противен. Он ужасен.

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

@Veni Vidi Vici , а для чего нужен безрамочный экран? ;). Правильно, чтобы влезало больше контента. Наверху освободили место от статусной строки (уехала к ушам), а внизу “запрещенное” место для интерактивных элементов. Информацию туда выводить можно. Кнопки – нельзя.

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

@Артём Суровцев , и всегда в черном цвете

@Артём Суровцев , не края, а “уши”. Или Вы это и имели ввиду?

@Артём Суровцев , а в горизонтальном режиме?

@butaka , можно в “уши” засунуть элементы управления.

@Артём Суровцев , вы предлагаете путь Самсунг, сделать так как все ждут. Apple так никогда не делает.

Если все программы начнут адаптировать под Х, то что будет с владельцами 7 и 8.
Зная способности наших “рукастых” программеров, то становится страшно!

@zaitsevde , а есть возможность ещё более нелепый вопрос задать? действительно, как же они смогут, ведь нет разницы между 4-8 айфонами, айпадами разными, ну вот никогда не адаптировали, как же справятся

В Питере – пить, на iPhones.ru – ныть.

В Apple извернулись и сделали мегакрутой и мегаузнаваемый девайс. Да даже если я просто карандашом на бумаге нарисую за 5 сек такую форму дисплея – все увидят в моих каракулях iPhone, а не очередной китайско-корейскую парашу для любителей говна с алишки.

В общем ссу в рот всем, кто обзывает этот божественное дизайнерское решение горбом и считает что без него было бы ЛУДШЕ и вообще “аппле уже не торт”, потому что если до сих пор не поняли, что от вашего нытья и детских обзывков ничего не изменится и всем по сараю на ваше мнение, то есть шанс что уринотерапия поможет.

@Unexposed , ты явно из Питера )

@Unexposed , и ты явно пидop

@Unexposed , от Ваших восторгов (или нытья?) тоже ничего не изменится. А теперь закройте экран телевизора или монитора аналогичным по пропорциям островком. Удобно будет? И, кстати, не совсем честной получается диагональ экрана в 5,8″, так-как от экрана кусок отняли, вроде по измерениям диагонали 5,8″, а по площади меньше экранов с такой же диагональю.
..
И да, ссыте себе.

@I-van-ich , на площадь влияет при аналогичной диагонали не только островки, но и соотношение сторон. Максимальная площадь при равной диагонали у соотношения 1:1 (квадрат).

@WannaBeYou , это да, но экран, всё же, с прямыми сторонами и экран с “островком” – разные вещи при прочих равных.

@Unexposed , Тим Кук в глаз попал (с)

@Unexposed , можно с одним точно согласиться – телефон действительно сделали узнаваемый, потому что никто еще не додумался часть экрана перегородить сенсорами. Было бы еще более узнаваемо, если эти сенсоры в самой середине экрана вставили

@Unexposed , тут прикол такой) местные девки веяно недовольны. просто всем говорят, что недовольны эплом, а на самом деле свой зарплатой))

проще смириться с тем, что не можешь позволить себе мечту, если ненавидишь ее ��

Чудовищная гадость. Как если такой горб сделать на мониторе или телевизоре, а потом объяснять, как снимать программы, чтобы они хорошо смотрелись.

@Y G , На вкус и цвет товарищей нет,я когда впервые увидел его тоже пребывал в непонятном состоянии,но всё же после презентации я понял,что обязательно должен подержать его в руках,ведь это необходимо. Как когда-то это было с моим первым iphone 3gs.
З.ы Если не зайдёт,то всегда есть 8)

@Y G , на мой взгляд, не совсем правильно сравнение с горбом на телевизоре. Если сделать горб на экране от iPhone 6-8 или обычном телевизоре с соотношением 16/9, то да, стремно. Но что сделала Apple? Они грубо говоря взяли экран от iPhone 6-8 и, не меняя ширины, сделали большую прибавку в высоте. Получилось соотношение сторон почти 20/9. И добавили горб. Ну и сделали в 1,5 раза чётче. Ну и OLED. Но это не суть. Суть в том, что на этом экране помешается гораздо больше контента по высоте, даже за вычетом «опасных» зон с горбом и симметрично с другой стороны. То есть, даже если вписать прямоугольник в экран iPhone X, то он будет гораздо больше по высоте, и такой же по ширине, по сравнению с экраном IPhone 6-8. Сравнивать экран Х с plus версией некорректно, так как у plus больше программная ширина (414 против 375). Плюсовая версия с горбом ещё увидит свет.

Apple вроде как запретила скрывать этот островок разработчикам приложений (я про стиль а-ля самсунг).

@bRiP4 , Да запретили,вроде даже было письмо опубликованное на Айфонс.

Я любил apple за 3gs, я орал от удовольствия купив себе 5s, у меня был неприятный осадок после покупки 7, но Х, Х это трандец. Мне пол года заливали какая круть отказ от 3.5мм и кнопки home. Сейчас оказалось что псевдо кнопка была чудом на три дня. Сегодня мне вливают что кусок пластика на экране это норма, что разблокировка по отпечатку – устарела.
Сорян, но почти год хожу паралельно 7 и S7. За год не нашел ни одного плюса айфона перед самсой, а очень хотелось. Андроид оказался в разы удобнее в ежедневии – мне не нужны переходники, мне не нужен айтюнс чтоб слить/залить контент на телефон там где нет интернета, у меня полноценный нфц и море других плюшек. Сложность андроида? Да ну, отрубление какихто функционалов в андроиде сделано в разы логичнее и не спрятано в жопе.
Увы, ни сам апарат, ни ось не имеют ничего общего с тем что было. Больше кайфа от 5s когда держу в руках, чем от 7ки.
Островок, отсуствие тачайди, неполноценный функционал и бл*ть опять сраный айтюнс – нет спасибо, в этом году я 1000% не обновлюсь, посмотрим что будет в след. году, но думаю что останусь с 7 и s7 еще как минимум 2 года.

Ржу с Эппла. Самсунг в S8 сделал примерно такую же рамку по высоте, как у Эппла – этот прыщ. Эппл могу бы спокойно сделать также – и собирать сливки, но им нужно было выебнуться, чтобы не как у Самсунга. Стивы куки, че.

Как в iOS заменить стандартные иконки приложений на любые картинки

Одним из нововведений iOS 14 стала возможность менять стандартные иконки приложений на свои картинки. Строго говоря, на самом деле речь идёт о ярлыках и такая возможность была доступна и ранее, но в iOS 13 у вас на экране появлялись две версии одного приложения — что может быть неудобно, если у вас и так куча программ.

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

1. Зайдите в приложение «Команды».
2. Нажмите на иконку «+», чтобы добавить новую команду.
3. Найдите действие «Открыть приложение», рядом выберите подходящее из установленных на устройстве.
4. Нажмите на иконку в виде трёх точек рядом с названием команды.
5. Нажмите на кнопку «Добавить на экран “Домой”».
6. Выберите в качестве иконки любое изображение с устройства и задайте название, которое будет отображаться под ярлыком.
7. Нажмите «Добавить».

Готово! Теперь можно удалить обычную версию приложения (но обязательно оставьте её в Медиатеке). На более старых iOS оригинальные приложения можно убрать в отдельную папку и задвинуть на дальний экран.

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

Красивый рабочий стол на iPhone: как создать свои виджеты и изменить иконки в iOS?

Виджеты и иконки Apple стали своего рода эталонным дизайнерским решением: чёткие линии, обтекаемые формы, красочные и без лишних слов понятные значки нравятся в том числе Android-пользователям. Да что там нравятся: они активно скачивают и устанавливают готовые наборы iOS-значков на свои устройства.

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

На заметку

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

Чтобы сэкономить время поиска изображений, воспользуйтесь нашими поисковыми подсказками: рабочий стол айфон, иконки для айфон, ios icon aesthetic, app store icon aesthetic и им подобные. Ещё в запросе можно уточнить цвет, который будет акцентным в изображении: например, youtube icon aesthetic green. Ведь если все иконки будут в одной стилистике, рабочий стол будет выглядеть более гармонично.

Избежать хаоса и беспорядка на рабочем пространстве поможет деление на блоки. Например, на первом столе логично будет сохранить иконки часто используемых приложений и разграничить их тематически: например, можно объединить книги, заметки и планировщик задач; подкасты, музыку и кино; фото, видео, монтаж и обработку; такси, навигацию и поисковик и др. А всё, к чему не требуется быстрый доступ, разместить на следующих рабочих столах или и вовсе оставить в Библиотеке приложений.

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

Отобрав наиболее подходящие иконки, стикеры и фотографии, загрузите их в галерею своего iPhone и будьте готовы изменить свой рабочий стол до неузнаваемости!

Слева – стандартные виджеты и иконки iOS. По центру и справа – адаптированные. Хотите, мы покажем, как сделать так же?

Как изменить иконку любого приложения на iPhone?

Для того, чтобы это сделать, дополнительно скачивать ничего не нужно. Вам понадобится встроенное приложение «Команды», а ещё заранее подобранные для каждого приложения картинки и немного терпения.

1. В Библиотеке вашего iPhone найдите встроенное приложение «Команды». Нажмите синий значок плюса в правом верхнем углу или справа от меню «Начальные команды» – разницы не будет.

2. Вам откроется меню по созданию «Новой команды». Выберите действие «Открыть приложение». В следующем окне вам необходимо выбрать нужное приложение и точно так же назвать команду.

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

4. Остаётся присвоить команде новое изображение. Нажмите на иконку слева от названия: из предложенных действий коснитесь пункта «Выбрать фото». Найдите в галерее подходящее изображение из тех, что вы заранее скачали, и обрежьте его ровно по краям квадрата. Нажмите «Добавить» и «Готово».

Вот таким не самым очевидным способом можно заменить стандартные иконки приложений на собственные. Это может быть любое изображение, даже ваше селфи. Недостаток у этого метода лишь один: при клике на такую иконку вверху экрана будет выскакивать двухсекундное push-уведомление о запуске приложения. Это связано с тем, что таким образом вы не меняете оригинальную иконку приложения, а только создаёте её копию со ссылкой на текущее приложение. Возможно, в будущих версиях iOS разработчики Apple уберут это ограничение.

Кстати, стандартные иконки лучше удалить с рабочего стола, чтобы избежать путаницы. Будьте внимательны: с экрана «Домой» нужно удалить только иконку, а не само приложение. Для этого на несколько секунд задержите пальцем иконку нужного приложения – и выполните следующие действия: «Удалить приложение» – «Удалить с экрана домой».

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

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

Как создать собственные виджеты на iPhone?

Помимо иконок, на экране можно размещать также виджеты. Это более крупные информационные окна, которые открывают доступ к некоторым приложениям: Календарю, Почте, Заметкам, Погоде, Музыке и др.

Мы хорошо помним те времена, когда виджеты ещё нельзя было размещать на экране так, как хочется. А сегодня мы говорим о создании собственных в популярном среди пользователей приложении Widgetsmith. Они замечательно украсят ваш рабочий стол и выведут на экран время, дату, погоду, напоминания, показатели здоровья, ваши фотографии. Давайте прямо сейчас попробуем создать виджет?

1. Сперва нужно выбрать размер виджета, который вы хотели бы создать: нажмите на него, чтобы задать настройки. Пользователям Widgetsmith доступны три размера: маленький, средний и большой.

2. Далее выберите тип виджета: фото, альбом, календарь и др. Мы хотим создать календарь среднего размера (Medium). Находим его в списке в разделе Widget и переходим к настройке шрифта, цвета, фона и др. Когда закончите, сохраните данные.

3. Таким же образом можно создать маленький виджет из любого изображения в вашей галерее (Small). Выберите размер виджета, тип Photo и загрузите снимок из библиотеки. Сохраните. Созданный виджет отобразится вместе с другими созданными вами виджетами.

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

Единственный нюанс заключается в том, что под такими виджетами всегда будет отображаться название приложения, в котором они сделаны. Но согласитесь: это не большая плата за те возможности, которое Widgetsmith предоставляет пользователям. Только посмотрите, как красиво и гармонично выглядят домашний экран и экран блокировки с новыми иконками и виджетами в едином стиле!

Эволюция дизайна приложений в App Store Статьи редакции

Издание 9to5Mac — о том, как изменилось оформление десяти приложений, доступных со дня открытия магазина App Store.

Вначале в App Store было всего 500 приложений. Разработчики задавали направление дизайна миллионам других продуктов, появившихся с тех пор.

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

Apple показала пример другим разработчикам прямо на старте, добавив в свой магазин игру Texas Hold’em и простую утилиту для управления библиотекой iTunes на Mac и Apple TV Remote.

Ранний дизайн Remote напоминал приложение iPod, которое сейчас называется Music. Начиная с iOS 6, их дизайн стал расходиться — приложение Music получило новый вид: тени на ползунке регулятора громкости менялись в зависимости от наклона телефона; в Remote сохранилось прежнее оформление.

Первое серьёзное обновление Remote появилось вместе с выходом iOS 7. В отличие от светлой темы Music, приложение получило тёмный фон, подсвеченный цветами обложки.

До июня 2018 года приложение не менялось — тогда его полностью обновили и добавили поддержку iPhone X.

В новом дизайне компания вернулась к сдержанному оформлению, напоминающее вид Music на iOS 11, — отказалась от больших плиток и карточек в пользу традиционной навигации. Дизайн выдержан в синем цвете, чтобы соответствовать обновлённой иконке.

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

Facebook появилась на iPhone ещё до App Store — сервис стал одним из первых веб-приложений для устройства в октябре 2007 года.

Третья версия Facebook, впервые представленная в 2009 году, была призвана облегчить навигацию с помощью сетки из иконок в синем цвете. Но в публичный доступ так и не вышла.

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

Многие дизайнерские решения Facebook связаны с масштабами компании и её задачей обеспечить работу сервиса на многих платформах. Поэтому в августе 2017 года Facebook объединила дизайн новостной ленты на iOS и Android, а комментарии в веб-версии стали похожи на беседу в Messenger.

Изначально приложение разрабатывалось для Mac, но первая версия появилась именно на iOS. Компания Cultured Code, ведущая разработку, призналась, что оригинальную сборку мобильной версии создала за месяц.

В Things 1.0 не хватало нескольких важных функций — синхронизации с компьютером и тегов. Первое большое обновление разработчики провели в августе 2012 года — во второй версии приложения.

Версия 2.5 2014 года освежила интерфейс с помощью светлых цветов. Things 3 вышла в 2017 году, став самым крупным обновлением.

Каждый элемент интерфейса был создан заново, однако лежащая в основе схема осталась прежней. В ролике, который команда Cultured Code подготовила к запуску, отдельное внимание уделяется анимации. Редизайн принёс разработчикам победу на Apple Design Award.

Изначально интерфейс OmniFocus строился по табличному типу, но с особыми иконками для навигации — в 2008 году компания выиграла Apple Design Award. В 2010 году Omni Group заново нарисовала элементы управления и иконку, чтобы они лучше отображались на дисплее Retina.

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

Справочник iOS дизайна (HIG на русском)

Хотите стать дизайнером? Следите за моими заметками! Помимо этого справочника по дизайну для iOS, у меня на сайте доступен справочник по дизайну для Apple Watch (на русском). Сейчас я пишу обучающие статьи для начинающих дизайнеров. Чтобы всегда первым получать информацию о новых статьях, подписывайтесь на меня в twitter и facebook.
Вступление

Если вы когда-либо сталкивались с созданием интерфейса для приложения, вы определенно знаете что это не самая легкая задача. Чтобы помочь разработчикам и дизайнерам делать более качественные и дружественные интерфейсы, компания Apple выпустила и обновляет руководство по созданию интерфейсов (iOS Human Interface Guidlines (HIG)). HIG не представлен на русском языке, и это сразу отсекает тех кто не владеет английским языком на достаточном уровне.

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

HIG на русском

Этот справочник является упрощенной версией Human Interface Guidelines с комментариями и дополнениями. За основу был взят HIG от Apple и свод правил немецкого дизайнера Иво Минттинена . Здесь вы найдете основные рекомендации по созданию дружественных и интуитивно понятных пользователям интерфейсов для iOS устройств (iPhone, iPad).

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

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

Характеристики экранов

УстройствоRetinaПортретАльбомiPhone 7+6+, 6S+, 7+Retina HD1080 x 19201920 x1080iPhone 76, 6S, 7Retina750 x 13341334 x 750iPhone 55, 5S, 5CRetina640 x 11361136 x 640iPhone 44, 4SRetina640 x 960960 x 640iPhone1, 2 и 3 поколениеNo320 x 480480 x 320iPad Air / Retina iPad1 и 2 поколение / 3rd & 4thNo1536 x 20482048 x 1536iPad ProNo2048 x 27322732 x 2048iPad Mini2 и 3 поколениеRetina1536 x 20482048 x 1536iPadMini, 1 и 2 поколениеNo768 x 10241024 x 768

Разница между поинтами и пикселями

Пиксели это наименьшие физические элементы которые мы можем контролировать на цифровом экране. Чем больше пикселей будет на экране определенного размера, тем выше PPI (количество пикселей на дюйм) и тем более качественным будем изображение которое мы будем видеть на экране.

Поинты в свою очередь являются независимыми от разрешения элементами. В зависимости от плотности пикселей, поинт может содержать несколько пикселей (например 1 поинт содержит 2х2 пикселей на стандартном retina экране).

Когда вы создаете дизайн для различных размеров экранов, вы должны думать в поинтах, а рисовать в пикселях. То есть вы все еще должны экспортировать элементы дизайна в 3 различных размерах (@1x — для устройств младше iPhone 4; в два раза больше @2x — для iPhone 4, 4s, 5, 5s, 6; в три раза больше @3x — для iPhone 6 Plus), независимо от того в каком разрешении вы создаете дизайн своего приложения.

УстройствоЭкспортPPIРазмер экранаiPhone 7+6+, 6S+, 7+@3×4015.5iPhone 76, 6S, 7@2×3264.7"iPhone 55, 5S, 5C@2×3264.0"iPhone 44, 4S@2×3263.5"iPhone1, 2 и 3 поколение@1×1633.5"iPad Air / Retina iPad1 и 2 поколение / 3rd & 4th@2×2649.7"iPad Pro@2×26412.9"iPad Mini2 и 3 поколение@2×3267.9"iPad Mini1 поколение@1×1637.9"iPad 1 и 2 поколение@1×1329.7"

Обработанные пиксели и физические пиксели равны на всех iOS устройствах кроме iPhone 6 Plus. Здесь экран имеет меньшее разрешение пикселей нежели оно должно быть при реальном @3x разрешении. Поэтому размер обработанного контента автоматически уменьшается до 87% реального размера (с 2208 х 1242 пикселей до 1920 х 1080 пикселей).

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

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

Иконки обычно сохраняются как квадратные PNG файлы в различных разрешениях. Никаких дополнительных эффектов дизайнеру применять не нужно. iOS сама применяет все необходимые эффекты. Тоже самое касается радиуса углов иконок. На iOS устройствах и в AppStore мы видим «закругленные» углы (углы с радиусом). Ни в коем случае не нужно самому создавать эти закругления и сохранять их в финальном файле. Apple обрежет вашу иконку с необходимым радиусом самостоятельно. Поэтому результатом вашей работы должно быть просто квадратное изображение в PNG формате.

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

Еще один важный аспект который следует учитывать — прозрачность. Имейте ввиду что прозрачность не поддерживается для иконок приложения вообще. Поэтому все прозрачные участки будут заполнены черным цветом.

Если ваша иконка имеет белый фон, то серая 1px обводка будет применена к ней чтобы сделать её более выделяющейся. Это будет сделано только для иконок которые будут находиться в разделе «Настройки» устройства (если ваше приложение представлено там).

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

Шрифты

В данный момент, системным шрифтом является San Francisco Font. Этот шрифт стал основным начиная с iOS 9. До этого, системным шрифтом был Helvetica Neue. В дополнение к основному системному шрифту, доступно достаточно много других стандартных шрифтов , а также есть возможность подключить любой сторонний шрифт. Использовать шрифты всегда необходимо с умом и не забывать о лицензиях (особенно если используете сторонние шрифты).

Цветовые схемы

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

Стандартная Apple палитра выглядит следующим образом:

Если вам нравятся цвета которые использует Google в своих дизайнах, то советую ознакомиться с неплохой подборкой советов по дизайну в стиле Google на Behance. Во второй части есть очень подробная таблица всех используемых цветов Google. Часть 1,Часть 2.

Icons (Пиктограммы)

Пиктограммы (иконки) это очень важная составляющая дизайна любого приложения. Она может гармонично дополнить текст, иногда даже заменить его (с этим нужно осторожно, пиктограмма должна быть понятна пользователям). Зачастую пиктограммы используются в Tab Bar (панель навигации, располагается внизу экрана) и Nav Bar (панель навигации, располагается вверху экрана). Этим их использование не ограничено, вы можете использовать их там где считаете необходимым.

Пиктограммы используемые в Tab Bar всегда имеют два состояния: Стандартное состояние (в стиле обводки, с шириной обводки в 1 или 1.5 поинта) и Активное состояние (с заливкой цветом).

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

Часто используемые элементы

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

Status bar (Системная панель)

Системная панель (Status Bar) содержит в себе основную системную информацию, такую как доступность связи, текущий оператор связи, статус подключения к Wi-Fi/3g/LTE, текущее время, статус Bluetooth, будильник, заряд батареи. Данный элемент есть на большинстве основных современных операционных систем для мобильных устройств (iOS, Android, Windows Phone).

Статус бар визуально соединен с панелью навигации (Navigation Bar) и использует его фоновую заливку (начиная с iOS7). Для соответствия визуальному стилю вашего приложения и гарантирования читаемости, «внутренности» системной панели представлены в двух стилях оформления: темном и светлом. Размер статус бара составляет 20 поинтов (т.е. 20 пикселей для iPhone младше 4 версии; 20х2=40 пикселей для @2x Retina дисплеев iPhone 4, 4S, 5, 5S, 6; 20х3=60 пикселей для @3x Retina HD дисплея iPhone 6 Plus).

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

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

Navigation bar (Панель навигации)

Панель навигации содержит в себе управляющие элементы для навигации через экраны приложения и управления контентом текущего экрана (не всегда). Она всегда будет присутствовать вверху экрана, прямо под системной панелью. По умолчанию, фон панели навигации слегка прозрачный с размытым контентом под ней. Но вы можете легко сделать фон сплошным цветом, градиентом или собственным изображением (с этим осторожно, следует учитывать различные разрешения экранов чтобы не получить растянутые и/или нечеткие элементы).
Следует уточнить, что панель навигации все же присутствует не всегда. В некоторых приложениях она может отсутствовать на определенных экранах (Pinterest), а в других эта панель может прятаться при скролле (прокрутке) вниз и снова появляться при скролле вверх (Instagram, Facebook). Это делается для того что бы дать больше места для контента и акцентировать внимание пользователя именно на контенте.

Элементы панели навигации всегда должны располагаться в определенных местах:

• Кнопка назад должна всегда находиться у левого края экрана.
• Заголовок текущего экрана должен всегда размещаться по центру.
• Кнопки дополнительных действий всегда должны находиться у правого края экрана. Если возможно, всегда лучше использовать лишь одну кнопку действия справа. Это сделает экран более простым для понимания пользователя и позволит предотвратить случайные нажатия и не попадания по кнопкам.

Toolbar (Панель инструментов)

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

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

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

Search bar (Панель поиска)

Панель поиска доступна в двух разных стилях по умолчанию: стандартном и упрощенном. Обе версии отличаются лишь внешним видом и имеют одинаковую функциональность:

• Пока текст не был введен в поле поиска, там будет находится заданный по умолчанию текст (Поиск, Search).
• Как только пользователь начинает вводить поисковый запрос, текст «Поиск» или «Search» исчезает, а кнопка очистки введенного текста появляется у правого края.

Иногда панель поиска содержит подсказку — короткое предложение которое описывает возможности поиска. Например: «Введите название книги, автора или часть текста для поиска».

Tab bar (Панель вкладок

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

Панель вкладок может содержать только определенное количество вкладок. Если вкладок больше чем может быть отображено на панели вкладок, то последняя вкладка заменяется на вкладку «Еще» которая будет вести к списку спрятанных вкладок с возможностью изменения порядка отображаемых вкладок. Например, в приложении “Музыка”:

Максимальное количество отображаемых вкладок на iPhone — пять. На iPad их количество может достигать семи.

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

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

Table view (Таблица)

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

Существует два возможных вида отображения Таблицы, которые необходимо использовать в зависимости от типа данных который планируется отображать:

Простая Таблица

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

Группированная Таблица

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

Для обеих видов таблицы доступно несколько стилей:

Стандартный

Таблица содержит изображение (или не содержит) расположенное слева и заголовок строки.

С подзаголовком

Этот стиль позволяет использовать маленький подзаголовок под заголовком строки. Обычно подзаголовок используют для краткого описания или объяснения.

С значением

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

Уведомления, всплывающие, модальные окна

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

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

Activity view

Окна такого типа используются для выполнения конкретных задач. Эти задачи могут быть системными, такими как «Поделиться» (Share), или они могут быть собственным, созданными разработчиком для данного приложения (кастомными). Когда создаете дизайн для собственных пиктограмм (иконок), необходимо следовать правилам как при создании пиктограмм для панели вкладок: сплошная заливка, без эффектов, на прозрачном фоне.

Actions (Действия)

Данный тип используется для выполнения определенного действия со списка возможных действий или для подтверждения/отказа совершенного пользователем действия

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

Когда есть достаточно свободного места (например на iPad), список действий преобразуется в Popovers (более подробно о них далее). В этом случае, кнопка отмены больше не нужна, так как отменой будет касание в любой области вне этого всплывающего окна.

Alerts (Предупреждения)

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

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

Вы можете добавить какое-либо текстовое сообщение если необходимо. Также есть возможность добавить поле ввода (до двух) одно из которых может быть шифрованным (для пароля или PIN кода, например).

Edit menu (Меню редактирования)

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

Popover (Всплывающие окна)

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

Данный вид всплывающего окна появляется под связанным обьектом (который вызывает это окно) с стрелкой указывающей на этот объект. Фон этого окна использует легкую прозрачность и размытый контент под этим окном.

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

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

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

Обычно модальные окна предоставляют:

• Заголовок с описанием действия.
• Кнопку для закрытия модального окна или выполнения любых других действий.
• Кнопку для сохранения или подтверждения любой введенной информации.
• Различные элементы для ввода информации пользователем.

Доступно три разных стиля модального окна:

• Полноэкранный: занимает весь экран.
• Страничное модальное окно (Page Sheet): в портретной ориентации, модальное окно покрывает частично контент который лежит под ним и оставляет видимой небольшую часть контента (при этом используя полупрозрачную черную заливку поверх нижележащего контента). В альбомной ориентации, данный стиль модального окна выглядит и функционирует как полноэкранное модальное окно.
• Форма (Form Sheet): в портретной ориентации, модальное окно появляется в центре экрана, оставляя видимым окружающий контент с применением черной полупрозрачной заливки на него. Расположение данного стиля окна изменяется автоматически когда появляется клавиатура. В альбомной ориентации, данный стиль окна функционирует как полноэкранное модальное окно.

На изображении выше показаны 2 вида модальных окон: полноэкранное модальное окно и страничное модальное окно.

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

• Критически необходимо привлечь внимание пользователя
• Необходимо срочно выполнить действие, не выполнение которого может привести к потере данных либо помешать выполнению текущей задачи

Рекомендации по созданию модальных окон:

• Создавайте модальные окна простыми, короткими и понятными.
• Всегда предоставляйте понятный и безопасный способ покинуть модальное окно.
• Если решение задачи требует иерархию модальных окон, убедитесь, что пользователь понимает, что произойдет после нажатия кнопки “Готово” на любом из уровней иерархии.
• Не показывайте модальные окна поверх всплывающих окон (Popovers).
• Следуйте общему стилю приложения при создании модальных окон.
• Старайтесь показывать заголовок модального окна, чтобы пользователь понимал где он находиться и что сейчас делает.
• Используйте подходящую анимацию для появления и скрытия модального окна.
• Если вы используете различные виды анимации и переходов для модальных окон в приложении, делайте это таким образом, чтобы это имело смысл для пользователя.

Controls (Управляющие элементы)

iOS предоставляет широкий выбор управляющих элементов которые могу понадобиться вам при создании приложения. Наиболее важные и распространенные будут рассмотрены ниже. С полным списком контролов вы можете ознакомиться в iOS библиотеке.

Кнопки

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

Кнопки имеют огромное количество настроек внешнего вида которые позволяют изменять и настраивать вам практически все: стиль текста, тени, иконки и т.п.

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

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

Picker (Пикер, контрол выбора)

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

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

Segment control

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

Каждый сегмент может содержать текст или изображение (иконку), но никогда оба этих элемента одновременно. Также не рекомендуется смешивать вкладки с иконками с текстовыми вкладками без иконок. Ширина сегмента изменяется автоматически в зависимости от количества сегментов.

Slider (Слайдер, ползунок)

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

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

Stepper (Степпер)

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

Визуально, степпер очень хорошо настраиваем:

• Вы можете использовать собственные иконки для кнопок.
• Вы можете изменять цвет обводки, фон и т.п.
• Также вы можете использовать любое изображение в качестве фона или разделителя.

Switcher (Переключатель, включатель.выключатель)

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

Keyboard (Клавиатура)

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

3D Touch

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

Peek and Pop

Peek — позволяет пользователям предпросматривать элемент и выполнять связанные с ним действия, не покидая текущий экран. Элемент подсказывает пользователю, что он поддерживает Peek путем отображения маленького прямоугольного предпросмотра (подсказка) в ответ на легкое нажатие.

• Появляется, когда пользователь нажимает на элемент, поддерживающий Peek, и исчезает, когда палец пользователя уменьшает силу нажатия на экран.
• Открывает более детальное отображение элемента (называется pop), когда пользователь нажимает сильнее на Peek.
• Позволяет пользователю быстрые действия с элементом при свайпе вверх на экране peek (при условии, что данная функция заложена программистом).

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

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

Критически важно использовать Peek и Pop органично в своём приложении. Если вы поддерживаете Peek и Pop в некоторых местах, а в некоторых не поддерживаете, пользователь может решить, что ваше приложение работает с ошибками или у него сломалось устройство.
Используйте Peek для быстрого предпоказа элемента. Наиболее оптимальный вариант, когда Peek даёт пользователю достаточно информации о элементе, дополняя то, над чем работает пользователь. Например, пользователь может использовать peek, чтобы предпросмотреть веб страницу в присланном ему сообщении, чтобы решить, стоит ли на неё переходить или поделиться ею с другими друзьями. В таблице Peek может показывать более детальный вид строки.

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

Не используйте peek и меню редактирования (edit menu) для одного элемента. Оба действия вызываются схожим принципом (долгое, сильное нажатие на текст), это может вызвать у пользователя недоумение.

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

Предоставляйте возможность быстрых действий для peek. Внутри peek, пользователь может свайпнуть вверх (провести не отрывая пальца снизу вверх), чтобы увидеть доступные действия, относящиеся к этому элементу. Например, быстрые действия внутри приложения Почта включают в себя “Ответить всем”, “Переслать” и “Переместить сообщение”. Быстрые действия для peek не обязательны. Добавляйте их, только если в этом есть необходимость, и они будут полезны пользователю.

Быстрые действия с домашнего экрана

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

Быстрые действия для приложения на домашнем экране можно вызвать продолжительным сильным нажатием на иконку приложения. Быстрые действия для приложения могут содержать заголовок действия, иконку и дополнительную строку текста (не обязательно). Никакие другие элементы не поддерживаются.

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

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

Не используйте быстрые действия как способ уведомления пользователя. Пользователи iOS ожидают получать уведомления из приложений другими способами (более детально читайте на сайте Apple в разделе Notifications).

Используйте простой и понятный заголовок для действия, а также подходящую по смыслу иконку. Заголовок должен четко указывать на результат, который получит пользователь по нажатию на быстрое действие. Например: “Проложить Путь Домой”, “Создать Новый Контакт”, “Новое Сообщение”. Вы можете использовать дополнительный подзаголовок (не обязательно). Не добавляйте название вашего приложения либо другую бесполезную информацию в заголовок и подзаголовок. Также стоит помнить, что люди могут использовать ваше приложения на различных языках, поэтому стоит заблаговременно позаботиться о локализации.

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

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

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

Полезные ресурсы

Основные

iOS Human Interface Guidelines Руководство по созданию пользовательских интерфейсов от Apple

iOS Шрифты Здесь можно посмотреть стандартные iOS шрифты и проверить как будет выглядеть любой текст с применением этих шрифтов.

Прототипирование

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

Origami Фреймвёрк для Quartz composer от Facebook (Отличный, но может быть сложным для начинающих + Доступен только на Mac)

Pixate Прекрасный мощный инструмент для создания анимированных прототипов. Я перешел на него с Origami и не пожалел. Origami более функционален, но и прототипы делаются гораздо дольше. Я пользовался Pixate вплоть до выхода Principle. Pixate был недавно приобретен компанией Google и стал бесплатным. Это всё еще прекрасный инструмент у которого хорошее будущее

InVision Инструмент в котором я делал свои первые прототипы, очень легкий в использовании, но достаточно ограниченый

Marvel Инструмент на любителя. Почему-то у меня не пошел

UXPin Достаточно хороший и удобный инструмент

Исходники для Photoshop и Sketch

iOS 9 GUI для iPhone (PSD) Легендарный набор исходников для Photoshop от ребят из студии TeehanLax, которая теперь является частью Facebook

iOS 9 GUI для iPhone (Sketch) Не менее легендарный набор для Sketch от TeehanLax (теперь Facebook)

iOS 9 GUI для iPhone (Sketch) Набор Sketch исходников для iPhone от дизайнера Meng To

iOS 9 GUI для iPad (Sketch) Набор Sketch исходников для iPad от дизайнера Meng To

Галереи паттернов (Скриншотов экранов из приложений)

Моя галерея на Pinterest Большая и качественная галерея c разбивкой мобильных интерфейсов (и не только) по категориям. Постоянно обновляется

Mobile Patterns Крупная галерея паттернов. Периодически обновляется

Pttrns Хорошая галерея паттернов. Обновляется достаточно часто.

Полезные вещи

UIStencils Ребята продают прекрасные инструменты для UI дизайнеров (Mobile, Web). От скетчбуков до металических трафаретов. Очень советую

DotGrid Продают хорошие альбомы и скетчбуки

Rotring Если механический карандаш, то только Rotring. Металические, очень хорошего качества и с самым оптимальным весом