با پررنگ‌تر شدن نقش تلفن‌های هوشمند و تبلت‌ها در زندگی و کارهای روزمره نیاز به واکنش‌گرا بودن رابط کاربری یک وب‌سایت یا نرم افزار به مراتب بیشتر از قبل احساس می‌شود، همین طور طراحی واکنش‌گرا به عنوان یکی از امتیازهای سئو برای گوگل محسوب شده و سیستم ما را به استانداردهای جهانی نزدیک‌تر می‌کند. اما موضوع بسیار مهمی که برای اغلب کسب‌ و‌ کارها وجود دارد، ارتباط صحیح و راحت یک کاربر با وب‌سایت و نرم‌افزار آن شرکت یا سازمان می‌باشد. اولین گام جهت پیشرفت در مسیر توسعه کسب‌ و‌ کار زمانی برداشته می‌شود که کاربران یک سیستم با درک این استانداردها متوجه شوند که وقت و نوع نگرش آنها در نظر گرفته شده و می‌توانند برای استفاده از محصولات یک سیستم، ابزارهای مختلفی را امتحان کنند.

1. “‫سیستم‬‫یک‬‫مشتریان‬‫با‬‫آن‬‫ارتباط‬‫و‬‫گرا‬‫واکنش‬‫تفکر‬”
‫دهنده‬ ‫ارائه‬:
‫صدری‬‫مسعود‬
Masood.Sadri
MasoodSadri
MasoodSadri
MasoodSadri

2. ‫واکنشگرا‬ ‫تفکر‬

3. ‫چیست؟‬ ‫واکنشگرا‬ ‫طراحی‬
‫مطلوب‬ ‫نمایش‬ ،‫آن‬ ‫از‬ ‫اصلی‬ ‫هدف‬ ‫که‬ ‫وب‬ ‫طراحی‬ ‫روش‬ ‫یک‬ ‫و‬ ‫ها‬‫تکنیک‬ ‫مجموعه‬
‫است‬ ‫نمایش‬ ‫صفحات‬ ‫از‬ ‫گسترده‬ ‫طیف‬ ‫در‬ ‫سایت‬‫وب‬.

4. ‫گذشته‬ ‫بر‬ ‫مروری‬
-‫دهه‬ ‫در‬90‫طول‬ ‫برای‬ ‫طراحی‬ ‫استاندارد‬ ،640‫بود‬ ‫پیکسل‬.
-‫سال‬ ‫از‬2000‫به‬ ‫استاندارد‬ ‫این‬ ،‫بعد‬ ‫به‬800‫کرد‬ ‫تغییر‬ ‫پیکسل‬.
-‫به‬ ‫بعد‬ ‫سال‬ ‫چند‬1024‫یافت‬ ‫افزایش‬ ‫پیکسل‬.

5. ‫گذشته‬ ‫بر‬ ‫مروری‬
-‫مابین‬ ‫عددی‬ ،‫صفحه‬ ‫یک‬ ‫طول‬ ‫است‬ ‫ممکن‬ ‫امروز‬320‫تا‬2000‫باشد‬ ‫پیکسل‬.
-‫باشد‬ ‫بیشتر‬ ‫آن‬ ‫طول‬ ‫از‬ ،‫صفحه‬ ‫یک‬ ‫عرض‬ ‫شاید‬ ‫که‬ ‫است‬ ‫حالی‬ ‫در‬ ‫این‬.
-‫صفحات‬ ‫سایز‬ ‫بودن‬ ‫متغیر‬ ‫مسئله‬ ‫به‬ ‫است‬ ‫پاسخی‬ ،‫واکنشگرا‬ ‫طراحی‬.

