پرش به محتوا
  • درباره
  • نوشته ها
  • فروشگاه خدمات
  • هزینه ها
  • My CV
Menu
  • درباره
  • نوشته ها
  • فروشگاه خدمات
  • هزینه ها
  • My CV
تومان۰ Cart

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

  • آموزش
  • بدون دیدگاه
  • اسفند 11, 1399
زمان مطالعه: 3 دقیقه
در طول تجربه شخصی ام و آن هایی که با دیگر طراحان داشتم، اینها رایج ترین اشتباهاتی اند که باید از آنها اجتناب کنید. به علاوه چند نکته که می توانند هنگام تحویل فایل طراحی به توسعه دهنده کمکتان کنند

فهرست محتوا

اشتراک گذاری

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

پالت رنگ:

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

image 63 آماده‌سازی فایل های طراحی برای توسعه دهنده در 4 بخش [راهنمای سپردن طراحی]
Material Design by Google

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

آیکن نگاری:

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

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

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

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

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

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

همیشه در طراحی خود از قلم های وب استفاده کنید، قلم دسک تاپ با قلم وب یکسان نیست، قلم وب یک قلم است که مخصوص استفاده در صفحات وب طراحی شده. 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 66 آماده‌سازی فایل های طراحی برای توسعه دهنده در 4 بخش [راهنمای سپردن طراحی]

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

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

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

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

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

در این رابطه هم چنین بخوانید
47 درس کلیدی برای طراحان UI و UX [بخش 2]

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

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

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

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

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

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

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

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

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

Zeplin
Invision
Avocode
Marvel
Supernova
Material Design Gallery

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

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

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

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

  • Material Design توسط Google
  • Carbon Design System توسط IBM
  • Fluent Design System توسط Microsoft

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

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

در این رابطه هم چنین بخوانید
10 مهارت نرم برای طراحان رابط کاربری (UI) و تجربه کاربری (UX)

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

منبع: usejournal.com


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

آیا سوالی دارید؟ به من اطلاع دهید:

Instagram – LinkedIn – Behance – Dribbble
رای ها
امتیازدهی به مقاله

عضویت در خبرنامه ما

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

Prevنوشته قبلی7 جهت گیری شناختی تأثیرگذار بر طراحان UX و شیوه جلوگیری از آنها
نوشته بعدی47 درس کلیدی برای طراحان UI و UX [بخش 1]Next
اشتراک در
وارد شدن
اطلاع از
guest
مثلا امین فرجادی
example@email.com
example.com
guest
مثلا امین فرجادی
example@email.com
example.com
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها

می توانید از این مقالات هم لذت ببرید

تجربه

طراحی رابط کاربری از کجا آغاز و به کجا ختم می شود؟ (مسیر طراحی در 3 قدم)

در این مقاله به مسیری پرداختم که یک طراح رابط کاربری برای رساندن یک طرح خام و اولیه به بلوغ طی می کند.

اردیبهشت 5, 1401 بدون دیدگاه
رابط کاربری ui design sketch
تجربه

با 8 سوال بدانید که طراحی رابط کاربری چیست و طراح رابط کاربری کیست؟

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

فروردین 27, 1401 1 دیدگاه
فتوشاپ

Dodge (روشن کردن) و Burn (تیره کردن) در عکاسی چیست؟

Dodge و Burn دو تا از قدیمی ترین و مهم ترین تکنیک های ویرایش عکس هستند.

دی 20, 1400 بدون دیدگاه
تحلیل

5 اشتباهی که باید از آن ها قبل از راه اندازی محصول (product launch) اجتناب کرد

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

دی 13, 1400 بدون دیدگاه

می خواهید تجارت خود را ارتقاء دهید؟

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

تماس با ما

طراحی ها در دریبل

اینجا هر از گاهی طراحی های لوگو و رابط کاربری را آپلود می کنم. در صورت تمایل آن ها را بررسی کنید. 👋

مشاهده نمونه کارها

موشن و طراحی در اینستاگرام

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

مشاهده نمونه کارها

این وب سایت بر خدمات بی مانند ایران سرور استوار است.

لینکداین • دریبل • اینستاگرام • پینترست • گیت هاب • تلگرام

Arrow footer
wpDiscuz
Comment Author Info