لایو آیکن
لایو آیکن
نوشته شده توسط محسن فتحی در تاریخ 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