Преминете към основното съдържание

Умение за естетика на дизайн системата

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

Какво е естетика на дизайн системата?​

Естетиката на дизайн системата е структурирано умение, което покрива:

  • Типографика: Семейства на шрифтове, размери, тегла и междинно интервали
  • Цвят: Основна, второстепенна, акцентна и неутрална палитри
  • Разстояние: Мащаби за отстъп (padding), маржин (margin) и интервал (gap)
  • Граници: Токени за радиус и ширина
  • Сенки: Токени за повдигане и дълбочина
  • Движение: Анимации и преходи

Тези решения се записват в файла theme.json на вашата тема, създавайки кохерентна визуална система.

Защо да използвам естетика на дизайн системата?​

Последователност​

Дизайн системата гарантира:

  • Всички текстове използват един и същ мащаб на типографиката
  • Цветовете се използват последователно в целия ви сайт
  • Разстоянията следват предсказуем модел
  • Анимациите изглеждат единни

Ефективност​

Вместо да вземате дизайнерски решения страница по страница, вие:

  • Дефинирате токените веднъж
  • Прилагате ги навсякъде
  • Актуализирате глобално, като промените само една стойност

Гъвкавост​

Можете да:

  • Бързо коригирате цялата си дизайн система
  • Експериментирате с различни естетики
  • Поддържате консистентност на марката, докато се развивате

Активиране на умението за естетика на дизайн системата​

Ръчно активиране​

Можете да стартирате умението по всяко време:

"Помогни ми да подобря естетиката на дизайн системата ми"

или

"Нека подобрим естетиката на сайта ми"

или

"Насочи ме през решенията за дизайн системата"

Автоматични предложения​

Агентите може да предложат да използвате умението, когато:

  • Попитате за дизайнерски промени
  • Искате преработка, която да изглежда "модерна" или "професионална"
  • Искате да подобрите визуалната последователност
  • Подготвяте за пускане на сайта си

Процес на естетиката на дизайн системата​

Стъпка 1: Типографика​

Агентът пита за предпочитания ви за шрифтове:

Какъв е предпочитаният ви стил на типографика?
- Сериф (традиционен, елегантен)
- Санс-сериф (модерен, чист)
- Моноширин (технически, фокусиран върху кода)

За шрифта на заглавията:
- Искате ли отделен шрифт за заглавия, или да използвате същия като за основния текст?
- Предпочитание: бял, елегантен, игрив, минималистичен?

За шрифта на основния текст:
- Четливостта е ключова. Предпочитате ли:
  - По-голям, по-просторен текст
  - Компактен, ефективен текст
  - Стандартен размер

След това агентът дефинира:

  • Шрифт за заглавия: Основен шрифт за заглавия и хедъри
  • Шрифт за основен текст: Шрифт за параграфи и основен текст
  • Моноширин шрифт: Шрифт за код и техническо съдържание
  • Мащаб на размерите: Преддефинирани размери (малък, базов, голям, XL и т.н.)
  • Мащаб на теглата: Тегла на шрифтовете (regular, medium, bold и т.н.)
  • Междинно интервали: Разстояние между редовете за по-добра четливост

Стъпка 2: Цветова палитра​

Нека дефинираме цветовата палитра ви.

Основен цвят (цвят на марката ви):
- Текущ: [показва съществуващия цвят]
- Промяна на: [избор на цвят или шестсегмената система]

Второстепенен цвят (поддържащ цвят):
- Текущ: [показва съществуващия цвят]
- Промяна на: [избор на цвят или шестсегмената система]

Акцентен цвят (подчертаване и CTA):
- Текущ: [показва съществуващия цвят]
- Промяна на: [избор на цвят или шестсегмената система]

Неутрална палитра (сиви тонове за текст, граници, фонове):
- Светъл: [цвят]
- Среден: [цвят]
- Тъмен: [цвят]

Агентът създава пълна палитра, включваща:

  • Основен, второстепенен и акцентен цветове
  • Неутрални сиви тонове (светъл, среден, тъмен)
  • Семантични цветове (успех, предупреждение, грешка)
  • Състояния при преминаване (hover) и активност (active)

Стъпка 3: Разстояние​

Колко "дишащо пространство" искате?

Предпочитание за мащаб на разстоянията:
- Компактен (плътни, ефективни разположения)
- Нормален (балансирано разстояние)
- Просторен (щедро бяло пространство)

Това засяга:
- Отстъп (padding) вътре в бутони и карти
- Маржини между секции
- Интервал (gap) между елементи в мрежата

Агентът дефинира токени за разстояния:

  • Базова единица (обикновено 4px или 8px)
  • Мащаб: xs, sm, md, lg, xl, 2xl
  • Конкретни стойности за отстъп, маржин, интервал

Стъпка 4: Граници и сенки​

Визуална дълбочина и дефиниция:

Предпочитание за радиус на границите:
- Остър (без заоблчване)
- Финен (малък радиус)
- Заоблен (среден радиус)
- Много заоблен (голям радиус)

