iHMahmoodi
Visual Designer

Dexigner News – خبرنامه هفتگی دیزاین – شماره 12

Dexigner News design newsletter - The fourth week of the month - #12

Dexigner News – خبرنامه هفتگی دیزاین – شماره 12

Dexigner News - خبرنامه هفتگی دیزاین - شماره 12
Dexigner News – خبرنامه هفتگی دیزاین – شماره 12

این خبرنامه Dexigner News – خبرنامه هفتگی دیزاین – شماره 12 در چهارمین هفته ماه است.

Dexigner News خبرنامه ‌ای هفتگی در حوزه دیزاین است که شامل بهترین مقالات، فیلم های آموزشی و معرفی ابزارهایی است که در حوزه دیزاین و به خصوص طراحی رابط و تجربه کاربری ( UI/UX ) یا طراحی محصول هر هفته پنج شنبه‌ها ارسال می شود.

به این خبرنامه بپیوندید تا بهترین لینک های مرتبط با دیزاین را در ایمیل خود دریافت کنید.

 

چطور به عنوان یک طراح تجربه کاربر، برای دسترسی پذیری داکیومنت بنویسیم؟

فرآیند دسترسی پذیری یا Accessibility روش هایی است که سرویس یا اپلیکیشن خود را برای افرادی با ناتوانی جسمی بهینه می کنید که آن ها نیز بتوانند مثل یک فرد سالم از سرویس شما استفاده کنند.

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

از جمله مواردی که اشاره می کند می توان به طراحی و تعریف رفتار کیبورد برای هر چیزی اینتراکتیو (مثل دکمه، لینک و … به جز عکس و متن) در UI اشاره کرد.

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

ابزارهای Narrator با خواندن عناصر داخل صفحه باعث کمک به نابینایان و دیگر اعضای جامعه می شود.

 

چطور تجربه کاربری ( UX ) بهتری برای بخش تنظیمات اپلیکیشن خود طراحی کنیم؟

اگر شما بخش تنظیمات اکثر سیستم عامل گوشی ها رو ببینید خیلی شلوغ و گیج کننده هستند. در این مقاله نکاتی را به شما یادآور می شود که با اجرای آن بتوان بخش تنظیمات اپلیکیشن خود را سر و سامان دهید و یک تجربه خوب را به کاربر منتقل کنید.

از جمله مواردی که در این مطلب برای حل مشکلات تجربه کاربری بخش تنظیمات بیان می کند می توان موارد زیر را نام برد:

  1. دسته بندی و گروه کردن تنظیمات مرتبط
  2. ایجاد یک سلسله مراتب یا هایراکی درست در تنظیمات (در صورتی که نمی دانید Hierachy چیست، فیلم آموزشی کامل آن را با کلیک بر روی اینجا ببینید)
  3. پرهیز استفاده از اسم های نامفهوم و جدید برای بخش های تنظیمات (مثل نام های تکنیکال و تخصصی)
  4. ارائه توضیحات مناسب هر بخش
  5. و…

 

آموزش جامع فیگما – ساخت پروتوتایپ و Constraints در Figma 2021 – قسمت سوم (یوتیوب)

در قسمت سوم سری آموزش های جامع فیگما Figma به سراغ ساخت پروتوتایپ و استفاده از ویژگی Constraints که برای طراحی ریسپانسیو یا واکنش گرا نیز استفاده می شود می پردازم.

در ابتدا با معرفی و استفاده از ویژگی Constraints در فیگما به شما آموزش می دهم که چطور یک عنصر یا یک دکمه را در سایز های مختلف صفحه نمایش تغییر اندازه بدهید.

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

سپس به نحوه ساخت شکلی های دقیق مثل دایره یا مربع یا مثلث کامل در فیگما می پردازم و ویژگی های ساخت کمان یا چارت در دایره را نیز به شما آموزش می دهم. در ادامه نحوه استفاده از ابزار Pen در فیگما را به شما آموزش می دهم که چطور بتوانید یک خط صاف و یا یک خط خمیده را با آن در Figma درست کنید.

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

پایان این فیلم به ویژگی های بولین یا Boolean یا همان Path Finder را در فیگما بررسی می کنم که شما بوسیله آن قادر هستید شکل های مختلف را به هم اضافه یا کم کنید و یک شکل جدید ایجاد کنید.

محتوای این فیلم آموزشی فیگما Figma:

  1. 00:00 | مقدمه
  2. 00:42 | کار با Constraints در فیگما
  3. 02:24 | ساخت اشکال دقیق و پایه دایره، مربع و مثلث در Figma
  4. 03:26 | ویژگی Arc برای درست کردن کمان در شکل ها
  5. 04:11 | ساخت چارت دایره ای در فیگما
  6. 04:35 | حفظ نسبت اشکال و گرد کردن گوشه ها در Figma
  7. 04:46 | کار با ابزار Pen در فیگما
  8. 06:00 | ساخت پروتوتایپ در Figma فیگما
  9. 09:06 | کدها در پنل Inspect در فیگما
  10. 09:33 | ساخت اشکال جدید و آیکان ها با ویژگی Boolean در فیگما

 

چطور متن یا Copy بهتری برای طراحی های خود بنویسیم؟

متن ها یا Text یک جز جدا نشدنی از طراحی است و در هر نوع طراحی که انجام می دهید حتی در طراحی برای فیلم و عکس برای نوشتن نام و یا ارائه توضیحات مربوط به عکس مجبور هستید از Text استفاده کنید.

متن ها نیز مثل دیگر اجزا و عناصری که در صفحه قرار می‌گیرند بر روی تجربه کاربر (UX) تاثیر می گذارند و در این مطلب نکاتی جهت نوشتن متن های بهتر یا Copy به شما ارائه می دهد.

بصورت خلاصه یکی از ویژگی های یک محصول خوب ایجاد یک هارمونی عالی از UX و طراحی UI با استفاده از یک Copy بی نظیر است.

از جمله مواردی که در این مطلب به آن می پردازد می توان موارد زیر را نام برد:

  1. شناخت خوانندگان متن و کاربران سرویس و نوشتن متن و تُن آن با توجه به مشکلات آنها
  2. نوشتن متنی که در آن سودی که به کاربران می رسد را بیان کند ( مثل اینکه چطور قرار هستن مشکلاتشان حل شود)
  3. از متن های خام و پیش فرض در طراحی استفاده نکنید (لورم ایپسوم)
  4. سلسله مراتب یا هایراکی را رعایت کنید (در صورتی که نمی دانید Hierachy چیست، فیلم آموزشی کامل آن را با کلیک بر روی اینجا ببینید)
  5. دقت در تُن ارائه متن به کاربران (Tone)

 

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

 

 

این خبرنامه Dexigner News – خبرنامه هفتگی دیزاین – شماره 12 در چهارمین هفته ماه بود.

برای عضویت در خبرنامه هفتگی دیزاین و دریافت شماره های بعدی این خبرنامه در ایمیل خود می توانید از طریق فرم زیر عضو شوید.

خبرنامه هفتگی دیزاین DeXigner News
خبرنامه هفتگی دیزاین DeXigner News
هر هفته آموزش‌ها، مطالب و لینک های مفید در زمینه دیزاین را در ایمیل خود داشته باشید!
شما در هر زمانی می‌توانید ارسال خبرنامه را لغو کنید.

مطالعه شماره های قبلی خبرنامه هفتگی دیزاین:

Dexigner News – خبرنامه هفتگی دیزاین – شماره 10

Dexigner News – شماره 9

Dexigner News – خبرنامه هفتگی دیزاین – شماره 8

Dexigner News – خبرنامه دیزاین شماره 7

خبرنامه هفتگی دیزاین – شماره 6

Dexigner News – خبرنامه هفتگی دیزاین – اولین هفته ماه – شماره 5

Dexigner News – خبرنامه هفتگی دیزاین – شماره 4

خبرنامه هفتگی دیزاین – سومین هفته ماه – شماره 3

Dexigner News – خبرنامه هفتگی دیزاین – دومین هفته ماه – شماره 2

خبرنامه هفتگی دیزاین – اولین هفته ماه – شماره 1

Dexigner News – خبرنامه هفتگی دیزاین – چهارمین هفته ماه – شماره 0

 

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.
عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات