این خبرنامه Dexigner News #20 – خبرنامه هفتگی دیزاین – شماره 20 در چهارمین هفته ماه است.
Dexigner News خبرنامه ای هفتگی در حوزه دیزاین است که شامل بهترین مقالات، فیلم های آموزشی و معرفی ابزارهایی است که در حوزه دیزاین و به خصوص طراحی رابط و تجربه کاربری ( UI/UX ) یا طراحی محصول هر هفته پنج شنبه‌ها ارسال می شود.
به این خبرنامه بپیوندید تا بهترین لینک های مرتبط با دیزاین را در ایمیل خود دریافت کنید.
محتوای Dexigner News #20 – خبرنامه هفتگی دیزاین
5 اشتباه اساسی در ساخت نقشه سفر مشتری یا CJM
در ابتدا بیایید ببینیم نقشه سفر مشتری چیست؟ نقشه سفر مشتری یا Customer Journey Map ابزاری است که با ساخت یک حالت ویژوال به شما کمک می کند تا متوجه نیازها، احساس ها و بصورت کلی وضعیت کاربر در هر نقطه تماس یا Touch Point های سرویس تان بشوید.
به عنوان مثال فرض کنید که یک مشتری نیاز به یک کفش دارد و زمانی که وارد صفحه جزئیات کفش می شود،
- نیاز به چه اطلاعاتی در آن صفحه دارد
- چه احساسی در صفحه جزئیات کفش دارد
- راه حل شما برای بهبود تجربه و رفع نیاز های او چیست
حال در این مطلب به این می پردازد که با انجام چه کارهایی و اشتباهاتی باعث می شوید نقشه سفر مشتری شما بی اعتبار و غیر قابل اعتماد باشد و در نتیجه نه تنها ممکن است فایده ای برای بیزینس نداشته باشد، بلکه ممکن است به آن ضرر هم بزند.
از جمله این موارد می توان به:
- استفاده از نقشه سفر مشتری به عنوان تنها ابزار بهبود تجربه کاربران و مشتریان
- استفاده از منابع نامعتبر یا تعداد کم آنها
- استفاده بدون هدف و بیهوده از نقشه سفر مشتری یا CJM
- به دنبال ترند های روز رفتن برای استفاده از نقشه سفر مشتری
- ساخت CJM از صفر برای اهداف کوچک و نقاط تماس کم کاربر
در دیزاین یک طرح دسترسی پذیر برای افراد ناتوان چه کارهایی انجام بدهیم و از چه کارهایی دوری کنیم؟
در شماره های قبلی خبرنامه Dexigner News بارها در مطالب مختلفی به اهمیت، کاربرد و نحوه ی استفاده از ویژگی های دسترسی پذیری یا Accessibility برای افراد ناتوان اشاره کردم. (و شما می توانید به شماره های قبل در آخر همین پست دسترسی داشته باشید)
در این مطلب با استفاده از تصاویر نکاتی را به شما در دیزاین طرح های دسترسی پذیر آموزش می دهد.
به عنوان مثال به این اشاره می کند که در دیزاین هایتان سعی کنید تنها به استفاده از حالت Drag یا کشیدن محدود نشوید و حتما دکمه هایی برای Tap کردن قرار دهید تا افرادی با ناتوانی های حرکتی نیز بتوانند راحت تر از اپلیکیشن شما استفاده کنند.
و یا در قسمتی دیگر به این اشاره می کند که برای نشان دادن یک وضعیت خطا، هشدار، موفقیت یا … فقط از رنگ استفاده نکنید، چون افراد کور رنگ ممکن است اصلا آن رنگ ها را نببینند، در نتیجه بهتر است در کنار رنگ از آیکان ها نیز استفاده کنید.
دانلود فایل های Illustration یا تصویرسازی های رایگان برای دیزاین UI
در وبسایت زیر شما می توانید به تعداد زیادی تصویرسازی رایگان برای استفاده در طرح های خود دسترسی داشته باشید. فایل های تصویرسازی بصورت وکتور و در فرمت SVG هستند و در نتیجه شما براحتی می توانید از آن ها در هر اندازه ای استفاده کنید.
نکته ای که وجود دارد، بخش لایسنس آن است که در آن ذکر شده در صورتی که شما می خواهید از این تصویر سازی ها برای نمایش حرفه ای تر کارتان استفاده کنید، مشکلی ندارد؛ اما در صورتی که می خواهید از آن ها در اپلیکیشن ها تجاری و موارد شبیه به آن استفاده کنید یا باید لایسنس آن را خریداری کنید و یا اینکه به آن ها لینک منبع بدهید.(در قسمت درباره ما سرویس تان لینکی به وبسایت آنها می دهید.)
آموزش جامع ساخت پروتوتایپ در Adobe Xd – قسمت ششم
در این آموزش قصد دارم نحوه ساخت پروتوتایپ و اینتراکشن ها در ادوبی ایکس دی / Adobe Xd را از صفر و بصورت جامع به شما آموزش دهم. در واقع شما با پروتوتایپ اینتراکشن ها یا حرکت های تعاملی مختلفی به طرحتون اضافه می کنید.
و بصورت کلی اینتراکشن ها نتیجه اکشنی توسط کاربر یا سیستم هستند که معمولا بصورت یک جلوه گرافیکی در اینترفیس به شما نشان داده می شود. پروتوتایپ مثل یک روح است که شما اون در قالب وایرفریم یا طرح یو ای خودتون می دمید تا اون طرح زنده بشه.
در واقع شما با پروتوتایپ می آید اینتراکشن ها یا حرکت های تعاملی مختلفی به طرحتون اضافه می کنید.
در نتیجه به عنوان مثال زمانی که کاربر بر روی یک دکمه کلیک کرد وارد صفحه دیگر بشود و یا اینکه اگر بخش به خصوصی از صفحه را درگ کرد، به صفحه دوم آنبوردینگی که طراحی کردید منتقل بشه و حرکات و اینتراکشن های مختلف دیگه ای که در این ابزار وجود دارد.
شما هم از پروتوتایپ در طراحی یوای و هم در طراحی یو ایکس برای اهداف مختلف استفاده می کنید. به عنوان مثال یک طراح یوایکس می تونه با ساخت پروتوتایپ وایرفریمی که ایجاد کرده، نحوه ی تعامل کاربر با بخشی از اپلیکیشن رو نشون بده.
با این وجود معمولا در اکثر ابزارهای طراحی دیجیتال با تغیییری در اینترفیس این عمل اتفاق می افتد و از طرفی در دستگاه ها یا نرم افزارهای مختلف دیگر ممکن است این فیدبک به طریق دیگری به شما نشان داده شود.
به عنوان مثال زمانی که شما دکمه روشن شدن کنسول Xbox را فشار می دهید، ایکسباکس با یک صدا و روشن شدن لوگو XBOX به شما اعلام می کند که دستگاه در حال روشن شدن است. یا اینکه اگر یک دستگاه یا دیوایس اپل داشته باشید و به آن عبارت Hey Siri را بگویید، دیوایس با یک صدا و جلوه گرافیکی به شما نشان می دهد که در حال گوش دادن به دستورات شماست.
به عنوان مثال در تلگرام زمانی که شما پیام را آرشیو می کنید، ایکان آرشیو تلگرام بصورت متحرک همان اکشنی را که انجام داده بودید به شما نشان می دهد که آن اقدام به درستی انجام گرفته است. در واقع وضعیت فعلی را با توجه به اکشنی که شما انجام دادید نشان می دهد.
حال شما در ادوبی ایکس دی نیز می توانید با استفاده از ویژگی پروتوتایپ اینتراکشن های مختلفی را طراحی کنید تا با هر اکشن کاربر یک ری اکشن به آن نشان داده شود.
محتوای فیلم آموزشی ساخت پروتوتایپ در ادوبی ایکس دی
- 00:48 | پروتوتایپ چیست؟
- 02:47 | چطور وارد بخش پروتوتایپ ادوبی ایکس دی بشویم؟
- 03:10 | پیش نیازهایی برای ساخت پروتوتایپ در Adobe Xd
- 03:58 | پروتوتایپ حالت های مختلف دکمه در ادوبی ایکس دی
- 04:39 | ایجاد کامپوننت قبل از ایجاد اینتراکشن پروتوتایپ
- 04:58 | ایجاد حالت های مختلف دکمه با کامپوننت ها در Adobe Xd
- 07:00 | ساخت اینتراکشن های دکمه رادیویی و چک باکس در Xd
- 08:58 | ساخت اینتراکشن پروتوتایپ اسکرول بار در ایکس دی
- 11:29 | تغییر محدوده نمایش صفحه پروتوتایپ در Adobe Xd
- 12:44 | ساخت اینتراکشن پروتوتایپ باز شدن منو اپلیکیشن در ادوبی ایکس دی
- 14:17 | نکات مهم در استفاده از نوع Auto Animate در پروتوتایپ Xd
- 15:00 | ساخت اینتراکشن پروتوتایپ اضافه کردن اعداد در سبد خرید
- 16:34 | ساخت اینتراکشن پروتوتایپ Drag یا کشیدن در Adobe Xd
- 17:32 | ساخت اینتراکشن پروتوتایپ صدا یا Voice در ایکس دی
- 19:20 | اینتراکشن پروتوتایپ Overlay برای نمایش یک آرتبورد بر روی دیگری
- 20:02 | اینتراکشن پروتوتایپ صفحه کلید یا کیبورد در ادوبی ایکس دی
- 20:48 | اینتراکشن پروتوتایپ زمان در Adobe Xd و ساخت انیمیشن
- 22:01 | حذف اینتراکشن های پروتوتایپ در ادوبی ایکس دی
همچنین اگر شما از ابزار فیگما برای ساخت پروتوتایپ استفاده می کنید، من در پست و فیلم آموزشی زیر بصورت جامع به ساخت پروتوتایپ در فیگما پرداختم که می توانید آن را نیز تماشا کنید.
آموزش جامع ساخت پروتوتایپ در فیگما و Multiple Flows
این خبرنامه Dexigner News #20 – خبرنامه هفتگی دیزاین – شماره 20 در چهارمین هفته ماه بود.
برای عضویت در خبرنامه هفتگی دیزاین و دریافت شماره های بعدی این خبرنامه در ایمیل خود می توانید از طریق فرم زیر عضو شوید.
[newsletter-pack newsletter=”8661″ style=”default” si_style=”default” title=”” show_title=”0″ icon=”” heading_color=”” heading_style=”default” title_link=”” custom-css-class=”” custom-id=””][/newsletter-pack]
مطالعه شماره های قبلی خبرنامه هفتگی دیزاین:
Dexigner News – خبرنامه هفتگی دیزاین – شماره 18
Dexigner News – خبرنامه هفتگی دیزاین – شماره 16
Dexigner News – خبرنامه هفتگی دیزاین – شماره 14
Dexigner News – خبرنامه هفتگی دیزاین – شماره 12
Dexigner News – خبرنامه هفتگی دیزاین – شماره 10
Dexigner News – خبرنامه هفتگی دیزاین – شماره 8
Dexigner News – خبرنامه دیزاین شماره 7
خبرنامه هفتگی دیزاین – شماره 6
Dexigner News – خبرنامه هفتگی دیزاین – اولین هفته ماه – شماره 5
Dexigner News – خبرنامه هفتگی دیزاین – شماره 4
خبرنامه هفتگی دیزاین – سومین هفته ماه – شماره 3
Dexigner News – خبرنامه هفتگی دیزاین – دومین هفته ماه – شماره 2
خبرنامه هفتگی دیزاین – اولین هفته ماه – شماره 1
Dexigner News – خبرنامه هفتگی دیزاین – چهارمین هفته ماه – شماره 0
