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

    سایز کوچک: فقط شامل اجزای بسیار اصلی و ویژگی های آن است

    قابل تنظیم: برای اجازه دادن به بیان نام تجاری در برنامه های مختلف

    علامت گذاری: چارچوب برای استفاده در هردسته از برنامه ها

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

برخی از آنها دارای ویژگی های زیادی بودند که من نیازی به آنها نداشتم ، برخی از آنها سفارشی سازی کم را مجاز نمی دانند و بیشتر آنها براساس یک چارچوب خاص مانند React ، Vue یا Angular ساخته شده اند.

من ساختن Kor را در 21 نوامبر 2019 آغاز کردم و اولین نسخه 4 روز بعد منتشر شد. از امروز ، 7000+ بارگیری در npm ، 92 ستاره در GitHub و 300 کاربر متوسط ماهانه دارد.

۱- تعریف قوانین پایه سیستم های طراحی

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

ابعاد

ابعاد تأثیر زیادی در هماهنگی ادراک شده رابط کاربر دارد و بهترین راه برای دستیابی به آن تعریف واحد پایه است. در مورد Kor ، این واحد به عنوان 8 px  تعریف شد ، قراردادی که توسط اکثر سیستم های طراحی متناسب با رایج ترین وضوح صفحه نمایش دنبال می شود. معمولاً واحدها به شرح زیر تعریف می شوند:

8px: فاصله بین عناصر یک جز

16px: حاشیه اجزای خارجی

24px: اندازه نمادها و ارتفاع خط

در موارد نادر مانند رابط های کاربری متراکم با اطلاعات ، شبکه 8px را می توان یک بار دیگر تقسیم کرد و در نتیجه 4 مانند 4 ، 12 یا 20 افزایش می یابد.

رنگ ها

از رنگ ها برای انتقال سلسله مراتب ، برجسته سازی حالت ها و جلب توجه به برخی از مولفه های UI استفاده می شود. برای کاهش پیچیدگی و تغییر آسان تم ها ، در Kor من بر کاهش تعداد رنگ ها به حداقل توجه کرده ام و در مجموع 4 دسته تعریف شده است:

   پایه: پس زمینه محتوا(مانند نوار برنامه ، کارت ها ، صفحه)

  خنثی: رنگهای مثبت و منفی (مانند متن ، خطوط تقسیم کننده و موارد برجسته شفاف)

  لهجه: رنگهای برجسته حالت فعال و فراخوان

 عملکردی: رنگهای تأیید ، هشدار ، خطا و حالت خنثی

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

تایپوگرافی

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

با مختصر نگه داشتن مقدار سبک ها ، 4 سبک قلم تعریف شده و از طریق متغیرها قابل تنظیم هستند:

هدر 1: برچسب نوار برنامه و عناوین محتوا

هدر 2: عناوین مولفه ها (به عنوان مثال برگه ها ، کارت ها)

 متن 1: برچسب های مولفه (به عنوان مثال برچسب ها ، کادرهای تأیید)

 متن 2: متن ثانویه مولفه (به عنوان مثال آواتار)

ارتفاع

روش مفید دیگر برای سازماندهی UI و انتقال سلسله مراتب محتوا ، استفاده از ارتفاعات است. در Kor من 4 لایه تعریف کرده ام که با استفاده از رنگ و سایه تنظیم می شوند. مقادیر رنگی برای هر لایه بر اساس تأثیر طبیعی نور بر روی سطوح تعریف شده است، به این معنی که لایه های نزدیکتر به بیننده در هر دو مضمون روشن و تاریک روشن تر از لایه های دیگر هستند.

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

لایه 1: پس زمینه صفحه

لایه 2: محتوای کناری (صفحه ها ، میله های ناو)

لایه 3: ظروف محتوا (کارت ، آکاردئون)

لایه 4: محتوای پوشانده شده (اعلان ها ، روش ها)

شمایل نگاری (کشیدن ایکون)

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

۳-ساخت کامپوننت‌ها

کامپوننت‌های سیستم طراحی واحدهای UI هستند که عمومی هستند (که می توانند در موارد مختلف استفاده شوند) و با استفاده از ویژگی ها، اسلات ها و رویدادها قابل تنظیم هستند. برنامه ها معمولاً از 80٪ مولفه های رایج مانند دکمه ها یا فرم‌های اینپوت و 20٪ از موارد منحصر به فرد مانند نقشه ها یا تقویم ها تشکیل شده اند.

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

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

۳:کشیدن و رها کردن سندباکس

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

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

۴. مستندات، راهنمایی و پشتیبانی

به موازات طراحی و توسعه سیستم طراحی، من در صفحه اصلی اسناد برای توضیح نحوه تنظیم، مصرف و کمک به Kor کار کرده ام.

کل برنامه وب با خود کتابخانه مولفه ساخته شده است.

منبع: uxplanet.org

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

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

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

من مدام تعاریف مختلفی را می شنوم، بنابراین بگذارید شروع کنم و بگویم که یک سیستم طراحی چه چیزی نیست: این یک کتابخانه از طراحی اولیه  Sketchنیست ، بیش از یک راهنمای سبک یا یک کتابخانه الگو است … در واقع ، این همه اینها است و خیلی موارد دیگر!

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

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

همانطور که Jina Anne در کنفرانسی که در آن شرکت کرده بودم کاملاً توصیف می کند ، سیستم از عناصر ملموس و غیر مشهود تشکیل شده است:

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

راهنمای سبک (Style Guide) یا کتابخانه الگوها(Pattern Library): تفاوت چیست؟

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

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

بیشتر سیستمهای طراحی فعلی شامل هر دو هستند ، درست مثل Shopify اگر بخواهم اشاره دقیق کنم یک برگه “Visuals” برای راهنمای سبک خود و یک تب “Components” برای کتابخانه الگوها دارد.

در نتیجه دیزاین سیستم مفهومی فراتر از این دو دارد و به فلسفه و چرایی هر المان نیز می‌پردازد.

چرا امروز در مورد سیستم طراحی صحبت می کنیم؟

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

برای مدت زمان طولانی ، دیجیتال مانند “پروژه جانبی” تلقی می شد: به این صورت که از دستورالعمل های گرافیکی برای عناصر چاپی استفاده می شود و سپس برخی از دستورالعمل های اضافی را برای دیجیتال قرار داده میشد …

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

داشتن دیزاین سیستم چه مزیت‌هایی دارد؟

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

بعد از مشخص شدن هدف,برای اینکه بدانیم کارمان را از کجا شروع کنیم باید به چند سوال پاسخ دهیم:

1- هدف و ارزشهای مشترک

در نظر بگیریم که به کجا میخواهیم برسیم؟(یعنی هدف چیست؟)/ چرا؟ /چطور؟

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

این ارزش ها همانند اهداف برند باعث راهنمایی ما می شوند و ما در پروسه طراحی باید این ارزش ها را مدنظر قرار دهیم.

2- اصول طراحی

اولین چیزی که باید به خاطر بسپارید: اصول طراحی فراتر از جنبه بصری یک محصول هستند …

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

اصول طراحی باید انتخاب های طراحی را هدایت کند.

3- هویت و زبان برند

هویت باید متناسب با استراتژی و اهداف برند تعریف شود. Alla Kholmatova در مورد “الگوهای ادراکی” صحبت می کند که به شرح زیر لیست می کند:

رنگها، قلم ها، فضاها، شکل ها، نمادها، تصاویر، عکسها، تصاویر متحرک، تن صدا و لحن، صوت

همه اینها الفبای نام تجاری را تشکیل می دهند.

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

در سیستم طراحی ما، با استفاده از دستورالعمل ها ، بایدها و نبایدها و “مثال های خوب” استفاده ، تحقق می یابد.

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

4- اجزا و الگوها

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

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

در تصویر زیر ، به وضوح می توانیم ببینیم که یک جز component با اسناد فنی و کاربردی مشخص می شود ، در حالی که یک الگو توصیه هایی در مورد نحوه استفاده از آن را ارائه می دهد:

بِست پرکتیس‌ها (بهترین نمونه‌ها)

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

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

سیستم طراحی چه نوعی باید باشد؟

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

• چند نفر از این سیستم استفاده می کنند؟
• مشخصات آنها چیست و آیا از نظر موضوع به اندازه کافی بالغ هستند؟
• چند محصول را باید هم تراز کنیم؟ در چند سیستم عامل؟ چند فناوری مختلف (Angular ، React ، دیگران …)؟
• چه درجه ای از ثبات را در بین محصولات خود می خواهیم؟

همه این پاسخ ها به ما کمک می کند تا مناسب ترین نوع سیستم طراحی را تعریف کنیم.

 Alla Kholmatova در کتاب خود به ما الهام می دهد:

سیستم سختگیرانه یا منعطف ؟    

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

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

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

توزیع شده یا یکپارچه؟     

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

تمرکز سیستم یکپارچه بر یک زمینه منحصر به فرد. همچنین از قطعات تشکیل شده است ، اما این قطعات قابل تعویض نخواهند بود. این نوع سیستم مناسب محصولاتی است که قطعات تکراری آنها بسیار کم است و به یک Art Direction قوی و اغلب در حال تغییر (نمونه کارها ، ویترین ها ، کمپین های بازاریابی …) نیاز دارند.

متمرکز یا توزیع شده؟

سازمان اطراف سیستم های طراحی برای تحول و مقیاس پذیری بسیار مهم است. در این مقاله ، Nathan Curtis انواع مختلف مدل ها را با جزئیات بیان می کند. در اینجا دو نفر از آنها هستند:

کدام مدل برای سیستم طراحی شما: متمرکز یا توزیع شده؟

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

در یک مدل توزیع شده ، چندین نفر از چندین تیم مسئول سیستم هستند. پذیرش سیستم سریعتر است زیرا همه احساس می کنند درگیر هستند اما همچنین به رهبران تیمی نیاز دارد که دید کلی آن را حفظ کنند.

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

سیستم خود را در یک مقیاس قرار دهید

بنابراین ایده این است که سیستم خود را در این سه مقیاس قرار دهیم تا نوع سیستمی را که می خواهیم تعریف کنیم:

Airbnb: سیستمی دقیق ، مدولار و متمرکز

چند نمونه

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

• طراحی متریال برای سادگی مسیریابی و ابزارهای طراحان و توسعه دهندگان

• Atlassian به دلیل خسته کننده بودن آن

• Polaris از Shopify به دلیل ادغام آن در گردش کار طراح و توسعه دهنده

• IBM به دلیل کار خارق العاده اش روی زبان طراحی

سخن آخر

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

همانطور که برای هر محصول خوب ، این محصول عقب مانده خاص خود را دارد و باید خود را به روشی تکراری بسازد و کاربران (طراحان ، توسعه دهندگان ،PO و …  )را در قلب این روش قرار دهد.

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

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

و همه اینها فقط یک آغاز است!

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

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

منابع

کتاب سیستم های طراحی Alla Kholmatova

هر مقاله افسانه ای Nathan Curtis

کنفرانس ها و نوشته های Jina Anne

منبع: uxdesign.cc

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

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

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

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

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

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

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

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

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

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

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

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

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

• رنگ

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

• تایپوگرافی

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

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

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

• تصویرسازی

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

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

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

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

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

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

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

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

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

سیستم طراحی Atlassian

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

زبان طراحی Shopify

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

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

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

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

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

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

منبع: uxdesign.cc