قلاب های استایلینگ چیست و چگونه از آنها با SLDS استفاده می کنید؟

اگر تا به حال با سیستم طراحی لایتنینگ Salesforce (SLDS) کار کرده اید و مجبور بوده اید اجزاء را یکی یکی به روز کنید، می د،د که این فرآیند چقدر زمان بر و خسته کننده است. قلاب های یک ظاهر طراحی جه، فرآیند ساخت اجزای سفارشی در SLDS را ساده می کند.

این ابزارهای قدرتمند با استفاده از ویژگی های سفارشی CSS برای متمرکز ، مقادیر کلیدی طراحی مانند رنگ ها و فونت ها، به حفظ ثبات طراحی و ساده سازی توسعه کمک می کنند. و با پشتیب، گسترده مرورگر، قلاب های استایل سازی تجربه ای روان و یکپارچه را در سراسر برنامه شما تضمین می کنند. با درک نحوه استفاده از آن ها، می تو،د تجارب Salesforce را ایجاد کنید که سازگار، از نظر بصری چشمگیر و برای آینده باشند.

چیزی که یاد خواهید گرفت

قلاب های استایلینگ جه، چیست و چگونه کار می کنند؟
مزایای قلاب های یک ظاهر طراحی شده برای طراحان و توسعه دهندگان
خداحافظ هاردکدینگ
استفاده از قلاب های یک ظاهر طراحی شده
یک ظاهر طراحی شده اجزای Salesforce مقاوم در برابر آینده را قلاب می کند
تجربیات منسجم

قلاب های یک ظاهر طراحی شده چیست و چگونه کار می کنند؟

قلاب یک ظاهر طراحی شده یک است ویژگی سفارشی CSS (متغیر) برای تعریف و مدیریت مقادیر کلیدی طراحی مانند رنگ ها، فونت ها و فاصله در اجزای Salesforce استفاده می شود. این قلاب ها هدفمند هستند فضای نام و با نحو خاص برای اطمینان از سازگاری بصری در ،اصر مختلف ساخته شده است. با تغییر یک قلاب یک ظاهر طراحی شده، توسعه دهندگان می توانند به سرعت طراحی را در کل یک برنامه یا جزء به روز کنند، تعمیر و نگهداری را ساده کرده و ثبات را ارتقا می دهند.

قلاب های یک ظاهر طراحی شده یکپارچه در داخل کار می کنند SLDS، حصول اطمینان از همسویی اجزای سفارشی با اصول طراحی Salesforce. این قلاب ها توسط همه مرورگرهای اصلی مانند کروم، فایرفا،، اج و سافاری پشتیب، می شوند و به طور کلی سازگار هستند.

کاربرد گسترده آنها به آنها اجازه می دهد تا در ،اصر مختلف HTML، مؤلفه ها و انتخابگرها استفاده شوند و ظاهر و احساس منسجمی را در سراسر برنامه ایجاد کنند. آنها را به ،وان ضربه های قلم موی بزرگ در یک نقاشی در نظر بگیرید که ،اصر کلیدی مانند آسمان یا تپه های غلتشی را مشخص می کند و زیبایی شناسی کلی را ایجاد می کند.

مزایای قلاب های یک ظاهر طراحی شده برای طراحان و توسعه دهندگان

قلاب های یک ظاهر طراحی شده به طراحان و توسعه دهندگان این امکان را می دهد که همه چیز را در یک برنامه ثابت و انعطاف پذیر نگه دارند. تصور کنید رنگ اصلی خود را یک بار در استایل های ریشه با استفاده از یک متغیر CSS مانند:

سپس، در هر جایی از شیوه نامه خود که به آن رنگ نیاز است، آن را با تابع var() فراخو، کنید. بهترین ،مت؟ اگر می خواهید آن رنگ را تغییر دهید - مثلاً از آبی برقی به سبز لیمویی - و 30 ،صر در سراسر برنامه شما از آن استفاده می کنند، باید آن را تنها در یک مکان به روزرس، کنید.

به علاوه، همگام سازی قلاب های یک ظاهر طراحی جه، با ابزارهای طراحی مانند Figma تضمین می کند که انتخاب های طراحی شما ثابت می مانند. همین تصمیمات هم در مدل های شما و هم در محصول نهایی منع، می شود. مثل این است که طراحی و کد شما به یک زبان صحبت کنند.

بازگشت به بالا

خداحافظ هاردکدینگ

با قلاب های یک ظاهر طراحی شده، تعریف و استفاده از ویژگی های طراحی آسان تر و سازگارتر از همیشه است. کد اصلی را که در آن ویژگی سفارشی رنگ اصلی CSS را تعریف و استفاده می کنیم، بگیرید و آن را با نسخه قلاب استایل مقایسه کنید:

این همان رویکرد و اثر است، اما با روشی روانتر و سازماندهی شده برای مدیریت طراحی. هنگامی که استفاده از قلاب های یک ظاهر طراحی شده به طبیعت دوم تبدیل می شود، ایجاد به روز رس، های طراحی بسیار آسان است.

در سطح برنامه، قلاب های یک ظاهر طراحی از تکالیف رنگ برای شما مراقبت می کنند، بنابراین توسعه دهندگان می توانند روی چیزهای سرگرم کننده تمرکز کنند. دیگر نیازی به تنظیم دستی هر ،صر نیست. اکنون، قلاب استایل من، را برای تنظیماتی مانند رنگ پس زمینه دکمه اعمال می کنید، و همه آن ها در یک حرکت به روزرس، می شوند. به علاوه، اگر با اجزای استاندارد Salesforce یا طرح های طراحی سیستم کار می کنید، ک، های SLDS به طور خودکار سبک های من، سیستم را اعمال می کنند.

بیایید جادوی پشت قلاب های یک ظاهر طراحی شده را بشکنیم:

• را فضای نام - همیشه "slds" - به ما می گوید که قلاب متعلق به سیستم طراحی لایتنینگ Salesforce است.
• دامنه، با علامت "g" برای global، به این م،ی است که این قلاب ها می توانند کل برنامه را تحت تاثیر قرار دهند. دسته بندی هایی مانند رنگ و فونت به سازماندهی سبک ها بر اساس حوزه طراحی بصری کمک می کند.
• اموال به جنبه های استایل خاصی مانند مقیاس، خانواده یا وزن اشاره دارد که به شما در تنظیم دقیق تایپوگرافی کمک می کند.
• نقش و ،ت دقت را اضافه کنید و ویژگی هایی مانند رنگ تاکیدی یا دکمه غیرفعال را نشان دهید.

دسته بندی ها پایه و اساس قلاب های یک ظاهر طراحی شده را تشکیل می دهند و به شما امکان می دهند ،اصر طراحی بصری مانند رنگ، فونت، شعاع، سایه، فاصله و اندازه را با استفاده از مقیاس های از پیش تعریف شده کنترل کنید. این استانداردسازی باعث سازگاری بیشتر طراحی و اجرای آن بسیار آسان تر می شود. به جای اختراع مجدد چرخ برای هر ،صر، می تو،د به این مؤلفه های اثبات شده برای حفظ ظاهری منسجم در سراسر برنامه خود اعتماد کنید.

در اینجا چند نمونه از قلاب های یک ظاهر طراحی شده است:

–slds-g-،ing-3
–slds-g-font-scale-5
–slds-g-sizing-3
–slds-g-color-surface-1
–slds-g-color-on-surface-2
–slds-g-color-accent-container-1
–slds-g-color-error-1

اکنون که نحو را پایین آورده ایم، بیایید یک مورد استفاده از طراحی را بررسی کنیم: ساخت یک جزء Salesforce سفارشی برای تابلوی فروش.

بازگشت به بالا

استفاده از قلاب های یک ظاهر طراحی شده

تصور کنید که به تازگی یک سه ماهه فروش قوی را به پایان رسانده اید و تیم شما نسبت به موفقیت های خود احساس خوبی دارد. برای حفظ انرژی، رهبری تصمیم می گیرد تا یک جزء سفارشی تابلوی امتیازات را به برنامه Salesforce اضافه کند تا رقابت دوستانه را پیش ببرد.

چالش: تابلوی امتیازات باید پویا، دارای مضمون و سازگاری در چندین دستگاه باشد و به طور یکپارچه در داشبورد فروش ادغام شود. اینجاست که قلاب های یک ظاهر طراحی شده به کمک می آیند.

طراحی را با Figma شروع کنید

طراح ما با کار با جدید شروع می کند کیت SLDS_V2 Figma، که باعث ایجاد همکاری بین طراحان و توسعه دهندگان می شود. با اجزای از پیش ساخته شده و دارایی های طراحی، طراح می تواند به سرعت طرح اولیه ج، امتیازات را جمع آوری کند. این اجزا از قبل با اصول طراحی SLDS Salesforce هماهنگ شده اند که باعث صرفه جویی در زمان و تضمین ثبات می شود.

از آنجا، طراح تابلوی امتیازات را برای برآورده ، نیازهای خاص، مانند نمایش رتبه بندی فروشنده و پیشرفت به سمت اه،، تنظیم اندازه آواتار و رنگ نوار پیشرفت با استفاده از قلاب های یک ظاهر تنظیم می کند. زیبایی این فرآیند این است که قلاب های یک ظاهر طراحی شده به طراح اجازه می دهد تا تنظیمات بصری دقیقی را انجام دهد در حالی که همه چیز را تحت یک سیستم واحد و قابل استفاده مجدد یکپارچه نگه می دارد.

کامپوننت را بسازید

پس از آماده شدن طرح، ،ت توسعه دهنده است. آن ها از HTML م،ایی و نقش های ARIA من، برای ساختن کامپوننت استفاده می کنند و از همان ابتدا دسترسی را تضمین می کنند. به لطف طرح های اجزای SLDS، توسعه دهنده ک، های HTML و SLDS CSS آماده ای برای استفاده برای ،اصری مانند کارت، آواتار و نوار پیشرفت دارد.

با استفاده از ک، های سفارشی، توسعه دهنده می تواند قلاب های استایل را همانطور که در طراحی مشخص شده است، ادغام کند و از ارتباط یکپارچه بین طرح و محصول نهایی اطمینان حاصل کند. نکته مهم این است که آنها هر ک، سفارشی را با یک فضای نام منحصر به فرد اضافه می کنند تا از هرگونه درگیری با ک، های SLDS موجود جلوگیری کنند، که ممکن است با به روز رس، های آینده تغییر کند.

استایل را بررسی کنید

بعد از کلی کار سخت، جزء سفارشی تابلوی امتیازات آماده است. هنگامی که در داشبورد برنامه قرار می گیرد، به طور طبیعی با طراحی رابط کاربری لایتنینگ موجود مطابقت دارد. قلاب های یک ظاهر طراحی شده تضمین می کنند که تابلوی امتیازات از نظر فاصله، تایپوگرافی و چیدمان کلی با سایر مؤلفه ها همسو می شود و آن را مانند بخشی از ا،یستم Salesforce می سازد.

جادوی قلاب های یک ظاهر طراحی شده با ویژگی های جدید طراحی پویا و سازگار Salesforce Cosmos، تم جدید رابط کاربری، ادامه می یابد. قلاب های استایلینگ به ،وان یک پل عمل می کنند و بدون نیاز به تنظیمات سخت کد، سبک ها را بین رابط کاربری موجود و جدید تغییر می دهند. هنگامی که رابط تغییر می کند، قلاب های استایل جه، در زمان واقعی به روزرس، می شوند و رنگ ها، فونت ها و فاصله ها را در برنامه تنظیم می کنند. این تضمین می کند که بدون توجه به نسخه UI در حال استفاده، طراحی صیقلی و ثابت باقی می ماند.

بازگشت به بالا

یک ظاهر طراحی شده اجزای Salesforce مقاوم در برابر آینده را قلاب می کند

با نگاهی به آینده، قلاب های یک ظاهر طراحی شده نیز راه را برای قابلیت های آینده هموار می کنند. به ،وان مثال، انتقال به حالت تاریک با قلاب های یک ظاهر طراحی شده در محل بسیار آسان تر می شود. به جای تنظیم دستی هر مؤلفه، می تو،م قلاب های استایل جه، را مجدداً اختصاص دهیم تا با تم تیره سازگار شوند و در زمان صرفه جویی کنیم و پیچیدگی را کاهش دهیم. با ظهور ا،امات قالب بندی جدید - چه برای حالت های با کنتراست بالا و چه برای طرح های برند سفارشی - قلاب های یک ظاهر طراحی سریع و کارآمد انجام تغییرات را بدون بازنگری کل پایه کد انجام می دهند.

این نمونه از تابلوی امتیازات پویا و منعطف، یکپارچگی طراحی را در بین دستگاه ها حفظ می کند و همچنین بدون زحمت در داشبورد فروش ادغام می شود. نتیجه یک ابزار بصری منسجم و جذاب است که به تیم انگیزه می دهد، از اه، شرکت پشتیب، می کند و به Salesforce وفادار می ماند. استانداردهای طراحی.

تجربیات منسجم

قلاب های یک ظاهر طراحی جه، یکی از ویژگی های اصلی SLDS 2 (بتا به زودی) هستند و به اجزای Salesforce شما در آینده کمک می کنند. با متمرکز ، مقادیری مانند رنگ ها، فونت ها و فاصله ها، قلاب های استایل سازی ثبات را در بین به روزرس، ها تضمین می کنند و سفارشی سازی را به سادگی تغییر دادن یک متغیر به منظور ایجاد موج تغییر در اجزای مختلف بدون بازنویسی کد انجام می دهند.

با قلاب های یک ظاهر طراحی شده، شما برای تجربه های منسجم و سازگار Salesforce آماده هستید.

بازگشت به بالا