8.0 KiB
8.0 KiB
نظام طراحی سامانه هوشمندی راهبردی دانشگاه اصفهان (Design System Specification)
این سند مرجع رسمی و استانداردهای طراحی دیداری، سلسلهمراتب تایپوگرافی، پالت رنگ، الگوهای کامپوننت و راهنمای نگارش سامانه «رادار آینده دانشگاه اصفهان» است.
۱. تایپوگرافی (Typography Standard)
۱.۱. قلم واحد سازمانی (Universal Font Family)
- تمام متون، اعداد، نشانها، دکمهها و عناصر واسط کاربری باید منحصراً از قلم Vazirmatn استفاده کنند.
- استفاده از فونتهای مونو یا سیستمی (
font-mono,Consolas,Courier) برای اعداد و برچسبهای فارسی اکیداً ممنوع است. اعداد فارسی باید با وزن متناسب قلم وزیرمتن نمایش داده شوند.
*, ::before, ::after {
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif !important;
}
۱.۲. مقیاس و سلسلهمراتب تیترها (Heading Hierarchy & Contrast)
- قاعده اساسی: تیترها و عناوین باید به رنگ مشکی کامل (
#0f172aیا#000000)، با وزن بسیار ضخیم (Bold 800 - Black 900) و با اندازه چشمگیر نسبت به متن بدنه باشند تا سلسلهمراتب بصری در یک نگاه درک شود.
| سطح عنصر | نام کلاس | اندازه فونت (rem / px) | وزن قلم | رنگ متن | کاربرد |
|---|---|---|---|---|---|
| Display / Hero | .text-display |
2.25rem (36px) |
900 (Black) | #0f172a |
ارقام کلیدی داشبورد و شاخصهای آمادگی ۱۴۱۵ |
| Heading 1 | .heading-1 / h1 |
1.75rem (28px) |
900 (Black) | #0f172a |
عنوان اصلی هر صفحه |
| Heading 2 | .heading-2 / h2 |
1.25rem (20px) |
800 (ExtraBold) | #0f172a |
تیتر بخشهای اصلی و سرفصلها |
| Heading 3 | .heading-3 / h3 |
1.00rem (16px) |
800 (ExtraBold) | #0f172a |
عنوان کارتهای رادار و پنلهای تحلیلی |
| Heading 4 | .heading-4 / h4 |
0.875rem (14px) |
700 (Bold) | #1e293b |
عناوین فرعی و آیتمهای لیست |
| Body Main | .body-main / p |
0.8125rem (13px) |
500 (Medium) | #334155 |
متن توضیحات و خلاصههای سیاستی |
| Caption / Meta | .caption |
0.75rem (12px) |
600 (SemiBold) | #64748b |
اطلاعات فراداده، افق زمانی و منابع |
| Badge / Chip | .badge-label |
0.6875rem (11px) |
700 (Bold) | متناسب با دسته | برچسبهای وضعیت و شمارندهها |
۲. پالت رنگ و کنتراست (Color Palette)
۲.۱. بوم و پسزمینهها (Canvas & Surfaces)
- بوم اصلی (Canvas Background):
#f4f6fb(خاکستری سرد و ملایم با مش گرادینت سبک) - کارتها (Card Surface):
#ffffff(سفید یکدست با سایه نرم0 8px 24px -4px rgba(15,23,42,0.04)) - کارتهای فرعی (Subtle Surface):
#f8fafc - خطوط حاشیه (Borders):
#e2e8f0(خطوط تفکیککننده محکم اما چشمنواز)
۲.۲. رنگهای موضوعی پاستلی (Pastel Theme Tints)
برای طبقهبندی هوشمندی آینده و ایجاد زیبایی در ساختار جعبههای بنتو:
- روندها (Trends): پسزمینه
#eaf3fe| حاشیه#c8e0fd| متن#0284c7 - فناوریها (Tech): پسزمینه
#e6f6f1| حاشیه#c4ecdf| متن#059669 - سیاستها (Policies): پسزمینه
#fef7e6| حاشیه#fde8b8| متن#d97706 - سیگنالهای آینده (Signals): پسزمینه
#fdecf2| حاشیه#f9cbd9| متن#e11d48 - برنامهریزی ۱۴۱۵ / مثلث آینده: پسزمینه
#f3effe| حاشیه#ded2fd| متن#7c3aed
۳. نوار کناری ناوبری (Sidebar Standard)
- بدنه نوار کناری: پسزمینه سفید خالص (
#ffffff)، مرز چپ با صفحه#e2e8f0، عرض ۲۷۰ پیکسل. - عناوین بخشها: خاکستری ملایم
#94a3b8، فونت ۱۰.۵ پیکسل، وزن ۸۰۰، حروف کوچک، با فاصله مناسب از گروه قبلی. - دکمههای ناوبری:
- حالت عادی: متن
#475569، آیکون ۲۰ پیکسل با رنگ#64748b، گوشههای گرد ۱۲ پیکسل (rounded-xl). - حالت شناور (Hover): پسزمینه
#f1f5f9، متن مشکی#0f172a. - حالت فعال (Active): پسزمینه سرمهای تیره لوکس
#0f172a، متن سفید خالص#ffffff، آیکون روشن، سایه ملایم.
- حالت عادی: متن
- شمارندهها و برچسبها:
- نشانهای عددی باید در سمت چپ آیتم قرار گیرند (
align-self: flex-startدر ساختار راستبهچپ). - متن شمارنده کاملاً با قلم وزیرمتن فارسی و بدون فونت مونو یا فاصله بیمورد درج شود.
- نشانهای عددی باید در سمت چپ آیتم قرار گیرند (
- حذف متون دوزبانه زاید:
- تمامی پرانتزهای انگلیسی غیرضروری مانند
(Overview)،(Trends)،(Tech)،(Policies)،(Signals)،(Spider Gap)،(PULL/PUSH)و(CRUD)در نوار کناری ممنوع بوده و با واژگان حرفهای و فاخر فارسی جایگزین میشوند.
- تمامی پرانتزهای انگلیسی غیرضروری مانند
۴. استانداردهای هندسی نمودارها و مدلهای بصری
۴.۱. مثلث هوشمندی آینده (Futures Triangle Geometry)
- تناسب ابعادی استاندارد:
- از ترسیم مثلثهای عریض، پخ و تخت (نسبت عرض به ارتفاع ۲ به ۱) اکیداً پرهیز شود.
- نسبت ارتفاع به قاعده مثلث باید بین ۰.۸۵ تا ۰.۹۰ باشد (شبیه به مثلث متساویالاضلاع کشیده و متوازن).
- اضلاع مثلث باید با خطوط رنگی ضخیم (حداقل ۴ پیکسل) و گرادینتهای جهتدار متصل شوند.
- گره مرکزی (هوشمندی دانشگاه اصفهان) دقیقاً در گرانیگاه هندسی
(x_c, y_c)قرار گیرد.
۴.۲. رادار دایرهای آیندهپژوهی (Futures Radar)
- دایره مرکزی سفید مرواریدی، پرههای رنگی ملایم برای ۴ ربع، نقاط سیگنال با حاشیه سفید تمیز و عدد شدت اثر درون نقطه.
۴.۳. نمودار عنکبوتی ۱۰ بعدی (Spider Gap Chart)
- چندضلعی هدف دانشگاه اصفهان ۱۴۱۵ به رنگ سبز زمردی (
#00b894) و چندضلعی وضع موجود به رنگ کهربایی (#f59e0b).
۵. راهنمای زبان و لحن سازمانی (Content & Tone Standards)
- حذف واژگان تکراری و عبارات توخالی (Zero AI-Slop):
- حذف برچسبهای آکادمیک گلدرشت مانند
نظریه سوهیل عنایتالله (Sohail Inayatullah)از هدر صفحات و استفاده از برچسبهای راهبردی خلاصه (چارچوب آیندهپژوهی). - حذف توضیحات شعاری و کشدار؛ محتوا باید مستقیماً پیامد دانشگاهی، عدد شاخص یا اقدام فوری را گزارش دهد.
- حذف برچسبهای آکادمیک گلدرشت مانند
- نگارش فارسی معیار و روان:
- به کارگیری اصطلاحات دقیق آیندهپژوهی و مدیریت دانشگاهی (مانند: سیگنالهای ضعیف، افق زمانی، شکاف بلوغ، شایستگیهای نوظهور، آمایش آموزشی).