راهنمای جامع برای سیستم‌ طراحی یا همان دیزاین سیستم

شرکت هایی مانند Airbnb ، Uber و IBM با در نظر گرفتن سیستم طراحی مختص خود، روش های طراحی محصولات دیجیتالی را تغییر داده اند. با استفاده از مجموعه ای از مولفه های قابل تکرار و مجموعه ای از استانداردهای راهنمای استفاده از این مولفه ها ، هر یک از این شرکت ها توانسته اند سرعت تولید و نوآوری را در تیم های خود تغییر دهند.

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

"سیستم های طراحی یک نقشه مناسب ، متمرکز و در حال تحول از نقاط شناخته شده محصول یا برند را ارائه می دهند تا به شما در کشف نقاط جدید کمک کنند."

اهمیت سیستم های طراحی

سیستم طراحی چیست؟

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

چه تفاوتی بین سیستم طراحی و راهنمای سبک یا کتابخانه الگو وجود دارد؟

https://www.youtube.com/embed/Eq۰-Sz۵S۹iI

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

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

حدود ۱۰ سال پیش ، ما سیستم های طراحی را کتابخانه الگو می نامیدیم. چند سال پیش ، طراحی اتمی وارد صحنه شد و دستور زبان جامع تری را در مورد سیستم های طراحی ارائه داد. هنگامی که گوگل در سال ۲۰۱۴ از Material Design رونمایی کرد و سرانجام مفهوم سیستم های طراحی بالغ شده بود.

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

ساخت یک زبان طراحی

مراحل اصلی و مزایای ساخت سیستم طراحی چیست؟

۱- یک ممیزی (حسابرسی) بصری انجام دهید

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

۲- یک زبان طراحی بصری ایجاد کنید

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

• رنگ

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

• تایپوگرافی

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

• اندازه و فاصله گذاری

سیستمی که برای فاصله‌گذاری و تعیین اندازه استفاده می‌کنید، زمانی که ریتم و تعادل داشته باشید، بهتر به نظر می‌رسد. یک مقیاس ۴ اصلی به دلیل استفاده در استانداردهای iOS و Android ، قالب های اندازه ICO و حتی اندازه قلم استاندارد مرورگر ، به عنوان مقیاس توصیه شده ، در حال افزایش محبوبیت است.

• تصویرسازی

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

۳- یک کتابخانه UI / الگو ایجاد کنید

برخلاف حسابرسی تصویری که قبلاً انجام داده اید (که به کیفیت بصری عناصر طراحی شما نگاه می کند) ، این مرحله از مراحل اجزای واقعی رابط کاربری شما است. تمام قطعات UI خود را که در حال تولید است جمع آوری کنید. این به معنای هر دکمه ، فرم ، حالت و تصویر است. آنچه را که نیازی ندارید ادغام کرده و حذف کنید.

۴- هر ملفه و زمان استفاده از آن را مستند کنید

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

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

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

در ویدئو زیر پل فارینو در مورد چرخه حیات و ماهیت تکراری ساخت یک سیستم طراحی توضیح داده است.

https://www.youtube.com/embed/Eq۰-Sz۵S۹iI

نمونه هایی از سیستم های طراحی

سیستم طراحی Atlassian

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

زبان طراحی Shopify

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

با تجربه ای که "به حتی بی تجربه ترین کارآفرین بهترین فرصت برای موفقیت را می دهد" به راحتی می توان درک کرد که Shopify به مشاغل کمک می کند تا مشکلاتشان را مدیریت کنند.

ایجاد یک زبان طراحی منحصر به فرد IBM

ساختار کلی برنامه طراحی شرکت IBM "مردم + تمرین + مکانها" است. این شعار بیانگر این ایده است که "توجه دقیق به این ۳ مورد باعث تغییر فرهنگ مورد نظر ما در رابطه با طراحی در شرکت خواهد شد."

تمرین ، ستون میانی ، یک قسمت مهم از معادله و مسئولیت تیم IBM Design Practices است.

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

منبع: uxdesign.cc