iHMahmoodi
Visual Designer

دیزاین سیستم چیست و تفاوت آن با پترن لایبرری و استایل گاید

What is design system , pattern library and style guide?

دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir

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

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

 

محتوا پنهان

 

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

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

  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 یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

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

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

از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به

  1. آموزش طراحی تجربه کاربری – UX Design
  2. آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
  3. آموزش طراحی گرافیک با فتوشاپ 

 

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

کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.

 

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

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

 

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

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

 

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

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

 

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

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

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

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

استایل گاید یا برند گاید لاین اسپاتیفای
استایل گاید یا برند گاید لاین اسپاتیفای

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

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

قبل از وب معمولاً استایل گایدها به صورت پرینت شده به کار می‌رفتند و اگر بخواهم نمونه‌ای برای شما مثال بزنم میشه به استایل گاید  ناسا در سال 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. و اصول دسترسی پذیری

دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

 

 

 

گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری

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

عضویت در گروه تلگرام UIXFamily

 

 

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

شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:

عضویت در کانال تلگرام AsteriXarts

 

 

آموزش های اختصاصی طراحی در اینستاگرام

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

دنبال کردن AsteriXarts در اینستاگرام

 

 

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

بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید.

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

عضویت در خبرنامه هفتگی دیزاین Dexigner News

 

 

طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.

عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts

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

 

 

 

خبرنامه هفتگی دیزاین DeXigner News
خبرنامه هفتگی دیزاین DeXigner News
هر هفته آموزش‌ها، مطالب و لینک های مفید در زمینه دیزاین را در ایمیل خود داشته باشید!
شما در هر زمانی می‌توانید ارسال خبرنامه را لغو کنید.

 

 

 

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.

  1. Dribbble.com/iHMahmoodi
  2. Behance.net/iHMahmoodi
  3. Instagram.com/iHMahmoodi

 

 

در آموزش ” دیزاین سیستم ، پترن لایبرری و استایل گاید چیست؟ “ شما متوجه معنای و کاربرد استایل گاید، پترن لایبرری و دیزاین سیستم شدید و انواع آن ها را نیز شناختید.

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

 

در صورتی که سوالی داشتید در قسمت نظرات بپرسید و حتما جواب خواهم داد.

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

 

نظر شما در مورد آموزش ”  دیزاین سیستم ، پترن لایبرری و استایل گاید ” چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در حوزه طراحی UI و UX علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.

 

لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:

آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی

آموزش جامع Figma – کار با ابزارها و محیط فیگما 2021 – قسمت اول

آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم

10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول

آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma

5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت اول

5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت دوم

آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول

آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم

آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم

آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم

آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم

آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم

معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول

آموزش Adobe Xd -‌ یک دکمه برای همه جا در طراحی رابط کاربری

10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری

آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟

آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟

چطور طرح‌ رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟

لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟

صطلاحات طراحی رابط کاربری – بخش اول: رنگها

آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.

دوره آموزش جامع طراحی رابط کاربری ( UI Design ) - Learnuix.ir

عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات