Иконка Часы вектор изображение_Фото номер 450046137_AI Формат изображения_ru.lovepik.com

Гид по созданию иконок для Apple Watch

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

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

Бесплатные шаблоны иконок Apple Watch

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

Вы можете скачать шаблоны с GitHub.

Плюс, мы сделали бесплатный набор 25 иконок для Apple Watch.

Иконки можно скачать в двух размерах для двух размеров Apple Watch: 38 и 42 мм. Они лицензированы Creative Commons Attribution 3.0 Unported.

Давайте начнем

Есть два типа иконок в Apple Watch: иконки приложений, которые используются для идентификации, поиска и запуска приложения; и иконки меню (картинки меню), которые возникают в контекстных меню внутри приложений. Все иконки приложений будут с одним дизайном, но разного размера для разных экранных сценариев. Иконки меню будут уникальными и используются для отображения действий, которые пользователь может совершить внутри приложения.

Разрабатывайте иконки без текста

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

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

Круглые иконки, квадратные пиксели

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

Тщательно выбирайте форму

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

Как и в разработке квадратных иконок, область контента иконки должна быть на несколько пикселей меньше, чем область холста, чтобы оставалось небольшое «дышащее» пространство вокруг содержимого иконки. Другими словами, область содержимого должна быть меньше (минимум 2 пикселя), чем область холста. В общем, голубые области на рисунке — неприкосновенны. Если вам нужно туда залезть, это нормально, но ядро дизайна должно быть в области контента, если только нет достойной причины для того, чтобы это было не так.

Оптимизация для размеров часов 38мм и 42 мм.

Иконки приложений показываются в четырех размерах с небольшими различиями между экранами в 38 и 42 мм. Эти четыре размера возникают в разных режимах: Home screen, Long look, Short look и Notification center. Мы рассмотрим отдельно каждый режим дальше. Apple Watch выходят в двух размерах, и это влияет на требования к размеру иконки.

Поскольку Apple Watch производятся с ретина дисплеем, Apple рекомендует сохранять рисунки в двукратном размере (non-interlaced PNG files). Для каждого из размеров иконок ваши растровые рисунки должны быть в два раза больше указанного разрешения. Например, иконки в центре уведомлений, размером в 48 пикселей и 55 пикселей, должны быть 96 пикселей в диаметре для 38-миллиметровых часов и 110 пикселей — для 42-миллиметровых.

1.Иконки Home Screen

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

Согласно гайдлайнам по Human Interface от Apple (HIG), если у вашего приложения на часах такой же функционал, как у приложения на iOS, иконка должна остаться такой же, как на iOS. Тем не менее, если приложение на Watch комплементарно к приложению iOS, иконка должна соответствующим образом измениться. Иконка Home Screen одинакова по размеру и на 38-миллиметровых, и на 42-миллиметровых часах, что значит, что вы можете использовать одну и ту же картинку на обеих версиях. Просто помните, что нужно создавать две версии в двукратном разрешении, поскольку на Apple Watch используются только такие картинки (Спасибо, @stroughtonsmith за пояснения).

2. Иконка в уведомлении Short-look

Приложения на Apple Watch имеют два типа уведомлений: short-lookи и long-look. Уведомления short-look — простые уведомления, которые быстро просматриваются и содержат намек на содержание уведомления для того, чтобы пользователь решил, что он хочет делать дальше. Уведомление long-look содержит полный текст уведомления, кнопку «пропустить» и до четырех кастомных кнопок.

Уведомления short-look включает в себя название приложения, иконку приложения и короткое описание уведомления. Иконка, возникающая в уведомлении short-look, диаметром 172 пикселя на 38-миллиметровых часах и 196 пикселей — на 42-миллиметровых часах.

3. Иконка уведомления Long-look

Long-look уведомления выглядят одинаково во всех приложениях: заголовок с иконкой приложение и названием приложения, кнопка «Пропустить» внизу. Тело уведомления может содержать текст и до четырех кнопок.

Иконка в long-look уведомлении составляет в диаметре 80 пикселей на часах 38 миллиметров и 88 пикселей — на часах 42 миллиметра.

4. Иконка в Notification Center

Иконка приложения также показывается в центре уведомлений Aplle Watch: 48 пикселей в диаметре на 38-миллиметровых часах и 55 пикселей — на 42-миллиметровых.

В дополнение к четырем иконкам в таблице выше, каждое приложение на Apple Watch запрашивает иконку парного приложения на iPhone.

Советы и рекомендации для иконок приложений

• Картинки иконок должны быть сохранены в PHG формате, non-interlaced.
• Глубина цвета иконок — 24 бита. По 8 бит на красный, зеленый и синий. Картинки не должны включать альфа-канал.
• Необязательно использовать веб-сейф цвета.
• Apple Watch используют только картинки с двукратным разрешением, так что все размеры выше для картинок @2x.
• Xcode использует точки вместо пикселей, так что размеры картинок — 2x в сравнении с размером в точках. Например: иконка 38-миллиметровых часов в Notification Center: 24х24 точки, т.е 48х48 пикселей (спасибо Кори Марьон из Icon Factory).

Совет от профессионала: размещение приложений на Apple Watch

Когда разработчик подает приложение Apple Watch на рассмотрение в iTunes Connect, им также нужна 1024х1024 версия иконки приложения для превью App Store. Подробнее — гайдлайны Apple.

Иконки контекстного меню

Переходим к иконкам в контекстном меню, которые еще называют Menu Images. Это одноцветные символьные иконки. Вы можете попасть в контекстное меню через длинное нажатие в приложении. В контекстном меню содержится до 4 кнопок действия с текстовым сопровождением.

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

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

В гайдлайнах предлагается три разных толщины линии в зависимости от сложности иконки. Для 38 мм часов базовая толщина — 4 пикселя для сложных форм контейнеров. 5 пикселей рекомендуются для сложных символов, и 8 пикселей для тех, что попроще. На часах 42 мм каждая линия толще на пиксель: соответственно 5,6 и 9 пикселей.

Учтите, что нет такого правила, в котором говорится, что иконки контекстного меню должны быть обязательно нарисованы линиями. На самом деле, иконки нативного меню — сплошные. Выбор, что использовать, остается за вами, как дизайнером. Для этой статья я сделал все иконки из линий, но я бы мог сделать их и сплошными. Что бы вы ни выбрали, следуйте стилю вашего приложения. Если вы используете иконки с семантическим значением (например, UI элемент), постарайтесь не запутать пользователей (Спасибо Джейми Хурду из PixelLive.com за эту правку).

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

Начните сегодня

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

Отдельное спасибо Лауре Рин, Стиву Т-С (@stroughtonsmith) и Кори Марьон за их ценный вклад и правки этой статьи.

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Изображение PNG с часами PNG, векторы бесплатно скачать- Pngtree

• Vector Clock Icon

• Vector Clock Icon

• Vector Clock

• ICON

9

• 9000. VECTER VECTER WOCKE значок дизайн вектор

• значок будильника

• вектор значок часов

• вектор значок часов

• clock vector icon

• vector clock icon

• vector clock icon

• clock icon isolated on background

• vector clock icon

• vector clock icon

• clock icon design

• значок часов

• вектор значок часов

• вектор значок часов

• значок часов дизайн вектор

• Значок часов в плоском стиле

• Дизайн таккола

• Векторные тактовые такконы

• Vector Clock Icon

• Изолированный Golder Losploary 20000 3

  3 3d Losply Losploary. новогодний клипарт прозрачный фон фейерверк

  2500*2500

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

• синие светящиеся шестерни часы световой эффект абстрактное время

• концепция управления временем деловые люди, работающие рядом с большим расписанием часов и планируют плоский стиль векторной иллюстрации

• часы часы цифры вектор и прозрачное изображение скачать

  5000*5000

• вектор часы время

• мультфильм будильник

• 24 -часовая служба доставки часов

• ЧАСО НЕТ РУКОВОДА контур обратно в школу векторная иллюстрация

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

• часы без стрелки римская цифра

• ИКОНСКИЙ ИКОНС

• ЧАСОГА НЕТ РОБИЛЬНОЙ РОБИЛЬНЫЙ ФОНТ

• ЧАСЫ НЕТ РУКИ БУБЕЛЯ лицо без рук большой шрифт roboto новый

  2000 * 2000

• черное золото классические роскошные часы клипарт дизайн

• час значок вектор дизайн шаблон

• обратно в школу с книгами-будильниками и цветным карандашом *2500

• вектор значка часов png

• вектор значка часов png

• вектор значка часов png

• синие настольные часы или будильник

• часы с ночной сценой города 2000

• классические часы с римскими цифрами

• 3d роскошные золотые 2023 с часами золотые звезды с новым годом клипарт прозрачный фон

  2500*2500

• Значок будильника Lineal Back to School

• Дизайн часов

• Светящий старый уличный свет с установленными часами

• .

  милые часы элемент дизайна вектор и иллюстрация

• квадратный циферблат без стрелок 2

  2000*2000

• 3d рендеринг часов

• коричневый столик при постели с лампами и чашкой

• Иллюстрация крайнего срока с будильником

• Реалистичные желтые часы на стене

• День Нового года 2023 CUNTDON

• время 14 30 цифровые часы в мультяшном стиле

• дизайн с несколькими часами

Значок часов — иллюстрация и векторная графика

Grafiken

• Bilder
• FOTOS
• GRAFIKEN
• VEKTOREN
• Видео

Durchstöbern Sie 168.

669 4

. Например, вы можете выбрать значок времени или значок часов, а также лучше использовать Stock-Bilder и Vektorarbeiten zu entdecken.

Сортировать по номеру:

Am beliebtesten

uhrvektorsymbol isoliert auf weißem undergrund. gliederung, dünne linie uhr symbol für веб-дизайн и мобильные устройства, app-entwicklung. dünne linie uhr umriss-symbol-vektor-illustration. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Uhrvektorsymbol isoliert auf weißem Hintergrund. Gliederung, dünne

Taktvektorsymbol isoliert auf weißem Hintergrund. Gliederung, Thin Line Clock Icon для веб-дизайна и мобильных устройств, App-Entwicklung. Dünne Linie Uhr Umriss Symbol Vector Illustration

uhrensymbol isoliert auf weißem undergrund. векторная иллюстрация. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Uhrensymbol isoliert auf weißem Hintergrund. Векторная иллюстрация.

Uhrsymbol isoliert auf weißem Hintergrund. Векториллюстрация. Фолге 10.

zeit- und uhrliniensymbole. медвежий барер строгий. пиксель идеальный. для мобильных устройств и Интернета. enthält symbole wie 24 stunden, wecker, term, glocke, kalender, обратный отсчет, датум, крайний срок, lieferung, effizienz, песочные часы, инвестиции, управление, leistung. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Zeit- и Uhrliniensymbole. Беарбайтбарер Стрих. Pixel perfect….

25 Zeit- und Uhrumrisssymbole. 24 Stunden, Wecker, Wecker, Termin, Glocke, Kalender, Häkchen, Uhr, Countdown, Datum, Frist, Abnahme, Lieferung, Effizienz, Wachstum, Sanduhr, Erhöhung, Investition, Logistik, Management, Meeting, Mobile App, Büro, Leistung, Телефон, Шпаршвейн, Реннен, Смартфон, Умные часы, Поддержка, Цайт, Ур, Армбандур.

uhr символ векторные иллюстрации дизайн редактируемые vesizable vesable eps 10 — значок часов фондовая графика, -клипарт, -мультфильмы и -symbole

uhr символ векторные иллюстрации дизайн редактируемые Vesizable VEsable. ..

einfachen satz von zeit und uhrensymbol linie. editierbare schlaganfall — значок часов, графика, клипарт, мультфильмы и символы

Einfachen Satz von Zeit и Uhrensymbol Line. Editierbare…

zeitsymbole festlegen bearbeitbaren kontur — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Zeitsymbole festlegen bearbeitbaren Kontur

Zeitsymbole gesetzt. Беарбайтбарер Стрих. Векториллюстрация

zeit, uhr dünne linie symbol. минимальная векторная иллюстрация. enthalten einfache gliederung symbole wie uhr, stoppuhr, таймер, будильник, календарь, песочные часы. Bearbeitbarer strich — значок часов, графика, клипарт, мультфильмы и символы

Zeit, Uhr dünne Line Symbol. Minimale Vector-Illustration….

Zeit, Uhr Thin Line Symbol. Минимальная векторная иллюстрация. Inklusive einfacher Umrisssymbole wie Uhr, Stoppuhr, Timer, Alarm, Kalender, Sandsandsanduhr. Беарбайтбарер Стрих.

таймер стоппур значок набор einfaches дизайн — значок часов сток-графика, -клипарт, -мультфильмы и -символ

таймер стоппур значок набор einfaches дизайн

das sanduhr-symbol — значок часов сток-график, -клипарт, -мультфильмы и -символ

Das Sanduhr-Symbol

time — набор векторных иконок dünne linie . пиксель идеальный. беарбейтбарер контур. das set enthält symbole: zeit, uhr, wecker, sanduhr, stoppuhr, timer, smartwatch, zeitzone. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

TIME — Набор векторных иконок Dünne Linie. Идеальный пиксель. Bearbeitbarer…

TIME — Vektorsymbolsatz für dünne Linien. 20 линейных символов. Идеальный пиксель. Bearbeitbarer Gliederungsstrich. Das Set enthält Symbole: Zeit, Uhr, Wecker, Sanduhr, Stoppuhr, Timer, Smart Watch, Digitaluhr, Zeit ist Geld, Zeitzone.

stechuhr-symbole — значок часов стоковая графика, -клипарт, -мультфильмы и -символ

Stechuhr-Symbole

Uhr- und Zeitsymbole eingestellt, Vektorillustration

dünne liniensymbole für zeit und uhr. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Dünne Liniensymbole für Zeit und Uhr.

Символ времени и часов для dünne Linien. Обратный отсчет, Zeitmanagement- и Stoppuhr-Umrisssymbol. Небольшой Kontursymbole.

lineo editable stroke — zeit- und uhrliniensymbole — значок часов стоковая графика, -клипарт, -мультфильмы и -symbole

Lineo Editable Stroke — Zeit- und Uhrliniensymbole — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Mahlzeit bricht VektorLinie Symbol — einfache dünne Linie Symbol,

календарь, zeitplan-symbol / schwarze farbe — значок часов stock-grafiken, -clipart, -cartoons und -symbole

Kalender, Zeitplan-Symbol / schwarze Farbe

stellen sie das uhrsymbol isoliert auf schwarzem und weißemhintergrund ein. символ времени. вектор-иллюстрация — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Stellen Sie das Uhrsymbol isoliert auf schwarzem und weißem…

часы — значок часов сток-график, -клипарт, -мультфильмы и -символыinfachen satz von zeit und uhrensymbol linie. editierbare schlaganfall — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Einfachen Satz von Zeit und Uhrensymbol Line. Editierbare…

zeit-icons-set — classic line serie — clock icon stock-grafiken, -clipart, -cartoons und -symbole

Zeit-Icons-Set — Classic Line Serie

Песочные часы символ фондовой иллюстрации — значок часов stock-grafiken , -клипарт, -мультфильмы и -символ

Символ песочных часов

zeit- und uhrliniensymbole. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Zeit- и Uhrliniensymbole.

taktsymbol-zeitvariation eingestellt — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Taktsymbol-Zeitvariation eingestellt

mal flach bildung designikone mit seite schatten — clock icon stock-grafiken, -clipart, -cartoons und -symbole

mal flach Иллюстрации Designikone mit Seite Schatten

Eine flach Buildingsikone im Stil mit einem langen. Farbfelder sind global, so dass es einfach ist, die Farben zu bearbeiten und zu ändern.

zeit-icon-sammlung — значок часов стоковая графика, -клипарт, -мультфильмы и -символ

Zeit-Icon-Sammlung

zeit-symbol — значок часов стоковая графика, -клипарт, -мультфильмы и -символ

Zeit-Symbol

Zeitsymbol auf grauem Hintergrund

zeitsymbole — значок часов stock-grafiken, -clipart, -cartoons und -symbole

Zeitsymbole

Symbole der Zeit Symbol Designelement

uhrensymbol vektor, icon-fiken vektor isoliert — -cartoons und -symbole

Uhrensymbol Vektor isoliert

Vektorelement

papier geschnitten uhr symbol isoliert auf blauem undergrund. символ времени. папье-кунст-стиль. вектор-иллюстрация — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Papier geschnitten Uhr Symbol isoliert auf blauem Hintergrund….

lineo editable stroke — zeit- und uhrliniensymbole — clock icon stock-grafiken, -clipart, -cartoons und -symbole

Lineo Editable Stroke — Zeit- und Uhrliniensymbole

календарь с стоппухром dünnlinie symbol, коворкинг konzept, таск-менеджер zeitplan zeichen auf weißem hintergrund, ausführen kalender-symbol im umriss-stil für mobiles konzept, веб-дизайн. векторграфикен. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Kalender mit Stoppuhr dünnlinie Symbol, Coworking Konzept, Task-Ma

bewertungszeilensymbole. медвежий барер строгий. пиксель идеальный. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Bewertungszeilensymbole. Беарбайтбарер Стрих. Идеальный пиксель.

linie Zeit Symbole — значок часов, графика, клипарт, мультфильмы и символы

Line Zeit Symbole

Einfacher Satz zeitbezogener Vektorliniensymbole. Enthält Symbole wie Zeitprüfung, Protokoll, Kalender und Mehr. Беарбайтбарер Стрих. 48×48 пикселей идеально.

стемпелур-линия-значок-набор, schnelle Lieferung, schneller сервис, arbeitszeiten — значок часов сток-графика, -клипарт, -мультфильмы и -symbole , календарь, zeilenge-symbole. векторный линейный значок-сатц-вектор. — графика со значком часов, -клипарт, -мультфильмы и -символ

Zeit und Uhr, Kalender, Zeilenge-Symbole. Vector linearen Icon-Sat

uhr-icons — acme-serie — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Uhr-Icons — Acme-Serie

entwurf des entwurfssatzes für vektorzeitsymbole — значок часов, графика, -клипарт, -мультфильмы и -symbole

Entwurf des Entwurfssatzes for Vektorzeitsymbole

roter wecker isoliert auf blue hintergrund. — часы со значком стоковой графики, -клипарта, -мультфильмов и -символов

Roter Wecker isoliert auf blue Hintergrund.

Wecker Flache вектор-символ. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Wecker flash Vector-Symbol.

символ времени и линии. editierbare schlaganfall. пиксель идеальный. для мобильных устройств и Интернета. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Zeit und Uhr Linee Symbole. Editierbare Schlaganfall. Пиксель…

Задействованное изображение Символы с часами, песочницами, остановкой, Zeitmanagement, таймером.

aufgaben- und zeitsymbole festgelegt. uhr, kalender, besprechung, 24 stunden, zeit, 48h, lapse editierbare linie vektor-illustration auf weißem undergrund. — часы со значком стоковой графики, -клипарта, -мультфильмов и -символов

Aufgaben- и Zeitsymbole festgelegt. Uhr, Kalender, Besprechung,

Aufgaben- und Zeitsymbole festgelegt. Uhr, Kalender, Meeting, 24 Stunden, Zeit, 48h, Lapse editierbare Linienvektorillustration auf weißem Hintergrund

zeit icons 24h — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Zeit Icons 24h

uhr-symbol. векторная иллюстрация с изображением — значок часов, графика, клипарт, мультфильмы и символы

Uhr-Symbol. Векторная иллюстрация с изображением

Uhr-Symbol. Векторная иллюстрация с изображением. Uhr mit Pfeilen, die die Uhrzeit anzeigen.

символ времени и линии. editierbare schlaganfall. пиксель идеальный. для мобильных устройств и Интернета. ikonen wie uhr, zeit, term, kalender, smartwatch enthält. — значок часов сток-графика, -клипарт, -мультфильмы и -символ

Zeit und Uhr Linee Symbole. Editierbare Schlaganfall. Пиксель…

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

Zeit- и Uhrliniensymbole.