Skip to main content

Эстыка дызайну сістэмы

Эстыка дызайну сістэмы — гэта арганізаваны падыход да ўдасканалення візуальнай ідэнтычнасці вашага сайта. Ён дапамагае вам прымаць адрозненныя рашэнні адносна типографікі, колеру, пааперавання і "токенаў" руху, якія вызначаюць вашу дызайн-сістэму.

Што такое Эстыка дызайну сістэмы?​

Эстыка дызайну сістэмы — гэта структураваны навык, які ахоплівае:

  • Типографія: Семілы шрыфтаў, памеры, вага і высота паміж літарай.
  • Колер: Асноўныя, другогары, акцэнтавыя і нейтральныя палітравыя колеры.
  • Паапераванне: Паапераванне, маргін і паміжкрэсце.
  • Раўдзі: Токены па пакругленне і шырыні.
  • Цень: Токены па ўзвышенні і глыбіні.
  • Рух: Анімацыі і пераходы.

Гэтыя рашэнні фіктуюцца ў файле theme.json вашага тэмы, ствараючы спаójную візуальную сістэму.

Чаму выкарыстоўваць Эстыку дызайну сістэмы?​

Паójнасць​

Дызайн-сістэма гарантуе:

  • Што ўвесь тэкст выкарыстоўвае адногадны ўзровень типографікі
  • Што колеры выкарыстоўваюцца адногадным чынам на ўсім сайце
  • Што паапераванне выказваецца па прадказальным узроўні
  • Што анімацыі здаюцца аднымі

Эфектыўнасць​

Замест таго, каб прымаць дызайнерскія рашэнні для кожнага адрознега бока, вы:

  • Вызначаеце токены адзін раз
  • Выкарыстоўваеце іх усё па ўсім сайце
  • Абнаўляеце ў цэлым, змяніўшы адзін параметр

Гнуткасць​

Вы можаце:

  • Шангатыпна адрэгуляваць усю вашу дызайн-сістэму
  • Экспериментаваць з рознымі эстыкамі
  • Падтримантаваць паójнасць брэнда, праходзячы эвалюцыю

Выклікаванне Эстыкі дызайну сістэмы​

Ручная актывацыя​

Вы можаце пачаць гэты навык у любы час:

"Дапамажы мне ўдасканаліць маю дызайн-сістэму"

або

"Дай нам палепшыць эстыку мага сайта"

або

"Пракводзьце мяне па рашэнні дызайн-сістэмы"

Аўтаматычныя прапановы​

Агенты могуць прапанаваць выкарыстоўваць гэты навык, калі вы:

  • Спрашуеце пра змены ў дызайне
  • Патрабуюць перапраектаваць сайт у "сучасным" або "прафесійным" стылі
  • Хоцяце палепшыць візуальную паójнасць
  • Падрыхтоўваецеся да запуску сайта

Процэс Эстыкі дызайну сістэмы​

Крок 1: Типографія​

Агент запытвае вас пра выбар шрыфтаў:

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

Для шрыфту загаловаў:
- Ці хочаце вы адрозністы шрыфт для загаловаў, ці выкарыстоўваць той жа, што і для тэксту?
- Параўнальна: вага, элегантнасць, гульнявісць, мінімалізм?

Для шрыфту тэксту:
- Чытальнасць — гэта галоўнае. Ці пераважываеце вы:
  - Больш вялікі, больш паапераваны тэкст
  - Кампактны, эфектыўны тэкст
  - Стандартны памер

Затым агент вызначае:

  • Шрыфт загаловаў: Асноўны шрыфт для загаловаў і заголаваў
  • Шрыфт тэксту: Шрыфт для абзацаў і тэксту
  • Моноспацэ шрыфт: Шрыфт для кода і тэхнічнага кантэнту
  • Памерны ўзровень: Падгледжаныя памеры (маленькі, асноўны, вялікі, XL і г.д.)
  • Вагавы ўзровень: Вагі шрыфтаў (рэгулярны, сярэдні, важны і г.д.)
  • Высота паміж літарай: Паапераванне паміж літарай для выдатнай чытальнасці

Крок 2: Палітра колераў​

Дай нам вызначыць вашу палітру колераў.

Асноўны колер (колер вашага брэнда):
- Зараз: [паказвае існуючы колер]
- Змяніць на: [выбар колеру або гекса-код]

Другогарны колер (падтрымковы колер):
- Зараз: [паказвае існуючы колер]
- Змяніць на: [выбар колеру або гекса-код]

Акцэнтавы колер (выдзелення і CTA):
- Зараз: [паказвае існуючы колер]
- Змяніць на: [выбар колеру або гекса-код]

Нейтральная палітра (сіры колеры для тэксту, раўдзі, фонаў):
- Светлы: [колер]
- Сярэдні: [колер]
- Цiemны: [колер]

Агент стварае поўную палітру, уключаючы:

  • Асноўныя, другогарныя і акцэнтавыя колеры
  • Нейтральныя сіры колеры (светлы, сярэдні, цiemны)
  • Сэмантычныя колеры (успіх, па::, па::)
  • Станы на наведванні і актыўнасці

Крок 3: Паапераванне​

Якай патрабуецца "дыхальны прамежне"?

Паапераварны ўзровень:
- Кампактны (тугія, эфектыўныя раскладкі)
- Нормальны (балансаванае паапераванне)
- Паапераваны (шмат "білай" прасторы)

Гэта ўплывае на:
- Паапераванне ўнутры кнопак і картак
- Маргіны паміж секцыямі
- Паміжкрэсце паміж элементамі сеткі

Агент вызначае токены пааперавання:

  • Базавы адрасіль (завыкліва 4px або 8px)
  • Узровень: xs, sm, md, lg, xl, 2xl
  • Канкрэтныя значэнні для пааперавання, маргіна, паміжкрэсца

Крок 4: Раўдзі і Цень​

Візуальная глыбіня і вызначэнне:

Пакругленне раўдзі:
- Рэзкае (без пакруглення)
- Вытончанае (маленькае пакругленне)
- Пакругленае (сярэдняе пакругленне)
- Вельмі пакругленае (вялікае пакругленне)

Глыбіня ​​цяні:
- Плоскі (без цэняў)
- Вытончанае (светлыя цэні)
- Выяўлены (моцныя цэні)

Агент стварае:

  • Токены па пакругленні раўдзі (для кнопак, картак, паляў ўводзін)
  • Токены цэні для ўзроўняў ўзвышенні
  • Токены па шырыні раўдзі

Крок 5: Рух і Анімацыя​

Як павінны адчувацца вашыя сайт, калі яны ўзажываюцца?

Папераванне анімацыі:
- Мінімальны (без анімацый)
- Вытончанае (мяккія пераходы)
- Гульняві (заметныя анімацыі)

Канкрэтныя анімацыі:
- Пераходы па страных: згасаванне, злічванне або адсутнісць?
- Навешанне на кнопцы: памер, змена колеру або апошні?
- Станы загруўкі: спіннер, скелетон або палока прагрэсу?

Агент вызначае:

  • Тэрміны пераходу (вястры, нормальны, павольны)
  • Функцыі змягчэння (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 у тэкставым рэдактары, каб пабачыць сырыя вызначэнні токенаў.

Абнаўленне вашай дызайн-сістэмы​

Швидкія абнаўленні​

Паспрашуйце агента пра канкрэтныя змены:

"Зрабі пачатковы колер больш цiemным"

або

"Павеліч паапераварны ўзровень на 20%"

або

"Змяні шрыфт загаловаў на сэрыф"

Перапраектаванне ў цэлым​

Паўторна прайце навык "Эстыка дызайну сістэмы":

"Дай нам перапраектаваць усю маю дызайн-сістэму"

Гэта правесці вас па ўсіх рашэннях зноў, пачынаючы з вашага бягунага значэння.

Частковае абнаўленне​

Абнавіце канкрэтныя аспекты:

"Просто абнавіць палітру колераў, захаваўшы ўсё іншае"

Найлепшыя практыкі дызайн-сістэмы​

Паójнасць​

  • Выкарыстоўвайце адногадныя токены ўсюды
  • Не стварайце адрозныя колеры або памеры
  • Ссылайцеся на токены, а не хардкадзіруеце значэнні

Назваванне​

Выкарыстоўвайце ясную, сэмантычную назвы:

  • ✓ 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. Дакументуйце: Падзяліце свой дызайн-сістэму з каманднымі ўдзельнікамі