7 مرحله به ادغام آرم حرفه ای در رشته

از آرم های پیش فرض خسته شده اید؟ کشف کنید که چگونه می توانید حضور برند خود را در حال حاضر بالا ببرید.
بگذارید شما را از طریق تغییر برنامه رشته خود با یک آرم سفارشی که کاملاً نمایانگر هویت برند شما است ، قدم بزنم. این فقط مربوط به زیبایی شناسی نیست – این در مورد ایجاد یک تجربه منسجم و حرفه ای برای کاربران شما از لحظه فرود روی سکوی شما است.
درک رفتار آرم پیش فرض رشته
قبل از غواصی به سفارشی سازی ، مهم است که درک کنیم که چگونه رشته به طور پیش فرض آرم ها را کنترل می کند. هنگامی که برای اولین بار برنامه رشته خود را تنظیم کردید ، به طور خودکار از نام برنامه شما به عنوان یک آرم مبتنی بر متن استفاده می کند. این یک نقطه شروع تمیز است ، اما احتمالاً آن چیزی نیست که شما برای یک برنامه کاربردی جلا و حرفه ای می خواهید.
آرم مبتنی بر متن پیش فرض یک هدف عملی را ارائه می دهد-این تضمین می کند که برنامه شما نوعی مارک تجاری را از جعبه خارج می کند. با این حال ، با تکامل پروژه شما ، احتمالاً چیزی متمایز تر می خواهید که با هویت کلی برند شما هماهنگ باشد.
روش 1: تغییر آرم مبتنی بر متن
ساده ترین گزینه سفارشی سازی تغییر متن موجود در آرم شما است. این روش اگر یک آرم مبتنی بر متن را ترجیح می دهید اما می خواهید از متن های مختلف نسبت به نام برنامه خود استفاده کنید.
برای اجرای این کار ، از شما استفاده خواهید کرد brandName()
روش در پیکربندی پانل خود:
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandName('Filament Demo');
}
این روش ساده و در عین حال مؤثر است. ممکن است از آن استفاده کنید:
- به جای یک نام برنامه فنی ، نام محصول دوستانه بازاریابی را نمایش دهید
- یک نشانگر برچسب یا نسخه اضافه کنید
- از اختصارات یا کلمات اختصاری که برای کاربران شما قابل تشخیص تر است استفاده کنید
رویکرد مبتنی بر متن این مزیت را دارد که به طور پیش فرض سبک وزن و پاسخگو باشد و دارایی اضافی برای مدیریت ندارد.
روش 2: با استفاده از یک آرم تصویر
برای یک نمایش تجاری بصری متمایز تر ، می توانید متن را با یک آرم تصویر جایگزین کنید. این رویکرد به شما امکان می دهد هویت کامل برند خود را از جمله تایپوگرافی سفارشی ، رنگ ها و عناصر گرافیکی درج کنید.
برای استفاده از یک آرم تصویر ، پیاده سازی brandLogo()
روش و URL را به پرونده آرم خود منتقل کنید:
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(asset('images/logo.svg'));
}
در asset()
عملکرد یاور URL را به پرونده مشخص شده در فهرست عمومی شما ایجاد می کند. این بدان معنی است که آرم شما باید در آن ذخیره شود public/images/logo.svg
برای مثال فوق به درستی کار کنید.
هنگام انتخاب قالب تصویر برای آرم خود ، این گزینه ها را در نظر بگیرید:
- SVG: ایده آل برای آرم ها زیرا آنها کاملاً در هر اندازه مقیاس می گیرند و به طور معمول اندازه پرونده های کوچکتر دارند
- PNG: در صورت نیاز به شفافیت ، انتخاب خوبی است اما نمی توانید از SVG استفاده کنید
- وب: قالب مدرن با فشرده سازی عالی ، اگرچه سازگاری مرورگر را بررسی کنید
به یاد داشته باشید که آرم شما در قسمت ناوبری پنل رشته شما ظاهر می شود ، بنابراین با آن زمینه را در ذهن داشته باشید.
روش 3: استفاده از SVG درون خطی برای حداکثر کنترل
برای بیشترین کنترل بر روی ظاهر و رفتار آرم خود ، می توانید SVG درون خطی را مستقیماً در صفحه خود قرار دهید. این رویکرد چندین مزیت ارائه می دهد:
- SVG ها را می توان با CSS سبک کرد و باعث تغییر رنگ پویا می شود
- برای بارگذاری آرم هیچ درخواست اضافی HTTP لازم نیست
- در صورت تمایل می توانید عناصر آرم را تحریک کنید
- ادغام کامل با حالت تاریک (بیشتر در مورد آن بعداً)
برای اجرای یک آرم SVG درون خطی ، هنوز هم از آن استفاده خواهید کرد brandLogo()
روش ، اما به جای عبور از URL ، تابعی را ارائه می دهید که یک نمای را بازگرداند:
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(fn () => view('filament.admin.logo'));
}
این رویکرد فرض می کند که شما یک فایل نمای تیغه ایجاد کرده اید resources/views/filament/admin/logo.blade.php
این شامل نشانه SVG شما است:
توجه کنید که چگونه SVG در این مثال شامل کلاس های Tailwind CSS برای تنظیم رنگ پر ، از جمله یک نوع حالت تاریک است (dark:fill-gray-400
). این نشان دهنده قدرت SVG های درون خطی است – آنها می توانند یکپارچه با سیستم تم برنامه شما ادغام شوند.
پشتیبانی از حالت تاریک
برنامه های مدرن اغلب برای کاهش فشار چشم و صرفه جویی در مصرف باتری در صفحه های OLED ، حالت تاریک را ارائه می دهند. رشته از حالت تاریک خارج از جعبه پشتیبانی می کند ، و می توانید یک آرم متفاوت را به طور خاص برای فعال کردن حالت تاریک ارائه دهید.
برای پیاده سازی یک آرم خاص حالت تاریک ، از darkModeBrandLogo()
روش:
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(asset('images/logo-light.svg'))
->darkModeBrandLogo(asset('images/logo-dark.svg'));
}
هنگام استفاده از این رویکرد ، این اصول طراحی را در نظر بگیرید:
- آرم حالت تاریک شما باید همان هویت بصری را حفظ کند اما با رنگ های تنظیم شده
- آرم های حالت تاریک به طور معمول از رنگهای سبک تر در برابر پس زمینه های تاریک استفاده می کنند
- هر دو آرم را آزمایش کنید تا اطمینان حاصل کنید که در حالت های مربوطه تضاد کافی دارند
- رنگ های معکوس یا استفاده از نسخه تک رنگ را برای حالت تاریک در نظر بگیرید
اگر از رویکرد SVG درون خطی استفاده می کنید ، ممکن است به هیچ وجه به یک آرم جداگانه حالت تاریک احتیاج نداشته باشید. در عوض ، می توانید از برنامه های Dark Mode Tailwind در کلاسهای SVG خود استفاده کنید تا به طور خودکار رنگ ها را تنظیم کنید:
ابعاد آرم تنظیم دقیق
آرم ها به شکل های مختلف و نسبت ابعاد ارائه می شوند ، و رشته راهی برای کنترل نحوه قرار گرفتن آرم شما در فضای موجود فراهم می کند. در حالی که رشته یک ارتفاع پیش فرض معقول را تعیین می کند ، ممکن است لازم باشد این را برای طراحی لوگوی خاص خود تنظیم کنید.
برای سفارشی کردن ارتفاع آرم خود ، از brandLogoHeight()
روش:
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->brandLogo(fn () => view('filament.admin.logo'))
->brandLogoHeight('2rem');
}
ارتفاع را می توان با استفاده از هر واحد معتبر CSS مشخص کرد:
-
rem
واحدها به عنوان مقیاس با اندازه فونت پایه کاربر توصیه می شوند -
px
برای کنترل کامل پیکسل (هرچند کمتر پاسخگو) -
%
به اندازه نسبت به ظرف -
vh
به اندازه نسبت به ارتفاع منظره
هنگام تنظیم ارتفاع آرم ، در نظر بگیرید:
- ابعاد نوار ناوبری
- چگونه آرم شما در اندازه دستگاه های مختلف ظاهر می شود
- حفظ فضای سفید مناسب در اطراف آرم
- اطمینان از این که آرم در اندازه مشخص خوانا می ماند
بهترین روشها برای اجرای آرم
برای به دست آوردن بیشترین استفاده از آرم رشته سفارشی خود ، این بهترین روش ها را دنبال کنید:
-
تضاد مناسب را حفظ کنید: اطمینان حاصل کنید که آرم شما در برابر پس زمینه ایستاده است اما با عناصر اطراف برخورد نمی کند.
-
اندازه پرونده را بهینه کنید: آرم های تصویر را فشرده کنید و کد SVG را برای بهبود زمان بارگذاری به حداقل برسانید.
-
تست در دستگاه ها: تأیید کنید که آرم شما در دسک تاپ ، رایانه لوحی و موبایل پانل رشته شما خوب به نظر می رسد.
-
دسترسی را در نظر بگیرید: اگر آرم شما حاوی متن است ، از خواندن آن اطمینان حاصل کنید یا متن ALT مناسب را ارائه دهید.
-
برندسازی مداوم را حفظ کنید: آرم رشته شما باید با مارک تجاری مورد استفاده در کل برنامه و سایر مواد شرکت مطابقت داشته باشد.
-
نسخه آرم های خود را کنترل کنید: پرونده های آرم خود را در سیستم کنترل نسخه پروژه خود نگه دارید تا از سازگاری در محیط ها اطمینان حاصل شود.
-
در صورت امکان از SVG استفاده کنید: قالب های بردار بهترین مقیاس و انعطاف پذیری را برای رابط های وب فراهم می کنند.
تکنیک های پیشرفته آرم
برای کسانی که به دنبال فراتر از اصول هستند ، این تکنیک های پیشرفته را در نظر بگیرید:
آرم های مشروط بر اساس زمینه
ممکن است بخواهید آرم های مختلفی را بر اساس شرایط خاص ، مانند نقش کاربر فعلی یا مستاجر فعال در یک برنامه چند مستاجر نمایش دهید:
->brandLogo(function () {
if (auth()->user()->isAdmin()) {
return asset('images/admin-logo.svg');
}
return asset('images/user-logo.svg');
})
آرمهای متحرک
در صورت استفاده از رویکرد SVG Inline ، می توانید با استفاده از CSS انیمیشن های ساده ای را به آرم خود اضافه کنید:
فقط مراقب باشید که انیمیشن هایی ایجاد نکنید که ممکن است کاربران را از کار خود در پانل مدیر دور کند.
آرم های فصلی یا کمپین خاص
برای موارد خاص یا کمپین های بازاریابی ، ممکن است بخواهید به طور موقت آرم خود را تغییر دهید:
->brandLogo(function () {
$isHolidaySeason = now()->month == 12;
return $isHolidaySeason
? asset('images/holiday-logo.svg')
: asset('images/standard-logo.svg');
})
نتیجه گیری: تجربه برند خود را بالا ببرید
سفارشی کردن آرم رشته شما چیزی بیش از یک پیشرفت بصری نیست – این یک گام مهم در ایجاد یک تجربه کاربر منسجم و حرفه ای است. این که آیا شما یک تغییر متن ساده ، یک آرم تصویر یا یک راه حل کاملاً یکپارچه SVG را انتخاب می کنید ، آرم سفارشی شما به ایجاد هویت برنامه شما از لحظه ورود کاربران کمک می کند.
به یاد داشته باشید که آرم شما اغلب اولین عنصر کاربران است که توجه می کند ، بنابراین زمان را برای به دست آوردن آن سرمایه گذاری کنید. روشهای شرح داده شده در اینجا همه چیز را برای پیاده سازی یک آرم که کاملاً نمایانگر برند شما در اکوسیستم رشته است ، به شما می دهد.
آماده هستید تا درخواست رشته خود را به سطح بعدی برسانید؟ اظهار نظر زیر را به اشتراک بگذارید که چگونه آرم خود را سفارشی کرده اید یا هر رویکرد خلاقانه ای را که کشف کرده اید. اگر برای اجرای نیاز به کمک دارید ، دریغ نکنید که به این نتیجه برسید!
به نکات و آموزش های رشته ای بیشتری نیاز دارید؟ کانال YouTube من را برای راهنماهای گام به گام بررسی کنید: Dosen Ngoding
برای به روزرسانی های حرفه ای با من در LinkedIn ارتباط برقرار کنید یا پروژه های منبع باز من را در GitHub برای تمدید بیشتر رشته ها و یاران کشف کنید!