سیستم های طراحی در react native , معرفی سیستمهای طراحی

سیستم های طراحی در react native  , سیستم طراحی چیست؟

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

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

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

مزایای استفاده از سیستم های طراحی چیست؟

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

  1. صرفه جویی در وقت – طراحان شما مجبور نیستند ابتدا با ساخت طرح ها مبارزه کنند. آنها می توانند طرح های خود را با استفاده از کتابخانه خود بسازند. با توسعه دهندگان مشابه است. آنها فقط اجزای ساخته شده را می گیرند و آنها را در کد قرار می دهند. این زمان را به طور قابل توجهی برای توسعه تلفن همراه و وب کاهش می دهد.
  2.  کاهش خطاها – با یک سیستم طراحی به درستی ساخته شده است، شما مطمئن هستید که توسعه دهندگان شما اجزای آزمایش شده را به کد منبع محصولات خود اعمال خواهند کرد.
  3. . رضایت خود را افزایش دهید – رضایت شما افزایش می یابد زمانی که زمان توسعه را کاهش می دهید، یک طراحی سازگار را پیاده سازی می کنید و کد مورد نظر را مستقر می کنید.
    تمام مزایای فوق برای React Native اعمال می شود. با استفاده از یک سیستم طراحی مبتنی بر React Native دارای مزیت منحصر به فرد دیگری است. شما می توانید یک طراحی سازگار در iOS و Android داشته باشید.

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

  1. Storybook یک محیط طراحی محیط کاربری و زمین بازی برای اجزای UI است. این ابزار توسعه دهندگان را قادر می سازد مولفه ها را به صورت مستقل ایجاد کنند و آنها را به طور تعاملی در محیط توسعه جداگانه نمایش دهد. کتاب داستان بیرون از برنامه اصلی اجرا می شود، بنابراین کاربران می توانند اجزای رابط کاربر را در انزوا بدون نگرانی در مورد ویژگی ها و الزامات برنامه توسعه دهند.
  2. Zeplin یک برنامه همکاری برای طراحان و مهندسین است که به طور خودکار با ایجاد راهنمایی ها، مشخصات و دارایی های سبک به ساده سازی فرآیند دست دوم کمک می کند. اساسا ما Zeplin را برای طراحی “transpile” برای کد react-native استفاده کردیم.
  3. IcoMoon یک کتابخانه آیکون است که کاربران را قادر می سازد تا از بسته های آیکون خود استفاده کنند. در مورد ما، این ابزار به ما کمک کرد تا اجرای طرح هایی که حاوی ده ها نماد سفارشی هستند را مدیریت کنیم. ما نمی توانیم از بسته react-native-svg برای پیاده سازی آنها استفاده کنیم چون برای انجام آن چند روز کاری طول می کشد. ما به Icomoon امتحان کردیم با استفاده از Icomoon ما توانستیم تمام آیکون های مورد نیاز را به یک پروژه تلفن همراه در چند دقیقه اضافه کنیم.
  4. Jest یک چارچوب تست برای برنامه های کاربردی بومی است. با Jest، شما قادر به آزمایش هر یک از اجزای سازنده هستید، در نتیجه یک کد به خوبی تست شده بدون اشکال ارائه می شود.
  5. Styled-components به کاربران اجازه می دهد تا سبک CSS را بنویسند و آنها را به سبک React Native تبدیل کنند. ما تصمیم به استفاده از اجزای مدل سازی به عنوان الگوی درخشان اصلی ما. اجزای ما شامل بسیاری از منطق است، بنابراین ما تصمیم گرفتیم حداقل بخشی از محاسبات را در داخل اجزای سفارشی طراحی کنیم. به لطف این، کد بیشتر ساختار یافته و قابل خواندن است.
  6. Patch-package اجازه می دهد تا نویسندگان برنامه بلافاصله رفع به وابستگی های npm. در مورد برخی از اجزای مورد نیاز رفتار سفارشی. ما از وابستگیهای npm برای ساختن این اجزا استفاده می کردیم، اما دامنه کلی آنها الزامات ما را برآورده نمی کرد. پچ پکیج اجازه دهید کد منبع وابستگی را تغییر دهیم و این الزامات را برآورده کنیم.
  7. React-native-shadow یک بسته npm است که کاربران را قادر می سازد سایه های سفارشی را در Android اجرا کنند. متاسفانه، React Native یک مسئله پیاده سازی سایه کوچک دارد. در iOS هیچ مشکلی در دستیابی به یک سایه سفارشی وجود ندارد. react-native رنگ سفارشی سایز، اندازه و سفارشی opacity را از جعبه فراهم می کند. این در پلتفرم Android کاملا متفاوت است. React Bative تنها یک سایه سبک prop – Elevation را فراهم می کند. متاسفانه این هدایت ما انتظارات ما را برآورده نمی کند، زیرا فقط سایه های سیاه را مدیریت می کند. همانطور که ما مجبور شدیم سایه ها را در بسیاری از رنگ ها اجرا کنیم، از React-native-shad استفاده کردیم

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *