گلس‌مورفیسم و کلی‌مورفیسم؛ انتخاب، اجرا و تست در وب

یک کارت شیشه‌ای روی Gradient در Figma چشم‌نواز است؛ اما وقتی تصویر پس‌زمینه عوض می‌شود، متن خوانا نیست. یک دکمه خمیری حس دوستانه دارد؛ اما کاربر نمی‌فهمد دکمه است یا Illustration. مسئله این نیست که گلس‌مورفیسم یا کلی‌مورفیسم «مدرن» هستند یا نه؛ مسئله این است که آیا Style در Context واقعی، Stateهای رابط، دستگاه ضعیف، زبان فارسی و تنظیمات دسترس‌پذیری هنوز کار می‌کند.

این راهنما گلس‌مورفیسم، کلی‌مورفیسم و نئومورفیسم را به‌عنوان ابزارهای بصری مقایسه می‌کند و از انتخاب تا CSS، Token، Accessibility، Performance، QA و Rollback پیش می‌رود. اگر دنبال فهرست روندهای سال و تصمیم Portfolio هستید، مقالهٔ ترندهای طراحی سایت ۲۰۲۶ مالک آن Intent است؛ اینجا مسئله اجرای امن و قابل‌سنجش چند سبک مشخص است.

Style، Material، Pattern و Design System را یکی نگیرید

بخش بزرگی از سردرگمی از اینجا می‌آید که هر ظاهر تازه «سیستم طراحی» نامیده می‌شود. چهار مفهوم را جدا کنید:

• Style: زبان ظاهری مانند Glass، Clay، Brutal یا Flat؛ به‌تنهایی رفتار را تعریف نمی‌کند.
• Material: قواعد عمق، سطح، نور، شفافیت و واکنش به پس‌زمینه.
• Pattern: راه‌حل تکرارشونده برای یک Job، مانند Dialog، Card یا Navigation.
• Design System: Token، Component contract، مستندات، Accessibility، Versioning و Governance.

می‌توانید یک Design System پایدار داشته باشید که دو Theme تخت و شیشه‌ای ارائه می‌کند؛ یا صدها صفحه شیشه‌ای بدون هیچ سیستم. پذیرش Style زمانی کم‌ریسک می‌شود که آن را لایه‌ای قابل تعویض روی Semantics و Behavior ثابت نگه دارید.

تعریف عملی سه مورفیسم

این نام‌ها استاندارد فنی وب نیستند. «Claymorphism» قرارداد رسمی CSS ندارد و «Glassmorphism» نیز با افزودن یک Blur کامل نمی‌شود. تعریف داخلی تیم باید Token، Component مجاز، State، Fallback و معیار پذیرش داشته باشد.

پیش از انتخاب، Fit را با Context بسنجید

Style hypothesis
Surface: داشبورد مدیریت سفارش
User job: تشخیص سفارش پرریسک و اقدام سریع
Candidate: glass summary panel
Expected benefit: جداسازی لایه کنترل از جدول
Risk: کنتراست روی وضعیت‌های رنگی + GPU cost
Fallback: opaque neutral panel
Evidence: task success, error, contrast matrix, INP/LCP/CLS
Kill criterion: +1% task error or p75 INP budget breach
Owner / review date: Product Design / 1405-07-15

برای Hero کمپین کوتاه، ریسک برگشت‌پذیر است؛ برای فرم پرداخت، پنل درمان یا هشدار امنیتی، وضوح و اعتماد Hard gate هستند. Style نباید اهمیت، وضعیت یا Action را فقط با حس بصری منتقل کند.

ماتریس انتخاب گلس، کلی و سبک ساده

آناتومی یک سطح Glassmorphism

یک سطح Glass سالم دست‌کم شش لایه تصمیم دارد: محتوای پشت، میزان پوشانندگی Surface، Blur، Border/Separator، متن/آیکون و Elevation/State. Blur زیاد کمبود Contrast را درمان نمی‌کند؛ ممکن است فقط هزینه و نویز را بیشتر کند.

:root {
  --glass-bg: rgb(255 255 255 / 0.82);
  --glass-border: rgb(255 255 255 / 0.72);
  --glass-text: #172033;
  --glass-blur: 12px;
  --glass-radius: 20px;
  --glass-shadow: 0 12px 32px rgb(18 30 52 / 0.18);
}

.glass-panel {
  color: var(--glass-text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

@supports (backdrop-filter: blur(1px)) {
  .glass-panel {
    backdrop-filter: blur(var(--glass-blur));
  }
}

در این مثال، Background نسبتاً Opaque همان Fallback است. راهنمای MDN برای backdrop-filter این Property را برای اعمال Blur یا تغییر گرافیکی ناحیه پشت عنصر تعریف می‌کند و آن را Baseline ۲۰۲۴ می‌داند. Baseline به معنی پشتیبانی همه مرورگرهای تاریخی، WebViewهای قدیمی یا دستگاه‌های هدف شما نیست؛ ماتریس واقعی محصول را نگه دارید.

Fallback باید قبل از Effect کار کند

با Feature query یا @supports افکت را Progressive enhancement کنید. نسخه پایه باید بدون Blur خوانا، قابل‌کلیک و از نظر سلسله‌مراتب کامل باشد. اگر Browser Effect را نمی‌شناسد یا سیاست محصول آن را خاموش می‌کند، کاربر نباید با متن سفید روی تصویر روشن بماند.

• Background پایه صریح و پرکنتراست تعریف کنید.
• Border را تنها نشانه مرز کنترل نگذارید.
• Effect را به Containerهای محدود بدهید؛ روی کل صفحه تکرار نکنید.
• بدون JavaScript و پیش از Hydration هم Layout و Action باید معتبر باشند.
• Print، Screenshot، Forced colors و Dark/light scheme را جدا آزمون کنید.

کنتراست Glass روی یک رنگ ثابت اندازه‌گیری نمی‌شود

وقتی Background از تصویر، ویدئو، Gradient یا Scroll می‌آید، رنگ مجاور متن تغییر می‌کند. WCAG 2.2 برای متن عادی حداقل ۴٫۵:۱ و برای متن بزرگ ۳:۱ را مشخص می‌کند؛ اجزای رابط و اطلاعات گرافیکی ضروری نیز در معیار Non-text Contrast معمولاً به ۳:۱ نیاز دارند. آزمایش یک Screenshot زیبا کافی نیست.

برای هر Panel مجموعه‌ای از بدترین پس‌زمینه‌های واقعی بسازید: روشن، تیره، اشباع، جزئیات‌دار، Frame ویدئو، Error state و تصویر آپلودشده کاربر. Contrast متن، Icon، Border، Focus و Disabled/Selected را در همه حالت‌ها بسنجید. راه‌حل‌های پایدارتر عبارت‌اند از:

• افزایش Opacity پایه به‌جای افزایش بی‌پایان Blur؛
• Dimming/scrim مستقل زیر Control؛
• محدودکردن محتوا به بخش کم‌تغییر پس‌زمینه؛
• Outline دوتایی برای Focus روی زمینه روشن و تیره؛
• Variant پرکنتراست یا Opaque برای تنظیمات کاربر.

Focus، Hover، Active و Disabled را به سایه نسپارید

Hover برای Touch وجود ندارد و Box-shadow در برخی حالت‌های Forced colors حذف می‌شود. Focus باید قابل‌مشاهده و از Sticky header/footer پنهان نشود. State را با ترکیبی از Border/Outline، Shape، Text/Icon و State property منتقل کنید؛ Color یا Blur تنها حامل معنی نباشد.

.glass-button:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .glass-panel,
  .glass-button {
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
    box-shadow: none;
    backdrop-filter: none;
  }
  .glass-button:focus-visible {
    outline: 3px solid Highlight;
  }
}

مشخصات CSS Color Adjustment توضیح می‌دهد که در Forced colors بسیاری از رنگ‌ها بازتنظیم و box-shadow/text-shadow حذف می‌شوند. بی‌دلیل forced-color-adjust: none نگذارید؛ Opt-out فقط وقتی موجه است که خودتان همه نیازهای رنگ و کنتراست را مدیریت کرده باشید.

Performance گلس‌مورفیسم را روی Paint و Interaction بسنجید

نمی‌توان عدد ثابتی برای هزینه backdrop-filter اعلام کرد. مساحت، Radius، تعداد لایه، محتوای متحرک پشت، Browser، GPU، Memory و Composition path اثر می‌گذارند. یک کارت ثابت کوچک با ۲۰ پنل تمام‌صفحه قابل‌مقایسه نیست.

• در DevTools، Paint/Composite، Frame stability، Memory و Long task را بررسی کنید.
• Scroll و بازشدن Overlay را روی Android میان‌رده و WebView هدف Profile کنید.
• LCP، INP و CLS را در Field/RUM بر Device/Browser/Network Segment کنید.
• نسخه Effect-on و Effect-off را با همان محتوا و مسیر مقایسه کنید.
• در صورت افت، تعداد/مساحت Surface، Blur یا Animation پشت آن را کم کنید.

برای روش کامل، راهنمای Core Web Vitals و RUM را اجرا کنید. امتیاز Lighthouse یک دستگاه آزمایشگاهی به‌تنهایی حکم Rollout نیست.

Liquid Glass اپل با CSS شیشه‌ای شما یکی نیست

راهنمای جاری Apple Human Interface Guidelines برای Materials، Liquid Glass را لایه‌ای عملکردی برای Control و Navigation معرفی می‌کند و به استفاده محدود، انتخاب Variant بر اساس زمینه و سازگاری با Reduce Transparency/Increase Contrast تأکید دارد. این راهنمای Platform اپل است، نه استاندارد وب یا مجوز کپی پیکسل‌به‌پیکسل.

درس قابل‌انتقال، «وظیفه Material» است: سطح باید سلسله‌مراتب و Context را حفظ کند. اگر ده‌ها Glass card در Content layer می‌سازید، استعاره دیگر چیزی را تفکیک نمی‌کند و فقط نویز می‌افزاید.

کلی‌مورفیسم را به‌عنوان زبان Illustration و Surface تعریف کنید

Claymorphism معمولاً از Radius بزرگ، حجم نرم، سایه داخلی/خارجی، Highlight و رنگ‌های نسبتاً شاد استفاده می‌کند. چون قرارداد استانداردی ندارد، تیم باید مشخص کند «Clay» در محصول یعنی چه. دو مسیر را جدا کنید:

• Clay illustration: شخصیت، آیکون سه‌بعدی، Empty state و Hero؛ بیشتر نقش هویت/روایت دارد.
• Clay UI surface: Card، Chip یا Control واقعی؛ باید State و Accessibility کامل داشته باشد.

مسیر اول معمولاً کم‌ریسک‌تر است. اگر یک CTA حیاتی مانند «پرداخت» را Clay می‌کنید، ظاهر پف‌کرده نباید Label، مرز Hit area، Loading، Disabled و Error را مبهم کند.

Tokenهای Clay را از Behavior جدا نگه دارید

:root {
  --clay-fill: #f4b7d2;
  --clay-text: #332238;
  --clay-radius: 24px;
  --clay-highlight: inset -8px -8px 16px rgb(255 255 255 / .38);
  --clay-shade: inset 8px 8px 16px rgb(123 43 85 / .18);
  --clay-elevation: 0 10px 20px rgb(63 29 52 / .20);
}

.clay-card {
  color: var(--clay-text);
  background: var(--clay-fill);
  border: 2px solid transparent;
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-highlight), var(--clay-shade), var(--clay-elevation);
}