6. ‫واکنشگرا‬ ‫طراحی‬ ‫اندیشه‬
‫دنبال‬ ‫به‬ ،‫متفاوت‬ ‫های‬‫دستگاه‬ ‫با‬ ‫همواره‬ ‫امروزی‬ ‫کاربران‬«‫محتوای‬»‫سایت‬‫وب‬ ‫یک‬
‫هستند‬.
‫گوناگ‬ ‫سایزهای‬ ‫در‬ ‫محتوا‬ ‫صحیح‬ ‫نمایش‬ ‫اساس‬ ‫بر‬ ،‫مناسب‬ ‫طراحی‬ ‫یک‬ ‫استراتژی‬‫ون‬
‫بود‬ ‫خواهد‬.

7. ‫واکنشگرا‬ ‫طراحی‬ ‫اندیشه‬
"Good web design is about the character of
the content, not the character of the
designer.“
- Jeffry Zeldman

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

9. ‫واکنشگرا‬ ‫طراحی‬ ‫اندیشه‬
‫بود‬ ‫نخواهد‬ ‫هوشمند‬ ‫های‬‫تلفن‬ ‫از‬ ‫پشتیبانی‬ ‫تنها‬ ‫واکنشگرا‬ ‫تفکر‬ ،‫پس‬.‫بلک‬،‫هدف‬ ‫ه‬
‫از‬ ‫پشتیبانی‬«‫ها‬‫دستگاه‬ ‫تمام‬»‫است‬.
‫از‬ ‫نگرش‬ ‫تغییر‬ ‫معنی‬ ‫به‬ ‫این‬«‫مشخص‬ ‫سایز‬ ‫اساس‬ ‫بر‬ ‫طراحی‬»‫به‬«‫اس‬ ‫بر‬ ‫طراحی‬‫اس‬
‫سناریو‬»‫بود‬ ‫خواهد‬.

10. ‫سرعت‬ ‫اهمیت‬
‫م‬ ‫استفاده‬ ‫هوشمند‬ ‫های‬‫تلفن‬ ‫از‬ ‫سایت‬‫وب‬ ‫محتوای‬ ‫دریافت‬ ‫برای‬ ‫که‬ ‫کاربرانی‬ ‫اغلب‬،‫کنند‬‫ی‬
‫دارند‬ ‫بیشتری‬ ‫عجله‬ ،‫عادی‬ ‫کامپیوترهای‬ ‫کاربران‬ ‫به‬ ‫نسب‬.
‫شود‬ ‫گرفته‬ ‫نظر‬ ‫در‬ ‫باید‬ ‫محتوا‬ ‫نمایش‬ ‫برای‬ ‫سرعت‬ ‫حداکثر‬ ‫نتیجه‬ ‫در‬.

11. ‫سرعت‬ ‫اهمیت‬
‫بیشتر‬ ،‫هوشمند‬ ‫های‬‫تلفن‬ ‫برای‬ ‫سایت‬‫وب‬ ‫بارگذاری‬ ‫سرعت‬ ،‫واکنشگرا‬ ‫طراحی‬ ‫در‬‫خواهد‬
‫بود‬.
‫هوشم‬ ‫های‬‫تلفن‬ ‫برای‬ ‫که‬ ‫هایی‬‫سایت‬‫وب‬ ‫برای‬ ‫را‬ ‫کمتری‬ ‫ی‬‫رتبه‬ ‫گوگل‬ ،‫طور‬ ‫همین‬‫ند‬
‫گیرد‬‫می‬ ‫نظر‬ ‫در‬ ‫اند‬‫نشده‬ ‫سازی‬ ‫بهینه‬.

12. ‫سرعت‬ ‫اهمیت‬
‫دهد‬‫می‬ ‫نشان‬ ‫تحقیقات‬57‫تنها‬ ‫کاربران‬ ‫درصد‬«‫ثانیه‬ ‫سه‬»‫محت‬ ‫کامل‬ ‫بارگذاری‬ ‫برای‬‫وا‬
‫کنند‬‫می‬ ‫صبر‬.
80‫و‬ ‫داشت‬ ‫نخواهند‬ ‫بازدیدی‬ ‫دیگر‬ ،‫کنند‬‫می‬ ‫ترک‬ ‫را‬ ‫سایت‬ ‫که‬ ‫کاربرانی‬ ‫از‬ ‫درصد‬
‫کنند‬‫می‬ ‫مطرح‬ ‫دیگر‬ ‫کاربران‬ ‫برای‬ ‫را‬ ‫خود‬ ‫بد‬ ‫ی‬‫تجربه‬.

13. ‫عملکرد‬ ‫بهبود‬
‫بود‬ ‫خواهد‬ ‫محتوا‬ ‫به‬ ‫دسترسی‬ ‫سهولت‬ ،‫واکنشگرا‬ ‫طراحی‬ ‫استراتژی‬ ‫نتیجه‬.‫ا‬ ‫این‬‫سبب‬ ‫مر‬
‫شود‬‫می‬ ‫سیستم‬ ‫عملکرد‬ ‫کیفیت‬ ‫ارتقاء‬.
‫شود‬‫می‬ ‫گرفته‬ ‫نظر‬ ‫در‬ ،‫هدف‬ ‫دستگاه‬ ‫برای‬ ‫مهم‬ ‫محتوای‬ ‫واکنشگرا‬ ‫طراحی‬ ‫در‬.
‫ب‬ ‫را‬ ‫خصوصی‬ ‫به‬ ‫محتوای‬ ‫ی‬‫هسته‬ ‫یک‬ ‫ما‬ ‫که‬ ‫است‬ ‫سازی‬ ‫پیاده‬ ‫قابل‬ ‫زمانی‬ ‫روش‬ ‫این‬‫رای‬
‫باشیم‬ ‫کرده‬ ‫تعریف‬ ‫مختلف‬ ‫های‬‫دستگاه‬.

14. ‫عملکرد‬ ‫بهبود‬
،‫واکنشگرا‬ ‫اندیشه‬ ‫ی‬‫نتیجه‬«‫کاربران‬ ‫تمام‬ ‫برای‬ ‫مشخص‬ ‫محتوایی‬»‫یک‬ ‫نه‬ ،‫است‬«‫تجربه‬
‫مشخص‬».
‫سای‬‫وب‬ ‫محتوای‬ ‫صحیح‬ ‫نمایش‬ ‫ما‬ ‫اصلی‬ ‫الویت‬ ‫که‬ ‫دهد‬‫می‬ ‫رخ‬ ‫زمانی‬ ‫عملکرد‬ ‫بهبود‬‫به‬ ‫ت‬
‫باشد‬ ‫استاندارد‬ ‫روشی‬.

15. ‫کاربر‬ ‫با‬ ‫تعامل‬

16. ‫کاربران‬ ‫رفتار‬ ‫بررسی‬
‫است‬ ‫کاربران‬ ‫رفتارهای‬ ‫بررسی‬ ،‫سیستم‬ ‫عملکرد‬ ‫ماهیت‬ ‫درک‬ ‫از‬ ‫بعد‬ ‫نخست‬ ‫گام‬.
‫های‬‫دستگاه‬ ‫گستردگی‬ ‫میزان‬ ‫کننده‬ ‫تعیین‬ ‫بررسی‬ ‫این‬ ‫از‬ ‫آمده‬ ‫بدست‬ ‫های‬‫داده‬‫مورد‬
‫بود‬ ‫خواهند‬ ‫ما‬ ‫کاربران‬ ‫استفاده‬.
‫دارند‬ ‫را‬ ‫استفاده‬ ‫بیشتر‬ ‫که‬ ‫باشد‬ ‫هایی‬‫دستگاه‬ ‫روی‬ ‫بر‬ ‫باید‬ ‫طراحی‬ ‫تمرکز‬.

