Skip to main content

Маҳорати Эстетикаи Системаи Намоишӣ (Design System Aesthetics Skill)

Маҳорати Эстетикаи Системаи Намоишӣ роҳи равона барои такмили макони навиштаи шумост. Он ба шумо ёрӣ мерасонад, ки омилҳои мувофиқро дар мавриди типография, ранги, фасолатнокӣ (spacing) ва токенҳои ҳаракат (motion tokens), ки системаи дизайни шуморо тавсиф мекунанд, қабул кунед.

Эстетикаи Системаи Намоишӣ чист?​

Эстетикаи Системаи Намоишӣ маҳорати сохторӣ аст, ки инҳоро дар бар мегирад:

  • Типография (Typography): Хусосиятҳои фаслҳо (font families), аҳамиятҳо (sizes), ва сатҳи қаҳрамонӣ (weights)
  • Ранг (Color): Палитраҳои асосӣ, дуюмӣ, акцентӣ ва худкор (neutral palettes)
  • Фасолатнокӣ (Spacing): Маълумотҳо барои фасолатнокии иловагӣ (padding), маргинал (margin) ва маҷмӯаҳои фасолатнокӣ (gap scales)
  • Ҳадислар (Borders): Токенҳои радиус ва ширити ҳадҳадҳо
  • Сарро (Shadows): Токенҳои баландӣ (elevation) ва амиқӣ (depth)
  • Ҳаракат (Motion): Аниматсияҳо ва тағйирот (transitions)

Ин қарорҳо дар файли theme.jsonи шумо дар мавриди тема интихоб карда мешаванд, ки системаи намоишӣ яке аз якхеларо месозад.

Чаро бояд Эстетикаи Системаи Намоишӣ-ро истифода баред?​

Мувофиқӣ (Consistency)​

Системаи дизайн таъмин мекунад:

  • Ҳамаи матнҳо аз як палитраи типография истифода мешаванд
  • Рангуҳо дар тамоми сайти шумо мувофиқ истифода мешаванд
  • Фасолатнокӣ аз намунаи пешгӯӣ пайравӣ мекунад
  • Аниматсияҳо якхела ҳис карда мешаванд

Солиавӣ (Efficiency)​

Ба ҷои он ки тасмимҳои дизайнро дар ҳар як саҳифа гиред, шумо:

  • Токенҳоро як бор муайян мекунед
  • Онҳоро дар ҳама ҷо мегираед
  • Бо тағйири як арзиш ба таври глобал таҳрир мекунед

Маслият (Flexibility)​

Шумо метавонед:

  • Системаи дизени шуморо сурат аз рӯи зуд тағйир диҳед
  • Барои таҷрибаи эстетикаҳои гуногун таҷриба кунед
  • Ҳангоми рушд, мувофиқӣ бо моҳияти брендро сақт нигозоред

Фаъол кардани Маҳорати Эстетикаи Системаи Намоишӣ​

Фаъолисозии Рушӣ (Manual Activation)​

Шумо метавонед маҳоратро дар ҳар вақти оғоз кунед:

"Help me refine my design system"

ё

"Let's improve my site's aesthetics"

ё

"Guide me through design system decisions"

Пулсиҳо аз ҷониби Агент (Automatic Suggestions)​

Агентаҳо метавонанд истифодаи маҳоратро пешниҳодиан кунанд, вақте ки шумо:

  • Дар бораи тағйирот дар дизайн пурсед
  • Талоби таҷдиди "муосир" ё "маҳсулӣ" (professional) дизейнро ифорза намоед
  • Мехоҳед мувофиқии визуалӣ беҳтар кунед
  • Барои оғоз кардани сайти худро тайёр мешавед

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

Шаг 1: Типографика​

Агент спрашивает о ваших выборе шрифтов:

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

Для вашего шрифта заголовка:
- Вы хотите отдельный шрифт для заголовков или использовать тот же, что и основной текст?
- Предпочтение: жирный, элегантный, игривый, минималистичный?

Для вашего шрифта основного текста:
- Читаемость — ключ ко всему. Вы предпочитаете:
  - Более крупный, просторный текст
  - Компактный, эффективный текст
  - Стандартный размер

Затем агент определяет следующее:

  • Шрифт заголовка (Heading font): Основной шрифт для заголовков и названий.
  • Шрифт основного текста (Body font): Шрифт для абзацев и основного текста.
  • Моноширинный шрифт (Monospace font): Шрифт для кода и технического контента.
  • Масштаб размеров (Size scale): Предварительно заданные размеры (маленький, базовый, большой, XL и т. д.).
  • Масштаб начертаний (Weight scale): Начертания шрифтов (обычный, средний, жирный и т. д.).
  • Высота строки (Line height): Расстояние между строками для удобства чтения.

Шаг 2: Цветовая палитра​

Давайте определим вашу цветовую палитру.

Основной цвет (цвет вашего бренда):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или шестнадцатеричный код]

Вторичный цвет (поддерживающий цвет):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или шестнадцатеричный код]

Акцентный цвет (для выделения и CTA):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или шестнадцатеричный код]

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

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

  • Основные, вторичные и акцентные цвета.
  • Нейтральные серые (светлые, средние, темные).
  • Семантические цвета (успех, предупреждение, ошибка).
  • Состояния наведения (Hover) и активного состояния (Active states).

Шаг 3: Отступы (Spacing)​

Чӣ қадар фазо (breathing room) мехоҳед?

Тасори маҷмӯи фазо (Spacing scale preference):

  • Compact (тақрибан, тартибҳои мукамдел ва самаранок)
  • Normal (фазои мувофиқ)
  • Spacious (фазои зиёд ва равшан)

Ин ба қуданҳо таъсир мерасонад:

  • Padding дохилӣ дар тугмаҳо ва кардҳо
  • Margins байни қисмҳо
  • Фазо байни элементҳои grid

Агент токенҳои фазоро муайян мекунад:

  • Ивоти асосӣ (одатан 4px ё 8px)
  • Масштаб: xs, sm, md, lg, xl, 2xl
  • Арзишҳои махсус барои padding, margin, gap

Қадами 4: Ҳадҷ ва Саёҳҳо (Borders and Shadows)​

Умқи назар ва тасвирро муайян кардан:

Тасори радиуси ҳадафӣ (Border radius preference):
- Sharp (бехираф, бе радиус)
- Subtle (радиуси хурд)
- Rounded (радиуси миёна)
- Very rounded (радиуси зиёд)

Умқи саёҳ (Shadow depth):
- Flat (бе саёҳҳо)
- Subtle (саёҳҳои худкор)
- Pronounced (саёҳҳои баланд ва кучкур)

Агент инҳоро месозад:

  • Токенҳои радиуси ҳадафӣ (барои тугмаҳо, кардҳо, киришҳо)
  • Токенҳои саёҳ барои дараҷаҳои баландӣ (elevation levels)
  • Токенҳои вардиши ҳадафӣ (Border width tokens)

Қадами 5: Ҳаракат ва Аниматсия (Motion and Animation)​

Вазифаи сайт шумо калидӣ бошад, ва баъд чӣ гуна ҳис кунад?

Тасори аниматсия (Animation preference):
- Minimal (аниматсияҳо мавҷуд нест)
- Subtle (таранҷуҳҳои заиф)
- Playful (аниматсияҳои назаррасонида)

Аниматсияҳои мушаххас:
- Тағйироти саҳифа: fade, slide ё бе?
- Hover тугмаҳо: scale, тағйир дар ранг, ё ҳарду?
- Вазиятҳои воридшавӣ (Loading states): spinner, skeleton, ё progress bar?

Агент инҳоро муайян мекунад:

  • Давраҳои тағйирот (fast, normal, slow)
  • Функсияҳои easing (ease-in, ease-out, ease-in-out)
  • Keyframes аниматсия барои ҳамкорӣ ва интераксияҳои маъмул

Татбиқи Зиёрати Системаи Дизайн (Applying Design System Aesthetics)​

Татбиқи Аוטوماتӣ (Automatic Application)​

Баъди он ки шумо маҳоратиро ба итмом мерасонед, агент:

  1. theme.jsonи мавзӯи шуморо бо ҳамаи токенҳо омода мекунад
  2. Системаи дизайнро ба мавзӯи фаъол иҷозат медиҳад
  3. Намудҳои блок (block styles) -ро барои мувофиқшавӣ бо системаи нав таҳия мекунад
  4. Мавзӯи навшударо фаъол мекунад

Татбиқи Рушӣ (Manual Application)​

Шумо инчунин метавонед 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%"

или

"Измени шрифт заголовка на шрифт с засечками (serif)"

Полный редизайн​

Запустите навык Дизайн-системы Эстетика заново:

"Давай переделаем всю мою дизайн-систему"

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

Частичные обновления​

Обновите конкретные аспекты:

"Просто обнови палитру цветов, оставь всё остальное как есть"

Лучшие практики дизайн-системы​

Последовательность (Consistency)​

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

Именование​

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

  • ✓ primary, secondary, accent (основной, вторичный, акцентный)

  • ✗ blue, color-1, main (синий, цвет-1, основной)

  • ✓ heading-lg, body-sm (заголовок-большой, текст-маленький)

  • ✗ font-size-24, text-large (размер шрифта-24, большой текст)

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

Системаи худкорӣ барои кашидани (scaling) онҳо:

  • Аз истифориёти ҳамавқатӣ (pixels) истифода набаред, балки аз якхел андозаҳои нисбий (rem, em) истифода кунед.
  • Ба ҷои арзишҳои бемаъни (arbitrary values), маҳсулотҳоро таҳия кунед (xs, sm, md, lg, xl).
  • Барои иловагузорӣ дар оянда нақша созед.

Документатсияи системаи дизайн​

Системаи худро ҳуҷҷатнамо кунед:

  • Чаро ин ранги муайянро интихоб кардед?
  • Ҳар як токен (token) вақте кадом мақсад дорад истифода шавад?
  • Номутобиаҳо ва ҳолатҳои махсус.

Шаблони маъмураи системаи дизайн​

Муосир ва Минималистӣ​

  • Типографии сенс-серфи (Inter, Helvetica)
  • Палитраи ранги маҳдуд (2-3 ранг)
  • Фасли зиёд (generous spacing)
  • Саёҳҳои ноболоға (subtle shadows)
  • Аниматсияҳои суръат ва хушрӯъ

Гарм ва Достӣ​

  • Маламати серфи ва сенс-серфи
  • Палитраи ранги гарм (оранжҳо, сабзҳои гарм)
  • Корнҳои гумирторак (rounded corners)
  • Саёҳҳои пухта (soft shadows)
  • Аниматсияҳои болоғон

Мутахассиси Корпоративӣ​

  • Сенс-серфи тоза (Roboto, Open Sans)
  • Палитраи худкор бо ранги таъсир (accent color)
  • Фаслаи сохторшуда (structured spacing)
  • Саёҳҳои минималӣ
  • Тағйироти ноболоға

Хунки ва Болоғон​

  • Типографии муфассал
  • Палитраи ранги болоғон
  • Фаслаи гуногун
  • Саёҳҳои қавӣ (strong shadows)
  • Аниматсияҳои назаррас

Ҳалли мушкилот (Troubleshooting)​

Тағйироти системаи дизайним нишон дода намешаванд

  • Кэши браузерро тоза кунед.
  • Агар аз генератори статик истифода мебаред, сайтро дигар бозасоз кунед.
  • Барои тасдиқи мувофиқшавии JSON Theme.json текшиданро иҷозат диҳед.
  • Тасдиқ намоед (theme) фаъол аст.

Рангиҳо дар сахнаҳои гуногун фарқ мекунанд

  • Барои тасдиқи CSS-и зидгар дар плагинҳо текшиданро иҷозат диҳед.
  • Тасдиқ кунед, ки ҳамаи сахнаҳо аз якхел Theme истифода мешаванд.
  • Ҳар ягон плагини кэшро тоза кунед.

Ман мехоҳам ба дизайн системаи қаблӣ боз оваршам

  • Аз агент хоҳиш кунед: "Историяи системаи дизайнимро нишон диҳед" (Show me my design system history).
  • Theme.json-ро мустақилона барои арзишҳои қаблӣ тағйир диҳед.
  • Маҳорати худро бо интихобҳои гуногун иҷро кунед.

Қадамҳои нав​

Баъди таърифи системаи дизайни худ:

۱. Наврузи сайт хулофан: Исходроҳ ба дахли мусобиқаи нав расонидаи худро бинасонед. ۲. Бош аз ин тавсеқат кунед: Инро меховианде, бо хосиятҳои худ ба он мувофиқ созед. ۳. Шаблонҳо созед: Бо истифода аз токенҳои дизайни худро, блокҳои кастомро бисозед. ۴. Документатсия кунед: Системи дизайни худро бо аъзои даста ҷалб кунед.