CodeGym /Kurslar /ChatGPT Apps /Vizual dizayn: mövzular, rənglər, tipoqrafiya, boşluqlar ...

Vizual dizayn: mövzular, rənglər, tipoqrafiya, boşluqlar və hazır kitabxanalar

ChatGPT Apps

Səviyyə , Dərs

Mövcuddur

1. Kontekst: sizin App — ChatGPT-nin evində qonaqdır

Düymələr çəkməzdən və şriftləri seçməzdən əvvəl bir həqiqəti qəbul etmək vacibdir: istifadəçi “sizin saytınızı” açmır, o, ChatGPT-də əyləşib. ChatGPT-nin artıq öz:

rəng sxemi,
şriftləri və ölçüləri,
boşluqları və elementlərin düzülüşü var.

Vidjetiniz bu mühit daxilində, çox vaxt iframe-də göstərilir. Buradan vacib nəticə çıxır: vizual olaraq App ChatGPT interfeysinin təbii davamı kimi görünməlidir, 2008-dən gəlmiş banner kimi yox.

OpenAI-nin rəsmi qaydaları da məhz bunun üçündür: sistem rənglərini və şriftləri sındırmamaq, yalnız moderat brend vurğuları əlavə etmək və platformanın əsas tipoqrafiya və boşluq şəbəkəsinə riayət etmək.

Praktik baxımdan bu üç şeyi ifadə edir.

Birincisi, fon, əsas mətn rəngi, standart tipoqrafiya — bütün bunlar ChatGPT-dən və ya sistem dəyişənlərindən miras alınmalıdır, “mən rəssamam, belə görürəm” deyil.

İkincisi, “öz stilinizi” istəyirsinizsə, onu vurğularda cəmləşdirin: əsas düymələr, beyclər, seçilmiş vəziyyətlər. Amma nə rəngarəng fon, nə də Comic Sans kimi xüsusi şrift — ürəyiniz çox istəsə belə.

Üçüncüsü, eyni App-in inline və fullscreen rejimləri vizual olaraq bir dünyanın parçası olmalıdır: eyni CTA rəngləri, kartların eyni radiusları və boşluqları, eyni tipoqrafiya. İstifadəçi inline-dan fullscreen-ə keçəndə sanki başqa məhsula düşdüyünü hiss etməməlidir.

İndi qat-qat baxaq: rənglər və mövzular, tipoqrafiya, boşluqlar və şəbəkə, sonra isə Tailwind və shadcn/ui bütün bunları necə “yığmağa” kömək edir.

Insight

ChatGPT sandbox təkcə vidjetinizin funksionallığını məhdudlaşdırmır, həm də ona öz stillərini əlavə edir.

Birincisi — bu, HTML başlığıdır

Saytdakı orijinal:

<html lang="ru">

Sandbox-da:

<html lang="en-US" data-theme="light" class="light" style="--safe-area-inset-top: 0px; --safe-area-inset-bottom: 0px; --safe-area-inset-left: 0px; --safe-area-inset-right: 0px;">

İkincisi — bu, daxili (native) CSS stilləridir ki, vidjetiniz daha çox ChatGPT-yə bənzəsin:

<style>
  html,body,#root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}
  html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif!important}
  button,input,textarea,select{font-family:inherit}
  html{background-color:#fff}
  html.dark{background-color:#212121}
  html.mobileSkybridge.dark{background-color:#000}
  @supports (font: -apple-system-body){html.mobileSkybridge{font:-apple-system-body}}
</style>

Bunu xatırlamaq daha yaxşıdır — sürprizlər azalar.

2. Mövzular və rənglər: açıq və qaranlıq aləmdə yaşayırıq

Açıq və qaranlıq mövzular

ChatGPT interfeysi artıq açıq və qaranlıq mövzuları dəstəkləyir. Vidjetiniz onlardan birinin içində göstərilir və istifadəçi istənilən vaxt aralarında keçid edə bilər. Deməli, sərt şəkildə hardcode edilmiş ağ və ya qara fonlar — potensial minadır.

Tutaq ki, vidjet ağ fon və qara mətn çəkir. Açıq mövzuda birtəhər görünür. Qaranlıq mövzuda — gözə proyektor kimidir. Əks vəziyyət də yaxşı deyil: açıq mövzuda qara fon. Məhz buna görə rəsmi tövsiyələr rəngləri hardcode etməməyi, hostun mövzusu/dəyişənlərinə söykənməyi məsləhət görür.

Apps SDK mühiti adətən cari mövzu üçün sizə API və ya CSS‑dəyişənləri verir. Sənədlərdə window.openai.theme və ChatGPT-nin standart CSS‑dəyişənlərindən istifadə kimi variantlar çəkilir. Üstəlik, prefers-color-scheme və Tailwind-də dark: utilitiləri də heç kim ləğv etməyib.

Fikir təxminən belədir: vidjetiniz hostun mövzusuna avtomatik uyğunlaşdırmalıdır:

kartların fonu (baza fondan bir az daha açıq/tünd),
mətn rəngi (kifayət qədər kontrast),
çərçivələr, kölgələr və hover vəziyyətləri.

Tailwind ilə mövzu üçün sadə bir wrapper nümunəsi:

// components/AppShell.tsx
export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-background text-foreground">
      {/* bg-background/text-foreground mövzu tərəfindən yenidən təyin olunur */}
      {children}
    </div>
  );
}

Burada bg-background və text-foreground — standart Tailwind sinifləri deyil, sizin dizayn sisteminizin CSS‑dəyişənlərinə (məsələn, shadcn/ui) aliaslardır və onlar öz növbəsində ChatGPT-nin açıq/qaranlıq mövzusuna bağlıdır.

Sistem rəngləri vs brend vurğuları

OpenAI kifayət qədər aydın deyir: ChatGPT-nin sistem rənglərini dəyişmək olmaz. Baza mətn, standart çat panelləri, fon — bunların hamısı platformanın ümumi rənglərində qalmalıdır. Sizin meydançanız — vidjet daxilindəki vurğulardır: CTA düymələri (call to action — əsas hərəkət), beyclər, kiçik elementlər.

GiftGenius təcrübəsində bu o deməkdir ki:

hədiyyə kartının fonu sistem fona yaxındır,
mətn — çatda olduğu kimi adi rəngdədir,
GiftGenius-un korporativ rəngi əsas “Hədiyyəni seç” düyməsində və bəlkə də endirim beyclərində istifadə olunur.

Bunu cədvəl kimi təsəvvür etmək olar:

Element	Nə etmək lazımdır	Nədən qaçınmaq lazımdır
Vidjetin fonu	ChatGPT-dən miras alın	Parlaq brend qradienti qoymaq
Əsas mətn	Sistem rəngini miras alın	Oxunmaz dərəcədə rəngli/boz etmək
Əsas CTA‑düymə	Brend vurğu rəngindən istifadə edin	Üzərinə “göy qurşağı” və 5 rəng “çəkmək”
İkincil düymələr/keçidlər	Sistem linklərinə yaxın	Onları CTA qədər parlaq etmək
Kölgələr/çərçivələr	Zərif, minimalist	Qalın neonsayağı konturlar

Tailwind ilə əsas rəng üçün kiçik nümunə:

// styles/globals.css (fraqment)
:root {
  --gift-accent: 222 84% 56%; /* hsl */
}

.dark {
  --gift-accent: 222 84% 64%; /* dark üçün bir az daha açıq */
}

// components/GiftButton.tsx
export function GiftButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-md bg-[hsl(var(--gift-accent))] px-4 py-2 text-sm font-medium text-white hover:opacity-90">
      {children}
    </button>
  );
}

Siz bütün vidjetin fonuna toxunmursunuz, sadəcə öz rənginizi əsas CTA‑düyməsinə nəzakətlə tətbiq edirsiniz.

Kontrast və WCAG — fanatizm olmadan

