تاثیر همدلی در طراحی

چهارشنبه 15 شهريور 1396
7:39
طراحی سایت

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


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


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



[ بازدید : 3 ] [ امتیاز : 0 ] [ نظر شما :
]

جاوا اسکریپت و موتورهای جستجو و تاثیر آن در سایت

دوشنبه 13 شهريور 1396
8:01
طراحی سایت

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

بارگیری محتوا از طریق رویداد های کاربران

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


URL ها

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

تنظیمات درست در robots.txt

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

یکپارچگی درست محتوا در سایت

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



[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]

تعامل مثبت و منفی در UX

دوشنبه 13 شهريور 1396
8:01
طراحی سایت

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


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



[ بازدید : 3 ] [ امتیاز : 0 ] [ نظر شما :
]

نحوه طراحی صفحات خالی در سایت

دوشنبه 13 شهريور 1396
8:01
طراحی سایت

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


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

[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]

ابزار Mobirise برای طراحی سایت های ریسپانسیو

دوشنبه 13 شهريور 1396
8:01
طراحی سایت

همه طراحان به دنبال ابزارهای برای راحتی کار و همچنین افزایش سرعت طراحی سایت در هنگام استفاده کردن از آن ها می باشند . همچنین می دانیم با افزایش روز افزون استفاده از موبایل ها هوشمند و تبلت ها سایت های طراحی شده باید به درستی در این دیوایس های دجیتالی نمایش داده شوند . یکی از ابزارها و سایت های که می تواند به طراحان در این زمینه کمک نماید سایت mobirise.com می باشد . این ابزار یک سایت منطبق با موبایل های هوشمند را برای طراحان و کاربران سایت به صورت رایگان ایجاد می کند این کار از طریق CSS ، HTML و بوت استرپ نسخه آخر این پلتفرم یعنی 4 به همراه ویژگی های flexbox ساخته می شود . در واقع سایت mobirise.com ابزاری در اختیار کاربران قرار می دهد که آنها می توانند بر روی سیستم عامل ویندوز و یا مک خود نصب نمایند و از ویژگی های منحصر به بفرد این ابزار که یک سایت ریسپانسیو برای آن ها ایجاد می کند لذت ببرند، برای استفاده از این ابزار نیاز به هیچ دانشی در زمینه کد نویسی و یا رابط کاربری مانند HTML ، CSS و... نمی باشد .


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



[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]

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

دوشنبه 13 شهريور 1396
7:59
طراحی سایت

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

شکل های منحصر به فرد در فونت

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


فونت های نستعلیقی

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

توجه به پرینت یک صفحه سایت

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


فونت های باز

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

فونت های نازک

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



[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]

دکمه های زیبا و جذاب در طراحی سایت

دوشنبه 13 شهريور 1396
7:58
طراحی سایت

یکی از مهم ترین المان های که طراحان هنگام طراحی سایت از آن استفاده می کنند دکمه ها و یا همان button ها می باشد چرا که این المان نقش زیادی برای CTA های مورد نظر که اهداف یک سایت را برای نشان دادن محصولات و خدمات سایت هستند ایفا می کند ، هر چه این المان زیباتر و جذاب تر باشد مخاطبان بیشتری جذب آن شده و احتمال نرخ تبدیل بالاتر می رود . یکی از استایل های که برای طراحی این المان می توان به کار رود تا زیبای آن بیشتر شود استایل btn.css می باشد . طراحان سایت می توانند با ورود به سایت bttn.surge.sh به صورت آنلاین دمو این استایل را به خوبی مشاهده نمایند و چگونگی قرار گرفتن آن در سایت را امتحان نمایند همچنین طراحان و یا کاربرانی که آن سایت را مشاهده می کنند می توانند رنگ های متنوعی را بر روی دکمه های مختلف امتحان کرده تا دکمه با رنگ خاص سایت خود را پیدا کنند و بعد از آن می توانند کد آن دکمه را کپی کرده و در طراحی سایت خود استفاده نمایند . یکی دیگر از ویژگی های این btn.css سبک بودن آن می باشد چرا که بیشتر از چند کیلو بایت فضا اشغال نمی کند و هنگام لود صفحه سایت به راحتی در آن بارگذاری می شود . همچنین برخی از رنگ ها به صورت پیش فرض برای کاربران سایت به نمایش در می آید که هر کدام اهداف مشخصی را دارند مانند دکمه زرد رنگ برای هشدار ، دکمه قرمز برای توجه به آن بخش و... .