Дълбочина на сенките:
- Плосък (без сенки)
- Финен (светли сенки)
- Ярък (силни сенки)

Агентът създава:

  • Токени за радиус на границите (за бутони, карти, полета за въвеждане)
  • Токени за сенки за нива на повдигане
  • Токени за ширината на границите

Стъпка 5: Движение и анимация​

Как трябва да се чувства сайта ви, когато е интерактивен?

Предпочитание за анимация:
- Минималистичен (без анимации)
- Финен (нежни преходи)
- Игрив (забележими анимации)

Конкретни анимации:
- Преходи на страници: избледняване (fade), плъзгане (slide) или никакви?
- Hover на бутони: мащабиране, промяна на цвят или и двете?
- Състояния на зареждане: спинър, скелетон или прогрес бар?

Агентът дефинира:

  • Продължителности на преходите (бърз, нормален, бавен)
  • Функции за изглаждане (ease-in, ease-out, ease-in-out)
  • Ключови кадри за анимации за често срещани взаимодействия

Прилагане на естетиката на дизайн системата​

Автоматично прилагане​

След като завършите умението, агентът:

  1. Актуализира theme.json на вашата тема със всички токени
  2. Прилага дизайн системата към активната тема
  3. Регенерира стиловете на блоковете, за да съответстват на новата система
  4. Активира актуализираната тема

Ръчно прилагане​

Можете също така да редактирате theme.json директно:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

Преглед на дизайн системата ви​

Попитайте агента​

"Покажи ми дизайн системата ми"

или

"Какви са текущите ми токени за дизайн?"

Агентът ще покаже типографията, цветовете, разстоянията и други токени.

Преглед на theme.json​

Отворете /wp-content/themes/[theme-name]/theme.json в текстови редактор, за да видите суровите дефиниции на токените.

Актуализиране на дизайн системата​

Бързи актуализации​

Попитайте агента за конкретни промени:

"Направи основния цвят по-тъмен"

или

"Увеличи мащаба на разстоянията с 20%"

или

"Промени шрифта за заглавия на сериф"

Пълна преработка​

Изпълнете отново умението за естетика на дизайн системата:

"Нека преработим цялата ми дизайн система"

Това ще ви проведе през всички решения отново, започвайки от текущите ви стойности.

Частични актуализации​

Актуализирайте специфични аспекти:

"Актуализирай само цветовата палитра, всичко останало да остане"

Най-добри практики за дизайн система​

Последователност​

  • Използвайте същите токени навсякъде
  • Не създавайте еднократни цветове или размери
  • Свързвайте се с токените, вместо да кодирате стойности директно

Именуване​

Използвайте ясни, семантични имена:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Мащабируемост​

Дизайнирайте системата си така, че да може да се мащабира:

  • Използвайте относителни единици (rem, em) вместо пиксели
  • Създавайте мащаби (xs, sm, md, lg, xl) вместо произволни стойности
  • Планирайте бъдещи добавяния

Документация​

Документирайте дизайн системата си:

  • Защо сте избрали определени цветове
  • Кога да се използва всеки токен
  • Изключения и крайни случаи

Често срещани модели на дизайн система​

Модерен минималист​

  • Санс-сериф типографика (Inter, Helvetica)
  • Ограничена палитра от цветове (2-3 цвята)
  • Щедро разстояние
  • Фини сенки
  • Плавни, бързи анимации

Топъл и приятелски​

  • Смес от сериф и санс-сериф
  • Топла палитра от цветове (оранжеви, топли сиви)
  • Заоблени ъгли
  • Меки сенки
  • Игриви анимации

Професионален корпоративен​

  • Чист санс-сериф (Roboto, Open Sans)
  • Неутрална палитра с акцентен цвят
  • Структурирано разстояние
  • Минимални сенки
  • Фини преходи

Креативен и смел​

  • Отличителна типографика
  • Смела палитра от цветове
  • Разнообразно разстояние
  • Силни сенки
  • Забележими анимации

Отстраняване на проблеми​

Промените в дизайн системата ми не се показват

  • Изчистете кеша на браузъра си
  • Преизградете сайта си, ако използвате статичен генератор
  • Проверете дали theme.json е валиден JSON
  • Потвърдете, че темата е активна

Цветовете изглеждат различно на различни страници

  • Проверете за конфликтен CSS в плагините
  • Потвърдете, че всички страници използват една и съща тема
  • Изчистете всички кеширащи плагини

Искам да се върна към предишна дизайн система

  • Попитайте агента: "Покажи ми историята на дизайн системата ми"
  • Редактирайте ръчно theme.json до предишните стойности
  • Изпълнете умението отново с различни избори

Следващи стъпки​

След като дефинирате дизайн системата си:

  1. Прегледайте сайта си: Посетете сайта си, за да видите новия дизайн
  2. Подобряване: Направете корекции, като използвате умението отново
  3. Създаване на шаблони: Изградете персонализирани шаблони за блокове, използвайки токените за дизайн
  4. Документация: Споделете дизайн системата си с членовете на екипа