WCAG imtahanına hazırlaşmasanız belə, sadə bir meyar var: mətn oxunaqlı olmalıdır. Şrift nə qədər kiçikdirsə, kontrast bir o qədər yüksək olmalıdır. Əlçatanlıq kurslarında əsas mətn üçün mətnin fonda kontrastını təxminən 4.5:1-dən aşağı salmamağı məsləhət görürlər. Standartların dərinliklərinə girmirik: bizə bir praktik meyar lazımdır — mətn və fon arasında kifayət qədər kontrast.

Praktikada:

“zəriflik” naminə açıq boz mətni açıq boz fonda istifadə etməyin;
qaranlıq mövzuda demək olar qara fonda tünd boz mətndən qaçın;
heç olmasa gözlə yoxlayın: gözlərinizi qıyırsınızsa — istifadəçinin də canı yanacaq.

Özünüzlə belə razılaşa bilərsiniz: istənilən ikinci dərəcəli mətn (yazılar, ipucları) yenə də oxunandır, sadəcə rəng və ölçü baxımından bir az daha az vurğuludur, amma “tamamilə şəffaf” deyil.

3. Tipoqrafiya: sistem şriftləri, ierarxiya və bir az sağlam məntiq

Sistem şriftləri “öz” font dəstiniz əvəzinə

Rəsmi qaydalar platformanın sistem şriftlərindən, məsələn, SF Pro, Roboto və onların analoglarından istifadə etməyi və öz webfontunuzu soxmamağı tövsiyə edir. Səbəb təkcə performans deyil, həm də App-in interfeysin “doğma” elementi kimi görünməsidir.

Next.js tətbiqində ən rahat yol budur ki, vidjet daxilində hər şey baza sistem stekini miras alsın. Tailwind-də bu adətən artıq font-sans kimi qurulub. Daha açıq göstərmək istəsəniz:

// app/layout.tsx (fraqment)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="font-sans antialiased">
        {children}
      </body>
    </html>
  );
}

Google Fonts-dan 3 ailə qoşmağa ehtiyac yoxdur. Tədris məqsədli GiftGenius üçün sərt sistem şrifti uydurma Lobster-dən daha səliqəli görünəcək.

Ölçü iyerarxiyası

Bizə bir neçə tipoqrafik səviyyə kifayətdir: blok başlığı, altbaşlıq/əsas parametr, əsas mətn və qeyd.

Məsələn, GiftGenius-un inline kartı üçün belə səviyyələr üzərində razılaşmaq rahatdır:

Rol	Tailwind sinfi	Nümunə
Kartın başlığı	`text-base font-semibold`	Hədiyyənin adı
Əsas parametr	`text-sm font-medium`	Qiymət və ya kateqoriya
Təsvir	`text-sm text-muted-foreground`	Qısa təsvir
Qeyd/xırdalıqlar	`text-xs text-muted-foreground`	Çatdırılma, mağaza

Kiçik kart komponenti:

// components/GiftCard.tsx
type GiftCardProps = {
  title: string;
  price: string;
  description: string;
};

