آماده‌سازی فایل های طراحی برای توسعه دهنده در ۴ بخش [راهنمای سپردن طراحی]

| 1 2yySvbHrBpwtCR3 gbJW0Q

۱. راهنماهای سبک (Style Guides) را تهیه کنید:

پالت رنگ:

ارائه پالت به توسعه دهنده قبل از شروع طراحی، باعث صرفه جویی زیادی در وقت هنگام ایجاد متغیرها می شود.

| image 27
Material Design by Google

ابزارهای پالت رنگ:
http://paletton.com
https://coolors.co
https://colorhunt.co

آیکن نگاری:

| image 28

همه آیکن ها از یک نوع باید یک اندازه باشند.

(توصیه: نمادها را به داخل محدوده مربعی وارد کنید تا مهم نباشد که اندازه گرافیک آن به اندازه مربع باشد)

آیکن های رایگان:
https://iconmonstr.com
https://thenounproject.com

راهنمای فونت (قلم) ها:

| image 29

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

اندازه های از پیش تعریف شده برای توسعه دهنده (دسک تاپ):
Heading H1:Roboto Medium 24px Sentence
Body 1: Roboto Regular 16px Sentence
Body 2: Roboto Regular 14px Sentence
Button: Roboto Medium 14px All Caps
Caption: Roboto Regular 12px Sentence
Overline: Roboto Regular 10px All Caps

حالت ها:

| image 30

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

مثال انواع حالت ها:
Enabled button: #6200EE
Disabled button: 20% #6200EE
Hover Button: 80% #6200EE
Active State: 100% #6200EE

۲. نمونه اولیه و مستندات:

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

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

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

مثال:
حداکثر طول متن بدنه کارت باید ۱۰۰ کاراکتر اول را نشان دهد به همراه …

ابزار پروتوتایپ:
Invision
Flinto
Adobe XD
JustInMind

آن را “Pixel Perfect” کنید:
حاشیه ها:
تمام حاشیه های بین عناصر باید مطابقت داشته باشند.
فاصله ها (Padding): همان قانون حاشیه ها.
گرافیک (Graphics): گرافیکی که از نظر پیکسل کامل نباشد (pixel perfect)، در نظر کاربر تار یا پیکسلی به نظر می آید.

۳. آماده‌سازی برای اشتراک:

فایل طراحی

فایل طراحی خود را آماده کنید:

  1. لایه ها را نام گذاری کنید
  2. آنها را در گروه ها سازماندهی کنید
  3. آیکن ها و اجزا را نام گذاری کنید
  4. لایه های اضافی را حذف کنید

ابزارهای کمکی طراحی:
سامانه هایی که به شما امکان می دهند مشخصات، دارایی ها و قطعه کدها را به راحتی با توسعه دهنده به اشتراک بگذارید:

Zeplin
Invision
Avocode
Marvel
Supernova
Material Design Gallery

۴. سامانه های طراحی:

| image 32

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

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

۵. نتیجه گیری:

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

امیدوارم از این مقاله لذت برده باشید، در زیر مقالات دیگری را برای سهولت و سرعت روند طراحی شما ارائه خواهم داد.

منبع: usejournal.com


👋 بیایید دوست باشیم! من برای وقت شما ارزش قائلم و احتمالاً شما هم مثل من دوست دارید در راه مطالعه کنید، پس کوتاه می نویسم تا مجبور نباشید از هیچ پاراگرافی صرف نظر کنید.

مرا در اینستاگرام و دریبل دنبال کنید و در لینکداین با من ارتباط برقرار کنید.
InstagramLinkedinBehanceDribbble
با امتیازتان ما را سر حال بیاورید
میانگین: ۰

توسط حسین مرتضوی فر

من کارشناسی معماری دارم. حدود سال 92 بود که متوجه شدم که به کد نویسی و علوم رایانه علاقه مندم. بنابراین شروع به یادگیری جاوا و برنامه نویسی برای اندروید کردم. سپس به ارتقاء مهارت های خود پرداخته و در دانشگاه فردوسی شروع به تحصیل در رشته هوش مصنوعی کردم. در ضمنِ این کار، به علاقه ام یعنی زیباسازی همه چیز ادامه دادم و آن را با تبدیل شدن به طراح UI و UX به پایان رساندم. من اکنون یک طراحم که از سال 97 در حال انجام این کار هستم و به ارتقاء مهارت هایم می پردازم

دیدگاهی بنویسید

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