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

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

تکنیک ایجکس در بسیاری از وبسایت های معروف کاربرد دارد. مواردی مانند Facebook, Twitter, Stack overflow, YouTube, Gmail, Google, همه و همه از این تکنیک استفاده می کنند. برای مثال وقتی در گوگل موضوعی را سرچ می کنید, بلافاصله یک عملیات ایجکس راه اندازی شده و پیشنهاد هایی در مورد آن موضوع به شما ارائه می شود.

ایجکس چیست؟

بررسی واژه AJAX

عبارت AJAX مخفف Asynchronous JAVAScript and XML می باشد.

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

JAVAScript که یک زبان برنامه نویسی است و یک درخواست ایجکس را راه اندازی کرده و درنهایت پاسخ دریافتی از سرور را تجزیه و تحلیل کرده و ساختار صفحه را بروزرسانی می کند.

از XMLHttpRequest برای رد و بدل کردن نامتقارن داده ها استفاده می شود. البته به جای این فرمت می توان از فرمت نسبتا سبکتر JSON نیز استفاده کرد.

ایجکس چیست؟

مراحل طرز کار این فناوری را می توان در چند مرحله توصیف کرد:

  1. ابتدا یک رویداد در مرورگر رخ می دهد.
  2. سپس شیء XMLHttpRequest ساخته شده و با دیتای لازم پیکربندی می شود.
  3. این شیء ساخته شده به سرور ارسال شده اما صفحه همچنان قابل دسترسی باقی می ماند.
  4. وب سرور پس از انجام پردازش های لازم, این شیء XML (یا JSON) را برگشت می دهد.
  5. شیء XMLHttpRequest تابع callback را فراخوانی کرده و در نتیجه شیء XML پردازش می شود.
  6. صفحه وب بروزرسانی می شود.

محدودیت ها و معایب ایجکس چیست؟

  • اگر مرورگری از JAVAScript یا XMLHttp پشتیبانی نکند امکان استفاده درست از صفحاتی که از این تکنیک استفاده می کنند را نخواهد داشت.
  • حفظ و نگهداری و بروزرسانی صفحاتی که چنین محتوایی تولید می کنند نسبتا دشوارتر است.
  • بر خلاف صفحات معمولی که در آن ها کاربر با فشردن دکمه back به صفحه قبل بر می گردد در صفحاتی که از این تکنیک استفاده می کنند چنین قابلیتی وجود ندارد. البته این مشکل در HTML5 برطرف شده است.

کتابخانه JQuery جاوا اسکریپت, چندین تابع و متد بسیار کارآمد برای استفاده از ایجکس در صفحات وب ارائه می دهد.(ajax,load)

ایجکس چیست؟

برای آشنایی بیشتر و دقیقتر با فناوری ایجکس, توابع مربوطه JQuery و نحوه ساخت یک صفحه وب با استفاده از این تکنیک می توانید سری مقالات آشنایی با ایجکس ما را دنبال کنید. در این سری به تعریف دقیق تری از ایجکس, جزئیات و مباحث مرتبط با آن می پردازیم. علاوه بر آن با ساخت دو مثال در سطح مبتدی و پیشرفته نحوه استفاده از آن را به طور کامل می آموزیم. 

آشنایی با ایجکس

پارت چهار: نحوه استفاده از تابع “ajax” jQuery

در طول سه مقاله قبلی, باید به دیدگاه و درک مناسبی از AJAX رسیده باشید. در آخرین مقاله از این سری, با بررسی کردن مثالی پیچیده تر مبحث را پوشش کامل می دهیم.

برای اینکه ایده ای کلی از ساختار مثالی که قصد ایجاد آن را داریم بدست آورید نگاهی به کد زیر بیاندازید.

<section>

  <!– content here –>

</section>

<main>

  <!– content here –>

</main>

<section>

  <!– content here –>

</section>

<div class=”modal”>

  <!– content here –>

</div>

<div class=”loader”>

  <!– content here –>

</div>

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

کد قسمت main در تصویر زیر نمایش داده شده است.

<main>

  <h2>Popular front-end frameworks</h2>

  <p>Click each one to load details via AJAX.</p>

  <div class=”boxes”>

    <a href=”#”>Bootstrap</a>

    <a href=”#”>Foundation</a>

    <a href=”#”>UIkit</a>

    <a href=”#”>Semantic UI</a>

    <a href=”#”>Skeleton</a>

    <a href=”#”>Material Design Lite</a>

  </div>

</main>

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

به تکست لینک ها توجه کنید. این تکست لینک ها با فریم ورک های front-end متفاوتی متناظرند. همانطور که در بخش بعدی خواهیم دید, هر بار که برروی یکی از لینک ها کلیک می کنیم یک درخواست ایجکس راه اندازی می شود. سپس عنصر با کلاس modal ظاهر شده و محتوای آن با داده های دریافت شده از پاسخ دریافتی بروزرسانی می شود.

عنصر main به شکل زیر دیده می شود.

آشنایی با AJAX (پارت چهار)

ساختار طرح نمونه

قدم بعدی این است که ساختار طرح نمونه مان را مشخص کنیم. کد HTML آن را در زیر مشاهده می کنید.

<div class=”modal”>

  <button class=”close” aria-label=”Close”>✕</button>

  <div class=”m-content”>

    <ul class=”m-info”>

      <li>Framework</li>

      <li></li>

      <li>Current Version</li>

      <li></li>

      <li>Number of Github Stars</li>

      <li></li>

      <li>Official Page</li>

      <li></li>

    </ul>

    <p class=”m-message”></p>

  </div>

</div>

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

همان طور که میبینید, طرح نمونه حاوی تعدادی عنصر خالی است. این عنصر ها را به این علت در HTML می گذاریم که متنشان با توجه به اینکه کدام لینک انتخاب شود و پاسخی که دریافت میشود, تغییر می کند.

تصویر زیر نشان می دهد که طرح نمونه در آغاز چگونه ظاهر میشود.

آشنایی با AJAX (پارت چهار)

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

نگاهی به قواعد CSS مربوط به آن بیاندازید.

.modal {

    opacity: 0;

}

.loader {

    display: none;

}

۱

۲

۳

۴

۵

۶

۷

توجه داشته باشید که ما از ویژگی opacity استفاده می کنیم (و نه ویژگی display) تا نمونه مان را پنهان کنیم. زیرا این ویژگی متعلق به animatable CSS properties است. به این ترتیب, قادر خواهیم بود تا حالت های طرح نمونه مان را تغییر دهیم. (یعنی (state) های باز و بسته)

ایجاد JSON Response

برای مثالی که در این مقاله قصد ایجاد آن را داریم, ساخت JSON Response را انتخاب می کنیم. به طور ویژه , پاسخ دریافتی مورد نظر (یعنی فایل Demo.json ) آرایه ای از اشیاء خواهد بود و هر شی حاوی جزییات مربوط به فریم ورک های front-end متناظر.

علاوه بر این, مقدار ویژگی name با تکست لینک های عنصر main مطابق خواهد بود . با در نظر گرفتن این موضوع ساختار response  به صورت زیر خواهد بود.

[

  {

    “url”: “http://getbootstrap.com/“,

    “numberOfStars”: “88.260+”,

    “currentVersion”: “3.3.5”,

    “name”: “Bootstrap”

  },

  {

    “url”: “http://foundation.zurb.com/“,

    “numberOfStars”: “21.180+”,

    “currentVersion”: “5.5.3”,

    “name”: “Foundation”

  },

  // ۴ more objects here

]

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

توجه: مقادیری که برای ویژگی های numberOfStars و currentVersion استفاده کردیم غیر واقعی و صرفا برای شرح دادن بود.

مشابه مثال های قبلی این سری, ما از ایجکس استفاده می کنیم تا یک فایل استاتیک را درخواست کنیم. اگر بخواهیم محتوایی از سایت های دیگر را جای گذاری کنیم,(Google maps,Flicker,…) باید اسناد و مدارک API آن ها را بررسی کنیم و در صورت لزوم یک کلید API درخواست کنیم.

علاوه بر این, داده های مورد نظر ما در همان سروری که خود دمو بر روی آن قرار دارد, ذخیره شده اند. لذا, از محدودیت هایی که به هنگام کار کردن با سرویس های جانبی ممکن است بوجود آید, اجتناب می کنیم. (بخش محدودیت های درخواست های ایجکس مقاله اول را ببینید.)

اجرا کردن درخواست ایجکس

در این بخش, از تابع (jQuery: (ajax استفاده می کنیم تا یک درخواست ایجکس را اجرا کنیم. اما قبل از انجام این کار بیایید ابتدا متغیر هایمان را با اخذ پر استفاده ترین گزینشگر های jQuery تعیین کنیم.

var $list    = $(‘.m-info’),

var $message = $(‘.m-message’);

var $modal   = $(‘.modal’);

var $loader  = $(‘.loader’);

var $framework;

۱

۲

۳

۴

۵

حال زمان آن است که کد اجرا کننده درخواست را بررسی کنیم.

$(‘.boxes a’).on(‘click’, function(e) {

  e.preventDefault();

  $framework = $(this).text();

  $.ajax({

    url: ‘Demo.json’,

    dataType: ‘json’,

    beforeSend: function() {

        $loader.show();

    }

  }).done(successFunction)

    .fail(errorFunction)

    .always(alwaysFunction);

});

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

ملاحظه می کنید که شکل تابع ajax بصورت زیر می باشد.

$.ajax([settings])

۱

پارامتر settings یک شی پیکربندی است که اطلاعات درخواست ما را نگهداری می کند. تعدادویژگی هایی که این شی می تواند نگهداری کند بسیار زیاد است(حدود ۳۴ ویژگی). برای رعایت سادگی, بحث را محدود به آن هایی می کنیم که در این دمو استفاده شده اند.

توضیحات ویژگی

رشته ای حاوی url ای که درخواست به آن ارسال می شود.

url

قالب یا فرمت response data یعنی(json,xml,html) dataType
یک تابع فراخوان که قبل از اینکه درخواست ارسال شود, اجرا می شود. در اینجا این تابع کد نمایش دهنده بارگذار را راه اندازی می کند. beforeSend

قبل از ادامه کار, بهتر است به سه نکته زیر توجه کنید.

-برای تابع ajax علامت گذاری دیگری نیز وجود دارد: 

 $.ajax(url[settings])

-تمام ویژگی های پیکربندی پارامتر settings اختیاری هستند.

-متد HTTP پیشفرض Get است.

توابع Promise

تابع ajax, شی jqXHR یا jQueryXMLHttpRequest را بازگردانی می کند. این شی اینترفیس Promise را پیاده سازی کرده و لذا شامل تمام ویژگی ها, توابع و عملکرد های یک Promise است.

در این مثال, از توابع Promise زیر استفاده می کنیم.

– done

– fail

– always

متد done در صورتی اجرا می شود که درخواست موفقیت آمیز باشد. این متد تعداد کمی آرگومان می پذیرد, که تمام شان می توانند یک تابع یا آرایه ای از توابع باشند. بعنوان مثال, در دموی مورد نظر ما, ()successFunction به عنوان یک آرگومان در نظر گرفته می شود.

تابع فراخوان ( ()successFunction ) سه آرگومان می پذیرد.

۱-داده های بازگردانده شده.

۲-یک رشته که وضعیت درخواست را دسته بندی میکند. (برای مشاهده مقادیر ممکن برای آن, مقاله قبلی را ببینید.)

۳-شی jqHXR متد fail در صورتی اجرا می شود که درخواست موفقیت آمیز نباشد. این متد تعدادی آرگومان می پذیرد که تمامی شان می توانند یک تابع یا آرایه ای از توابع باشند. به عنوان مثال , در دموی مورد نظر ما, ()errorFunction به عنوان یک آرگومان در نظر گرفته می شود.

تابع فراخوان (()errorFunction) سه آرگومان را می پذیرد.

۱-شی jqXHR

۲-یک رشته که وضعیت درخواست را دسته بندی می کند.

۳-یک رشته دیگر که خطای ایجاد شده را معین می کند.این خطا قسمت متنی وضعیت HTTP را دریافت می کند. به عنوان مثال :Forbidden یا Not Found

متد always در صورتی اجرا می شود که درخواست به پایان برسد, صرف نظر از اینکه موفقیت آمیز بوده (متد done اجرا شود) یا غیر موفقیت آمیز (متد fail اجرا شود). مجددا این متد نیز به عنوان آرگومان یک تابع یا آرایه ای از توابع را می پذیرد. به طور مثال, در دموی مورد نظر ما, ()alwaysFunction به عنوان یک آرگومان در نظر گرفته می شود.

وضعیت یک درخواست آرگومان های توابع را مشخص می کند. در صورت موفقیت آمیز بودن درخواست, آرگومان های تابع فراخوان (()alwaysFunction) همان آرگومان های تابع فراخوان متد done خواهند بود. در حالت برعکس, اگر درخواست موفقیت آمیز نباشد, آرگومان های آن همان آرگومان های تابع فراخوان متد fail خواهد بود.

توجه: به جای متد های  (Promise (done,fail,always  که در این مثال استفاده شده اند, می توانیم معادلا از توابع فراخوان success,error,complete استفاده کنیم. این توابع در پارامتر settings تعریف شده اند.

نمایش داده ها

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

کد تابع فراخوان ()successFunction را در نظر بگیرید.

function successFunction(data) {

  if (data.length > 0) {

    for (var i = 0; i < data.length; i++) {

      if ($framework === data[i].name) {

        $list.show();

        $message.hide();

        $list.find(‘li:nth-of-type(2)’).text($framework);

        $list.find(‘li:nth-of-type(4)’).text(data[i].currentVersion);

        $list.find(‘li:nth-of-type(6)’).text(data[i].numberOfStars);

        $list.find(‘li:nth-of-type(8)’).html(‘<a href=”‘%20+%20data%5Bi%5D.url%20+%20′” target=”_blank”>’ +

data[i].url + </a>’);

        break;

      } else {

        $list.hide();

        $message.show().text(‘No data received for this framework!’);

      }

    }

  } else {

    $list.hide();

    $message.text(‘No data received from your respose!’);

  }

}

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

با وجود بروز رسانی محتوای نمونه مان, این محتوا هنوز پنهان است. هنگامی که درخواست به پایان میرسد, این محتوا ظاهر شده و بارگذار ناپدید می شود و فقط در این هنگام است که تابع فراخوان ()alwaysFunction اجرا می شود.

function alwaysFunction() {

    $loader.hide();

    $modal.addClass(‘active’);

}

۱

۲

۳

۴

کلاس active به صورت زیر خواهد بود.

.active {

  opacity: 1;

  z-index: 10;

  transform: scale(1);

}

۱

۲

۳

۴

۵

در تصویر زیر, می توانید شکل مورد نظر طرح نمونه را هنگامی که روی تکست لینک bootstrap کلیک می کنیم ببینید.

آشنایی با AJAX (پارت چهار)

چند سناریو

توانایی درک کدی که تحت شرایطی معین اجرا می شود بسیار مهم است.

بیایید دو سناریوی رایج را بررسی کنیم.

  • مقدار ویژگی name با تکست لینک های عنصر main مطابقت نمی کند. به عنوان مثال فرض کنید ما یک URL مشخص می کنیم که مقدار ویژگی name شی ای که مرتبط با فریم ورک پایه است به جای Foundation2 , Foundation است.

در چنین حالتی ما بر روی تکست لینک Foundation کلیک کرده و نمونه زیر ظاهر می شود.

آشنایی با AJAX (پارت چهار)

 

  • پاسخ دریافتی خالی است. به عنوان مثال, ما یک URL تعریف می کنیم که به یک آرایه خالی اشاره می کند. در این حالت طرح نمونه به شکل زیر خواهد بود:

آشنایی با AJAX (پارت چهار)

مدیریت خطاها

بسیار خوب, تا اینجا کدی که در صورت موفقیت آمیز بودن اجرا می شود را کامل کردیم. اما اگر درخواست موفقیت آمیز نبود چه اتفاقی می افتد؟ در این صورت ما لیست را پنهان کرده و یک پیغام دلخواه نمایش می دهیم.

کد تابع ()failFunction که نحوه عملکرد را معین می کند مشاهده کنید.

function failFunction(request, textStatus, errorThrown) {

   $list.hide();

   $message.text(‘An error occurred during your request: ‘ + request.status + ‘ ‘ + textStatus + ‘ ‘ + errorThrown);

}

۱

۲

۳

۴

برای آشنایی بیشتر با این کد, بیایید یک URL که وجود خارجی ندارد را تعیین کنیم. بنابراین متد fail اجراشده و طرح نمونه به صورت زیر خواهد بود.

آشنایی با AJAX (پارت چهار)

توجه: مجددا اگر این مثال را در سیستم لوکال خودتان اجرا می کنید ممکن است پیغام خطا متفاوت باشد.

جمع بندی

در این مقاله, بررسی مان از ایجکس- از زاویه دید یک طراح سایت – را به پایان رساندیم. امیدوارم که این سری مقالات برای شما مفید و سودمند واقع شده باشد و مهارت های جدید کسب کرده باشید.

 

پارت سه: دستور العمل هایی در سطح مبتدی از AJAX با jQuery

در اولین مقاله از این سری,پایه ها و زیر ساخت های ایجکس را پوشش دادیم. در مقاله دوم, نگاهی به یک مثال کاربردی با استفاده از Vanilla JAVA Script انداختیم. در این مقاله با تعدادی از توابع و متد های مرتبط با ایجکس jQuery آشنا می شویم. بویژه نگاهی دقیق تر به متد load و تابع کلی ajax می اندازیم.

استفاده از متد load

این متد ساده اما با اینحال بسیار قدرتمند برای دریافت داده های دور از دسترس است.

نگاهی به ساختار آن بیاندازید.

$(selector).load(url[, data][, complete])

۱

جدول زیر پارامتر های امکان پذیر آن را نشان می دهد.

الزامی بودن

توضیحات

پارامتر

بله

رشته ای حاوی url ای که درخواست به آن ارسال میشود.

url

خیر داده هایی(مانند یک رشته یا یک شیء خالی) که به همراه درخواست به سرور ارسال میشوند.  

data

 

خیر تابعی که هنگامی که درخواست به پایان میرسد اجرا میشود, چه درخواست موفقیت آمیز باشد چه نباشد. complete

 

در جدول زیر پارامتر های تابع را مشاهده می کنید.

توضیحات پارامتر
داده هایی که از درخواست دریافت می شود. responseText
رشته ای که وضعیت در خواست را دسته بندی می کند. textStatus
شیء jQuery XMLHttpRequest که ابر مجموعه ای از شیء XMLHttpRequest مرورگر است. jqXHR

لیست بعدی مقادیر ممکن برای پارامتر textStatus را به طور خلاصه بیان می کند.

  1. Success
  2. Notmodified
  3. Nocontent
  4. Error
  5. Timeout
  6. Abort
  7. Parsererror

برای اینکه درک بهتری از چگونگی کارکرد متد load داشته باشیم, بیایید نگاهی دوباره به مثالی که در مقاله قبل عنوان شد بیاندازیم.

یک بار دیگر نگاهی به ساخار HTML زیر بیاندازید.

<div>

  <img data-src=”Einstein.jpg” alt=”Einstein”>

  <button id=”request”>Learn more about Einstein</button>

  <div id=”bio”></div>

</div>

۱

۲

۳

۴

۵

و این هم اجرا شده ی آن :

آشنایی با AJAX(پارت سه)

به خاطر داشته باشید که می خواهیم به محض کلیک شدن دکمه (learn more…) محتوای قسمت bio را با استفاده از دیتای دریافتی از سرور بروز رسانی کنیم .

کد jQuery لازم برای آن را در تصویر میبینید.

var $btn = $(‘#request’);

var $bio = $(‘#bio’);

$btn.on(‘click’, function() {

  $(this).hide();

  $bio.load(‘Bio.txt’, completeFunction);

});

function completeFunction(responseText, textStatus, request) {

  $bio.css(‘border’, ‘1px solid #e8e8e8’);

  if(textStatus == ‘error’) {

      $bio.text(‘An error occurred during your request: ‘ +  request.status + ‘ ‘

+ request.statusText);

  }

}

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

آشنایی با AJAX(پارت سه)با فرض اینکه درخواست موفقیت آمیز بوده (یعنی وقتی textStatus وضعیت success یا modified دارد) نتیجه نهایی به این صورت خواهد بود :

علاوه بر آن , تصویر زیر را در نظر بگیرید که یک درخواست موفقیت آمیز را نمایش می دهد .

آشنایی با AJAX(پارت سه)

قسمت چپ این تصویر , شی XHR را به شکلی که در کنسول مرورگر نمایش داده شده است (اگر فقط از JavaScript برای ایجاد درخواست استفاده کنیم) نمایش می دهد. از طرف دیگر سمت راست شی jqXHR مربوطه را اگر از متد load استفاده کنیم نشان می دهد.

در صورت موفقیت آمیز نبودن درخواست , باید یک پیغام مناسب ظاهر شود. برای انجام این کار , مقدار پارامتر textStatus را بررسی کرده و یک پیغام خطا نمایش می دهیم.

آشنایی با AJAX(پارت سه)

توجه: اگر این مثال را در سیستم لوکال خودتان اجرا می کنید( و فایل bio.txt را در آن ذخیره کرده اید) پیغام خطا ممکن است متفاوت باشد . بعنوان مثال, ممکن است نتیجه ی زیر را ببینید.

آشنایی با AJAX(پارت سه)

در آخر, لازم به ذکر است که به طور پیشفرض, متد load از متد اچ تی تی پی  Get استفاده می کند, مگر اینکه ما داده ها را به صورت یک شی به مرورگر ارسال کنیم. فقط در این صورت متد POST فراخوانی می شود.

حال بیایید فرمت فایلی که از سرور درخواست کردیم را ارتقاء دهیم. برای این مثال, داده های مورد نظر به جای فایل Bio.txt در فایل Bio.html ذخیره شده است. به علاوه لازم به ذکر است که فایل مورد نظر دو پاراگراف دارد. با فرض اینکه ما فقط می خواهیم پاراگراف اول را بارگذاری کنیم, باید کد آغازین را به شکل زیر بروزرسانی کنیم.

$btn.on(‘click’, function() {

    // this line only changes

    $bio.load(‘Bio.html p:first-child’, completeFunction);

});

۱

۲

۳

۴

 

نحوه نمایش آن بدین صورت است.

آشنایی با AJAX(پارت سه)

جمع بندی

در این مقاله, نشان دادیم که چگونه با استفاده از jQuery  از ایجکس استفاده کنید. علاوه بر آن با تعدادی مثال کاربردی کار کردیم. در آخرین مقاله از این سری با کار کردن بر روی مثالی پیچیده تر مبحث را به پایان می رسانیم.

پارت دو : مثالی از ایجکس با Vanilla JAVA Script

در ادامه مقاله قبلی (آشنایی مختصری با AJAX برای طراحان فرانت-اند), در این قسمت مثالی می سازیم که از XMLHttpRequest API استفاده می کند تا یک درخواست ایجکس را راه اندازی کند.

 

مثال ایجکس

نگاهی به ساختار ساده ی زیر بیاندازید.

<div>

    <img data-src=”Einstein.jpg” alt=”Einstein”>

    <button id=”request”>Learn more about Einstein</button>

    <div id=”bio”></div>

</div>

۱

۲

۳

۴

۵

دموی مربوط به ساختار بالا را در تصویر زیر می بینید.

آشنایی با AJAX(پارت دو)

کاری که می خواهیم انجام بدهیم بدین صورت است:وقتی بر روی دکمه زیر عکس کلیک می کنیم, یک درخواست ایجکس راه اندازی شود. سپس عنصر با آیدی (bio) ظاهر شده و محتوای آن به همراه پاسخ دریافتی به نمایش گذاشته شود. این اطلاعات static و ثابت بوده و در فایل bio.txt ذخیره شده اند.

کد ایجکس لازم برای انجام چنین کاری را در زیر مشاهده می کنید:

 

var btn = document.getElementById(‘request’);

var bio = document.getElementById(‘bio’);

var request = new XMLHttpRequest();

request.onreadystatechange = function() {

  if(request.readyState === 4) {

    bio.style.border = ‘1px solid #e8e8e8’;

    if(request.status === 200) {

      bio.innerHTML = request.responseText;

    } else {

      bio.innerHTML = ‘An error occurred during your request: ‘ +  request.status + ‘ ‘ + request.statusText;

    }

  }

}

request.open(‘Get’, ‘Bio.txt’);

btn.addEventListener(‘click’, function() {

  this.style.display = ‘none’;

  request.send();

});

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

بررسی جزء به جزء فرایند

حال بیایید گام های لازم برای ایجاد این درخواست را بررسی کنیم.

-ایجاد یک آبجکت XMLHttpRequest

-ساخت تابعی که به هنگام دریافت دیتای پاسخ از سوی سرور اجرا می شود. شی XMLHttpRequest دارای ویژگی (onreadystatechange) است که تابع مذکور را ذخیره می کند. هر بار که حالت(state) درخواست تغییر می کند, این تابع اجرا می شود.

-بررسی کردن برخی از دیگر ویژگی های شی XMLHttpRequest . ابتدا, ویژگی (readyState) حالت درخواست ما را مشخص می کند. در طول درخواست ایجکس, مقدار این ویژگی تغییر کرده و می تواند مقادیر از ۰ تا ۴ را دریافت کند.(برای مثال, عدد ۴ بدین معناست که دیتای پاسخ در دسترس است). مورد دوم, ویژگی (status) مشخص می کند که آیا درخواست موفقیت آمیز بوده یا خیربرای مثال مقدار ۲۰۰ مشخص می کند که درخواست موفقیت آمیز بوده است.) در مثال مورد بررسی, با فرض اینکه ما اطلاعات پاسخ را دریافت کرده و درخواست ایجکس موفقیت آمیز بوده است, محتوای عنصر مربوطه(bio) را بروز رسانی می کنیم. در غیر اینصورت, پیامی نمایش می دهیم حاوی اطلاعات استخراج شده از شی XMLHttpRequest .

-مشخص کردن نوع درخواست با استفاده از تابع (open) . این تابع دو پارامتر ضروری و سه پارامتر اختیاری می پذیرد. اولین پارامتر ضروری تابع HTTP را تعریف می کند. (برای مثال (Get) یا (Post) .) دومی URL ای که به آن درخواست را ارسال می کنیم مشخص می کند. به طور اختیاری, یک پارامتر سوم از نوع Boolean را قرار می دهیم که مشخص می کند آیا درخواست ناهمگام (Asynchronous) است یا همگام(Synchronous) . ذو پارامتر اختیاری دیگر می توانند برای مقاصد اعتبار سنجی (authentication) استفاده شوند.

-ارائه کردن درخواست از طریق تابع (send) هنگامی که دکه آن کلیک می شود و علاوه بر آن مخفی کردن خود دکمه.

تصویر زیر بدنه درخواست ما را به شکلی که در کنسول مرورگر نمایش داده می شود نشان می دهد.

آسنایی با AJAX(پارت دو)

دموی نهایی بدین صورت خواهد بود:

آشنایی با AJAX(پارت دو)

در حالت دیگر, اگر ما درخواست درخواست فایلی را بدهیم که وجود نداشته باشد, پیغامی مشابه پیغام زیر می بینیم.

آشنایی با AJAX(پارت دو)

نکته: در صورتی که مثال مورد بررسی را در سیستم لوکال خود اجرا می کنید, ( و فایل bio.txt را در آن ذخیره کرده اید) پیغام ارور به احتمال زیاد متفاوت خواهد بود. به طور مثال, ممکن است نتیجه زیر را ببینید.

آسنایی با AJAX(پارت دو)

جمع بندی

در این مقاله بررسی کردیم که چگونه می توانیم یک درخواست ایجکس را مستقیما با استفاده از Vanilla JavaScript پیاده سازی کنیم. در قسمت بعدی این سری, بر روی متد ها و توابع مرتبط با ایجکس jQuery  تمرکز می کنیم. سپس در پارت نهایی, بر روی یک مثال پیچیده تر کار می کنیم.

پارت یک : آشنایی مختصری با AJAX برای طراحان Front-End

در این سری مقالات قصد داریم تا شما را با ایجکس , یک تکنیک فرانت اند بسیار مهم به نام ایجکس آشنا کنیم. ابتدا در قسمت اول به بررسی مفاهیم اولیه آن می پردازیم. تعریف دقیق این تکنیک, ابزار ها و موضوعات مرتبط با آن و کارکرد ها و محدودیت هایش را مورد بررسی قرار می دهیم.

قبل از شروع: در این سری فرض بر این است که شما با موضاعات اصلی در حوزه تکنولوژی فرانت اند مانند HTML و CSS آشنا هستید.

 

ایجکس چیست؟

ایجکس مخفف عبارت Asynchronous JavaScript and XML است. این یک تکنیک ساده و واحد و یا جدیدی نیست, درحقیقت مجموعه ای از ابزار های موجود مانند HTML, CSS, JavaScript, XML و غیره است که با هم برای ساخت برنامه های وب استفاده می شوند.

با استفاده از ایجکس, یک کلاینت (برای مثال مرورگر) با یک وب سرور ارتباط ایجاد کرده و درخواست اطلاعات می کند. سپس این ابزار پاسخ سرور را پردازش کرده و تغییراتی را به صفحه وب بدون بارگزاری مجدد اضافه می کند.

بیایید معنی تک تک کلمات واژه AJAX را بررسی کنیم.

-Asynchronous یعنی وقتی یک کلاینت از سرور سایت درخواست اطلاعات می کند تا زمان دریافت پاسخ به حالت فریز در نمی آید و در عوض کاربر در طول این مدت می تواند از صفحه وب استفاده کند. به محض ارسال پاسخ از طرف سرور, یک تابع مشخص تغییرات لازم را در صفحه سایت انجام می دهد.

-JavaScript یک زبان وب نویسی است که یک درخواست ایجکس را ایجاد کرده, پاسخ ایجکس مربوطه را تجزیه و تحلیل کرده و در نهایت DOM (ساختار صفحه وب) را به روز رسانی می کند.

-یک کاربر از XMLHttpRequest یا ای پی آی XHR استفاده کرده تا یک درخواست داده از سرور را ایجاد کند. به (API -(Application programming interface به چشم مجموعه ای از متد ها نگاه کنید که مشخص کننده قوانین ارتباطات بین دو بخش مرتبط به هم است. با اینحال توجه داشته باشید که داده های ورودی از یک درخواست ایجکس می تواند به فرمت های متفاوتی باشد و نه الزاما فرمتXML .

 

ایجکس چگونه کار می کند؟

برای اینکه یک ایده ابتدایی درباره نحوه کارکرد آن بدست آورید به مثال زیر توجه کنید.

آشنایی با AJAX

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

-درخواست به سرور ارسال می شود. درون یک بسته ارسالی, اطلاعات متفاوتی ممکن است ارسال شود؛ این درخواست ممکن است به یک فایل استاتیک اشاره کند که بر روی سرور ذخیره شده است (example.json). ممکن است که یک اسکریپت داینامیک را اجرا کند(functions.php) که در آن درخواست اسکریپت را به پایگاه داده متصل کرده تا اطلاعات مورد نظر را دریافت کند.

-پایگاه داده مقاله های درخواست شده را به سرور ارسال می کند و سپس سرور آن ها را به مرورگر کاربر ارسال می کند.

-جاوا اسکریپت پاسخ دریافتی را تجزیه تحلیل کرده و قسمت های مشخصی از DOM را به روز رسانی می کند. برای مثال فقط قسمت sidebar صفحه تغییر کرده و بقیه اجزاء ثابت می مانند.

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

 

مثال هایی معروف از ایجکس

ایجکس در هر جایی کاربرد دارد. برای نشان دادن این موضوع به برخی از وبسایت های معروف که از این قابلیت بهره می برند اشاره می کنیم.

ابتدا نحوه کارکرد فیسبوک و توییتر را در نظر بگیرید. صفحه را که به بالا اسکرول می کنید, مطالب جدید ظاهر می شوند. نمونه دیگر وبسایت Stack Overflow است که وقتی به یک سوال رای مثبت یا منفی می دهید, یک درخواست ایجکس اجرا می شود. و مورد آخر به محض اینکه موضوعی را در گوگل یا یوتیوب سرچ می کنید چندین درخواست ایجکس اجرا می شود.

شما می توانید تمامی این درخواست ها را بصورت مستقیم مشاهده کنید. برای مثال در کنسول کروم  می توانید این کار را با راست کلیک کردن و انتخاب Log XMLHttpRequests انتخاب کنید.

 

ایجاد یک درخواست

همان گونه که در بالا اشاره شد, برای ایجاد یک درخواست ایجکس از ای پی آی XMLHttpRequest استفاده می کنیم. علاوه بر این, jQuery معروف ترین کتابخانه (library) جاوا اسکریپت, چندین تابع و متد مربوط به ایجکس را ارائه می دهد.

در طول این چند مقاله پیش رو, از چند مثال مختلف استفاده می کنیم که از JavaScript و jQuery  استفاده می کنند تا یک درخواست داده از سرور را اجرا کنند.

 

ایجاد تغییرات در نتایج درخواست ها

وقتی از سرور وب اطلاعات مورد نظرمان را دریافت می کنیم, این داده ها می توانند در فرمت های متفاوتی باشند.

 

XML

(XML (eXtensible Markup Language یکی از معروف ترین فرمت ها برای رد و بدل کردن اطلاعات بین اپلیکیشن ها است. مشابه XML, HTML برای تعیین ساختارش از تگ استفاده می کند. با این حال در نظر داشته باشید که XML هیچ تگ از پیش تعیین شده ای ندارد. در حقیقت ما با تعیین کردن تگ های خودمان یک فایل XML را ایجاد می کنیم. مثالی از این ساختار را در کد زیر مشاهده می کنید.

<person>

    <name>Mike</name>

    <surname>Mathew</surname>

   <nationality>Australian</nationality>

  <languages>

  <language>Spanish</language>

  <language>English</language>

  <language>Russian</language>

  </languages>

</person>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

 

ویرایشگر های آنلاین بسیاری وجود دارند که شما می توانید با استفاده از آن ها فایل XML بسازید. یک نمونه بسیار خوب ویرایشگر XMLGrid.net است.در صورت استفاده ازین ویرایشگر مثال ما به شکل زیر خواهد بود:

آشنایی با AJAX

JSON

JavaScript Object Notation یک فرمت تغییر داده معروف دیگر است. با استفاده از JSON ساختار XML فوق الذکر بدین صورت خواهد بود.

{

“name” : “Mike”,

“surname”  : “Mathew”,

“nationality” : “Australian”,

“languages” : [“English”,”Spanish”,”French,”Russian”]

}

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

مجددا شما می توانید ادیتور های آنلاین JSON فراوانی را در اینترنت بیابید. برای مثال دو نمونه معروف آن JSON Generator و JSON Editor Online است.در صورت استفاده از JSON Editor Online مثال بالا بدین صورت خواهد بود:

آشنایی با AJAX

محدودیت های درخواست ایجکس

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

ابتدا نگاهی به ارور زیر که در کنسول کروم ظاهر می شود بیاندازید.

آشنایی با AJAX

این مورد زمانی اتفاق می افتد که درخواست ما به یک فایل محلی یا لوکال اشاره دارد, (برای مثال Demo.json) و نه در سرور. برای حل این مشکل می توانیم یک سرور محلی ایجاد کنیم(مثلا برنامه XAMPP را به عنوان فضای توسعه محلی راه اندازی کنیم) و فایل مورد نظر را در آن ذخیره کنیم.

مورد دوم نگاهی به ارور زیر بیاندازید:

آشنایی با AJAX

این مورد زمانی اتفاق می افتد که ما اطلاعاتی را درخواست می کنیم که بر روی یک لوکیشن با دامین یکسان(domain-relative) با صفحه وب ما قرار دارد.(معروف به same-origin policy restriction) قرار دارد. برای مثال اطلاعات در یک سرور لوکال ذخیره شده در حالی که صفحه وب بر روی یک سرور Codepen ذخیره شده است. خوشبختانه برای این مشکل هم راه حلی وجود دارد. یک راه حل این است که از مکانیزم CORS (Cross-Origin Resource Sharing) که توسط W3C پیشنهاد شده استفاده کنیم. البته در نظر داشته باشید که این مکانیزم ما را ملزم به ایجاد تغییراتی در فایل های پیکر بندی سرورمان می کند. راه دیگر این است که از تکنیک JSONP(JSON with Padding) استفاده کنیم.

 

جمع بندی

تا اینجا باید دیدگاه کلی مناسبی راجع به اینکه ایجکس چیست, تا به حال در جاهایی با آن مواجه شده اید و چه موضوعات و مسائلی در رابطه با آن وجود دارد بدست آورده باشید. علاوه بر آن مروری کوتاه بر معروف ترین فرمت های تغییر داده (data-interchange) کردیم. در قسمت های بعدی به بررسی یک نمونه کامل و واقعی می پردازیم.

طراحی سایت : نمونه ی اولیه

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

از کامپیوتر دور شوید!

تمایل فرآیند طراحی به این است که طراحان را از بقیه تیم جدا کند و به این معنی که آنها را به تکیه کردن به خودشان و ایده هایی که دارند،متمایل میکند.بسیاری از اوقات فرجه ای که برای یک پروژه داریم محدود است،در این مواقع طراحان مستقیما به سراغ نمونه های درست و قابل اعتماد (مثل طراحان ماهر و کار کشته)می روند،بدون صرف کردن زمان زیادی برای طراحی روی کاغذ و تست کردن ایده هایشان.در اینجور مواقع،طراحان زمانی از پشت مانیتورها بلند میشوند که بخواهند به شراکتشان پایان دهند و یا این که برای ارائه ی طرح این کار را میکنند.

web design

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

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

به محض قرار گرفتن روی کاغذ، نظریه ها آماده هستند برای تست شدن با تیم های دیگر،شرکا و یا حتی کاربران توامند تات به نمونه های اولیه و کمک کننده تبدیل شوند.

با توجه به همه ی این ها میزو رها کنید و ااستین هاتونو بزنید بالا و شروع کنید به طراحی !

web design

به تجربه ی کاربران تکیه کنید و سپس شروع به طراحی کنید.

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

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

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

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

web design

نتیجه ی این جلسات مطمئنا خیلی مهم است. و حقیقت این که رد و بدل کردن نظریات کاری می کند که آنها احساس کنند که این پروژه ها متعلق به آنهاست و تضمیناتی را ایجاب میکند که تا انتها ساپورت میشوید.

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

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

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

۱-تمرکز روی نتیجه

رد نظریه ها و یا قبول کردن و پذیرفتن و موافقت با کاربران نتایجی هستند که شما دنبال ان هستید.

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

وقتی شما در مورد نظریه ها گفت و گو میکنید،مطمئن شوید یادداشت برداری شودوهر یادداشت روی یک ورق استیکرو آنها را به دیوار آویزان کنید تا همه مجددا ببینند.

۲-crazy 8s(هشت های دیوانه)

این شیوه ی مورد علاقه ی تیم های برتر دنیاست( google ventur-BBCو ..)

این یک تمرین فردی ست زمانی که هر نکه ای از گروه یک برگه ی کاغذ را به هشت قسمت تقسیم می کند و راه حل های متفاوتی را طراحی میکند.هر کدام در طی ۴۰ ثانیه.

این نتایج در یک تمرین ذهنی دیوانه وار بدون هیچ زمانی برای انجام به بهترین شکل و امکانات عالی است و از لحاظ زمانی بهینه است.

۳-ارائه و اصلاحات

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

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

۴-یک دور دیگه هشت های دیوانه!

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

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

ارائه سریع  نمونه های اولیه و اصلی

نمونه های اولیه به شما کمک میکند تا نظریه هایتان را در مراحل مقدماتی معتبر کنید.و به شما اطمینان و اعتمادی را که لازم دارید را برای بازگو کردن طرااحی ها میدهد.ارائه نمونه های اولیه و تست و آزمایش با کاربران اطمینان حاصل میکند که عیب هر طرحی از اول پروژه برای دوری از هزینه ها در مراحل بعدی برطرف میشود.

شما میتوانید به سرعت نمونه های اولیه را به همراه طراحی ها از جلسات مشارکتی که قبلا برگزار کردید کنار هم قرار بدهید.همه ی انها لازم هستند که جلوی کاربران قرار گیرند.همچنین یک سری ابزار به صورت  آنلاین وجود دارند که میتوانند به شما کمک کنند که نمونه های اصلی تاثیر گذار بسازید.

چشم انداز

چشم انداز ها یکی از بهترین سکوهای جلسات طراحی نیست که وجود دارد ولی از بهترین ابزار های نمونه اولیه است.

دایره ی آموزش آن بسیار کوچک است و میتواند شما را در اجرای نمونه های اولیه در زمان کوتاهی کمک کند.

به وسیله ی هات اسپات کار میکند. شما اسکرین ها را برای نظر دادن هات اسپات میکنید .هم اکنون شما آماده اید برای تست کاربری.

web design

POP

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

 

برگه های نمونه های اولیه

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

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

تو ممکنه بخواهی یکی از آنها را بسته به این که با چه کسی مصاحبه می کنی انتخاب کنید.

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

web design

ازمایش جنگی

آزمایش جنگی یکی از فرمه ای آزمایش کردن طvاحی ها و دیزاین ها و نمونه های اولیه شما در فرایند به کار برده میشوند.

نتیجه

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

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

خوشحال میشوم نظراتتان را بشنوم لطفا تجربه و نظراتتان را به اشتراک بگذارید

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

قبل از شروع

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

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

بازبینی در طراحی سایت

 

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

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

اهداف خود را مشخص کنید

چند روز قبل از جلسه بازبینی, موارد مورد بحث را مشخص کنید و آن را به بقیه اعضای تیم ارائه دهید. با این کار هدف جلسه بازبینی متمرکز شده و اعضاء تیم نظرات و دیگاه های خود را از قبل آماده می کنند, در نتیجه یافتن عیب ها و راهکار های حل آن ها به طور موثرتر انجام می شود. علاوه بر این همه اطلاعات مورد نیاز برای جلسه بازبینی اعم از میزان بودجه, مهلت تحویل, بازخورد مشتری و … را آماده کنید.

در طول بازبینی

برای هر جلسه بازبینی, به هر صورت که انجام گیرد مواردی وجود دارد که بهتر است انجام شود:

-نقاط قوت کارتان را ذکر کنید, از اعضاء تیم قدردانی کرده و آنان را به پیشرفت بیشتر تشویق کنید.

–نکات منفی کارتان را نیز پیدا کرده و همه مواردی که طبق برنامه پیش نرفت را مورد بررسی قرار دهید. اما به هیچ وجه هیچ یک از اعضای تیم را به تنهایی سرزنش نکنید و به جای آن راهکار های حل این مشکلات را ارائه دهید.

–سعی کنید از ایراداتتان بیاموزید و توانایی هایتان را گسترش دهید تا در پروژه های بعدی بهتر عمل کنید.

–سعی کنید آموخته ها و تجربیاتتان را به دیگران انتقال دهید. برای مثال همکارتان که در پروژه شرکت نداشته و یا هر کسی که در قالب مقاله ای در وبسایت تان می تواند از این مطالب بهره ببرد.

بازبینی در طراحی سایت

 

جلسه را به طور مناسب جمع بندی کنید

جلسه بازبینی باید خاتمه ای مناسب برای پروژه باشد, همه موارد و نکات را به طور مرتب و البته مثبت مورد بررسی قرار داده و خلاصه ای از نتایج, آموخته ها, دستاورد ها و برنامه ای برای آینده ارائه دهد.

نتیجه گیری

همان گونه که الن دوریز (Ellen de Vries) در کتاب ( Collaborate:Bring people together around digital projects ) می گوید:-هر بار که شما با گروهی از افراد همکاری  می کنید چیزی خواهید آموخت که در آینده برای دیگران مفید خواهد بود- جلسه های بازبینی فرصتی عالی برای بدست آوردن دیدگاهی کلی و اشتراک آن با دیگران است.علاوه بر این , این جلسات فرصتی برای قدردانی از تیم تان , از مشتری برای انتخاب شما و در عین حال فرصتی برای ایجاد کارهای بعدی تان خواهد بود.

هر طراح سایتی به خوبی می داند که چگونه باید رنگ فونت را تغییر دهد. این یکی از اولین مهارت هایی است که در طی یادگیری CSS می آموزیم. ابتدا رنگ مورد نظر را انتخاب کرده و سپس آن را در فایل استایل تنظیم می کنیم. برای مثال color: purple; . درنتیجه همه علایم در فونت مشخص شده به رنگ مورد نظر در می آید. اما اگر بخواهیم برای هر علامت در یک فونت بیش از یک رنگ انتخاب کنیم چاره چیست؟ چطور می توان برای هر حرف دو رنگ سبز و قرمز تعیین کرد؟ و یا حتی کاری کرد که حروف از رنگی آغاز شده و کم کم به رنگی دیگر درآیند؟ خوشبختانه به کمک فونت های رنگی تمام این کار ها شدنی است!

در تصویر زیر چهار فونت رنگی را می بینید.

فونت های رنگی

در نگاه اول به نظر می آید که این نوشته ها تصاویری هستند که با نرم افزار ادیتور عکس ساخته شده اند اما واقعیت این است که چیزی نیستند جز متن قابل تغییر که قابلیت خوانده شدن توسط مرورگر را دارند! این فونت ها به جای اینکه رنگشان توسط css کنترل شود, دارای تنظیمات داخلی هستند که به آن ها این اجازه را می دهد که برای هر علامت یا حرف بیش از یک رنگ انتخاب کنند. قابلیتی که جلوه بصری فوق العاده ای به صفحه می دهد!

نحوه استفاده از این فونت ها

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

.Gilbert on typewithpride.com

.Abalone on colorfontweek.fontself.com

.Playbox on colorfontweek.fontself.com

.Bixa on bixacolor.com

کدی که برای اضافه کردن این فونت ها به صفحه لازم است چیز جدیدی نیست , در واقع همان fontface@ آشنا و ساده است.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Color Fonts</title>

    <style>

    @font-face {

        font-family: ‘Gilbert’;

        src: url(‘fonts/Gilbert-Color Bold-Preview_1004.otf’);

    }

    @font-face {

        font-family: ‘Abalone’;

        src: url(‘fonts/Abelone-FREE.otf’);

    }

    @font-face {

        font-family: ‘Playbox’;

        src: url(‘fonts/Playbox-FREE.otf’);

    }

    @font-face {

        font-family: ‘Bixa’;

        src: url(‘fonts/NTBixa-Color.woff2’);

    }

    body {

        font-size: 4.5rem;

        line-height: 1.618;

    }

    .gilbert {

        font-family: ‘Gilbert’;

    }

    .abalone {

        font-family: ‘Abalone’;

        font-size: 3.8rem;

    }

    .playbox {

        font-family: ‘Playbox’;

    }

    .bixa {

        font-family: ‘Bixa’;

    }

    </style>

</head>

<body>

        <a class=”gilbert”>Gilbert Color Font</a>

        <div class=”abalone”>Abalone Color Font</div>

        <div class=”playbox”>Playbox Color Font</div>

        <div class=”bixa”>Bixa Color Font</div>

</body>

</html>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

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

در حال حاضر, اگر می خواهید از این فونت ها استفاده کنید باید از مرورگر های firefox و edge استفاده کنید, تنها مرورگر هایی که به طور کامل از این فونت ها پشتیبانی می کنند. مرورگر سافاری فقط از فرمت SBIX پشتیبانی می کند. کروم فقط در اندروید و آن هم فقط از فرمت CBDT پشتیبانی می کند. اوپرا اما از هیچ یک از فرمت ها پشتیبانی نمی کند!

تغییرات در CSS

در حال حاضر برای تغییر رنگ هایی که در فونت های رنگی استفاده می شوند نمی توان از CSS استفاده کرد. با این حال برای یک طراح فونت این امکان وجود دارد که بسته فونت خود را به قابلیت تغییر پذیری از پیش تعریف شده تجهیز کند. این تغییر پذیری با استفاده از ویژگی font-feature-settings قابل اجرا است.

از آن جایی که رنگ های فونت های رنگی در داخل آنها تنظیم شده است, دستور color:……; دیگر قابل استفاده نیست. حتی برای رنگ دادن به لینک ها, هدر ها و یا هر چیز دیگری که با فونت رنگی ایجاد شود. البته خوب است بدانید که با اینکه تنظیم رنگ برای لینک ها غیر ممکن است, همچنان می توان از خط کشی زیر آن ها استفاده کرد و در فایل CSS رنگ این خط کشی قابل تغییر است. اگر قصد دارید از فونت رنگی برای لینک ها استفاده کنید بهتر است ازین خط کشی استفاده کنید تا عبارت لینک از متنتان قابل تشخیص باشد. برای مثال نگاهی به کد زیر بیاندازید.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Color Fonts</title>

    <style>

    @font-face {

        font-family: ‘Gilbert’;

        src: url(‘fonts/Gilbert-Color Bold-Preview_1004.otf’);

    }

    body {

        font-size: 4.5rem;

        line-height: 1.618;

    }

    .gilbert {

        font-family: ‘Gilbert’;

    }

    a {

        color: red;

    }

</head>

<body>

        <div class=”gilbert”>Gilbert Color <a href=”#”>Link</a></div>

</body>

</html>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

کد بالا به ما عبارت link را به صورت خط گذاری شده نشان می دهد.

فونت های رنگی

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

 

در این مقاله قصد داریم تا با استفاده از ابزار های JavaScript Mouse Event آیکون های تصویری بسازیم که وقتی اشاره گر موس به روی آن ها می رود, تصویرشان تغییر کند. برای مثال آیکون هایی برای نمایش یک کتاب الکترونیکی که در حالت معمولی تصویر لوگوی وبسایت را نمایش می دهد اما وقتی موس روی آن ها می رود, تصویر جلد کتاب نمایش داده می شود. این راهی ایده آل برای نمایش خلاصه ای از چیزی است که مخاطب با ورود به آدرس مورد نظر خواهد دید. برای انجام چنین کاری از دو ابزار CSS Grid Layout  و JavaScript mousemove event استفاده خواهیم کرد. با ما همراه باشید.

تصاویر واکنش پذیر با JavaScript Mouse Event

تغییرات HTML

کدی که به فایل HTML اضافه می کنیم بسیار ساده است. یک لیست بدون ترتیب و مسطح به همراه چند تصویر هم اندازه که درون هر یک از بخش های لیست قرار می گیرند.

     <ul class=”cards”>  <li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 4 more images here –>

</li>

<li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 3 more images here –>

</li>

<li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 2 more images here –>

</li>

<li class=”card”>

<img src=”IMG_SRC” alt=””>

<!– 1 more image here –>

</li>

</ul>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

تغییرات CSS

برای تغییرات بخش CSS , با توجه به قواعد CSS styles توجه به دو نکته ضروری است:

-لیست تصاویر هر آیکون به عنوان یک قالب بسته و محصور (grid container) تعریف می شود. می توانید به جای CSS grid از flexbox یا هر روش چینش دلخواهتان استفاده کنید.

–تصاویری که قصد داریم در هر یک از آیکون ها قرار گیرد را در حالت پیش فرض مخفی یا غیر قابل مشاهده می کنیم.

کد لازم برای اضافه شدن به فایل CSS را در تصویر زیر مشاهده می کنید:

.cards {

  display: grid;

  grid-gap: 20px;

  grid-template-columns: repeat(4, 1fr);

}

.card {

  position: relative;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

}

.card:hover {

  cursor: pointer;

}

.card img:not(:first-of-type) {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  opacity: 0;

}

.card img.is-visible {

  opacity: 1;

}

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

تغییرات JavaScript

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

window.addEventListener(“load”, init);

window.addEventListener(“resize”, init);

۱

۲

 

در داخل تابع init چند اتفاق می افتد. اول از همه در میان آیکون هایمان یک حلقه یا لوپ ایجاد می کنیم.

 

function init() {

  const cards = document.querySelectorAll(“.card”);

  cards.forEach(el => {

    // actions here

  });

 }

۱

۲

۳

۴

۵

۶

سپس برای هر یک از آیکون ها تعداد تصاویر را بدون در نظر گرفتن تصویر پیش فرض حساب       می کنیم .(اولین تصویر در حالت پیش فرض قابل رویت است و به طور مطلق جایگذاری نشده است.)

const numOfChildImages = el.querySelectorAll(“img:not(:first-of-type)”).length;

 

اگر تعداد تصاویر هر آیکون حداقل یکی بود, مطابق زیر عمل می کنیم.

-پهنای آیکون را حساب می کنیم.(پهنای تصویر پیش فرض) و سپس با تقسیم کردن آن به تعداد تصاویر زیر شاخه, آیکون را به قسمت های مساوی تقسیم می کنیم.

if (numOfChildImages > 0) {

  const { width } = el.getBoundingClientRect();

  const parts = width / numOfChildImages;

}

۱

۲

۳

۴

 

برای درک بهتر تصور کنید اولین آیکون ۲۳۵px پهنا دارد. این آیکون حاوی چهار تصویر است(فراموش نکنید که تصویر پیش فرض را نادیده می گیریم). در نتیجه از تقسیم ۲۳۵ بر ۴ مقدار ۵۸٫۷۵ پیکسل بدست می آید. اما از این عدد چه استفاده ای می کنیم؟ در جواب باید گفت که این عدد محدوده ها و فاصله ها را مشخص می کند, پس به محض اشاره شدن به آیکون توسط موس, موقعیت طولی موس(mouse x) را بدست آورده, محدوده آن را بررسی می کنیم و در نهایت تصویر مربوطه را نشان می دهیم.

به مثال ساده زیر توجه کنید.

Mouse X Position Image to Show
۰<X≤۵۸٫۷۵px ۱st
۵۸٫۷۵px<X≤۱۱۷٫۵px ۲nd
۱۱۷٫۵px<X≤۱۷۶٫۲۵px ۳rd
۱۷۶٫۲۵px<X≤۲۳۵px ۴th

توجه داشته باشید که منظور از ستون تصویر به نمایش در آمده یکی از تصاویری است که از میان عکس های زیر شاخه هر آیکون باید به نمایش درآید(مجددا تصویر پیش فرض را در نظر نمی گیریم)

 

تصاویر واکنش پذیر با JavaScript Mouse Event

 

 

حال که ملزومات کار را می دانیم, بیایید همه را در قالب یک کد درآوریم. مجددا درون هر حلقه از mousemove event استفاده می کنیم.

// hover cards

el.addEventListener(“mousemove”, e => {

  // do stuff here

});

۱

۲

۳

۴

 

حال موارد زیر را انجام می دهیم:

۱-مختصات طولی (mouse x) اشاره گر موس را نسبت به آیکون اشاره شده و نه کل صفحه بدست می آوریم.

۲-کلاس(isVisible) را از تمام تصاویر زیرشاخه آیکون برمی داریم.

۳-با توجه به موقعیت اشاره گر موس تصویر مناسب را نمایش می دهیم.

قسمتی از کد که موارد توضیح داده شده را اجرا می کند بدین شرح است:

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

el.addEventListener(“mousemove”, e => {

//۱

const xPos = e.pageX – el.offsetLeft;

//۲

removeIsVisibleClass();

//۳

switch (numOfChildImages) {

case 1:

if (xPos > 0 && xPos <= parts) {

addClass(el, “img:nth-child(2)”);

}

break;

case 2:

if (xPos > 0 && xPos <= parts) {

addClass(el, “img:nth-child(2)”);

} else if (xPos > parts && xPos <= parts * 2) {

addClass(el, “img:nth-child(3)”);

}

break;

// more cases below

}

});

همان طور که می بینید تابع(removeIsVisibleClass) وظیفه حذف کردن کلاس (isVisible) تصویر مربوطه را بر عهده دارد. تابع کلی تر (addClass) وظیفه اضافه کردن کلاس (isVisible) به تصویر مورد نظر را بر عهده دارد. بدنه این توابع را در تصویر زیر مشاهده می کنید.

function removeIsVisibleClass() {

  if (document.querySelector(“img.is-visible”)) {

    document.querySelector(“img.is-visible”).classList.remove(“is-visible”);

  }

}

function addClass(parent, child, className = “is-visible”) {

  parent.querySelector(child).classList.add(className);

}

۱

۲

۳

۴

۵

۶

۷

۸

۹

تا اینجا دیدیم که وقتی روی یک آیکون اشاره می شود چه اتفاقی می افتد. حال بیایید سناریوی برعکس را بررسی کنیم. به عبارت دیگر چه اتفاقی می افتد وقتی اشاره گر موس از روی آیکون برداشته میشود؟ در این حالت اتفاقی که باید بیفتد این است که تصویر پیش فرض دوباره به نمایش درآید.

// inside cards loop

el.addEventListener(“mouseleave”, () => {

  removeIsVisibleClass();

});

۱

۲

۳

۴

پشتیبانی مرورگر

آیکون های واکنش پذیر به خوبی برروی اکثر مرورگر ها اجرا می شوند با این حال توجه به نکاتی ضروری است:

-برای ایجاد چنین قابلیتی از CSSGrid و حلقه foreach  استفاده کردیم که توسط تمامی مرورگر ها استفاده نمی شوند, اما اگر بخواهید پشتیبانی تمام مرورگر ها را داشته باشید راه حل های جایگزینی نیز برای این کار وجود دارد.

-این ویژگی بر روی تمامی صفحه نمایش ها و وسیله ها به طور یکسان به کار می رود و برای صفحه نمایش های کوچک و لمسی بهینه سازی نشده است. برای پروژه ساده ای مانند مثالی که در این مطلب ارائه شد مشکل خاصی به حساب نمی آید اما برای پروژه های بزرگ تر, می توانید آن را به صفحه نمایش های بزرگ و یا غیر لمسی محدود کرد.

جمع بندی

در این مطلب سعی کردیم تا با استفاده ازJavaScript mouse event  یک ویژگی منحصر به فرد به آیکون های تصویری بدهیم. امیدواریم این مطلب برای شمابه اندازه کافی هیجان انگیز بوده باشد تا دست به کار شویدو خودتان چیزی خارق العاده خلق کنید.

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

برای رخ دادن این مسئله ، سیستم های تکنولوژی و کسب و کار ها باید بر اساس نیاز مردمی که از آن ها استفاده میکنند منعطف ، سازگار ، قابل دسترس و تاثیر پذیر باشد. این به آن معنی است که باید به ظاهر آن ها توجه کنیم. آن ها باید هیجانات مردمی که از آن ها سرویس میگیرند را براورده کنند.

اینجا است که “ ایده پردازی طراحی ” وارد میشود؛ نگاه کردن به محصولات و خدمات از دیدگاه مشتری.

 

پایه های اصلی ایده پردازی

چرا ایده پردازی طراحی ؟

برای فهمیدن اینکه چرا ایده پردازی طراحی ممکن است برای این کار مناسب باشد ، مهم است که بین “طراحی” و “فرهنگ طراحی محور” تمایز قائل شویم.

معمولا وقتی به کلمه ی طراحی فکر میکنیم تعاریفی مثل زیبایی و هنر در ذهن نقش میبندد.به طور خلاصه این فکر اجرای فنی طراحی را به عوان مهمترین هدف متوقف میکند و تمرکز را از آنچه مردم نیاز دارند و آنچه میخواهند دور میکند.

از سوی دیگر فرهنگ طراحی محور به عنوان یک نقش بر طراحی برتری پیدا میکند و یک مجموعه از اصول را ( که به صورت “ایده ی طراحی ” شناخته میشود ) را به طراحان ابلاغ میکند.

برای بهتر شناختن ایده های ایده پردازی های طراحی ، مطالب ذیل را در نظر میگیریم :

۱- کسب و کار، خلاقیت ، شرکت های اجتماعی  و سیستم هایی که وجود دارند تا نیازهای اصلی انسان را برطرف کنند.

۲- یک نیاز انسانی چیزی است که مردم دوست دارند.

۳- نیاز انسان باعث رشد و ترقی یک شرکت  یا بنگاه اقتصادی که آن ها را براورده میکنند می شود.

۴- سیستم ها و شرکت های موفق نیاز انسان مبنی بر حضور در مرکز همه ی فعالیت ها را درک میکنند و آن را برآورده میکنند و در ماورای آن از اینکار بهره میبرند.

 

پایه های اصلی ایده پردازی

ایده پردازی طراحی یک نوع طرز فکر است !

قبل از اینکه به ایده پردازی طراحی بپردازیم ، ۱۰ نکته است که بهتر است بدانیم :

۱ – ایده پردازی طراحی یک طرز فکر است و هدف گسترش دادن ایده پردازی های طراحی است.

۲- ایده پردازی طراحی یک راه حل است و تمایل دارد مسائل را حل کند.

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

۴-در ایده پردازی طراحی ، همه ی راه حل ها با نیاز های انسان در ذهن طراحی می شوند.

۵-طراحی یک ایده که یک نیاز خاص انسان را حل می کند باید در حدود و مقیاس های مختلف بررسی شود.

۶- وقتی با یک مشکل وخیم برخورد میکنیم نهایتا اطلاعات کم  و محدودی درباره حدود و مقیاس های مختلف آن داریم.و در نتیجه یک راه حل ناکافی پیدا میکنیم.

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

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

۹-الگو و تست کردن آن روی یک کاربر واقعی.

۱۰-در ایده پردازی شکست وجود دارد. خیلی نادر است که به ایده های درست در اولین بار و اولین ایده برسیم.کمپانی هایی مانند اپل از شکست های خود مانند اهرمی برای پیروزی و ابداع و نوآوری استفاده کردند.

 

از خود بپرسید

چند سوال که درباره ی آن ها فکر کنید:

یک نیاز انسانی چیست و چگونه محرکه ای برای همه کارهای ما است؟

کسب و کار شما چه نیاز انسانی ای را برطرف می کند؟

چه کسانی از مسائلی که شما حل کردید بهره می برند؟

چه تکنیک های انسان محوری برای حل یک مشکل انسانی به کار گرفته اید ؟

 

۵ مرحله ی ایده پردازی طراحی

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

۵ مرحله ی طراحی را در شکل زیر می بینید. بسیار مهم است که درک کنید این مراحل غیر خطی هستند و ایده پردازی طراحی یک جریان غیر خطی است

۱- نیاز سنجی

این مرحله بر رابط کاربری یا UI تمرکز می کند.نیاز سنجی به ایده پردازان طراحی اجازه می دهد که فرضیات خود درباره ی جهان را الغا کنند تا نیاز های کابران خود را درک کنند. هدف طراحان در این مرحله باید این باشد که بفهمند کاربران چه میخواهند و چه چیزهایی زندگی آن ها را راحت تر می کند و تکنولوژی ها چگونه برای آنها مفید تر می شوند.

۲– شناختن

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

۳- آرمان سازی

ارمان سازی تولید ایده با استفاده از استنباط ها از :

  • کاربران و نیاز های آن ها از مرحله ی نیاز سنجی
  • انالیز مشاهدات برای پیدا کردن یک مشکل انسانی از مرحله ی دوم

است

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

۴- نمونه ی اولیه

بهترین ایده ی تولید شده در مرحله ی ارمان سازی به یک چیز خاص تبدیل می شود. در اینجا طراحان یک نمونه ی اولیه در مقیاس کوچک از محصول را تولید میکنند یا مشخصه های محصول را معلوم می کنند.

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

نمونه های اولیه عالی نیستند .آنها بهم ریخته اند زیرا حاصل یک ایده هستند . آنها باید تست شوند

۵- تست

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

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

 

نتیجه گیری

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

ایده پردازی طراحی یک تصمیم بین راه حل های اشکار یا سنتی نیست.

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