دیزاین سیستم، پترن لایبرری و استایل گاید چیست؟

دیزاین سیستم، پترن لایبرری و استایل گاید چیست؟
دیزاین سیستم، پترن لایبرری و استایل گاید چیست؟

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

در آموزش دیزاین سیستم ، پترن لایبرری و استایل گاید چه مواردی بررسی می شود؟

محتوای فیلم آموزشی دیزاین سیستم ، پترن لایبرری و استایل گاید:

  1. 01:24 | هدف دیزاین سیستم ، پترن لایبرری و استایل گاید
  2. 01:35 | دیزاین سیستم چیست – Design System
  3. 01:43 | استایل گاید چیست – Style Guide
  4. 01:58 | پترن لایبرری چیست – Pattern Library
  5. 02:26 | نگاهی عمیق به استایل گاید و کاربردهای آن
  6. 03:11 | بخش های استایل گاید | Style Guide
  7. 03:32 | مثال هایی از استایل گاید های معروف
  8. 04:31 | نگاهی عمیق به پترن لایبرری و کاربردهای آن
  9. 5:36 | بخش های پترن لایبرری – Pattern Library
  10. 05:49 | مثالی از پترن لایبرری
  11. 06:11 | نگاهی عمیق به دیزاین سیستم و کاربردهای آن
  12. 06:24 | معنی “دیزاین” و “سیستم” چیست؟
  13. 09:10 | بخش های دیزاین سیستم – Design System
  14. 09:38 | Governance در دیزاین سیستم
  15. 09:53 | مثالی از بهترین دیزاین سیستم های دنیا | Design System
  16. 10:15 | از کدامیک استفاده کنیم؟ دیزاین سیستم یا پترین لایبرری یا استایل گاید؟

 

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

YouTube ویدئو

دیزاین سیستم ، پترن لایبرری و استایل گاید چیست؟

چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟

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

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

 

دیزاین سیستم به چه معناست؟

دیزاین سیستم در واقع شامل مجموعه کاملی است از ارزش ها، معانی، مفاهیم، قواعد و زبان دیزاین مشترک است.

 

استایل گاید چیست؟

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

 

پترن لایبرری چیست؟

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

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

بیاید مقداری عمیق‌تر بشیم که ببینیم هر کدام از این اصطلاحات از چیزی تشکیل شدند و چه کاربردهایی دارد.

 

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

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

قبل از وب معمولاً استایل گایدها به صورت پرینت شده به کار می‌رفتند و اگر بخواهم نمونه‌ای برای شما مثال بزنم میشه به استایل گاید  ناسا در سال 1996 اشاره کرد که یکی از بهترین استایل گایدها در آن زمان بود.

ناسا در این استایل گاید تعاریف و نمونه هایی رو برای نحوه استفاده از برند و هویت بصری در جاهای مختلف نوشته بود که از جمله به لباس فضانوردان، شاتلها، پوسترهای تبلیغاتی و هر جای دیگه که ناسا یک سرویس و یا یک محصول رو میخواست ارائه بده ذکر کرده بود.

استایل گاید ها  از اجزای مختلفی تشکیل شده اند که عبارتند از

  1. اصول و قواعد دیزاین مثل مارجین، پدینگ و گرید
  2.  استایل های برند
  3. نمونه هایی از کاربرد این اصول در محصولات مختلف 
  4. تایپوگرافی و استایل یا لحن نوشتن متن ها
  5. آیکان ها 
  6. رنگها
  7.  و نحوه استفاده از تصاویر

نمونه های خوبی از استایل گاید ها را می شود به برند گایدلاین استارباکس، نتفلیکس، دراپ باکس، اسپاتیفای و… اشاره کرد که لینکشون رو در وبلاگم قرار میدم و می تونید بهشون دسترسی داشته باشید.

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

نگاهی عمیق تر به پترن لایبرری و کاربردهای آن

پترن لایبرری ها در واقع یک کالکشن از دیزاین المنت های مختلفی است که شما بارها و بارها از اونا در هر پروژه ای استفاده می کنید.

اکثر پترن لایبرری ها مثل یک وبسایت یا یک نرم افزاری هستند که شما میتونید در بین هر موضوعی که نیاز دارید جابجا بشین و نمونه و در واقع المنتی که احتیاج دارید را پیدا کنید و در پروژه جدیدتون از اون استفاده کنید.

به عنوان مثال می توان به

  • هدینگ ها
  • تایپوگرافی
  • Drop down ها
  • دکمه ها 
  • اسلایدرها

و موارد دیگر می شود.

 

پترن لایبرری ها در مقایسه با استایل گاید ها مثل اینکه کابردی تر و کامل تر هستند چون که در اینجا شما نمونه ها و اطلاعات جزئی تری را در مورد هر المنتی بهشون دسترسی دارید.

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

آیتم هایی که در پترن لایبرری ها وجود دارند

  1. نام پترن ها
  2. نمونه های ویژوال از پترن ها
  3. عناصر دیزاین
  4. نمونه کدها
  5. نحوه کاربرد
  6. و عناصر مرتبط دیگر 

از بهترین پترن لایبرری ها میشه به بوت استرپ اشاره کرد.

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

 

نگاهی عمیق تر به دیزاین سیستم و کاربردهای آن

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

به کلمه دیزاین و سیستم دقت کنید.

دیزاین رو که ما میدونیم معنیش چی هست اما باید ببینیم سیستم به چه معنی است.

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

یک دیزاین سیستم برای زمانی خوب است که شما نه تنها روی یک محصول، بلکه روی چندین محصول میخواید باهم کار کنید و در نتیجه می خواهید همه اینا با هم هماهنگ باشند. 

دیزاین سیستم شما یک سری کامپوننت‌های UI نیست که در کنار هم قرار می گیرند بلکه استراکچر، معنا و مفهومی است که هر کدام از این محصولات دارند و شما می خواهید همه محصولات دیگر را هم همین ساختار و همین معنا را داشته باشند.

در واقع هدف دیزاین سیستم ها این است که بیاید مسیر کاری شما را از طراحی UI های هماهنگ و منسجم و کانسیستنت به محصولات کانسیستنت تغییر مسیر بدهد.

بصورت خیلی خلاصه دیزاین سیستم رو میشه یک زبان مشترک بین همه محصولاتتون دانست. در واقع ما هم چون زبان مشترکمون فارسی هست براحتی می تونیم با هم حرف بزنیم و حرف های همدیگر را درک کنیم.

پس زبان مشترک باعث میشه که خیلی سریع بتونیم با هم ارتباط برقرار کنیم.

به عنوان مثال فرض کنید شما در انگلیس می خواهید بروید مهمانی و در نتیجه باید آدرس خونه ای رو مهمانی در اون برگزار میشه رو پیدا کنید. 

حالا اگر زبان انگلیسی بلد باشید خیلی سریع می تونید آدرس رو پیدا کنید و به مقصد برسید، اما اگر زبان انگلیسی بلد نباشید ممکنه به مقصد برسید ولی بعد از شام و اتمام مهمانی خواهید رسید!

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

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

حالا نتیجه این است که حتی اگر شما یک دیدن سیستم درست کنید در نهایت شاید شما ممکنه بتونید از این دیزاین سیستم استفاده کنید چون که این سیستم ناقص است و یا اینکه بخش های مختلفی را ندارد. شاید شما خودتان بدانید که هر دکمه ای چه شکلی است و در کجا به کار میره اما اعضای تیم و اعضای دیگری که روی محصولات مختلف دیگری کار می‌کنند دیدی مثل شما را ندارند.

حالا دیزاین سیستم میاد با داکیومنت کردن هرکدام از این کامپوننت ها و بخش های مختلفی که در دیزاین سیستم وجود دارد و روش استفاده از آنها، کاملا به همه افرادی که روی محصولات مختلفی دارند کار می‌کنند و از این دیزاین سیستم استفاده می‌کنند می‌دهد یک درک و فهم یکسان را ارائه می دهد.

پس دیزاین سیستم از این بخش ها درست شده

  1. پترن لایبرری
  2. استایل گاید
  3. مدل های مفهومی
  4. زبان مشترک
  5. منابع طراحی
  6. کامپوننت های کد
  7. انیمیشن و موشن دیزاین
  8. اصول نوشتن محتوا
  9. و اصول دسترسی پذیری

و توضیحات و داکیومنت کاملی که اگر هر کسی این دیزاین سیستم را ببیند بتواند ارتباط بین بخش های مختلف آن را متوجه شود و براحتی از آن استفاده کند.

یک کلمه مهم دیگه هم که خیلی در دیزاین سیستم ها استفاده میشه Governance هست که در واقع به شما می گوید که شما قادرید چه کارهای را انجام بدهید و چه کارهایی را نمی توانید انجام بدهید.

 

از دیزاین سیستم های خیلی خوبی که وجود دارد میشه به airbnb ، پولاریس از شاپیفای ، کربن و از همه مهمتر متریال دیزاین و اپل هیومن اینترفیس گاید لاین اشاره کرد. همچنین می تونید نگاهی هم به مایکروسافت فلوئنت بندازید.

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

از کدامیک استفاده کنیم؟ دیزاین سیستم؟ پترن لایبرری و یا استایل گاید؟

حالا سوال خیلی مهمی که وجود داره اینه که شما به کدام یک از این سه مورد احتیاج دارید؟

 خیلی خلاصه اگر شرکت خیلی بزرگی هستید که روی محصولات مختلفی کار می کنید شاید بهتره که وقت بگذارید و یک دیدن سیستم برای همه کاراتون ایجاد کنید و این در واقع به شما کمک میکنه که در آینده خیلی راحت تر بتوانید محصولات جدید و یا محصولات فعلی تو ایجاد و یا تغییر بدید که در نتیجه باعث صرفه جویی در زمان و هزینه براتون میشه.

اگر یک تیم کوچکتر است که روی یک محصول و یا یک روی و یا روی یک پروژه دارید کار می کنید شاید بهتر است  از پترن لایبرری ها استفاده کنید چون که در واقع اسکیل کار شما خیلی کوچکتر هست و زبان مشترکی بین اعضای تیم وجود دارد که به راحتی می توانید در مورد بخش‌های مختلف دیزاین صحبت و هماهنگ باشید.

و در نهایت فکر می‌کنم که هر شرکت و کمپانی باید یک برند گایدلاین و یا یک استایل گاید داشته باشه که بتونه حداقل بین محصول که در حال حاضر داره و یا محصول جدیدی که در آینده خواهند داشت یک هماهنگی ایجاد کنه

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

 

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

اگر سوال دارید در بخش نظرات برای من بنویسید و اگر از این فیلم خوشتون اومد دکمه لایک رو بزنید و لینک این آموزش رو با دوستانتون هم به اشتراک بگذارید.

با من همراه باشید.

به اشتراک بگذارید
Hossein-Mahmoodi-Profile
حسین محمودی

طراح محصول | مدرس | یوتیوبر

مقاله‌ها: 41

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *