لایو آیکن

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

در گذته برای استفاده از ایکن درون سایت ها از تصاویر استفاده میکردند , این تصاویر مشکلات زیادی داشت مثلا با زوم کردن این تصاویر دچار افت کیفیت میشدند , و یا بابت این تصاویر درخواست های زیاد و متعددی به سرور میشد و این بار باعث افت سرعت و پرفورمنسی در سرور میشد , در ادامه ایکن های 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>

• data-n : نام ایکن
• data-c : رنگ ایکن
• data-hc : رنگ ایکن موقع هاور موس
• data-size :‌ اندازه ایکن بر حسب پیکسل

طراحی سایت

ایکن

لایو ایکن

سایت

UI

ایکن زنده

جدیدترین مطالب این دسته

رابط کاربری و تجربه کاربری چیست

بررسی نرم افزار های PWA

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