17. ‫کاربر‬ ‫با‬ ‫تعامل‬
‫است‬ ‫کاربر‬ ‫با‬ ‫مناسب‬ ‫ارتباط‬ ‫برقراری‬ ،‫طراحی‬ ‫برای‬ ‫موضوع‬ ‫ترین‬‫مهم‬.
‫بود‬ ‫خواهد‬ ‫تعامل‬ ‫در‬ ‫کاربران‬ ‫از‬ ‫قشر‬ ‫کدام‬ ‫با‬ ‫که‬ ‫کند‬ ‫درک‬ ‫باید‬ ‫همواره‬ ‫توسعه‬ ‫تیم‬.
‫روی‬ ‫بر‬ ‫همیشه‬«‫کاربران‬ ‫نیازهای‬»‫داشت‬ ‫تمرکز‬ ‫باید‬.

18. ‫کاربر‬ ‫با‬ ‫تعامل‬
‫بود‬ ‫خواهد‬ ‫استاندارد‬ ‫طراحی‬ ‫یک‬ ‫نتیجه‬ ،‫کاربر‬ ‫با‬ ‫مناسب‬ ‫ارتباط‬.
‫بود‬ ‫خواهد‬ ‫ارتباط‬ ‫این‬ ‫برقراری‬ ‫برای‬ ‫اصولی‬ ‫طراحی‬ ‫روش‬ ‫یک‬ ،‫واکنشگرا‬ ‫طراحی‬.
‫بخشد‬‫می‬ ‫بهبود‬ ‫را‬ ‫سایت‬‫وب‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫و‬ ‫شده‬ ‫کاربر‬ ‫رضایت‬ ‫سبب‬ ‫تعامل‬ ‫این‬.

19. ‫کاربر‬ ‫با‬ ‫تعامل‬

20. ‫کاربر‬ ‫با‬ ‫تعامل‬
‫است‬ ‫سایت‬‫وب‬ ‫صفحات‬ ‫در‬ ‫زوم‬ ‫به‬ ‫نیاز‬ ‫حذف‬ ،‫قدم‬ ‫اولین‬.
‫رساند‬ ‫حداقل‬ ‫به‬ ‫باید‬ ‫را‬ ‫اجتماعی‬ ‫های‬‫شبکه‬ ‫در‬ ‫گذاری‬ ‫اشتراک‬ ‫به‬ ‫های‬‫دکمه‬.
‫است‬ ‫باید‬ ‫تر‬‫حجم‬ ‫کم‬ ‫تصاویر‬ ‫از‬ ،‫تر‬‫کوچک‬ ‫نمایش‬ ‫ی‬‫صفحه‬ ‫با‬ ‫هایی‬‫دستگاه‬ ‫برای‬‫کرد‬ ‫فاده‬.

21. ‫کاربر‬ ‫با‬ ‫تعامل‬

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

23. ‫آخر‬ ‫سخن‬
‫اند‬‫کرده‬ ‫شروع‬ ‫کوچک‬ ‫های‬‫قدم‬ ‫با‬ ‫را‬ ‫خود‬ ‫کار‬ ،‫موفق‬ ‫های‬‫سایت‬‫وب‬ ‫اغلب‬.
‫کنن‬‫می‬ ‫اضافه‬ ‫خود‬ ‫سیستم‬ ‫به‬ ‫ها‬‫ماه‬ ‫طول‬ ‫در‬ ‫را‬ ‫امکانات‬ ‫و‬ ‫تغییرات‬ ،‫ها‬‫سایت‬‫وب‬ ‫این‬‫د‬.
‫با‬ ‫منعطف‬ ‫سایت‬‫وب‬ ‫یک‬ ،‫کار‬ ‫اساس‬ ‫که‬ ‫شود‬ ‫طی‬ ‫شکلی‬ ‫به‬ ‫باید‬ ‫همیشه‬ ‫اول‬ ‫قدم‬‫شد‬.

24. “What separates design from art is that
design is meant to be… functional.”
- Cameron Moll