.clay-card[data-state="selected"] {
  border-color: currentColor;
}

Semantics، DOM order، Accessible name و State machine باید در Theme ساده و Clay یکسان بمانند. برای معماری Token و Component contract، راهنمای ساخت و نگهداری سیستم طراحی را مبنا قرار دهید.

Affordance در Clay: برآمدگی به معنی قابل‌کلیک‌بودن نیست

کاربر از روی تجربه، Label، مکان، شکل، Cursor، Focus و Feedback Action را تشخیص می‌دهد. یک Shadow سه‌بعدی ممکن است تزئین یا کنترل به نظر برسد. بنابراین:

• برای Action از عنصر Semantic مانند button یا a استفاده کنید.
• Label را حذف نکنید مگر Icon convention بسیار روشن و Accessible name کامل باشد.
• Pressed/Selected/Disabled را در کنار Shape با متن، Icon یا Attribute قابل‌فهم کنید.
• Hit target و فاصله کنترل‌ها را مستقل از شکل پف‌کرده بسنجید.
• در Forced colors، وقتی Shadow حذف شد هنوز مرز و State حفظ شود.

Clay illustration را برای Web بهینه کنید

Asset سه‌بعدی رندرشده ممکن است بزرگ، تار در DPR بالا یا دارای متن غیرقابل‌دسترسی باشد. Master، Export و مجوز را ثبت کنید. AVIF/WebP/JPEG/PNG را بر اساس شفافیت و کیفیت واقعی بسنجید؛ ابعاد Responsive و Intrinsic dimensions بدهید. اگر Illustration مفهوم دارد، Alt مناسب یا توضیح متن ارائه کنید؛ اگر تزئینی است Alt خالی بگذارید.

محتوای ضروری را داخل تصویر Clay قفل نکنید. عدد قیمت، وضعیت سفارش و Label کنترل باید HTML باشد. برای Pipeline دارایی بصری، مقالهٔ آرت‌دایرکشن و سیستم بصری وب را به Brief و Handoff وصل کنید.

نئومورفیسم چرا اغلب در Controlهای حیاتی شکست می‌خورد؟

Neumorphism سطح و Control را تقریباً هم‌رنگ می‌کند و تفاوت را به سایه می‌سپارد. این کار می‌تواند مرز Input، حالت Pressed و Focus را کم‌رنگ کند. Glass الزاماً «دسترس‌پذیرتر» نیست؛ فقط Failure mode متفاوت دارد. هر دو به Contrast و State contract نیاز دارند.

اگر از Neo استفاده می‌کنید، آن را Ornament بدانید: Label و Border قابل‌اعتماد، Focus واضح، Error text، Icon state و نسخه Forced-colors را جدا طراحی کنید. برای فرم مالی یا سلامت، سطح ساده اغلب هزینه خطای کمتری دارد.

سه Style را در یک صفحه انباشته نکنید

Glass navbar، Clay CTA، Neo input، Brutalist type و Gradient متحرک شاید هرکدام جذاب باشند، اما کنار هم Hierarchy و هویت را می‌شکنند. یک Style اصلی، یک Accent محدود و چند قانون ثابت کافی است.

تایپوگرافی Bold و Kinetic را به خوانایی گره بزنید

Type بزرگ می‌تواند Hierarchy بسازد، اما پیام کوتاه Hero را به الگوی متن طولانی تعمیم ندهید. در فارسی، شکل حروف، نقطه‌ها، کشیده، نیم‌فاصله، وزن واقعی فونت و Line-height روی خوانایی اثر دارند. Variable axis یا Motion باید روی متن واقعی فارسی آزموده شود.

• متن ضروری را Canvas/SVG path یا تصویر نکنید.
• Font fallback و Layout shift را قبل از افکت کنترل کنید.
• حرکت Type را متوقف‌پذیر و بدون جابه‌جایی ناگهانی Reading order نگه دارید.
• نسخه کوچک Mobile را Art-direct کنید؛ فقط Scale-down نکنید.

برای Font loading، Subset، CLS و RUM به بهینه‌سازی فونت وب مراجعه کنید.

Gradient و نویز باید Contrast map داشته باشند

Gradient پشت Glass می‌تواند هزاران ترکیب رنگ ایجاد کند. نقاط نمونه ثابت کافی نیستند، مخصوصاً اگر Gradient متحرک یا Responsive باشد. برای هر Breakpoint و State، ناحیه حضور متن/Focus را محدود و Contrast را روی Extremes بسنجید. Noise texture را با Opacity کم و بدون ایجاد Moiré یا افزایش حجم اجرا کنید.

Dark mode معکوس‌کردن همه رنگ‌ها نیست. سطح شفاف در Dark ممکن است Glow، Halo و Bloom ایجاد کند؛ Shadow سیاه هم عمق را از دست می‌دهد. Tokenهای Semantic برای Surface، Text، Border، Focus و Scrim تعریف کنید، نه لیست Hexهای پراکنده.

Motion فقط وقتی بماند که Job دارد

حرکت می‌تواند Feedback، Orientation، رابطه علت‌ومعلول یا continuity را منتقل کند. لرزش تزئینی دکمه بعد از هر کلیک یا Parallax مداوم ممکن است Attention و Battery را مصرف کند. راهنمای Animation در web.dev توصیه می‌کند ترجیح prefers-reduced-motion را رعایت کنید؛ Reduce الزاماً «صفر حرکت» نیست، اما حرکت غیرضروری باید حذف یا ساده شود.

برای State، Feedback، Easing و Reduced motion، مرجع تخصصی میکرواینتراکشن در طراحی وب است.

AI می‌تواند Variant بسازد؛ Fit و حقوق را ثابت نمی‌کند

ابزار مولد می‌تواند Moodboard، Clay illustration، Palette یا Layout variant تولید کند، اما چند کنترل انسانی لازم است:

• منبع و مجوز Asset، Font، Dataset و Style reference؛
• تشابه ناخواسته با Brand/Artwork دیگر؛
• تکرار کلیشه‌های فرهنگی یا چهره/بدن نادرست؛
• متن فارسی خراب داخل تصویر؛
• قابلیت بازتولید، Edit و Export بدون قفل Vendor؛
• بررسی Human برای Contrast، State، Semantics و Device behavior.

Prompt خروجی نیست؛ فایل Master، Provenance، نسخه مدل/ابزار، Editor و تصمیم استفاده را ثبت کنید. AI جای تحقیق کاربر یا تست Task را نمی‌گیرد.

از Moodboard به Component Contract برسید

یک تصویر الهام‌بخش فقط Direction می‌دهد. برای Production، هر Component باید API بصری و رفتاری داشته باشد:

Accessibility Matrix را قبل از Visual polish اجرا کنید

برای Coverage و Governance کامل از طراحی فراگیر و WCAG استفاده کنید. Passing چند Ratio به معنی قابل‌استفاده‌بودن کل Flow نیست؛ Task test با Keyboard، Zoom و Assistive technology لازم است.

بودجه Performance برای Style تعریف کنید

بودجه فقط KB نیست. برای هر Variant این چهار لایه را ثبت کنید:

• Delivery: CSS، Font، Illustration و Script افزوده؛
• Render: Paint، Composite، GPU memory و Frame stability؛
• Interaction: Input delay، animation work و main-thread task؛
• User outcome: Task time، خطا، Abandonment و رضایت.

اگر نسخه Glass ۵۰ کیلوبایت سبک‌تر اما Scroll آن روی دستگاه هدف Jank دارد، Budget Delivery گمراه‌کننده است. اگر Clay illustration سریع است اما CTA را نامفهوم می‌کند، Performance فنی موفق و Outcome ناموفق است.

QA فارسی و ایران

• عنوان و CTA فارسی کوتاه/بلند، نیم‌فاصله و دو شکل ی/ک را تست کنید.
• RTL/BiDi را برای قیمت، درصد، کد، شماره سفارش، Email و Breadcrumb بررسی کنید.
• ریال/تومان و تاریخ شمسی/میلادی را با Label و ترتیب خواندن روشن کنید.
• فونت فارسی را روی Android میان‌رده، WebView و fallback system آزمایش کنید.
• Contrast Glass را با عکس‌های واقعی بازار ایران و محتوای User-generated بسنجید.
• RUM را بر اپراتور، Device memory، Browser/WebView و Region Segment کنید.
• وقتی CDN/Font خارجی کند یا مسدود است، Layout و Control باید سالم بماند.
• رنگ/شکل کارتونی را با مخاطب واقعی بسنجید؛ «دوستانه» یا «لوکس» ترجمه جهانی ثابت ندارد.

پنج سناریوی انتخاب

داشبورد B2B پرتراکم

سطح پایه Opaque و Tokenized را نگه دارید. Glass شاید فقط برای Command bar شناور یا Modal کوچک ارزش داشته باشد. Clay را به Illustration onboarding محدود کنید. معیار اصلی Task accuracy، Scan time و INP است.

لندینگ محصول خلاقانه

Glass Hero یا Clay artwork می‌تواند Distinctiveness بسازد، به شرط Message/CTA روشن، تصویر Responsive، Contrast و نسخه Mobile ساده‌تر. Conversion و Brand recall را با Guardrail سرعت/دسترس‌پذیری بسنجید.

فروشگاه کودک و سرگرمی

Clay ممکن است با Tone سازگار باشد، اما خرید توسط والد انجام می‌شود. قیمت، موجودی، پرداخت و Policy باید جدی و واضح بمانند. استفاده از رنگ/حرکت برای فشار یا ابهام انتخاب را با طراحی اخلاقی کنترل کنید.

فین‌تک یا درگاه پرداخت

خوانایی Amount، Merchant، State، Error و Recovery Hard gate است. Style ساده نقطه شروع بهتر است؛ Glass محدود برای Header می‌تواند Pilot شود. هیچ State مالی به Blur، رنگ یا Shadow تنها وابسته نباشد.

Portfolio طراح

آزادی بصری بیشتر است، ولی Case study باید قابل‌خواندن و قابل‌ناوبری بماند. Style را برای نمایش تصمیم و Craft به کار ببرید؛ Background animation نباید Resume/Contact یا متن پروژه را پنهان کند.

Pilot را با Feature flag و Kill criterion اجرا کنید

Pilot scope: 10% eligible traffic / one non-critical surface
Variants: opaque baseline vs glass-v1
Segments: mobile/desktop, browser, device tier, Iran network
Primary: task completion and qualified CTA
Quality: contrast, keyboard success, error rate
Performance: p75 LCP/INP/CLS + scroll frame evidence
Guardrails: support tickets, motion discomfort, battery complaint
Kill: any critical accessibility failure or >5% task-time regression
Rollout: 10% → 25% → 50% → 100%
Rollback: token/theme flag; no markup migration required

Visual preference survey را کنار رفتار قرار دهید. «این نسخه زیباتر است» ممکن است با Task success یا Trust هم‌جهت نباشد. برای رابطه Style با احساس، مقالهٔ طراحی احساسی در UX چارچوب Hypothesis/Guardrail ارائه می‌کند.

Metricها را در چهار لایه نگه دارید

خطاهای پرهزینه

• کپی Screenshot ترند بدون Context، State و Fallback؛
• متن سفید روی Glass با Background متغیر؛
• قرار دادن Blur روی هر Card و Container؛
• تعریف Clickability فقط با Shadow یا Hover؛
• Clay برای همه محصولات چون «دوستانه» فرض شده؛
• Motion مداوم بدون Job و Reduced path؛
• قفل‌کردن متن فارسی داخل Illustration مولد؛
• استفاده از Lighthouse تنها به‌عنوان Performance evidence؛
• اعلام موفقیت با Like یا Preference بدون Task/Outcome؛
• Hard-code کردن Style در Markup به‌طوری که Rollback مهاجرت بخواهد.

Runbook ۱: متن Glass روی بعضی تصاویر خوانا نیست

1. ترکیب‌های شکست را با URL/Viewport/Backdrop/State ثبت کنید.
2. Opacity و Scrim را بالا ببرید یا ناحیه Background را محدود کنید.
3. Contrast متن، Icon، Border و Focus را روی Extremes دوباره بسنجید.
4. اگر Context قابل‌کنترل نیست، Variant Opaque را اجباری کنید.
5. Regression set تصویر/ویدئو را به CI بصری اضافه کنید.

Runbook ۲: Scroll روی Android کند شده است

1. Device/Browser/صفحه و نسخه Baseline را مشخص کنید.
2. Paint/Composite و تعداد/مساحت Blurها را Profile کنید.
3. حرکت محتوای پشت، Shadow و Layer overlap را موقت خاموش و مقایسه کنید.
4. Effect را محدود، Blur را کم یا Opaque fallback را برای Segment اعمال کنید.
5. Field metric و Task را پیش از Rollout مجدد تأیید کنید.

Runbook ۳: کاربر Clay card را دکمه تصور می‌کند

1. Click map و Usability evidence را با DOM semantics مقایسه کنید.
2. Surface تزئینی را از Control واقعی از نظر Shape/Placement جدا کنید.
3. Label، Cursor، Focus و State control را تقویت کنید.
4. Illustration غیرعملکردی را از Tab order خارج و Alt مناسب تعیین کنید.
5. Task را با Keyboard، Touch و Screen reader دوباره تست کنید.

Runbook ۴: Forced colors رابط را از هم می‌پاشد

1. Shadow/Background-image حذف‌شده و رنگ‌های System را مشاهده کنید.
2. Semantic HTML، Border، Outline و Label را اصلاح کنید.
3. در Media query از Canvas/CanvasText/ButtonText/Highlight استفاده کنید.
4. Opt-outهای forced-color-adjust را حذف کنید مگر دلیل و تست کامل دارند.
5. Component و Flow کامل را با Keyboard و Zoom بازآزمایی کنید.

Runbook ۵: Style زیباست اما Conversion/اعتماد افت کرده

1. نتیجه را بر Source/Device/New-returning/Task Segment کنید.
2. Message، CTA، خوانایی، Speed و Error را به‌عنوان فرضیه رقیب بررسی کنید.
3. Baseline Opaque را با همان محتوا و Offer نگه دارید.
4. مصاحبه رخدادمحور و Task test انجام دهید؛ از سؤال «کدام زیباتر است» عبور کنید.
5. اگر Guardrail یا Outcome شکست دارد، Flag را Rollback و Style را بازطراحی کنید.

برنامه ۳۰، ۶۰ و ۹۰ روزه

روز ۱ تا ۳۰: Inventory و Contract

صفحات دارای Glass/Clay/Neo، Tokenهای پراکنده، Blur area، Asset، State و Owner را فهرست کنید. Style glossary، Fit matrix، Accessibility hard gate، Browser/device target و Opaque fallback را تصویب کنید.

روز ۳۱ تا ۶۰: Component و QA

دو یا سه Component کم‌ریسک را با Token، State کامل، Dark/light/forced-colors/reduced-motion و Performance budget بسازید. Story/visual regression، Keyboard/Zoom، فارسی/RTL و Android/WebView را به Pipeline اضافه کنید.

روز ۶۱ تا ۹۰: Pilot و Governance

Baseline و Variant را روی یک Surface با Feature flag اجرا کنید. Quality/Technical/Task/Brand metrics و Kill criterion را مرور کنید. Pattern موفق را Adopt، نامطمئن را Trial، نابالغ را Watch و Style شکست‌خورده را Deprecate کنید.

چک‌لیست انتشار

• Style job، Context، مخاطب و Outcome نوشته شده‌اند.
• مرزبندی Style/Material/Pattern/System روشن است.
• Markup و Behavior بدون Effect معتبرند.
• Opaque fallback و @supports موجود است.
• Contrast روی همه Backdrop/State/Breakpointها سنجیده شده است.
• Hover/Focus/Active/Selected/Disabled/Loading/Error کامل‌اند.
• Keyboard، Touch، Screen reader، Zoom و Reflow عبور کرده‌اند.
• Forced colors، Dark/light و Reduced motion آزموده شده‌اند.
• Paint/Composite/Frame و CWV روی Device هدف اندازه‌گیری شده‌اند.
• فونت و Asset فارسی Responsive، مجاز و دارای Fallback هستند.
• RTL/BiDi، ریال/تومان، تاریخ و شبکه‌های ایران QA شده‌اند.
• Feature flag، Kill criterion، Owner و Rollback وجود دارند.
• Metricها Quality/Technical/Task/Business را پوشش می‌دهند.

پرسش‌های متداول

تفاوت گلس‌مورفیسم و نئومورفیسم چیست؟

Glass از شفافیت/Blur و لایه روی Background برای عمق استفاده می‌کند؛ Neo معمولاً Control را هم‌رنگ سطح می‌گیرد و عمق را با سایه روشن/تیره می‌سازد. Glass با کنتراست متغیر و Render cost درگیر است؛ Neo بیشتر با مرز و State کم‌کنتراست. هیچ‌کدام ذاتاً Accessible یا مدرن‌تر نیستند.

آیا backdrop-filter برای استفاده Production آماده است؟

MDN آن را Baseline ۲۰۲۴ گزارش می‌کند، اما Production readiness به Browser/WebView، دستگاه و Budget محصول شما بستگی دارد. نسخه Opaque را پایه بگیرید، Effect را با @supports اضافه و Performance/Contrast را روی Target matrix اندازه‌گیری کنید.

آیا کلی‌مورفیسم برای فروشگاه یا فین‌تک مناسب است؟

به Context و نقش بستگی دارد. Clay illustration می‌تواند برای Empty state یا کمپین Fit باشد؛ استفاده گسترده در قیمت، پرداخت یا هشدار ممکن است Affordance و Tone را تضعیف کند. Critical flow را با Style ساده آغاز و Variant محدود را با Task/Trust guardrail Pilot کنید.

Blur بیشتر کنتراست Glass را بهتر می‌کند؟

نه لزوماً. Blur جزئیات را کم می‌کند اما Luminance و رنگ پس‌زمینه هنوز می‌تواند Contrast را خراب کند. Opacity پایه، Scrim، محدودکردن Backdrop و Variant Opaque اغلب کنترل مطمئن‌تری هستند. همه پس‌زمینه‌های واقعی و Stateها باید سنجیده شوند.

چگونه بفهمیم یک Style ارزش Rollout دارد؟

پس از عبور از Hard gate دسترس‌پذیری و Performance، آن را با Baseline روی Surface کم‌ریسک مقایسه کنید. Task completion/error/time، Outcome کسب‌وکار، Trust/Brand evidence و Guardrailها را کنار Preference بصری ببینید. Feature flag و Kill criterion تصمیم برگشت را کم‌هزینه می‌کنند.

جمع‌بندی: Style باید قابل‌حذف باشد، ارزشش قابل‌اثبات

گلس‌مورفیسم و کلی‌مورفیسم می‌توانند به هویت، عمق یا صمیمیت کمک کنند، اما هیچ‌کدام جای Semantics، سلسله‌مراتب، دسترس‌پذیری و عملکرد را نمی‌گیرند. Style خوب روی Component contract سوار می‌شود، Fallback دارد، در فارسی و دستگاه واقعی آزموده می‌شود و بدون مهاجرت Markup قابل Rollback است. وقتی Evidence نشان دهد Job کاربر بهتر شده و Guardrailها سالم‌اند، Style از مد زودگذر به ابزار طراحی تبدیل می‌شود.