[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]

ابزار Affinity برای طراحی UI و UX در سایت

دوشنبه 13 شهريور 1396
7:58
طراحی سایت

ابزار Affinity به عنوان یک ابزار قدرتمند توانست خیلی زود جایگاه خود را نزد طراحان سایت باز نماید و بسیاری از آن ها دوست دارند با این ابزار در هنگام طراحی سایت کار کنند . جوایز Apple Design Award، و 5 ستاره مشتری در فروشگاه Mac App این ابزار را بسیار مشهور کرده است و بعدا متخصصان این ابزار را به فکر انداخت که از این ابزار برای توسعه و طراحی سایت نیز استفاده کنند .

بسته کامل : ابزار Affinity یک برنامه گرافیکی کامل است نه تکه تکه این به این معنی است که با استفاده از این ابزار می توان طراحی UI یک سایت را از ابتدا تا انتها به زیبای و راحتی در این ابزار انجام داد .

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


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

دقت : این ابزار می تواند تصاویر را تا یک میلیون برابر بزرگ نماید و برای همین طراح می تواند کوچکترین موارد را به دقت زیاد اطراحی نماید .

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


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



[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]

مقایسه SVG با HTML5 Canvas

دوشنبه 13 شهريور 1396
7:58
طراحی سایت

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

جاوا اسکریپت در مقابل XML

بزرگترین تفاوت بین HTML5 Canvas و SVG نشانه گذاری یا به جای آن برنامه نویسی است. در واقع با یک تگ < Canvas > که در HTML5 به کار می رود تصاویر ساخته می شود با این روش اجازه داده می شود انواع تصاویر و اشکال های مختلف نظیر مستطیل ، مربع و حتی چند ضلعی پیچیده ساخته می شود و کتابخانه های جاو اسکریپت نیز برای رنگ آمیزی در آن مورد استفاده قرار می گیرد . همچنین می توان نوع ایجاد تصاویر را در SVG به صورت زیر انجام داد ، طراحان سایت می توانند در طراحی سایت خود از یک خط کد جهت تولید تصاویر و یا اشکال استفاده نمایند این باعث می شود که سرعت تولید اشکال های مختلف برای طراحان ساده تر باشند همچنین SVG از نشانگذاری XML استفاده می کند که برای بسیار قابل فهم تر می باشد .


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


پیکسل در مقابل بردار

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


تعاملات و اثرات

فرمت SVG از CSS پشتیبانی می کند و تمامی گزینه های Style نیز در دسترس قرار دارند . به این ترتیب شما می توانید جلوه های شناور را به شکل های SVG ایجاد نمایید و با رنگ های مختلف آن ها را تغییر دهید . همچنین می توان با استفاده از کتابخانه های جاو اسکریپت مانند Canvas ، فرمت SVG را آدرس دهی نمود .

سرعت

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

دستکاری در پیکسل

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



[ بازدید : 3 ] [ امتیاز : 0 ] [ نظر شما :
]

ابزار Page Weight روشی برای بهینه کردن تصاویر سایت

دوشنبه 13 شهريور 1396
7:57
طراحی سایت

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



[ بازدید : 2 ] [ امتیاز : 0 ] [ نظر شما :
]
تمامی حقوق این وب سایت متعلق به طراحی سایت است. || طراح قالب avazak.ir
ساخت وبلاگ تالار ایجاد وبلاگ عکس عاشقانه فال حافظ فال حافظ خرید بک لینک بهترین گوشی برای موزیک بهترین گوشی برای سلفی بهترین گوشی برای بازی راهنمای خرید تلویزیون راهنمای خرید موبایل قیمت لپ تاپ راهنمای خرید گوشی قیمت تبلت قیمت انواع تبلت لپ تاپ قیمت خرید آنتی ویروس دانلود آهنگ جدید دانلود تک آهنگ بک لینک جوغن
بستن تبلیغات [X]