export function GiftCard({ title, price, description }: GiftCardProps) {
  return (
    <div className="rounded-lg border bg-card p-4">
      <h3 className="text-base font-semibold">{title}</h3>
      <p className="mt-1 text-sm font-medium text-emerald-600">{price}</p>
      <p className="mt-2 text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

Burada:

nəhəng H1 yoxdur;
bütün məlumatlar kompaktdır;
ierarxiya şriftin ölçüsü və sərtliyi ilə oxunur.

Hizalama və sətirlərin uzunluğu

Çat interfeysi adətən dardır, xüsusilə inline-da. Odur ki, mürəkkəb tipoqrafiya ilə beyin yormaq lazım deyil: sol hizalama və sətir uzunluğu 40–60 simvol kifayət qədər komfortludur.

Faydalı vərdişlər:

kartda uzun mətnləri mərkəzləşdirməyin — oxumaq çətindir;
HAMISINI BÖYÜK HƏRFLƏRLƏ yazmayın;
çox ciddi səbəb olmadan baza mətni 14 px-dən kiçik etməyin (Tailwind-də bu text-sm).

Şübhə olduqda xatırlayın: oxuyan, metroda telefonda yorğun bir insan olacaq, 27 düymlük ideal monitor qarşısındakı siz deyil.

4. Boşluqlar, sıxlıq və şəbəkə

Əgər rənglər və şriftlər “boya”dırsa, boşluqlar — havadır. Onlarsız ən səliqəli kartlar belə xaosa çevrilir.

OpenAI öz tövsiyələrində vurğulayır: elementlər “yapışmamalıdır”, boşluqlar və radiuslar dizayn sistemi və ya UI framework-dən (Tailwind, shadcn/ui və s.) götürülməlidir, üfüqi skrol isə minimuma endirilməlidir.

“Nəfəs alma” prinsipi

Ən sadə pattern: vahid boşluq şkalasından istifadə etmək (məsələn, 4 px və ya 8 px addım) və hər dəfə “öz” ölçüsünü icad etməmək. Tailwind-də bu artıq var: p-2, p-3, p-4, gap-3 və s.

Inline-da hədiyyə siyahısı üçün kiçik şəbəkə nümunəsi:

// components/GiftListInline.tsx
export function GiftListInline({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3">
      {children}
    </div>
  );
}

Hər kartı gap-3 ayırır, daxildə p-4 var və bu da siyahının “çarpayı vərəqi” kimi görünməməsi üçün yetərlidir.

Sütunlar: inline və fullscreen

Apps SDK üçün UX sənədlərində inline vidjet üçün kartların 1–2 sütunda saxlanması, fullscreen üçün isə kifayət qədər en olduqda 2–3 sütuna icazə verilməsi tövsiyə olunur.

Səbəb sadədir: çatda en məhduddur, xüsusilə mobil cihazda, və iki sütun artıq oxunaqlılığın sərhədindədir. Fullscreen-də isə demək olar ki, bütün ekrana sahibsiniz və məzmunu daha sıx yerləşdirə bilərsiz.

Təxmini sxem:

flowchart LR
  subgraph Inline
    A[1 sütun
dar ekran]
    B[2 sütun
desktop-da]
  end

  subgraph Fullscreen
    C[2 sütun
əsas ssenari]
    D[3 sütun
şəbəkələr/kataloqlar üçün]
  end

Tailwind-də GiftGenius üçün gerçəkləşdirmə:

// components/GiftGrid.tsx
export function GiftGrid({ fullscreen, children }: { fullscreen?: boolean; children: React.ReactNode }) {
  const base = fullscreen ? "grid-cols-2 md:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";

  return (
    <div className={`grid gap-4 ${base}`}>
      {children}
    </div>
  );
}

Inline rejimində mobil cihazda bir, daha geniş ekranlarda iki sütun verirsiniz. Fullscreen-də isə enindən asılı olaraq dərhal 2–3 sütun verirsiniz.

Üfüqi skrolldan qaçaq

Çat təbiətən şaqulidir. İstifadəçi aşağıya doğru skroll etməyə öyrəşib, yana yox. Ona görə:

cədvəllər və kartlar konteynerin eninə sığsın;
güclü çevik konteynerdə yaşayan element üçün width: 600px; kimi sabit enlər verməyin;
max-w-full, overflow-x-auto-dan yalnız “son şans” kimi istifadə edin, defolt kimi yox.

GiftGenius kartları üçün w-full vermək və neçə kartın sıraya sığacağını şəbəkənin həll etməsinə icazə vermək rahatdır.

5. ChatGPT konteyneri daxilində adaptivlik

Adi frontend-də siz viewport üzərində tam nəzarətə maliksiniz. ChatGPT-də bu nəzarət məhduddur: vidjetiniz öz qayda və ölçüləri olan çat konteynerinə yerləşdirilir. Apps SDK bir neçə faydalı körpü verir: maksimal hündürlük, ekran kəsikləri üçün safe area, cihaz tipi və s.

maxHeight və şaquli məhdudiyyətlər

Inline rejimində ChatGPT vidjetin hündürlüyünü məhdudlaşdıra bilər ki, bütün ekranı “yeyib” bitirməsin. useMaxHeight() kimi hook-lar hazırda nə qədər yerin dürüstcə tutula biləcəyini bilməyə və lazımi yerdə daxili skrol asmağa imkan verir.

Psevdokod:

// Psevdokod, real API deyil:
const maxHeight = useMaxHeight();

return (
  <div style={{ maxHeight, overflowY: "auto" }}>
    <GiftGrid>{/* ... */}</GiftGrid>
  </div>
);

Beləcə vidjetin ekranın alt kənarına dirəndiyi və çat mesajlarının “harasa keçmiş həyata getdiyi” vəziyyətdən qaçırsınız.

safeArea və mobil cihazlar

Mobil cihazlarda yuxarıda və aşağıda kəsiklər, status bar, sistem panelləri ola bilər. Apps SDK safeArea almağa və heç nəyin telefonun “çölkə”sinin altına girməməsi üçün boşluqları tənzimləməyə imkan verir.

CSS səviyyəsində əlavə paddings əlavə etmək olar:

// Psevdokod
const { top, bottom } = useSafeArea(); // tutalım ki, { top: 8, bottom: 16 } qaytarır

return (
  <div style={{ paddingTop: top, paddingBottom: bottom }}>
    {/* kontent */}
  </div>
);

Bu mühazirədə bizim üçün prinsip daha önəmlidir: vidjet maksimal hündürlüyə və təhlükəsiz sahəyə hörmət etməlidir, əks halda UX dərhal “düyməni görmək üçün daha üç dəfə skroll et” halına düşür.

6. Tailwind və shadcn/ui: düymələri yenidən ixtira etməyin

Bütün UI-ı təmiz CSS ilə əl ilə yazmaq indi artıq demək olar ki, hardkor idmandır. ChatGPT Apps kontekstində testdən çıxmış bir kitabxananı götürüb platforma tələblərinə uyğunlaşdırmaq daha asandır. Kursda Tailwind və shadcn/ui-a baza steki kimi söykənirik.

Tailwind boşluq və rənglər üçün lüğət kimi

Tailwind rahat utilitilər dəsti verir:

boşluqlar (p-4, gap-3),
ölçülər (text-sm, text-base),
rənglər (text-muted-foreground, bg-card), hansılar ki, shadcn/ui və oxşar sistemlərdə artıq mövzu CSS‑dəyişənlərinə bağlıdır.

Bu, ChatGPT tələblərinə mükəmməl oturur:

özbaşına boşluqlar icad etmirsiniz,
mətn ölçülərini konsistent təyin edirsiniz,
sistem rənglərini sındırmırsınız, əvvəlcədən razılaşdırılmış tokenlərdən istifadə edirsiniz.

shadcn/ui səliqəli komponent dəsti kimi

shadcn/ui (və oxşar kitabxanalar) hazır Card, Button, Input, Tabs və s. verir, Tailwind mövzusuna köklənmiş vəziyyətdə. Bu, təmiz, minimalist interfeysin yığılmasını, xüsusən GiftGenius kartları üçün, xeyli sürətləndirir.

shadcn/ui ilə GiftCard nümunəsi:

// components/GiftCardShadcn.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

type GiftCardProps = {
  title: string;
  price: string;
  description: string;
};

export function GiftCardShadcn(props: GiftCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">{props.title}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <p className="text-sm font-medium text-emerald-600">{props.price}</p>
        <p className="text-sm text-muted-foreground">{props.description}</p>
        <Button className="mt-2">Hədiyyəni seç</Button>
      </CardContent>
    </Card>
  );
}

Burada əsas olan shadcn-in özü deyil, prinsiplərdir:

başlıq nəhəng deyil;
təsvir oxunaqlıdır;
düymə ümumi dizayn sisteminə uyğun tərtib olunub, “öz xətti” ilə yox.

ChatGPT-ə uyğunlaşdırma

Real layihədə palitranı ChatGPT-nin minimalist üslubuna uyğunlaşdıra bilərsiniz: açıq fon, yumşaq kölgələr, səliqəli radiuslar. Modulun planı yeni bir kainat yaratmaq yox, mövcud dizayn sisteminə söykənməyi birbaşa təklif edir.

Sadə yanaşma:

baza kimi shadcn/ui götürün;
sistem şriftini saxlayın;
primary / accent tokenlərində bir‑iki brend rəngini tənzimləyin;
inline və fullscreen-in eyni tokenlərdən istifadə etdiyinə əmin olun.

Beləliklə, əlavə əziyyət çəkmədən bütöv vizual nüvə əldə edirsiniz.

7. GiftGenius-un vizual dili: hamısını birləşdirək

Gəlin sistemləşdirək: şərti GiftGenius üçün artıq nələri “vizual dil” hesab etmək olar.

Birincisi, rəng sxemi. Fon və mətn ChatGPT-dən miras alınır; vurğu rəngi — gözə batmayan, amma nəzərə çarpan — CTA düymələrində və bəlkə də endirim beyclərində tətbiq olunur. Qaranlıq mövzuda bu vurğu bir az daha açıqdır ki, kontrast qorunsun.

İkincisi, tipoqrafiya. Baza sistem şrifti, əsas mətn üçün text-sm, kart başlıqları üçün text-base. Kursiv və CAPS nadir hallarda, yalnız yerinə görə istifadə olunur. Fullscreen “master”də başlıqlar bir addım böyükdür, amma hələ də çığırtılı text-4xl deyil.

Üçüncüsü, boşluqlar və şəbəkə. Inline rejimində hədiyyə siyahısı — gap-3/gap-4 ilə bir və ya iki sütun, hər kart p-4 ilə. Fullscreen rejimində — 2–3 sütun, formanı və düymələri ayıran kifayət qədər boşluq. Əsas ssenarilər üçün üfüqi skroll yoxdur.

GiftGenius ekranları üçün kiçik sxem:

graph TD
  A[Inline: hədiyyə siyahısı] --> B[GiftCard
rənglər/tipoqrafiya/CTA]
  A --> C[GiftGrid 1–2 sütun]

  D[Fullscreen: seçim master-i] --> E[Addım 1
forma]
  D --> F[Addım 2
filtrlər/aralıqlar]
  D --> G[Addım 3
təsdiq]
  
  B --> H[GiftButton
brend vurğusu]

Dördüncüsü, host kontekstinə uyğunluq. Bütün elementlər açıq/qaranlıq mövzu arasında keçiddə səliqəli davranır, maxHeight-ə hörmət edir və safe-area altına gizlənmir. Rənglər ChatGPT ilə “mübahisə etmir”, CTA düymələri isə hər yerdə eyni görünür ki, istifadəçi əzələ yaddaşı ilə hara basacağını bilsin.

Belə qərar toplusu tətbiqinizi yalnız proqramçılara yox, həm də real istifadəçilərə və ya məhsul menecerlərinə göstərməyə yararlı edir: “burada MCP, orada Agents SDK” deməkdən başqa danışası şeylər olacaq.

8. Əlçatanlıq (Accessibility Guidelines, WCAG AA)

Kontrast və fon barədə danışanda WCAG-ı qısaca xatırlatmışdıq (bax: bölmə 2.3). Orada bir praktik meyar lazım idi — oxunaqlılığı öldürməmək. İndi əlçatanlığa bir az geniş baxaq: eyni interfeys gözlə görməyənlər üçün necə görünür və ChatGPT üçün səs rejimində nə deməkdir.

WCAG AA — beynəlxalq WCAG (Web Content Accessibility Guidelines) qaydaları toplusundan əlçatanlıq səviyyəsidir; müxtəlif görmə, motorika, kognitiv xüsusiyyətləri olan insanlar üçün sayt və interfeysləri necə əlçatan etmək lazım olduğunu təsvir edir.

WCAG AA-nın əsas ideyası — interfeysi sadəcə “nəzəri cəhətdən əlçatan”dan həqiqətən istifadə oluna bilən hala gətirməkdir. Bu səviyyə qarşılıqlı əlaqənin keyfiyyətinə birbaşa təsir edən onlarla tələbi birləşdirir. Onların arasında artıq danışdığımız təxminən 4.5:1 mətn‑fon kontrast həddi, həmçinin kliklənə bilən sahələrin ölçüləri, fokus vəziyyətləri, formalarda səhvlər və s. var.

Ayrı qat — əlçatanlıq texnologiyalarının dəstəyi, o cümlədən screen reader-lər. AA səviyyəsi düzgün semantikanı tələb edir: başlıqlar — başlıq olmalıdır, siyahılar — siyahı, düymələr — düymə; interaktiv elementlərin rolları və mətn alternativləri düzgün təyin edilməlidir. Bu, VoiceOver, TalkBack və ya NVDA kimi proqramlardan istifadə edənlərin interfeysin strukturunu və mənasını tam anlamasına imkan verir.

Screen reader (ekran oxuyucusu)

Screen reader (ekran oxuyucusu) — bu, ekran məzmununu səsləndirən və/və ya strukturlaşdıran proqramdır; görmə məhdudiyyətli insanlara kompüterdən, smartfondan və veb tətbiqlərdən istifadə etməyə imkan verir.

Amma screen reader sadəcə “mətni ucadan oxuyan proqram” deyil. Bu, interfeyslə qarşılıqlı fəaliyyəti həyata keçirən tam bir sistemdir və saytın/tətbiqin vizual təqdimatını qavranıla bilən səsli və strukturlaşdırılmış naviqasiyaya çevirir.

ChatGPT, screen reader və WCAG AA

Vidjetiniz WCAG AA prinsiplərinə (düzgün rollar, başlıqlar, düymələrə yazılar) uyğun işarələnibsə, o, təkcə screen reader-lər üçün deyil, həm də ChatGPT üçün səs rejimində anlaşıqlı olur. İstifadəçi ChatGPT ilə səsli danışır, model isə eyni semantik struktura əsaslanaraq “virtual olaraq” insanın etdiyi kimi hərəkət edir: lazım olan elementləri tapır, düymələri basır, keçidlərə klik edir və s.

ChatGPT Store tələblərinə görə WCAG AA dəstəyi hər bir tətbiq üçün məcburidir. Hər bir vidjet və hər bir alətin (tool) mümkün qədər keyfiyyətli və detallı təsvirləri olmalı, layout isə WCAG AA standartlarına uyğun yerinə yetirilməlidir: düzgün semantika, oxunaqlı yazılar, proqnozlaşdırıla bilən vəziyyətlər.

Beləliklə, WCAG AA tələbi “xüsusi ehtiyacı olan insanlar üçün ayrıca fıçı” deyil, baza dizayn prinsipidir; bu, ChatGPT Apps-in tətbiqinizlə tam işləyə bilməsi üçün, o cümlədən istifadəçi səs rejimində danışanda, vacibdir.

Voice‑UX ssenarilərinə, səsli dialoqun mətnli dialoqdan fərqlərinə və ChatGPT Store tələblərinə bu modulun digər dərslərində və App-in dərc edilməsi modulunda ayrıca qayıdacağıq. Amma bütün bunlar indi gördüyünüz fundament üzərində dayanır: səs rejimi = multimodallıq + əlçatanlıq (WCAG AA + screen reader-lər).

9. ChatGPT App üçün tipik vizual dizayn səhvləri

Səhv №1: Ağ/qara fonu və mətn rənglərini sərt şəkildə hardcode etmək.
Tərtibatçı qaranlıq mövzunu düşünmədən ağ fon və qara mətn çəkir. Açıq mövzuda birtəhər yaşayır, qaranlıqda — proyektora çevrilir və bütün UX-i korlayır. Daha düzgünü sistem rənglərindən və host mövzusundan (CSS‑dəyişənlər, prefers-color-scheme və ya Apps SDK API-ləri) istifadə etmək, öz rənglərini isə yalnız vurğular üçün saxlamaqdır.

Səhv №2: Həddindən artıq aqressiv brendinq.
Parlaq qradient fon, xüsusi şrift, əlvan çərçivələr peyda olur. Vidjet ChatGPT interfeysinin bir hissəsi yox, promo-bannera bənzəyir. Qaydalar əksini tələb edir: minimalist, “doğma” görünüş; brend rəngi yalnız əsas elementlərdə, məsələn, əsas düymələrdə səliqə ilə istifadə olunur.

Səhv №3: Tipoqrafiyada ierarxiyanın olmaması.
Bütün mətnlər eyni ölçü və çəkidədir, ya da əksinə — kiçik kartda üç səviyyəli başlıq, bir də CAPS. İstifadəçi nəyi əsas götürəcəyini anlamır: adı, qiyməti, yoxsa təsviri. Daha yaxşısı, əvvəlcədən 3–4 səviyyə üzərində razılaşın və həmişə onlara əməl edin: başlıq, əsas parametr, baza mətn, qeyd.

Səhv №4: Boşluqsuz, “yapışmış” elementlər.
Kartlar bir-birinə yapışıb, mətn kənara dirənib, düymələr mətnə sıxılıb. Desktop-da bu hələ dözüləndir, mobil cihazda vizual səs-küyə çevrilir. Vahid boşluq şkalasından (məsələn, Tailwind sinifləri p-4, gap-3) istifadə etmək və havaya “qənaət etməmək” tövsiyə olunur.

Səhv №5: Inline rejimində 4–5 sütunu sığışdırmaq cəhdi.
Tərtibatçı hələ də e-ticarət səhifəsində olduğunu düşünür və çatda dörd dar kartdan ibarət plitə düzəldir. Geniş ekranda bu mübahisəlidir, mobil cihazda isə ümumiyyətlə oxunmaz olur, üfüqi skroll əlavə olunur. Inline vidjet üçün adətən bir-iki sütun kifayətdir; üçüncü sütunu fullscreen rejiminə saxlayın.

Səhv №6: Hündürlük məhdudiyyətlərini və safe‑area-nı görməzdən gəlmək.
Vidjet daxili skrolsuz nəhəng siyahı çəkir və maxHeight-i nəzərə almır, nəticədə düymələr “ekranın dibindən aşağıda” qalır. Ya da elementlər mobil cihazda ekran kəsiyinin altına girir. Maksimal hündürlük və təhlükəsiz sahə məlumatlarından istifadə edərək içəridə hündürlüyü və boşluqları düzgün bölüşdürmək lazımdır.

Səhv №7: Inline və fullscreen arasında düymə və kartların uyğunsuz görünüşü.
Inline rejimində düymə yaşıl və yumrudur, fullscreen-də isə mavi və kvadrat. İstifadəçi vahid məhsul hissini itirir. Əsas düymə və kart stillərini ümumi komponent/mövzuya çıxarın və bütün rejimlərdə onlardan istifadə edin.

Səhv №8: “Müəllif” şrifti və dekorativ “fəndlər”.
“Gözəl olsun” deyə ağır webfont qoşmaq ChatGPT ilə vizual konsistensiyanı pozur və bəzən performansı korlayır. Platforma tövsiyələri sistem şriftlərindən və səliqəli tipoqrafiyadan istifadə etməyi deyir. Dizayner kimi özünü ifadə etmək çox istəyirsinizsə — şriftdə inqilab etməyin, daha yaxşısı ikonlar və microcopy üzərində işləyin.

Əvvəlki Əvvəlki dərs

Sonrakı Növbəti dərs

Şərhlər

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION