استفاده از نمودارها و گراف‌ها در ایجاد محتوای وب

  • 1389/5/4
  • محمدرضا ارجمندی
  • 3

به عنوان یک طراح وب ، آیا تا کنون پیش امده که  بر روی پروژه ای مانند یک گزارش سالانه ، بروشور و یا حتی مطالب وبلاگی کار کنید که حاوی حجم بسیار زیادی از داده هاست؟

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

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

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

چه زمانی نیاز به استفاده از نمودار است؟

قبل از اینکه وارد جزئیات ایجاد جدول مؤثر و کارآمد شویم ، اجازه دهید اول در مورد اینکه چه چیزهایی باعث مفید بودن استفاده از چارت می شود بحث کنیم. همانطور که لقمان حکیم هم گفته:«هر چیزی جای خودش را دارد»و این «چیز» شامل استفاده از نمودار  هم می شود.

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

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

تصویر-گوگل آنالیز در حال نشان دادن میزان استفاده از مرورگر برای Design Instruct.

آیا می توانید تصور کنید اگر — به جای رسم نمودار از آمار وب سایت ها– گوگل آنالیز تنها داده ها را به صورت اعداد خام در درون قالب جدولی یا لیست نمایش می داد چه می شد؟ من به شما می گویم! شما 90 ٪ از اطلاعات حیاتی مورد نیاز را از دست داده یا نمی توانستید تحلیلی درست داشته باشید!

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

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

انواع نمودارها

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

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

نمودار دایره ای(Pie Chart)

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

منبع.

نمودار میله ای( Bar chart )

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

منبع.

نمودار پراکندگی(Scatter Plot)

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

منبع.

نمودار خطی/سطحی(Line/Area Chart)

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

منبع.

عناصر طراحی یک نمودار

هنگام طراحی نمودار ، معمولا چهار قسمت اصلی وجود دارد که شما می توانید آن را بر حسب نیاز خود تغییر دهید (هر چند هر نوع نموداری هر 4 قسمت را همزمان با هم ندارد).

این عناصر عبارتند از عنوان نمودار، شرح نمودار، داده ها (بخش ها / میله ها / نقاط) ، و پارامتر ها (عنوان محورها ، اعداد روی محورها).

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

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

بسته به نوع نمودار استفاده شده ، داده ها می توانید به اشکال مختلف نمایش دهید. این کار را می توان به صورت 2 بعدی،3 بعدی یا با استفاده از بافتی خاص انجام داد.

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

جمع آوری داده ها

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

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

مثال موردی : ترسیم نمودار  تکنیک های درجه بندی وبلاگ های طراحی

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

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

برای اینکه ان مقاله کمی جذاب تر شود، از یک نمودار میله ای عمودی استفاده کردم که در محور عمودی حاوی جزئیات بیشترین تکنیک های ارتقاء استفاده شده بود.

تصویر-نمودار میله ای تصویر بالا نمایش دهنده محبوبیت روش های رایج ارتقاء وبلاگ های طراحی است. منبع.

برای این کار ، مجبور به جمع آوری اطلاعات خود ، مرتب کردن آن در جدول و سپس تبدیل آن به نمودار بودم.

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

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

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

ایجاد نمودار

در میان نرم افزار های رایانه ای تعدادی برنامه کاربردی خوب  وجود دارند که شما می توانید برای ایجاد نمودار های جذاب و کارآمد از آنها استفاده کنید. 3 تا از برنامه های معروفتر در این زمینه عبارتند از: Illustrator, Numbers  و  Excel.

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

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

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

ایجاد نمودار در برنامه Illustrator : بررسی اجمالی

هنگامی که شما در برنامه  ایلوستریتور  یک سند جدید را باز می کنید، اولین کاری که شما می بایستی انجام دهید این است:رفتن به Window > Show Tools.. حالا می توانید بر روی ابزار نمودار (Graph Tool)، کلیک کنید تا پنجره ای پر از گزینه های مربوط به ایجاد نمودار باز شود.

این جا همان مکانی است که شما می توانید با انتخاب نوع نمودار شروع به تغییر ظاهر و نمایش گراف به دلخواه خود کنید.سپس روی OK کلیک کرده، سپس روی ابزار نمودار کلیک کنید و با گرفتن دکمه سمت چپ ماوس و کشیدن(drag) سند باز شده خود را به پنجره گراف درگ کنید.

هنگامی که شما دکمه ماوس را رها  کنید، پنجره ای ظاهر خواهد شد که به شما اجازه می دهد اطلاعات مربوط به نمودار خود  را تایپ کرده یا از طریق یک فایل وارد(import) کنید.

ایجاد نمودارها در Numbers: بررسی اجمالی

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

در اینجا ، یک منو ظاهر شده و به شما اجازه خواهد داد از بین 11 نوع نمودار مختلف به همراه 8 نوع سه بعدی نمودار مور نظر تان را نتخاب کنید.

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

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

ایجاد یک نمودار در اکسل : بررسی اجمالی

همانند Numbers ، وقتی سند صفحه  گسترده ای با داده های وارد کرده به وجود آوردید ، می توانید نمودار را تنها با چند کلیک ایجاد کنید. فقط کافیست سلول هایی که می خواهید نمودار را بر اساس ان رسم کنید های لایت کنید و بر روی  Insert  و Charts کلیک کنید. نوع نمودار را انتخاب  کنید و کار تمام شد!

نمودارهای DIY : نمودار مخصوص خود را ایجاد کنید

هر برنامه جدول های محدودی دارد و هر نوع جدولی را نمیتوانید در یک برنامه ایجاد کنید(موارد خاص). بسته به شرایط ، گاهی روش « خلق ابتکاری» در خلق نمودارها روش خوبی است.

نمودار های گرافیکی ، یا infographics ، اساسا نمودار استروئیدی  و اغلب در ترکیب با نمودارهای استاندارد همراه با اطلاعات اضافی خلاق و ابتکاری هستند. قرار دادن یک  نمودار Venn با تعدادی دایره در هر دو برنامه  فتوشاپ یا ایلوستریتور   کاری ساده است.

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

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

در زیر چند راه حل ارائه شده که به شما کمک می کند تا به نمودارهای خود کمی چاشنی جذابیت اضافه کرده و  آنها را متمایز از نمودارهای معمولی کنید.

استفاده از بافت

سعی کنید از بافت های چشم نواز به جای رنگ های سالید و غیر جذاب در بخش های مختلف نمودار خود مانند میله های نمودار میله ای  استفاده کنید. به ویژه بافت چوبی و یا ریز دانه های فلزی بسیار زیباست

.

منبع.

استفاده از عمق

اضافه کردن عمق به نمودار جلوه ای 3 بعدی به آن می دهد و این جلوه همیشه زیبایی خاص خود را دارد اما  در ضمن می تواند بر روی خوانایی داده های نمودار هم  تاثیر منفی بگذارد ، بنابراین  خیلی در استفاده از این جلوه زیاده روی نکنید؛در حد معمول باشد!

منبع.

نمودارهای ترسیم شده با دست

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

منبع.

راههای دیگری برای با بردن عنصر تنوع در نمودارها

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

یکی دیگر از روش های مورد علاقه من در ساخت نمودارها ایجاد کارهای سفارشی کمی بیشتر روی نمودار است تا تصویری از اشیاء جهان واقعی در نمودار تجلی یابد.مثلا فکر کنید چرا از یک شکل دایره ای مانند تصویر یک کلوچه(pie) واقعی برای نمودار دایره ای (pie chart)استفاده نشود؟ یا مثلا در نمودار میله ای هر ستون را تعدادی قوطی کنسرو که روی هم قرار گرفته اند تشکیل دهد؛جالب است نه؟

جمع بندی نمودار ها

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

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

منبع: sixrevisions

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 3 دیدگاه
  1. بازتاب: Zibatar.in
  2. سلام
    خداییش گل کاشتید
    عجب مقاله جامع و کاملی بود
    آقا، من این مطلب زو با اجازتون تو زیباتـــزین http://www.zibatar.inبه اشتراک گذاشتم
    حالا فقط نیاز به رای اعضا داره نا از قسمت در انتظار زیباتر شدن به صفحه اصلی سایت (زیباتر شده ها) بیاد.
    ممنون

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *