چگونه و چطور دیزاین سیستم؟

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

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

فراهم آوری مقدمات دیزاین سیستم

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

اصول و ارزش ها

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

ایجاد فایل دیزاین سیستم

خب بعد از اون شما باید برید سراغ ایجاد کردن فایل دیزاین سیستمتون و تبدیل کردن اون به Library بدین صورت:

1. یک فایل جدید در اسکچ ایجاد کرده.
2. از طریق منو File/Add as library اون رو به لایبرری های اسکچتون اضافه میکنید.
3. فایل رو از طریق Sketch cloud یا Dropbox یا هر سرویس اشتراک گذاری آنلاین دیگری با افراد دیگر در تیم به اشتراک گذارید.

رنگ های برند و محصول

بعد از اینکه فایل رو ایجاد و تبدیل به Library کردیم میریم سراغ رنگ های محصولمون که در برندینگ از اونها استفاده کردیم. شما باید تمام رنگ هاتون رو ایجاد کرده و سپس اون رو به صورت Style در فایل دیزاین سیستمون اضافه کنید. بدین صورت:

۱- ابتدا چند شکل (Rectangle) به تعداد رنگ هایی که دارید ایجاد میکنید.

۲- سپس اون هارو به به صورت Style به فایل دیزاین سیستمتون اضافه کنید

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

تایپ فیس های لازم در پلتفرم مورد نظر

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

۱- ابتدا یک پلتفرم را انتخاب کنید و تایپ فیس های استاندارد مورد نیاز اون پلتفرم رو گوگل کنید. برای مثال برای iOS اگر در وبسایت Apple Developers نگاه کنید شما به چنین تایپ فیس هایی میرسید که استاندارد همین سیستم عامل میباشند. اما شما میتوانید بر اساس نیاز یا لزوم این سایز ها یا حتی تایپ فیس هارو تغییر دهید. اینها فقط استاندارد هایی هستند که پلتفرم های مختلف بر اساس اصول Accesibility و غیره بهشون رسیده اند. و شما اینکار را برای تمام پلتفرم های مورد نیاز خود انجام میدهید.

۲- سپس همانند رنگ ها این تایپ فیس ها باید به فایل دیزاین سیستم شما اضافه شوند. همانند کاری که برای رنگ ها کردیم، همین کار را برای تایپ فیس ها نیز انجام میدهیم و توجه میکنیم که از نام گذاری های استانداردی استفاده میکنیم.

آیکون ها

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

کامپونتت های بیسیک و اولیه

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

ما در محصول یکسری کامپوننت هایی داریم که در همه محصولات استفاده می شوند و بدون تردید هر دیزاینری در محصولش از اونها استفاده میکند. این کامپوننت هارو باید دیزاین کنید و به صورت Symbol به دیزاین سیستمتون اضافه کنید.

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

• Buttons
• (… Form Inputs (Text input, text area, ratio button
• (… Navigation (mobile navbar, bottom menu, header, footer
• Chips and labels
• List Items

کامپوننت های خاص بر اساس نیاز

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

اپدیت نگه داشتن

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

چند فوت و فن در این زمینه

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

این موضوع برای خیلی از کامپوننت ها قابل استفاده است. همچنین در تغییر رنگ، حالت و خیلی از خصوصیات ظاهری کامپوننت ها از طریق Style هایی که به دیزاین سیستم اضافه کردید ممکن هستش. برای مثال برای تغییر رنگ Button یا حتی تغییر از حالت Fill به Linear.

UI KIT

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

این موضوع واقعا موضوع بزرگی هست و من سعی کردم تا حد امکان به مسایل مهمش بپردازم. امیدوارم که براتون ثمر بخش بوده باشه. اگر هر سوالی داشتید میتونید زیر همین مقاله کامنت کنید یا اینکه از طریق ایمیل با من در ارتباط باشید. sadegheidi [at] outlook . com

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