سلام دوستان امیدوارم حالتون خوب باشه. همونطور که قول داده بودم بعد از اینکه یک مقدار راجب دیزاین سیستم بهتون توضیح دادم الان میخوام راجب چطورگی و اینکه چگونه دیزاین سیستم خودمون رو داشته باشیم صحبت کنم.
اول از همه اینکه لزوما قرار نیست همه سازمان ها و محصولات دیزاین سیستم خودشون رو داشته باشن. همونطور که تو مقاله قبلی گفتم شرکت های بزرگ دیزاین سیستم هاشون رو به عرضه گذاشتن و ما میتونیم دیزاین سیستم های اونهارو بگیریم و با کمی تغییرات از اون ها استفاده کنیم. اما اگر میخواید که دیزاین سیستم خودتون رو داشته باشید با من همراه باشید.
خب بریم تو شروع کار. شما در ابتدا نیاز دارید تا یکسری مقدمات اولیه دیزاین سیستمتون رو ایجاد کنید. این مقدمات شامل این موارد هستند:
اول از همه شما باید اصول و ارزش هایی که برند شما دنبال میکنه رو به صورت شفاهی و دایکیومنت شده بنویسید. شما باید بگید که هدف برند شما چیست؟ برند شما چه جور شخصیتی دارد؟ و سوالاتی از این دست که به شما در اجرای درست فرهنگ محصولتون کمک میکنه.
خب بعد از اون شما باید برید سراغ ایجاد کردن فایل دیزاین سیستمتون و تبدیل کردن اون به Library بدین صورت:
بعد از اینکه فایل رو ایجاد و تبدیل به Library کردیم میریم سراغ رنگ های محصولمون که در برندینگ از اونها استفاده کردیم. شما باید تمام رنگ هاتون رو ایجاد کرده و سپس اون رو به صورت Style در فایل دیزاین سیستمون اضافه کنید. بدین صورت:
۱- ابتدا چند شکل (Rectangle) به تعداد رنگ هایی که دارید ایجاد میکنید.
۲- سپس اون هارو به به صورت Style به فایل دیزاین سیستمتون اضافه کنید
در نام گذاری رنگ ها و گروه بندی استایل ها توجه لازم رو داشته باشید و همیشه از استاندارد مشخصی برای نام گذاری هاتون استفاده کنید.
بعد از رنگ ها نوبت به فونت ها میرسه. شما بسته به پلتفرم هایی که دارید باید تایپ فیس های جداگانه ای داشته باشید. برای مثال شما نمیتوانید از فونت Title که در اندروید از آن استفاده میکنید نیز در دسکتاپ و وب استفاده کنید. بنابراین شما باید بر اساس هر پلتفری که دارید، تایپ فیس های مورد نیاز همون پلتفرم هم ایجاد کنید. بدین صورت:
۱- ابتدا یک پلتفرم را انتخاب کنید و تایپ فیس های استاندارد مورد نیاز اون پلتفرم رو گوگل کنید. برای مثال برای iOS اگر در وبسایت Apple Developers نگاه کنید شما به چنین تایپ فیس هایی میرسید که استاندارد همین سیستم عامل میباشند. اما شما میتوانید بر اساس نیاز یا لزوم این سایز ها یا حتی تایپ فیس هارو تغییر دهید. اینها فقط استاندارد هایی هستند که پلتفرم های مختلف بر اساس اصول Accesibility و غیره بهشون رسیده اند. و شما اینکار را برای تمام پلتفرم های مورد نیاز خود انجام میدهید.
۲- سپس همانند رنگ ها این تایپ فیس ها باید به فایل دیزاین سیستم شما اضافه شوند. همانند کاری که برای رنگ ها کردیم، همین کار را برای تایپ فیس ها نیز انجام میدهیم و توجه میکنیم که از نام گذاری های استانداردی استفاده میکنیم.
سپس نوبت به ایکون ها میرسد که شما باید یک مجموعه از ایکون های مورد نیاز را به فایل دیزاین سیستم اضافه کرده و اونهارو به صورت Symbol درآورده و از اون ها در آینده در دیزاین محصول استفاده کنید.
بعد از اینکه این مقدمات را انجام دادید حال نوبت به کامپوننت های دیزاین سیستم شما می شود.
ما در محصول یکسری کامپوننت هایی داریم که در همه محصولات استفاده می شوند و بدون تردید هر دیزاینری در محصولش از اونها استفاده میکند. این کامپوننت هارو باید دیزاین کنید و به صورت Symbol به دیزاین سیستمتون اضافه کنید.
اون کاپوننت ها شامل این موارد هستند:
حال زمانی که شما کامپوننت های اولیه خود را ایجاد کردید نوبت به آن است که بر اساس نیاز و محصولی که دارید شروع به ساخت کامپوننت های محصولتون کنید و اون هارو به دیزاین سیسمتون اضافه کنید.
مهمترین اصل در دیزاین سیستم نگهداری و استفاده تمام کمال از اونه که شما همیشه باید در حال استفاده از اون باشید و تمام کامپوننت های شما برگرفته از دیزاین سیستمتون باشه (برخی هارو البته میشه چشم پوشی کرد. زمانی که کاربرد یک کاپوننت فقط یکجاست. در صورتی که این اتفاق باید خیلی کم بیفته چون شما باید تا جای ممکن کاپوننت های خودتون رو کم نگه دارید).
شاید زمانی که شروع به این کار کنید از اینکه برای یک کامپوننت باید چند نوع مختلف برای حالت های مختلف اون ایجاد کنید خسته بشید. برای همین یک فوت و فنی اینجا هست که شما میتونید ازش بهره خیلی زیادی ببرید. برای مثال شما زمانی که در حال ایجاد یک ایتم لیست هستید میتونید به جای اینکه تمام حالت هاشو در کامپوننت های تک به تک ایجاد کنید، تمام اونهارو در یک کامپوننت ایجاد کنید و فقط با خاموش و روشن کردن آیتم ها کامپوننت دلخواهتون رو بسازید. به مثال زیر توجه کنید.
این موضوع برای خیلی از کامپوننت ها قابل استفاده است. همچنین در تغییر رنگ، حالت و خیلی از خصوصیات ظاهری کامپوننت ها از طریق Style هایی که به دیزاین سیستم اضافه کردید ممکن هستش. برای مثال برای تغییر رنگ Button یا حتی تغییر از حالت Fill به Linear.
نکته مهمی که در آخر باید گفت اینه که شما باید حالت های موجود هر کامپوننت رو به صورت UI KIT در آورده و اون رو به تیم توسعه یا دیزاین تحویل داده تا بتونند بعنوان مرجعی از لیست تمام کامپوننت ها و رنگ ها و فونت سایز ها و غیره از اون استفاده کنند.
این موضوع واقعا موضوع بزرگی هست و من سعی کردم تا حد امکان به مسایل مهمش بپردازم. امیدوارم که براتون ثمر بخش بوده باشه. اگر هر سوالی داشتید میتونید زیر همین مقاله کامنت کنید یا اینکه از طریق ایمیل با من در ارتباط باشید. sadegheidi [at] outlook . com
با انتشار این مطلب خستگی من رو از نوشتن این مقاله در میکنید D:
