کوتاه در مورد UI Style Guide

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

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

مزایای استایل گاید

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

انسجام

من تا الان در بسیاری از مقالات و ویدئوها در مورد اهمیت Consistency صحبت کردم و به عنوان یکی از اصول ۱۰ گانه Heuristic Evaluation هم بهش پرداختم. در همه‌ی این موارد صحبت بر لزوم انسجام بوده. این اولین باره احتمالا که دارم راهکار مدونی برای پیاده‌سازی این استانداردسازی هم ارائه می‌کنم.

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

زبان مشترک

از آنجا که دولوپرها هم در شروع برنامه‌نویسی ابتدا این استایل گاید را پیاده سازی می‌کنند اگر نام‌گذاری المان‌های استایل گاید به درستی انجام شده باشه تیم دیزاین و برنامه‌نویسی می‌تونن تعاملات بهتری داشته باشند.

مثلا تنها کافیه برای اصلاح رنگ وضعیت یک دکمه طراح به برنامه‌نویس بگه که در حالت Hover رنگ این دکمه باید Primary Light باشه و از استایل فونت Button استفاده بشه.

اینجوری هر دو تیم با زبان مشترک با هم ارتباط می‌گیرن که سرعت کار رو در نهایت بیشتر می‌کنه.

بروزرسانی در لحظه

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

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

ساده کردن کارها

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

کار یکباره

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

تکمیل به مرور

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

استایل گاید شامل چه مواردی است؟

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

• تایپوگرافی
• پالت رنگی
• گریدبندی، فاصله و سایزها
• آیکنوگرافی
• سایه‌ها و افکت‌ها

ممکنه در برخی منابع، المان‌های طراحی (UI Element) رو هم تو استایل گاید دسته بندی کنن اما اکثر منابع به اتفاق اونها رو در ماهیت دیگری با نام UI Kit دسته‌بندی می‌کنند و استایل گاید رو بخشی از UI Kit می‌دونن.

از اسامی که بگذریم به هر حال گام بعدی پس از طراحی استایل گاید تکمیل کردن UI Kit با افزوده المان‌های طراحی است.

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

نکاتی در مورد تماشای این ویدئو

1. این ویدئو در یوتیوبه پس برای دیدن اون نیاز به VPN دارید.
2. از اونجا که طراحی Style Guide زمانبره در نتیجه مدت این فیلم هم زیاده و چون من روش اصطلاحا بلند بلند فکر کردم نمی‌شد کمترش کرد اما شما می‌تونین رو دور تند ببینید.
3. این ویدئو یه سری پیشنیاز داره که بهتره قبل یا بلافاصله بعد از این ویدئو اونها رو ببینین.
4. یادتون نره سابسکرایب کنین و با لایک و کامنت حمایت