فاطمه علیخواه | Fatemeh Alikhah
فاطمه علیخواه | Fatemeh Alikhah
خواندن ۶ دقیقه·۱۰ ماه پیش

دیزاین سیستم چیست؟


اگر شما با دیزاینرها، یا برنامه نویس ها در ارتباط باشید، به طور حتم اصطلاح دیزاین سیستم را شنیدید، اما اصلا دیزاین سیستم چیست و چه کاربردی دارد؟ دیزاین سیستم یک هدف اصلی دارد:

سرعت و ایجاد یکپارچگی در طراحی و توسعه محصول
گاهی وقتها به جای دیزاین سیستم از اصطلاحی مانند
استایل گاید یا پترن لایبری هم استفاده می‌شود، آیا واقعا همه ی اینها یک معنی دارند؟
  • دیزاین سیستم مجموعه کاملی است ارزش ها مفاهیم معانی قواعد و زبان زن مشترک است
  • استایل گاید یک داکیومنت (سند) فیزیکی یا دیجیتالی هست که شامل یک گایدلاین یا راهنمایی از اسناد ها نمونه ها و قواعد یک کمپانی برند می‌باشد.
  • پترن لایبری ها در واقع مجموعه ای سازمان یافته از کامپوننت های مختلفی است که شما در یک پروژه واحد از آن استفاده می کنید و این می تواند شامل مجموعه ای از کدها، دیزاین گاید لاین و نمونه ای از کاربرد هر کدام از این کامپوننت ها در کار باشد.
اما کاربرد آن در دیزاین چیست؟

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

بهترین نمونه هم که هنوز در بررسی دیزاینرها به آن توجه میکنند، به استایل گاید ناسا در سال ۱۹۹۶ می‌توان اشاره کرد.

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

  • اصول و قواعد دیزاین مثل margins دینگ و grid و استایل های برند و نمونه ای از کاربرد آن
  • اصول و برندینگ در محصولات مختلف مانند: تایپوگرافی و لحن نوشتن، متن ها، آیکان‌ها، تصاویر و رنگ ها …

بهترین برندهایی که استایل گاید خود را صورت آنلاین انتشار داده اند:

استارباکس

نت فلیکس

اسپاتیفای و …

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

پترن لایبری

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

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

  • Heading
  • Dropdown
  • List
  • Buttons
  • Typography
  • Slider

و…. اشاره کرد.

پترن لایبری در مقایسه با استایل گایدها کاربردی‌تر هستند، به دلیل اینکه جزئیات بیشتری در مورد هر کدام از این کامپوننت ها دسترسی دارید. پترن لایبری ها را یک دسته لگو در نظر بگیرید که با ترکیب اینها یک ساختار بزرگ تر و بهتر می توانید به وجود بیاورید.

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

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

  • نام پترن
  • نمونه ویژوال
  • اسم پترن
  • عناصر دیزاین
  • نمونه کد
  • نحوه کاربرد

و شامل عناصر مرتبط دیگر …

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

دیزاین سیستم

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

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

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

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

با استفاده از زبان مشترک می‌توانیم بین ایده های مختلفی که داریم یک ارتباط برقرار کنیم:

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

در نتیجه ایجاد دیزاین سیستم و بخش های مختلف آن مانند: دکمه ها، رنگ ها و …

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

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

  • پترن لایبری
  • استایل گاید
  • مدل های مفهومی
  • زبان مشترک
  • منابع طراحی
  • کامپوننت ها
  • کدها
  • انیمیشن و موشن دیزاین
  • اصول نوشتن محتوا
  • شامل قواعد و قوانین دسترس پذیری

و…

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

بهترین دیزاین سیستم های موجود:

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

ما به کدام یک از این ۳ دسته نیاز داریم؟

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

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

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

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

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