Размеры иконок: Выбираем правильный размер и формат иконок

Выбираем правильный размер и формат иконок

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

Windows	16×16, 24×24, 32×32, 48×48, 256×256
Mac OS X	16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024
Linux	16×16, 24×24, 48×48, and 96×96
iOS 6	29×29, 50×50, 57×57, 58×58, 72×72, 100×100, 114×114, 144×144, 1024×1024
iOS 7	29×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 1024×1024
Android	36×36, 48×48, 72×72, 96×96, 512×512
Windows Phone	62×62, 99×99, 173×173, 200×200

 

Размеры иконок для Windows Vista, Windows 7 и Windows 8

Иконки приложений и иконки Панели управления

Иконки должны быть в формате . ico.
Полный набор должен включать следующие размеры:

• 16×16
• 32×32
• 48×48
• 256×256

Иконки для Windows 8 (Metro Design)

• Иконка приложения 30х30, 50×50, 150×150
• Иконки панели инструментов 26х26

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

Необходимые размеры: 16×16, 24×24, 32×32.
Помните, иконки должны быть плоскими даже в максимальном размере 32×32.

Диалоговые окна и помощники

Необходимые размеры: 32×32 и 48×48

 

Размеры иконок для Mac OS X

Иконка приложения

Если вы хотите быть уверены, что ваша иконка будет смотреться одинаково хорошо на экранах любого разрешения, необходимо создать ее в следующих размерах:

• 1024×1024
• 512×512
• 256×256
• 128×128
• 64×64
• 32×32
• 16×16

Панели инструментов

оздавайте иконки в стандартном и высоком разрешении (для мониторов с «Ретина» дисплеем). Необходимо подготовить два размера иконок:

• 32×32
• [email protected] (64×64)

Сохраняйте иконки в формате PNG.

Боковое меню

Создавайте иконки в трех размерах:

• 16×16
• 18×18
• 32×32 пиксела (если используете PDF)

Если вы сохраните иконки для бокового меню в формате PDF, что рекомендуется компаниемй Apple, OS X автоматически изменит размер вашей иконки для мониторов высокого разрешения. Если же вы сохраняете иконки в формате PNG, необходимо подготовить следующие размеры:

• 16×16
• [email protected]
• 18×18
• [email protected]
• 32×32
• [email protected]

 

Иконки для Linux

Размеры иконок согласно Руководству GNOME.

В Linux используются трехмерные иконки.

Жирным выделен основной размер для каждого типа иконок.

Объект и документ	24×24,48×48, and 96×96
Иконка приложения	24×24,48×48
Панель инструментов	24×24,48×48
Меню	16×16

 

iOS 6

iPhone и iPod Touch

Описание	Стандартное разрешение	Высокое разрешение (Ретина дисплей)
Иконка приложения	57×57	114×114
Настройки	29×29	58×58
Поиск	29×29	58×58
Иконка приложения для интернет магазина Apple	512×512	1024×1024

iPad

Описание	Стандартное разрешение	Высокое разрешение (Ретина дисплей)
Иконка приложения	72×72	144×144
Настройки	29×29	58×58
Поиск	100×100	50×50
Иконка приложения для интернет магазина Apple	512×512	1024×1024

 

iOS 7

iPhone и iPod Touch

Описание	Размер иконки
Иконка приложения	120×120
Настройки	58×58
Поиск	80×80
Иконка приложения для интернет магазина Apple	1024×1024

iPad

Описание	Стандартное разрешение	Высокое разрешение (Ретина дисплей)
Иконка приложения	76×76	152×152
Настройки	29×29	58×58
Spotlight Icon	80×80	40×40
App icon for the App Stores	1024×1024	1024×1024

 

Android

Иконка приложения

Интернет магазин Google	512×512
Очень высокое разрешение (xhdpi)	96×96
Высококе разрешение (hdpi)	72×72
Среднее разрешение (mdpi)	48×48
Низкое разрешение (ldpi)	36×36

Панель действий

Самое высокое разрешение (xhdpi)	96×96
Очень высокое разрешение (xhdpi)	64×64
Высокое разрешение (hdpi)	48×48
Среднее разрешение (mdpi)	36×36

 

Windows Phone

Минуточку внимания: советуем брать плоские иконки в нашем новом проекте Icons8. Их 35000 и ежедневно появляются новые.

Иконка приложения

Необходимые икнки в пакете XAP	Размер иконки
Иконка приложения	62×62
Плитка под иконкой приложения	173×173

Иконки для интернет магазина Windows

Icon	Size
Иконка приложения для мобильного интернет магазина Windows (маленькая)	99×99
Иконка приложения для мобильного интернет магазина Windows (маленькая)	173×173
Иконка приложения для настольного интернет магазина Windows	200×200

python — Разный размер иконок для QMenuBar и QToolBar

Хочу сделать, чтобы в QMenuBar иконки QAction были 16х16, а в QToolBar — 24х24.

Сделал *.

ico файл с несколькими слоями соответствующих размеров. В Qt Designer всё отображается как надо, но после компиляции в .py получается, что и меню, и тулбар используют только первый слой ICO-файла.

Прошу помощи с правильным решением данной задачки. Нагуглил одну ссылку 2005 года, в которой говорилось, что на тот момент решения не было, может быть сейчас что-то изменилось?

Текст *.ui файла

    <?xml version="1.0" encoding="UTF-8" ?> 
 <ui version="4.0">
  <class>MainWindow</class> 
 <widget name="MainWindow">
 <property name="geometry">
 <rect>
  <x>0</x> 
  <y>0</y> 
  <width>800</width> 
  <height>600</height> 
  </rect>
  </property>
 <property name="font">
 <font>
  <family>Roboto Light</family> 
  <pointsize>10</pointsize> 
  </font>
  </property>
 <property name="windowTitle">
  <string>MainWindow</string> 
  </property>
 <widget name="centralwidget">
 <widget name="tav_main">
 <property name="geometry">
 <rect>
  <x>60</x> 
  <y>40</y> 
  <width>591</width> 
  <height>361</height> 
  </rect>
  </property>
  </widget>
  </widget>
 <widget name="menubar">
 <property name="geometry">
 <rect>
  <x>0</x> 
  <y>0</y> 
  <width>800</width> 
  <height>21</height> 
  </rect>
  </property>
 <widget name="menu">
 <property name="font">
 <font>
  <family>Roboto Light</family> 
  <pointsize>10</pointsize> 
  </font>
  </property>
 <property name="title">
  <string>Файл</string> 
  </property>
  </widget>
 <widget name="menu_2">
 <property name="sizePolicy">
 <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
  <horstretch>0</horstretch> 
  <verstretch>0</verstretch> 
  </sizepolicy>
  </property>
 <property name="font">
 <font>
  <family>Roboto Light</family> 
  <pointsize>10</pointsize> 
  </font>
  </property>
 <property name="title">
  <string>Редактировать</string> 
  </property>
  <addaction name="a_copy" /> 
  </widget>
  <addaction name="menu" /> 
  <addaction name="menu_2" /> 
  </widget>
 <widget name="toolBar">
 <property name="windowTitle">
  <string>toolBar</string> 
  </property>
 <property name="orientation">
  <enum>Qt::Horizontal</enum> 
  </property>
 <property name="iconSize">
 <size>
  <width>24</width> 
  <height>24</height> 
  </size>
  </property>
 <property name="toolButtonStyle">
  <enum>Qt::ToolButtonIconOnly</enum> 
  </property>
 <property name="floatable">
  <bool>true</bool> 
  </property>
 <attribute name="toolBarArea">
  <enum>TopToolBarArea</enum> 
  </attribute>
 <attribute name="toolBarBreak">
  <bool>false</bool> 
  </attribute>
  <addaction name="a_copy" /> 
  </widget>
 <action name="a_copy">
 <property name="icon">
 <iconset>
  <normaloff>.

  
 
 
   ./icons/copy2.ico</normaloff> 
  ../icons/copy2.ico 
  </iconset>
  </property>
 <property name="text">
  <string>Копировать</string> 
  </property>
 <property name="shortcut">
  <string>Ctrl+C</string> 
  </property>
 <property name="menuRole">
  <enum>QAction::ApplicationSpecificRole</enum> 
  </property>
 <property name="iconVisibleInMenu">
  <bool>true</bool> 
  </property>
  </action>
  </widget>
  <resources /> 
  <connections /> 
  </ui>

• python
• pyqt5
• qt-designer
• qtoolbar
• qmenubar

4

Проблема решилась заменой участков кода, генерируемых pyuic5, с

icon = QtGui.QIcon()
icon.addPixmap(QtGui.QPixmap("copy.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)

на

icon = QtGui.QIcon("copy.ico")

я не совсем понимаю, что вы сделали с *. ico и о каких слоях вы говорите.

Вот беру какое-то изображение cascade.ico 24х24

q13092862.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="font">
   <font>
    <family>Roboto Light</family>
    <pointsize>10</pointsize>
   </font>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget name="centralwidget">
   <widget name="tav_main">
    <property name="geometry">
     <rect>
      <x>60</x>
      <y>40</y>
      <width>591</width>
      <height>361</height>
     </rect>
    </property>
   </widget>
  </widget>
  <widget name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>21</height>
    </rect>
   </property>
   <widget name="menu">
    <property name="font">
     <font>
      <family>Roboto Light</family>
      <pointsize>10</pointsize>
     </font>
    </property>
    <property name="title">
     <string>Файл</string>
    </property>
   </widget>
   <widget name="menu_2">
    <property name="sizePolicy">
     <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
      <horstretch>0</horstretch>
      <verstretch>0</verstretch>
     </sizepolicy>
    </property>
    <property name="font">
     <font>
      <family>Roboto Light</family>
      <pointsize>10</pointsize>
     </font>
    </property>
    <property name="title">
     <string>Редактировать</string>
    </property>
    <addaction name="a_copy"/>
   </widget>
   <addaction name="menu"/>
   <addaction name="menu_2"/>
  </widget>
  <widget name="toolBar">
   <property name="windowTitle">
    <string>toolBar</string>
   </property>
   <property name="orientation">
    <enum>Qt::Horizontal</enum>
   </property>
   <property name="iconSize">
    <size>
     <width>24</width>
     <height>24</height>
    </size>
   </property>
   <property name="toolButtonStyle">
    <enum>Qt::ToolButtonIconOnly</enum>
   </property>
   <property name="floatable">
    <bool>true</bool>
   </property>
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
   <addaction name="a_copy"/>
  </widget>
  <action name="a_copy">
   <property name="icon">
    <iconset>
     <normaloff>cascade. ico</normaloff>cascade.ico</iconset>
   </property>
   <property name="text">
    <string>Копировать</string>
   </property>
   <property name="shortcut">
    <string>Ctrl+C</string>
   </property>
   <property name="menuRole">
    <enum>QAction::ApplicationSpecificRole</enum>
   </property>
   <property name="iconVisibleInMenu">
    <bool>true</bool>
   </property>
  </action>
 </widget>
 <resources/>
 <connections/>
</ui>

---

---

Делаем pyuic5 q13092862.ui -o q13092862_ui.py -x

q13092862_ui.py

# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'q13092862.ui'
# Created by: PyQt5 UI code generator 5.12.1
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow. setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        font = QtGui.QFont()
        font.setFamily("Roboto Light")
        font.setPointSize(10)
        MainWindow.setFont(font)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.tav_main = QtWidgets.QTableView(self.centralwidget)
        self.tav_main.setGeometry(QtCore.QRect(60, 40, 591, 361))
        self.tav_main.setObjectName("tav_main")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        self.menu = QtWidgets.QMenu(self.menubar)
        font = QtGui.QFont()
        font.setFamily("Roboto Light")
        font.setPointSize(10)
        self.menu.setFont(font)
        self.menu.setObjectName("menu")
        self.menu_2 = QtWidgets.QMenu(self.menubar)
        sizePolicy = QtWidgets. QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.menu_2.sizePolicy().hasHeightForWidth())
        self.menu_2.setSizePolicy(sizePolicy)
        font = QtGui.QFont()
        font.setFamily("Roboto Light")
        font.setPointSize(10)
        self.menu_2.setFont(font)
        self.menu_2.setObjectName("menu_2")
        MainWindow.setMenuBar(self.menubar)
        self.toolBar = QtWidgets.QToolBar(MainWindow)
        self.toolBar.setOrientation(QtCore.Qt.Horizontal)
        self.toolBar.setIconSize(QtCore.QSize(24, 24))
        self.toolBar.setToolButtonStyle(QtCore.Qt.ToolButtonIconOnly)
        self.toolBar.setFloatable(True)
        self.toolBar.setObjectName("toolBar")
        MainWindow.addToolBar(QtCore.Qt.TopToolBarArea, self.toolBar)
        self.a_copy = QtWidgets.QAction(MainWindow)
        icon = QtGui.QIcon()
        icon.addPixmap(QtGui. QPixmap("cascade.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.a_copy.setIcon(icon)
        self.a_copy.setMenuRole(QtWidgets.QAction.ApplicationSpecificRole)
        self.a_copy.setIconVisibleInMenu(True)
        self.a_copy.setObjectName("a_copy")
        self.menu_2.addAction(self.a_copy)
        self.menubar.addAction(self.menu.menuAction())
        self.menubar.addAction(self.menu_2.menuAction())
        self.toolBar.addAction(self.a_copy)
        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.menu.setTitle(_translate("MainWindow", "Файл"))
        self.menu_2.setTitle(_translate("MainWindow", "Редактировать"))
        self.toolBar.setWindowTitle(_translate("MainWindow", "toolBar"))
        self.a_copy.setText(_translate("MainWindow", "Копировать"))
        self. a_copy.setShortcut(_translate("MainWindow", "Ctrl+C"))
if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

и что не так ?

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Полное руководство по созданию иконок | by Paul Wilshaw

Опубликовано в

·

Чтение: 12 мин.

·

6 ноября 2021 г.

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

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

Вы, наверное, слышали фразу «сначала мобильные», на это есть причина. Подробнее об этом я рассказываю в своем подкасте Faster Horses; Подкасты Apple или Spotify. Точно так же мы собираемся спроектировать наименьшую возможную область, чтобы мы знали, что можем уместить все наши идеи в этом маленьком ограниченном пространстве, а затем строить вверх, добавляя больше деталей, где это необходимо — я предпочитаю сначала называть этот значок .

Я использую значок сердца, чтобы выразить «поддержку».

Дитер Рамс очень хорошо объясняет это «Weniger, aber besser» (Меньше, но лучше), в этом смысле мы собираемся удалить как можно больше из наших значков.

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

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

Использование: Обычный

Значок сердца размером 16 x 16 пикселей

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

Использование: Необычный

Точечная иллюстрация размером 56×56 пикселей

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

Я использую пятна размером 56×56 пикселей.

Использование: Иногда

Мини-иллюстрация 112×112 пикселей

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

Я использую мини-иллюстрации 112x112px (или ширину/высоту, чтобы соответствовать размеру).

Применение: ограниченное

Стандартная иллюстрация 256x256px

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

Я использую мини-иллюстрации 112x112px (или ширину/высоту, чтобы соответствовать размеру).

Не стесняйтесь изменять эти размеры для вашего использования и предполагаемой цели.

Теперь, когда мы определили наш язык, мы можем перейти к деталям создания наших иконок.

Всегда сохраните ваш кадр согласованным и экспортируйте значки с этим размером кадра.

рамка размером 16x16pxНесмотря на то, что крест имеет разный вес и размер, все рамки имеют размер 16x16px

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

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

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

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

Корзина слева, где это возможно, выровнена по пиксельной сетке, что уменьшает «пиксельную рвоту» не выровненных штрихов.

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

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

Вручную отрегулируйте положение X и Y, чтобы выровнять штрихи по пиксельной сетке.

Добавление 0,5 к позиции X и/или Y гарантирует, что ваши значки выровнены по пикселям, а не по сетке.

Настройка положения X и Y делает значки четкими, особенно на экранах с низким разрешением.

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

Обводки, которые не являются полными путями или соединены, преобразуют внутреннюю обводку в обводку, выровненную по центру в Figma — это означает, что обводка становится больше, чем ее предполагаемый размер. Например, арка 16 x 8 пикселей по существу становится аркой 17 x 8,5 пикселей.

Для этого уменьшите размер фигуры на 1 пиксель и выровняйте координаты X и Y по верхней части рамки. Применение этого метода делает ваш пиксель обводки идеальным и не обрезает его за пределы ограничительной рамки. В приведенном ниже примере я отредактировал размер своей арки до W15 x H7,5px, сохранив соотношение и переместив координату X на 0,5.

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

Хорошо, поэтому я немного противоречу некоторым приведенным выше правилам выравнивания пикселей…

Добавление мелких деталей иногда может иметь значение.

Добавление более мелких деталей; Иногда значкам нужна небольшая дополнительная деталь, чтобы отличить круг от монеты. Я использую обводку 0,5px, чтобы добавить немного деталей, это помогает, когда у вас есть большое количество значков и значков одинаковой формы. По возможности следите за тем, чтобы штрих оставался в пределах сетки одного пикселя, и избегайте растеризации «пиксельной рвоты» на экранах с более низким разрешением.

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

Мне нравится, когда мои значки немного мягче, и я добавляю небольшой радиус закругления, при разрешении 16 пикселей я использую радиус закругления 1 пиксель.

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

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

Вы можете отрегулировать отдельные углы, щелкнув значок «угол».

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

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

Как заглавные буквы меняют длину строки.

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

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

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

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

Например, строка длиной 26 пикселей будет иметь длину 27 пикселей с заглавными буквами на обоих концах. Чтобы добиться единообразия, уменьшите длину обводки на 1 пиксель.

Закругленная штриховая черта будет отрисована длиной 25 пикселей, но на самом деле 26 пикселей в сетке пикселей.

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

Всегда устанавливайте для ограничений значка значение «Масштаб» — выберите все слои значка и измените значение на «Масштаб».

Используйте панель «Ограничения», чтобы убедиться, что ваши значки и все слои внутри настроены на Масштабирование как по горизонтали, так и по вертикали.

Это помогает масштабировать размер при использовании во вложенных компонентах, например. кнопки с иконками.

В этом примере только один из моих слоев не настроен на Масштаб, он просто закреплен в верхнем левом углу кадра. Инструмент масштабирования Figma

Вы можете вручную масштабировать значок, используя Figma, с помощью инструмента Масштаб (K). Отметим, что это помогает только в том случае, если вы не используете вложенные компоненты. Иконки, которые используют обводку, а не значки, которые обведены контуром, будут масштабировать только форму, а не обводку или радиус угла.

Иконка с использованием штриха

Есть плюсы и минусы сохранения штрихов в ваших значках. Сохранение обводки упрощает редактирование в будущем. При обводке штриха углы и штрихи масштабируются везде, где вы их используете. Чтобы очертить обводку, используя Figma, нажмите SHIFT + CMD + O.

Обводки против контурных (залитых) фигур. Расчет радиуса угла при разных масштабах значков.

Значки лучше всего работают при степени 8. Поэтому всегда старайтесь делать размеры значков кратными 8 — это зависит от используемой сетки. Если вы используете сетку 10×10, делайте значки кратными 10. Для достижения наилучших результатов следите за тем, чтобы размеры значков соответствовали размерам шрифта. Например, если вы используете шрифт 16pt/px, используйте значки, кратные 8. Если вы используете шрифт 20pt/px, используйте значки, кратные 10.

Как значок моего сердца увеличивается с разным шагом.

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

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

Например:

Значок 16px = обводка 1px
Значок 24px = обводка 1.5px
Значок 32px = обводка 2px

Значок 16px = угловой радиус 1px
Значок 24px = угловой радиус 1.5px
32 значок px = угловой радиус 2px

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

Вес значков соответствует весу шрифта

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

Масштабированные значки с разным весомИспользование значков разного веса для соответствия размеру и весу шрифта. Использование вариантов и несколько корректировок делает ваш значок согласованным и пригодным для использования в различных ситуациях.Сначала сделайте значок компонентом (⌥⌘K) или нажмите 4 алмазная икона.

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

Измени один раз, меняй везде.

Использование компонентов в Figma

Добавьте все значения вашего значка в поле описания.

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

Поиск значков на панели ресурсов упрощает поиск именно того, что вы ищете.

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

Если вы не используете варианты Figma, сначала проверьте это. Вариант игровой площадки и учебник Figma: https://www. figma.com/community/file/903303571898472063/Figma-Variants-Playground

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

варианта Figma с опциями для интерактивных иконок, используемых в моей дизайн-системе.

Чтобы просмотреть основной «мастер»-компонент, щелкните значок с 4 ромбами.

Щелкните значок с 4 ромбами, чтобы перейти к основному компоненту.

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

Варианты значка стрелки с разным направлением и разным весом.

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

Добавление вариантов в FigmaУбедитесь, что каждый из ваших вариантов имеет уникальное имя.

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

Именование описывает состояние, т.е. Обычный или заполненный (заполненный для активных или наведенных состояний на кнопках и карточках).

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

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

Именование также может описывать различные версии значка. В приведенном выше примере стрелка имеет свойство Direction, описывающее ее направление.

Варианты для разных стрелок направления.

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

В этом примере я создал значок щита, а затем хочу, чтобы на моем щите были разные значки.

Использование значка щита для создания совершенно нового значка.

Вложенные компоненты полезны для быстрого масштабирования набора значков при сохранении его основного внешнего вида.

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

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

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

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

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

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

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

Опрос в Твиттере, спрашивая моих сверстников, что представляет этот значок.

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

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

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

Чтобы узнать больше о дизайн-системах, пользовательском опыте и продуктах, ознакомьтесь с моим подкастом Faster Horses ; Apple Podcasts, Spotify или просто спросите у своего умного динамика.

css — стандартные размеры значков

спросил 8 лет, 8 месяцев назад

Изменено 8 лет, 8 месяцев назад

Просмотрено 8к раз

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

Итак, я просмотрел руководство по стилю Windows, а также наборы значков, доступные для загрузки, и заметил, что они в основном соответствуют структуре размеров 16×16, 24×24, 32×32, 48×48, 64×64 и так далее.

Во-первых, я хочу спросить, почему были выбраны вышеуказанные размеры и почему они кратны 8? Например, почему бы не 15х15, 25х25 и т.д.

Есть ли где-нибудь практическое руководство по правильному использованию значков и текста значков?

• css
• иконки

0

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

Это источник стиля класса окна CS_BYTEALIGNCLIENT. С этот набор стилей, оконный менеджер попытается расположить окно так, что координата x верхнего левого угла клиентского прямоугольника находится на идеальной байтовой границе видеопамяти. Если бы вы бежали на видеорежиме 1bpp (монохромный или 16-цветный), это означало, что x-координата была кратна восьми. Располагая окно таким образом, растровое изображение, скопированное в левый верхний угол клиентского прямоугольника будет скопирован с помощью инструкций быстрого переноса блоков.

Если вы посмотрите на размеры диалогового окна из Windows 95 или более ранней версии, вы обнаружите, что они почти всегда кратны 32 DLU в ширина. Поскольку четыре горизонтальных DLU равны одной средней ширине символа, вы должны были сохранить ширину диалога кратной 32, чтобы гарантировать, что окончательный размер диалога был кратен восьми.

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

Apple также указывает, что вы должны создавать версии ваших значков 16×16, 32×32 и 128×128. Как и Windows, ОС подойдет и для других размеров, но вы не получите наилучших результатов.