لایو آیکن
لایو آیکن
نوشته شده توسط محسن فتحی در تاریخ 1398/6/6

لایو آیکن چیست ؟

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

 

لایو آیکن به زیبایی سایت چه کمکی میکند ؟

 

ساختار لایو آیکن چگونه است ؟

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

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

نمونه لایو ایکن

 

طرز استفاده از لایو ایکن چگون است ؟

  1. اپتدا کتابخانه های Jquery و raphael را طبق کد زیر به صفحه اضافه کنید :

<script src="http://ippvco.com/LiveIcon/jquery-1.9.1.min.js"></script>
  <script src="http://ippvco.com/LiveIcon/raphael-min.js"></script>

  1. برای استفاده از ایکن زنده اپتدا به صفحه انتخاب ایکن زنده مراجعه کنید
  2. ایکن های خود را انخاب نمایید
  3. به قسمت تنظیمات رفته و تنظیمات پیشفرض را انجام دهید که این قسمت اجباری نیست
  4. روی دکمه دریافت کد کلیک نمایید تا کد ایکن های انتخابی شما ساخته شود.
  5. کد را دریافت کرده و به صفحه خود اضافه کنید (باید درون تگ <script>اینجا<script/> قرار بگیرد .
  6. در نهایت به این شکل میتوانید از ایکن زنده استفاده کنید و نمایش دهید :

<span class='livicon' data-n='Name' data-c='#000' data-hc='#f08' data-size='200'></span>

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