آیکون‌های سیستمی‌

تاریخ انتشار: 29 مهر 1394

تعداد بازدید: 14 نفر

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

اصول طراحی‌
شکل‌ها درشت و هندسی میباشند
هندسه و سازگاری شکل‌ها به ایکون یک کیفیت منحصر به فرد میدهد و در عین حال آن را ساده و قوی نگاه می‌دارد

ساده

شهودی

قابل اکشن

سازگاری

grid, تناسب و اندازه
grid واحد dp
ایکون‌های سیستمی‌ در ۲۴dp نمایش داده میشوند. به هنگام ساخت این ایکون ها، اهمیت دارد که طراحی‌ در مقیاس ۱۰۰% دقت پیکسل ساخته شود و همچنین به منظور افزایش دقت زوم شود.

مقیاس ۱۰۰%

مقیاس ۸۰۰%

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

Grid

Keylines

محدوده محتوا
محتوای یک ایکون باید درون محدوده زنده باقی‌ بماند. این محتوا تنها میتواند تا مرز‌ها کشیده شود، اما تنها در صورتی‌ که نیاز به بار بصری بیشتری باشد. هرگز بخشی از ایکون را خارج از این محدوده قرار ندهید.

محدوده زنده
محتوای ایکون محدود به محوطه زنده ۲۰ در ۲۰ dp با ۴px کادر می‌باشد.

محدوده کادر
۴px فضای‌ خالی‌ دور محدوده زنده ۲۰ در ۲۰ dp به عنوان کادر وجود دارد.

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

مربع - طول ۱۸dp و عرض ۱۸dp

دایره - قطر ۲۰dp

مستطیل عمودی - طول ۲۰dp و عرض ۱۶dp

مستطیل افقی - طول ۱۶dp و عرض ۲۰dp

هندسه
استاندارد‌های از پیش تعیین شده برای شکل‌های کلیدی وجود دارد: دایره، مربع، مستطیل، خطوط قائم و اریب. این پالت کوچک جهانی‌ و ساده المان‌ها به منظور یک پارچه سازی سیستم ایکون‌های گوگل و سیستم دار کردن جایگاه قرار گیری بر روی grid ایکون ارائه شده است.

ساختار

آرایش

اشتراک گذاری:

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

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

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

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

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

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

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.