آموزش طراحی UX پاسخگو هوشمند: نکات، ترفندها و تکنیک های هوشمندانه

چگونه یک گروه پیچیده از مؤلفه ها را به یک تجربه کاربری با طراحی زیبا تبدیل می کنید؟ این کلاس 90 دقیقه‌ای با سردبیر مجله Smashing ما را از طریق تکنیک‌های عملی، ترفندهای هوشمندانه و استراتژی‌های مفیدی که باید هنگام کار بر روی طراحی‌های رابط کاربری واکنش‌گرا آگاه باشید، راهنمایی می‌کند.

این کلاس برای طراحان UX و UI، توسعه‌دهندگان، مدیران هنری و طراحان گرافیک که می‌خواهند بازی خود را در وب تقویت کنند عالی است. ویتالی به ۷ مؤلفه مختلف تجربه‌های کاربری موفق، و تصویری بزرگ از نحوه کار آنها با یکدیگر می‌پردازد.

• پیمایش
• شمایل نگاری
• جداول و تقویم
• فرم های وب
• تنظیم اجزای کوچک
• ارتقاء مقیاس پاسخگو و موارد دیگر

بدون کرک، بدون تئوری - فقط چه چیزی در پروژه های واقعی کار کرد (یا شکست خورد و چرا). در پایان دوره، زرادخانه ای از اجزای واکنش گرا خواهید داشت که می توانید آنها را در طراحی وب سایت خود بگنجانید، و مهمتر از همه، درک منسجمی از نحوه ترکیب آنها.

در طراحی واکنشگرا UX جدید هستید؟ به کلاس‌های دیگر ما بپیوندید که اصول اولیه را پوشش می‌دهند، مانند کلاس اسپنسر شیمل.

یک صفحه واکنشگرا با استفاده از اجزای هوشمند UX طراحی کنید.

لطفا توجه داشته باشید: این یک دوره مقدماتی در زمینه طراحی واکنشگرا نیست. برخی از دانش قبلی در مورد طراحی واکنش‌گرا و UX توصیه می‌شود که می‌توانید از اینجا به آنها دسترسی داشته باشید:

•  با اسپنسر شیمل
•  با جان اشندن

________________________________

مقدمه

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

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

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

و این دقیقاً همان چیزی است که پروژه در مورد آن است. مایلم شما را تشویق کنم که با استفاده از مؤلفه‌هایی مانند:
 

• تایپوگرافی خیره کننده
• نکات جانبی
• نقل قول‌ها
• یک جدول
• یک جعبه نور
• یک نقشه
• یک تقویم
• نمودار
• یک ویدیوی جاسازی شده
• فرم وب

...و هر یک از اجزای دیگر را که در کلاس مرور می کنم.

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

________________________________

تکلیف

بنابراین وظیفه شما طراحی (یا بازطراحی) یک مقاله هنری است  — مشابه  — سپس آن را برای بازخورد در گالری پروژه به اشتراک بگذارید.

مقاله Design Machines مفید است زیرا اجزای بسیاری دارد که می‌توانید آنها را دستکاری کنید، اما همچنین می‌توانید یکی از خودتان را انتخاب کنید یا یکی از ابتدا ایجاد کنید!

با مرور بخش‌های کلاس، چند روش برای پاسخگو کردن ماژول‌های صفحه را یاد خواهید گرفت. بنابراین اگر بتوانید معنای مقاله را استخراج کنید و فقط به محتوا نگاه کنید و نه طرح‌بندی، ماژول‌های صفحه چگونه واکنش‌گرایانه رفتار می‌کنند؟

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

بعد، نقشه راه شما در اینجا آمده است:

1. ابتدا  از نزدیک مطالعه کنید و رفتارهای پاسخگو  که ماژول های مختلف در صفحه دارند را شناسایی کنید.
   
   
2. به این فکر کنید که چگونه می‌توانید رفتار اجزا را تغییر دهید یا آن را بهبود ببخشید — فکر کنید  — کاری را ارائه دهید که قبلاً هرگز انجام نشده است!
   
   اگر پیشینه فنی دارید، به ترکیب فناوری هایی مانند Flexbox، واحدهای vh/vw، شاید Service Workers و تصاویر پاسخگو از طریق SVG فکر کنید. و اگر یک فرد بصری هستید، چگونه اجزای آن به بهترین شکل برای عوامل مختلف شکل تغییر می کند - به تلفن همراه و همچنین تلویزیون فکر کنید، در مورد جهت گیری پرتره و همچنین جهت گیری منظره فکر کنید. خلاق باشید!
   
   
3. شروع به مونتاژ مجدد مؤلفه ها و/یا تنظیم آنها کنید — به صورت بصری در Photoshop یا Sketch یا در HTML/CSS (به اسناد پیوست مراجعه کنید).
   
   
4. طراحی مجدد و بازسازی، اما مهمتر از همه، بازی! کاری را امتحان کنید که قبلا هرگز انجام نداده اید. در این مرحله نگران پشتیبانی مرورگر نباشید - این تمرینی برای استفاده خلاقانه از الگوهای طراحی است!
   
   
5. ایده ها، افکار یا پیشنهادات خود را برای بررسی در , و تکرار کنید!

________________________________

 
COMPONENTها

اجزای شما جلوتر از شما قرار دارند (پی دی اف پیوست شده را در پایین این صفحه ببینید):

هر کدام از آنها چه رفتار پاسخگو باید داشته باشند و چرا؟

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

________________________________

قابل تحویل

پروژه تکمیل شده شما می تواند شامل موارد زیر باشد:

• توضیحات. توضیح [کوتاه] که ایده/چشم انداز پشت طرح را مشخص می کند - چه از نظر بصری، چه از نظر چیدمان. شاید این ایده خوبی باشد که با ویژگی های هنری دیوانه وار بازی کنید و کاری کاملا متفاوت انجام دهید؟
  
  
• طرح ها یا ماکت ها. هر طرح یا طرح سریع با کیفیت پایین — بدون نیاز به طراحی یک ماکت کامل فتوشاپ/اسکچ (البته مگر اینکه بخواهید!)
  
  
• نمونه اولیه کار. یک نمونه اولیه HTML/CSS/JavaScript – تصاویر مهم نیست، اما رفتار پاسخگوی اجزا مهم است. یک پیوند به نمونه اولیه HTML/CSS/JavaScript برای بررسی کافی است.

________________________________

منابع

پیوندها

ابزارها

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

موفق باشید - و همانطور که قول داده بودیم، این سفر بسیار طولانی خواهد بود! ;-)